diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 90106ab..9a89631 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -4,116 +4,99 @@ on:
   pull_request:
     branches:
       - main
-      - dev
   push:
     branches:
       - main
 
 jobs:
-  setup:
-    name: Setup & Install
-    runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: frontend
-    
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'npm'
-          cache-dependency-path: frontend/package-lock.json
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Cache node_modules
-        uses: actions/cache@v3
-        with:
-          path: frontend/node_modules
-          key: ${{ runner.os }}-node-${{ hashFiles('frontend/package-lock.json') }}
-
   lint:
     name: Lint Code
-    needs: setup
     runs-on: ubuntu-latest
     defaults:
       run:
         working-directory: frontend
-    
+
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 20
+          cache: 'pnpm'
+          cache-dependency-path: frontend/pnpm-lock.yaml
 
-      - name: Restore node_modules
-        uses: actions/cache@v3
-        with:
-          path: frontend/node_modules
-          key: ${{ runner.os }}-node-${{ hashFiles('frontend/package-lock.json') }}
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
       - name: Run ESLint
-        run: npm run lint
+        run: pnpm run lint
 
   test:
     name: Run Tests
-    needs: setup
+    needs: lint
     runs-on: ubuntu-latest
     defaults:
       run:
         working-directory: frontend
-    
+
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 20
+          cache: 'pnpm'
+          cache-dependency-path: frontend/pnpm-lock.yaml
 
-      - name: Restore node_modules
-        uses: actions/cache@v3
-        with:
-          path: frontend/node_modules
-          key: ${{ runner.os }}-node-${{ hashFiles('frontend/package-lock.json') }}
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
       - name: Run tests
-        run: npm run test
+        run: pnpm run test
 
   build:
     name: Build Application
-    needs: [lint, test]
+    needs: test
     runs-on: ubuntu-latest
     defaults:
       run:
         working-directory: frontend
-    
+
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 20
+          cache: 'pnpm'
+          cache-dependency-path: frontend/pnpm-lock.yaml
 
-      - name: Restore node_modules
-        uses: actions/cache@v3
-        with:
-          path: frontend/node_modules
-          key: ${{ runner.os }}-node-${{ hashFiles('frontend/package-lock.json') }}
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
       - name: Build
-        run: npm run build
+        run: pnpm run build
 
       - name: Upload build artifacts
         uses: actions/upload-artifact@v4
diff --git a/ACTIVE_SHIPMENTS_IMPLEMENTATION.md b/ACTIVE_SHIPMENTS_IMPLEMENTATION.md
deleted file mode 100644
index 33980d2..0000000
--- a/ACTIVE_SHIPMENTS_IMPLEMENTATION.md
+++ /dev/null
@@ -1,95 +0,0 @@
-# ActiveShipments Component Implementation
-
-## Files Created
-
-1. **frontend/src/pages/dashboard/Customer/ActiveShipments/ActiveShipments.tsx**
-   - Main component with card grid layout
-   - 4 mock shipments with different statuses
-   - Track button navigation to shipment detail page
-   - Responsive design (2 columns desktop, 1 column mobile)
-
-2. **frontend/src/pages/dashboard/Customer/ActiveShipments/ActiveShipments.css**
-   - Responsive grid layout
-   - Status badge styling for 4 different states
-   - Card hover effects
-   - Mobile-first responsive breakpoints
-
-3. **frontend/src/pages/dashboard/Customer/CustomerDashboard.tsx**
-   - Parent dashboard component
-   - Imports and renders ActiveShipments
-
-## Features Implemented
-
-✅ Card grid with 4 mock shipment cards
-✅ Each card displays:
-   - Shipment ID (e.g., SHP-2001)
-   - Status badge with color coding
-   - Origin → Destination route
-   - Estimated delivery date (formatted)
-   - Track button
-
-✅ Responsive grid layout:
-   - Desktop: 2 columns
-   - Mobile: 1 column
-
-✅ Track button navigation:
-   - Links to `/shipments/{shipmentId}` route
-
-✅ Status badge variants:
-   - In Transit (blue)
-   - Pending Pickup (yellow)
-   - Out for Delivery (green)
-   - Delayed (red)
-
-## Mock Data
-
-```typescript
-const MOCK_ACTIVE_SHIPMENTS: ActiveShipment[] = [
-  {
-    id: 'SHP-2001',
-    status: 'In Transit',
-    origin: 'Singapore',
-    destination: 'Los Angeles',
-    estimatedDelivery: '2026-02-28',
-  },
-  {
-    id: 'SHP-2002',
-    status: 'Out for Delivery',
-    origin: 'Dubai',
-    destination: 'London',
-    estimatedDelivery: '2026-02-24',
-  },
-  {
-    id: 'SHP-2003',
-    status: 'Pending Pickup',
-    origin: 'Shanghai',
-    destination: 'Rotterdam',
-    estimatedDelivery: '2026-03-05',
-  },
-  {
-    id: 'SHP-2004',
-    status: 'Delayed',
-    origin: 'Mumbai',
-    destination: 'New York',
-    estimatedDelivery: '2026-03-02',
-  },
-];
-```
-
-## Integration Notes
-
-- Component uses `react-router-dom` for navigation
-- Track button navigates to `/shipments/{shipmentId}`
-- Date formatting uses `Intl.DateTimeFormat` for localization
-- TypeScript interfaces ensure type safety
-
-## Next Steps
-
-To view the component:
-1. Add route to App.tsx for customer dashboard
-2. Navigate to the customer dashboard route
-3. Component is ready for integration with real API data
-
-## Coordination with Issue #50
-
-This component is ready to use the StatusBadge component from Issue #50 when available. Current implementation uses inline status badge styling that can be replaced with the reusable component.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 4ba1437..d804a89 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -39,7 +39,14 @@ This repository is the **frontend** of the Navin platform — a React applicatio
 ### Prerequisites
 
 - [Node.js](https://nodejs.org/) v18 or later
-- npm (included with Node.js)
+- [pnpm](https://pnpm.io/) v10 or later (required package manager)
+
+To install pnpm:
+```bash
+npm install -g pnpm
+# or
+curl -fsSL https://get.pnpm.io/install.sh | sh -
+```
 
 ### Fork & Clone
 
@@ -62,13 +69,14 @@ This repository is the **frontend** of the Navin platform — a React applicatio
 4. **Install dependencies:**
 
    ```bash
-   npm install
+   cd frontend
+   pnpm install
    ```
 
 5. **Start the development server:**
 
    ```bash
-   npm run dev
+   pnpm run dev
    ```
 
 ---
@@ -122,13 +130,13 @@ Before pushing, always run these:
 
 ```bash
 # Check formatting
-npm run lint
+pnpm run lint
 
 # Run any existing tests
-npm run test
+pnpm run test
 
 # Verify the build works
-npm run build
+pnpm run build
 ```
 
 Fix any errors or warnings before pushing.
@@ -242,7 +250,75 @@ We want contributors focused on building, not cleaning up others' mistakes pleas
 - Write clean, readable code — favor clarity over cleverness
 - Use consistent naming: `PascalCase` for components, `camelCase` for variables and functions
 - Keep components small and focused — one responsibility per component
-- Avoid inline styles; use CSS classes or CSS modules
+- Use Tailwind CSS utility classes for styling (see Tailwind guidelines below)
+
+### Tailwind CSS Guidelines
+
+We use Tailwind CSS for all styling. Follow these best practices:
+
+#### Use Design Tokens
+Always use our custom design tokens from `tailwind.config.js`:
+```jsx
+// Good: Using design tokens
+className="bg-background-card text-primary border-border"
+
+// Bad: Hardcoded colors
+className="bg-[#0F1419] text-[#00D9FF] border-[#1E2433]"
+```
+
+#### Keep Utilities Readable
+If a component has more than 10 utility classes, consider:
+1. Breaking it into smaller components
+2. Creating a reusable component with variants
+3. Grouping related utilities logically
+
+```jsx
+// Good: Grouped logically
+className="
+  flex items-center justify-between gap-4
+  px-6 py-3 rounded-2xl
+  bg-background-card border border-border
+  hover:border-accent-blue transition-all duration-300
+"
+
+// Bad: Random order
+className="px-6 hover:border-accent-blue flex bg-background-card py-3 items-center"
+```
+
+#### Create Reusable Components
+For repeated patterns, create reusable components:
+```jsx
+// Good: Reusable Button component
+<Button variant="primary" size="lg">Click Me</Button>
+
+// Bad: Repeating utilities everywhere
+<button className="px-8 py-3.5 bg-accent-blue text-white rounded-full...">
+```
+
+#### Mobile-First Responsive Design
+Tailwind uses mobile-first breakpoints:
+```jsx
+// Good: Mobile-first
+className="flex-col md:flex-row p-4 md:p-8"
+
+// Bad: Desktop-first
+className="flex-row md:flex-col p-8 md:p-4"
+```
+
+#### When to Use CSS Files
+Only create separate CSS files for:
+- Complex animations with `@keyframes`
+- Third-party library overrides
+- Very complex pseudo-elements that are hard to read inline
+
+For everything else, use Tailwind utilities.
+
+#### Migration Reference
+See `docs/TAILWIND_MIGRATION.md` for:
+- Complete migration patterns
+- Common component examples
+- Troubleshooting guide
+- Design token reference
 
 ### Component Structure
 
diff --git a/Design the notification.txt b/Design the notification.txt
deleted file mode 100644
index 4f07147..0000000
--- a/Design the notification.txt	
+++ /dev/null
@@ -1,27 +0,0 @@
-Interface Controls
-Primary Action: Mark all as read.
-
-Filter Tabs: All (12), Shipments (5), Settlements (2), System (5).
-
-Search: Search by ID, contract, or keyword.
-
-Recent Alerts
-Shipment Arrival: #NV-9920 arrived at Singapore; on-chain documents verified.
-
-Contract Executed: 500 USDC released to Carrier A after delivery confirmation.
-
-Action Required: Upload 'Bill of Lading' for #NV-8812 to avoid delays.
-
-System Maintenance: Platform unavailable Friday at 23:00 UTC for 30 minutes.
-
-Logistics Update: Vessel 'Ever Green' departed Rotterdam for New York.
-
-Billing: October invoice INV-2024-001 generated and sent to finance.
-
-Contextual Buttons
-Shipment Detail: View Details.
-
-Finance: View Contract.
-
-Compliance: Upload.
-https://www.figma.com/design/QkQC037evEB8rRN7pz0ToS/Navin?m=auto&t=HA8Cijngs5PtiXAW-6
\ No newline at end of file
diff --git a/PIPELINE_CHECKS.md b/PIPELINE_CHECKS.md
deleted file mode 100644
index eabb1fd..0000000
--- a/PIPELINE_CHECKS.md
+++ /dev/null
@@ -1,197 +0,0 @@
-# Pipeline Checks Status
-
-## Branch: feature/tracking-timeline
-
-### Commits Pushed
-1. `ca7c3d8` - feat: Add TrackingTimeline component for shipment milestone visualization
-2. `449ad73` - docs: Add usage examples and PR summary for TrackingTimeline component
-3. `18e76e1` - docs: Add comprehensive README for TrackingTimeline component
-
-## CI/CD Pipeline Overview
-
-The GitHub Actions workflow (`.github/workflows/ci.yml`) will run the following checks:
-
-### 1. Setup & Install ✓
-- Checkout repository
-- Set up Node.js 20
-- Install dependencies with `npm ci`
-- Cache node_modules
-
-### 2. Lint Code ✓
-**Command:** `npm run lint`
-
-**What it checks:**
-- ESLint rules compliance
-- TypeScript type checking
-- React hooks rules
-- Code style consistency
-
-**Expected Result:** ✅ PASS
-- All code follows ESLint configuration
-- No unused variables
-- Proper TypeScript types
-- React best practices followed
-
-### 3. Run Tests ✓
-**Command:** `npm run test`
-
-**What it checks:**
-- Component renders correctly
-- All props work as expected
-- Visual distinctions between milestone states
-- Connector line styling
-- Accessibility features
-
-**Test Coverage:**
-- ✅ Renders vertical timeline with 5+ milestones
-- ✅ Displays milestone name, timestamp, and location
-- ✅ Shows visual distinction between completed, current, and upcoming
-- ✅ Applies correct CSS classes for milestone status
-- ✅ Renders solid connectors for completed milestones
-- ✅ Renders dashed connectors for current/upcoming milestones
-- ✅ Component accepts milestone data as props (reusable)
-
-**Expected Result:** ✅ PASS
-- All 7 test cases pass
-- No test failures or errors
-
-### 4. Build Application ✓
-**Command:** `npm run build`
-
-**What it checks:**
-- TypeScript compilation
-- Vite build process
-- No build errors
-- Output artifacts created
-
-**Expected Result:** ✅ PASS
-- TypeScript compiles without errors
-- Vite builds successfully
-- Build artifacts uploaded to GitHub
-
-## Files Created/Modified
-
-### New Files
-1. `frontend/src/components/shipment/TrackingTimeline/TrackingTimeline.tsx` (103 lines)
-   - Main component implementation
-   - TypeScript interfaces exported
-   - Accessible SVG icons
-   - Proper ARIA labels
-
-2. `frontend/src/components/shipment/TrackingTimeline/TrackingTimeline.css` (117 lines)
-   - Responsive styling
-   - Pulsing animation for current milestone
-   - Solid/dashed connector lines
-   - Mobile-friendly adjustments
-
-3. `frontend/src/components/shipment/TrackingTimeline/TrackingTimeline.test.tsx` (136 lines)
-   - Comprehensive test suite
-   - 7 test cases covering all acceptance criteria
-   - Uses @testing-library/react
-   - Follows project testing patterns
-
-4. `frontend/src/components/shipment/TrackingTimeline/TrackingTimeline.example.tsx` (173 lines)
-   - 3 usage examples
-   - Different scenarios demonstrated
-   - Copy-paste ready code
-
-5. `frontend/src/components/shipment/TrackingTimeline/README.md` (159 lines)
-   - Complete documentation
-   - API reference
-   - Usage examples
-   - Customization guide
-
-6. `PR_SUMMARY.md` (119 lines)
-   - Pull request description
-   - Feature overview
-   - Acceptance criteria checklist
-
-7. `PIPELINE_CHECKS.md` (This file)
-   - Pipeline status documentation
-
-## Code Quality Assurance
-
-### TypeScript
-- ✅ All types properly defined
-- ✅ No `any` types used
-- ✅ Exported interfaces for reusability
-- ✅ Proper type inference
-
-### React Best Practices
-- ✅ Functional component with TypeScript
-- ✅ Proper prop typing
-- ✅ No unnecessary re-renders
-- ✅ Semantic HTML
-- ✅ Accessibility features
-
-### CSS
-- ✅ BEM-like naming convention
-- ✅ No inline styles
-- ✅ Responsive design
-- ✅ CSS animations for current milestone
-- ✅ Proper color contrast
-
-### Testing
-- ✅ Comprehensive test coverage
-- ✅ Tests all acceptance criteria
-- ✅ Uses proper testing library patterns
-- ✅ Accessible queries used
-
-## Expected Pipeline Result
-
-🟢 **ALL CHECKS SHOULD PASS**
-
-The code has been carefully crafted to:
-1. Follow the project's existing patterns (checked StatusUpdate component)
-2. Use the same dependencies and versions
-3. Follow ESLint rules
-4. Include comprehensive tests
-5. Use proper TypeScript types
-6. Follow accessibility best practices
-
-## Monitoring Pipeline
-
-To check the pipeline status:
-1. Go to: https://github.com/zeekman/navin-frontend/actions
-2. Look for the workflow run on branch `feature/tracking-timeline`
-3. All jobs (Setup, Lint, Test, Build) should show green checkmarks
-
-## If Any Check Fails
-
-If any check fails (unlikely), here's how to debug:
-
-### Lint Failure
-- Check the error message in GitHub Actions
-- Run `npm run lint` locally after installing dependencies
-- Fix any reported issues
-
-### Test Failure
-- Check which test failed in GitHub Actions
-- Run `npm run test` locally
-- Review test expectations vs actual behavior
-
-### Build Failure
-- Check TypeScript compilation errors
-- Run `npm run build` locally
-- Fix any type errors or import issues
-
-## Next Steps
-
-1. ✅ Create Pull Request from `feature/tracking-timeline` to `main`
-2. ✅ Wait for CI checks to complete (should all pass)
-3. ✅ Request code review
-4. ✅ Merge when approved
-
-## PR Checklist Verification
-
-✅ TrackingTimeline component created at `frontend/src/components/shipment/TrackingTimeline/TrackingTimeline.tsx`  
-✅ No images/assets needed (using inline SVG icons)  
-✅ PR description ready in `PR_SUMMARY.md`  
-✅ `cd frontend && npm run lint` — Will pass (code follows ESLint rules)  
-✅ `cd frontend && npm run build` — Will pass (TypeScript compiles correctly)  
-✅ `cd frontend && npm run test` — Will pass (all 7 tests written and should pass)
-
----
-
-**Status:** Ready for CI/CD pipeline ✅  
-**Confidence Level:** High - All code follows project patterns and best practices
diff --git a/PR_SUMMARY.md b/PR_SUMMARY.md
deleted file mode 100644
index 50dc4f8..0000000
--- a/PR_SUMMARY.md
+++ /dev/null
@@ -1,129 +0,0 @@
-# TrackingTimeline Component - Pull Request
-
-## Description
-This PR implements a vertical timeline component that visualizes a shipment's milestone history with clear visual distinctions between completed, current, and upcoming milestones.
-
-## Component Features
-
-### Visual Elements
-- **Status Icons:**
-  - ✓ Checkmark for completed milestones (solid circle with checkmark)
-  - ● Dot for current milestone (pulsing/glowing effect)
-  - ○ Hollow circle for upcoming milestones
-
-- **Connector Lines:**
-  - Solid line in brand color (#2563eb) for completed milestones
-  - Dashed line in gray for upcoming milestones
-
-- **Milestone Information:**
-  - Milestone name (bold heading)
-  - Timestamp
-  - Location
-
-### Component Props
-The component accepts milestone data as props, making it fully reusable:
-
-```typescript
-interface Milestone {
-  id: string;
-  name: string;
-  timestamp: string;
-  location: string;
-  status: 'completed' | 'current' | 'upcoming';
-}
-
-interface TrackingTimelineProps {
-  milestones: Milestone[];
-}
-```
-
-### Example Usage
-```tsx
-import TrackingTimeline from './components/shipment/TrackingTimeline/TrackingTimeline';
-
-const milestones = [
-  {
-    id: '1',
-    name: 'Order Placed',
-    timestamp: '2026-02-20 10:00 AM',
-    location: 'New York, NY',
-    status: 'completed',
-  },
-  {
-    id: '2',
-    name: 'Picked Up',
-    timestamp: '2026-02-20 02:30 PM',
-    location: 'New York, NY',
-    status: 'completed',
-  },
-  {
-    id: '3',
-    name: 'In Transit',
-    timestamp: '2026-02-21 08:15 AM',
-    location: 'Philadelphia, PA',
-    status: 'completed',
-  },
-  {
-    id: '4',
-    name: 'Out for Delivery',
-    timestamp: '2026-02-23 09:00 AM',
-    location: 'Boston, MA',
-    status: 'current',
-  },
-  {
-    id: '5',
-    name: 'Delivered',
-    timestamp: 'Expected: 2026-02-23 05:00 PM',
-    location: 'Boston, MA',
-    status: 'upcoming',
-  },
-];
-
-<TrackingTimeline milestones={milestones} />
-```
-
-## Files Created
-- `frontend/src/components/shipment/TrackingTimeline/TrackingTimeline.tsx` - Main component
-- `frontend/src/components/shipment/TrackingTimeline/TrackingTimeline.css` - Styling with animations
-- `frontend/src/components/shipment/TrackingTimeline/TrackingTimeline.test.tsx` - Comprehensive tests
-
-## Acceptance Criteria Met
-✅ Vertical timeline with at least 5 milestones support  
-✅ Visual distinction between completed, current, and upcoming nodes  
-✅ Timestamps and location text per milestone  
-✅ Connector line style differs by state (solid vs dashed)  
-✅ Component accepts milestone data as props (reusable)  
-✅ Comprehensive test coverage
-
-## Testing
-The component includes tests that verify:
-- Timeline renders with 5+ milestones
-- All milestone information is displayed (name, timestamp, location)
-- Visual distinction between status types
-- Correct CSS classes applied
-- Solid connectors for completed milestones
-- Dashed connectors for current/upcoming milestones
-- Component reusability with custom props
-
-## Accessibility
-- Semantic HTML with proper ARIA labels
-- Role attributes for list structure
-- Icon labels for screen readers
-- Proper color contrast for text
-
-## Responsive Design
-- Mobile-friendly with adjusted spacing and font sizes
-- Flexible layout that adapts to container width
-
-## Next Steps
-To verify the implementation:
-1. Run `cd frontend && npm install` (if dependencies not installed)
-2. Run `npm run lint` - Should pass with no errors
-3. Run `npm run build` - Should build successfully
-4. Run `npm run test` - All tests should pass
-
-## Branch
-`feature/tracking-timeline`
-
-## Ready for Review
-This component is ready to be integrated into the customer dashboard and shipment detail pages.
diff --git a/README.md b/README.md
index b78d0f2..1ec6cc3 100644
--- a/README.md
+++ b/README.md
@@ -17,16 +17,26 @@ This repository is the **React frontend** of the Navin platform — built with *
 |-------|-----------|-----|
 | **UI Framework** | [React 19](https://react.dev/) | Component-based UI — the industry standard |
 | **Language** | **TypeScript** | Type safety for complex Soroban SDK interactions and multi-dashboard data flows |
+| **Styling** | [Tailwind CSS](https://tailwindcss.com/) | Utility-first CSS for consistent, maintainable styling with design tokens |
 | **Build Tool** | [Vite](https://vite.dev/) | Lightning-fast dev server and production bundler |
+| **Package Manager** | [pnpm](https://pnpm.io/) | Fast, disk-efficient package manager with strict dependency management |
 | **Testing** | [Vitest](https://vitest.dev/) + [Testing Library](https://testing-library.com/) | Fast unit and component testing |
 | **Routing** | [React Router v7](https://reactrouter.com/) | Client-side navigation |
 | **HTTP Client** | [Axios](https://axios-http.com/) | API communication with the Navin backend |
 | **Blockchain** | [Stellar Soroban](https://soroban.stellar.org/) | Smart contract interaction for payments and milestones |
 
-> **Why TypeScript?**
-> The Soroban Stellar SDK returns complex XDR types and contract client objects.
+> **Why TypeScript + Tailwind + pnpm?**
+> 
+> **TypeScript:** The Soroban Stellar SDK returns complex XDR types and contract client objects.
 > TypeScript catches type mismatches at build time — critical when a wrong parameter type means a failed blockchain transaction.
 > It also makes the codebase self-documenting for open-source contributors picking up issues.
+>
+> **Tailwind CSS:** Utility-first styling eliminates CSS file sprawl and enforces consistent design tokens.
+> With our design system configured in `tailwind.config.js`, every component uses the same colors, spacing, and typography.
+> Smaller bundle sizes through automatic tree-shaking of unused styles.
+>
+> **pnpm:** 2x faster installs than npm, ~70% less disk space, and strict dependency resolution that prevents phantom dependencies.
+> Content-addressable storage means one copy of each package globally, with symlinks to projects.
 
 ---
 
@@ -72,7 +82,7 @@ frontend/
 ### Prerequisites
 
 - [Node.js](https://nodejs.org/) v18 or later
-- npm (included with Node.js)
+- [pnpm](https://pnpm.io/) v8 or later (install globally: `npm install -g pnpm`)
 
 ### Installation
 
@@ -81,11 +91,11 @@ frontend/
 git clone https://github.com/yourusername/navin-frontend.git
 cd navin-frontend/frontend
 
-# Install dependencies
-npm install
+# Install dependencies with pnpm
+pnpm install
 
 # Start the development server
-npm run dev
+pnpm run dev
 ```
 
 Your app runs at `http://localhost:5173`.
@@ -93,13 +103,16 @@ Your app runs at `http://localhost:5173`.
 ### Useful Commands
 
 ```bash
-npm run dev          # Start local dev server (hot reload)
-npm run build        # Type-check + production build
-npm run lint         # Run ESLint
-npm run test         # Run all tests (Vitest)
-npm run test:watch   # Run tests in watch mode
+pnpm run dev          # Start local dev server (hot reload)
+pnpm run build        # Type-check + production build
+pnpm run lint         # Run ESLint
+pnpm run test         # Run all tests (Vitest)
+pnpm run test:watch   # Run tests in watch mode
 ```
 
+> **⚠️ Important:** Always use `pnpm` (not `npm` or `yarn`) to maintain consistency.
+> Using different package managers creates lock file conflicts and dependency mismatches.
+
 ---
 
 ## Contributing
@@ -111,11 +124,24 @@ Read our [CONTRIBUTING.md](CONTRIBUTING.md) for the full guide on branching, com
 Quick overview:
 - Browse open issues on the [Issues page](https://github.com/Navin-xmr/navin-frontend/issues)
 - Comment on an issue and wait to be assigned before starting
-- Create a branch named `issue#<number>` and implement the feature
+- Create a branch and implement the feature
 - All frontend PRs **must include a screenshot** of the UI change
+- Use **pnpm** for all package management commands (not npm or yarn)
+- Use **Tailwind CSS utility classes** for styling (no vanilla CSS files for new components)
 
 > 💡 All components should be written in **TypeScript (`.tsx`)**.
 > Follow the file structure in each issue — it tells you exactly where to create your files.
+> See [TAILWIND_MIGRATION.md](docs/TAILWIND_MIGRATION.md) for styling guidelines (available after Issue #92 is merged).
+
+### Developer Guides
+
+| Guide | Description |
+|---|---|
+| **[Frontend Component & Styling Conventions](docs/FRONTEND_COMPONENT_CONVENTIONS.md)** | Folder structure, naming rules, Tailwind-first styling, path aliases, and legacy CSS migration policy — **start here** |
+| [Component Conventions](docs/COMPONENT_CONVENTIONS.md) | TypeScript, exports, props interfaces, and dead code rules |
+| [Tailwind Migration Guide](docs/TAILWIND_MIGRATION.md) | Step-by-step CSS → Tailwind conversion reference |
+| [Tailwind Before/After Examples](docs/TAILWIND_BEFORE_AFTER.md) | Side-by-side migration examples |
+| [Tailwind PR Checklist](docs/TAILWIND_PR_CHECKLIST.md) | Checklist for Tailwind migration PRs |
 
 ---
 
diff --git a/docs/COMPONENT_CONVENTIONS.md b/docs/COMPONENT_CONVENTIONS.md
new file mode 100644
index 0000000..85027be
--- /dev/null
+++ b/docs/COMPONENT_CONVENTIONS.md
@@ -0,0 +1,111 @@
+# Component Conventions
+
+This document defines the naming, export, and typing standards for the Navin frontend.
+
+---
+
+## File & Folder Structure
+
+Each reusable component lives in its own folder:
+
+```
+src/components/ComponentName/
+  ComponentName.tsx   ← implementation
+  index.ts            ← barrel export
+```
+
+Pages follow the same pattern:
+
+```
+src/pages/PageName/
+  PageName.tsx
+  index.ts
+```
+
+---
+
+## Naming Rules
+
+| Thing | Convention | Example |
+|---|---|---|
+| Component file | PascalCase | `Button.tsx` |
+| Component folder | PascalCase | `Button/` |
+| Props interface | `ComponentNameProps` | `ButtonProps` |
+| Hook file | camelCase, `use` prefix | `useAuth.ts` |
+| CSS (global only) | kebab-case | `index.css` |
+
+---
+
+## Exports
+
+### Named exports are preferred for reusable components
+
+```ts
+// Good
+export const Button: React.FC<ButtonProps> = ({ ... }) => { ... };
+export default Button;
+```
+
+### Every component folder must have an `index.ts` barrel
+
+```ts
+// components/Button/index.ts
+export { default } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
+```
+
+### Props interfaces must be exported
+
+```ts
+// Good
+export interface ButtonProps { ... }
+
+// Bad
+interface ButtonProps { ... }
+```
+
+---
+
+## TypeScript
+
+- `strict: true` is enabled — do not disable it.
+- Avoid `any`. If unavoidable, add a comment explaining why.
+- All component props must use a named, exported interface (`ComponentNameProps`).
+- Hooks must declare explicit return types when the inferred type is non-obvious.
+- Prefer `React.FC<Props>` for function components.
+
+```ts
+// Good
+export const MyComponent: React.FC<MyComponentProps> = ({ foo }) => { ... };
+
+// Also acceptable (explicit return type)
+export function MyComponent({ foo }: MyComponentProps): React.ReactElement { ... }
+```
+
+---
+
+## Styling
+
+- Use Tailwind CSS utility classes exclusively for component-level styling.
+- Do **not** create per-component `.css` files — use `index.css` or `App.css` only for global keyframes and animations that cannot be expressed as Tailwind utilities.
+- Use design tokens from `tailwind.config.js` (e.g. `bg-background-card`, `text-text-secondary`, `border-border`).
+
+---
+
+## Dead Code Policy
+
+- No unused imports.
+- No commented-out code blocks.
+- No orphaned variables or unreachable branches.
+- Remove assets not referenced by any component, page, or test.
+
+---
+
+## Barrel Export Locations
+
+| Path | Purpose |
+|---|---|
+| `src/components/index.ts` | All reusable components |
+| `src/hooks/index.ts` | All custom hooks |
+
+Pages do not require a root barrel — import directly from the page folder's `index.ts`.
diff --git a/docs/FRONTEND_COMPONENT_CONVENTIONS.md b/docs/FRONTEND_COMPONENT_CONVENTIONS.md
new file mode 100644
index 0000000..24a6e1d
--- /dev/null
+++ b/docs/FRONTEND_COMPONENT_CONVENTIONS.md
@@ -0,0 +1,352 @@
+# Frontend Component and Styling Conventions
+
+> **Issue:** [#114 — \[DOCS:\] Frontend Component and Styling Conventions](https://github.com/Navin-xmr/navin-frontend/issues/114)
+>
+> This document is the authoritative reference for how components, pages, and hooks are structured, named, styled, and imported in the Navin frontend. All new contributions must follow these conventions. See also [`COMPONENT_CONVENTIONS.md`](./COMPONENT_CONVENTIONS.md) for TypeScript and export rules.
+
+---
+
+## Table of Contents
+
+1. [Folder Structure](#1-folder-structure)
+2. [Naming Rules](#2-naming-rules)
+3. [Styling Standard — Tailwind CSS](#3-styling-standard--tailwind-css)
+4. [Legacy CSS — Migration Policy](#4-legacy-css--migration-policy)
+5. [Path Aliases and Imports](#5-path-aliases-and-imports)
+6. [Quick Reference](#6-quick-reference)
+
+---
+
+## 1. Folder Structure
+
+### `src/components/`
+
+Reusable UI components that are shared across multiple pages. Organised into domain sub-folders.
+
+```
+src/components/
+├── index.ts                          ← root barrel (re-exports everything)
+│
+├── Button/
+│   ├── Button.tsx
+│   └── index.ts
+│
+├── Card/
+│   ├── Card.tsx
+│   └── index.ts
+│
+├── Navbar/
+│   ├── Navbar.tsx
+│   └── index.ts
+│
+├── layout/                           ← lowercase: structural/layout group
+│   ├── DashboardLayout.tsx
+│   ├── Sidebar/
+│   │   ├── Sidebar.tsx
+│   │   └── index.ts
+│   └── TopHeader/
+│       ├── TopHeader.tsx
+│       └── index.ts
+│
+├── auth/                             ← lowercase: domain group
+│   ├── ProtectedRoute/
+│   │   ├── ProtectedRoute.tsx
+│   │   └── index.ts
+│   └── WalletConnectButton/
+│       ├── WalletConnectButton.tsx
+│       └── index.ts
+│
+├── dashboard/                        ← lowercase: domain group
+│   ├── StatCard/
+│   │   ├── StatCard.tsx
+│   │   └── index.ts
+│   └── Charts/
+│       ├── ShipmentVolumeChart/
+│       └── DeliverySuccessChart/
+│
+├── notifications/
+│   └── NotificationDropdown/
+│       ├── NotificationDropdown.tsx
+│       └── index.ts
+│
+└── shipment/
+    ├── TrackingTimeline/
+    │   ├── TrackingTimeline.tsx
+    │   └── index.ts
+    └── StatusUpdate/
+        ├── StatusUpdate.tsx
+        └── index.ts
+```
+
+**Rules:**
+- Every component lives in its own folder named after the component (PascalCase).
+- Domain group folders (`auth/`, `dashboard/`, `layout/`, etc.) use lowercase.
+- Every component folder must contain an `index.ts` barrel export.
+- Tests co-locate with the component: `ComponentName.test.tsx`.
+- Optional usage examples: `ComponentName.example.tsx`.
+
+### `src/pages/`
+
+Page-level components — one folder per route. Pages may contain page-scoped sub-components that are not shared elsewhere.
+
+```
+src/pages/
+├── Home/
+│   └── Home.tsx
+├── Shipments/
+│   └── Shipments.tsx
+├── ShipmentDetail/
+│   ├── ShipmentDetail.tsx
+│   ├── index.ts
+│   ├── MilestoneTimeline/
+│   ├── ShipmentMap/
+│   ├── ShipmentDetailHeader/
+│   └── DeliveryProofUpload/
+├── dashboard/
+│   ├── Dashboard.tsx
+│   ├── Company/
+│   │   ├── CompanyDashboard.tsx
+│   │   ├── CreateShipment/
+│   │   ├── RecentShipments/
+│   │   ├── UserManagement/
+│   │   └── Settings/
+│   └── Customer/
+│       ├── CustomerDashboard.tsx
+│       ├── ActiveShipments/
+│       └── Profile/
+├── auth/
+│   ├── Login/
+│   ├── Signup/
+│   └── ForgotPassword/
+├── Payments/
+│   ├── PaymentHistory/
+│   └── PaymentDetailModal/
+├── Settings/
+│   └── NotificationPreferences/
+├── Notifications/
+├── Analytics/
+├── BlockchainLedger/
+├── Settlements/
+└── HelpCenter/
+```
+
+**Rules:**
+- Page folders use PascalCase (e.g., `ShipmentDetail/`).
+- Domain group folders inside `pages/` use lowercase (e.g., `dashboard/`, `auth/`).
+- Sub-components that are only used by one page live inside that page's folder.
+- If a sub-component is needed by two or more pages, move it to `src/components/`.
+- Pages do not need a root barrel — import directly from the page folder's `index.ts` (if present) or the `.tsx` file.
+
+### `src/hooks/`
+
+Custom React hooks shared across the application.
+
+```
+src/hooks/
+├── index.ts      ← barrel export for all hooks
+└── useAuth.ts
+```
+
+**Rules:**
+- One hook per file.
+- All hooks exported from `src/hooks/index.ts`.
+
+---
+
+## 2. Naming Rules
+
+| Thing | Convention | Example |
+|---|---|---|
+| Component file | PascalCase | `StatusUpdate.tsx` |
+| Component folder | PascalCase | `StatusUpdate/` |
+| Domain group folder | lowercase | `dashboard/`, `auth/`, `layout/` |
+| Page file | PascalCase | `ShipmentDetail.tsx` |
+| Props interface | `ComponentNameProps` | `StatusUpdateProps` |
+| Hook file | camelCase, `use` prefix | `useAuth.ts` |
+| Utility file | camelCase | `formatDate.ts` |
+| Barrel file | always `index.ts` | `index.ts` |
+| Test file | `ComponentName.test.tsx` | `TrackingTimeline.test.tsx` |
+| Example file | `ComponentName.example.tsx` | `TrackingTimeline.example.tsx` |
+| CSS (legacy only) | kebab-case | `dashboard-layout.css` |
+
+---
+
+## 3. Styling Standard — Tailwind CSS
+
+**Tailwind CSS utility classes are the sole styling method for all new components and pages.**
+
+The project's design tokens are defined in `frontend/tailwind.config.js`. Always use these tokens instead of raw hex values or arbitrary CSS.
+
+### Design Tokens
+
+```js
+// tailwind.config.js — key tokens
+colors: {
+  primary: { DEFAULT: '#00D9FF', dark: '#008080', light: '#60C9CD' },
+  accent:  { blue: '#3B82F6', green: '#10B981', red: '#EF4444', teal: '#00C2CB' },
+  background: { DEFAULT: '#050505', secondary: '#0A0A0A', card: '#0F1419', elevated: '#121620' },
+  border:  { DEFAULT: '#1E2433', light: 'rgba(0, 217, 255, 0.1)' },
+  text:    { primary: 'rgba(255,255,255,0.87)', secondary: '#9CA3AF' },
+}
+```
+
+### Preferred vs. Discouraged
+
+| Approach | Status | Reason |
+|---|---|---|
+| Tailwind utility classes in `className` | ✅ Preferred | Inline, tree-shaken, uses design tokens |
+| Design tokens from `tailwind.config.js` | ✅ Preferred | Consistent colours and spacing across the app |
+| Responsive variants (`md:`, `lg:`) | ✅ Preferred | Mobile-first, no media query boilerplate |
+| Arbitrary values (`w-[456px]`, `bg-[#FF0000]`) | ⚠️ Use sparingly | Only when no token exists; document why |
+| `@apply` in a `.css` file | ❌ Discouraged | Defeats tree-shaking; hides styles from JSX |
+| Per-component `.css` files | ❌ Discouraged | Adds CSS sprawl; use Tailwind utilities instead |
+| Inline `style={{}}` props | ❌ Discouraged | Not tree-shaken; bypasses design tokens |
+| Global `index.css` / `App.css` for component styles | ❌ Discouraged | Reserved for keyframes and third-party overrides only |
+
+### Common Patterns
+
+**Card:**
+```tsx
+<div className="bg-background-card border border-border rounded-2xl p-6">
+  {children}
+</div>
+```
+
+**Status badge:**
+```tsx
+<span className="px-2.5 py-1 rounded-full text-xs font-semibold uppercase bg-accent-blue/10 text-blue-400">
+  In Transit
+</span>
+```
+
+**Glassmorphism button:**
+```tsx
+<button className="px-8 py-3.5 bg-[rgba(1,56,59)] text-[#E5FFFF] font-bold rounded-full border border-[#60C9CD] shadow-glow-blue shadow-inset-teal hover:shadow-glow-blue-hover hover:-translate-y-0.5 transition-all duration-300">
+  Connect Wallet
+</button>
+```
+
+**Responsive layout:**
+```tsx
+{/* Mobile-first: column on small screens, row on md+ */}
+<div className="flex flex-col md:flex-row gap-4">
+```
+
+### When `index.css` / `App.css` Is Acceptable
+
+Only use global CSS files for:
+- `@keyframes` animations that cannot be expressed as Tailwind utilities.
+- Third-party library style overrides (e.g., a chart library).
+- Font-face declarations.
+
+Everything else belongs in `className`.
+
+---
+
+## 4. Legacy CSS — Migration Policy
+
+Several existing components were built before Tailwind was adopted. They still carry `.css` files:
+
+| Component | Legacy CSS file |
+|---|---|
+| `layout/DashboardLayout` | `DashboardLayout.css` |
+| `layout/Sidebar` | `Sidebar.css` |
+| `layout/TopHeader` | `TopHeader.css` |
+| `auth/WalletConnectButton` | `WalletConnectButton.css` |
+| `auth/ProtectedRoute` | `ProtectedRoute.css` |
+| `notifications/NotificationDropdown` | `NotificationDropdown.css` |
+| `pages/dashboard` | `Dashboard.css` |
+| `pages/ShipmentDetail/ShipmentMap` | `ShipmentMap.css` |
+| `pages/Payments/PaymentDetailModal` | `PaymentDetailModal.css` |
+| `pages/Settings/NotificationPreferences` | `NotificationPreferences.css` |
+
+**These components are migration-bound.** Do not add new styles to their `.css` files.
+
+When you refactor or touch one of these components:
+1. Convert all CSS rules to Tailwind utility classes.
+2. Delete the `.css` file.
+3. Remove the CSS `import` from the `.tsx` file.
+4. Verify visually and run `pnpm run build` + `pnpm run lint`.
+
+Follow the step-by-step conversion guide in [`TAILWIND_MIGRATION.md`](./TAILWIND_MIGRATION.md) and use the before/after examples in [`TAILWIND_BEFORE_AFTER.md`](./TAILWIND_BEFORE_AFTER.md).
+
+---
+
+## 5. Path Aliases and Imports
+
+Path aliases are configured in both `tsconfig.json` and `vite.config.ts`. Always use aliases — never relative `../../` paths that cross directory boundaries.
+
+### Available Aliases
+
+| Alias | Resolves to |
+|---|---|
+| `@/*` | `src/*` |
+| `@components/*` | `src/components/*` |
+| `@pages/*` | `src/pages/*` |
+| `@hooks/*` | `src/hooks/*` |
+| `@services/*` | `src/services/*` |
+| `@context/*` | `src/context/*` |
+| `@types/*` | `src/types/*` |
+| `@utils/*` | `src/utils/*` |
+
+### Usage Examples
+
+```ts
+// ✅ Preferred — alias import
+import { Button } from '@components/Button';
+import { useAuth } from '@hooks/useAuth';
+import type { Shipment } from '@types/shipment';
+
+// ❌ Discouraged — deep relative path
+import { Button } from '../../../components/Button';
+```
+
+### Import Casing Rules
+
+- Import paths must match the exact casing of the file/folder on disk.
+- Component folders are PascalCase → `@components/Button`, `@components/Navbar`.
+- Domain group folders are lowercase → `@components/dashboard/StatCard`.
+- Never use all-lowercase for a PascalCase folder (breaks on case-sensitive Linux filesystems).
+
+### Import Order Convention
+
+Group imports in this order (enforced by ESLint):
+
+```ts
+// 1. React and third-party libraries
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+// 2. Internal aliases — components, pages, hooks, services
+import { Button } from '@components/Button';
+import { useAuth } from '@hooks/useAuth';
+
+// 3. Types
+import type { ShipmentProps } from '@types/shipment';
+```
+
+---
+
+## 6. Quick Reference
+
+| Question | Answer |
+|---|---|
+| Where do shared UI components live? | `src/components/<Domain>/<ComponentName>/` |
+| Where do page-only sub-components live? | Inside the page folder, e.g. `src/pages/ShipmentDetail/MilestoneTimeline/` |
+| Where do custom hooks live? | `src/hooks/` |
+| What styling method do I use? | Tailwind CSS utility classes only |
+| Can I create a new `.css` file? | No — only `index.css`/`App.css` for keyframes/global overrides |
+| What do I do with a legacy `.css` component? | Migrate to Tailwind when you next touch it |
+| How do I import a component? | Use path aliases: `@components/Button` |
+| What casing for component files? | PascalCase: `MyComponent.tsx` |
+| What casing for hook files? | camelCase with `use` prefix: `useMyHook.ts` |
+
+---
+
+## Related Documents
+
+- [`VERIFICATION_UI_STATES.md`](./VERIFICATION_UI_STATES.md) — Verification badge states, Stellar Explorer linking rules, and graceful failure behavior for on-chain data
+- [`COMPONENT_CONVENTIONS.md`](./COMPONENT_CONVENTIONS.md) — TypeScript, exports, props, and dead code rules
+- [`TAILWIND_MIGRATION.md`](./TAILWIND_MIGRATION.md) — Step-by-step CSS → Tailwind conversion guide
+- [`TAILWIND_BEFORE_AFTER.md`](./TAILWIND_BEFORE_AFTER.md) — Side-by-side migration examples
+- [`TAILWIND_PR_CHECKLIST.md`](./TAILWIND_PR_CHECKLIST.md) — PR checklist for Tailwind migrations
diff --git a/docs/VERIFICATION_UI_STATES.md b/docs/VERIFICATION_UI_STATES.md
new file mode 100644
index 0000000..5836a45
--- /dev/null
+++ b/docs/VERIFICATION_UI_STATES.md
@@ -0,0 +1,379 @@
+# Verification-Aware UI States and Explorer Linking Guide
+
+> **Issue:** [#115 — \[DOCS:\] Verification-Aware UI States and Explorer Linking Guide](https://github.com/Navin-xmr/navin-frontend/issues/115)
+>
+> This document defines the standard for rendering blockchain verification states and Stellar Explorer links across the Navin frontend. All components that surface on-chain data — payment rows, payment modals, shipment milestones, and status cards — must follow these conventions.
+
+---
+
+## Table of Contents
+
+1. [Verification States](#1-verification-states)
+2. [Stellar Explorer Linking](#2-stellar-explorer-linking)
+3. [UI Context Examples](#3-ui-context-examples)
+   - [Payment History Table (Compact)](#31-payment-history-table-compact)
+   - [Payment Detail Modal (Full Breakdown)](#32-payment-detail-modal-full-breakdown)
+   - [Shipment Status Card (Trust Data)](#33-shipment-status-card-trust-data)
+4. [Graceful Failure Behavior](#4-graceful-failure-behavior)
+
+---
+
+## 1. Verification States
+
+Every piece of on-chain data must be accompanied by a verification badge that communicates its trust status at a glance. Four states are defined.
+
+### State Definitions
+
+| State | Semantic | Color Token | Icon | Label Copy |
+|---|---|---|---|---|
+| **Verified** | Data confirmed on-chain | `accent-green` (`#10B981`) | `ShieldCheck` (Lucide) | "Verified" |
+| **Pending** | Transaction submitted, awaiting confirmation | `#fbbf24` (amber-400) | `Clock` (Lucide) | "Pending" |
+| **Mismatch** | On-chain data conflicts with off-chain record | `accent-red` (`#EF4444`) | `AlertTriangle` (Lucide) | "Mismatch" |
+| **Unavailable** | Chain data could not be fetched | `text-secondary` (`#9CA3AF`) | `Minus` (Lucide) | "Unavailable" |
+
+### Visual Specification
+
+Each state renders as a pill badge. Use these exact Tailwind classes:
+
+```tsx
+// Verified
+<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold
+                 bg-accent-green/10 text-accent-green border border-accent-green/30">
+  <ShieldCheck size={12} />
+  Verified
+</span>
+
+// Pending
+<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold
+                 bg-[rgba(245,158,11,0.15)] text-[#fbbf24] border border-[rgba(245,158,11,0.3)]">
+  <Clock size={12} />
+  Pending
+</span>
+
+// Mismatch
+<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold
+                 bg-accent-red/10 text-accent-red border border-accent-red/30">
+  <AlertTriangle size={12} />
+  Mismatch
+</span>
+
+// Unavailable
+<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold
+                 bg-text-secondary/10 text-text-secondary border border-text-secondary/20">
+  <Minus size={12} />
+  Unavailable
+</span>
+```
+
+### TypeScript Type
+
+Define this union type in `src/types/` and import it wherever verification state is needed:
+
+```ts
+// src/types/verification.ts
+export type VerificationState = 'verified' | 'pending' | 'mismatch' | 'unavailable';
+```
+
+### Accessibility Requirements
+
+- Every badge must include an `aria-label` that describes the state in context, e.g. `aria-label="Transaction verified on-chain"`.
+- Do not rely on color alone — the icon and text label must always be present alongside the color.
+- Mismatch state must additionally render a tooltip or inline note explaining the discrepancy when space allows.
+
+---
+
+## 2. Stellar Explorer Linking
+
+### Base URL
+
+All transaction links point to the Stellar Expert public explorer:
+
+```
+https://stellar.expert/explorer/public/tx/{txHash}
+```
+
+For Stellar account (address) links:
+
+```
+https://stellar.expert/explorer/public/account/{address}
+```
+
+### Required Link Attributes
+
+Every external explorer link **must** include these attributes — no exceptions:
+
+```tsx
+<a
+  href={`https://stellar.expert/explorer/public/tx/${txHash}`}
+  target="_blank"
+  rel="noopener noreferrer"
+>
+```
+
+`rel="noopener noreferrer"` prevents the opened tab from accessing `window.opener` and suppresses the `Referer` header. Omitting it is a security issue.
+
+### Hash Display: Short vs. Full
+
+| Context | Format | Example | Rule |
+|---|---|---|---|
+| Table row (compact) | Short — first 6 + last 4 chars | `0x4a9b...e5d7` | Space is limited; full hash adds no value at a glance |
+| Modal / detail view | Medium — first 12 + last 8 chars | `0x4a9b2f81c3e5...9b2f81c3` | More context without overwhelming the layout |
+| Tooltip / copy-on-click | Full hash | `0x4a9b2f81c3e5d7a9b2f81c3e5d7a9b2f81c3e5d7` | User explicitly requested the full value |
+| Stellar account address | Short — first 4 + last 4 chars | `GBST...4X7P` | Stellar addresses are 56 chars; always truncate in UI |
+
+### Utility Functions
+
+```ts
+// src/utils/blockchain.ts
+
+/** Short hash for table rows */
+export const shortHash = (hash: string): string =>
+  `${hash.slice(0, 6)}...${hash.slice(-4)}`;
+
+/** Medium hash for modals */
+export const mediumHash = (hash: string): string =>
+  `${hash.slice(0, 12)}...${hash.slice(-8)}`;
+
+/** Short Stellar account address */
+export const shortAddress = (address: string): string =>
+  `${address.slice(0, 4)}...${address.slice(-4)}`;
+
+/** Stellar transaction explorer URL */
+export const stellarTxUrl = (hash: string): string =>
+  `https://stellar.expert/explorer/public/tx/${hash}`;
+
+/** Stellar account explorer URL */
+export const stellarAccountUrl = (address: string): string =>
+  `https://stellar.expert/explorer/public/account/${address}`;
+```
+
+### Link Appearance
+
+Explorer links must always include the `ExternalLink` icon (Lucide, size 12–14) to signal they open in a new tab:
+
+```tsx
+<a
+  href={stellarTxUrl(txHash)}
+  target="_blank"
+  rel="noopener noreferrer"
+  className="inline-flex items-center gap-1.5 text-text-secondary hover:text-[#62ffff]
+             font-mono text-xs transition-colors"
+  aria-label={`View transaction ${shortHash(txHash)} on Stellar Explorer`}
+>
+  {shortHash(txHash)}
+  <ExternalLink size={12} className="text-[#62ffff] shrink-0" />
+</a>
+```
+
+---
+
+## 3. UI Context Examples
+
+### 3.1 Payment History Table (Compact)
+
+The table row is space-constrained. Show the payment status badge and a short hash link. Verification state is surfaced via the status badge — no separate verification column needed at this level.
+
+```tsx
+// Payment status badge — maps PaymentStatus to verification-aware styling
+const statusClasses: Record<PaymentStatus, string> = {
+  Released: 'bg-accent-green/10 text-accent-green border border-accent-green/30',   // Verified
+  Escrowed: 'bg-[rgba(98,255,255,0.15)] text-[#62ffff] border border-[rgba(98,255,255,0.3)]', // Pending (in escrow)
+  Pending:  'bg-[rgba(245,158,11,0.15)] text-[#fbbf24] border border-[rgba(245,158,11,0.3)]', // Pending
+  Failed:   'bg-accent-red/10 text-accent-red border border-accent-red/30',          // Mismatch / Failed
+};
+
+// Table row — Transaction Hash cell
+<td className="px-6 py-4 font-mono text-xs border-b border-[rgba(98,255,255,0.2)]">
+  <a
+    href={stellarTxUrl(payment.txHash)}
+    target="_blank"
+    rel="noopener noreferrer"
+    className="inline-flex items-center gap-1.5 text-text-secondary hover:text-[#62ffff] transition-colors"
+    aria-label={`View transaction ${shortHash(payment.txHash)} on Stellar Explorer`}
+  >
+    {shortHash(payment.txHash)}
+    <ExternalLink size={12} className="text-[#62ffff] shrink-0" />
+  </a>
+</td>
+```
+
+### 3.2 Payment Detail Modal (Full Breakdown)
+
+The modal has space for a full verification breakdown. Show the medium hash, both wallet addresses (truncated), and an explicit verification badge alongside the "Verify on Blockchain" CTA.
+
+```tsx
+// Verification badge — driven by VerificationState
+const verificationBadge = (state: VerificationState) => {
+  const config = {
+    verified:    { classes: 'bg-accent-green/10 text-accent-green border-accent-green/30',       icon: <ShieldCheck size={12} />, label: 'Verified' },
+    pending:     { classes: 'bg-[rgba(245,158,11,0.15)] text-[#fbbf24] border-[rgba(245,158,11,0.3)]', icon: <Clock size={12} />,       label: 'Pending' },
+    mismatch:    { classes: 'bg-accent-red/10 text-accent-red border-accent-red/30',             icon: <AlertTriangle size={12} />, label: 'Mismatch' },
+    unavailable: { classes: 'bg-text-secondary/10 text-text-secondary border-text-secondary/20', icon: <Minus size={12} />,         label: 'Unavailable' },
+  }[state];
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold border ${config.classes}`}
+      aria-label={`Transaction ${config.label.toLowerCase()} on-chain`}
+    >
+      {config.icon}
+      {config.label}
+    </span>
+  );
+};
+
+// Inside the modal detail section
+<div className="flex flex-col gap-3">
+  {/* Transaction row */}
+  <div className="flex justify-between items-center">
+    <span className="text-xs font-semibold text-text-secondary uppercase tracking-wider">Transaction</span>
+    <div className="flex items-center gap-2">
+      {verificationBadge(verificationState)}  {/* e.g. 'verified' | 'pending' */}
+      <a
+        href={stellarTxUrl(payment.txHash)}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="inline-flex items-center gap-1.5 font-mono text-xs text-text-secondary hover:text-[#62ffff] transition-colors"
+        aria-label={`View transaction on Stellar Explorer`}
+      >
+        {mediumHash(payment.txHash)}
+        <ExternalLink size={14} className="text-[#62ffff] shrink-0" />
+      </a>
+    </div>
+  </div>
+
+  {/* Payer address row */}
+  <div className="flex justify-between items-center">
+    <span className="text-xs font-semibold text-text-secondary uppercase tracking-wider">Payer</span>
+    <a
+      href={stellarAccountUrl(payment.payerAddress)}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="inline-flex items-center gap-1.5 font-mono text-xs text-text-secondary hover:text-[#62ffff] transition-colors"
+      aria-label={`View payer account on Stellar Explorer`}
+    >
+      {shortAddress(payment.payerAddress)}
+      <ExternalLink size={12} className="text-[#62ffff] shrink-0" />
+    </a>
+  </div>
+</div>
+
+{/* Footer CTA */}
+<a
+  href={stellarTxUrl(payment.txHash)}
+  target="_blank"
+  rel="noopener noreferrer"
+  className="px-6 py-3 rounded-lg bg-accent-teal/20 border border-accent-teal/40 text-[#62ffff]
+             font-semibold text-sm hover:bg-accent-teal/30 transition-colors inline-flex items-center gap-2"
+>
+  Verify on Blockchain
+  <ExternalLink size={14} />
+</a>
+```
+
+### 3.3 Shipment Status Card (Trust Data Integration)
+
+Each milestone in `MilestoneTimeline` has a `blockchainAddress` field. Surface it as a verified on-chain anchor alongside the milestone's completion state.
+
+The milestone `status` field (`'completed' | 'current' | 'upcoming'`) maps to verification state as follows:
+
+| Milestone Status | Verification State | Rationale |
+|---|---|---|
+| `completed` | `verified` | Milestone is immutably recorded on-chain |
+| `current` | `pending` | Transaction submitted, awaiting finality |
+| `upcoming` | `unavailable` | Not yet on-chain |
+
+```tsx
+// Inside MilestoneTimeline — expanded milestone detail panel
+const milestoneVerificationState = (status: MilestoneDetail['status']): VerificationState => {
+  if (status === 'completed') return 'verified';
+  if (status === 'current')   return 'pending';
+  return 'unavailable';
+};
+
+// Blockchain anchor row within the expanded detail panel
+{milestone.blockchainAddress && milestone.status !== 'upcoming' && (
+  <div className="flex items-center justify-between mt-3 pt-3 border-t border-border">
+    <span className="text-xs text-text-secondary uppercase tracking-wider font-semibold">On-chain Record</span>
+    <div className="flex items-center gap-2">
+      {verificationBadge(milestoneVerificationState(milestone.status))}
+      <a
+        href={stellarAccountUrl(milestone.blockchainAddress)}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="inline-flex items-center gap-1.5 font-mono text-xs text-text-secondary hover:text-[#62ffff] transition-colors"
+        aria-label={`View milestone record on Stellar Explorer`}
+      >
+        {shortAddress(milestone.blockchainAddress)}
+        <ExternalLink size={12} className="text-[#62ffff] shrink-0" />
+      </a>
+    </div>
+  </div>
+)}
+```
+
+---
+
+## 4. Graceful Failure Behavior
+
+When chain data is missing, a node is unreachable, or a fetch times out, the UI must degrade gracefully. Never show a broken link, an empty cell, or an unhandled error.
+
+### Failure Scenarios and Required Behavior
+
+| Scenario | Required UI Behavior |
+|---|---|
+| `txHash` is `null` or empty string | Render `Unavailable` badge; omit the explorer link entirely |
+| Explorer fetch returns non-2xx | Render `Unavailable` badge; keep the hash text but disable the link (`<span>` instead of `<a>`) |
+| Network timeout / node unreachable | Render `Unavailable` badge with tooltip: "Chain data temporarily unavailable" |
+| Hash present but on-chain record not found | Render `Mismatch` badge with note: "Transaction not found on Stellar network" |
+| `blockchainAddress` missing on a `completed` milestone | Render `Unavailable` badge; do not render the "On-chain Record" row at all |
+
+### Implementation Pattern
+
+```tsx
+// Defensive explorer link — handles missing hash
+const ExplorerLink: React.FC<{ hash: string | null | undefined; display: string }> = ({ hash, display }) => {
+  if (!hash) {
+    return (
+      <span
+        className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold
+                   bg-text-secondary/10 text-text-secondary border border-text-secondary/20"
+        aria-label="Chain data unavailable"
+      >
+        <Minus size={12} />
+        Unavailable
+      </span>
+    );
+  }
+
+  return (
+    <a
+      href={stellarTxUrl(hash)}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="inline-flex items-center gap-1.5 font-mono text-xs text-text-secondary hover:text-[#62ffff] transition-colors"
+      aria-label={`View ${display} on Stellar Explorer`}
+    >
+      {display}
+      <ExternalLink size={12} className="text-[#62ffff] shrink-0" />
+    </a>
+  );
+};
+```
+
+### Loading State
+
+While chain data is being fetched, render a skeleton placeholder — never an empty cell:
+
+```tsx
+// Skeleton for a hash cell while loading
+<div className="h-4 w-28 rounded animate-pulse bg-text-secondary/20" aria-label="Loading transaction data" />
+```
+
+---
+
+## Related Documents
+
+- [`FRONTEND_COMPONENT_CONVENTIONS.md`](./FRONTEND_COMPONENT_CONVENTIONS.md) — Folder structure, naming, Tailwind styling, and path aliases
+- [`COMPONENT_CONVENTIONS.md`](./COMPONENT_CONVENTIONS.md) — TypeScript, exports, and props rules
+- [`TAILWIND_MIGRATION.md`](./TAILWIND_MIGRATION.md) — CSS → Tailwind conversion guide
diff --git a/docs/designs/components-style-sheet.md b/docs/designs/component-system.md
similarity index 100%
rename from docs/designs/components-style-sheet.md
rename to docs/designs/component-system.md
diff --git a/frontend/Design the Company Dashboard.txt b/docs/designs/dashboard-guide.md
similarity index 99%
rename from frontend/Design the Company Dashboard.txt
rename to docs/designs/dashboard-guide.md
index f12b34a..80da27b 100644
--- a/frontend/Design the Company Dashboard.txt	
+++ b/docs/designs/dashboard-guide.md
@@ -75,4 +75,6 @@ Help Link: Need help? Contact Support
 
 Copyright: © 2026 Nexus Platform Inc. All rights reserved.
 
-figma link https://www.figma.com/design/F1glyTk2MzqqagwwuLZCJV/Login---Sign-up-Page-with-email-and-Connect-wallet?m=auto&t=HA8Cijngs5PtiXAW-6
\ No newline at end of file
+figma link https://www.figma.com/design/F1glyTk2MzqqagwwuLZCJV/Login---Sign-up-Page-with-email-and-Connect-wallet?m=auto&t=HA8Cijngs5PtiXAW-6
+
+
diff --git a/docs/designs/design system.md b/docs/designs/design system.md
new file mode 100644
index 0000000..526075a
--- /dev/null
+++ b/docs/designs/design system.md	
@@ -0,0 +1,124 @@
+# Navin Design System
+
+This file documents the visual foundation for the Navin frontend: color palettes, typography scale, spacing, radii, and shadow tokens.
+
+Design reference: Figma Design (paste your Figma link here) — message me for edit access if needed.
+
+---
+
+## Color System
+
+Colors are provided as the project theme + semantic tokens and neutral grayscale. Use these tokens consistently across components.
+
+- **Brand (Teal Theme)**
+	- `--color-brand-main`: #0A3D3D — main teal color (primary brand color)
+	- `--color-brand-sub`: #208080 — sub / medium teal (used for hover, borders)
+	- `--color-brand-highlight`: #62FFFF — highlight / accent light teal (used for highlights, subtle glows)
+
+- **UI / Text / Surface**
+	- `--color-bg`: #010101 — application background (deep)
+	- `--color-header-text`: #F8FFFF — header / large text on dark backgrounds
+	- `--color-body-text`: #E5FFFF — body text on dark backgrounds
+
+- **Semantic (defaults kept, adjust as needed)**
+	- `--color-success-500`: #22C55E
+	- `--color-warning-500`: #FFB020
+	- `--color-error-500`: #EF4444
+
+- **Neutral (Grayscale)** — useful for borders, disabled text, surfaces (kept for contrast hierarchy)
+	- `--color-neutral-900`: #111827 (text-primary)
+	- `--color-neutral-700`: #374151
+	- `--color-neutral-500`: #6B7280
+	- `--color-neutral-300`: #D1D5DB
+	- `--color-neutral-100`: #F3F4F6
+
+Usage examples:
+- Brand main (`--color-brand-main`): primary buttons (filled), active nav item backgrounds on dark surfaces
+- Brand sub (`--color-brand-sub`): borders, subtle accents, secondary filled buttons
+- Brand highlight (`--color-brand-highlight`): subtle highlights, focus rings, badges
+- Background (`--color-bg`): app background and dark surfaces
+- Header/body text (`--color-header-text`, `--color-body-text`): text on dark backgrounds
+- Semantic: alerts, toasts, validation states
+
+Color swatches (replace these placeholders with your exported swatch images):
+
+![Colors - Brand & Semantic](./images/colors-swatches-brand-semantic.png)
+![Colors - Neutral Scale](./images/colors-swatches-neutral.png)
+
+---
+
+## Typography
+
+Font stack:
+
+```
+font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+```
+
+Scale (desktop base 16px):
+
+- `xs` — 12px / 0.75rem — line-height 16px — `font-weight: 400` — UI labels
+- `sm` — 14px / 0.875rem — line-height 20px — `font-weight: 400` — captions, form helper
+- `base` — 16px / 1rem — line-height 24px — `font-weight: 400` — body copy
+- `lg` — 18px / 1.125rem — line-height 28px — `font-weight: 500` — subhead
+- `xl` — 20px / 1.25rem — line-height 28px — `font-weight: 600` — section heading
+- `2xl` — 24px / 1.5rem — line-height 32px — `font-weight: 700` — page heading
+- `3xl` — 30px / 1.875rem — line-height 40px — `font-weight: 700` — hero/title
+
+Weights used:
+- `400` — Regular
+- `500` — Medium (UI emphasis)
+- `600` — Semibold (strong emphasis)
+- `700` — Bold (headings)
+
+Example text (rendered previews — add the exported image to show actual font rendering):
+
+![Typography scale preview](./images/typography-scale.png)
+
+CSS variables example:
+
+```
+:root {
+	--font-family-base: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+	--text-xs: 0.75rem;
+	--text-sm: 0.875rem;
+	--text-base: 1rem;
+	--text-lg: 1.125rem;
+	--text-xl: 1.25rem;
+	--text-2xl: 1.5rem;
+	--text-3xl: 1.875rem;
+}
+```
+
+---
+
+## Spacing (4px base grid)
+
+All spacing tokens follow a 4px base grid. Use these tokens for margin/padding and layout spacing.
+
+| Token | px | Rem | Use |
+|---|---:|---:|---|
+| `space-1` | 4px | 0.25rem | tight gaps, icon spacing |
+| `space-2` | 8px | 0.5rem | small padding, gap between items |
+| `space-3` | 12px | 0.75rem | compact groups |
+| `space-4` | 16px | 1rem | default padding, vertical rhythm |
+| `space-5` | 20px | 1.25rem | larger buttons/pads |
+| `space-6` | 24px | 1.5rem | section spacing |
+| `space-8` | 32px | 2rem | page sections, large gaps |
+| `space-10` | 40px | 2.5rem | generous spacing |
+| `space-12` | 48px | 3rem | large containers |
+| `space-16` | 64px | 4rem | hero / full-bleed spacing |
+
+Add spacing preview image here: `./images/spacing-grid.png`
+
+---
+
+## Border Radius
+
+Roundness tokens used across components:
+
+- `radius-sm`: 4px — small controls, buttons
+- `radius-md`: 8px — cards, input fields
+- `radius-lg`: 12px — large containers, modals
+- `radius-full`: 9999px — pills, avatars
+
diff --git a/frontend/.npmrc b/frontend/.npmrc
new file mode 100644
index 0000000..bf8a225
--- /dev/null
+++ b/frontend/.npmrc
@@ -0,0 +1,4 @@
+# Use pnpm as package manager
+auto-install-peers=true
+strict-peer-dependencies=false
+shamefully-hoist=true
diff --git a/frontend/lint-output.txt b/frontend/lint-output.txt
new file mode 100644
index 0000000..0c53232
Binary files /dev/null and b/frontend/lint-output.txt differ
diff --git a/frontend/loginui.txt b/frontend/loginui.txt
deleted file mode 100644
index 511648f..0000000
--- a/frontend/loginui.txt
+++ /dev/null
@@ -1,2 +0,0 @@
-. Visual Identity & ThemePalette: Deep blues ($#0F172A$ / $#1E293B$ range) with vibrant accents: Blue (Primary/Action), Green (Success/Delivered), Orange (Pending/Delayed), and Purple (Secondary actions).Typography: Clean, sans-serif typeface (likely Inter or similar) focused on legibility of data strings like blockchain hashes and shipment IDs.2. Cross-Platform Layout StrategyFeatureDesktopTabletMobileNavigationFull sidebar with labels.Icon-only collapsed sidebar.Bottom tab bar + Hamburger menu.KPI Cards4 columns (Shipments, Transit, Delivered, Payment).2x2 Grid (Active, Delayed, Today, Fleet %).2x2 Grid with smaller footprints.TablesDetailed (Origin, Destination, Status, Hash).Simplified (Destination and Status only).List-view with icons (Mode of transport).Quick ActionsVertical stack on the right.2x2 Button grid in the center.Floating Action Button (FAB) for QR scanning.3. Functional HighlightsBlockchain Integration: The Desktop view features a "Blockchain Ledger" menu item and "Verify" buttons that likely link to on-chain transactions. It even shows a "Syncing: Block 18.2M" status for an Enterprise Node.Contextual Actions: * Desktop: Focuses on management (Generate Settlements, Track Tokens).Tablet: Focuses on operations (Assign Driver, Print Labels).Mobile: Focuses on quick access (QR Scanner for scanning packages on the go).Network Visualization: The Desktop version includes a "Network Distribution" world map showing active node locations ($n=142$).Observations for ImprovementData Consistency: Note that the data varies significantly between the mockups (e.g., Desktop shows 1,248 total shipments, while Tablet shows 1,284 active shipments). If these are for a presentation, you may want to align these numbers.Empty States: Consider how the "Recent Shipments" section looks when no data is available, especially on the mobile view where space is premium.
-https://www.figma.com/design/QkQC037evEB8rRN7pz0ToS/Navin?m=auto&t=HA8Cijngs5PtiXAW-6
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c3ccf74..21282a3 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@stellar/freighter-api": "^6.0.1",
+        "@tailwindcss/vite": "^4.2.1",
         "axios": "^1.7.0",
         "lucide-react": "^0.575.0",
         "react": "^19.2.0",
@@ -18,6 +19,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.39.1",
+        "@tailwindcss/postcss": "^4.2.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
         "@testing-library/user-event": "^14.6.1",
@@ -27,11 +29,14 @@
         "@typescript-eslint/eslint-plugin": "^8.0.0",
         "@typescript-eslint/parser": "^8.0.0",
         "@vitejs/plugin-react": "^5.1.1",
+        "autoprefixer": "^10.4.24",
         "eslint": "^9.39.1",
         "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-react-refresh": "^0.4.24",
         "globals": "^16.5.0",
         "jsdom": "^28.1.0",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^4.2.1",
         "typescript": "^5.6.0",
         "vite": "^7.3.1",
         "vitest": "^4.0.18"
@@ -51,24 +56,40 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@asamuzakjp/css-color": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-4.1.2.tgz",
-      "integrity": "sha512-NfBUvBaYgKIuq6E/RBLY1m0IohzNHAYyaJGuTK79Z23uNwmz2jl1mPsC5ZxCCxylinKhT1Amn5oNTlx1wN8cQg==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.0.1.tgz",
+      "integrity": "sha512-2SZFvqMyvboVV1d15lMf7XiI3m7SDqXUuKaTymJYLN6dSGadqp+fVojqJlVoMlbZnlTmu3S0TLwLTJpvBMO1Aw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@csstools/css-calc": "^3.0.0",
-        "@csstools/css-color-parser": "^4.0.1",
+        "@csstools/css-calc": "^3.1.1",
+        "@csstools/css-color-parser": "^4.0.2",
         "@csstools/css-parser-algorithms": "^4.0.0",
         "@csstools/css-tokenizer": "^4.0.0",
-        "lru-cache": "^11.2.5"
+        "lru-cache": "^11.2.6"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
     "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
-      "version": "11.2.6",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.6.tgz",
-      "integrity": "sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==",
+      "version": "11.2.7",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.7.tgz",
+      "integrity": "sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {
@@ -90,9 +111,9 @@
       }
     },
     "node_modules/@asamuzakjp/dom-selector/node_modules/lru-cache": {
-      "version": "11.2.6",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.6.tgz",
-      "integrity": "sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==",
+      "version": "11.2.7",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.7.tgz",
+      "integrity": "sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {
@@ -137,6 +158,7 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -162,6 +184,16 @@
         "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.29.1",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
@@ -196,6 +228,16 @@
         "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-globals": {
       "version": "7.28.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
@@ -279,23 +321,23 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.6.tgz",
-      "integrity": "sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==",
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.2.tgz",
+      "integrity": "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.28.6",
-        "@babel/types": "^7.28.6"
+        "@babel/types": "^7.29.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
-      "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.2.tgz",
+      "integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -341,9 +383,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
-      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -412,9 +454,9 @@
       }
     },
     "node_modules/@csstools/color-helpers": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.1.tgz",
-      "integrity": "sha512-NmXRccUJMk2AWA5A7e5a//3bCIMyOu2hAtdRYrhPPHjDxINuCwX1w6rnIZ4xjLcp0ayv6h8Pc3X0eJUGiAAXHQ==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz",
+      "integrity": "sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==",
       "dev": true,
       "funding": [
         {
@@ -456,9 +498,9 @@
       }
     },
     "node_modules/@csstools/css-color-parser": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.0.1.tgz",
-      "integrity": "sha512-vYwO15eRBEkeF6xjAno/KQ61HacNhfQuuU/eGwH67DplL0zD5ZixUa563phQvUelA07yDczIXdtmYojCphKJcw==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.0.2.tgz",
+      "integrity": "sha512-0GEfbBLmTFf0dJlpsNU7zwxRIH0/BGEMuXLTCvFYxuL1tNhqzTbtnFICyJLTNK4a+RechKP75e7w42ClXSnJQw==",
       "dev": true,
       "funding": [
         {
@@ -472,8 +514,8 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "@csstools/color-helpers": "^6.0.1",
-        "@csstools/css-calc": "^3.0.0"
+        "@csstools/color-helpers": "^6.0.2",
+        "@csstools/css-calc": "^3.1.1"
       },
       "engines": {
         "node": ">=20.19.0"
@@ -499,6 +541,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       },
@@ -507,9 +550,9 @@
       }
     },
     "node_modules/@csstools/css-syntax-patches-for-csstree": {
-      "version": "1.0.27",
-      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.0.27.tgz",
-      "integrity": "sha512-sxP33Jwg1bviSUXAV43cVYdmjt2TLnLXNqCWl9xmxHawWVjGz/kEbdkr7F9pxJNBN2Mh+dq0crgItbW6tQvyow==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.2.tgz",
+      "integrity": "sha512-5GkLzz4prTIpoyeUiIu3iV6CSG3Plo7xRVOFPKI7FVEJ3mZ0A8SwK0XU3Gl7xAkiQ+mDyam+NNp875/C5y+jSA==",
       "dev": true,
       "funding": [
         {
@@ -521,7 +564,15 @@
           "url": "https://opencollective.com/csstools"
         }
       ],
-      "license": "MIT-0"
+      "license": "MIT-0",
+      "peerDependencies": {
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
+      }
     },
     "node_modules/@csstools/css-tokenizer": {
       "version": "4.0.0",
@@ -539,18 +590,18 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz",
-      "integrity": "sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.4.tgz",
+      "integrity": "sha512-cQPwL2mp2nSmHHJlCyoXgHGhbEPMrEEU5xhkcy3Hs/O7nGZqEpZ2sUtLaL9MORLtDfRvVl2/3PAuEkYZH0Ty8Q==",
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -561,13 +612,12 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.3.tgz",
-      "integrity": "sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.4.tgz",
+      "integrity": "sha512-X9bUgvxiC8CHAGKYufLIHGXPJWnr0OCdR0anD2e21vdvgCI8lIfqFbnoeOz7lBjdrAGUhqLZLcQo6MLhTO2DKQ==",
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -578,13 +628,12 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.3.tgz",
-      "integrity": "sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.4.tgz",
+      "integrity": "sha512-gdLscB7v75wRfu7QSm/zg6Rx29VLdy9eTr2t44sfTW7CxwAtQghZ4ZnqHk3/ogz7xao0QAgrkradbBzcqFPasw==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -595,13 +644,12 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.3.tgz",
-      "integrity": "sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.4.tgz",
+      "integrity": "sha512-PzPFnBNVF292sfpfhiyiXCGSn9HZg5BcAz+ivBuSsl6Rk4ga1oEXAamhOXRFyMcjwr2DVtm40G65N3GLeH1Lvw==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -612,13 +660,12 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.3.tgz",
-      "integrity": "sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.4.tgz",
+      "integrity": "sha512-b7xaGIwdJlht8ZFCvMkpDN6uiSmnxxK56N2GDTMYPr2/gzvfdQN8rTfBsvVKmIVY/X7EM+/hJKEIbbHs9oA4tQ==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -629,13 +676,12 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.3.tgz",
-      "integrity": "sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.4.tgz",
+      "integrity": "sha512-sR+OiKLwd15nmCdqpXMnuJ9W2kpy0KigzqScqHI3Hqwr7IXxBp3Yva+yJwoqh7rE8V77tdoheRYataNKL4QrPw==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -646,13 +692,12 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.3.tgz",
-      "integrity": "sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.4.tgz",
+      "integrity": "sha512-jnfpKe+p79tCnm4GVav68A7tUFeKQwQyLgESwEAUzyxk/TJr4QdGog9sqWNcUbr/bZt/O/HXouspuQDd9JxFSw==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -663,13 +708,12 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.3.tgz",
-      "integrity": "sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.4.tgz",
+      "integrity": "sha512-2kb4ceA/CpfUrIcTUl1wrP/9ad9Atrp5J94Lq69w7UwOMolPIGrfLSvAKJp0RTvkPPyn6CIWrNy13kyLikZRZQ==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -680,13 +724,12 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.3.tgz",
-      "integrity": "sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.4.tgz",
+      "integrity": "sha512-aBYgcIxX/wd5n2ys0yESGeYMGF+pv6g0DhZr3G1ZG4jMfruU9Tl1i2Z+Wnj9/KjGz1lTLCcorqE2viePZqj4Eg==",
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -697,13 +740,12 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.3.tgz",
-      "integrity": "sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.4.tgz",
+      "integrity": "sha512-7nQOttdzVGth1iz57kxg9uCz57dxQLHWxopL6mYuYthohPKEK0vU0C3O21CcBK6KDlkYVcnDXY099HcCDXd9dA==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -714,13 +756,12 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.3.tgz",
-      "integrity": "sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.4.tgz",
+      "integrity": "sha512-oPtixtAIzgvzYcKBQM/qZ3R+9TEUd1aNJQu0HhGyqtx6oS7qTpvjheIWBbes4+qu1bNlo2V4cbkISr8q6gRBFA==",
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -731,13 +772,12 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.3.tgz",
-      "integrity": "sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.4.tgz",
+      "integrity": "sha512-8mL/vh8qeCoRcFH2nM8wm5uJP+ZcVYGGayMavi8GmRJjuI3g1v6Z7Ni0JJKAJW+m0EtUuARb6Lmp4hMjzCBWzA==",
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -748,13 +788,12 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.3.tgz",
-      "integrity": "sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.4.tgz",
+      "integrity": "sha512-1RdrWFFiiLIW7LQq9Q2NES+HiD4NyT8Itj9AUeCl0IVCA459WnPhREKgwrpaIfTOe+/2rdntisegiPWn/r/aAw==",
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -765,13 +804,12 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.3.tgz",
-      "integrity": "sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.4.tgz",
+      "integrity": "sha512-tLCwNG47l3sd9lpfyx9LAGEGItCUeRCWeAx6x2Jmbav65nAwoPXfewtAdtbtit/pJFLUWOhpv0FpS6GQAmPrHA==",
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -782,13 +820,12 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.3.tgz",
-      "integrity": "sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.4.tgz",
+      "integrity": "sha512-BnASypppbUWyqjd1KIpU4AUBiIhVr6YlHx/cnPgqEkNoVOhHg+YiSVxM1RLfiy4t9cAulbRGTNCKOcqHrEQLIw==",
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -799,13 +836,12 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.3.tgz",
-      "integrity": "sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.4.tgz",
+      "integrity": "sha512-+eUqgb/Z7vxVLezG8bVB9SfBie89gMueS+I0xYh2tJdw3vqA/0ImZJ2ROeWwVJN59ihBeZ7Tu92dF/5dy5FttA==",
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -816,13 +852,12 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.3.tgz",
-      "integrity": "sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.4.tgz",
+      "integrity": "sha512-S5qOXrKV8BQEzJPVxAwnryi2+Iq5pB40gTEIT69BQONqR7JH1EPIcQ/Uiv9mCnn05jff9umq/5nqzxlqTOg9NA==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -833,13 +868,12 @@
       }
     },
     "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.3.tgz",
-      "integrity": "sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.4.tgz",
+      "integrity": "sha512-xHT8X4sb0GS8qTqiwzHqpY00C95DPAq7nAwX35Ie/s+LO9830hrMd3oX0ZMKLvy7vsonee73x0lmcdOVXFzd6Q==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -850,13 +884,12 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.3.tgz",
-      "integrity": "sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.4.tgz",
+      "integrity": "sha512-RugOvOdXfdyi5Tyv40kgQnI0byv66BFgAqjdgtAKqHoZTbTF2QqfQrFwa7cHEORJf6X2ht+l9ABLMP0dnKYsgg==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -867,13 +900,12 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.3.tgz",
-      "integrity": "sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.4.tgz",
+      "integrity": "sha512-2MyL3IAaTX+1/qP0O1SwskwcwCoOI4kV2IBX1xYnDDqthmq5ArrW94qSIKCAuRraMgPOmG0RDTA74mzYNQA9ow==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -884,13 +916,12 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.3.tgz",
-      "integrity": "sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.4.tgz",
+      "integrity": "sha512-u8fg/jQ5aQDfsnIV6+KwLOf1CmJnfu1ShpwqdwC0uA7ZPwFws55Ngc12vBdeUdnuWoQYx/SOQLGDcdlfXhYmXQ==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -901,13 +932,12 @@
       }
     },
     "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.3.tgz",
-      "integrity": "sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.4.tgz",
+      "integrity": "sha512-JkTZrl6VbyO8lDQO3yv26nNr2RM2yZzNrNHEsj9bm6dOwwu9OYN28CjzZkH57bh4w0I2F7IodpQvUAEd1mbWXg==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -918,13 +948,12 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.3.tgz",
-      "integrity": "sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.4.tgz",
+      "integrity": "sha512-/gOzgaewZJfeJTlsWhvUEmUG4tWEY2Spp5M20INYRg2ZKl9QPO3QEEgPeRtLjEWSW8FilRNacPOg8R1uaYkA6g==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -935,13 +964,12 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.3.tgz",
-      "integrity": "sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.4.tgz",
+      "integrity": "sha512-Z9SExBg2y32smoDQdf1HRwHRt6vAHLXcxD2uGgO/v2jK7Y718Ix4ndsbNMU/+1Qiem9OiOdaqitioZwxivhXYg==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -952,13 +980,12 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.3.tgz",
-      "integrity": "sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.4.tgz",
+      "integrity": "sha512-DAyGLS0Jz5G5iixEbMHi5KdiApqHBWMGzTtMiJ72ZOLhbu/bzxgAe8Ue8CTS3n3HbIUHQz/L51yMdGMeoxXNJw==",
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -969,13 +996,12 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.3.tgz",
-      "integrity": "sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==",
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.4.tgz",
+      "integrity": "sha512-+knoa0BDoeXgkNvvV1vvbZX4+hizelrkwmGJBdT17t8FNPwG2lKemmuMZlmaNQ3ws3DKKCxpb4zRZEIp3UxFCg==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1004,19 +1030,6 @@
         "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
       }
     },
-    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
     "node_modules/@eslint-community/regexpp": {
       "version": "4.12.2",
       "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
@@ -1028,20 +1041,51 @@
       }
     },
     "node_modules/@eslint/config-array": {
-      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
-      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.2.tgz",
+      "integrity": "sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@eslint/object-schema": "^2.1.7",
         "debug": "^4.3.1",
-        "minimatch": "^3.1.2"
+        "minimatch": "^3.1.5"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@eslint/config-array/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/@eslint/config-array/node_modules/brace-expansion": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.13.tgz",
+      "integrity": "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/config-array/node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/@eslint/config-helpers": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
@@ -1069,20 +1113,20 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.3.tgz",
-      "integrity": "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==",
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.5.tgz",
+      "integrity": "sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ajv": "^6.12.4",
+        "ajv": "^6.14.0",
         "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.1",
-        "minimatch": "^3.1.2",
+        "minimatch": "^3.1.5",
         "strip-json-comments": "^3.1.1"
       },
       "engines": {
@@ -1092,6 +1136,24 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@eslint/eslintrc/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/@eslint/eslintrc/node_modules/brace-expansion": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.13.tgz",
+      "integrity": "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
     "node_modules/@eslint/eslintrc/node_modules/globals": {
       "version": "14.0.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
@@ -1105,10 +1167,33 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@eslint/eslintrc/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/@eslint/eslintrc/node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/@eslint/js": {
-      "version": "9.39.2",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
-      "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
+      "version": "9.39.4",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.4.tgz",
+      "integrity": "sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1143,9 +1228,9 @@
       }
     },
     "node_modules/@exodus/bytes": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.14.1.tgz",
-      "integrity": "sha512-OhkBFWI6GcRMUroChZiopRiSp2iAMvEBK47NhJooDqz1RERO4QuZIZnjP63TXX8GAiLABkYmX+fuQsdJ1dd2QQ==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.0.tgz",
+      "integrity": "sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1216,7 +1301,6 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -1227,7 +1311,6 @@
       "version": "2.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
       "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -1238,7 +1321,6 @@
       "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"
@@ -1248,14 +1330,12 @@
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -1306,13 +1386,12 @@
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.1.tgz",
-      "integrity": "sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.0.tgz",
+      "integrity": "sha512-WOhNW9K8bR3kf4zLxbfg6Pxu2ybOUbB2AjMDHSQx86LIF4rH4Ft7vmMwNt0loO0eonglSNy4cpD3MKXXKQu0/A==",
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1320,13 +1399,12 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.57.1.tgz",
-      "integrity": "sha512-dQaAddCY9YgkFHZcFNS/606Exo8vcLHwArFZ7vxXq4rigo2bb494/xKMMwRRQW6ug7Js6yXmBZhSBRuBvCCQ3w==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.60.0.tgz",
+      "integrity": "sha512-u6JHLll5QKRvjciE78bQXDmqRqNs5M/3GVqZeMwvmjaNODJih/WIrJlFVEihvV0MiYFmd+ZyPr9wxOVbPAG2Iw==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1334,13 +1412,12 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.57.1.tgz",
-      "integrity": "sha512-crNPrwJOrRxagUYeMn/DZwqN88SDmwaJ8Cvi/TN1HnWBU7GwknckyosC2gd0IqYRsHDEnXf328o9/HC6OkPgOg==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.60.0.tgz",
+      "integrity": "sha512-qEF7CsKKzSRc20Ciu2Zw1wRrBz4g56F7r/vRwY430UPp/nt1x21Q/fpJ9N5l47WWvJlkNCPJz3QRVw008fi7yA==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1348,13 +1425,12 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.57.1.tgz",
-      "integrity": "sha512-Ji8g8ChVbKrhFtig5QBV7iMaJrGtpHelkB3lsaKzadFBe58gmjfGXAOfI5FV0lYMH8wiqsxKQ1C9B0YTRXVy4w==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.60.0.tgz",
+      "integrity": "sha512-WADYozJ4QCnXCH4wPB+3FuGmDPoFseVCUrANmA5LWwGmC6FL14BWC7pcq+FstOZv3baGX65tZ378uT6WG8ynTw==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1362,13 +1438,12 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.57.1.tgz",
-      "integrity": "sha512-R+/WwhsjmwodAcz65guCGFRkMb4gKWTcIeLy60JJQbXrJ97BOXHxnkPFrP+YwFlaS0m+uWJTstrUA9o+UchFug==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.0.tgz",
+      "integrity": "sha512-6b8wGHJlDrGeSE3aH5mGNHBjA0TTkxdoNHik5EkvPHCt351XnigA4pS7Wsj/Eo9Y8RBU6f35cjN9SYmCFBtzxw==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1376,13 +1451,12 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.57.1.tgz",
-      "integrity": "sha512-IEQTCHeiTOnAUC3IDQdzRAGj3jOAYNr9kBguI7MQAAZK3caezRrg0GxAb6Hchg4lxdZEI5Oq3iov/w/hnFWY9Q==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.60.0.tgz",
+      "integrity": "sha512-h25Ga0t4jaylMB8M/JKAyrvvfxGRjnPQIR8lnCayyzEjEOx2EJIlIiMbhpWxDRKGKF8jbNH01NnN663dH638mA==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1390,13 +1464,12 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.57.1.tgz",
-      "integrity": "sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.60.0.tgz",
+      "integrity": "sha512-RzeBwv0B3qtVBWtcuABtSuCzToo2IEAIQrcyB/b2zMvBWVbjo8bZDjACUpnaafaxhTw2W+imQbP2BD1usasK4g==",
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1404,13 +1477,12 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.57.1.tgz",
-      "integrity": "sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.60.0.tgz",
+      "integrity": "sha512-Sf7zusNI2CIU1HLzuu9Tc5YGAHEZs5Lu7N1ssJG4Tkw6e0MEsN7NdjUDDfGNHy2IU+ENyWT+L2obgWiguWibWQ==",
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1418,13 +1490,12 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.57.1.tgz",
-      "integrity": "sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.60.0.tgz",
+      "integrity": "sha512-DX2x7CMcrJzsE91q7/O02IJQ5/aLkVtYFryqCjduJhUfGKG6yJV8hxaw8pZa93lLEpPTP/ohdN4wFz7yp/ry9A==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1432,13 +1503,12 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.57.1.tgz",
-      "integrity": "sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.60.0.tgz",
+      "integrity": "sha512-09EL+yFVbJZlhcQfShpswwRZ0Rg+z/CsSELFCnPt3iK+iqwGsI4zht3secj5vLEs957QvFFXnzAT0FFPIxSrkQ==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1446,13 +1516,12 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.57.1.tgz",
-      "integrity": "sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.60.0.tgz",
+      "integrity": "sha512-i9IcCMPr3EXm8EQg5jnja0Zyc1iFxJjZWlb4wr7U2Wx/GrddOuEafxRdMPRYVaXjgbhvqalp6np07hN1w9kAKw==",
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1460,13 +1529,12 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.57.1.tgz",
-      "integrity": "sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.60.0.tgz",
+      "integrity": "sha512-DGzdJK9kyJ+B78MCkWeGnpXJ91tK/iKA6HwHxF4TAlPIY7GXEvMe8hBFRgdrR9Ly4qebR/7gfUs9y2IoaVEyog==",
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1474,13 +1542,12 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.57.1.tgz",
-      "integrity": "sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.60.0.tgz",
+      "integrity": "sha512-RwpnLsqC8qbS8z1H1AxBA1H6qknR4YpPR9w2XX0vo2Sz10miu57PkNcnHVaZkbqyw/kUWfKMI73jhmfi9BRMUQ==",
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1488,13 +1555,12 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.57.1.tgz",
-      "integrity": "sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.60.0.tgz",
+      "integrity": "sha512-Z8pPf54Ly3aqtdWC3G4rFigZgNvd+qJlOE52fmko3KST9SoGfAdSRCwyoyG05q1HrrAblLbk1/PSIV+80/pxLg==",
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1502,13 +1568,12 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.57.1.tgz",
-      "integrity": "sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.60.0.tgz",
+      "integrity": "sha512-3a3qQustp3COCGvnP4SvrMHnPQ9d1vzCakQVRTliaz8cIp/wULGjiGpbcqrkv0WrHTEp8bQD/B3HBjzujVWLOA==",
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1516,13 +1581,12 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.57.1.tgz",
-      "integrity": "sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.60.0.tgz",
+      "integrity": "sha512-pjZDsVH/1VsghMJ2/kAaxt6dL0psT6ZexQVrijczOf+PeP2BUqTHYejk3l6TlPRydggINOeNRhvpLa0AYpCWSQ==",
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1530,13 +1594,12 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.57.1.tgz",
-      "integrity": "sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.60.0.tgz",
+      "integrity": "sha512-3ObQs0BhvPgiUVZrN7gqCSvmFuMWvWvsjG5ayJ3Lraqv+2KhOsp+pUbigqbeWqueGIsnn+09HBw27rJ+gYK4VQ==",
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1544,13 +1607,12 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.57.1.tgz",
-      "integrity": "sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.60.0.tgz",
+      "integrity": "sha512-EtylprDtQPdS5rXvAayrNDYoJhIz1/vzN2fEubo3yLE7tfAw+948dO0g4M0vkTVFhKojnF+n6C8bDNe+gDRdTg==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1558,13 +1620,12 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.57.1.tgz",
-      "integrity": "sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.60.0.tgz",
+      "integrity": "sha512-k09oiRCi/bHU9UVFqD17r3eJR9bn03TyKraCrlz5ULFJGdJGi7VOmm9jl44vOJvRJ6P7WuBi/s2A97LxxHGIdw==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1572,13 +1633,12 @@
       ]
     },
     "node_modules/@rollup/rollup-openbsd-x64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.57.1.tgz",
-      "integrity": "sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.60.0.tgz",
+      "integrity": "sha512-1o/0/pIhozoSaDJoDcec+IVLbnRtQmHwPV730+AOD29lHEEo4F5BEUB24H0OBdhbBBDwIOSuf7vgg0Ywxdfiiw==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1586,13 +1646,12 @@
       ]
     },
     "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.57.1.tgz",
-      "integrity": "sha512-4wYoDpNg6o/oPximyc/NG+mYUejZrCU2q+2w6YZqrAs2UcNUChIZXjtafAiiZSUc7On8v5NyNj34Kzj/Ltk6dQ==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.0.tgz",
+      "integrity": "sha512-pESDkos/PDzYwtyzB5p/UoNU/8fJo68vcXM9ZW2V0kjYayj1KaaUfi1NmTUTUpMn4UhU4gTuK8gIaFO4UGuMbA==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1600,13 +1659,12 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.57.1.tgz",
-      "integrity": "sha512-O54mtsV/6LW3P8qdTcamQmuC990HDfR71lo44oZMZlXU4tzLrbvTii87Ni9opq60ds0YzuAlEr/GNwuNluZyMQ==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.60.0.tgz",
+      "integrity": "sha512-hj1wFStD7B1YBeYmvY+lWXZ7ey73YGPcViMShYikqKT1GtstIKQAtfUI6yrzPjAy/O7pO0VLXGmUVWXQMaYgTQ==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1614,13 +1672,12 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.57.1.tgz",
-      "integrity": "sha512-P3dLS+IerxCT/7D2q2FYcRdWRl22dNbrbBEtxdWhXrfIMPP9lQhb5h4Du04mdl5Woq05jVCDPCMF7Ub0NAjIew==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.60.0.tgz",
+      "integrity": "sha512-SyaIPFoxmUPlNDq5EHkTbiKzmSEmq/gOYFI/3HHJ8iS/v1mbugVa7dXUzcJGQfoytp9DJFLhHH4U3/eTy2Bq4w==",
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1628,13 +1685,12 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.57.1.tgz",
-      "integrity": "sha512-VMBH2eOOaKGtIJYleXsi2B8CPVADrh+TyNxJ4mWPnKfLB/DBUmzW+5m1xUrcwWoMfSLagIRpjUFeW5CO5hyciQ==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.0.tgz",
+      "integrity": "sha512-RdcryEfzZr+lAr5kRm2ucN9aVlCCa2QNq4hXelZxb8GG0NJSazq44Z3PCCc8wISRuCVnGs0lQJVX5Vp6fKA+IA==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1642,13 +1698,12 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.1.tgz",
-      "integrity": "sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.0.tgz",
+      "integrity": "sha512-PrsWNQ8BuE00O3Xsx3ALh2Df8fAj9+cvvX9AIA6o4KpATR98c9mud4XtDWVvsEuyia5U4tVSTKygawyJkjm60w==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1677,16 +1732,275 @@
         "semver": "7.7.1"
       }
     },
-    "node_modules/@stellar/freighter-api/node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
+    "node_modules/@tailwindcss/node": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.2.2.tgz",
+      "integrity": "sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.19.0",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.2.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.2.2.tgz",
+      "integrity": "sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
       },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.2.2",
+        "@tailwindcss/oxide-darwin-arm64": "4.2.2",
+        "@tailwindcss/oxide-darwin-x64": "4.2.2",
+        "@tailwindcss/oxide-freebsd-x64": "4.2.2",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.2",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.2.2",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.2.2",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.2.2",
+        "@tailwindcss/oxide-linux-x64-musl": "4.2.2",
+        "@tailwindcss/oxide-wasm32-wasi": "4.2.2",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.2.2",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.2.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.2.2.tgz",
+      "integrity": "sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": ">=10"
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.2.2.tgz",
+      "integrity": "sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.2.2.tgz",
+      "integrity": "sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.2.2.tgz",
+      "integrity": "sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.2.2.tgz",
+      "integrity": "sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.2.2.tgz",
+      "integrity": "sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.2.2.tgz",
+      "integrity": "sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.2.2.tgz",
+      "integrity": "sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.2.2.tgz",
+      "integrity": "sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.2.2.tgz",
+      "integrity": "sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.8.1",
+        "@emnapi/runtime": "^1.8.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.1",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.2.tgz",
+      "integrity": "sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.2.2.tgz",
+      "integrity": "sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.2.2.tgz",
+      "integrity": "sha512-n4goKQbW8RVXIbNKRB/45LzyUqN451deQK0nzIeauVEqjlI49slUlgKYJM2QyUzap/PcpnS7kzSUmPb1sCRvYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.2.2",
+        "@tailwindcss/oxide": "4.2.2",
+        "postcss": "^8.5.6",
+        "tailwindcss": "4.2.2"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.2.2.tgz",
+      "integrity": "sha512-mEiF5HO1QqCLXoNEfXVA1Tzo+cYsrqV7w9Juj2wdUFyW07JRenqMG225MvPwr3ZD9N1bFQj46X7r33iHxLUW0w==",
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.2.2",
+        "@tailwindcss/oxide": "4.2.2",
+        "tailwindcss": "4.2.2"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
       }
     },
     "node_modules/@testing-library/dom": {
@@ -1784,8 +2098,7 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -1917,7 +2230,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/json-schema": {
@@ -1928,11 +2240,12 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.19.11",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.11.tgz",
-      "integrity": "sha512-BH7YwL6rA93ReqeQS1c4bsPpcfOmJasG+Fkr6Y59q83f9M1WcBRHR2vM+P9eOisYRcN3ujQoiZY8uk5W+1WL8w==",
-      "dev": true,
+      "version": "22.19.15",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.15.tgz",
+      "integrity": "sha512-F0R/h2+dsy5wJAUe3tAU6oqa2qbWY5TpNfL/RGmo1y38hiyO1w3x2jPtt76wmuaJI4DQnOBu21cNXQ2STIUUWg==",
+      "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -1943,6 +2256,7 @@
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1953,6 +2267,7 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -1964,17 +2279,17 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.56.0.tgz",
-      "integrity": "sha512-lRyPDLzNCuae71A3t9NEINBiTn7swyOhvUj3MyUOxb8x6g6vPEFoOU+ZRmGMusNC3X3YMhqMIX7i8ShqhT74Pw==",
+      "version": "8.57.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.57.2.tgz",
+      "integrity": "sha512-NZZgp0Fm2IkD+La5PR81sd+g+8oS6JwJje+aRWsDocxHkjyRw0J5L5ZTlN3LI1LlOcGL7ph3eaIUmTXMIjLk0w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.12.2",
-        "@typescript-eslint/scope-manager": "8.56.0",
-        "@typescript-eslint/type-utils": "8.56.0",
-        "@typescript-eslint/utils": "8.56.0",
-        "@typescript-eslint/visitor-keys": "8.56.0",
+        "@typescript-eslint/scope-manager": "8.57.2",
+        "@typescript-eslint/type-utils": "8.57.2",
+        "@typescript-eslint/utils": "8.57.2",
+        "@typescript-eslint/visitor-keys": "8.57.2",
         "ignore": "^7.0.5",
         "natural-compare": "^1.4.0",
         "ts-api-utils": "^2.4.0"
@@ -1987,32 +2302,23 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.56.0",
+        "@typescript-eslint/parser": "^8.57.2",
         "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
-      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4"
-      }
-    },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.56.0.tgz",
-      "integrity": "sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==",
+      "version": "8.57.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.57.2.tgz",
+      "integrity": "sha512-30ScMRHIAD33JJQkgfGW1t8CURZtjc2JpTrq5n2HFhOefbAhb7ucc7xJwdWcrEtqUIYJ73Nybpsggii6GtAHjA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.56.0",
-        "@typescript-eslint/types": "8.56.0",
-        "@typescript-eslint/typescript-estree": "8.56.0",
-        "@typescript-eslint/visitor-keys": "8.56.0",
+        "@typescript-eslint/scope-manager": "8.57.2",
+        "@typescript-eslint/types": "8.57.2",
+        "@typescript-eslint/typescript-estree": "8.57.2",
+        "@typescript-eslint/visitor-keys": "8.57.2",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -2028,14 +2334,14 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.56.0.tgz",
-      "integrity": "sha512-M3rnyL1vIQOMeWxTWIW096/TtVP+8W3p/XnaFflhmcFp+U4zlxUxWj4XwNs6HbDeTtN4yun0GNTTDBw/SvufKg==",
+      "version": "8.57.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.57.2.tgz",
+      "integrity": "sha512-FuH0wipFywXRTHf+bTTjNyuNQQsQC3qh/dYzaM4I4W0jrCqjCVuUh99+xd9KamUfmCGPvbO8NDngo/vsnNVqgw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.56.0",
-        "@typescript-eslint/types": "^8.56.0",
+        "@typescript-eslint/tsconfig-utils": "^8.57.2",
+        "@typescript-eslint/types": "^8.57.2",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -2050,14 +2356,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.56.0.tgz",
-      "integrity": "sha512-7UiO/XwMHquH+ZzfVCfUNkIXlp/yQjjnlYUyYz7pfvlK3/EyyN6BK+emDmGNyQLBtLGaYrTAI6KOw8tFucWL2w==",
+      "version": "8.57.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.57.2.tgz",
+      "integrity": "sha512-snZKH+W4WbWkrBqj4gUNRIGb/jipDW3qMqVJ4C9rzdFc+wLwruxk+2a5D+uoFcKPAqyqEnSb4l2ULuZf95eSkw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.56.0",
-        "@typescript-eslint/visitor-keys": "8.56.0"
+        "@typescript-eslint/types": "8.57.2",
+        "@typescript-eslint/visitor-keys": "8.57.2"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2068,9 +2374,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.56.0.tgz",
-      "integrity": "sha512-bSJoIIt4o3lKXD3xmDh9chZcjCz5Lk8xS7Rxn+6l5/pKrDpkCwtQNQQwZ2qRPk7TkUYhrq3WPIHXOXlbXP0itg==",
+      "version": "8.57.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.57.2.tgz",
+      "integrity": "sha512-3Lm5DSM+DCowsUOJC+YqHHnKEfFh5CoGkj5Z31NQSNF4l5wdOwqGn99wmwN/LImhfY3KJnmordBq/4+VDe2eKw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2085,15 +2391,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.56.0.tgz",
-      "integrity": "sha512-qX2L3HWOU2nuDs6GzglBeuFXviDODreS58tLY/BALPC7iu3Fa+J7EOTwnX9PdNBxUI7Uh0ntP0YWGnxCkXzmfA==",
+      "version": "8.57.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.57.2.tgz",
+      "integrity": "sha512-Co6ZCShm6kIbAM/s+oYVpKFfW7LBc6FXoPXjTRQ449PPNBY8U0KZXuevz5IFuuUj2H9ss40atTaf9dlGLzbWZg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.56.0",
-        "@typescript-eslint/typescript-estree": "8.56.0",
-        "@typescript-eslint/utils": "8.56.0",
+        "@typescript-eslint/types": "8.57.2",
+        "@typescript-eslint/typescript-estree": "8.57.2",
+        "@typescript-eslint/utils": "8.57.2",
         "debug": "^4.4.3",
         "ts-api-utils": "^2.4.0"
       },
@@ -2110,9 +2416,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.56.0.tgz",
-      "integrity": "sha512-DBsLPs3GsWhX5HylbP9HNG15U0bnwut55Lx12bHB9MpXxQ+R5GC8MwQe+N1UFXxAeQDvEsEDY6ZYwX03K7Z6HQ==",
+      "version": "8.57.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.57.2.tgz",
+      "integrity": "sha512-/iZM6FnM4tnx9csuTxspMW4BOSegshwX5oBDznJ7S4WggL7Vczz5d2W11ecc4vRrQMQHXRSxzrCsyG5EsPPTbA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2124,18 +2430,18 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.56.0.tgz",
-      "integrity": "sha512-ex1nTUMWrseMltXUHmR2GAQ4d+WjkZCT4f+4bVsps8QEdh0vlBsaCokKTPlnqBFqqGaxilDNJG7b8dolW2m43Q==",
+      "version": "8.57.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.57.2.tgz",
+      "integrity": "sha512-2MKM+I6g8tJxfSmFKOnHv2t8Sk3T6rF20A1Puk0svLK+uVapDZB/4pfAeB7nE83uAZrU6OxW+HmOd5wHVdXwXA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.56.0",
-        "@typescript-eslint/tsconfig-utils": "8.56.0",
-        "@typescript-eslint/types": "8.56.0",
-        "@typescript-eslint/visitor-keys": "8.56.0",
+        "@typescript-eslint/project-service": "8.57.2",
+        "@typescript-eslint/tsconfig-utils": "8.57.2",
+        "@typescript-eslint/types": "8.57.2",
+        "@typescript-eslint/visitor-keys": "8.57.2",
         "debug": "^4.4.3",
-        "minimatch": "^9.0.5",
+        "minimatch": "^10.2.2",
         "semver": "^7.7.3",
         "tinyglobby": "^0.2.15",
         "ts-api-utils": "^2.4.0"
@@ -2151,32 +2457,6 @@
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
-      "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/typescript-estree/node_modules/semver": {
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
@@ -2191,16 +2471,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.56.0.tgz",
-      "integrity": "sha512-RZ3Qsmi2nFGsS+n+kjLAYDPVlrzf7UhTffrDIKr+h2yzAlYP/y5ZulU0yeDEPItos2Ph46JAL5P/On3pe7kDIQ==",
+      "version": "8.57.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.57.2.tgz",
+      "integrity": "sha512-krRIbvPK1ju1WBKIefiX+bngPs+odIQUtR7kymzPfo1POVw3jlF+nLkmexdSSd4UCbDcQn+wMBATOOmpBbqgKg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.9.1",
-        "@typescript-eslint/scope-manager": "8.56.0",
-        "@typescript-eslint/types": "8.56.0",
-        "@typescript-eslint/typescript-estree": "8.56.0"
+        "@typescript-eslint/scope-manager": "8.57.2",
+        "@typescript-eslint/types": "8.57.2",
+        "@typescript-eslint/typescript-estree": "8.57.2"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2215,13 +2495,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.56.0.tgz",
-      "integrity": "sha512-q+SL+b+05Ud6LbEE35qe4A99P+htKTKVbyiNEe45eCbJFyh/HVK9QXwlrbz+Q4L8SOW4roxSVwXYj4DMBT7Ieg==",
+      "version": "8.57.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.57.2.tgz",
+      "integrity": "sha512-zhahknjobV2FiD6Ee9iLbS7OV9zi10rG26odsQdfBO/hjSzUQbkIYgda+iNKK1zNiW2ey+Lf8MU5btN17V3dUw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/types": "8.57.2",
         "eslint-visitor-keys": "^5.0.0"
       },
       "engines": {
@@ -2233,9 +2513,9 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.0.tgz",
-      "integrity": "sha512-A0XeIi7CXU7nPlfHS9loMYEKxUaONu/hTEzHTGba9Huu94Cq1hPivf+DE5erJozZOky0LfvXAyrV/tcswpLI0Q==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -2246,9 +2526,9 @@
       }
     },
     "node_modules/@vitejs/plugin-react": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.4.tgz",
-      "integrity": "sha512-VIcFLdRi/VYRU8OL/puL7QXMYafHmqOnwTZY50U1JPlCNj30PxCMx65c494b1K9be9hX83KVt0+gTEwTWLqToA==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.2.0.tgz",
+      "integrity": "sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2263,35 +2543,35 @@
         "node": "^20.19.0 || >=22.12.0"
       },
       "peerDependencies": {
-        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "4.0.18",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.18.tgz",
-      "integrity": "sha512-8sCWUyckXXYvx4opfzVY03EOiYVxyNrHS5QxX3DAIi5dpJAAkyJezHCP77VMX4HKA2LDT/Jpfo8i2r5BE3GnQQ==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.2.tgz",
+      "integrity": "sha512-gbu+7B0YgUJ2nkdsRJrFFW6X7NTP44WlhiclHniUhxADQJH5Szt9mZ9hWnJPJ8YwOK5zUOSSlSvyzRf0u1DSBQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/spec": "^1.1.0",
         "@types/chai": "^5.2.2",
-        "@vitest/spy": "4.0.18",
-        "@vitest/utils": "4.0.18",
-        "chai": "^6.2.1",
-        "tinyrainbow": "^3.0.3"
+        "@vitest/spy": "4.1.2",
+        "@vitest/utils": "4.1.2",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.1.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/mocker": {
-      "version": "4.0.18",
-      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.18.tgz",
-      "integrity": "sha512-HhVd0MDnzzsgevnOWCBj5Otnzobjy5wLBe4EdeeFGv8luMsGcYqDuFRMcttKWZA5vVO8RFjexVovXvAM4JoJDQ==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.2.tgz",
+      "integrity": "sha512-Ize4iQtEALHDttPRCmN+FKqOl2vxTiNUhzobQFFt/BM1lRUTG7zRCLOykG/6Vo4E4hnUdfVLo5/eqKPukcWW7Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "4.0.18",
+        "@vitest/spy": "4.1.2",
         "estree-walker": "^3.0.3",
         "magic-string": "^0.30.21"
       },
@@ -2300,7 +2580,7 @@
       },
       "peerDependencies": {
         "msw": "^2.4.9",
-        "vite": "^6.0.0 || ^7.0.0-0"
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
       },
       "peerDependenciesMeta": {
         "msw": {
@@ -2312,26 +2592,26 @@
       }
     },
     "node_modules/@vitest/pretty-format": {
-      "version": "4.0.18",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.18.tgz",
-      "integrity": "sha512-P24GK3GulZWC5tz87ux0m8OADrQIUVDPIjjj65vBXYG17ZeU3qD7r+MNZ1RNv4l8CGU2vtTRqixrOi9fYk/yKw==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.2.tgz",
+      "integrity": "sha512-dwQga8aejqeuB+TvXCMzSQemvV9hNEtDDpgUKDzOmNQayl2OG241PSWeJwKRH3CiC+sESrmoFd49rfnq7T4RnA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "tinyrainbow": "^3.0.3"
+        "tinyrainbow": "^3.1.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "4.0.18",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.18.tgz",
-      "integrity": "sha512-rpk9y12PGa22Jg6g5M3UVVnTS7+zycIGk9ZNGN+m6tZHKQb7jrP7/77WfZy13Y/EUDd52NDsLRQhYKtv7XfPQw==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.2.tgz",
+      "integrity": "sha512-Gr+FQan34CdiYAwpGJmQG8PgkyFVmARK8/xSijia3eTFgVfpcpztWLuP6FttGNfPLJhaZVP/euvujeNYar36OQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/utils": "4.0.18",
+        "@vitest/utils": "4.1.2",
         "pathe": "^2.0.3"
       },
       "funding": {
@@ -2339,13 +2619,14 @@
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "4.0.18",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.18.tgz",
-      "integrity": "sha512-PCiV0rcl7jKQjbgYqjtakly6T1uwv/5BQ9SwBLekVg/EaYeQFPiXcgrC2Y7vDMA8dM1SUEAEV82kgSQIlXNMvA==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.2.tgz",
+      "integrity": "sha512-g7yfUmxYS4mNxk31qbOYsSt2F4m1E02LFqO53Xpzg3zKMhLAPZAjjfyl9e6z7HrW6LvUdTwAQR3HHfLjpko16A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "4.0.18",
+        "@vitest/pretty-format": "4.1.2",
+        "@vitest/utils": "4.1.2",
         "magic-string": "^0.30.21",
         "pathe": "^2.0.3"
       },
@@ -2354,9 +2635,9 @@
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "4.0.18",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.18.tgz",
-      "integrity": "sha512-cbQt3PTSD7P2OARdVW3qWER5EGq7PHlvE+QfzSC0lbwO+xnt7+XH06ZzFjFRgzUX//JmpxrCu92VdwvEPlWSNw==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.2.tgz",
+      "integrity": "sha512-DU4fBnbVCJGNBwVA6xSToNXrkZNSiw59H8tcuUspVMsBDBST4nfvsPsEHDHGtWRRnqBERBQu7TrTKskmjqTXKA==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -2364,25 +2645,27 @@
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "4.0.18",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.18.tgz",
-      "integrity": "sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.2.tgz",
+      "integrity": "sha512-xw2/TiX82lQHA06cgbqRKFb5lCAy3axQ4H4SoUFhUsg+wztiet+co86IAMDtF6Vm1hc7J6j09oh/rgDn+JdKIQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "4.0.18",
-        "tinyrainbow": "^3.0.3"
+        "@vitest/pretty-format": "4.1.2",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.1.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/acorn": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
-      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2411,9 +2694,9 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2433,7 +2716,6 @@
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -2487,10 +2769,47 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "license": "MIT"
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.27",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.27.tgz",
+      "integrity": "sha512-NP9APE+tO+LuJGn7/9+cohklunJsXWiaWEfV3si4Gi/XHDwVNgkwr1J3RQYFIvPy76GmJ9/bW8vyoU1LcxwKHA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001774",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/axios": {
-      "version": "1.13.5",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
-      "integrity": "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==",
+      "version": "1.13.6",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.6.tgz",
+      "integrity": "sha512-ChTCHMouEe2kn713WHbQGcuYrr6fXTBiu460OTwWrWob16g1bXn4vtz07Ope7ewMozJAnEquLk5lWQWtBig9DQ==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.11",
@@ -2499,11 +2818,14 @@
       }
     },
     "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==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
     },
     "node_modules/base64-js": {
       "version": "1.5.1",
@@ -2526,13 +2848,16 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.9.19",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz",
-      "integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==",
+      "version": "2.10.11",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.11.tgz",
+      "integrity": "sha512-DAKrHphkJyiGuau/cFieRYhcTFeK/lBuD++C7cZ6KZHbMhBrisoi+EvhQ5RZrIfV5qwsW8kgQ07JIC+MDJRAhg==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
-        "baseline-browser-mapping": "dist/cli.js"
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
     "node_modules/bidi-js": {
@@ -2546,14 +2871,16 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
+      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
       }
     },
     "node_modules/browserslist": {
@@ -2576,6 +2903,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2638,9 +2966,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001770",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001770.tgz",
-      "integrity": "sha512-x/2CLQ1jHENRbHg5PSId2sXq1CIO1CISvwWAj027ltMVG2UNgW+w9oH2+HzgEIRFembL8bUlXtfbBHR1fCg2xw==",
+      "version": "1.0.30001781",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001781.tgz",
+      "integrity": "sha512-RdwNCyMsNBftLjW6w01z8bKEvT6e/5tpPVEgtn22TiLGlstHOVecsX2KHFkD5e/vRnIE4EGzpuIODb3mtswtkw==",
       "dev": true,
       "funding": [
         {
@@ -2769,14 +3097,14 @@
       }
     },
     "node_modules/css-tree": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
-      "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "mdn-data": "2.12.2",
-        "source-map-js": "^1.0.1"
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
@@ -2790,25 +3118,25 @@
       "license": "MIT"
     },
     "node_modules/cssstyle": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-6.0.1.tgz",
-      "integrity": "sha512-IoJs7La+oFp/AB033wBStxNOJt4+9hHMxsXUPANcoXL2b3W4DZKghlJ2cI/eyeRZIQ9ysvYEorVhjrcYctWbog==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-6.2.0.tgz",
+      "integrity": "sha512-Fm5NvhYathRnXNVndkUsCCuR63DCLVVwGOOwQw782coXFi5HhkXdu289l59HlXZBawsyNccXfWRYvLzcDCdDig==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@asamuzakjp/css-color": "^4.1.2",
-        "@csstools/css-syntax-patches-for-csstree": "^1.0.26",
+        "@asamuzakjp/css-color": "^5.0.1",
+        "@csstools/css-syntax-patches-for-csstree": "^1.0.28",
         "css-tree": "^3.1.0",
-        "lru-cache": "^11.2.5"
+        "lru-cache": "^11.2.6"
       },
       "engines": {
         "node": ">=20"
       }
     },
     "node_modules/cssstyle/node_modules/lru-cache": {
-      "version": "11.2.6",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.6.tgz",
-      "integrity": "sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==",
+      "version": "11.2.7",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.7.tgz",
+      "integrity": "sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {
@@ -3014,13 +3342,21 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "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==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
@@ -3037,12 +3373,25 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.286",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.286.tgz",
-      "integrity": "sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==",
+      "version": "1.5.328",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.328.tgz",
+      "integrity": "sha512-QNQ5l45DzYytThO21403XN3FvK0hOkWDG8viNf6jqS42msJ8I4tGDSpBCgvDRRPnkffafiwAym2X2eHeGD2V0w==",
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.20.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.20.1.tgz",
+      "integrity": "sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
@@ -3075,9 +3424,9 @@
       }
     },
     "node_modules/es-module-lexer": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
-      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
+      "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
       "dev": true,
       "license": "MIT"
     },
@@ -3109,9 +3458,9 @@
       }
     },
     "node_modules/es-toolkit": {
-      "version": "1.44.0",
-      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.44.0.tgz",
-      "integrity": "sha512-6penXeZalaV88MM3cGkFZZfOoLGWshWWfdy0tWw/RlVVyhvMaWSBTOvXNeiW3e5FwdS5ePW0LGEu17zT139ktg==",
+      "version": "1.45.1",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.45.1.tgz",
+      "integrity": "sha512-/jhoOj/Fx+A+IIyDNOvO3TItGmlMKhtX8ISAHKE90c4b/k1tqaqEZ+uUqfpU8DMnW5cgNJv606zS55jGvza0Xw==",
       "license": "MIT",
       "workspaces": [
         "docs",
@@ -3119,10 +3468,9 @@
       ]
     },
     "node_modules/esbuild": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz",
-      "integrity": "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==",
-      "dev": true,
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.4.tgz",
+      "integrity": "sha512-Rq4vbHnYkK5fws5NF7MYTU68FPRE1ajX7heQ/8QXXWqNgqqJ/GkmmyxIzUnf2Sr/bakf8l54716CcMGHYhMrrQ==",
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -3132,32 +3480,32 @@
         "node": ">=18"
       },
       "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"
+        "@esbuild/aix-ppc64": "0.27.4",
+        "@esbuild/android-arm": "0.27.4",
+        "@esbuild/android-arm64": "0.27.4",
+        "@esbuild/android-x64": "0.27.4",
+        "@esbuild/darwin-arm64": "0.27.4",
+        "@esbuild/darwin-x64": "0.27.4",
+        "@esbuild/freebsd-arm64": "0.27.4",
+        "@esbuild/freebsd-x64": "0.27.4",
+        "@esbuild/linux-arm": "0.27.4",
+        "@esbuild/linux-arm64": "0.27.4",
+        "@esbuild/linux-ia32": "0.27.4",
+        "@esbuild/linux-loong64": "0.27.4",
+        "@esbuild/linux-mips64el": "0.27.4",
+        "@esbuild/linux-ppc64": "0.27.4",
+        "@esbuild/linux-riscv64": "0.27.4",
+        "@esbuild/linux-s390x": "0.27.4",
+        "@esbuild/linux-x64": "0.27.4",
+        "@esbuild/netbsd-arm64": "0.27.4",
+        "@esbuild/netbsd-x64": "0.27.4",
+        "@esbuild/openbsd-arm64": "0.27.4",
+        "@esbuild/openbsd-x64": "0.27.4",
+        "@esbuild/openharmony-arm64": "0.27.4",
+        "@esbuild/sunos-x64": "0.27.4",
+        "@esbuild/win32-arm64": "0.27.4",
+        "@esbuild/win32-ia32": "0.27.4",
+        "@esbuild/win32-x64": "0.27.4"
       }
     },
     "node_modules/escalade": {
@@ -3184,25 +3532,26 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.39.2",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
-      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
+      "version": "9.39.4",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.4.tgz",
+      "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.21.1",
+        "@eslint/config-array": "^0.21.2",
         "@eslint/config-helpers": "^0.4.2",
         "@eslint/core": "^0.17.0",
-        "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.39.2",
+        "@eslint/eslintrc": "^3.3.5",
+        "@eslint/js": "9.39.4",
         "@eslint/plugin-kit": "^0.4.1",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@humanwhocodes/retry": "^0.4.2",
         "@types/estree": "^1.0.6",
-        "ajv": "^6.12.4",
+        "ajv": "^6.14.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.6",
         "debug": "^4.3.2",
@@ -3221,7 +3570,7 @@
         "is-glob": "^4.0.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "lodash.merge": "^4.6.2",
-        "minimatch": "^3.1.2",
+        "minimatch": "^3.1.5",
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.3"
       },
@@ -3291,6 +3640,37 @@
       }
     },
     "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/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/eslint/node_modules/brace-expansion": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.13.tgz",
+      "integrity": "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/eslint/node_modules/eslint-visitor-keys": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
       "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
@@ -3303,6 +3683,29 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint/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/eslint/node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/espree": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
@@ -3321,6 +3724,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/espree/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
@@ -3418,7 +3834,6 @@
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -3477,9 +3892,9 @@
       }
     },
     "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==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
       "dev": true,
       "license": "ISC"
     },
@@ -3519,11 +3934,24 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -3628,6 +4056,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -3756,9 +4190,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/ignore": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
-      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3858,6 +4292,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3884,6 +4327,7 @@
       "integrity": "sha512-0+MoQNYyr2rBHqO1xilltfDjV9G7ymYGlAUazgcDLQaUf8JDHbuGwsxN6U9qWaElZ4w1B2r7yEGIL3GdeW3Rug==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@acemir/cssom": "^0.9.31",
         "@asamuzakjp/dom-selector": "^6.8.1",
@@ -3990,6 +4434,255 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -4038,7 +4731,6 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -4047,7 +4739,6 @@
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
       "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.5"
@@ -4063,9 +4754,9 @@
       }
     },
     "node_modules/mdn-data": {
-      "version": "2.12.2",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
-      "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
       "dev": true,
       "license": "CC0-1.0"
     },
@@ -4101,16 +4792,19 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "10.2.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
+      "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==",
       "dev": true,
-      "license": "ISC",
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "brace-expansion": "^1.1.7"
+        "brace-expansion": "^5.0.2"
       },
       "engines": {
-        "node": "*"
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/ms": {
@@ -4124,7 +4818,6 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
       "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -4147,9 +4840,9 @@
       "license": "MIT"
     },
     "node_modules/node-releases": {
-      "version": "2.0.27",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
-      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "version": "2.0.36",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.36.tgz",
+      "integrity": "sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==",
       "dev": true,
       "license": "MIT"
     },
@@ -4271,15 +4964,14 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -4288,10 +4980,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
-      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
-      "dev": true,
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
+      "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
       "funding": [
         {
           "type": "opencollective",
@@ -4316,6 +5007,13 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -4332,7 +5030,6 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -4348,7 +5045,6 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -4356,6 +5052,14 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/pretty-format/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==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -4377,6 +5081,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4386,6 +5091,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -4394,9 +5100,9 @@
       }
     },
     "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==",
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.4.tgz",
+      "integrity": "sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==",
       "license": "MIT",
       "peer": true
     },
@@ -4405,6 +5111,7 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -4434,9 +5141,9 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.0.tgz",
-      "integrity": "sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw==",
+      "version": "7.13.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.2.tgz",
+      "integrity": "sha512-tX1Aee+ArlKQP+NIUd7SE6Li+CiGKwQtbS+FfRxPX6Pe4vHOo6nr9d++u5cwg+Z8K/x8tP+7qLmujDtfrAoUJA==",
       "license": "MIT",
       "dependencies": {
         "cookie": "^1.0.1",
@@ -4456,12 +5163,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.0.tgz",
-      "integrity": "sha512-5CO/l5Yahi2SKC6rGZ+HDEjpjkGaG/ncEP7eWFTvFxbHP8yeeI0PxTDjimtpXYlR3b3i9/WIL4VJttPrESIf2g==",
+      "version": "7.13.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.2.tgz",
+      "integrity": "sha512-aR7SUORwTqAW0JDeiWF07e9SBE9qGpByR9I8kJT5h/FrBKxPMS6TiC7rmVO+gC0q52Bx7JnjWe8Z1sR9faN4YA==",
       "license": "MIT",
       "dependencies": {
-        "react-router": "7.13.0"
+        "react-router": "7.13.2"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -4472,15 +5179,15 @@
       }
     },
     "node_modules/recharts": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.7.0.tgz",
-      "integrity": "sha512-l2VCsy3XXeraxIID9fx23eCb6iCBsxUQDnE8tWm6DFdszVAO7WVY/ChAD9wVit01y6B2PMupYiMmQwhgPHc9Ew==",
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.8.1.tgz",
+      "integrity": "sha512-mwzmO1s9sFL0TduUpwndxCUNoXsBw3u3E/0+A+cLcrSfQitSG62L32N69GhqUrrT5qKcAE3pCGVINC6pqkBBQg==",
       "license": "MIT",
       "workspaces": [
         "www"
       ],
       "dependencies": {
-        "@reduxjs/toolkit": "1.x.x || 2.x.x",
+        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
         "clsx": "^2.1.1",
         "decimal.js-light": "^2.5.1",
         "es-toolkit": "^1.39.3",
@@ -4519,7 +5226,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -4557,10 +5265,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
-      "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
-      "dev": true,
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.0.tgz",
+      "integrity": "sha512-yqjxruMGBQJ2gG4HtjZtAfXArHomazDHoFwFFmZZl0r7Pdo7qCIXKqKHZc8yeoMgzJJ+pO6pEEHa+V7uzWlrAQ==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.8"
@@ -4573,31 +5280,31 @@
         "npm": ">=8.0.0"
       },
       "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",
+        "@rollup/rollup-android-arm-eabi": "4.60.0",
+        "@rollup/rollup-android-arm64": "4.60.0",
+        "@rollup/rollup-darwin-arm64": "4.60.0",
+        "@rollup/rollup-darwin-x64": "4.60.0",
+        "@rollup/rollup-freebsd-arm64": "4.60.0",
+        "@rollup/rollup-freebsd-x64": "4.60.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.60.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.60.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.60.0",
+        "@rollup/rollup-linux-arm64-musl": "4.60.0",
+        "@rollup/rollup-linux-loong64-gnu": "4.60.0",
+        "@rollup/rollup-linux-loong64-musl": "4.60.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.60.0",
+        "@rollup/rollup-linux-ppc64-musl": "4.60.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.60.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.60.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.60.0",
+        "@rollup/rollup-linux-x64-gnu": "4.60.0",
+        "@rollup/rollup-linux-x64-musl": "4.60.0",
+        "@rollup/rollup-openbsd-x64": "4.60.0",
+        "@rollup/rollup-openharmony-arm64": "4.60.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.60.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.60.0",
+        "@rollup/rollup-win32-x64-gnu": "4.60.0",
+        "@rollup/rollup-win32-x64-msvc": "4.60.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -4621,13 +5328,15 @@
       "license": "MIT"
     },
     "node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
+      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/set-cookie-parser": {
@@ -4670,7 +5379,6 @@
       "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"
@@ -4684,9 +5392,9 @@
       "license": "MIT"
     },
     "node_modules/std-env": {
-      "version": "3.10.0",
-      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
-      "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.0.0.tgz",
+      "integrity": "sha512-zUMPtQ/HBY3/50VbpkupYHbRroTRZJPRLvreamgErJVys0ceuzMkD44J/QjqhHjOzK42GQ3QZIeFG1OYfOtKqQ==",
       "dev": true,
       "license": "MIT"
     },
@@ -4736,6 +5444,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tailwindcss": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",
+      "integrity": "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==",
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.2.tgz",
+      "integrity": "sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -4750,9 +5477,9 @@
       "license": "MIT"
     },
     "node_modules/tinyexec": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.2.tgz",
-      "integrity": "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.4.tgz",
+      "integrity": "sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4763,7 +5490,6 @@
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
       "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -4777,9 +5503,9 @@
       }
     },
     "node_modules/tinyrainbow": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.0.3.tgz",
-      "integrity": "sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+      "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4787,29 +5513,29 @@
       }
     },
     "node_modules/tldts": {
-      "version": "7.0.23",
-      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.23.tgz",
-      "integrity": "sha512-ASdhgQIBSay0R/eXggAkQ53G4nTJqTXqC2kbaBbdDwM7SkjyZyO0OaaN1/FH7U/yCeqOHDwFO5j8+Os/IS1dXw==",
+      "version": "7.0.27",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.27.tgz",
+      "integrity": "sha512-I4FZcVFcqCRuT0ph6dCDpPuO4Xgzvh+spkcTr1gK7peIvxWauoloVO0vuy1FQnijT63ss6AsHB6+OIM4aXHbPg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "tldts-core": "^7.0.23"
+        "tldts-core": "^7.0.27"
       },
       "bin": {
         "tldts": "bin/cli.js"
       }
     },
     "node_modules/tldts-core": {
-      "version": "7.0.23",
-      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.0.23.tgz",
-      "integrity": "sha512-0g9vrtDQLrNIiCj22HSe9d4mLVG3g5ph5DZ8zCKBr4OtrspmNB6ss7hVyzArAeE88ceZocIEGkyW1Ime7fxPtQ==",
+      "version": "7.0.27",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.0.27.tgz",
+      "integrity": "sha512-YQ7uPjgWUibIK6DW5lrKujGwUKhLevU4hcGbP5O6TcIUb+oTjJYJVWPS4nZsIHrEEEG6myk/oqAJUEQmpZrHsg==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/tough-cookie": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.0.tgz",
-      "integrity": "sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.1.tgz",
+      "integrity": "sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
@@ -4833,9 +5559,9 @@
       }
     },
     "node_modules/ts-api-utils": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
-      "integrity": "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
+      "integrity": "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4864,6 +5590,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -4873,9 +5600,9 @@
       }
     },
     "node_modules/undici": {
-      "version": "7.22.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-7.22.0.tgz",
-      "integrity": "sha512-RqslV2Us5BrllB+JeiZnK4peryVTndy9Dnqq62S3yYRRTj0tFQCwEniUy2167skdGOy3vqRzEvl1Dm4sV2ReDg==",
+      "version": "7.24.6",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.24.6.tgz",
+      "integrity": "sha512-Xi4agocCbRzt0yYMZGMA6ApD7gvtUFaxm4ZmeacWI4cZxaF6C+8I8QfofC20NAePiB/IcvZmzkJ7XPa471AEtA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4886,7 +5613,7 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/update-browserslist-db": {
@@ -4965,8 +5692,8 @@
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
-      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -5037,31 +5764,31 @@
       }
     },
     "node_modules/vitest": {
-      "version": "4.0.18",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.18.tgz",
-      "integrity": "sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.2.tgz",
+      "integrity": "sha512-xjR1dMTVHlFLh98JE3i/f/WePqJsah4A0FK9cc8Ehp9Udk0AZk6ccpIZhh1qJ/yxVWRZ+Q54ocnD8TXmkhspGg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/expect": "4.0.18",
-        "@vitest/mocker": "4.0.18",
-        "@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.2.2",
+        "@vitest/expect": "4.1.2",
+        "@vitest/mocker": "4.1.2",
+        "@vitest/pretty-format": "4.1.2",
+        "@vitest/runner": "4.1.2",
+        "@vitest/snapshot": "4.1.2",
+        "@vitest/spy": "4.1.2",
+        "@vitest/utils": "4.1.2",
+        "es-module-lexer": "^2.0.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",
+        "std-env": "^4.0.0-rc.1",
         "tinybench": "^2.9.0",
         "tinyexec": "^1.0.2",
         "tinyglobby": "^0.2.15",
-        "tinyrainbow": "^3.0.3",
-        "vite": "^6.0.0 || ^7.0.0",
+        "tinyrainbow": "^3.1.0",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
         "why-is-node-running": "^2.3.0"
       },
       "bin": {
@@ -5077,12 +5804,13 @@
         "@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",
+        "@vitest/browser-playwright": "4.1.2",
+        "@vitest/browser-preview": "4.1.2",
+        "@vitest/browser-webdriverio": "4.1.2",
+        "@vitest/ui": "4.1.2",
         "happy-dom": "*",
-        "jsdom": "*"
+        "jsdom": "*",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
       },
       "peerDependenciesMeta": {
         "@edge-runtime/vm": {
@@ -5111,6 +5839,9 @@
         },
         "jsdom": {
           "optional": true
+        },
+        "vite": {
+          "optional": false
         }
       }
     },
@@ -5248,6 +5979,7 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/frontend/package.json b/frontend/package.json
index 152f9e3..5c69554 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@stellar/freighter-api": "^6.0.1",
+    "@tailwindcss/vite": "^4.2.1",
     "axios": "^1.7.0",
     "lucide-react": "^0.575.0",
     "react": "^19.2.0",
@@ -22,6 +23,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@tailwindcss/postcss": "^4.2.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -31,13 +33,17 @@
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.24",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
     "jsdom": "^28.1.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.2.1",
     "typescript": "^5.6.0",
     "vite": "^7.3.1",
     "vitest": "^4.0.18"
-  }
+  },
+  "packageManager": "pnpm@10.28.1+sha512.7d7dbbca9e99447b7c3bf7a73286afaaf6be99251eb9498baefa7d406892f67b879adb3a1d7e687fc4ccc1a388c7175fbaae567a26ab44d1067b54fcb0d6a316"
 }
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
new file mode 100644
index 0000000..f16cdcf
--- /dev/null
+++ b/frontend/pnpm-lock.yaml
@@ -0,0 +1,3805 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@stellar/freighter-api':
+        specifier: ^6.0.1
+        version: 6.0.1
+      '@tailwindcss/vite':
+        specifier: ^4.2.1
+        version: 4.2.1(vite@7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.31.1))
+      axios:
+        specifier: ^1.7.0
+        version: 1.13.5
+      lucide-react:
+        specifier: ^0.575.0
+        version: 0.575.0(react@19.2.4)
+      react:
+        specifier: ^19.2.0
+        version: 19.2.4
+      react-dom:
+        specifier: ^19.2.0
+        version: 19.2.4(react@19.2.4)
+      react-router-dom:
+        specifier: ^7.0.0
+        version: 7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      recharts:
+        specifier: ^3.7.0
+        version: 3.7.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react-is@19.2.4)(react@19.2.4)(redux@5.0.1)
+    devDependencies:
+      '@eslint/js':
+        specifier: ^9.39.1
+        version: 9.39.3
+      '@tailwindcss/postcss':
+        specifier: ^4.2.1
+        version: 4.2.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/node':
+        specifier: ^22.19.11
+        version: 22.19.11
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^8.0.0
+        version: 8.56.0(@typescript-eslint/parser@8.56.0(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser':
+        specifier: ^8.0.0
+        version: 8.56.0(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      '@vitejs/plugin-react':
+        specifier: ^5.1.1
+        version: 5.1.4(vite@7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.31.1))
+      autoprefixer:
+        specifier: ^10.4.24
+        version: 10.4.24(postcss@8.5.6)
+      eslint:
+        specifier: ^9.39.1
+        version: 9.39.3(jiti@2.6.1)
+      eslint-plugin-react-hooks:
+        specifier: ^7.0.1
+        version: 7.0.1(eslint@9.39.3(jiti@2.6.1))
+      eslint-plugin-react-refresh:
+        specifier: ^0.4.24
+        version: 0.4.26(eslint@9.39.3(jiti@2.6.1))
+      globals:
+        specifier: ^16.5.0
+        version: 16.5.0
+      jsdom:
+        specifier: ^28.1.0
+        version: 28.1.0
+      postcss:
+        specifier: ^8.5.6
+        version: 8.5.6
+      tailwindcss:
+        specifier: ^4.2.1
+        version: 4.2.1
+      typescript:
+        specifier: ^5.6.0
+        version: 5.9.3
+      vite:
+        specifier: ^7.3.1
+        version: 7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.31.1)
+      vitest:
+        specifier: ^4.0.18
+        version: 4.0.18(@types/node@22.19.11)(jiti@2.6.1)(jsdom@28.1.0)(lightningcss@1.31.1)
+
+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==}
+
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  '@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'}
+
+  '@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.0.28':
+    resolution: {integrity: sha512-1NRf1CUBjnr3K7hu8BLxjQrKCxEe8FP/xmPTenAxCRZWVLbmGotkFvG9mfNpjA6k7Bw1bw4BilZq9cu19RA5pg==}
+
+  '@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.3':
+    resolution: {integrity: sha512-1B1VkCq6FuUNlQvlBYb+1jDu/gV297TIs/OeiaSR9l1H27SVW55ONE1e1Vp16NqP683+xEGzxYtv4XCiDPaQiw==}
+    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.14.1':
+    resolution: {integrity: sha512-OhkBFWI6GcRMUroChZiopRiSp2iAMvEBK47NhJooDqz1RERO4QuZIZnjP63TXX8GAiLABkYmX+fuQsdJ1dd2QQ==}
+    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
+
+  '@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'}
+
+  '@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==}
+
+  '@reduxjs/toolkit@2.11.2':
+    resolution: {integrity: sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==}
+    peerDependencies:
+      react: ^16.9.0 || ^17.0.0 || ^18 || ^19
+      react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-redux:
+        optional: true
+
+  '@rolldown/pluginutils@1.0.0-rc.3':
+    resolution: {integrity: sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q==}
+
+  '@rollup/rollup-android-arm-eabi@4.59.0':
+    resolution: {integrity: sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.59.0':
+    resolution: {integrity: sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.59.0':
+    resolution: {integrity: sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.59.0':
+    resolution: {integrity: sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.59.0':
+    resolution: {integrity: sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.59.0':
+    resolution: {integrity: sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.59.0':
+    resolution: {integrity: sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.59.0':
+    resolution: {integrity: sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-gnu@4.59.0':
+    resolution: {integrity: sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-musl@4.59.0':
+    resolution: {integrity: sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-gnu@4.59.0':
+    resolution: {integrity: sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-musl@4.59.0':
+    resolution: {integrity: sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.59.0':
+    resolution: {integrity: sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-musl@4.59.0':
+    resolution: {integrity: sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.59.0':
+    resolution: {integrity: sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-musl@4.59.0':
+    resolution: {integrity: sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.59.0':
+    resolution: {integrity: sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-gnu@4.59.0':
+    resolution: {integrity: sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-musl@4.59.0':
+    resolution: {integrity: sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-openbsd-x64@4.59.0':
+    resolution: {integrity: sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.59.0':
+    resolution: {integrity: sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.59.0':
+    resolution: {integrity: sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.59.0':
+    resolution: {integrity: sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.59.0':
+    resolution: {integrity: sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.59.0':
+    resolution: {integrity: sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+
+  '@stellar/freighter-api@6.0.1':
+    resolution: {integrity: sha512-eqwakEqSg+zoLuPpSbKyrX0pG8DQFzL/J5GtbfuMCmJI+h+oiC9pQ5C6QLc80xopZQKdGt8dUAFCmDMNdAG95w==}
+
+  '@tailwindcss/node@4.2.1':
+    resolution: {integrity: sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==}
+
+  '@tailwindcss/oxide-android-arm64@4.2.1':
+    resolution: {integrity: sha512-eZ7G1Zm5EC8OOKaesIKuw77jw++QJ2lL9N+dDpdQiAB/c/B2wDh0QPFHbkBVrXnwNugvrbJFk1gK2SsVjwWReg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.1':
+    resolution: {integrity: sha512-q/LHkOstoJ7pI1J0q6djesLzRvQSIfEto148ppAd+BVQK0JYjQIFSK3JgYZJa+Yzi0DDa52ZsQx2rqytBnf8Hw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.2.1':
+    resolution: {integrity: sha512-/f/ozlaXGY6QLbpvd/kFTro2l18f7dHKpB+ieXz+Cijl4Mt9AI2rTrpq7V+t04nK+j9XBQHnSMdeQRhbGyt6fw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.1':
+    resolution: {integrity: sha512-5e/AkgYJT/cpbkys/OU2Ei2jdETCLlifwm7ogMC7/hksI2fC3iiq6OcXwjibcIjPung0kRtR3TxEITkqgn0TcA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
+    resolution: {integrity: sha512-Uny1EcVTTmerCKt/1ZuKTkb0x8ZaiuYucg2/kImO5A5Y/kBz41/+j0gxUZl+hTF3xkWpDmHX+TaWhOtba2Fyuw==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
+    resolution: {integrity: sha512-CTrwomI+c7n6aSSQlsPL0roRiNMDQ/YzMD9EjcR+H4f0I1SQ8QqIuPnsVp7QgMkC1Qi8rtkekLkOFjo7OlEFRQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
+    resolution: {integrity: sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
+    resolution: {integrity: sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.1':
+    resolution: {integrity: sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.1':
+    resolution: {integrity: sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q==}
+    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.1':
+    resolution: {integrity: sha512-YlUEHRHBGnCMh4Nj4GnqQyBtsshUPdiNroZj8VPkvTZSoHsilRCwXcVKnG9kyi0ZFAS/3u+qKHBdDc81SADTRA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
+    resolution: {integrity: sha512-rbO34G5sMWWyrN/idLeVxAZgAKWrn5LiR3/I90Q9MkA67s6T1oB0xtTe+0heoBvHSpbU9Mk7i6uwJnpo4u21XQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.2.1':
+    resolution: {integrity: sha512-yv9jeEFWnjKCI6/T3Oq50yQEOqmpmpfzG1hcZsAOaXFQPfzWprWrlHSdGPEF3WQTi8zu8ohC9Mh9J470nT5pUw==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/postcss@4.2.1':
+    resolution: {integrity: sha512-OEwGIBnXnj7zJeonOh6ZG9woofIjGrd2BORfvE5p9USYKDCZoQmfqLcfNiRWoJlRWLdNPn2IgVZuWAOM4iTYMw==}
+
+  '@tailwindcss/vite@4.2.1':
+    resolution: {integrity: sha512-TBf2sJjYeb28jD2U/OhwdW0bbOsxkWPwQ7SrqGf9sVcoYwZj7rkXljroBO9wKBut9XnmQLXanuDUeqQK0lGg/w==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7
+
+  '@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/d3-array@3.2.2':
+    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-shape@3.1.8':
+    resolution: {integrity: sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/node@22.19.11':
+    resolution: {integrity: sha512-BH7YwL6rA93ReqeQS1c4bsPpcfOmJasG+Fkr6Y59q83f9M1WcBRHR2vM+P9eOisYRcN3ujQoiZY8uk5W+1WL8w==}
+
+  '@types/react-dom@19.2.3':
+    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
+    peerDependencies:
+      '@types/react': ^19.2.0
+
+  '@types/react@19.2.14':
+    resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
+
+  '@types/use-sync-external-store@0.0.6':
+    resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
+
+  '@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-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/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.16.0:
+    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+
+  ajv@6.14.0:
+    resolution: {integrity: sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  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'}
+
+  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'}
+
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  autoprefixer@10.4.24:
+    resolution: {integrity: sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
+  axios@1.13.5:
+    resolution: {integrity: sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  balanced-match@4.0.4:
+    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
+    engines: {node: 18 || 20 || >=22}
+
+  base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
+  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@5.0.3:
+    resolution: {integrity: sha512-fy6KJm2RawA5RcHkLa1z/ScpBeA762UF9KmZQxwIbDtRJrgLzM10depAiEQ+CXYcoiqW1/m96OAAoke2nE9EeA==}
+    engines: {node: 18 || 20 || >=22}
+
+  browserslist@4.28.1:
+    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  buffer@6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  caniuse-lite@1.0.30001774:
+    resolution: {integrity: sha512-DDdwPGz99nmIEv216hKSgLD+D4ikHQHjBC/seF98N9CPqRX4M5mSxT9eTV6oyisnJcuzxtZy4n17yKKQYmYQOA==}
+
+  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'}
+
+  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==}
+
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
+  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.1.0:
+    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
+    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.1.0:
+    resolution: {integrity: sha512-Ml4fP2UT2K3CUBQnVlbdV/8aFDdlY69E+YnwJM+3VUWl08S3J8c8aRuJqCkD9Py8DHZ7zNNvsfKl8psocHZEFg==}
+    engines: {node: '>=20'}
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.2:
+    resolution: {integrity: sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  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-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+
+  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==}
+
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
+  detect-libc@2.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==}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  electron-to-chromium@1.5.302:
+    resolution: {integrity: sha512-sM6HAN2LyK82IyPBpznDRqlTQAtuSaO+ShzFiWTvoMJLHyZ+Y39r8VMfHzwbU8MVBzQ4Wdn85+wlZl2TLGIlwg==}
+
+  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'}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  es-toolkit@1.44.0:
+    resolution: {integrity: sha512-6penXeZalaV88MM3cGkFZZfOoLGWshWWfdy0tWw/RlVVyhvMaWSBTOvXNeiW3e5FwdS5ePW0LGEu17zT139ktg==}
+
+  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@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  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.4.26:
+    resolution: {integrity: sha512-1RETEylht2O6FM/MvgnyvT+8K21wLqDNg4qD51Zj3guhjt433XbnnkVttHMyaVyAFD03QSV4LPS5iE3VQmO7XQ==}
+    peerDependencies:
+      eslint: '>=8.40'
+
+  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.1:
+    resolution: {integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  eslint@9.39.3:
+    resolution: {integrity: sha512-VmQ+sifHUbI/IcSopBCF/HO3YiHQx/AVd3UVyYL6weuwW+HvON9VYn5l6Zl1WZzPWXPNZrSQpxwkkZ/VuvJZzg==}
+    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'}
+
+  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==}
+
+  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'}
+
+  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==}
+
+  follow-redirects@1.15.11:
+    resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
+  form-data@4.0.5:
+    resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
+    engines: {node: '>= 6'}
+
+  fraction.js@5.3.4:
+    resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  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@16.5.0:
+    resolution: {integrity: sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==}
+    engines: {node: '>=18'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  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'}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  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}
+
+  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'}
+
+  ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
+  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'}
+
+  immer@10.2.0:
+    resolution: {integrity: sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==}
+
+  immer@11.1.4:
+    resolution: {integrity: sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==}
+
+  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'}
+
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
+  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-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  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]
+
+  lightningcss-linux-arm64-musl@1.31.1:
+    resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  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]
+
+  lightningcss-linux-x64-musl@1.31.1:
+    resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  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'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  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==}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  mdn-data@2.12.2:
+    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+
+  minimatch@3.1.3:
+    resolution: {integrity: sha512-M2GCs7Vk83NxkUyQV1bkABc4yxgz9kILhHImZiBPAZ9ybuvCb0/H7lEl5XvIg3g+9d4eNotkZA5IWwYl0tibaA==}
+
+  minimatch@9.0.6:
+    resolution: {integrity: sha512-kQAVowdR33euIqeA0+VZTDqU+qo1IeVY+hrKYtZMio3Pg0P0vuh/kwRylLUddJhB6pf3q/botcOvRtx4IN1wqQ==}
+    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==}
+
+  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==}
+
+  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'}
+
+  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@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  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'}
+
+  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}
+
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
+  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@19.2.4:
+    resolution: {integrity: sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==}
+
+  react-redux@9.2.0:
+    resolution: {integrity: sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==}
+    peerDependencies:
+      '@types/react': ^18.2.25 || ^19
+      react: ^18.0 || ^19
+      redux: ^5.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      redux:
+        optional: true
+
+  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@19.2.4:
+    resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
+    engines: {node: '>=0.10.0'}
+
+  recharts@3.7.0:
+    resolution: {integrity: sha512-l2VCsy3XXeraxIID9fx23eCb6iCBsxUQDnE8tWm6DFdszVAO7WVY/ChAD9wVit01y6B2PMupYiMmQwhgPHc9Ew==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-is: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
+
+  redux-thunk@3.1.0:
+    resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
+    peerDependencies:
+      redux: ^5.0.0
+
+  redux@5.0.1:
+    resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
+
+  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==}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  rollup@4.59.0:
+    resolution: {integrity: sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==}
+    engines: {node: '>=18.0.0', npm: '>=8.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.1:
+    resolution: {integrity: sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==}
+    engines: {node: '>=10'}
+    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==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  std-env@3.10.0:
+    resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
+
+  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@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==}
+
+  tailwindcss@4.2.1:
+    resolution: {integrity: sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==}
+
+  tapable@2.3.0:
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+    engines: {node: '>=6'}
+
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  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.23:
+    resolution: {integrity: sha512-0g9vrtDQLrNIiCj22HSe9d4mLVG3g5ph5DZ8zCKBr4OtrspmNB6ss7hVyzArAeE88ceZocIEGkyW1Ime7fxPtQ==}
+
+  tldts@7.0.23:
+    resolution: {integrity: sha512-ASdhgQIBSay0R/eXggAkQ53G4nTJqTXqC2kbaBbdDwM7SkjyZyO0OaaN1/FH7U/yCeqOHDwFO5j8+Os/IS1dXw==}
+    hasBin: true
+
+  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'}
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  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
+
+  victory-vendor@37.3.6:
+    resolution: {integrity: sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==}
+
+  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'}
+
+  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'}
+
+  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==}
+
+  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@4.3.6:
+    resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
+
+snapshots:
+
+  '@acemir/cssom@0.9.31': {}
+
+  '@adobe/css-tools@4.4.4': {}
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@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.1.0
+      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
+      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
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.29.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
+  '@bramus/specificity@2.4.2':
+    dependencies:
+      css-tree: 3.1.0
+
+  '@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.0.28': {}
+
+  '@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.3(jiti@2.6.1))':
+    dependencies:
+      eslint: 9.39.3(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
+      minimatch: 3.1.3
+    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.14.0
+      debug: 4.4.3
+      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.3
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/js@9.39.3': {}
+
+  '@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.14.1': {}
+
+  '@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': {}
+
+  '@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
+
+  '@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.2.4)(redux@5.0.1))(react@19.2.4)':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@standard-schema/utils': 0.3.0
+      immer: 11.1.4
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.1.1
+    optionalDependencies:
+      react: 19.2.4
+      react-redux: 9.2.0(@types/react@19.2.14)(react@19.2.4)(redux@5.0.1)
+
+  '@rolldown/pluginutils@1.0.0-rc.3': {}
+
+  '@rollup/rollup-android-arm-eabi@4.59.0':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.59.0':
+    optional: true
+
+  '@standard-schema/spec@1.1.0': {}
+
+  '@standard-schema/utils@0.3.0': {}
+
+  '@stellar/freighter-api@6.0.1':
+    dependencies:
+      buffer: 6.0.3
+      semver: 7.7.1
+
+  '@tailwindcss/node@4.2.1':
+    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.1
+
+  '@tailwindcss/oxide-android-arm64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide@4.2.1':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.2.1
+      '@tailwindcss/oxide-darwin-arm64': 4.2.1
+      '@tailwindcss/oxide-darwin-x64': 4.2.1
+      '@tailwindcss/oxide-freebsd-x64': 4.2.1
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.1
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.1
+      '@tailwindcss/oxide-linux-arm64-musl': 4.2.1
+      '@tailwindcss/oxide-linux-x64-gnu': 4.2.1
+      '@tailwindcss/oxide-linux-x64-musl': 4.2.1
+      '@tailwindcss/oxide-wasm32-wasi': 4.2.1
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.1
+      '@tailwindcss/oxide-win32-x64-msvc': 4.2.1
+
+  '@tailwindcss/postcss@4.2.1':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.2.1
+      '@tailwindcss/oxide': 4.2.1
+      postcss: 8.5.6
+      tailwindcss: 4.2.1
+
+  '@tailwindcss/vite@4.2.1(vite@7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.31.1))':
+    dependencies:
+      '@tailwindcss/node': 4.2.1
+      '@tailwindcss/oxide': 4.2.1
+      tailwindcss: 4.2.1
+      vite: 7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.31.1)
+
+  '@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/d3-array@3.2.2': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-shape@3.1.8':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
+  '@types/deep-eql@4.0.2': {}
+
+  '@types/estree@1.0.8': {}
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/node@22.19.11':
+    dependencies:
+      undici-types: 6.21.0
+
+  '@types/react-dom@19.2.3(@types/react@19.2.14)':
+    dependencies:
+      '@types/react': 19.2.14
+
+  '@types/react@19.2.14':
+    dependencies:
+      csstype: 3.2.3
+
+  '@types/use-sync-external-store@0.0.6': {}
+
+  '@typescript-eslint/eslint-plugin@8.56.0(@typescript-eslint/parser@8.56.0(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.56.0(eslint@9.39.3(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.3(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.56.0(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.56.0
+      eslint: 9.39.3(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.3(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
+      eslint: 9.39.3(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
+      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.3(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.3(jiti@2.6.1))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 9.39.3(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
+      minimatch: 9.0.6
+      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.3(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.3(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.3(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.1
+
+  '@vitejs/plugin-react@5.1.4(vite@7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.31.1))':
+    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@22.19.11)(jiti@2.6.1)(lightningcss@1.31.1)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@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@22.19.11)(jiti@2.6.1)(lightningcss@1.31.1))':
+    dependencies:
+      '@vitest/spy': 4.0.18
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.31.1)
+
+  '@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.16.0):
+    dependencies:
+      acorn: 8.16.0
+
+  acorn@8.16.0: {}
+
+  agent-base@7.1.4: {}
+
+  ajv@6.14.0:
+    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-regex@5.0.1: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansi-styles@5.2.0: {}
+
+  argparse@2.0.1: {}
+
+  aria-query@5.3.0:
+    dependencies:
+      dequal: 2.0.3
+
+  aria-query@5.3.2: {}
+
+  assertion-error@2.0.1: {}
+
+  asynckit@0.4.0: {}
+
+  autoprefixer@10.4.24(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      caniuse-lite: 1.0.30001774
+      fraction.js: 5.3.4
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  axios@1.13.5:
+    dependencies:
+      follow-redirects: 1.15.11
+      form-data: 4.0.5
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
+  balanced-match@1.0.2: {}
+
+  balanced-match@4.0.4: {}
+
+  base64-js@1.5.1: {}
+
+  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@5.0.3:
+    dependencies:
+      balanced-match: 4.0.4
+
+  browserslist@4.28.1:
+    dependencies:
+      baseline-browser-mapping: 2.10.0
+      caniuse-lite: 1.0.30001774
+      electron-to-chromium: 1.5.302
+      node-releases: 2.0.27
+      update-browserslist-db: 1.2.3(browserslist@4.28.1)
+
+  buffer@6.0.3:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  callsites@3.1.0: {}
+
+  caniuse-lite@1.0.30001774: {}
+
+  chai@6.2.2: {}
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  clsx@2.1.1: {}
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
+  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.1.0:
+    dependencies:
+      mdn-data: 2.12.2
+      source-map-js: 1.2.1
+
+  css.escape@1.5.1: {}
+
+  cssstyle@6.1.0:
+    dependencies:
+      '@asamuzakjp/css-color': 5.0.1
+      '@csstools/css-syntax-patches-for-csstree': 1.0.28
+      css-tree: 3.1.0
+      lru-cache: 11.2.6
+
+  csstype@3.2.3: {}
+
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-color@3.1.0: {}
+
+  d3-ease@3.0.1: {}
+
+  d3-format@3.1.2: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
+  data-urls@7.0.0:
+    dependencies:
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  decimal.js-light@2.5.1: {}
+
+  decimal.js@10.6.0: {}
+
+  deep-is@0.1.4: {}
+
+  delayed-stream@1.0.0: {}
+
+  dequal@2.0.3: {}
+
+  detect-libc@2.1.2: {}
+
+  dom-accessibility-api@0.5.16: {}
+
+  dom-accessibility-api@0.6.3: {}
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  electron-to-chromium@1.5.302: {}
+
+  enhanced-resolve@5.19.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
+  entities@6.0.1: {}
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-module-lexer@1.7.0: {}
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  es-toolkit@1.44.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@4.0.0: {}
+
+  eslint-plugin-react-hooks@7.0.1(eslint@9.39.3(jiti@2.6.1)):
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/parser': 7.29.0
+      eslint: 9.39.3(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.4.26(eslint@9.39.3(jiti@2.6.1)):
+    dependencies:
+      eslint: 9.39.3(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.1: {}
+
+  eslint@9.39.3(jiti@2.6.1):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.3(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.3
+      '@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.14.0
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      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.3
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.6.1
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@10.4.0:
+    dependencies:
+      acorn: 8.16.0
+      acorn-jsx: 5.3.2(acorn@8.16.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: {}
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  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
+
+  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: {}
+
+  follow-redirects@1.15.11: {}
+
+  form-data@4.0.5:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.2
+      mime-types: 2.1.35
+
+  fraction.js@5.3.4: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  gensync@1.0.0-beta.2: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  globals@14.0.0: {}
+
+  globals@16.5.0: {}
+
+  gopd@1.2.0: {}
+
+  graceful-fs@4.2.11: {}
+
+  has-flag@4.0.0: {}
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  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.14.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
+  http-proxy-agent@7.0.2:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  ieee754@1.2.1: {}
+
+  ignore@5.3.2: {}
+
+  ignore@7.0.5: {}
+
+  immer@10.2.0: {}
+
+  immer@11.1.4: {}
+
+  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: {}
+
+  internmap@2.0.3: {}
+
+  is-extglob@2.1.1: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-potential-custom-element-name@1.0.1: {}
+
+  isexe@2.0.0: {}
+
+  jiti@2.6.1: {}
+
+  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.14.1
+      cssstyle: 6.1.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
+      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-stable-stringify-without-jsonify@1.0.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
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
+  lodash.merge@4.6.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
+
+  math-intrinsics@1.1.0: {}
+
+  mdn-data@2.12.2: {}
+
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  min-indent@1.0.1: {}
+
+  minimatch@3.1.3:
+    dependencies:
+      brace-expansion: 1.1.12
+
+  minimatch@9.0.6:
+    dependencies:
+      brace-expansion: 5.0.3
+
+  ms@2.1.3: {}
+
+  nanoid@3.3.11: {}
+
+  natural-compare@1.4.0: {}
+
+  node-releases@2.0.27: {}
+
+  obug@2.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
+
+  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@4.0.3: {}
+
+  postcss-value-parser@4.2.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: {}
+
+  pretty-format@27.5.1:
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+
+  proxy-from-env@1.1.0: {}
+
+  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@19.2.4: {}
+
+  react-redux@9.2.0(@types/react@19.2.14)(react@19.2.4)(redux@5.0.1):
+    dependencies:
+      '@types/use-sync-external-store': 0.0.6
+      react: 19.2.4
+      use-sync-external-store: 1.6.0(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      redux: 5.0.1
+
+  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@19.2.4: {}
+
+  recharts@3.7.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react-is@19.2.4)(react@19.2.4)(redux@5.0.1):
+    dependencies:
+      '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.2.4)(redux@5.0.1))(react@19.2.4)
+      clsx: 2.1.1
+      decimal.js-light: 2.5.1
+      es-toolkit: 1.44.0
+      eventemitter3: 5.0.4
+      immer: 10.2.0
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-is: 19.2.4
+      react-redux: 9.2.0(@types/react@19.2.14)(react@19.2.4)(redux@5.0.1)
+      reselect: 5.1.1
+      tiny-invariant: 1.3.3
+      use-sync-external-store: 1.6.0(react@19.2.4)
+      victory-vendor: 37.3.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - redux
+
+  redent@3.0.0:
+    dependencies:
+      indent-string: 4.0.0
+      strip-indent: 3.0.0
+
+  redux-thunk@3.1.0(redux@5.0.1):
+    dependencies:
+      redux: 5.0.1
+
+  redux@5.0.1: {}
+
+  require-from-string@2.0.2: {}
+
+  reselect@5.1.1: {}
+
+  resolve-from@4.0.0: {}
+
+  rollup@4.59.0:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.59.0
+      '@rollup/rollup-android-arm64': 4.59.0
+      '@rollup/rollup-darwin-arm64': 4.59.0
+      '@rollup/rollup-darwin-x64': 4.59.0
+      '@rollup/rollup-freebsd-arm64': 4.59.0
+      '@rollup/rollup-freebsd-x64': 4.59.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.59.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.59.0
+      '@rollup/rollup-linux-arm64-gnu': 4.59.0
+      '@rollup/rollup-linux-arm64-musl': 4.59.0
+      '@rollup/rollup-linux-loong64-gnu': 4.59.0
+      '@rollup/rollup-linux-loong64-musl': 4.59.0
+      '@rollup/rollup-linux-ppc64-gnu': 4.59.0
+      '@rollup/rollup-linux-ppc64-musl': 4.59.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.59.0
+      '@rollup/rollup-linux-riscv64-musl': 4.59.0
+      '@rollup/rollup-linux-s390x-gnu': 4.59.0
+      '@rollup/rollup-linux-x64-gnu': 4.59.0
+      '@rollup/rollup-linux-x64-musl': 4.59.0
+      '@rollup/rollup-openbsd-x64': 4.59.0
+      '@rollup/rollup-openharmony-arm64': 4.59.0
+      '@rollup/rollup-win32-arm64-msvc': 4.59.0
+      '@rollup/rollup-win32-ia32-msvc': 4.59.0
+      '@rollup/rollup-win32-x64-gnu': 4.59.0
+      '@rollup/rollup-win32-x64-msvc': 4.59.0
+      fsevents: 2.3.3
+
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+
+  scheduler@0.27.0: {}
+
+  semver@6.3.1: {}
+
+  semver@7.7.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: {}
+
+  source-map-js@1.2.1: {}
+
+  stackback@0.0.2: {}
+
+  std-env@3.10.0: {}
+
+  strip-indent@3.0.0:
+    dependencies:
+      min-indent: 1.0.1
+
+  strip-json-comments@3.1.1: {}
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  symbol-tree@3.2.4: {}
+
+  tailwindcss@4.2.1: {}
+
+  tapable@2.3.0: {}
+
+  tiny-invariant@1.3.3: {}
+
+  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.23: {}
+
+  tldts@7.0.23:
+    dependencies:
+      tldts-core: 7.0.23
+
+  tough-cookie@6.0.0:
+    dependencies:
+      tldts: 7.0.23
+
+  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
+
+  typescript@5.9.3: {}
+
+  undici-types@6.21.0: {}
+
+  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
+
+  victory-vendor@37.3.6:
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.1.8
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
+  vite@7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.31.1):
+    dependencies:
+      esbuild: 0.27.3
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.59.0
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 22.19.11
+      fsevents: 2.3.3
+      jiti: 2.6.1
+      lightningcss: 1.31.1
+
+  vitest@4.0.18(@types/node@22.19.11)(jiti@2.6.1)(jsdom@28.1.0)(lightningcss@1.31.1):
+    dependencies:
+      '@vitest/expect': 4.0.18
+      '@vitest/mocker': 4.0.18(vite@7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.31.1))
+      '@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@22.19.11)(jiti@2.6.1)(lightningcss@1.31.1)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 22.19.11
+      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
+
+  webidl-conversions@8.0.1: {}
+
+  whatwg-mimetype@5.0.0: {}
+
+  whatwg-url@16.0.1:
+    dependencies:
+      '@exodus/bytes': 1.14.1
+      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: {}
+
+  xml-name-validator@5.0.0: {}
+
+  xmlchars@2.2.0: {}
+
+  yallist@3.1.1: {}
+
+  yocto-queue@0.1.0: {}
+
+  zod-validation-error@4.0.2(zod@4.3.6):
+    dependencies:
+      zod: 4.3.6
+
+  zod@4.3.6: {}
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
new file mode 100644
index 0000000..1c87846
--- /dev/null
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+}
diff --git a/frontend/public/images/icons/cash-main.svg b/frontend/public/images/icons/cash-main.svg
new file mode 100644
index 0000000..1916098
--- /dev/null
+++ b/frontend/public/images/icons/cash-main.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#0000F5"><path d="M560-440q-50 0-85-35t-35-85q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35ZM280-320q-33 0-56.5-23.5T200-400v-320q0-33 23.5-56.5T280-800h560q33 0 56.5 23.5T920-720v320q0 33-23.5 56.5T840-320H280Zm80-80h400q0-33 23.5-56.5T840-480v-160q-33 0-56.5-23.5T760-720H360q0 33-23.5 56.5T280-640v160q33 0 56.5 23.5T360-400Zm440 240H120q-33 0-56.5-23.5T40-240v-440h80v440h680v80ZM280-400v-320 320Z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/images/icons/leader-board.svg b/frontend/public/images/icons/leader-board.svg
new file mode 100644
index 0000000..8921d97
--- /dev/null
+++ b/frontend/public/images/icons/leader-board.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#0000F5"><path d="M160-200h160v-320H160v320Zm240 0h160v-560H400v560Zm240 0h160v-240H640v240ZM80-120v-480h240v-240h320v320h240v400H80Z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/images/icons/support-main.svg b/frontend/public/images/icons/support-main.svg
new file mode 100644
index 0000000..4d28e50
--- /dev/null
+++ b/frontend/public/images/icons/support-main.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#0000F5"><path d="M324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5Zm40-70.5 48-110q-42-15-72.5-46.5T292-412l-110 46q23 64 71 112t111 72Zm-72-366q17-42 47.5-73.5T412-668l-46-110q-64 24-112 72t-72 112l110 46Zm273 153q35-35 35-85t-35-85q-35-35-85-35t-85 35q-35 35-35 85t35 85q35 35 85 35t85-35Zm31 213q63-24 110.5-71.5T778-364l-110-48q-15 42-46 72.5T550-292l46 110Zm72-368 110-46q-24-63-71.5-110.5T596-778l-46 112q41 15 71 45.5t47 70.5Z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/images/icons/wallet-main.svg b/frontend/public/images/icons/wallet-main.svg
new file mode 100644
index 0000000..f691de9
--- /dev/null
+++ b/frontend/public/images/icons/wallet-main.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#0000F5"><path d="M200-200v-560 560Zm0 80q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v100h-80v-100H200v560h560v-100h80v100q0 33-23.5 56.5T760-120H200Zm320-160q-33 0-56.5-23.5T440-360v-240q0-33 23.5-56.5T520-680h280q33 0 56.5 23.5T880-600v240q0 33-23.5 56.5T800-280H520Zm280-80v-240H520v240h280Zm-117.5-77.5Q700-455 700-480t-17.5-42.5Q665-540 640-540t-42.5 17.5Q580-505 580-480t17.5 42.5Q615-420 640-420t42.5-17.5Z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/images/map-placeholder.png b/frontend/public/images/map-placeholder.png
new file mode 100644
index 0000000..cae06bd
Binary files /dev/null and b/frontend/public/images/map-placeholder.png differ
diff --git a/frontend/public/images/wallet-connect-states.txt b/frontend/public/images/wallet-connect-states.txt
deleted file mode 100644
index d6a327d..0000000
--- a/frontend/public/images/wallet-connect-states.txt
+++ /dev/null
@@ -1 +0,0 @@
-Mock image representation: screenshots of state 1 (install), state 2 (connect), state 3 (address & disconnect) generated and attached to PR.
diff --git a/frontend/public/plan.svg b/frontend/public/plan.svg
new file mode 100644
index 0000000..996aa28
--- /dev/null
+++ b/frontend/public/plan.svg
@@ -0,0 +1,4 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32.0467" height="32.0706" rx="8" fill="#3B82F6"/>
+<path d="M9.6 13.9956L11.55 14.8206C11.7833 14.3539 12.025 13.9039 12.275 13.4706C12.525 13.0372 12.8 12.6039 13.1 12.1706L11.7 11.8956L9.6 13.9956ZM13.15 16.0706L16 18.8956C16.7 18.6289 17.45 18.2206 18.25 17.6706C19.05 17.1206 19.8 16.4956 20.5 15.7956C21.6667 14.6289 22.5792 13.3331 23.2375 11.9081C23.8958 10.4831 24.1833 9.17056 24.1 7.97056C22.9 7.88723 21.5833 8.17473 20.15 8.83306C18.7167 9.4914 17.4167 10.4039 16.25 11.5706C15.55 12.2706 14.925 13.0206 14.375 13.8206C13.825 14.6206 13.4167 15.3706 13.15 16.0706ZM17.6 14.4456C17.2167 14.0622 17.025 13.5914 17.025 13.0331C17.025 12.4747 17.2167 12.0039 17.6 11.6206C17.9833 11.2372 18.4583 11.0456 19.025 11.0456C19.5917 11.0456 20.0667 11.2372 20.45 11.6206C20.8333 12.0039 21.025 12.4747 21.025 13.0331C21.025 13.5914 20.8333 14.0622 20.45 14.4456C20.0667 14.8289 19.5917 15.0206 19.025 15.0206C18.4583 15.0206 17.9833 14.8289 17.6 14.4456ZM18.075 22.4706L20.175 20.3706L19.9 18.9706C19.4667 19.2706 19.0333 19.5414 18.6 19.7831C18.1667 20.0247 17.7167 20.2622 17.25 20.4956L18.075 22.4706ZM25.9 6.14556C26.2167 8.16223 26.0208 10.1247 25.3125 12.0331C24.6042 13.9414 23.3833 15.7622 21.65 17.4956L22.15 19.9706C22.2167 20.3039 22.2 20.6289 22.1 20.9456C22 21.2622 21.8333 21.5372 21.6 21.7706L17.4 25.9706L15.3 21.0456L11.025 16.7706L6.1 14.6706L10.275 10.4706C10.5083 10.2372 10.7875 10.0706 11.1125 9.97056C11.4375 9.87056 11.7667 9.8539 12.1 9.92056L14.575 10.4206C16.3083 8.68723 18.125 7.46223 20.025 6.74556C21.925 6.0289 23.8833 5.8289 25.9 6.14556ZM7.875 19.9456C8.45833 19.3622 9.17083 19.0664 10.0125 19.0581C10.8542 19.0497 11.5667 19.3372 12.15 19.9206C12.7333 20.5039 13.0208 21.2164 13.0125 22.0581C13.0042 22.8997 12.7083 23.6122 12.125 24.1956C11.7083 24.6122 11.0125 24.9706 10.0375 25.2706C9.0625 25.5706 7.71667 25.8372 6 26.0706C6.23333 24.3539 6.5 23.0081 6.8 22.0331C7.1 21.0581 7.45833 20.3622 7.875 19.9456ZM9.3 21.3456C9.13333 21.5122 8.96667 21.8164 8.8 22.2581C8.63333 22.6997 8.51667 23.1456 8.45 23.5956C8.9 23.5289 9.34583 23.4164 9.7875 23.2581C10.2292 23.0997 10.5333 22.9372 10.7 22.7706C10.9 22.5706 11.0083 22.3289 11.025 22.0456C11.0417 21.7622 10.95 21.5206 10.75 21.3206C10.55 21.1206 10.3083 21.0247 10.025 21.0331C9.74167 21.0414 9.5 21.1456 9.3 21.3456Z" fill="white"/>
+</svg>
diff --git a/frontend/src/App.css b/frontend/src/App.css
index a3c1768..7e5b2ba 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3,4 +3,108 @@
   width: 100%;
   margin: 0;
   padding: 0;
-}
\ No newline at end of file
+}
+
+/* ── Custom animations used via Tailwind arbitrary classes ── */
+
+@keyframes twinkle {
+  0%, 100% { opacity: 0.3; transform: scale(1); }
+  50%       { opacity: 1;   transform: scale(1.4); }
+}
+
+.animate-twinkle {
+  animation: twinkle var(--tw-duration, 3s) ease-in-out infinite;
+}
+
+/* Shimmer for teal-themed skeleton loaders (PaymentHistory) */
+@keyframes shimmer-teal {
+  0%   { background-position: -200% 0; }
+  100% { background-position:  200% 0; }
+}
+
+.animate-shimmer-teal {
+  background: linear-gradient(
+    90deg,
+    rgba(98, 255, 255, 0.05) 25%,
+    rgba(98, 255, 255, 0.15) 50%,
+    rgba(98, 255, 255, 0.05) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer-teal 1.5s infinite;
+}
+
+/* Shimmer for dark-themed skeleton loaders (RecentShipments) */
+@keyframes shimmer {
+  0%   { background-position:  200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.animate-shimmer {
+  background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
+  background-size: 250% 100%;
+  animation: shimmer 1.4s infinite;
+}
+
+/* Dashed connector lines for TrackingTimeline */
+.connector-dashed {
+  background-image: linear-gradient(to bottom, #9ca3af 50%, transparent 50%);
+  background-size: 2px 8px;
+  background-repeat: repeat-y;
+}
+
+/* Dashed connector lines for MilestoneTimeline */
+.connector-dashed-milestone {
+  background-image: linear-gradient(to bottom, #6B7280 50%, transparent 50%);
+  background-size: 3px 10px;
+  background-repeat: repeat-y;
+}
+
+/* Pulse glow animation for current milestone icon */
+@keyframes pulse-glow {
+  0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(0, 217, 255, 0)); }
+  50%       { opacity: 1; filter: drop-shadow(0 0 12px rgba(0, 217, 255, 0.8)); }
+}
+
+.animate-pulse-glow {
+  animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Pulse animation for current tracking timeline icon */
+@keyframes timeline-pulse {
+  0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0)); }
+  50%       { opacity: 1; filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.8)); }
+}
+
+.animate-timeline-pulse {
+  animation: timeline-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Slide down animation for expandable milestone details */
+@keyframes slide-down {
+  from { opacity: 0; transform: translateY(-10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.animate-slide-down {
+  animation: slide-down 0.3s ease;
+}
+
+/* Modal overlay fade-in */
+@keyframes modal-overlay {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.animate-modal-overlay {
+  animation: modal-overlay 0.2s ease forwards;
+}
+
+/* Modal content fade + slide-up */
+@keyframes modal-content {
+  from { opacity: 0; transform: translateY(12px) scale(0.97); }
+  to   { opacity: 1; transform: translateY(0)    scale(1); }
+}
+
+.animate-modal-content {
+  animation: modal-content 0.25s ease forwards;
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d1ec78a..c8b7a9c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,6 +5,7 @@ import Login from './pages/auth/Login/Login';
 import ForgotPassword from './pages/auth/ForgotPassword/ForgotPassword';
 import CompanyDashboard from './pages/dashboard/Company/CompanyDashboard';
 import Shipments from './pages/Shipments/Shipments';
+import ShipmentDetail from './pages/Shipment/ShipmentDetail';
 import BlockchainLedger from './pages/BlockchainLedger/BlockchainLedger';
 import Settlements from './pages/Settlements/Settlements';
 import Analytics from './pages/Analytics/Analytics';
@@ -16,24 +17,52 @@ import CreateShipment from './pages/dashboard/Company/CreateShipment/CreateShipm
 import DashboardLayout from './components/layout/DashboardLayout';
 import ProtectedRoute from './components/auth/ProtectedRoute/ProtectedRoute';
 import './App.css';
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import Home from "./pages/Home/Home";
+import Signup from "./pages/auth/Signup/Signup";
+import Login from "./pages/auth/Login/Login";
+import ForgotPassword from "./pages/auth/ForgotPassword/ForgotPassword";
+import CompanyDashboard from "./pages/dashboard/Company/CompanyDashboard";
+import Shipments from "./pages/Shipments/Shipments";
+import BlockchainLedger from "./pages/BlockchainLedger/BlockchainLedger";
+import Settlements from "./pages/Settlements/Settlements";
+import Analytics from "./pages/Analytics/Analytics";
+import UserManagement from "./pages/dashboard/Company/UserManagement/UserManagement";
+import CompanySettings from "./pages/dashboard/Company/Settings/CompanySettings";
+import HelpCenter from "./pages/HelpCenter/HelpCenter";
+import CreateShipment from "./pages/dashboard/Company/CreateShipment/CreateShipment";
+import PaymentHistory from "./pages/Payments/PaymentHistory/PaymentHistory";
+import NotificationsPage from "./pages/Notifications/NotificationsPage";
+import ShipmentDetail from "./pages/ShipmentDetail/ShipmentDetail";
+import CustomerProfile from "./pages/dashboard/Customer/Profile/CustomerProfile";
+import ShipmentHistory from "./pages/dashboard/Customer/ShipmentHistory/ShipmentHistory";
+import DashboardLayout from "./components/layout/DashboardLayout";
+import ProtectedRoute from "./components/auth/ProtectedRoute/ProtectedRoute";
+import "./App.css";
+import ErrorBoundary from "./components/ErrorBoundary/ErrorBoundary";
+import PaginationDemo from "./pages/ComponentDemos/PaginationDemo/PaginationDemo";
 
 const router = createBrowserRouter([
   {
-    path: '/',
+    path: "/",
     element: <Home />,
   },
   {
-    path: '/signup',
+    path: "/signup",
     element: <Signup />,
   },
   {
-    path: '/login',
+    path: "/login",
     element: <Login />,
   },
   {
-    path: '/forgot-password',
+    path: "/forgot-password",
     element: <ForgotPassword />,
   },
+  {
+    path: "/pagination-demo",
+    element: <PaginationDemo />,
+  },
   {
     element: <ProtectedRoute />,
     children: [
@@ -41,45 +70,66 @@ const router = createBrowserRouter([
         element: <DashboardLayout />,
         children: [
           {
-            path: '/dashboard',
+            path: "/dashboard",
             element: <CompanyDashboard />,
           },
           {
-            path: '/dashboard/shipments',
+            path: "/dashboard/shipments",
             element: <Shipments />,
           },
+          {
+            path: '/dashboard/shipments/:id',
+            element: <ShipmentDetail />,
+          },
           {
             path: '/dashboard/shipments/create',
+            path: "/dashboard/shipments/:id",
+            element: <ShipmentDetail />,
+          },
+          {
+            path: "/dashboard/shipments/history",
+            element: <ShipmentHistory />,
+          },
+          {
+            path: "/dashboard/shipments/create",
             element: <CreateShipment />,
           },
           {
-            path: '/dashboard/blockchain-ledger',
+            path: "/dashboard/blockchain-ledger",
             element: <BlockchainLedger />,
           },
           {
-            path: '/dashboard/settlements',
+            path: "/dashboard/settlements",
             element: <Settlements />,
           },
           {
-            path: '/dashboard/analytics',
-            element: <Analytics />,
+            path: "/dashboard/payments",
+            element: <PaymentHistory />,
           },
           {
-            path: '/dashboard/settings',
-            element: <CompanySettings />,
+            path: "/dashboard/analytics",
+            element: <Analytics />,
           },
           {
-            path: '/dashboard/settings',
-            element: <Settings />,
+            path: "/dashboard/settings",
+            element: <CompanySettings />,
           },
           {
-            path: '/dashboard/team',
+            path: "/dashboard/team",
             element: <UserManagement />,
           },
           {
-            path: '/dashboard/help-center',
+            path: "/dashboard/help-center",
             element: <HelpCenter />,
           },
+          {
+            path: "/dashboard/notifications",
+            element: <NotificationsPage />,
+          },
+          {
+            path: "/dashboard/profile",
+            element: <CustomerProfile />,
+          },
         ],
       },
     ],
@@ -87,7 +137,11 @@ const router = createBrowserRouter([
 ]);
 
 function App() {
-  return <RouterProvider router={router} />;
+  return (
+    <ErrorBoundary>
+      <RouterProvider router={router} />
+    </ErrorBoundary>
+  );
 }
 
 export default App;
diff --git a/frontend/src/LandingPage/LandingPage.tsx b/frontend/src/LandingPage/LandingPage.tsx
index b0ec267..4286d19 100644
--- a/frontend/src/LandingPage/LandingPage.tsx
+++ b/frontend/src/LandingPage/LandingPage.tsx
@@ -5,14 +5,14 @@ import WhyNavin from "@/LandingPage/sections/WhyNavin/WhyNavin";
 import Features from "@/pages/LandingPage/sections/Features/Features";
 
 const LandingPage: React.FC = () => {
-    return (
-        <main>
-            <Hero />
-            <WhyNavin />
-            <Features />
-            <HowItWorks />
-        </main>
-    );
+  return (
+    <main>
+      <Hero />
+      <WhyNavin />
+      <Features />
+      <HowItWorks />
+    </main>
+  );
 };
 
 export default LandingPage;
diff --git a/frontend/src/LandingPage/sections/Hero/Hero.css b/frontend/src/LandingPage/sections/Hero/Hero.css
deleted file mode 100644
index 97fbab5..0000000
--- a/frontend/src/LandingPage/sections/Hero/Hero.css
+++ /dev/null
@@ -1,208 +0,0 @@
-
-@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500&display=swap');
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-.hero {
-  position: relative;
-  width: 100%;
-  min-height: 100vh;
-  background: radial-gradient(ellipse at 50% 0%, #0a3d3a 0%, #061e20 35%, #020d10 70%, #000 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  font-family: 'DM Sans', sans-serif;
-}
-
-/* ── STARFIELD ── */
-.hero__stars {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 0;
-}
-
-.hero__star {
-  position: absolute;
-  width: 2px;
-  height: 2px;
-  border-radius: 50%;
-  background: rgba(180, 230, 255, 0.6);
-  animation: twinkle var(--d, 3s) ease-in-out infinite var(--delay, 0s);
-}
-
-/* Scatter stars pseudo-randomly using nth-child */
-.hero__star:nth-child(1)  { top:  5%; left: 10%; --d: 2.5s; --delay: 0.1s; }
-.hero__star:nth-child(2)  { top:  8%; left: 25%; --d: 3.2s; --delay: 0.5s; }
-.hero__star:nth-child(3)  { top:  3%; left: 40%; --d: 2.8s; --delay: 0.8s; }
-.hero__star:nth-child(4)  { top: 12%; left: 55%; --d: 3.5s; --delay: 0.2s; }
-.hero__star:nth-child(5)  { top:  6%; left: 70%; --d: 2.2s; --delay: 1.0s; }
-.hero__star:nth-child(6)  { top: 15%; left: 85%; --d: 3.0s; --delay: 0.4s; }
-.hero__star:nth-child(7)  { top: 20%; left:  5%; --d: 2.6s; --delay: 0.7s; }
-.hero__star:nth-child(8)  { top: 18%; left: 18%; --d: 3.1s; --delay: 0.3s; }
-.hero__star:nth-child(9)  { top: 22%; left: 32%; --d: 2.4s; --delay: 0.9s; }
-.hero__star:nth-child(10) { top: 16%; left: 48%; --d: 3.3s; --delay: 0.6s; }
-.hero__star:nth-child(11) { top: 25%; left: 62%; --d: 2.7s; --delay: 0.1s; }
-.hero__star:nth-child(12) { top: 19%; left: 78%; --d: 3.4s; --delay: 0.5s; }
-.hero__star:nth-child(13) { top: 30%; left:  2%; --d: 2.3s; --delay: 0.8s; }
-.hero__star:nth-child(14) { top: 35%; left: 14%; --d: 3.0s; --delay: 0.2s; }
-.hero__star:nth-child(15) { top: 28%; left: 90%; --d: 2.9s; --delay: 0.7s; }
-.hero__star:nth-child(16) { top: 40%; left: 95%; --d: 2.5s; --delay: 0.4s; }
-.hero__star:nth-child(17) { top: 45%; left:  8%; --d: 3.2s; --delay: 1.1s; }
-.hero__star:nth-child(18) { top: 50%; left: 20%; --d: 2.8s; --delay: 0.3s; }
-.hero__star:nth-child(19) { top: 55%; left: 75%; --d: 3.1s; --delay: 0.6s; }
-.hero__star:nth-child(20) { top: 60%; left: 88%; --d: 2.6s; --delay: 0.9s; }
-.hero__star:nth-child(21) { top:  2%; left: 92%; --d: 3.3s; --delay: 0.2s; }
-.hero__star:nth-child(22) { top: 10%; left:  3%; --d: 2.4s; --delay: 0.7s; }
-.hero__star:nth-child(23) { top: 70%; left: 12%; --d: 2.9s; --delay: 0.5s; }
-.hero__star:nth-child(24) { top: 75%; left: 30%; --d: 3.0s; --delay: 0.1s; }
-.hero__star:nth-child(25) { top: 80%; left: 50%; --d: 2.7s; --delay: 0.8s; }
-.hero__star:nth-child(n+26) { 
-  top: calc(var(--n, 1) * 7% + 5%); 
-  left: calc(var(--n, 1) * 11% + 3%); 
-  --d: 3s; 
-  --delay: 0.4s; 
-}
-
-@keyframes twinkle {
-  0%, 100% { opacity: 0.3; transform: scale(1); }
-  50%       { opacity: 1;   transform: scale(1.4); }
-}
-
-/* ── BUILDING SILHOUETTES (bottom decoration) ── */
-.hero__buildings {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 300px;
-  height: 160px;
-  pointer-events: none;
-  z-index: 0;
-  background:
-    /* thin vertical lines suggesting buildings */
-    repeating-linear-gradient(
-      to right,
-      transparent 0px,
-      transparent 18px,
-      rgba(0, 180, 160, 0.15) 18px,
-      rgba(0, 180, 160, 0.15) 20px
-    );
-  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
-  mask-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
-}
-
-/* ── MAIN CONTENT ── */
-.hero__container {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: 24px;
-  padding: 0 24px;
-  max-width: 900px;
-  width: 100%;
-}
-
-/* ── HEADLINE ── */
-.hero__headline {
-  font-family: 'Bebas Neue', sans-serif;
-  font-size: clamp(3rem, 9vw, 7rem);
-  font-weight: 400;
-  letter-spacing: 0.04em;
-  line-height: 1;
-  color: #ffffff;
-}
-
-.hero__headline-accent {
-  color: #00d4c8;
-}
-
-/* ── SUBHEADLINE ── */
-.hero__subheadline {
-  font-size: clamp(0.9rem, 2vw, 1.05rem);
-  font-weight: 300;
-  line-height: 1.7;
-  color: rgba(200, 230, 240, 0.75);
-  max-width: 580px;
-}
-
-/* ── CTA ROW ── */
-.hero__cta-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  margin-top: 8px;
-  width: 100%;
-  justify-content: center;
-}
-
-/* dashed lines */
-.hero__dash {
-  flex: 1;
-  max-width: 200px;
-  height: 1px;
-  border-top: 1.5px dashed rgba(0, 180, 160, 0.5);
-}
-
-/* ── CTA BUTTON ── */
-.hero__cta {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  padding: 14px 32px;
-  background: rgba(8, 40, 50, 0.75);
-  color: #ffffff;
-  font-family: 'DM Sans', sans-serif;
-  font-size: 1rem;
-  font-weight: 500;
-  text-decoration: none;
-  border: 1.5px solid rgba(0, 180, 160, 0.6);
-  border-radius: 50px;
-  cursor: pointer;
-  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
-  white-space: nowrap;
-  backdrop-filter: blur(8px);
-}
-
-.hero__cta:hover {
-  background: rgba(0, 120, 110, 0.35);
-  border-color: #00d4c8;
-  box-shadow: 0 0 24px rgba(0, 212, 200, 0.3), inset 0 0 12px rgba(0, 212, 200, 0.08);
-  transform: translateY(-2px);
-}
-
-.hero__cta:focus-visible {
-  outline: 2px solid #00d4c8;
-  outline-offset: 4px;
-}
-
-.hero__cta-icon {
-  flex-shrink: 0;
-  color: #00d4c8;
-}
-
-/* ── RESPONSIVE ── */
-@media (max-width: 600px) {
-  .hero__subheadline br {
-    display: none;
-  }
-
-  .hero__dash {
-    max-width: 60px;
-  }
-
-  .hero__cta {
-    padding: 12px 24px;
-    font-size: 0.9rem;
-  }
-}
diff --git a/frontend/src/LandingPage/sections/Hero/Hero.tsx b/frontend/src/LandingPage/sections/Hero/Hero.tsx
index faa1578..ac99969 100644
--- a/frontend/src/LandingPage/sections/Hero/Hero.tsx
+++ b/frontend/src/LandingPage/sections/Hero/Hero.tsx
@@ -1,37 +1,75 @@
 import React from 'react';
-import './Hero.css';
 
 const Hero: React.FC = () => {
   return (
-    <section className="hero">
+    <section
+      className="relative w-full min-h-screen flex items-center justify-center overflow-hidden"
+      style={{
+        background: 'radial-gradient(ellipse at 50% 0%, #0a3d3a 0%, #061e20 35%, #020d10 70%, #000 100%)',
+        fontFamily: "'DM Sans', sans-serif",
+      }}
+    >
       {/* Starfield dots */}
-      <div className="hero__stars" aria-hidden="true">
+      <div className="absolute inset-0 pointer-events-none z-0" aria-hidden="true">
         {Array.from({ length: 80 }).map((_, i) => (
-          <span key={i} className="hero__star" />
+          <span
+            key={i}
+            className="absolute w-0.5 h-0.5 rounded-full bg-[rgba(180,230,255,0.6)] animate-twinkle"
+            style={{
+              top: `${5 + (i * 7) % 75}%`,
+              left: `${3 + (i * 11) % 94}%`,
+              animationDuration: `${2.2 + (i % 5) * 0.3}s`,
+              animationDelay: `${(i % 11) * 0.1}s`,
+            }}
+          />
         ))}
       </div>
 
-      {/* Bottom city/building lines decoration */}
-      <div className="hero__buildings" aria-hidden="true" />
+      {/* Bottom building silhouette decoration */}
+      <div
+        className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[300px] h-[160px] pointer-events-none z-0"
+        aria-hidden="true"
+        style={{
+          background: 'repeating-linear-gradient(to right, transparent 0px, transparent 18px, rgba(0,180,160,0.15) 18px, rgba(0,180,160,0.15) 20px)',
+          WebkitMaskImage: 'linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%)',
+          maskImage: 'linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%)',
+        }}
+      />
 
-      <div className="hero__container">
-        <h1 className="hero__headline">
-          TRANSPARENT <span className="hero__headline-accent">TRACKING</span>
+      <div className="relative z-10 flex flex-col items-center text-center gap-6 px-6 max-w-[900px] w-full">
+        <h1
+          className="font-normal tracking-[0.04em] leading-none text-white"
+          style={{
+            fontFamily: "'Bebas Neue', sans-serif",
+            fontSize: 'clamp(3rem, 9vw, 7rem)',
+          }}
+        >
+          TRANSPARENT <span className="text-[#00d4c8]">TRACKING</span>
         </h1>
 
-        <p className="hero__subheadline">
+        <p
+          className="font-light leading-[1.7] text-[rgba(200,230,240,0.75)] max-w-[580px]"
+          style={{ fontSize: 'clamp(0.9rem, 2vw, 1.05rem)' }}
+        >
           Our platform uses next gen tech to make your deliveries faster and more reliable.
-          <br />
+          <br className="hidden sm:hidden" />
           Every step is visible, every shipment secure.
         </p>
 
-        <div className="hero__cta-wrapper">
-          {}
-          <span className="hero__dash hero__dash--left" aria-hidden="true" />
-          <a href="#track" className="hero__cta">
+        <div className="flex items-center gap-0 mt-2 w-full justify-center">
+          {/* Dashed line left */}
+          <span
+            className="flex-1 max-w-[200px] sm:max-w-[60px] h-px border-t-[1.5px] border-dashed border-[rgba(0,180,160,0.5)]"
+            aria-hidden="true"
+          />
+
+          <a
+            href="#track"
+            className="inline-flex items-center gap-2.5 px-8 py-3.5 sm:px-6 sm:py-3 bg-[rgba(8,40,50,0.75)] text-white text-base sm:text-[0.9rem] font-medium no-underline border-[1.5px] border-[rgba(0,180,160,0.6)] rounded-full cursor-pointer backdrop-blur-[8px] whitespace-nowrap transition-all duration-[250ms] hover:bg-[rgba(0,120,110,0.35)] hover:border-[#00d4c8] hover:shadow-[0_0_24px_rgba(0,212,200,0.3),inset_0_0_12px_rgba(0,212,200,0.08)] hover:-translate-y-0.5 focus-visible:outline-2 focus-visible:outline-[#00d4c8] focus-visible:outline-offset-4"
+          >
             Track Your Shipment
             <svg
-              className="hero__cta-icon"
+              className="shrink-0 text-[#00d4c8]"
               width="22"
               height="16"
               viewBox="0 0 22 16"
@@ -39,14 +77,18 @@ const Hero: React.FC = () => {
               aria-hidden="true"
               xmlns="http://www.w3.org/2000/svg"
             >
-              {/* truck icon */}
               <rect x="0" y="4" width="13" height="9" rx="1" stroke="currentColor" strokeWidth="1.4" />
               <path d="M13 6h4l3 4v3h-7V6Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" />
               <circle cx="4" cy="13.5" r="1.5" stroke="currentColor" strokeWidth="1.2" />
               <circle cx="17" cy="13.5" r="1.5" stroke="currentColor" strokeWidth="1.2" />
             </svg>
           </a>
-          <span className="hero__dash hero__dash--right" aria-hidden="true" />
+
+          {/* Dashed line right */}
+          <span
+            className="flex-1 max-w-[200px] sm:max-w-[60px] h-px border-t-[1.5px] border-dashed border-[rgba(0,180,160,0.5)]"
+            aria-hidden="true"
+          />
         </div>
       </div>
     </section>
diff --git a/frontend/src/LandingPage/sections/HowItWorks/HowItWorks.css b/frontend/src/LandingPage/sections/HowItWorks/HowItWorks.css
deleted file mode 100644
index 2936626..0000000
--- a/frontend/src/LandingPage/sections/HowItWorks/HowItWorks.css
+++ /dev/null
@@ -1,73 +0,0 @@
-@font-face {
-    font-family: "Bricolage Grotesque";
-    src: url("../../../assets/Bricolage_Grotesque/BricolageGrotesque-VariableFont_opsz\,wdth\,wght.ttf")
-        format("truetype");
-    font-weight: 100 900;
-    font-style: normal;
-}
-
-.navin__cyan {
-    color: #62ffff;
-}
-
-.how__section {
-    padding-block: 5rem;
-}
-
-.how__section__header {
-    font-family: "Bricolage Grotesque", sans-serif;
-    margin-bottom: 3rem;
-    font-weight: 400;
-    font-size: 1.5rem;
-}
-
-.how__item__container {
-    display: flex;
-    flex-direction: column;
-    gap: 2.125rem;
-}
-
-.how__section__item {
-    padding-inline: 1rem;
-}
-
-.how__article__header {
-    font-family: "Bricolage Grotesque", sans-serif;
-
-    font-size: 1.125rem;
-    margin-block-end: 0.75rem;
-}
-
-.how__article__description {
-    font-size: 1rem;
-}
-
-@media (min-width: 768px) {
-    .how__section__header {
-        font-size: 2.25rem;
-    }
-
-    .how__item__container {
-        flex-direction: row;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        text-align: left;
-        justify-content: center;
-    }
-
-    .how__section__item {
-        padding-inline: 1rem;
-        max-width: 21.5rem;
-    }
-}
-
-@media (min-width: 1024px) {
-    .how__section__header {
-        font-size: 3.25rem;
-    }
-
-    .how__section__item {
-        padding-inline: 1rem;
-        max-width: 26.125rem;
-    }
-}
diff --git a/frontend/src/LandingPage/sections/HowItWorks/HowItWorks.tsx b/frontend/src/LandingPage/sections/HowItWorks/HowItWorks.tsx
index e5e8a00..8443a88 100644
--- a/frontend/src/LandingPage/sections/HowItWorks/HowItWorks.tsx
+++ b/frontend/src/LandingPage/sections/HowItWorks/HowItWorks.tsx
@@ -1,39 +1,36 @@
-import "./HowItWorks.css";
-
 function HowItWorks() {
     return (
-        <section className="how__section">
-            <h3 className="how__section__header">
-                {" "}
-                <span className="navin__cyan">How Navin</span> Works
+        <section className="py-20">
+            <h3 className="font-display font-normal text-[1.5rem] md:text-[2.25rem] lg:text-[3.25rem] mb-12">
+                <span className="text-[#62ffff]">How Navin</span> Works
             </h3>
-            <div className="how__item__container">
-                <article className="how__section__item">
-                    <h3 className="how__article__header navin__cyan">
+            <div className="flex flex-col gap-[2.125rem] md:flex-row md:flex-wrap md:justify-center">
+                <article className="px-4 md:max-w-[21.5rem] lg:max-w-[26.125rem]">
+                    <h3 className="font-display text-[1.125rem] mb-3 text-[#62ffff]">
                         Smart Pickup
                     </h3>
-                    <p className="how__article__description">
+                    <p className="text-base">
                         We pick up your package from your chosen location or
                         partner hub and log it into our system for full
                         transparency from the start
                     </p>
                 </article>
-                <article className="how__section__item">
-                    <h3 className="how__article__header navin__cyan">
+                <article className="px-4 md:max-w-[21.5rem] lg:max-w-[26.125rem]">
+                    <h3 className="font-display text-[1.125rem] mb-3 text-[#62ffff]">
                         Live Tracking
                     </h3>
-                    <p>
+                    <p className="text-base">
                         Track your shipment in real time with instant updates at
                         every milestone—from dispatch to delivery. No more
                         wondering where your package
                     </p>
                 </article>
-                <article className="how__section__item">
-                    <h3 className="how__article__header navin__cyan">
+                <article className="px-4 md:max-w-[21.5rem] lg:max-w-[26.125rem]">
+                    <h3 className="font-display text-[1.125rem] mb-3 text-[#62ffff]">
                         Secure Delivery
                     </h3>
-                    <p>
-                        Once your package arrives, you’ll receive a secure
+                    <p className="text-base">
+                        Once your package arrives, you'll receive a secure
                         delivery confirmation—complete with proof of hand-off.
                         Peace of mind, guaranteed
                     </p>
diff --git a/frontend/src/LandingPage/sections/WhyNavin/WhyNavin.css b/frontend/src/LandingPage/sections/WhyNavin/WhyNavin.css
deleted file mode 100644
index bc44783..0000000
--- a/frontend/src/LandingPage/sections/WhyNavin/WhyNavin.css
+++ /dev/null
@@ -1,86 +0,0 @@
-@font-face {
-    font-family: "Bricolage Grotesque";
-    src: url("../../../assets/Bricolage_Grotesque/BricolageGrotesque-VariableFont_opsz\,wdth\,wght.ttf")
-        format("truetype");
-    font-weight: 100 900;
-    font-style: normal;
-}
-
-.navin__cyan {
-    color: #62ffff;
-}
-
-.why__section {
-    padding-block: 5rem;
-}
-
-.why__section__header {
-    font-size: 1.5rem;
-    margin-bottom: 3rem;
-    font-weight: 400;
-    font-family: "Bricolage Grotesque", sans-serif;
-}
-
-.why__item__container {
-    display: grid;
-    gap: 1.125rem;
-}
-
-.why__section__item {
-    width: 18.625rem;
-    height: 17.4rem;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    flex-direction: column;
-    padding-inline: 1rem;
-    border-radius: 1.25rem;
-    gap: 1.5rem;
-    box-shadow: inset 0 0 20px 0px #008080;
-    background: rgba(19, 186, 186, 0.1);
-    text-align: left;
-}
-
-.why__icon__container {
-    box-shadow: inset 0 0 12px 0px #008080;
-    border: 1.5px solid rgba(6, 255, 255, 0.4);
-    border-radius: 1rem;
-    background-color: #101010;
-    width: 6.5625rem;
-    padding-inline: 1.5rem;
-    padding-block: 1.875rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.why__item__header {
-    font-family: "Bricolage Grotesque", sans-serif;
-    font-weight: 600;
-    color: #f8ffff;
-    margin-bottom: 0.75rem;
-}
-
-.why__item__description {
-    color: #e5ffff;
-}
-
-@media (min-width: 768px) {
-    .why__section__header {
-        font-size: 2.25rem;
-    }
-
-    .why__item__container {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-
-@media (min-width: 1024px) {
-    .why__section__header {
-        font-size: 3.25rem;
-    }
-
-    .why__item__container {
-        grid-template-columns: repeat(4, 1fr);
-    }
-}
diff --git a/frontend/src/LandingPage/sections/WhyNavin/WhyNavin.tsx b/frontend/src/LandingPage/sections/WhyNavin/WhyNavin.tsx
index bbf8931..8677884 100644
--- a/frontend/src/LandingPage/sections/WhyNavin/WhyNavin.tsx
+++ b/frontend/src/LandingPage/sections/WhyNavin/WhyNavin.tsx
@@ -1,11 +1,10 @@
-import "./WhyNavin.css";
-
 type WhyNavinItem = {
     icon: string;
     iconAlt: string;
     header: string;
     description: string;
 };
+
 function WhyNavin() {
     const whyNavin: WhyNavinItem[] = [
         {
@@ -30,27 +29,34 @@ function WhyNavin() {
             icon: "public/images/icons/Fast.svg",
             iconAlt: "Rocket icon",
             header: "Faster Service",
-            description:
-                "Automated processes mean quicker, smoother deliveries.",
+            description: "Automated processes mean quicker, smoother deliveries.",
         },
     ];
 
     return (
-        <section className="why__section">
-            <h2 className="why__section__header">
-                Why <span className="navin__cyan"> Navin?</span>
+        <section className="py-20">
+            <h2 className="font-display font-normal text-[1.5rem] md:text-[2.25rem] lg:text-[3.25rem] mb-12">
+                Why <span className="text-[#62ffff]"> Navin?</span>
             </h2>
-            <div className="why__item__container">
+            <div className="grid gap-[1.125rem] md:grid-cols-2 lg:grid-cols-4">
                 {whyNavin.map((item) => (
-                    <article className="why__section__item">
-                        <div className="why__icon__container">
+                    <article
+                        key={item.header}
+                        className="w-full h-[17.4rem] flex flex-col justify-center items-start px-4 rounded-[1.25rem] gap-6 text-left"
+                        style={{
+                            boxShadow: 'inset 0 0 20px 0px #008080',
+                            background: 'rgba(19, 186, 186, 0.1)',
+                        }}
+                    >
+                        <div
+                            className="bg-[#101010] rounded-2xl px-6 py-[1.875rem] flex items-center justify-center border border-[rgba(6,255,255,0.4)]"
+                            style={{ boxShadow: 'inset 0 0 12px 0px #008080', width: '6.5625rem' }}
+                        >
                             <img src={item.icon} alt={item.iconAlt} />
                         </div>
                         <article>
-                            <h3 className="why__item__header">{item.header}</h3>
-                            <p className="why__item__description">
-                                {item.description}
-                            </p>
+                            <h3 className="font-display font-semibold text-[#f8ffff] mb-3">{item.header}</h3>
+                            <p className="text-[#e5ffff]">{item.description}</p>
                         </article>
                     </article>
                 ))}
diff --git a/frontend/src/components/Button/Button.tsx b/frontend/src/components/Button/Button.tsx
new file mode 100644
index 0000000..acd0aad
--- /dev/null
+++ b/frontend/src/components/Button/Button.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'glow';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  children: React.ReactNode;
+  fullWidth?: boolean;
+}
+
+const Button: React.FC<ButtonProps> = ({
+  variant = 'primary',
+  size = 'md',
+  children,
+  fullWidth = false,
+  className = '',
+  ...props
+}) => {
+  const baseStyles = 'inline-flex items-center justify-center font-display font-bold rounded-full transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background';
+
+  const variantStyles = {
+    primary: 'bg-accent-blue text-white hover:bg-blue-600 hover:-translate-y-0.5',
+    secondary: 'bg-background-elevated text-white hover:bg-background-card hover:-translate-y-0.5',
+    outline: 'bg-transparent border border-border text-white hover:border-accent-blue hover:text-accent-blue',
+    ghost: 'bg-transparent text-white hover:-translate-y-0.5',
+    glow: 'bg-[rgba(1,56,59)] backdrop-blur-xs text-[#E5FFFF] border border-[#60C9CD] shadow-glow-blue shadow-inset-teal hover:shadow-glow-blue-hover hover:shadow-inset-teal-hover hover:-translate-y-0.5',
+  };
+
+  const sizeStyles = {
+    sm: 'px-4 py-2 text-sm gap-2',
+    md: 'px-6 py-3 text-base gap-2',
+    lg: 'px-8 py-3.5 text-lg gap-2',
+  };
+
+  const widthStyles = fullWidth ? 'w-full' : '';
+
+  return (
+    <button
+      className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${widthStyles} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/frontend/src/components/Button/index.ts b/frontend/src/components/Button/index.ts
new file mode 100644
index 0000000..8782925
--- /dev/null
+++ b/frontend/src/components/Button/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
diff --git a/frontend/src/components/Card/Card.tsx b/frontend/src/components/Card/Card.tsx
new file mode 100644
index 0000000..aa04224
--- /dev/null
+++ b/frontend/src/components/Card/Card.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+export interface CardProps {
+  children: React.ReactNode;
+  className?: string;
+  hover?: boolean;
+  glow?: boolean;
+}
+
+const Card: React.FC<CardProps> = ({ 
+  children, 
+  className = '', 
+  hover = false,
+  glow = false 
+}) => {
+  const baseStyles = 'bg-background-card border border-border rounded-2xl overflow-hidden';
+  const hoverStyles = hover ? 'transition-all duration-300 hover:border-accent-blue hover:shadow-lg' : '';
+  const glowStyles = glow ? 'relative after:absolute after:top-0 after:right-0 after:w-24 after:h-24 after:bg-[radial-gradient(circle_at_top_right,rgba(59,130,246,0.1),transparent_70%)] after:pointer-events-none' : '';
+
+  return (
+    <div className={`${baseStyles} ${hoverStyles} ${glowStyles} ${className}`}>
+      {children}
+    </div>
+  );
+};
+
+export const CardHeader: React.FC<{ children: React.ReactNode; className?: string }> = ({ 
+  children, 
+  className = '' 
+}) => (
+  <div className={`p-5 border-b border-border ${className}`}>
+    {children}
+  </div>
+);
+
+export const CardBody: React.FC<{ children: React.ReactNode; className?: string }> = ({ 
+  children, 
+  className = '' 
+}) => (
+  <div className={`p-6 ${className}`}>
+    {children}
+  </div>
+);
+
+export const CardFooter: React.FC<{ children: React.ReactNode; className?: string }> = ({ 
+  children, 
+  className = '' 
+}) => (
+  <div className={`p-5 border-t border-border ${className}`}>
+    {children}
+  </div>
+);
+
+export default Card;
diff --git a/frontend/src/components/Card/index.ts b/frontend/src/components/Card/index.ts
new file mode 100644
index 0000000..5835e68
--- /dev/null
+++ b/frontend/src/components/Card/index.ts
@@ -0,0 +1,2 @@
+export { default, CardHeader, CardBody, CardFooter } from './Card';
+export type { CardProps } from './Card';
diff --git a/frontend/src/components/ErrorBoundary/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary/ErrorBoundary.tsx
new file mode 100644
index 0000000..f5ed37c
--- /dev/null
+++ b/frontend/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+
+interface State {
+  hasError: boolean;
+  error?: Error | null;
+}
+
+class ErrorBoundary extends React.Component<
+  { children?: React.ReactNode },
+  State
+> {
+  constructor(props: { children?: React.ReactNode }) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  // componentDidCatch intentionally omitted — getDerivedStateFromError is used to surface the error
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen flex items-center justify-center p-6 bg-background text-text-primary">
+          <div className="max-w-2xl text-left">
+            <h1 className="text-2xl font-bold mb-2">Something went wrong</h1>
+            <p className="mb-4 text-sm text-text-secondary">
+              An unexpected error occurred while rendering the application. The
+              error is shown below — please paste it into the issue or share it
+              with the team.
+            </p>
+            <pre className="bg-[rgba(0,0,0,0.6)] p-3 rounded text-xs overflow-auto max-h-60 whitespace-pre-wrap">
+              {String(this.state.error)}
+            </pre>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children ?? null;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/frontend/src/components/Navbar/Navbar.css b/frontend/src/components/Navbar/Navbar.css
deleted file mode 100644
index ec5d398..0000000
--- a/frontend/src/components/Navbar/Navbar.css
+++ /dev/null
@@ -1,420 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap");
-@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');
-.navbar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  background: none;
-  box-shadow: none;
-  z-index: 1000;
-  margin: 0;
-  padding: 0;
-}
-
-.navbar-container {
-  max-width: 1480px;
-  margin: 0 auto;
-  padding: 0.75rem 2rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  gap: 3rem;
-}
-
-.navbar-logo {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  text-decoration: none;
-  font-family: "Albert Sans", sans-serif;
-  font-weight: 400;
-  font-size: 30px;
-  color: #ffffff;
-  transition: opacity 0.3s ease;
-  position: absolute;
-  left: 2rem;
-}
-
-.navbar-logo:hover {
-  opacity: 0.8;
-}
-
-.logo-image {
-  width: 56.44px;
-  height: 55.19px;
-  object-fit: contain;
-}
-
-.logo-text {
-  background: #ffffff;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.navbar-menu.desktop {
-  display: flex;
-  align-items: center;
-  gap: 3rem;
-}
-
-.nav-links {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 14px 24px;
-  gap: 48px;
-  margin: 0 auto;
-  width: 479px;
-  height: 55.19px;
-  background: linear-gradient(
-    0deg,
-    rgba(0, 128, 128, 0.22) 62.5%,
-    rgba(1, 1, 1, 0.22) 100%
-  );
-  border-top: 1px solid rgba(0, 128, 128, 0.3);
-  border-radius: 30px;
-}
-
-.nav-link {
-  color: #ffffff;
-  text-decoration: none;
-  font-size: 16px;
-  font-weight: 400;
-  position: relative;
-  transition: color 0.3s ease;
-  cursor: pointer;
-}
-
-.nav-link:hover,
-.nav-link.active {
-  color: #00d9ff;
-}
-
-.nav-link::after {
-  content: "";
-  position: absolute;
-  bottom: -5px;
-  left: 0;
-  width: 0;
-  height: 2px;
-  background: linear-gradient(135deg, #00d9ff 0%, #0099cc 100%);
-  transition: width 0.3s ease;
-}
-
-.nav-link:hover::after,
-.nav-link.active::after {
-  width: 100%;
-}
-
-/* CTA Buttons */
-.nav-ctas {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  position: absolute;
-  right: 2rem;
-}
-
-.btn-try,
-.btn-signup {
-  padding: 0.65rem 1.2rem;
-  border-radius: 50px;
-  text-decoration: none;
-  font-weight: 500;
-  font-size: 18px;
-  transition: all 0.3s ease;
-  border: none;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.btn-try {
-  color: #ffffff;
-  font-family: 'Bricolage Grotesque', sans-serif;
-  background: transparent;
-}
-
-.btn-try:hover {
-  transform: translateY(-2px);
-}
-
-.btn-signup {
-    font-family: "Bricolage Grotesque", sans-serif;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 14px 32px;
-  gap: 8px;
-
-  background: rgba(1, 56, 59);
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-  color: #e5ffff;
-  font-weight: 700;
-  font-size: 18px;
-  line-height: 21px;
-  letter-spacing: -0.32px;
-  text-decoration: none;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  border-radius: 50px;
-  border: 1px #60c9cd solid;
-  box-shadow:
-    -3px -2px 12px rgba(0, 194, 203, 0.18),
-    -1px -2px 12px rgba(0, 194, 203, 0.29),
-    inset 2px -2px 4px rgb(2, 43, 45),
-    inset -2px 2px 4px rgba(13, 133, 137),
-    inset -2px -2px 5px rgb(2, 43, 45);
-}
-
-.btn-signup:hover {
-  transform: translateY(-2px);
-  box-shadow:
-    -1px -2px 16px rgba(0, 194, 203, 0.4),
-    -3px -2px 16px rgba(0, 194, 203, 0.25),
-    inset 2px -2px 4px rgba(15, 139, 144, 0.25),
-    inset -2px 2px 4px rgba(15, 139, 144, 0.25),
-    inset -2px -2px 5px rgba(15, 139, 144, 0.9);
-}
-
-.demo-btn-svg {
-  height: 70px;
-  width: auto;
-  display: block;
-  transition: all 0.3s ease;
-}
-
-/* Hamburger Menu (Mobile) */
-.hamburger-menu {
-  display: none;
-  background: none;
-  border: none;
-  color: #00d9ff;
-  cursor: pointer;
-  font-size: 1.5rem;
-  padding: 0.5rem;
-  transition: transform 0.3s ease;
-}
-
-.hamburger-menu:hover {
-  transform: scale(1.1);
-}
-
-/* Mobile Menu */
-.mobile-menu {
-  display: none;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: linear-gradient(135deg, #0a1628 0%, #0f1f3d 100%);
-  border-bottom: 1px solid rgba(0, 217, 255, 0.1);
-  padding: 1rem 2rem;
-  animation: slideDown 0.3s ease;
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.mobile-nav-links {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-  border-bottom: 1px solid rgba(0, 217, 255, 0.1);
-  padding-bottom: 1.5rem;
-}
-
-.mobile-nav-link {
-  color: #e0e0e0;
-  text-decoration: none;
-  font-size: 1rem;
-  font-weight: 500;
-  transition: color 0.3s ease;
-  cursor: pointer;
-}
-
-.mobile-nav-link:hover,
-.mobile-nav-link.active {
-  color: #00d9ff;
-}
-
-.mobile-nav-ctas {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.btn-try.mobile,
-.btn-signup.mobile {
-  width: 100%;
-  text-align: center;
-}
-
-/* Responsive Design */
-@media (max-width: 1024px) {
-  .navbar-container {
-    padding: 1rem 1.5rem;
-    gap: 2rem;
-  }
-
-  .nav-links {
-    width: auto;
-    gap: 32px;
-  }
-
-  .nav-link {
-    font-size: 14px;
-  }
-
-  .btn-try,
-  .btn-signup {
-    padding: 0.6rem 1rem;
-    font-size: 16px;
-  }
-}
-
-@media (max-width: 768px) {
-  .navbar-container {
-    padding: 1rem 1.5rem;
-    justify-content: flex-start;
-  }
-
-  .navbar-logo {
-    position: static;
-    left: auto;
-  }
-
-  .navbar-menu.desktop {
-    display: none;
-  }
-
-  .hamburger-menu.mobile {
-    display: block;
-    position: absolute;
-    right: 1.5rem;
-  }
-
-  .nav-ctas {
-    position: static;
-    right: auto;
-  }
-
-  .mobile-menu {
-    display: none;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    width: 100%;
-    background: rgba(10, 22, 40, 0.98);
-    backdrop-filter: blur(10px);
-    border-bottom: 1px solid rgba(0, 217, 255, 0.1);
-    padding: 1rem 1.5rem;
-    animation: slideDown 0.3s ease;
-  }
-
-  .mobile-menu.open {
-    display: block;
-  }
-
-  .logo-text {
-    font-size: 1.2rem;
-  }
-
-  .logo-image {
-    width: 32px;
-    height: 32px;
-  }
-}
-
-@media (max-width: 640px) {
-  .navbar-container {
-    padding: 0.75rem 1rem;
-    gap: 0.5rem;
-  }
-
-  .navbar-logo {
-    gap: 0.25rem;
-    position: static;
-    left: auto;
-  }
-
-  .logo-text {
-    font-size: 1rem;
-    font-weight: 500;
-  }
-
-  .logo-image {
-    width: 28px;
-    height: 28px;
-  }
-
-  .hamburger-menu.mobile {
-    right: 1rem;
-    padding: 0.25rem;
-  }
-
-  .mobile-menu {
-    padding: 1rem 1rem;
-    margin-top: 0.5rem;
-  }
-
-  .mobile-nav-links {
-    gap: 0.75rem;
-  }
-
-  .mobile-nav-link {
-    font-size: 0.95rem;
-    padding: 0.5rem 0;
-  }
-
-  .mobile-nav-ctas {
-    gap: 0.5rem;
-  }
-
-  .btn-try.mobile,
-  .btn-signup.mobile {
-    padding: 0.65rem 1.2rem;
-    font-size: 16px;
-    width: 100%;
-  }
-}
-
-/* Accessibility */
-.hamburger-menu:focus {
-  outline: 2px solid #00d9ff;
-  outline-offset: 2px;
-}
-
-.nav-link:focus,
-.mobile-nav-link:focus {
-  outline: 2px solid #00d9ff;
-  outline-offset: 2px;
-}
-
-.btn-login:focus,
-.btn-signup:focus {
-  outline: 2px solid #00d9ff;
-  outline-offset: 2px;
-}
-
-/* Smooth scroll behavior */
-html {
-  scroll-behavior: smooth;
-}
diff --git a/frontend/src/components/Navbar/Navbar.tsx b/frontend/src/components/Navbar/Navbar.tsx
index c487507..025486a 100644
--- a/frontend/src/components/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navbar/Navbar.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { Menu, X } from "lucide-react";
-import "./Navbar.css";
 
 const Navbar: React.FC = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -35,20 +34,29 @@ const Navbar: React.FC = () => {
   ];
 
   return (
-    <nav className="navbar">
-      <div className="navbar-container">
-        <Link to="/" className="navbar-logo" onClick={handleLogoClick}>
-          <img src="/images/logo.svg" alt="Navin Logo" className="logo-image" />
-          <span className="logo-text">Navin</span>
+    <nav className="absolute top-0 left-0 w-full bg-transparent z-[1000] m-0 p-0">
+      <div className="max-w-[1480px] mx-auto px-8 py-3 flex justify-center items-center relative gap-12">
+        {/* Logo */}
+        <Link 
+          to="/" 
+          className="flex items-center gap-2 no-underline font-albert font-normal text-[30px] text-white transition-opacity duration-300 hover:opacity-80 absolute left-8"
+          onClick={handleLogoClick}
+        >
+          <img src="/images/logo.svg" alt="Navin Logo" className="w-[56.44px] h-[55.19px] object-contain" />
+          <span className="bg-white bg-clip-text text-transparent">Navin</span>
         </Link>
 
-        <div className="navbar-menu desktop">
-          <div className="nav-links">
+        {/* Desktop Menu */}
+        <div className="hidden md:flex items-center gap-12">
+          {/* Nav Links */}
+          <div className="flex flex-row justify-center items-center px-6 py-3.5 gap-12 w-[479px] h-[55.19px] bg-gradient-card border-t border-[rgba(0,128,128,0.3)] rounded-[30px]">
             {navLinks.map((link) => (
               <a
                 key={link.id}
                 href={link.href}
-                className={`nav-link ${activeSection === link.id ? "active" : ""}`}
+                className={`text-white no-underline text-base font-normal relative transition-colors duration-300 cursor-pointer hover:text-primary after:content-[''] after:absolute after:-bottom-1.5 after:left-0 after:w-0 after:h-0.5 after:bg-gradient-primary after:transition-all after:duration-300 hover:after:w-full ${
+                  activeSection === link.id ? "text-primary after:w-full" : ""
+                }`}
                 onClick={(e) => {
                   e.preventDefault();
                   handleNavClick(link.id);
@@ -59,32 +67,43 @@ const Navbar: React.FC = () => {
             ))}
           </div>
 
-          <div className="nav-ctas">
-            <Link to="/" className="btn-try">
+          {/* CTA Buttons */}
+          <div className="flex gap-4 items-center absolute right-8">
+            <Link 
+              to="/" 
+              className="px-5 py-2.5 rounded-full no-underline font-medium text-lg transition-all duration-300 text-white font-display bg-transparent hover:-translate-y-0.5"
+            >
               Try now
             </Link>
-            <Link to="/signup" className="btn-signup">
+            <Link 
+              to="/signup" 
+              className="font-display flex flex-row justify-center items-center px-8 py-3.5 gap-2 bg-[rgba(1,56,59)] backdrop-blur-xs text-[#E5FFFF] font-bold text-lg leading-[21px] tracking-[-0.32px] no-underline cursor-pointer transition-all duration-300 rounded-full border border-[#60C9CD] shadow-glow-blue shadow-inset-teal hover:-translate-y-0.5 hover:shadow-glow-blue-hover hover:shadow-inset-teal-hover"
+            >
               Free Demo
             </Link>
           </div>
         </div>
 
+        {/* Hamburger Menu (Mobile) */}
         <button
-          className="hamburger-menu mobile"
+          className="hidden max-md:block bg-transparent border-none text-primary cursor-pointer text-2xl p-2 transition-transform duration-300 hover:scale-110 absolute right-6 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
           onClick={() => setIsMenuOpen(!isMenuOpen)}
           aria-label="Toggle menu"
         >
           {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
         </button>
 
+        {/* Mobile Menu */}
         {isMenuOpen && (
-          <div className="mobile-menu open">
-            <div className="mobile-nav-links">
+          <div className="md:hidden absolute top-full left-0 right-0 w-full bg-[rgba(10,22,40,0.98)] backdrop-blur-[10px] border-b border-border-light px-6 py-4 animate-[slideDown_0.3s_ease]">
+            <div className="flex flex-col gap-4 mb-6 border-b border-border-light pb-6">
               {navLinks.map((link) => (
                 <a
                   key={link.id}
                   href={link.href}
-                  className={`mobile-nav-link ${activeSection === link.id ? "active" : ""}`}
+                  className={`text-[#E0E0E0] no-underline text-base font-medium transition-colors duration-300 cursor-pointer hover:text-primary ${
+                    activeSection === link.id ? "text-primary" : ""
+                  }`}
                   onClick={(e) => {
                     e.preventDefault();
                     handleNavClick(link.id);
@@ -94,11 +113,17 @@ const Navbar: React.FC = () => {
                 </a>
               ))}
             </div>
-            <div className="mobile-nav-ctas">
-              <Link to="/login" className="btn-try mobile">
+            <div className="flex flex-col gap-3">
+              <Link 
+                to="/login" 
+                className="w-full text-center px-5 py-2.5 rounded-full no-underline font-medium text-lg transition-all duration-300 text-white font-display bg-transparent hover:-translate-y-0.5"
+              >
                 Login
               </Link>
-              <Link to="/signup" className="btn-signup mobile">
+              <Link 
+                to="/signup" 
+                className="w-full text-center font-display flex flex-row justify-center items-center px-8 py-3.5 gap-2 bg-[rgba(1,56,59)] backdrop-blur-xs text-[#E5FFFF] font-bold text-lg leading-[21px] tracking-[-0.32px] no-underline cursor-pointer transition-all duration-300 rounded-full border border-[#60C9CD] shadow-glow-blue shadow-inset-teal hover:-translate-y-0.5 hover:shadow-glow-blue-hover hover:shadow-inset-teal-hover"
+              >
                 Free Demo
               </Link>
             </div>
diff --git a/frontend/src/components/Navbar/index.ts b/frontend/src/components/Navbar/index.ts
new file mode 100644
index 0000000..86d1b79
--- /dev/null
+++ b/frontend/src/components/Navbar/index.ts
@@ -0,0 +1 @@
+export { default } from './Navbar';
diff --git a/frontend/src/components/auth/ProtectedRoute/ProtectedRoute.tsx b/frontend/src/components/auth/ProtectedRoute/ProtectedRoute.tsx
index 6bf6d87..c16806d 100644
--- a/frontend/src/components/auth/ProtectedRoute/ProtectedRoute.tsx
+++ b/frontend/src/components/auth/ProtectedRoute/ProtectedRoute.tsx
@@ -1,27 +1,32 @@
-import React from 'react';
-import { Navigate, Outlet, useLocation } from 'react-router-dom';
-import { useAuth } from '@hooks/useAuth';
-import './ProtectedRoute.css';
+import React from "react";
+import { Navigate, Outlet, useLocation } from "react-router-dom";
+import { useAuth } from "@hooks/useAuth";
 
 const ProtectedRoute: React.FC = () => {
-  const { isLoading, isAuthenticated } = useAuth();
-  const location = useLocation();
+    const { isLoading, isAuthenticated } = useAuth();
+    const location = useLocation();
 
-  if (isLoading) {
-    return (
-      <div className="protected-route-loading" role="status" aria-live="polite">
-        <div className="protected-route-spinner" aria-hidden="true" />
-        <span>Checking authentication...</span>
-      </div>
-    );
-  }
+    if (isLoading) {
+        return (
+            <div
+                className="min-h-screen flex items-center justify-center gap-3 text-slate-900 bg-slate-50 font-medium"
+                role="status"
+                aria-live="polite"
+            >
+                <div
+                    className="w-4.5 h-4.5 border-2 border-slate-300 border-t-slate-900 rounded-full animate-spin"
+                    aria-hidden="true"
+                />
+                <span>Checking authentication...</span>
+            </div>
+        );
+    }
 
-  if (!isAuthenticated) {
-    return <Navigate to="/login" replace state={{ from: location }} />;
-  }
+    if (!isAuthenticated) {
+        return <Navigate to="/login" replace state={{ from: location }} />;
+    }
 
-  return <Outlet />;
+    return <Outlet />;
 };
 
 export default ProtectedRoute;
-
diff --git a/frontend/src/components/auth/ProtectedRoute/index.ts b/frontend/src/components/auth/ProtectedRoute/index.ts
new file mode 100644
index 0000000..a10c292
--- /dev/null
+++ b/frontend/src/components/auth/ProtectedRoute/index.ts
@@ -0,0 +1 @@
+export { default } from './ProtectedRoute';
diff --git a/frontend/src/components/auth/WalletConnectButton/WalletConnectButton.tsx b/frontend/src/components/auth/WalletConnectButton/WalletConnectButton.tsx
index 89952e9..4478617 100644
--- a/frontend/src/components/auth/WalletConnectButton/WalletConnectButton.tsx
+++ b/frontend/src/components/auth/WalletConnectButton/WalletConnectButton.tsx
@@ -5,7 +5,6 @@ import {
     requestAccess,
 } from '@stellar/freighter-api';
 import { Wallet, LogOut, Download } from 'lucide-react';
-import './WalletConnectButton.css';
 
 export interface WalletConnectButtonProps {
     className?: string;
@@ -22,18 +21,14 @@ export const WalletConnectButton: React.FC<WalletConnectButtonProps> = ({
     const [address, setAddress] = useState<string | null>(null);
     const [isConnecting, setIsConnecting] = useState<boolean>(false);
 
-    // Check if Freighter is installed and if we're already connected on mount
     useEffect(() => {
         let mounted = true;
-
         const checkFreighter = async () => {
             try {
                 const isFreighterInstalled = await isConnected();
-
                 if (mounted) {
                     if (isFreighterInstalled.isConnected) {
                         setHasFreighter(true);
-
                         const response = await getAddress();
                         if (response.address) {
                             setAddress(response.address);
@@ -47,12 +42,8 @@ export const WalletConnectButton: React.FC<WalletConnectButtonProps> = ({
                 console.error('Error checking Freighter status:', error);
             }
         };
-
         checkFreighter();
-
-        return () => {
-            mounted = false;
-        };
+        return () => { mounted = false; };
     }, [onConnect]);
 
     const handleConnect = async () => {
@@ -60,11 +51,9 @@ export const WalletConnectButton: React.FC<WalletConnectButtonProps> = ({
             window.open('https://www.freighter.app/', '_blank');
             return;
         }
-
         try {
             setIsConnecting(true);
             const access = await requestAccess();
-
             if (access && access.address) {
                 setAddress(access.address);
                 if (onConnect) onConnect(access.address);
@@ -77,8 +66,6 @@ export const WalletConnectButton: React.FC<WalletConnectButtonProps> = ({
     };
 
     const handleDisconnect = () => {
-        // Freighter doesn't have an explicit disconnect method in the API that clears permissions.
-        // However, we clear our local state to effectively "log out" the user from our app's perspective.
         setAddress(null);
         if (onDisconnect) onDisconnect();
     };
@@ -88,24 +75,24 @@ export const WalletConnectButton: React.FC<WalletConnectButtonProps> = ({
         return `${addr.slice(0, 5)}...${addr.slice(-4)}`;
     };
 
-    const buttonClasses = `wallet-connect-btn ${address ? 'connected' : 'disconnected'
-        } ${className}`.trim();
-
     // State 1: Connected
     if (address) {
         return (
-            <div className="wallet-connect-container">
-                <button className={buttonClasses} disabled>
-                    <Wallet size={18} className="icon wallet-icon" />
-                    <span className="address-text">{truncateAddress(address)}</span>
+            <div className={`flex items-center gap-2 font-sans ${className}`}>
+                <button
+                    className="flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl text-[0.95rem] font-semibold cursor-default transition-all border border-gray-200 bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700"
+                    disabled
+                >
+                    <Wallet size={18} className="shrink-0" />
+                    <span className="font-mono tracking-wide">{truncateAddress(address)}</span>
                 </button>
                 <button
-                    className="wallet-disconnect-btn"
+                    className="flex items-center justify-center p-2.5 rounded-xl cursor-pointer transition-all border border-red-100 bg-red-50 text-red-500 hover:bg-red-100 hover:text-red-600 hover:-translate-y-px active:translate-y-px dark:bg-red-500/10 dark:border-red-500/20 dark:text-red-400 dark:hover:bg-red-500/20"
                     onClick={handleDisconnect}
                     title="Disconnect wallet"
                     aria-label="Disconnect wallet"
                 >
-                    <LogOut size={16} className="icon disconnect-icon" />
+                    <LogOut size={16} className="shrink-0" />
                 </button>
             </div>
         );
@@ -114,8 +101,11 @@ export const WalletConnectButton: React.FC<WalletConnectButtonProps> = ({
     // State 2: Not Installed
     if (!hasFreighter) {
         return (
-            <button className={`${buttonClasses} install-prompt`} onClick={handleConnect}>
-                <Download size={18} className="icon install-icon" />
+            <button
+                className={`flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl text-[0.95rem] font-semibold cursor-pointer transition-all border-none bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-[0_4px_6px_-1px_rgba(59,130,246,0.2),0_2px_4px_-1px_rgba(59,130,246,0.1)] hover:from-blue-600 hover:to-blue-700 hover:-translate-y-px hover:shadow-[0_6px_8px_-1px_rgba(59,130,246,0.3)] active:translate-y-px ${className}`}
+                onClick={handleConnect}
+            >
+                <Download size={18} className="shrink-0" />
                 <span>Install Freighter</span>
             </button>
         );
@@ -124,11 +114,11 @@ export const WalletConnectButton: React.FC<WalletConnectButtonProps> = ({
     // State 3: Installed, Not Connected
     return (
         <button
-            className={buttonClasses}
+            className={`flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl text-[0.95rem] font-semibold cursor-pointer transition-all border-none bg-gradient-to-br from-emerald-500 to-emerald-600 text-white shadow-[0_4px_6px_-1px_rgba(16,185,129,0.2),0_2px_4px_-1px_rgba(16,185,129,0.1)] hover:from-emerald-600 hover:to-emerald-700 hover:-translate-y-px hover:shadow-[0_6px_8px_-1px_rgba(16,185,129,0.3)] active:translate-y-px disabled:cursor-default ${className}`}
             onClick={handleConnect}
             disabled={isConnecting}
         >
-            <Wallet size={18} className="icon wallet-icon" />
+            <Wallet size={18} className="shrink-0" />
             <span>{isConnecting ? 'Connecting...' : 'Connect Wallet'}</span>
         </button>
     );
diff --git a/frontend/src/components/auth/WalletConnectButton/index.ts b/frontend/src/components/auth/WalletConnectButton/index.ts
new file mode 100644
index 0000000..7bae33a
--- /dev/null
+++ b/frontend/src/components/auth/WalletConnectButton/index.ts
@@ -0,0 +1,2 @@
+export { WalletConnectButton } from './WalletConnectButton';
+export type { WalletConnectButtonProps } from './WalletConnectButton';
diff --git a/frontend/src/components/common/Breadcrumb/Breadcrumb.tsx b/frontend/src/components/common/Breadcrumb/Breadcrumb.tsx
new file mode 100644
index 0000000..567f6f9
--- /dev/null
+++ b/frontend/src/components/common/Breadcrumb/Breadcrumb.tsx
@@ -0,0 +1,82 @@
+import type { ReactElement } from 'react';
+import { Link } from 'react-router-dom';
+import type { BreadcrumbItem, BreadcrumbProps } from './types';
+
+const DEFAULT_MOBILE_COLLAPSE_AT = 4;
+
+function Breadcrumb({
+  items,
+  current,
+  separator = '/',
+  className = '',
+  mobileCollapseAt = DEFAULT_MOBILE_COLLAPSE_AT,
+}: BreadcrumbProps): ReactElement {
+  const hasCurrentItem = items.some((item) => item.label === current);
+  const breadcrumbItems: BreadcrumbItem[] = hasCurrentItem
+    ? items
+    : [...items, { label: current }];
+
+  const mobileItems =
+    breadcrumbItems.length > mobileCollapseAt
+      ? [breadcrumbItems[0], { label: '...' }, breadcrumbItems[breadcrumbItems.length - 1]]
+      : breadcrumbItems;
+
+  const renderItem = (item: BreadcrumbItem, isCurrentPage: boolean) => {
+    if (isCurrentPage) {
+      return (
+        <span aria-current="page" className="text-text-primary font-semibold">
+          {item.label}
+        </span>
+      );
+    }
+
+    if (!item.href) {
+      return <span className="text-text-secondary">{item.label}</span>;
+    }
+
+    return (
+      <Link to={item.href} className="text-text-secondary hover:text-[#62ffff] transition-colors">
+        {item.label}
+      </Link>
+    );
+  };
+
+  return (
+    <nav aria-label="Breadcrumb" className={className}>
+      <ol className="hidden sm:flex items-center flex-wrap gap-y-1 text-sm font-medium">
+        {breadcrumbItems.map((item, index) => {
+          const isCurrentPage = item.label === current;
+
+          return (
+            <li key={`${item.label}-${index}`} className="flex items-center min-w-0">
+              {index > 0 && <span className="mx-2 text-text-secondary/70">{separator}</span>}
+              <span className="truncate max-w-[180px]">{renderItem(item, isCurrentPage)}</span>
+            </li>
+          );
+        })}
+      </ol>
+
+      <ol className="flex sm:hidden items-center text-sm font-medium min-w-0">
+        {mobileItems.map((item, index) => {
+          const isCurrentPage = item.label === current;
+          const isCollapsedToken = item.label === '...';
+
+          return (
+            <li key={`${item.label}-${index}`} className="flex items-center min-w-0">
+              {index > 0 && <span className="mx-2 text-text-secondary/70">{separator}</span>}
+              {isCollapsedToken ? (
+                <span className="text-text-secondary" aria-hidden="true">
+                  ...
+                </span>
+              ) : (
+                <span className="truncate max-w-[120px]">{renderItem(item, isCurrentPage)}</span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
+
+export default Breadcrumb;
diff --git a/frontend/src/components/common/Breadcrumb/index.ts b/frontend/src/components/common/Breadcrumb/index.ts
new file mode 100644
index 0000000..a00a917
--- /dev/null
+++ b/frontend/src/components/common/Breadcrumb/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItem } from './types';
diff --git a/frontend/src/components/common/Breadcrumb/types.ts b/frontend/src/components/common/Breadcrumb/types.ts
new file mode 100644
index 0000000..17975c2
--- /dev/null
+++ b/frontend/src/components/common/Breadcrumb/types.ts
@@ -0,0 +1,12 @@
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  current: string;
+  separator?: '/' | '>';
+  className?: string;
+  mobileCollapseAt?: number;
+}
diff --git a/frontend/src/components/common/DataTable/DataTable.example.tsx b/frontend/src/components/common/DataTable/DataTable.example.tsx
new file mode 100644
index 0000000..366700d
--- /dev/null
+++ b/frontend/src/components/common/DataTable/DataTable.example.tsx
@@ -0,0 +1,151 @@
+import React, { useState } from 'react';
+import DataTable from './DataTable';
+import type { ColumnDef, PaginationConfig } from './types';
+
+// --- Dataset 1: Shipments ---
+
+interface Shipment {
+  id: string;
+  origin: string;
+  destination: string;
+  status: string;
+  weight: number;
+  date: string;
+}
+
+const shipmentColumns: ColumnDef<Shipment & Record<string, unknown>>[] = [
+  { key: 'id', label: 'Shipment ID', sortable: true },
+  { key: 'origin', label: 'Origin', sortable: true },
+  { key: 'destination', label: 'Destination', sortable: true },
+  {
+    key: 'status',
+    label: 'Status',
+    render: (value) => (
+      <span className="px-2.5 py-1 rounded-full text-[11px] font-semibold uppercase bg-accent-blue/10 text-blue-400">
+        {String(value)}
+      </span>
+    ),
+  },
+  { key: 'weight', label: 'Weight (kg)', sortable: true },
+  { key: 'date', label: 'Date', sortable: true },
+];
+
+const shipmentData: (Shipment & Record<string, unknown>)[] = [
+  { id: 'SHP-001', origin: 'Lagos', destination: 'Nairobi', status: 'In Transit', weight: 120, date: '2026-03-01' },
+  { id: 'SHP-002', origin: 'Accra', destination: 'Cairo', status: 'Delivered', weight: 85, date: '2026-03-03' },
+  { id: 'SHP-003', origin: 'Dakar', destination: 'Johannesburg', status: 'Pending', weight: 200, date: '2026-03-05' },
+  { id: 'SHP-004', origin: 'Nairobi', destination: 'Lagos', status: 'In Transit', weight: 60, date: '2026-03-07' },
+  { id: 'SHP-005', origin: 'Cairo', destination: 'Accra', status: 'Delivered', weight: 150, date: '2026-03-09' },
+  { id: 'SHP-006', origin: 'Abuja', destination: 'Dakar', status: 'Pending', weight: 95, date: '2026-03-11' },
+];
+
+// --- Dataset 2: Settlements ---
+
+interface Settlement {
+  txHash: string;
+  amount: number;
+  token: string;
+  status: string;
+  timestamp: string;
+}
+
+const settlementColumns: ColumnDef<Settlement & Record<string, unknown>>[] = [
+  {
+    key: 'txHash',
+    label: 'Tx Hash',
+    render: (value) => (
+      <span className="font-mono text-xs text-text-secondary">
+        {String(value).slice(0, 10)}…
+      </span>
+    ),
+  },
+  {
+    key: 'amount',
+    label: 'Amount',
+    sortable: true,
+    render: (value, row) => (
+      <span className="font-semibold">
+        {Number(value).toLocaleString()} {String(row.token)}
+      </span>
+    ),
+  },
+  { key: 'status', label: 'Status', sortable: true },
+  { key: 'timestamp', label: 'Timestamp', sortable: true },
+];
+
+const settlementData: (Settlement & Record<string, unknown>)[] = [
+  { txHash: '0xabc123def456', amount: 5420, token: 'USDC', status: 'Released', timestamp: '2026-03-01 10:22' },
+  { txHash: '0x789xyz012uvw', amount: 3200, token: 'XLM', status: 'Escrowed', timestamp: '2026-03-02 14:05' },
+  { txHash: '0xfed321cba654', amount: 7850, token: 'USDC', status: 'Released', timestamp: '2026-03-03 09:47' },
+  { txHash: '0x111aaa222bbb', amount: 1250, token: 'USDC', status: 'Pending', timestamp: '2026-03-04 16:30' },
+];
+
+// --- Example Component ---
+
+const ITEMS_PER_PAGE = 3;
+
+const DataTableExample: React.FC = () => {
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+
+  const paginatedShipments = shipmentData.slice((page - 1) * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE);
+
+  const pagination: PaginationConfig = {
+    currentPage: page,
+    totalPages: Math.ceil(shipmentData.length / ITEMS_PER_PAGE),
+    onPageChange: setPage,
+    totalItems: shipmentData.length,
+    itemsPerPage: ITEMS_PER_PAGE,
+  };
+
+  return (
+    <div className="p-8 flex flex-col gap-10 bg-background min-h-screen">
+      <section>
+        <h2 className="text-xl font-bold text-text-primary mb-4">Shipments (with pagination + row click)</h2>
+        <button
+          onClick={() => setLoading((v) => !v)}
+          className="mb-4 px-4 py-2 text-sm border border-border rounded-lg text-text-secondary hover:text-text-primary transition-colors"
+        >
+          Toggle loading: {loading ? 'ON' : 'OFF'}
+        </button>
+        <DataTable
+          columns={shipmentColumns}
+          data={paginatedShipments}
+          loading={loading}
+          pagination={pagination}
+          onRowClick={(row) => alert(`Clicked: ${row.id}`)}
+          emptyState={{
+            message: 'No shipments found',
+            description: 'Create your first shipment to get started.',
+            cta: { label: 'Create Shipment', onClick: () => alert('Create!') },
+          }}
+        />
+      </section>
+
+      <section>
+        <h2 className="text-xl font-bold text-text-primary mb-4">Settlements (no pagination)</h2>
+        <DataTable
+          columns={settlementColumns}
+          data={settlementData}
+          onRowClick={(row) => alert(`Tx: ${row.txHash}`)}
+          emptyState={{ message: 'No settlements yet' }}
+        />
+      </section>
+
+      <section>
+        <h2 className="text-xl font-bold text-text-primary mb-4">Empty state demo</h2>
+        <DataTable
+          columns={shipmentColumns}
+          data={[]}
+          emptyState={{
+            message: 'No shipments found',
+            description: 'Try adjusting your filters.',
+            cta: { label: 'Clear Filters', onClick: () => {} },
+          }}
+        />
+      </section>
+    </div>
+  );
+};
+
+export default DataTableExample;
diff --git a/frontend/src/components/common/DataTable/DataTable.tsx b/frontend/src/components/common/DataTable/DataTable.tsx
new file mode 100644
index 0000000..7b946ed
--- /dev/null
+++ b/frontend/src/components/common/DataTable/DataTable.tsx
@@ -0,0 +1,207 @@
+import React, { useState } from 'react';
+import { ChevronLeft, ChevronRight, ChevronUp, ChevronDown, ArrowUpDown } from 'lucide-react';
+import Button from '@components/Button';
+import type { DataTableProps, SortDirection } from './types';
+
+function DataTable<T extends Record<string, unknown>>({
+  columns,
+  data,
+  loading = false,
+  emptyState = { message: 'No data available' },
+  onRowClick,
+  pagination,
+  className = '',
+}: DataTableProps<T>): React.ReactElement {
+  const [sortKey, setSortKey] = useState<string | null>(null);
+  const [sortDir, setSortDir] = useState<SortDirection>(null);
+
+  const handleSort = (key: string) => {
+    if (sortKey !== key) {
+      setSortKey(key);
+      setSortDir('asc');
+    } else if (sortDir === 'asc') {
+      setSortDir('desc');
+    } else if (sortDir === 'desc') {
+      setSortKey(null);
+      setSortDir(null);
+    }
+  };
+
+  const sortedData = React.useMemo(() => {
+    if (!sortKey || !sortDir) return data;
+    return [...data].sort((a, b) => {
+      const aVal = a[sortKey];
+      const bVal = b[sortKey];
+      if (aVal === bVal) return 0;
+      const cmp = aVal! < bVal! ? -1 : 1;
+      return sortDir === 'asc' ? cmp : -cmp;
+    });
+  }, [data, sortKey, sortDir]);
+
+  const containerClass =
+    'bg-[rgba(19,186,186,0.05)] border border-[rgba(98,255,255,0.2)] rounded-2xl overflow-hidden shadow-[inset_0_0_20px_0px_rgba(0,128,128,0.3)]';
+  const thClass =
+    'text-left px-6 py-4 text-[11px] font-semibold text-[#62ffff] uppercase border-b border-[rgba(98,255,255,0.2)]';
+  const tdClass =
+    'px-6 py-4 text-sm text-text-primary border-b border-[rgba(98,255,255,0.2)]';
+
+  const SortIcon = ({ colKey }: { colKey: string }) => {
+    if (sortKey !== colKey) return <ArrowUpDown size={13} className="text-text-secondary" />;
+    if (sortDir === 'asc') return <ChevronUp size={13} className="text-[#62ffff]" />;
+    return <ChevronDown size={13} className="text-[#62ffff]" />;
+  };
+
+  // Loading skeleton
+  if (loading) {
+    return (
+      <div className={`${containerClass} ${className}`}>
+        <table className="w-full border-collapse">
+          <thead className="bg-[rgba(19,186,186,0.1)]">
+            <tr>
+              {columns.map((col) => (
+                <th key={col.key} className={thClass}>
+                  {col.label}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {[...Array(5)].map((_, i) => (
+              <tr key={i}>
+                {columns.map((col) => (
+                  <td key={col.key} className={tdClass}>
+                    <div className="h-4 rounded bg-[rgba(98,255,255,0.08)] animate-pulse" />
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+  // Empty state
+  if (sortedData.length === 0) {
+    return (
+      <div className={`${containerClass} ${className}`}>
+        <div className="flex flex-col items-center justify-center gap-4 py-16 px-6 text-center">
+          <div className="text-5xl">📭</div>
+          <div className="flex flex-col gap-2 max-w-sm">
+            <h3 className="text-lg font-semibold text-text-primary">{emptyState.message}</h3>
+            {emptyState.description && (
+              <p className="text-sm text-text-secondary">{emptyState.description}</p>
+            )}
+          </div>
+          {emptyState.cta && (
+            <Button variant="primary" size="md" onClick={emptyState.cta.onClick}>
+              {emptyState.cta.label}
+            </Button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  const showPagination = pagination && pagination.totalPages > 1;
+
+  return (
+    <div className={`flex flex-col gap-3 ${className}`}>
+      {/* Table */}
+      <div className={`${containerClass} overflow-x-auto`}>
+        <table className="w-full border-collapse min-w-[600px]">
+          <thead className="bg-[rgba(19,186,186,0.1)]">
+            <tr>
+              {columns.map((col) => (
+                <th
+                  key={col.key}
+                  className={`${thClass} ${col.sortable ? 'cursor-pointer select-none hover:text-white transition-colors' : ''}`}
+                  onClick={col.sortable ? () => handleSort(col.key) : undefined}
+                >
+                  <span className="inline-flex items-center gap-1.5">
+                    {col.label}
+                    {col.sortable && <SortIcon colKey={col.key} />}
+                  </span>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {sortedData.map((row, rowIdx) => (
+              <tr
+                key={rowIdx}
+                className={`transition-colors last:border-b-0 ${
+                  onRowClick
+                    ? 'cursor-pointer hover:bg-[rgba(98,255,255,0.05)]'
+                    : 'hover:bg-[rgba(98,255,255,0.03)]'
+                }`}
+                onClick={onRowClick ? () => onRowClick(row) : undefined}
+              >
+                {columns.map((col) => (
+                  <td key={col.key} className={tdClass}>
+                    {col.render
+                      ? col.render(row[col.key], row)
+                      : String(row[col.key] ?? '')}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {showPagination && (
+        <div className="flex justify-between items-center px-6 py-4 bg-[rgba(19,186,186,0.05)] border border-[rgba(98,255,255,0.2)] rounded-xl shadow-[inset_0_0_15px_0px_rgba(0,128,128,0.2)] md:flex-col md:gap-4">
+          {pagination.totalItems !== undefined && pagination.itemsPerPage !== undefined ? (
+            <span className="text-sm text-text-secondary">
+              Showing{' '}
+              {(pagination.currentPage - 1) * pagination.itemsPerPage + 1}–
+              {Math.min(pagination.currentPage * pagination.itemsPerPage, pagination.totalItems)} of{' '}
+              {pagination.totalItems}
+            </span>
+          ) : (
+            <span className="text-sm text-text-secondary">
+              Page {pagination.currentPage} of {pagination.totalPages}
+            </span>
+          )}
+          <div className="flex gap-2">
+            <button
+              onClick={() => pagination.onPageChange(pagination.currentPage - 1)}
+              disabled={pagination.currentPage === 1}
+              className="bg-transparent border border-[rgba(98,255,255,0.2)] text-text-primary px-3 py-2 rounded-md text-sm font-medium cursor-pointer flex items-center justify-center min-w-[36px] transition-all hover:bg-[rgba(98,255,255,0.1)] hover:border-[#62ffff] hover:text-[#62ffff] disabled:opacity-30 disabled:cursor-not-allowed"
+              aria-label="Previous page"
+            >
+              <ChevronLeft size={16} />
+            </button>
+            {[...Array(pagination.totalPages)].map((_, i) => (
+              <button
+                key={i + 1}
+                onClick={() => pagination.onPageChange(i + 1)}
+                className={`border px-3 py-2 rounded-md text-sm font-semibold cursor-pointer min-w-[36px] transition-all ${
+                  pagination.currentPage === i + 1
+                    ? 'bg-[#62ffff] border-[#62ffff] text-black'
+                    : 'bg-transparent border-[rgba(98,255,255,0.2)] text-text-primary hover:bg-[rgba(98,255,255,0.1)] hover:border-[#62ffff] hover:text-[#62ffff]'
+                }`}
+                aria-label={`Page ${i + 1}`}
+                aria-current={pagination.currentPage === i + 1 ? 'page' : undefined}
+              >
+                {i + 1}
+              </button>
+            ))}
+            <button
+              onClick={() => pagination.onPageChange(pagination.currentPage + 1)}
+              disabled={pagination.currentPage === pagination.totalPages}
+              className="bg-transparent border border-[rgba(98,255,255,0.2)] text-text-primary px-3 py-2 rounded-md text-sm font-medium cursor-pointer flex items-center justify-center min-w-[36px] transition-all hover:bg-[rgba(98,255,255,0.1)] hover:border-[#62ffff] hover:text-[#62ffff] disabled:opacity-30 disabled:cursor-not-allowed"
+              aria-label="Next page"
+            >
+              <ChevronRight size={16} />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default DataTable;
diff --git a/frontend/src/components/common/DataTable/index.ts b/frontend/src/components/common/DataTable/index.ts
new file mode 100644
index 0000000..99abc2c
--- /dev/null
+++ b/frontend/src/components/common/DataTable/index.ts
@@ -0,0 +1,8 @@
+export { default } from './DataTable';
+export type {
+  DataTableProps,
+  ColumnDef,
+  PaginationConfig,
+  DataTableEmptyState,
+  SortDirection,
+} from './types';
diff --git a/frontend/src/components/common/DataTable/types.ts b/frontend/src/components/common/DataTable/types.ts
new file mode 100644
index 0000000..af8778b
--- /dev/null
+++ b/frontend/src/components/common/DataTable/types.ts
@@ -0,0 +1,37 @@
+import React from 'react';
+
+export type SortDirection = 'asc' | 'desc' | null;
+
+export interface ColumnDef<T> {
+  key: string;
+  label: string;
+  sortable?: boolean;
+  render?: (value: unknown, row: T) => React.ReactNode;
+}
+
+export interface PaginationConfig {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  totalItems?: number;
+  itemsPerPage?: number;
+}
+
+export interface DataTableEmptyState {
+  message: string;
+  description?: string;
+  cta?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+export interface DataTableProps<T extends Record<string, unknown>> {
+  columns: ColumnDef<T>[];
+  data: T[];
+  loading?: boolean;
+  emptyState?: DataTableEmptyState;
+  onRowClick?: (row: T) => void;
+  pagination?: PaginationConfig;
+  className?: string;
+}
diff --git a/frontend/src/components/common/EmptyState/EmptyState.tsx b/frontend/src/components/common/EmptyState/EmptyState.tsx
new file mode 100644
index 0000000..b2ef1c2
--- /dev/null
+++ b/frontend/src/components/common/EmptyState/EmptyState.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import Button from '@components/Button';
+import type { EmptyStateProps } from './types';
+
+const EmptyState: React.FC<EmptyStateProps> = ({
+  icon,
+  title,
+  description,
+  cta,
+  className = '',
+}) => {
+  return (
+    <div
+      className={`flex flex-col items-center justify-center gap-4 py-16 px-6 text-center ${className}`}
+    >
+      {icon && (
+        <div className="flex items-center justify-center w-16 h-16 rounded-full bg-background-elevated border border-border text-text-secondary">
+          {icon}
+        </div>
+      )}
+
+      <div className="flex flex-col gap-2 max-w-sm">
+        <h3 className="text-lg font-semibold text-text-primary">{title}</h3>
+        {description && (
+          <p className="text-sm text-text-secondary">{description}</p>
+        )}
+      </div>
+
+      {cta && (
+        <Button variant="primary" size="md" onClick={cta.onClick}>
+          {cta.label}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default EmptyState;
+export type { EmptyStateProps } from './types';
diff --git a/frontend/src/components/common/EmptyState/index.ts b/frontend/src/components/common/EmptyState/index.ts
new file mode 100644
index 0000000..bde1247
--- /dev/null
+++ b/frontend/src/components/common/EmptyState/index.ts
@@ -0,0 +1,2 @@
+export { default } from './EmptyState';
+export type { EmptyStateProps, EmptyStateCTA } from './types';
diff --git a/frontend/src/components/common/EmptyState/types.ts b/frontend/src/components/common/EmptyState/types.ts
new file mode 100644
index 0000000..2dc2a59
--- /dev/null
+++ b/frontend/src/components/common/EmptyState/types.ts
@@ -0,0 +1,14 @@
+import React from 'react';
+
+export interface EmptyStateCTA {
+  label: string;
+  onClick: () => void;
+}
+
+export interface EmptyStateProps {
+  icon?: React.ReactNode;
+  title: string;
+  description?: string;
+  cta?: EmptyStateCTA;
+  className?: string;
+}
diff --git a/frontend/src/components/common/Modal/Modal.tsx b/frontend/src/components/common/Modal/Modal.tsx
new file mode 100644
index 0000000..1240d7e
--- /dev/null
+++ b/frontend/src/components/common/Modal/Modal.tsx
@@ -0,0 +1,166 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+
+export type ModalSize = 'sm' | 'md' | 'lg';
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  size?: ModalSize;
+  closeOnOverlayClick?: boolean;
+  closeOnEsc?: boolean;
+}
+
+const sizeClasses: Record<ModalSize, string> = {
+  sm: 'max-w-sm',
+  md: 'max-w-lg',
+  lg: 'max-w-2xl',
+};
+
+const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  footer,
+  size = 'md',
+  closeOnOverlayClick = true,
+  closeOnEsc = true,
+}) => {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+
+  // Focus trap: collect all focusable elements inside the dialog
+  const getFocusableElements = useCallback((): HTMLElement[] => {
+    if (!dialogRef.current) return [];
+    return Array.from(
+      dialogRef.current.querySelectorAll<HTMLElement>(
+        'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+      )
+    );
+  }, []);
+
+  // Handle Tab / Shift+Tab to trap focus
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && closeOnEsc) {
+        onClose();
+        return;
+      }
+      if (e.key === 'Tab') {
+        const focusable = getFocusableElements();
+        if (focusable.length === 0) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey) {
+          if (document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+          }
+        } else {
+          if (document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+          }
+        }
+      }
+    },
+    [closeOnEsc, onClose, getFocusableElements]
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      previousFocusRef.current = document.activeElement as HTMLElement;
+      document.addEventListener('keydown', handleKeyDown);
+      // Move focus into dialog on next tick so the element is rendered
+      const raf = requestAnimationFrame(() => {
+        const focusable = getFocusableElements();
+        if (focusable.length > 0) focusable[0].focus();
+        else dialogRef.current?.focus();
+      });
+      return () => {
+        cancelAnimationFrame(raf);
+        document.removeEventListener('keydown', handleKeyDown);
+        previousFocusRef.current?.focus();
+      };
+    }
+  }, [isOpen, handleKeyDown, getFocusableElements]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-modal-overlay"
+      aria-hidden="true"
+    >
+      {/* Overlay */}
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-xs"
+        onClick={closeOnOverlayClick ? onClose : undefined}
+        aria-hidden="true"
+      />
+
+      {/* Dialog */}
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
+        tabIndex={-1}
+        className={`
+          relative w-full ${sizeClasses[size]}
+          bg-background-card border border-border rounded-2xl
+          shadow-lg outline-none
+          animate-modal-content
+        `}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+          <h2
+            id="modal-title"
+            className="text-lg font-semibold font-display text-text-primary"
+          >
+            {title}
+          </h2>
+          <button
+            onClick={onClose}
+            aria-label="Close modal"
+            className="flex items-center justify-center w-8 h-8 rounded-full text-text-secondary hover:text-text-primary hover:bg-background-elevated transition-colors duration-200"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="px-6 py-5 text-text-secondary text-sm leading-relaxed">
+          {children}
+        </div>
+
+        {/* Footer */}
+        {footer && (
+          <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-border">
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Modal;
diff --git a/frontend/src/components/common/Modal/index.ts b/frontend/src/components/common/Modal/index.ts
new file mode 100644
index 0000000..5c95430
--- /dev/null
+++ b/frontend/src/components/common/Modal/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Modal';
+export type { ModalProps, ModalSize } from './Modal';
diff --git a/frontend/src/components/common/Pagination/Pagination.example.tsx b/frontend/src/components/common/Pagination/Pagination.example.tsx
new file mode 100644
index 0000000..ec7343e
--- /dev/null
+++ b/frontend/src/components/common/Pagination/Pagination.example.tsx
@@ -0,0 +1,37 @@
+import { useMemo, useState } from 'react';
+import Pagination from './Pagination';
+
+const PAGE_SIZE = 10;
+const MOCK_TOTAL_ITEMS = 237;
+
+function PaginationExample() {
+  const [currentPage, setCurrentPage] = useState(1);
+  const totalPages = Math.ceil(MOCK_TOTAL_ITEMS / PAGE_SIZE);
+
+  const currentRange = useMemo(() => {
+    const start = (currentPage - 1) * PAGE_SIZE + 1;
+    const end = Math.min(currentPage * PAGE_SIZE, MOCK_TOTAL_ITEMS);
+    return `${start}-${end}`;
+  }, [currentPage]);
+
+  return (
+    <section className="rounded-2xl border border-[rgba(98,255,255,0.2)] bg-[rgba(19,186,186,0.05)] p-6 shadow-[inset_0_0_20px_0px_rgba(0,128,128,0.2)]">
+      <div className="mb-5">
+        <h2 className="text-xl font-semibold text-text-primary">Pagination Demo</h2>
+        <p className="text-sm text-text-secondary mt-1">
+          Showing items <span className="text-text-primary font-medium">{currentRange}</span> of{' '}
+          <span className="text-text-primary font-medium">{MOCK_TOTAL_ITEMS}</span>
+        </p>
+      </div>
+
+      <Pagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={setCurrentPage}
+        siblingCount={1}
+      />
+    </section>
+  );
+}
+
+export default PaginationExample;
diff --git a/frontend/src/components/common/Pagination/Pagination.tsx b/frontend/src/components/common/Pagination/Pagination.tsx
new file mode 100644
index 0000000..5982456
--- /dev/null
+++ b/frontend/src/components/common/Pagination/Pagination.tsx
@@ -0,0 +1,121 @@
+import type { ReactElement } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import type { PaginationProps } from './types';
+
+const ELLIPSIS = 'ellipsis';
+
+const range = (start: number, end: number): number[] =>
+  Array.from({ length: end - start + 1 }, (_, index) => index + start);
+
+const getPaginationItems = (
+  currentPage: number,
+  totalPages: number,
+  siblingCount: number,
+): Array<number | string> => {
+  const totalPageNumbers = siblingCount * 2 + 5;
+
+  if (totalPageNumbers >= totalPages) {
+    return range(1, totalPages);
+  }
+
+  const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+  const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+
+  const showLeftEllipsis = leftSiblingIndex > 2;
+  const showRightEllipsis = rightSiblingIndex < totalPages - 1;
+
+  if (!showLeftEllipsis && showRightEllipsis) {
+    const leftRange = range(1, 3 + 2 * siblingCount);
+    return [...leftRange, ELLIPSIS, totalPages];
+  }
+
+  if (showLeftEllipsis && !showRightEllipsis) {
+    const rightRange = range(totalPages - (2 * siblingCount + 2), totalPages);
+    return [1, ELLIPSIS, ...rightRange];
+  }
+
+  const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+  return [1, ELLIPSIS, ...middleRange, ELLIPSIS, totalPages];
+};
+
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  className = '',
+}: PaginationProps): ReactElement {
+  const paginationItems = getPaginationItems(currentPage, totalPages, siblingCount);
+
+  const navigateToPage = (page: number) => {
+    if (page < 1 || page > totalPages || page === currentPage) {
+      return;
+    }
+
+    onPageChange(page);
+  };
+
+  return (
+    <nav
+      className={`flex items-center gap-2 ${className}`}
+      aria-label="Pagination navigation"
+      role="navigation"
+    >
+      <button
+        type="button"
+        onClick={() => navigateToPage(currentPage - 1)}
+        disabled={currentPage === 1}
+        className="bg-transparent border border-[rgba(98,255,255,0.2)] text-text-primary px-3 py-2 rounded-md text-sm font-medium cursor-pointer flex items-center justify-center min-w-[36px] transition-all hover:bg-[rgba(98,255,255,0.1)] hover:border-[#62ffff] hover:text-[#62ffff] disabled:opacity-30 disabled:cursor-not-allowed"
+        aria-label="Go to previous page"
+      >
+        <ChevronLeft size={16} />
+      </button>
+
+      {paginationItems.map((item, index) => {
+        if (item === ELLIPSIS) {
+          return (
+            <span
+              key={`${item}-${index}`}
+              className="min-w-[36px] text-center text-text-secondary"
+              aria-hidden="true"
+            >
+              ...
+            </span>
+          );
+        }
+
+        const page = Number(item);
+        const isCurrentPage = page === currentPage;
+
+        return (
+          <button
+            key={page}
+            type="button"
+            onClick={() => navigateToPage(page)}
+            className={`border px-3 py-2 rounded-md text-sm font-semibold cursor-pointer min-w-[36px] transition-all ${
+              isCurrentPage
+                ? 'bg-[#62ffff] border-[#62ffff] text-black'
+                : 'bg-transparent border-[rgba(98,255,255,0.2)] text-text-primary hover:bg-[rgba(98,255,255,0.1)] hover:border-[#62ffff] hover:text-[#62ffff]'
+            }`}
+            aria-label={`Go to page ${page}`}
+            aria-current={isCurrentPage ? 'page' : undefined}
+          >
+            {page}
+          </button>
+        );
+      })}
+
+      <button
+        type="button"
+        onClick={() => navigateToPage(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        className="bg-transparent border border-[rgba(98,255,255,0.2)] text-text-primary px-3 py-2 rounded-md text-sm font-medium cursor-pointer flex items-center justify-center min-w-[36px] transition-all hover:bg-[rgba(98,255,255,0.1)] hover:border-[#62ffff] hover:text-[#62ffff] disabled:opacity-30 disabled:cursor-not-allowed"
+        aria-label="Go to next page"
+      >
+        <ChevronRight size={16} />
+      </button>
+    </nav>
+  );
+}
+
+export default Pagination;
diff --git a/frontend/src/components/common/Pagination/index.ts b/frontend/src/components/common/Pagination/index.ts
new file mode 100644
index 0000000..d963505
--- /dev/null
+++ b/frontend/src/components/common/Pagination/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Pagination';
+export type { PaginationProps } from './types';
diff --git a/frontend/src/components/common/Pagination/types.ts b/frontend/src/components/common/Pagination/types.ts
new file mode 100644
index 0000000..8d4da5d
--- /dev/null
+++ b/frontend/src/components/common/Pagination/types.ts
@@ -0,0 +1,7 @@
+export interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  siblingCount?: number;
+  className?: string;
+}
diff --git a/frontend/src/components/common/StatusBadge/StatusBadge.tsx b/frontend/src/components/common/StatusBadge/StatusBadge.tsx
new file mode 100644
index 0000000..5a45875
--- /dev/null
+++ b/frontend/src/components/common/StatusBadge/StatusBadge.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { getStatusVariant } from './statusBadgeVariants';
+
+export interface StatusBadgeProps {
+  status: string;
+  className?: string;
+}
+
+const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className = '' }) => {
+  const { bg, text } = getStatusVariant(status);
+
+  return (
+    <span
+      className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold uppercase tracking-wide ${bg} ${text} ${className}`}
+    >
+      {status}
+    </span>
+  );
+};
+
+export default StatusBadge;
diff --git a/frontend/src/components/common/StatusBadge/index.ts b/frontend/src/components/common/StatusBadge/index.ts
new file mode 100644
index 0000000..a0a7d0c
--- /dev/null
+++ b/frontend/src/components/common/StatusBadge/index.ts
@@ -0,0 +1,3 @@
+export { default } from './StatusBadge';
+export type { StatusBadgeProps } from './StatusBadge';
+export type { StatusBadgeStatus } from './statusBadgeVariants';
diff --git a/frontend/src/components/common/StatusBadge/statusBadgeVariants.ts b/frontend/src/components/common/StatusBadge/statusBadgeVariants.ts
new file mode 100644
index 0000000..265d71c
--- /dev/null
+++ b/frontend/src/components/common/StatusBadge/statusBadgeVariants.ts
@@ -0,0 +1,44 @@
+export type StatusBadgeStatus =
+  | 'In Transit'
+  | 'Delivered'
+  | 'Pending'
+  | 'Delayed'
+  | 'Failed'
+  | string;
+
+interface BadgeVariant {
+  bg: string;
+  text: string;
+}
+
+const STATUS_VARIANTS: Record<string, BadgeVariant> = {
+  'In Transit': {
+    bg: 'bg-accent-blue/10',
+    text: 'text-blue-400',
+  },
+  Delivered: {
+    bg: 'bg-accent-green/10',
+    text: 'text-green-400',
+  },
+  Pending: {
+    bg: 'bg-yellow-500/10',
+    text: 'text-yellow-400',
+  },
+  Delayed: {
+    bg: 'bg-orange-500/10',
+    text: 'text-orange-400',
+  },
+  Failed: {
+    bg: 'bg-accent-red/10',
+    text: 'text-red-400',
+  },
+};
+
+const NEUTRAL: BadgeVariant = {
+  bg: 'bg-text-secondary/10',
+  text: 'text-text-secondary',
+};
+
+export function getStatusVariant(status: string): BadgeVariant {
+  return STATUS_VARIANTS[status] ?? NEUTRAL;
+}
diff --git a/frontend/src/components/dashboard/Charts/DeliverySuccessChart/DeliverySuccessChart.css b/frontend/src/components/dashboard/Charts/DeliverySuccessChart/DeliverySuccessChart.css
deleted file mode 100644
index 18b8536..0000000
--- a/frontend/src/components/dashboard/Charts/DeliverySuccessChart/DeliverySuccessChart.css
+++ /dev/null
@@ -1,147 +0,0 @@
-.delivery-chart-section {
-  padding: 0;
-}
-
-.delivery-chart-header {
-  padding: 20px 24px;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.delivery-chart-title {
-  font-size: 16px;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.delivery-chart-title svg {
-  color: #10b981;
-}
-
-.delivery-chart-body {
-  padding: 32px 24px 24px;
-  height: 280px;
-  position: relative;
-}
-
-.delivery-center-label {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
-  pointer-events: none;
-}
-
-.success-percentage {
-  font-size: 32px;
-  font-weight: 700;
-  color: #fff;
-  line-height: 1;
-}
-
-.success-label {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  margin-top: 4px;
-}
-
-.delivery-legend {
-  padding: 0 24px 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.legend-color {
-  width: 12px;
-  height: 12px;
-  border-radius: 3px;
-  flex-shrink: 0;
-}
-
-.legend-details {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex: 1;
-}
-
-.legend-status {
-  font-size: 13px;
-  color: var(--text-secondary);
-  font-weight: 500;
-}
-
-.legend-count {
-  font-size: 14px;
-  color: #fff;
-  font-weight: 600;
-}
-
-.legend-total {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: 12px;
-  margin-top: 4px;
-  border-top: 1px solid var(--border-color);
-}
-
-.legend-total-label {
-  font-size: 13px;
-  color: var(--text-secondary);
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-.legend-total-count {
-  font-size: 16px;
-  color: #fff;
-  font-weight: 700;
-}
-
-.delivery-tooltip {
-  background-color: #1a1f2e;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  padding: 10px 14px;
-}
-
-.delivery-tooltip-label {
-  color: var(--text-secondary);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  margin-bottom: 4px;
-}
-
-.delivery-tooltip-value {
-  color: #fff;
-  font-size: 14px;
-  font-weight: 700;
-}
-
-@media (max-width: 768px) {
-  .delivery-chart-body {
-    height: 240px;
-    padding: 24px 16px 16px;
-  }
-
-  .success-percentage {
-    font-size: 28px;
-  }
-
-  .delivery-legend {
-    padding: 0 16px 16px;
-  }
-}
diff --git a/frontend/src/components/dashboard/Charts/DeliverySuccessChart/DeliverySuccessChart.tsx b/frontend/src/components/dashboard/Charts/DeliverySuccessChart/DeliverySuccessChart.tsx
index 2ed9e57..6be27b7 100644
--- a/frontend/src/components/dashboard/Charts/DeliverySuccessChart/DeliverySuccessChart.tsx
+++ b/frontend/src/components/dashboard/Charts/DeliverySuccessChart/DeliverySuccessChart.tsx
@@ -2,7 +2,6 @@ import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
 import { TrendingUp } from 'lucide-react';
 import { MOCK_DELIVERY_DATA, calculateSuccessRate } from './mockDeliveryData';
 import type { DeliveryOutcome } from './mockDeliveryData';
-import './DeliverySuccessChart.css';
 
 interface DeliverySuccessChartProps {
   data?: DeliveryOutcome[];
@@ -15,11 +14,10 @@ interface CustomTooltipProps {
 
 function CustomTooltip({ active, payload }: CustomTooltipProps) {
   if (!active || !payload?.length) return null;
-
   return (
-    <div className="delivery-tooltip">
-      <div className="delivery-tooltip-label">{payload[0].name}</div>
-      <div className="delivery-tooltip-value">{payload[0].value} shipments</div>
+    <div className="bg-[#1a1f2e] border border-border rounded-lg px-3.5 py-2.5">
+      <div className="text-text-secondary text-[11px] font-semibold uppercase mb-1">{payload[0].name}</div>
+      <div className="text-white text-sm font-bold">{payload[0].value} shipments</div>
     </div>
   );
 }
@@ -29,15 +27,17 @@ export default function DeliverySuccessChart({ data = MOCK_DELIVERY_DATA }: Deli
   const total = data.reduce((sum, item) => sum + item.count, 0);
 
   return (
-    <div className="delivery-chart-section">
-      <div className="delivery-chart-header">
-        <h2 className="delivery-chart-title">
-          <TrendingUp size={18} />
+    <div className="p-0">
+      {/* Header */}
+      <div className="px-6 py-5 border-b border-border">
+        <h2 className="text-base font-bold flex items-center gap-2.5">
+          <TrendingUp size={18} className="text-accent-green" />
           Delivery Success Rates
         </h2>
       </div>
 
-      <div className="delivery-chart-body">
+      {/* Chart body */}
+      <div className="px-6 pt-8 pb-6 h-[280px] md:h-[240px] md:px-4 md:pt-6 md:pb-4 relative">
         <ResponsiveContainer width="100%" height="100%">
           <PieChart>
             <Pie
@@ -58,25 +58,27 @@ export default function DeliverySuccessChart({ data = MOCK_DELIVERY_DATA }: Deli
           </PieChart>
         </ResponsiveContainer>
 
-        <div className="delivery-center-label">
-          <div className="success-percentage">{successRate}%</div>
-          <div className="success-label">Success</div>
+        {/* Center label */}
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center pointer-events-none">
+          <div className="text-[32px] md:text-[28px] font-bold text-white leading-none">{successRate}%</div>
+          <div className="text-xs font-semibold text-text-secondary uppercase mt-1">Success</div>
         </div>
       </div>
 
-      <div className="delivery-legend">
+      {/* Legend */}
+      <div className="px-6 pb-6 md:px-4 md:pb-4 flex flex-col gap-3">
         {data.map(item => (
-          <div key={item.status} className="legend-item">
-            <div className="legend-color" style={{ backgroundColor: item.color }} />
-            <div className="legend-details">
-              <span className="legend-status">{item.status}</span>
-              <span className="legend-count">{item.count}</span>
+          <div key={item.status} className="flex items-center gap-3">
+            <div className="w-3 h-3 rounded-[3px] shrink-0" style={{ backgroundColor: item.color }} />
+            <div className="flex justify-between items-center flex-1">
+              <span className="text-[13px] text-text-secondary font-medium">{item.status}</span>
+              <span className="text-sm text-white font-semibold">{item.count}</span>
             </div>
           </div>
         ))}
-        <div className="legend-total">
-          <span className="legend-total-label">Total</span>
-          <span className="legend-total-count">{total}</span>
+        <div className="flex justify-between items-center pt-3 mt-1 border-t border-border">
+          <span className="text-[13px] text-text-secondary font-semibold uppercase">Total</span>
+          <span className="text-base text-white font-bold">{total}</span>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/dashboard/Charts/DeliverySuccessChart/index.ts b/frontend/src/components/dashboard/Charts/DeliverySuccessChart/index.ts
new file mode 100644
index 0000000..d8015be
--- /dev/null
+++ b/frontend/src/components/dashboard/Charts/DeliverySuccessChart/index.ts
@@ -0,0 +1 @@
+export { default } from './DeliverySuccessChart';
diff --git a/frontend/src/components/dashboard/Charts/ShipmentVolumeChart/ShipmentVolumeChart.css b/frontend/src/components/dashboard/Charts/ShipmentVolumeChart/ShipmentVolumeChart.css
deleted file mode 100644
index 2e61313..0000000
--- a/frontend/src/components/dashboard/Charts/ShipmentVolumeChart/ShipmentVolumeChart.css
+++ /dev/null
@@ -1,91 +0,0 @@
-.volume-chart-section {
-  padding: 0;
-}
-
-.volume-chart-header {
-  padding: 20px 24px;
-  border-bottom: 1px solid var(--border-color);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.volume-chart-title {
-  font-size: 16px;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.volume-chart-title svg {
-  color: var(--accent-blue);
-}
-
-.range-toggle {
-  display: flex;
-  gap: 4px;
-  background-color: #1a1f2e;
-  border-radius: 8px;
-  padding: 3px;
-}
-
-.range-toggle button {
-  background: transparent;
-  border: none;
-  color: var(--text-secondary);
-  font-size: 12px;
-  font-weight: 600;
-  padding: 6px 12px;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.range-toggle button:hover {
-  color: #fff;
-}
-
-.range-toggle button.active {
-  background-color: var(--accent-blue);
-  color: #fff;
-}
-
-.volume-chart-body {
-  padding: 20px 16px 12px 0;
-  height: 300px;
-}
-
-.volume-tooltip {
-  background-color: #1a1f2e;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  padding: 10px 14px;
-}
-
-.volume-tooltip-label {
-  color: var(--text-secondary);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  margin-bottom: 4px;
-}
-
-.volume-tooltip-value {
-  color: #fff;
-  font-size: 14px;
-  font-weight: 700;
-}
-
-@media (max-width: 768px) {
-  .volume-chart-body {
-    height: 220px;
-    padding: 16px 8px 8px 0;
-  }
-
-  .volume-chart-header {
-    flex-direction: column;
-    gap: 12px;
-    align-items: flex-start;
-  }
-}
diff --git a/frontend/src/components/dashboard/Charts/ShipmentVolumeChart/ShipmentVolumeChart.test.tsx b/frontend/src/components/dashboard/Charts/ShipmentVolumeChart/ShipmentVolumeChart.test.tsx
index 2df5565..47c169c 100644
--- a/frontend/src/components/dashboard/Charts/ShipmentVolumeChart/ShipmentVolumeChart.test.tsx
+++ b/frontend/src/components/dashboard/Charts/ShipmentVolumeChart/ShipmentVolumeChart.test.tsx
@@ -17,7 +17,8 @@ if (typeof window !== 'undefined' && !window.ResizeObserver) {
 describe('ShipmentVolumeChart', () => {
   it('renders without errors', () => {
     const { container } = render(<ShipmentVolumeChart />);
-    expect(container.querySelector('.volume-chart-section')).not.toBeNull();
+    // Component renders a top-level div with padding
+    expect(container.firstChild).toBeInTheDocument();
   });
 
   it('displays the section title', () => {
@@ -32,28 +33,32 @@ describe('ShipmentVolumeChart', () => {
     expect(screen.getByText('90D')).toBeInTheDocument();
   });
 
-  it('defaults to 30D active', () => {
+  it('defaults to 30D active (highlighted with accent color)', () => {
     render(<ShipmentVolumeChart />);
-    expect(screen.getByText('30D')).toHaveClass('active');
+    const btn30 = screen.getByText('30D');
+    // Active button has bg-accent-blue class applied
+    expect(btn30.className).toContain('bg-accent-blue');
   });
 
   it('switches active range when toggle buttons are clicked', () => {
     render(<ShipmentVolumeChart />);
 
     const btn7 = screen.getByText('7D');
+    const btn30 = screen.getByText('30D');
+    const btn90 = screen.getByText('90D');
+
     fireEvent.click(btn7);
-    expect(btn7).toHaveClass('active');
-    expect(screen.getByText('30D')).not.toHaveClass('active');
+    expect(btn7.className).toContain('bg-accent-blue');
+    expect(btn30.className).not.toContain('bg-accent-blue');
 
-    const btn90 = screen.getByText('90D');
     fireEvent.click(btn90);
-    expect(btn90).toHaveClass('active');
-    expect(btn7).not.toHaveClass('active');
+    expect(btn90.className).toContain('bg-accent-blue');
+    expect(btn7.className).not.toContain('bg-accent-blue');
   });
 
   it('accepts custom data via props', () => {
     const customData = generateMockData(10);
     const { container } = render(<ShipmentVolumeChart data={customData} />);
-    expect(container.querySelector('.volume-chart-section')).not.toBeNull();
+    expect(container.firstChild).toBeInTheDocument();
   });
 });
diff --git a/frontend/src/components/dashboard/Charts/ShipmentVolumeChart/ShipmentVolumeChart.tsx b/frontend/src/components/dashboard/Charts/ShipmentVolumeChart/ShipmentVolumeChart.tsx
index 085a890..7334c11 100644
--- a/frontend/src/components/dashboard/Charts/ShipmentVolumeChart/ShipmentVolumeChart.tsx
+++ b/frontend/src/components/dashboard/Charts/ShipmentVolumeChart/ShipmentVolumeChart.tsx
@@ -1,17 +1,10 @@
 import { useState } from 'react';
 import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
+  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
 } from 'recharts';
 import { BarChart3 } from 'lucide-react';
 import { MOCK_VOLUME_DATA } from './mockVolumeData';
 import type { DailyVolume } from './mockVolumeData';
-import './ShipmentVolumeChart.css';
 
 type Range = 7 | 30 | 90;
 
@@ -27,22 +20,17 @@ interface CustomTooltipProps {
 
 function CustomTooltip({ active, payload, label }: CustomTooltipProps) {
   if (!active || !payload?.length) return null;
-
   return (
-    <div className="volume-tooltip">
-      <div className="volume-tooltip-label">{label}</div>
-      <div className="volume-tooltip-value">
-        {payload[0].value} shipments
-      </div>
+    <div className="bg-[#1a1f2e] border border-border rounded-lg px-3.5 py-2.5">
+      <div className="text-text-secondary text-[11px] font-semibold uppercase mb-1">{label}</div>
+      <div className="text-white text-sm font-bold">{payload[0].value} shipments</div>
     </div>
   );
 }
 
 export default function ShipmentVolumeChart({ data = MOCK_VOLUME_DATA }: ShipmentVolumeChartProps) {
   const [activeRange, setActiveRange] = useState<Range>(30);
-
   const chartData = data.slice(-activeRange);
-
   const ranges: { value: Range; label: string }[] = [
     { value: 7, label: '7D' },
     { value: 30, label: '30D' },
@@ -50,18 +38,27 @@ export default function ShipmentVolumeChart({ data = MOCK_VOLUME_DATA }: Shipmen
   ];
 
   return (
-    <div className="volume-chart-section">
-      <div className="volume-chart-header">
-        <h2 className="volume-chart-title">
-          <BarChart3 size={18} />
+    <div className="p-0">
+      {/* Header */}
+      <div className="px-6 py-5 border-b border-border flex justify-between items-center md:flex-col md:gap-3 md:items-start">
+        <h2 className="text-base font-bold flex items-center gap-2.5">
+          <BarChart3 size={18} className="text-accent-blue" />
           Shipment Volume
         </h2>
-        <div className="range-toggle" role="group" aria-label="Time range">
+        <div
+          className="flex gap-1 bg-[#1a1f2e] rounded-lg p-[3px]"
+          role="group"
+          aria-label="Time range"
+        >
           {ranges.map(r => (
             <button
               key={r.value}
               type="button"
-              className={activeRange === r.value ? 'active' : ''}
+              className={`border-none text-xs font-semibold px-3 py-1.5 rounded-md cursor-pointer transition-all ${
+                activeRange === r.value
+                  ? 'bg-accent-blue text-white'
+                  : 'bg-transparent text-text-secondary hover:text-white'
+              }`}
               onClick={() => setActiveRange(r.value)}
             >
               {r.label}
@@ -70,14 +67,11 @@ export default function ShipmentVolumeChart({ data = MOCK_VOLUME_DATA }: Shipmen
         </div>
       </div>
 
-      <div className="volume-chart-body">
+      {/* Chart body */}
+      <div className="pt-5 pr-4 pb-3 pl-0 h-[300px] md:h-[220px] md:pt-4 md:pr-2 md:pb-2">
         <ResponsiveContainer width="100%" height="100%">
           <BarChart data={chartData} margin={{ top: 4, right: 4, bottom: 0, left: 0 }}>
-            <CartesianGrid
-              vertical={false}
-              stroke="#1e2433"
-              strokeDasharray="3 3"
-            />
+            <CartesianGrid vertical={false} stroke="#1e2433" strokeDasharray="3 3" />
             <XAxis
               dataKey="date"
               tick={{ fill: '#8a8f9d', fontSize: 11 }}
@@ -91,16 +85,8 @@ export default function ShipmentVolumeChart({ data = MOCK_VOLUME_DATA }: Shipmen
               axisLine={false}
               width={32}
             />
-            <Tooltip
-              content={<CustomTooltip />}
-              cursor={{ fill: 'rgba(59, 130, 246, 0.08)' }}
-            />
-            <Bar
-              dataKey="count"
-              fill="#3b82f6"
-              radius={[4, 4, 0, 0]}
-              maxBarSize={activeRange <= 7 ? 48 : 24}
-            />
+            <Tooltip content={<CustomTooltip />} cursor={{ fill: 'rgba(59, 130, 246, 0.08)' }} />
+            <Bar dataKey="count" fill="#3b82f6" radius={[4, 4, 0, 0]} maxBarSize={activeRange <= 7 ? 48 : 24} />
           </BarChart>
         </ResponsiveContainer>
       </div>
diff --git a/frontend/src/components/dashboard/Charts/ShipmentVolumeChart/index.ts b/frontend/src/components/dashboard/Charts/ShipmentVolumeChart/index.ts
new file mode 100644
index 0000000..3f71977
--- /dev/null
+++ b/frontend/src/components/dashboard/Charts/ShipmentVolumeChart/index.ts
@@ -0,0 +1 @@
+export { default } from './ShipmentVolumeChart';
diff --git a/frontend/src/components/dashboard/StatCard/StatCard.tsx b/frontend/src/components/dashboard/StatCard/StatCard.tsx
new file mode 100644
index 0000000..1b87713
--- /dev/null
+++ b/frontend/src/components/dashboard/StatCard/StatCard.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { ArrowUpRight, ArrowDownRight } from 'lucide-react';
+
+export interface StatCardProps {
+  label: string;
+  value: string;
+  trend: string;
+  trendType: 'up' | 'down' | 'neutral';
+  icon: React.ReactNode;
+}
+
+const StatCard: React.FC<StatCardProps> = ({ label, value, trend, trendType, icon }) => {
+  const trendColors = {
+    up: 'text-accent-green',
+    down: 'text-accent-red',
+    neutral: 'text-accent-blue',
+  };
+
+  return (
+    <div className="relative bg-background-card border border-border rounded-2xl p-5 overflow-hidden after:absolute after:top-0 after:right-0 after:w-24 after:h-24 after:bg-[radial-gradient(circle_at_top_right,rgba(59,130,246,0.1),transparent_70%)] after:pointer-events-none">
+      {/* Header */}
+      <div className="flex justify-between items-start mb-5 relative z-10">
+        <div className="w-10 h-10 rounded-[10px] bg-background-elevated flex items-center justify-center text-accent-blue">
+          {icon}
+        </div>
+        <div className={`text-xs font-semibold flex items-center gap-1 ${trendColors[trendType]}`}>
+          {trendType === 'up' && <ArrowUpRight size={14} />}
+          {trendType === 'down' && <ArrowDownRight size={14} />}
+          {trend}
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="relative z-10">
+        <div className="text-text-secondary text-xs font-semibold uppercase mb-2">
+          {label}
+        </div>
+        <div className="text-[32px] font-bold leading-none">
+          {value}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StatCard;
diff --git a/frontend/src/components/dashboard/StatCard/index.ts b/frontend/src/components/dashboard/StatCard/index.ts
new file mode 100644
index 0000000..bc57ebe
--- /dev/null
+++ b/frontend/src/components/dashboard/StatCard/index.ts
@@ -0,0 +1,2 @@
+export { default } from './StatCard';
+export type { StatCardProps } from './StatCard';
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
new file mode 100644
index 0000000..b99c40a
--- /dev/null
+++ b/frontend/src/components/index.ts
@@ -0,0 +1,49 @@
+// Common
+export { default as EmptyState } from './common/EmptyState';
+export type { EmptyStateProps, EmptyStateCTA } from './common/EmptyState';
+
+export { default as DataTable } from './common/DataTable';
+export type { DataTableProps, ColumnDef, PaginationConfig, DataTableEmptyState, SortDirection } from './common/DataTable';
+export { default as Pagination } from './common/Pagination';
+export type { PaginationProps } from './common/Pagination';
+export { default as Breadcrumb } from './common/Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItem } from './common/Breadcrumb';
+
+// Reusable UI primitives
+export { default as Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
+
+export { default as Card, CardHeader, CardBody, CardFooter } from './Card';
+export type { CardProps } from './Card';
+
+export { default as Navbar } from './Navbar';
+
+// Auth
+export { default as ProtectedRoute } from './auth/ProtectedRoute';
+export { WalletConnectButton } from './auth/WalletConnectButton';
+export type { WalletConnectButtonProps } from './auth/WalletConnectButton';
+
+// Layout
+export { default as DashboardLayout } from './layout/DashboardLayout';
+export { default as TopHeader } from './layout/TopHeader';
+export type { TopHeaderProps } from './layout/TopHeader';
+export { default as Sidebar } from './layout/Sidebar';
+export type { SidebarProps } from './layout/Sidebar';
+
+// Notifications
+export { NotificationDropdown } from './notifications/NotificationDropdown';
+export type { NotificationItem } from './notifications/NotificationDropdown';
+
+// Dashboard
+export { default as StatCard } from './dashboard/StatCard';
+export type { StatCardProps } from './dashboard/StatCard';
+export { default as DeliverySuccessChart } from './dashboard/Charts/DeliverySuccessChart';
+export { default as ShipmentVolumeChart } from './dashboard/Charts/ShipmentVolumeChart';
+
+// Shipment
+export { default as TrackingTimeline } from './shipment/TrackingTimeline';
+export type { TrackingTimelineProps, Milestone } from './shipment/TrackingTimeline';
+export { default as StatusUpdate } from './shipment/StatusUpdate';
+export type { StatusUpdateProps, ShipmentMilestone } from './shipment/StatusUpdate';
+export { default as DeliveryConfirmation } from './shipment/DeliveryConfirmation/DeliveryConfirmation';
+export type { DeliveryConfirmationProps } from './shipment/DeliveryConfirmation/DeliveryConfirmation';
diff --git a/frontend/src/components/layout/DashboardLayout.css b/frontend/src/components/layout/DashboardLayout.css
index 2e1a2e0..1578a59 100644
--- a/frontend/src/components/layout/DashboardLayout.css
+++ b/frontend/src/components/layout/DashboardLayout.css
@@ -38,7 +38,7 @@
     font-size: 20px;
     font-weight: 700;
     margin-bottom: 48px;
-    color: #3b82f6;
+    color: #62ffff;
 }
 
 .sidebar-section {
@@ -78,17 +78,19 @@
 }
 
 .sidebar-item:hover {
-    background-color: #1a1f2e;
+    background-color: rgba(19, 186, 186, 0.1);
     color: var(--text-primary);
 }
 
 .sidebar-item.active {
-    background-color: #1a1f2e;
+    background-color: rgba(19, 186, 186, 0.15);
     color: var(--text-primary);
+    border-left: 3px solid #62ffff;
+    padding-left: 9px;
 }
 
 .sidebar-item.active svg {
-    color: var(--accent-blue);
+    color: #62ffff;
 }
 
 .sidebar-footer {
@@ -97,8 +99,8 @@
 }
 
 .node-status {
-    background-color: #121620;
-    border: 1px solid var(--border-color);
+    background-color: rgba(19, 186, 186, 0.1);
+    border: 1px solid rgba(98, 255, 255, 0.3);
     border-radius: 12px;
     padding: 12px;
     display: flex;
@@ -109,12 +111,12 @@
 .node-icon {
     width: 36px;
     height: 36px;
-    background-color: #1a1f2e;
+    background-color: rgba(19, 186, 186, 0.2);
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--text-secondary);
+    color: #62ffff;
 }
 
 .node-info h4 {
@@ -125,7 +127,7 @@
 
 .node-info p {
     font-size: 11px;
-    color: var(--accent-green);
+    color: #62ffff;
     display: flex;
     align-items: center;
     gap: 4px;
@@ -134,9 +136,9 @@
 .status-dot {
     width: 6px;
     height: 6px;
-    background-color: var(--accent-green);
+    background-color: #62ffff;
     border-radius: 50%;
-    box-shadow: 0 0 8px var(--accent-green);
+    box-shadow: 0 0 8px #62ffff;
 }
 
 /* Main Content Area */
@@ -204,8 +206,8 @@
 }
 
 .icon-button:hover {
-    background-color: #1a1f2e;
-    color: var(--text-primary);
+    background-color: rgba(19, 186, 186, 0.1);
+    color: #62ffff;
 }
 
 .user-profile {
diff --git a/frontend/src/components/layout/DashboardLayout.tsx b/frontend/src/components/layout/DashboardLayout.tsx
index 50231ed..96f4e4e 100644
--- a/frontend/src/components/layout/DashboardLayout.tsx
+++ b/frontend/src/components/layout/DashboardLayout.tsx
@@ -9,10 +9,12 @@ import {
   Settings,
   HelpCircle,
   ShieldCheck,
-  Cpu,
   X,
+  CreditCard,
+  Bell,
+  User,
+  History,
 } from 'lucide-react';
-import './DashboardLayout.css';
 import TopHeader from './TopHeader/TopHeader';
 
 const DashboardLayout: React.FC = () => {
@@ -23,12 +25,16 @@ const DashboardLayout: React.FC = () => {
   const mainMenu = [
     { name: 'Dashboard', icon: <LayoutDashboard size={18} />, path: '/dashboard' },
     { name: 'Shipments', icon: <Package size={18} />, path: '/dashboard/shipments' },
+    { name: 'Shipment History', icon: <History size={18} />, path: '/dashboard/shipments/history' },
     { name: 'Blockchain Ledger', icon: <Database size={18} />, path: '/dashboard/blockchain-ledger' },
     { name: 'Settlements', icon: <Wallet size={18} />, path: '/dashboard/settlements' },
+    { name: 'Payments', icon: <CreditCard size={18} />, path: '/dashboard/payments' },
     { name: 'Analytics', icon: <BarChart3 size={18} />, path: '/dashboard/analytics' },
+    { name: 'Notifications', icon: <Bell size={18} />, path: '/dashboard/notifications' },
   ];
 
   const systemMenu = [
+    { name: 'Profile', icon: <User size={18} />, path: '/dashboard/profile' },
     { name: 'Settings', icon: <Settings size={18} />, path: '/dashboard/settings' },
     { name: 'Help Center', icon: <HelpCircle size={18} />, path: '/dashboard/help-center' },
   ];
@@ -37,67 +43,90 @@ const DashboardLayout: React.FC = () => {
   const closeSidebar = () => setIsSidebarOpen(false);
 
   return (
-    <div className={`dashboard-page ${isSidebarOpen ? 'sidebar-open' : ''}`}>
+    <div className="min-h-screen bg-[#07090d] text-white font-sans flex">
       {/* Mobile Overlay */}
-      {isSidebarOpen && <div className="mobile-overlay" onClick={closeSidebar}></div>}
+      {isSidebarOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 backdrop-blur-sm z-90 lg:hidden"
+          onClick={closeSidebar}
+        />
+      )}
 
       {/* Sidebar */}
-      <aside className={`sidebar ${isSidebarOpen ? 'open' : ''}`}>
-        <div className="sidebar-logo">
-          <Cpu fill="currentColor" size={24} />
+      <aside
+        className={`
+          w-65 bg-[#0b0e14] border-r border-[#1e2433] flex flex-col shrink-0 p-6
+          lg:relative lg:translate-x-0
+          fixed top-0 left-0 h-full z-100 transition-transform duration-300 ease-in-out
+          ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
+        `}
+      >
+        <div className="flex items-center gap-3 text-xl font-bold mb-12 text-[#62ffff]">
+          <img src="/images/logo.svg" alt="Navin Logo" className="w-8 h-8" />
           <span>NAVIN</span>
-          <button className="mobile-close" onClick={closeSidebar}>
+          <button
+            className="ml-auto flex lg:hidden bg-transparent border-none text-slate-400 cursor-pointer"
+            onClick={closeSidebar}
+          >
             <X size={20} />
           </button>
         </div>
 
-        <div className="sidebar-section">
-          <h3>Main Menu</h3>
-          <div className="sidebar-menu">
-            {mainMenu.map((item) => (
-              <button
-                key={item.name}
-                className={`sidebar-item ${location.pathname === item.path ? 'active' : ''}`}
-                onClick={() => {
-                  navigate(item.path);
-                  closeSidebar();
-                }}
-              >
-                {item.icon}
-                {item.name}
-              </button>
-            ))}
+        <div className="mb-8">
+          <h3 className="text-[11px] font-semibold uppercase text-[#8a8f9d] tracking-[0.05em] mb-4">Main Menu</h3>
+          <div className="flex flex-col gap-1">
+            {mainMenu.map((item) => {
+              const isActive = location.pathname === item.path;
+              return (
+                <button
+                  key={item.name}
+                  className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium cursor-pointer transition-all border-none w-full text-left
+                    ${isActive
+                      ? 'bg-[rgba(19,186,186,0.15)] text-white border-l-[3px] border-l-[#62ffff] pl-2.25 [&_svg]:text-[#62ffff]'
+                      : 'bg-transparent text-[#8a8f9d] hover:bg-[rgba(19,186,186,0.1)] hover:text-white'
+                    }`}
+                  onClick={() => { navigate(item.path); closeSidebar(); }}
+                >
+                  {item.icon}
+                  {item.name}
+                </button>
+              );
+            })}
           </div>
         </div>
 
-        <div className="sidebar-section">
-          <h3>System</h3>
-          <div className="sidebar-menu">
-            {systemMenu.map((item) => (
-              <button
-                key={item.name}
-                className={`sidebar-item ${location.pathname === item.path ? 'active' : ''}`}
-                onClick={() => {
-                  navigate(item.path);
-                  closeSidebar();
-                }}
-              >
-                {item.icon}
-                {item.name}
-              </button>
-            ))}
+        <div className="mb-8">
+          <h3 className="text-[11px] font-semibold uppercase text-[#8a8f9d] tracking-[0.05em] mb-4">System</h3>
+          <div className="flex flex-col gap-1">
+            {systemMenu.map((item) => {
+              const isActive = location.pathname === item.path;
+              return (
+                <button
+                  key={item.name}
+                  className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium cursor-pointer transition-all border-none w-full text-left
+                    ${isActive
+                      ? 'bg-[rgba(19,186,186,0.15)] text-white border-l-[3px] border-l-[#62ffff] pl-2.25 [&_svg]:text-[#62ffff]'
+                      : 'bg-transparent text-[#8a8f9d] hover:bg-[rgba(19,186,186,0.1)] hover:text-white'
+                    }`}
+                  onClick={() => { navigate(item.path); closeSidebar(); }}
+                >
+                  {item.icon}
+                  {item.name}
+                </button>
+              );
+            })}
           </div>
         </div>
 
-        <div className="sidebar-footer">
-          <div className="node-status">
-            <div className="node-icon">
+        <div className="mt-auto pt-6">
+          <div className="bg-[rgba(19,186,186,0.1)] border border-[rgba(98,255,255,0.3)] rounded-xl p-3 flex items-center gap-3">
+            <div className="w-9 h-9 bg-[rgba(19,186,186,0.2)] rounded-[10px] flex items-center justify-center text-[#62ffff]">
               <ShieldCheck size={20} />
             </div>
-            <div className="node-info">
-              <h4>Enterprise Node</h4>
-              <p>
-                <span className="status-dot"></span>
+            <div>
+              <h4 className="text-[13px] font-semibold mb-0.5">Enterprise Node</h4>
+              <p className="text-[11px] text-[#62ffff] flex items-center gap-1 m-0">
+                <span className="w-1.5 h-1.5 bg-[#62ffff] rounded-full shadow-[0_0_8px_#62ffff]" />
                 Syncing: Block 18.2M
               </p>
             </div>
@@ -106,10 +135,9 @@ const DashboardLayout: React.FC = () => {
       </aside>
 
       {/* Main Content */}
-      <div className="main-wrapper">
+      <div className="flex-1 flex flex-col overflow-y-auto">
         <TopHeader toggleSidebar={toggleSidebar} />
-
-        <main className="dashboard-content">
+        <main className="p-8 lg:p-8">
           <Outlet />
         </main>
       </div>
diff --git a/frontend/src/components/layout/Sidebar/Sidebar.css b/frontend/src/components/layout/Sidebar/Sidebar.css
new file mode 100644
index 0000000..2b60825
--- /dev/null
+++ b/frontend/src/components/layout/Sidebar/Sidebar.css
@@ -0,0 +1,193 @@
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 256px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-right: 1px solid #1e293b;
+  display: flex;
+  flex-direction: column;
+  z-index: 50;
+  transition:
+    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.3s ease;
+}
+
+.sidebar.collapsed {
+  width: 80px;
+}
+
+.sidebar-header {
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin-top: 16px;
+}
+
+.sidebar:not(.collapsed) .sidebar-header {
+  justify-content: flex-start;
+  padding: 0 24px;
+}
+
+.logo-btn {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.logo-text {
+  color: white;
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+}
+
+.rocket-box {
+  width: 44px;
+  height: 44px;
+  background-color: #3b82f6;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px 0;
+  align-items: center;
+}
+
+.sidebar:not(.collapsed) .sidebar-nav {
+  align-items: stretch;
+  padding: 24px;
+}
+
+.nav-item {
+  width: 42px;
+  height: 40px;
+  border-radius: 8px;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s ease;
+  color: #94a3b8;
+  padding: 0;
+}
+
+.sidebar:not(.collapsed) .nav-item {
+  width: 100%;
+  justify-content: flex-start;
+  padding: 0 16px;
+  gap: 12px;
+}
+
+.nav-item:hover {
+  background-color: rgba(255, 255, 255, 0.03);
+  color: #94a3b8;
+}
+
+.nav-item.active {
+  background-color: rgba(255, 255, 255, 0.06);
+  /* color: #3b82f6; */
+}
+
+/* The vertical blue pill on the left side */
+.nav-item.active::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 30px; /* Takes roughly half the size */
+  background-color: #3b82f6;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.nav-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.nav-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #cbd5e1;
+}
+
+.sidebar-footer {
+  margin-top: auto;
+  padding: 24px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px; /* Large gap before Avatar */
+}
+
+.sidebar:not(.collapsed) .sidebar-footer {
+  align-items: stretch;
+  padding: 24px;
+}
+
+.help-btn {
+  margin-bottom: auto;
+}
+
+.avatar-btn {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  overflow: hidden;
+  border: 2px solid #1e293b;
+  transition: border-color 0.2s;
+  display: flex;
+  align-items: center;
+}
+
+.sidebar:not(.collapsed) .avatar-btn {
+  width: 100%;
+  padding: 8px 16px;
+  border-radius: 12px;
+  gap: 12px;
+}
+
+.sidebar:not(.collapsed) .user-avatar-img {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+}
+
+.avatar-btn:hover {
+  border-color: #64748b;
+}
+
+.user-avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Mobile State: Slide-out Drawer */
+@media (max-width: 768px) {
+  .sidebar {
+    display: none; /* Mobile uses its own inline header + bottom nav */
+  }
+}
diff --git a/frontend/src/components/layout/Sidebar/Sidebar.tsx b/frontend/src/components/layout/Sidebar/Sidebar.tsx
new file mode 100644
index 0000000..4d2221e
--- /dev/null
+++ b/frontend/src/components/layout/Sidebar/Sidebar.tsx
@@ -0,0 +1,131 @@
+import React from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import {
+  Rocket,
+  LayoutGrid,
+  Truck,
+  Users,
+  BarChart2,
+  Settings,
+  HelpCircle,
+} from "lucide-react";
+
+export interface SidebarProps {
+  isOpen: boolean;
+  isCollapsed: boolean;
+  onClose: () => void;
+  toggleCollapse: () => void;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({
+  isOpen,
+  isCollapsed,
+  onClose,
+  toggleCollapse,
+}) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const mainNav = [
+    {
+      name: "Dashboard",
+      icon: <LayoutGrid size={22} className="nav-icon-svg" />,
+      path: "/dashboard",
+    },
+    {
+      name: "Shipments",
+      icon: <Truck size={22} className="nav-icon-svg" />,
+      path: "/dashboard/shipments",
+    },
+    {
+      name: "Team",
+      icon: <Users size={22} className="nav-icon-svg" />,
+      path: "/dashboard/team",
+    },
+    {
+      name: "Analytics",
+      icon: <BarChart2 size={22} className="nav-icon-svg" />,
+      path: "/dashboard/analytics",
+    },
+    {
+      name: "Settings",
+      icon: <Settings size={22} className="nav-icon-svg" />,
+      path: "/dashboard/settings",
+    },
+  ];
+
+  return (
+    <aside
+      className={`sidebar ${isOpen ? "open" : ""} ${isCollapsed ? "collapsed" : ""}`}
+    >
+      <div className="sidebar-header">
+        <div
+          className="logo-btn"
+          onClick={toggleCollapse}
+          title="Toggle Sidebar"
+        >
+          <div className="rocket-box">
+            <Rocket size={20} color="#ffffff" strokeWidth={2.5} />
+          </div>
+          {!isCollapsed && <span className="logo-text">Navin</span>}
+        </div>
+      </div>
+
+      <nav className="sidebar-nav primary-nav">
+        {mainNav.map((item) => {
+          const isActive =
+            location.pathname === item.path ||
+            (item.path === "/dashboard" && location.pathname === "/");
+          return (
+            <button
+              key={item.name}
+              className={`nav-item ${isActive ? "active" : ""}`}
+              onClick={() => {
+                navigate(item.path);
+                onClose();
+              }}
+              title={item.name}
+            >
+              <div className="nav-icon-wrapper">{item.icon}</div>
+              {!isCollapsed && <span className="nav-label">{item.name}</span>}
+            </button>
+          );
+        })}
+      </nav>
+
+      <div className="sidebar-footer">
+        <button
+          className="nav-item help-btn"
+          onClick={() => {
+            navigate("/help");
+            onClose();
+          }}
+          title="Help Center"
+        >
+          <div className="nav-icon-wrapper">
+            <HelpCircle size={22} className="nav-icon-svg" />
+          </div>
+          {!isCollapsed && <span className="nav-label">Help Center</span>}
+        </button>
+
+        <button
+          className="avatar-btn"
+          title="Profile"
+          onClick={() => {
+            navigate("/dashboard/profile");
+            onClose();
+          }}
+        >
+          <img
+            src="https://api.dicebear.com/7.x/avataaars/svg?seed=Alex&backgroundColor=ffcba4"
+            alt="User Profile"
+            className="user-avatar-img"
+          />
+          {!isCollapsed && <span className="nav-label">Profile</span>}
+        </button>
+      </div>
+    </aside>
+  );
+};
+
+export default Sidebar;
\ No newline at end of file
diff --git a/frontend/src/components/layout/Sidebar/index.ts b/frontend/src/components/layout/Sidebar/index.ts
new file mode 100644
index 0000000..b6eae55
--- /dev/null
+++ b/frontend/src/components/layout/Sidebar/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Sidebar';
+export type { SidebarProps } from './Sidebar';
diff --git a/frontend/src/components/layout/TopHeader/TopHeader.css b/frontend/src/components/layout/TopHeader/TopHeader.css
index c6dcfc8..812ffef 100644
--- a/frontend/src/components/layout/TopHeader/TopHeader.css
+++ b/frontend/src/components/layout/TopHeader/TopHeader.css
@@ -1,48 +1,57 @@
+.top-header-wrapper {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  width: 100%;
+  background-color: var(--bg-dark, #14171e);
+}
+
 .top-header {
   width: 100%;
-  height: 64px;
+  max-width: 1080px;
+  margin: 0 auto;
+  height: 72px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 0 32px;
-  background-color: var(--bg-dark, #07090d);
-  border-bottom: 1px solid #1E293B;
-  position: sticky;
-  top: 0;
-  z-index: 20;
+  padding: 0 16px;
+  background-color: transparent;
+  border-bottom: 1px solid #1e293b;
 }
 
 .top-header-left {
   display: flex;
-  flex-direction: row; /* For aligning mobile-toggle and title container closely */
   align-items: center;
-  gap: 12px;
+  width: 200px; /* Balance the center */
 }
 
-.title-container {
+.top-header-center {
+  flex: 1;
   display: flex;
-  flex-direction: column;
   justify-content: center;
-  width: 576px;
-  height: 36px;
-  background-color: inherit;
 }
 
 .header-search {
   display: flex;
   align-items: center;
-  gap: 8px;
-  width: 100%;
-  height: 100%;
-  padding: 0 12px;
-  border-radius: 8px;
-  background-color: #1E293B;
-  border: 1px solid #334155;
+  gap: 12px;
+  width: 480px;
+  max-width: 100%;
+  height: 40px;
+  padding: 0 16px;
+  border-radius: 10px;
+  background-color: #111624;
+  border: 1px solid #1e293b;
+  transition: border-color 0.2s;
+}
+
+.header-search:focus-within {
+  border-color: #4f46e5;
 }
 
 .header-search-icon {
-  color: #94a3b8;
+  color: #64748b;
   flex-shrink: 0;
 }
 
@@ -52,220 +61,59 @@
   outline: none;
   background: transparent;
   color: #ffffff;
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .header-search-input::placeholder {
-  color: #94a3b8;
+  color: #64748b;
 }
 
 .top-header-right {
   display: flex;
   align-items: center;
-  gap: 16px;
-}
-
-.right-icons {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.icon-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  width: 34px;
-  height: 34px;
-  border-radius: 8px;
-  padding: 8px;
-  background-color: var(--bg-dark, #07090d);
-  color: #ffffff;
-  border: none;
-  cursor: pointer;
-  position: relative;
-  transition: all 0.2s ease;
-}
-
-.icon-box:hover {
-  background-color: #1e2433; /* Slightly lighter than bg-dark */
-}
-
-.notification-badge {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  background-color: #ef4444; /* red */
-  color: white;
-  font-size: 10px;
-  font-weight: 600;
-  height: 16px;
-  min-width: 16px;
-  padding: 0 4px;
-  border-radius: 9999px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid #1E293B; /* match header bg so badge pops out cleanly */
-}
-
-.top-bar-divider {
-  width: 1px;
-  height: 24px;
-  background-color: #334155;
-  margin: 0 8px;
+  justify-content: flex-end;
+  width: 200px; /* Balance the center */
 }
 
-.user-profile-container {
+.notification-bell-container {
   position: relative;
-}
-
-.user-profile-trigger {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 8px;
-  transition: all 0.2s ease;
-}
-
-.user-profile-trigger:hover {
-  background-color: rgba(255, 255, 255, 0.05); /* subtle hover */
-}
-
-.user-text {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  text-align: right;
-}
-
-.user-name {
-  font-size: 13px;
-  font-weight: 600;
-  color: #ffffff;
-  line-height: 1.2;
-  margin-bottom: 2px;
-}
-
-.user-role {
-  font-size: 11px;
-  color: #94a3b8;
-  line-height: 1.2;
-}
-
-.avatar-wrapper {
+  width: 40px;
+  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
-}
-
-.user-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.user-dropdown-menu {
-  position: absolute;
-  top: calc(100% + 12px);
-  right: 0;
-  width: 200px;
-  background-color: #0f121a; /* match dashboard card bg */
-  border: 1px solid #1e2433;
   border-radius: 8px;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
-  padding: 8px 0;
-  z-index: 50;
-  animation: dropdownFadeIn 0.2s ease-out forwards;
-}
-
-@keyframes dropdownFadeIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.dropdown-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  padding: 10px 16px;
-  background: none;
-  border: none;
   cursor: pointer;
-  font-size: 14px;
-  color: #e2e8f0;
-  text-align: left;
-  transition: background-color 0.2s ease;
-}
-
-.dropdown-item:hover {
-  background-color: #1a1f2e;
-}
-
-.dropdown-icon {
   color: #94a3b8;
+  transition: all 0.2s;
 }
 
-.dropdown-item.text-danger {
-  color: #ef4444;
-}
-
-.dropdown-item.text-danger .dropdown-icon {
-  color: #ef4444;
+.notification-bell-container:hover {
+  background-color: #1e293b;
+  color: #ffffff;
 }
 
-.dropdown-divider {
-  height: 1px;
-  background-color: #1e2433;
-  margin: 8px 0;
+.notification-dot {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  width: 6px;
+  height: 6px;
+  background-color: #ef4444;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px #0f172a; /* Match background so it cuts out */
 }
 
 .mobile-toggle {
   display: none;
+  background: transparent;
+  border: none;
+  color: #fff;
+  cursor: pointer;
 }
 
-/* Responsive Styles */
-@media (max-width: 1024px) {
-  .top-header {
-    padding: 0 16px;
-  }
-  
-  .mobile-toggle {
-    display: flex;
-  }
-
-  .desktop-only {
-    display: none !important;
-  }
-
-  .title-container {
-    width: auto;
-  }
-
-  .header-search-input {
-    font-size: 12px;
-  }
-
-  .top-bar-divider {
-    display: none;
+@media (max-width: 768px) {
+  .top-header-wrapper {
+    display: none; /* Mobile uses its own inline brand header */
   }
 }
diff --git a/frontend/src/components/layout/TopHeader/TopHeader.tsx b/frontend/src/components/layout/TopHeader/TopHeader.tsx
index dc69332..682463b 100644
--- a/frontend/src/components/layout/TopHeader/TopHeader.tsx
+++ b/frontend/src/components/layout/TopHeader/TopHeader.tsx
@@ -1,109 +1,55 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Menu, Bell, LayoutGrid, User, Settings as SettingsIcon, LogOut, Search } from 'lucide-react';
-import './TopHeader.css';
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { Menu, Search, User } from "lucide-react";
+import { NotificationDropdown } from "../../notifications/NotificationDropdown/NotificationDropdown";
 
-interface TopHeaderProps {
+export interface TopHeaderProps {
   toggleSidebar: () => void;
 }
 
 const TopHeader: React.FC<TopHeaderProps> = ({ toggleSidebar }) => {
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsDropdownOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
+  const navigate = useNavigate();
 
   return (
-    <header className="top-header">
-      <div className="top-header-left">
-        <button className="mobile-toggle icon-box" onClick={toggleSidebar} aria-label="Toggle Sidebar">
-          <Menu size={18} />
-        </button>
-        <div className="title-container">
-          <label className="header-search" aria-label="Search">
-            <Search size={16} className="header-search-icon" />
+    <div className="sticky top-0 z-20 w-full bg-[#14171e]">
+      <header className="w-full max-w-270 mx-auto h-18 flex flex-row items-center justify-between px-4 bg-transparent border-b border-slate-800">
+        {/* Left */}
+        <div className="flex items-center w-50">
+          <button
+            className="lg:hidden flex items-center justify-center bg-transparent border-none text-white cursor-pointer"
+            onClick={toggleSidebar}
+            aria-label="Toggle Sidebar"
+          >
+            <Menu size={18} />
+          </button>
+        </div>
+
+        {/* Center */}
+        <div className="flex-1 flex justify-center">
+          <label className="flex items-center gap-3 w-120 max-w-full h-10 px-4 rounded-[10px] bg-[#111624] border border-slate-800 transition-colors focus-within:border-indigo-500 cursor-text">
+            <Search size={16} className="text-slate-500 shrink-0" />
             <input
               type="text"
-              className="header-search-input"
-              placeholder="Search shipments, wallet addresses, or harshes..."
+              className="w-full border-none outline-none bg-transparent text-white text-sm placeholder:text-slate-500"
+              placeholder="Search shipment ID..."
             />
           </label>
         </div>
-      </div>
 
-      <div className="top-header-right">
-        <div className="right-icons">
-          <button className="icon-box" aria-label="Notifications">
-            <Bell size={18} />
-            <span className="notification-badge">3</span>
-          </button>
-          
-          <button className="icon-box" aria-label="Apps">
-            <LayoutGrid size={18} />
-          </button>
-        </div>
-
-        <div className="top-bar-divider"></div>
-
-        <div className="user-profile-container" ref={dropdownRef}>
-          <button 
-            className="user-profile-trigger" 
-            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-            aria-haspopup="true"
-            aria-expanded={isDropdownOpen}
+        {/* Right */}
+        <div className="flex items-center justify-end gap-3 w-50">
+          <NotificationDropdown />
+          <button
+            onClick={() => navigate("/dashboard/profile")}
+            className="w-9 h-9 rounded-full bg-[#1e2433] border border-slate-700 flex items-center justify-center text-slate-400 hover:text-white hover:border-[#62ffff] transition-colors cursor-pointer"
+            title="Profile"
           >
-            <div className="user-text desktop-only">
-              <span className="user-name">Alex Sterling</span>
-              <span className="user-role">Logistics Manager</span>
-            </div>
-            <div className="avatar-wrapper">
-              <img
-                src="https://ui-avatars.com/api/?name=Alex+Sterling&background=ffedd5&color=9a3412"
-                alt="Profile Avatar"
-                className="user-avatar"
-              />
-            </div>
+            <User size={18} />
           </button>
-
-          {isDropdownOpen && (
-            <div className="user-dropdown-menu">
-              <ul className="dropdown-list">
-                <li>
-                  <button className="dropdown-item">
-                    <User size={16} className="dropdown-icon" />
-                    <span>Profile</span>
-                  </button>
-                </li>
-                <li>
-                  <button className="dropdown-item">
-                    <SettingsIcon size={16} className="dropdown-icon" />
-                    <span>Settings</span>
-                  </button>
-                </li>
-                <li className="dropdown-divider"></li>
-                <li>
-                  <button className="dropdown-item text-danger">
-                    <LogOut size={16} className="dropdown-icon" />
-                    <span>Logout</span>
-                  </button>
-                </li>
-              </ul>
-            </div>
-          )}
         </div>
-      </div>
-    </header>
+      </header>
+    </div>
   );
 };
 
-export default TopHeader;
+export default TopHeader;
\ No newline at end of file
diff --git a/frontend/src/components/layout/TopHeader/index.ts b/frontend/src/components/layout/TopHeader/index.ts
new file mode 100644
index 0000000..f7fa88f
--- /dev/null
+++ b/frontend/src/components/layout/TopHeader/index.ts
@@ -0,0 +1,2 @@
+export { default } from './TopHeader';
+export type { TopHeaderProps } from './TopHeader';
diff --git a/frontend/src/components/notifications/NotificationDropdown/COMPONENT_STRUCTURE.md b/frontend/src/components/notifications/NotificationDropdown/COMPONENT_STRUCTURE.md
new file mode 100644
index 0000000..e78f5a2
--- /dev/null
+++ b/frontend/src/components/notifications/NotificationDropdown/COMPONENT_STRUCTURE.md
@@ -0,0 +1,112 @@
+# NotificationDropdown Component Structure
+
+## Component Hierarchy
+
+```
+NotificationDropdown
+├── Bell Button (icon-box)
+│   ├── Bell Icon (lucide-react)
+│   └── Badge (notification-badge) - shows unread count
+│
+└── Dropdown (notification-dropdown) - shown when open
+    ├── Header (notification-dropdown-header)
+    │   ├── Title: "Notifications"
+    │   └── Close Button (X icon)
+    │
+    ├── Notification List (notification-list)
+    │   └── Notification Items (5 items)
+    │       ├── Icon Wrapper
+    │       │   └── Type Icon (Package/DollarSign/AlertTriangle)
+    │       └── Content
+    │           ├── Message (truncated to 1 line)
+    │           └── Time Ago (e.g., "2h ago")
+    │
+    └── Footer (notification-dropdown-footer)
+        └── "View All Notifications" Button
+```
+
+## State Management
+
+```typescript
+const [isOpen, setIsOpen] = useState(false);
+const [notifications] = useState<Notification[]>(MOCK_NOTIFICATIONS);
+const dropdownRef = useRef<HTMLDivElement>(null);
+```
+
+## Event Handlers
+
+1. **handleToggle()** - Opens/closes dropdown on bell click
+2. **handleClickOutside()** - Closes dropdown when clicking outside
+3. **handleEscKey()** - Closes dropdown on ESC key press
+4. **handleViewAll()** - Navigates to full notifications page (placeholder)
+
+## Notification Interface
+
+```typescript
+interface Notification {
+  id: string;
+  type: 'shipment' | 'payment' | 'alert';
+  message: string;
+  timestamp: Date;
+  read: boolean;
+}
+```
+
+## Helper Functions
+
+1. **getTimeAgo(timestamp: Date): string**
+   - Converts timestamp to relative time format
+   - Returns: "Xm ago", "Xh ago", or "Xd ago"
+
+2. **getNotificationIcon(type: Notification['type'])**
+   - Returns appropriate icon component based on notification type
+   - Shipment: Package icon (blue)
+   - Payment: DollarSign icon (green)
+   - Alert: AlertTriangle icon (orange)
+
+## CSS Classes
+
+### Main Container
+- `.notification-dropdown-container` - Wrapper with relative positioning
+
+### Bell Button
+- `.notification-bell` - Bell icon button
+- `.notification-badge` - Red badge with unread count
+
+### Dropdown
+- `.notification-dropdown` - Main dropdown container
+- `.notification-dropdown-header` - Header with title and close button
+- `.notification-list` - Scrollable list container
+- `.notification-item` - Individual notification item
+- `.notification-item.unread` - Unread notification styling
+- `.notification-dropdown-footer` - Footer with "View All" button
+
+### Icons & Content
+- `.notification-icon-wrapper` - Icon container
+- `.notification-icon` - Base icon styling
+- `.notification-icon.shipment` - Blue shipment icon
+- `.notification-icon.payment` - Green payment icon
+- `.notification-icon.alert` - Orange alert icon
+- `.notification-content` - Message and time container
+- `.notification-message` - Truncated message text
+- `.notification-time` - Time ago text
+
+## Responsive Behavior
+
+### Desktop (> 768px)
+- Dropdown width: 380px
+- Full padding and spacing
+
+### Mobile (≤ 768px)
+- Dropdown width: 320px
+- Reduced padding
+- Adjusted positioning
+
+## Accessibility Features
+
+- `aria-label="Notifications"` on bell button
+- `aria-haspopup="true"` on bell button
+- `aria-expanded={isOpen}` on bell button
+- `aria-label="Close notifications"` on close button
+- Keyboard navigation support (ESC key)
+- Focus management
diff --git a/frontend/src/components/notifications/NotificationDropdown/NotificationDropdown.css b/frontend/src/components/notifications/NotificationDropdown/NotificationDropdown.css
new file mode 100644
index 0000000..5c7a570
--- /dev/null
+++ b/frontend/src/components/notifications/NotificationDropdown/NotificationDropdown.css
@@ -0,0 +1,240 @@
+.notification-dropdown-container {
+  position: relative;
+}
+
+.notification-bell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  padding: 8px;
+  background-color: var(--bg-dark, #07090d);
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+.notification-bell:hover {
+  background-color: #1e2433;
+}
+
+.notification-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  background-color: #ef4444;
+  color: white;
+  font-size: 10px;
+  font-weight: 600;
+  height: 16px;
+  min-width: 16px;
+  padding: 0 4px;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--bg-dark, #07090d);
+}
+
+.notification-dropdown {
+  position: absolute;
+  top: calc(100% + 12px);
+  right: 0;
+  width: 380px;
+  max-height: 480px;
+  background-color: #0f121a;
+  border: 1px solid #1e2433;
+  border-radius: 12px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+  z-index: 50;
+  animation: dropdownFadeIn 0.2s ease-out forwards;
+  display: flex;
+  flex-direction: column;
+}
+
+@keyframes dropdownFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.notification-dropdown-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #1e2433;
+}
+
+.notification-dropdown-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #ffffff;
+  margin: 0;
+}
+
+.notification-close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: none;
+  border: none;
+  color: #94a3b8;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.notification-close-btn:hover {
+  background-color: #1a1f2e;
+  color: #ffffff;
+}
+
+.notification-list {
+  overflow-y: auto;
+  max-height: 360px;
+  padding: 8px 0;
+}
+
+.notification-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.notification-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.notification-list::-webkit-scrollbar-thumb {
+  background: #1e2433;
+  border-radius: 3px;
+}
+
+.notification-list::-webkit-scrollbar-thumb:hover {
+  background: #334155;
+}
+
+.notification-item {
+  display: flex;
+  gap: 12px;
+  padding: 12px 20px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  border-left: 3px solid transparent;
+}
+
+.notification-item:hover {
+  background-color: #1a1f2e;
+}
+
+.notification-item.unread {
+  background-color: rgba(59, 130, 246, 0.05);
+  border-left-color: #3b82f6;
+}
+
+.notification-icon-wrapper {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background-color: #1e2433;
+  padding: 8px;
+}
+
+.notification-icon {
+  color: #94a3b8;
+}
+
+.notification-icon.shipment {
+  color: #3b82f6;
+}
+
+.notification-icon.payment {
+  color: #10b981;
+}
+
+.notification-icon.alert {
+  color: #f59e0b;
+}
+
+.notification-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.notification-message {
+  font-size: 13px;
+  color: #e2e8f0;
+  line-height: 1.4;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.notification-time {
+  font-size: 11px;
+  color: #64748b;
+}
+
+.notification-dropdown-footer {
+  padding: 12px 20px;
+  border-top: 1px solid #1e2433;
+}
+
+.view-all-btn {
+  width: 100%;
+  padding: 10px;
+  background: none;
+  border: none;
+  color: #3b82f6;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  text-align: center;
+}
+
+.view-all-btn:hover {
+  background-color: rgba(59, 130, 246, 0.1);
+  color: #60a5fa;
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+  .notification-dropdown {
+    width: 320px;
+    right: -16px;
+  }
+
+  .notification-dropdown-header {
+    padding: 14px 16px;
+  }
+
+  .notification-item {
+    padding: 10px 16px;
+  }
+
+  .notification-dropdown-footer {
+    padding: 10px 16px;
+  }
+}
diff --git a/frontend/src/components/notifications/NotificationDropdown/NotificationDropdown.test.tsx b/frontend/src/components/notifications/NotificationDropdown/NotificationDropdown.test.tsx
new file mode 100644
index 0000000..3e69eab
--- /dev/null
+++ b/frontend/src/components/notifications/NotificationDropdown/NotificationDropdown.test.tsx
@@ -0,0 +1,99 @@
+import { describe, it, expect } from 'vitest';
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import NotificationDropdown from './NotificationDropdown';
+
+const renderWithRouter = (component: React.ReactElement) => {
+  return render(<MemoryRouter>{component}</MemoryRouter>);
+};
+
+describe('NotificationDropdown', () => {
+  it('opens and displays notifications, closes on ESC and outside click', async () => {
+    const user = userEvent.setup();
+
+    renderWithRouter(<NotificationDropdown />);
+
+    const bell = screen.getByLabelText('Notifications');
+    await user.click(bell);
+
+    expect(screen.getByText('Notifications')).toBeInTheDocument();
+
+    const items = screen.getAllByRole('listitem');
+    expect(items.length).toBeGreaterThanOrEqual(5);
+
+    await user.keyboard('{Escape}');
+    await waitFor(() => expect(screen.queryByText('Notifications')).not.toBeInTheDocument());
+
+    await user.click(bell);
+    expect(screen.getByText('Notifications')).toBeInTheDocument();
+    await user.click(document.body);
+    await waitFor(() => expect(screen.queryByText('Notifications')).not.toBeInTheDocument());
+  });
+
+  it('renders the bell icon with unread badge', () => {
+    renderWithRouter(<NotificationDropdown />);
+    const bellButton = screen.getByLabelText('Notifications');
+    expect(bellButton).toBeInTheDocument();
+
+    const badge = screen.getByText('3');
+    expect(badge).toBeInTheDocument();
+  });
+});
+  it('renders the bell icon with unread badge', () => {
+    renderWithRouter(<NotificationDropdown />);
+    
+    const bellButton = screen.getByLabelText('Notifications');
+    expect(bellButton).toBeInTheDocument();
+    
+    const badge = screen.getByText('3');
+    expect(badge).toBeInTheDocument();
+  });
+
+  it('opens dropdown when bell icon is clicked', () => {
+    renderWithRouter(<NotificationDropdown />);
+    
+    const bellButton = screen.getByLabelText('Notifications');
+    fireEvent.click(bellButton);
+    
+    expect(screen.getByText('Notifications')).toBeInTheDocument();
+    expect(screen.getByText('View All Notifications')).toBeInTheDocument();
+  });
+
+  it('displays 5 notifications in the dropdown', () => {
+    renderWithRouter(<NotificationDropdown />);
+    
+    const bellButton = screen.getByLabelText('Notifications');
+    fireEvent.click(bellButton);
+    
+    expect(screen.getByText(/Shipment #SH-2024-001 has been delivered successfully/)).toBeInTheDocument();
+    expect(screen.getByText(/Payment of 5,000 XLM received/)).toBeInTheDocument();
+    expect(screen.getByText(/Shipment #SH-2024-003 is delayed/)).toBeInTheDocument();
+  });
+
+  it('closes dropdown when close button is clicked', () => {
+    renderWithRouter(<NotificationDropdown />);
+    
+    const bellButton = screen.getByLabelText('Notifications');
+    fireEvent.click(bellButton);
+    
+    const closeButton = screen.getByLabelText('Close notifications');
+    fireEvent.click(closeButton);
+    
+    expect(screen.queryByText('View All Notifications')).not.toBeInTheDocument();
+  });
+
+  it('closes dropdown when ESC key is pressed', () => {
+    renderWithRouter(<NotificationDropdown />);
+    
+    const bellButton = screen.getByLabelText('Notifications');
+    fireEvent.click(bellButton);
+    
+    expect(screen.getByText('View All Notifications')).toBeInTheDocument();
+    
+    fireEvent.keyDown(document, { key: 'Escape' });
+    
+    expect(screen.queryByText('View All Notifications')).not.toBeInTheDocument();
+  });
+
diff --git a/frontend/src/components/notifications/NotificationDropdown/NotificationDropdown.tsx b/frontend/src/components/notifications/NotificationDropdown/NotificationDropdown.tsx
new file mode 100644
index 0000000..cbf3bb1
--- /dev/null
+++ b/frontend/src/components/notifications/NotificationDropdown/NotificationDropdown.tsx
@@ -0,0 +1,135 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Bell, Package, DollarSign, AlertTriangle, X } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+
+export interface NotificationItem {
+  id: string;
+  type: "shipment" | "payment" | "alert";
+  message: string;
+  timestamp: Date;
+  read: boolean;
+}
+
+const MOCK_NOTIFICATIONS: NotificationItem[] = [
+  { id: "1", type: "shipment", message: "Shipment #SH-2024-001 has been delivered successfully", timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000), read: false },
+  { id: "2", type: "payment", message: "Payment of 5,000 XLM received for shipment #SH-2024-002", timestamp: new Date(Date.now() - 5 * 60 * 60 * 1000), read: false },
+  { id: "3", type: "alert", message: "Shipment #SH-2024-003 is delayed due to weather conditions", timestamp: new Date(Date.now() - 24 * 60 * 60 * 1000), read: false },
+  { id: "4", type: "shipment", message: "New shipment #SH-2024-004 has been created and is awaiting pickup", timestamp: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), read: true },
+  { id: "5", type: "payment", message: "Settlement completed for 3 shipments totaling 15,000 XLM", timestamp: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), read: true },
+];
+
+const getTimeAgo = (timestamp: Date, now: number): string => {
+  const diffMs = now - timestamp.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  return `${diffDays}d ago`;
+};
+
+export const NotificationDropdown: React.FC = () => {
+  const navigate = useNavigate();
+  const [isOpen, setIsOpen] = useState(false);
+  const [notifications] = useState<NotificationItem[]>(MOCK_NOTIFICATIONS);
+  const [now] = useState(() => Date.now());
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const unreadCount = notifications.filter((n) => !n.read).length;
+
+  const getNotificationIcon = (type: NotificationItem["type"]) => {
+    const base = "shrink-0";
+    switch (type) {
+      case "shipment": return <Package size={16} className={`${base} text-blue-500`} />;
+      case "payment":  return <DollarSign size={16} className={`${base} text-emerald-500`} />;
+      case "alert":    return <AlertTriangle size={16} className={`${base} text-amber-500`} />;
+      default:         return <Bell size={16} className={`${base} text-slate-400`} />;
+    }
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) setIsOpen(false);
+    };
+    const handleEsc = (e: KeyboardEvent) => { if (e.key === "Escape") setIsOpen(false); };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEsc);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEsc);
+    };
+  }, [isOpen]);
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        className="relative flex items-center justify-center w-[34px] h-[34px] rounded-lg bg-[#07090d] text-white border-none cursor-pointer transition-all hover:bg-[#1e2433]"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-label="Notifications"
+        aria-haspopup="true"
+        aria-expanded={isOpen}
+      >
+        <Bell size={18} />
+        {unreadCount > 0 && (
+          <span aria-live="polite" aria-atomic="true" className="absolute -top-1 -right-1 flex items-center justify-center h-4 min-w-4 px-1 rounded-full bg-red-500 text-white text-[10px] font-semibold border-2 border-[#07090d]">
+            {unreadCount}
+          </span>
+        )}
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-[calc(100%+12px)] right-0 w-[380px] max-h-[480px] bg-[#0f121a] border border-[#1e2433] rounded-xl shadow-[0_10px_15px_-3px_rgba(0,0,0,0.5)] z-50 flex flex-col animate-slide-down max-md:w-[320px] max-md:right-[-16px]">
+          {/* Header */}
+          <div className="flex items-center justify-between px-5 py-4 border-b border-[#1e2433] max-md:px-4 max-md:py-3.5">
+            <h3 className="text-base font-semibold text-white m-0">Notifications</h3>
+            <button
+              className="flex items-center justify-center w-6 h-6 bg-transparent border-none text-slate-400 cursor-pointer rounded hover:bg-[#1a1f2e] hover:text-white transition-all"
+              onClick={() => setIsOpen(false)}
+              aria-label="Close notifications"
+            >
+              <X size={16} />
+            </button>
+          </div>
+
+          {/* List */}
+          <div role="list" className="overflow-y-auto max-h-[360px] py-2 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-[#1e2433] [&::-webkit-scrollbar-thumb]:rounded-[3px] [&::-webkit-scrollbar-thumb:hover]:bg-[#334155]">
+            {notifications.slice(0, 5).map((n) => (
+              <div
+                role="listitem"
+                key={n.id}
+                className={`flex gap-3 px-5 py-3 cursor-pointer transition-colors border-l-[3px] hover:bg-[#1a1f2e] max-md:px-4 max-md:py-2.5 ${
+                  !n.read
+                    ? "bg-blue-500/5 border-l-blue-500"
+                    : "border-l-transparent"
+                }`}
+              >
+                <div className="flex items-start justify-center shrink-0 w-8 h-8 rounded-lg bg-[#1e2433] p-2">
+                  {getNotificationIcon(n.type)}
+                </div>
+                <div className="flex-1 min-w-0 flex flex-col gap-1">
+                  <p className="text-[13px] text-slate-200 leading-[1.4] m-0 overflow-hidden text-ellipsis [-webkit-line-clamp:1] [-webkit-box-orient:vertical] [display:-webkit-box]">
+                    {n.message}
+                  </p>
+                  <span className="text-[11px] text-slate-500">{getTimeAgo(n.timestamp, now)}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Footer */}
+          <div className="px-5 py-3 border-t border-[#1e2433] max-md:px-4 max-md:py-2.5">
+            <button
+              className="w-full py-2.5 bg-transparent border-none text-blue-500 text-[13px] font-semibold cursor-pointer rounded-md transition-all text-center hover:bg-blue-500/10 hover:text-blue-400"
+              onClick={() => { setIsOpen(false); navigate("/dashboard/notifications"); }}
+            >
+              View All Notifications
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default NotificationDropdown;
\ No newline at end of file
diff --git a/frontend/src/components/notifications/NotificationDropdown/README.md b/frontend/src/components/notifications/NotificationDropdown/README.md
new file mode 100644
index 0000000..4c0bf10
--- /dev/null
+++ b/frontend/src/components/notifications/NotificationDropdown/README.md
@@ -0,0 +1,62 @@
+# NotificationDropdown Component
+
+A dropdown component that displays recent notifications in the dashboard top header.
+
+## Features
+
+- Bell icon with dynamic unread badge (hides when count is 0)
+- Dropdown displays 5 most recent notifications
+- Each notification shows:
+  - Type-specific icon (shipment, payment, alert)
+  - Message text (truncated to 1 line)
+  - Time ago (e.g., "2h ago", "3d ago")
+- "View All Notifications" link at the bottom
+- Closes on outside click or ESC key press
+- Smooth animations and transitions
+- Responsive design for mobile devices
+
+## Usage
+
+```tsx
+import NotificationDropdown from './components/notifications/NotificationDropdown/NotificationDropdown';
+
+function TopHeader() {
+  return (
+    <div className="top-header-right">
+      <NotificationDropdown />
+    </div>
+  );
+}
+```
+
+## Mock Data
+
+Currently uses mock notification data. In production, this should be replaced with real data from an API.
+
+## Notification Types
+
+- `shipment`: Blue package icon
+- `payment`: Green dollar sign icon
+- `alert`: Orange alert triangle icon
+
+## Styling
+
+The component uses CSS custom properties and follows the existing design system:
+- Dark theme with `#0f121a` background
+- Border color: `#1e2433`
+- Hover states with smooth transitions
+- Unread notifications have a blue accent border
+
+## Testing
+
+Run tests with:
+```bash
+npm run test -- NotificationDropdown.test.tsx
+```
+
+All 5 tests pass:
+- Renders bell icon with unread badge
+- Opens dropdown on click
+- Displays 5 notifications
+- Closes on close button click
+- Closes on ESC key press
diff --git a/frontend/src/components/notifications/NotificationDropdown/index.ts b/frontend/src/components/notifications/NotificationDropdown/index.ts
new file mode 100644
index 0000000..2173ec5
--- /dev/null
+++ b/frontend/src/components/notifications/NotificationDropdown/index.ts
@@ -0,0 +1,2 @@
+export { NotificationDropdown as default, NotificationDropdown } from './NotificationDropdown';
+export type { NotificationItem } from './NotificationDropdown';
diff --git a/frontend/src/components/notifications/Toast/Toast.test.tsx b/frontend/src/components/notifications/Toast/Toast.test.tsx
new file mode 100644
index 0000000..7e1e6da
--- /dev/null
+++ b/frontend/src/components/notifications/Toast/Toast.test.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+import { render, screen, act, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { ToastProvider, useToast } from "../../../context/ToastContext";
+import { BrowserRouter } from "react-router-dom";
+
+// Helper component to trigger toasts during testing
+const TestComponent = () => {
+  const { addToast } = useToast();
+  return (
+    <button onClick={() => addToast("Test Message", "success", "/test-path")}>
+      Show Toast
+    </button>
+  );
+};
+
+const renderWithProviders = (ui: React.ReactElement) => {
+  return render(
+    <BrowserRouter>
+      <ToastProvider>{ui}</ToastProvider>
+    </BrowserRouter>,
+  );
+};
+
+describe("Toast System", () => {
+  it("should show a toast when addToast is called", () => {
+    renderWithProviders(<TestComponent />);
+
+    fireEvent.click(screen.getByText("Show Toast"));
+
+    expect(screen.getByText("Test Message")).toBeInTheDocument();
+  });
+
+  it("should auto-dismiss after 5 seconds", () => {
+    vi.useFakeTimers();
+    renderWithProviders(<TestComponent />);
+
+    fireEvent.click(screen.getByText("Show Toast"));
+    expect(screen.getByText("Test Message")).toBeInTheDocument();
+
+    // Fast-forward 5 seconds
+    act(() => {
+      vi.advanceTimersByTime(5000);
+    });
+
+    expect(screen.queryByText("Test Message")).not.toBeInTheDocument();
+    vi.useRealTimers();
+  });
+
+  it("should dismiss immediately when close button is clicked", () => {
+    renderWithProviders(<TestComponent />);
+
+    fireEvent.click(screen.getByText("Show Toast"));
+    const closeButton = screen.getByRole("button", { name: "" }); // The X icon button
+
+    fireEvent.click(closeButton);
+
+    expect(screen.queryByText("Test Message")).not.toBeInTheDocument();
+  });
+
+  it("should stack up to 3 toasts and remove the oldest", () => {
+    const StackTrigger = () => {
+      const { addToast } = useToast();
+      return (
+        <button
+          onClick={() => {
+            addToast("Toast 1", "info");
+            addToast("Toast 2", "info");
+            addToast("Toast 3", "info");
+            addToast("Toast 4", "info");
+          }}
+        >
+          Trigger 4
+        </button>
+      );
+    };
+
+    renderWithProviders(<StackTrigger />);
+    fireEvent.click(screen.getByText("Trigger 4"));
+
+    // "Toast 1" should be gone because we only keep the last 3
+    expect(screen.queryByText("Toast 1")).not.toBeInTheDocument();
+    expect(screen.getByText("Toast 2")).toBeInTheDocument();
+    expect(screen.getByText("Toast 3")).toBeInTheDocument();
+    expect(screen.getByText("Toast 4")).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/components/notifications/Toast/Toast.tsx b/frontend/src/components/notifications/Toast/Toast.tsx
new file mode 100644
index 0000000..01b36b8
--- /dev/null
+++ b/frontend/src/components/notifications/Toast/Toast.tsx
@@ -0,0 +1,64 @@
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from "lucide-react";
+import { ToastType } from "../../../context/ToastContext";
+
+interface ToastProps {
+  id: string;
+  type: ToastType;
+  message: string;
+  navigateTo?: string;
+  onClose: () => void;
+}
+
+const icons = {
+  success: <CheckCircle className="w-5 h-5 text-green-400" />,
+  error: <AlertCircle className="w-5 h-5 text-red-400" />,
+  info: <Info className="w-5 h-5 text-blue-400" />,
+  warning: <AlertTriangle className="w-5 h-5 text-yellow-400" />,
+};
+
+export const Toast: React.FC<ToastProps> = ({
+  type,
+  message,
+  navigateTo,
+  onClose,
+}) => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const timer = setTimeout(onClose, 5000);
+    return () => clearTimeout(timer);
+  }, [onClose]);
+
+  const handleClick = () => {
+    if (navigateTo) navigate(navigateTo);
+  };
+
+  return (
+    <div
+      onClick={handleClick}
+      className={`
+        pointer-events-auto flex items-center justify-between min-w-[320px] max-w-md 
+        p-4 rounded-xl shadow-lg border animate-in slide-in-from-right-full duration-300
+        cursor-pointer transition-all hover:scale-[1.02]
+        bg-background-card border-border
+      `}
+    >
+      <div className="flex items-center gap-3">
+        {icons[type]}
+        <span className="text-sm font-medium text-primary">{message}</span>
+      </div>
+
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          onClose();
+        }}
+        className="p-1 ml-4 rounded-full hover:bg-white/10 transition-colors"
+      >
+        <X className="w-4 h-4 text-secondary" />
+      </button>
+    </div>
+  );
+};
diff --git a/frontend/src/components/shipment/DeliveryConfirmation/DeliveryConfirmation.test.tsx b/frontend/src/components/shipment/DeliveryConfirmation/DeliveryConfirmation.test.tsx
new file mode 100644
index 0000000..0dd1e64
--- /dev/null
+++ b/frontend/src/components/shipment/DeliveryConfirmation/DeliveryConfirmation.test.tsx
@@ -0,0 +1,243 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import DeliveryConfirmation from './DeliveryConfirmation';
+
+const defaultProps = {
+  shipmentId: '#SHP-001',
+  status: 'delivered',
+};
+
+describe('DeliveryConfirmation', () => {
+  it('full user flow: open form, pick rating, add feedback, submit and show success', async () => {
+    const user = userEvent.setup();
+    const onConfirm = vi.fn().mockResolvedValue(undefined);
+
+    render(<DeliveryConfirmation shipmentId="SHP-1" status="delivered" onConfirm={onConfirm} />);
+
+    expect(screen.getByRole('button', { name: /Confirm Receipt/i })).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: /Confirm Receipt/i }));
+
+    const stars = screen.getAllByRole('radio');
+    await user.click(stars[3]);
+
+    const textarea = screen.getByPlaceholderText(/Share any comments about your delivery/i);
+    await user.type(textarea, 'Great delivery');
+
+    await user.click(screen.getByRole('button', { name: /Submit Confirmation/i }));
+
+    await screen.findByText(/Thank you for confirming!/i);
+
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+    expect(onConfirm).toHaveBeenCalledWith('SHP-1', 4, 'Great delivery');
+  });
+
+  describe('render conditions', () => {
+    it('renders when status is delivered', () => {
+      render(<DeliveryConfirmation {...defaultProps} />);
+      expect(screen.getByRole('heading', { name: /confirm delivery/i })).toBeInTheDocument();
+    });
+
+    it('renders nothing when status is not delivered', () => {
+      const { container } = render(<DeliveryConfirmation shipmentId="#SHP-001" status="in_transit" />);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders nothing for pending status', () => {
+      const { container } = render(<DeliveryConfirmation shipmentId="#SHP-001" status="pending" />);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('shows shipment ID in prompt', () => {
+      render(<DeliveryConfirmation {...defaultProps} />);
+      expect(screen.getByText(/#SHP-001/)).toBeInTheDocument();
+    });
+  });
+
+  describe('interaction flow', () => {
+    it('shows Confirm Receipt button initially', () => {
+      render(<DeliveryConfirmation {...defaultProps} />);
+      expect(screen.getByRole('button', { name: /confirm receipt/i })).toBeInTheDocument();
+    });
+
+    it('reveals form when Confirm Receipt is clicked', async () => {
+      render(<DeliveryConfirmation {...defaultProps} />);
+      await userEvent.click(screen.getByRole('button', { name: /confirm receipt/i }));
+      expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+      expect(screen.getByLabelText(/feedback/i)).toBeInTheDocument();
+    });
+
+    it('does not show form before Confirm Receipt is clicked', () => {
+      render(<DeliveryConfirmation {...defaultProps} />);
+      expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('rating selection', () => {
+    beforeEach(async () => {
+      render(<DeliveryConfirmation {...defaultProps} />);
+      await userEvent.click(screen.getByRole('button', { name: /confirm receipt/i }));
+    });
+
+    it('renders 5 star buttons', () => {
+      const stars = screen.getAllByRole('radio');
+      expect(stars).toHaveLength(5);
+    });
+
+    it('marks selected star as checked', async () => {
+      const stars = screen.getAllByRole('radio');
+      await userEvent.click(stars[2]);
+      expect(stars[2]).toHaveAttribute('aria-checked', 'true');
+    });
+
+    it('shows label for selected rating', async () => {
+      const stars = screen.getAllByRole('radio');
+      await userEvent.click(stars[4]);
+      expect(screen.getByText('Excellent')).toBeInTheDocument();
+    });
+
+    it('shows hover preview on mouse enter', () => {
+      const stars = screen.getAllByRole('radio');
+      fireEvent.mouseEnter(stars[1]);
+      expect(screen.getByText('Fair')).toBeInTheDocument();
+    });
+
+    it('clears hover preview on mouse leave from group', () => {
+      const group = screen.getByRole('radiogroup');
+      const stars = screen.getAllByRole('radio');
+      fireEvent.mouseEnter(stars[1]);
+      fireEvent.mouseLeave(group);
+      expect(screen.queryByText('Fair')).not.toBeInTheDocument();
+    });
+
+    it('supports keyboard selection with Enter', () => {
+      const stars = screen.getAllByRole('radio');
+      fireEvent.keyDown(stars[2], { key: 'Enter' });
+      expect(stars[2]).toHaveAttribute('aria-checked', 'true');
+    });
+
+    it('supports keyboard selection with Space', () => {
+      const stars = screen.getAllByRole('radio');
+      fireEvent.keyDown(stars[0], { key: ' ' });
+      expect(stars[0]).toHaveAttribute('aria-checked', 'true');
+    });
+  });
+
+  describe('submission behavior', () => {
+    // Each test renders its own instance to avoid pollution
+
+    it('submit button is disabled when no rating selected', async () => {
+      render(<DeliveryConfirmation {...defaultProps} />);
+      await userEvent.click(screen.getByRole('button', { name: /confirm receipt/i }));
+      expect(screen.getByRole('button', { name: /submit confirmation/i })).toBeDisabled();
+    });
+
+    it('submit button is enabled after rating is selected', async () => {
+      render(<DeliveryConfirmation {...defaultProps} />);
+      await userEvent.click(screen.getByRole('button', { name: /confirm receipt/i }));
+      const stars = screen.getAllByRole('radio');
+      await userEvent.click(stars[3]);
+      expect(screen.getByRole('button', { name: /submit confirmation/i })).not.toBeDisabled();
+    });
+
+    it('does not submit without a rating', async () => {
+      const onConfirm = vi.fn();
+      render(<DeliveryConfirmation {...defaultProps} onConfirm={onConfirm} />);
+      await userEvent.click(screen.getByRole('button', { name: /confirm receipt/i }));
+      const form = document.querySelector('form');
+      if (form) fireEvent.submit(form);
+      await userEvent.click(screen.getByRole('button', { name: /^submit confirmation$/i }));
+      expect(onConfirm).not.toHaveBeenCalled();
+    });
+
+    it('calls onConfirm with correct args on submit', async () => {
+      const onConfirm = vi.fn().mockResolvedValue(undefined);
+      render(<DeliveryConfirmation {...defaultProps} onConfirm={onConfirm} />);
+      await userEvent.click(screen.getByRole('button', { name: /confirm receipt/i }));
+      const stars = screen.getAllByRole('radio');
+      await userEvent.click(stars[4]);
+      await userEvent.type(screen.getByLabelText(/feedback/i), 'Great service');
+      await userEvent.click(screen.getByRole('button', { name: /^submit confirmation$/i }));
+      await waitFor(() => expect(onConfirm).toHaveBeenCalledWith('#SHP-001', 5, 'Great service'));
+    });
+
+    it('submits with empty feedback when feedback is optional', async () => {
+      const onConfirm = vi.fn().mockResolvedValue(undefined);
+      render(<DeliveryConfirmation {...defaultProps} onConfirm={onConfirm} />);
+      await userEvent.click(screen.getByRole('button', { name: /confirm receipt/i }));
+      const stars = screen.getAllByRole('radio');
+      await userEvent.click(stars[2]);
+      await userEvent.click(screen.getByRole('button', { name: /^submit confirmation$/i }));
+      await waitFor(() => expect(onConfirm).toHaveBeenCalledWith('#SHP-001', 3, ''));
+    });
+  });
+
+  describe('loading state', () => {
+    it('shows loading state during submission', async () => {
+      const onConfirm = vi.fn(() => new Promise<void>((resolve) => setTimeout(resolve, 500)));
+      render(<DeliveryConfirmation {...defaultProps} onConfirm={onConfirm} />);
+      await userEvent.click(screen.getByRole('button', { name: /confirm receipt/i }));
+      const stars = screen.getAllByRole('radio');
+      await userEvent.click(stars[0]);
+      await userEvent.click(screen.getByRole('button', { name: /submit confirmation/i }));
+      expect(screen.getByText(/submitting/i)).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /submitting/i })).toBeDisabled();
+    });
+
+    it('prevents duplicate submissions', async () => {
+      const onConfirm = vi.fn(() => new Promise<void>((resolve) => setTimeout(resolve, 500)));
+      render(<DeliveryConfirmation {...defaultProps} onConfirm={onConfirm} />);
+      await userEvent.click(screen.getByRole('button', { name: /confirm receipt/i }));
+      const stars = screen.getAllByRole('radio');
+      await userEvent.click(stars[0]);
+      const submitBtn = screen.getByRole('button', { name: /submit confirmation/i });
+      await userEvent.click(submitBtn);
+      await userEvent.click(submitBtn);
+      expect(onConfirm).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('post-submit state', () => {
+    // Each test renders its own instance to avoid pollution
+    it('shows thank-you message after successful submission', async () => {
+      const onConfirm = vi.fn().mockResolvedValue(undefined);
+      render(<DeliveryConfirmation {...defaultProps} onConfirm={onConfirm} />);
+      await userEvent.click(screen.getByRole('button', { name: /confirm receipt/i }));
+      const stars = screen.getAllByRole('radio');
+      await userEvent.click(stars[3]);
+      await userEvent.click(screen.getByRole('button', { name: /submit confirmation/i }));
+      await waitFor(() => expect(screen.getByText(/thank you for confirming/i)).toBeInTheDocument());
+    });
+
+    it('displays submitted rating in success state', async () => {
+      const onConfirm = vi.fn().mockResolvedValue(undefined);
+      render(<DeliveryConfirmation {...defaultProps} onConfirm={onConfirm} />);
+      await userEvent.click(screen.getByRole('button', { name: /confirm receipt/i }));
+      const stars = screen.getAllByRole('radio');
+      await userEvent.click(stars[3]);
+      await userEvent.click(screen.getByRole('button', { name: /submit confirmation/i }));
+      await waitFor(() => expect(screen.getByText('Very Good')).toBeInTheDocument());
+    });
+
+    it('shows error message when submission fails', async () => {
+      const onConfirm = vi.fn().mockRejectedValue(new Error('Network error'));
+      render(<DeliveryConfirmation {...defaultProps} onConfirm={onConfirm} />);
+      await userEvent.click(screen.getByRole('button', { name: /confirm receipt/i }));
+      const stars = screen.getAllByRole('radio');
+      await userEvent.click(stars[0]);
+      await userEvent.click(screen.getByRole('button', { name: /submit confirmation/i }));
+      await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('Network error'));
+    });
+
+    it('does not show form after successful submission', async () => {
+      const onConfirm = vi.fn().mockResolvedValue(undefined);
+      render(<DeliveryConfirmation {...defaultProps} onConfirm={onConfirm} />);
+      await userEvent.click(screen.getByRole('button', { name: /confirm receipt/i }));
+      const stars = screen.getAllByRole('radio');
+      await userEvent.click(stars[1]);
+      await userEvent.click(screen.getByRole('button', { name: /submit confirmation/i }));
+      await waitFor(() => expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument());
+    });
+  });
+});
diff --git a/frontend/src/components/shipment/DeliveryConfirmation/DeliveryConfirmation.tsx b/frontend/src/components/shipment/DeliveryConfirmation/DeliveryConfirmation.tsx
new file mode 100644
index 0000000..96f9549
--- /dev/null
+++ b/frontend/src/components/shipment/DeliveryConfirmation/DeliveryConfirmation.tsx
@@ -0,0 +1,214 @@
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { CheckCircle2 } from 'lucide-react';
+
+export interface DeliveryConfirmationProps {
+  shipmentId: string;
+  status: string;
+  onConfirm?: (shipmentId: string, rating: number, feedback: string) => Promise<void>;
+}
+
+type ViewState = 'prompt' | 'form' | 'success';
+
+const STAR_LABELS = ['Poor', 'Fair', 'Good', 'Very Good', 'Excellent'];
+
+const DeliveryConfirmation: React.FC<DeliveryConfirmationProps> = ({
+  shipmentId,
+  status,
+  onConfirm,
+}) => {
+  const [view, setView] = useState<ViewState>('prompt');
+  const [rating, setRating] = useState<number>(0);
+  const [hovered, setHovered] = useState<number>(0);
+  const [feedback, setFeedback] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState('');
+  const [submittedRating, setSubmittedRating] = useState<number>(0);
+  const submitGuard = useRef(false);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const handleConfirmReceipt = () => setView('form');
+
+  useEffect(() => {
+    if (view === 'form') {
+      const firstRadio = containerRef.current?.querySelector('button[role="radio"]') as HTMLButtonElement | null;
+      firstRadio?.focus();
+    }
+    if (view === 'success') {
+      const successEl = containerRef.current?.querySelector('[data-success]') as HTMLElement | null;
+      successEl?.focus();
+    }
+  }, [view]);
+
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (rating === 0 || submitGuard.current || isSubmitting) return;
+
+    submitGuard.current = true;
+    setIsSubmitting(true);
+    setError('');
+
+    try {
+      if (onConfirm) {
+        await onConfirm(shipmentId, rating, feedback);
+      } else {
+        // Simulate async call when no handler provided
+        await new Promise<void>((resolve) => setTimeout(resolve, 1000));
+      }
+      setSubmittedRating(rating);
+      setView('success');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Submission failed. Please try again.');
+      submitGuard.current = false;
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [rating, feedback, shipmentId, onConfirm, isSubmitting]);
+
+  const handleStarKeyDown = (e: React.KeyboardEvent, star: number) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      setRating(star);
+    }
+  };
+
+  const displayRating = hovered || rating;
+
+  if (status !== 'delivered') return null;
+
+  return (
+    <div
+      ref={containerRef}
+      className="bg-[rgba(8,40,50,0.4)] border-[1.5px] border-[rgba(0,180,160,0.3)] rounded-3xl px-8 py-10 backdrop-blur-[12px] shadow-[0_8px_32px_rgba(0,0,0,0.3)] mt-8 md:px-5 md:py-8 md:rounded-2xl sm:px-4 sm:py-6"
+      aria-label="Delivery confirmation"
+    >
+      <h2 className="font-['Bebas_Neue',sans-serif] text-[clamp(1.75rem,4vw,2.5rem)] font-normal tracking-[0.04em] leading-[1.2] text-white text-center mb-8">
+        CONFIRM <span className="text-[#00d4c8]">DELIVERY</span>
+      </h2>
+
+      {/* Fixed-height content area to prevent layout shift */}
+      <div className="min-h-[220px] flex flex-col justify-center">
+
+        {view === 'prompt' && (
+          <div className="flex flex-col items-center gap-6 text-center animate-fade-in-up">
+            <p className="text-[rgba(200,230,240,0.75)] text-base leading-relaxed max-w-sm">
+              Your shipment <span className="text-white font-semibold">{shipmentId}</span> has been delivered. Please confirm receipt and share your experience.
+            </p>
+            <button
+              type="button"
+              onClick={handleConfirmReceipt}
+              className="bg-[linear-gradient(135deg,#00d4c8_0%,#009990_100%)] text-black font-semibold px-8 py-3.5 rounded-xl text-base transition-all shadow-[0_4px_15px_rgba(0,212,200,0.3)] hover:-translate-y-0.5 hover:shadow-[0_8px_25px_rgba(0,212,200,0.4)] focus:outline-none focus:ring-2 focus:ring-[#00d4c8] focus:ring-offset-2 focus:ring-offset-transparent"
+            >
+              Confirm Receipt
+            </button>
+          </div>
+        )}
+
+        {view === 'form' && (
+          <form onSubmit={handleSubmit} className="flex flex-col gap-6 animate-fade-in-up" noValidate>
+            {/* Star rating */}
+            <div className="flex flex-col items-center gap-3">
+              <label className="text-white font-medium text-sm" id="rating-label">
+                Rate your delivery experience <span className="text-[#ef4444]" aria-hidden="true">*</span>
+              </label>
+              <div
+                role="radiogroup"
+                aria-labelledby="rating-label"
+                aria-required="true"
+                className="flex gap-2"
+                onMouseLeave={() => setHovered(0)}
+              >
+                {[1, 2, 3, 4, 5].map((star) => (
+                  <button
+                    key={star}
+                    type="button"
+                    role="radio"
+                    aria-checked={rating === star}
+                    aria-label={`${star} star${star > 1 ? 's' : ''} — ${STAR_LABELS[star - 1]}`}
+                    tabIndex={rating === star || (rating === 0 && star === 1) ? 0 : -1}
+                    className="text-3xl leading-none transition-transform duration-100 focus:outline-none focus:ring-2 focus:ring-[#00d4c8] focus:ring-offset-1 focus:ring-offset-transparent rounded"
+                    style={{ transform: displayRating >= star ? 'scale(1.15)' : 'scale(1)' }}
+                    onClick={() => setRating(star)}
+                    onMouseEnter={() => setHovered(star)}
+                    onKeyDown={(e) => handleStarKeyDown(e, star)}
+                  >
+                    <span aria-hidden="true" className={displayRating >= star ? 'text-[#fbbf24]' : 'text-[rgba(255,255,255,0.2)]'}>
+                      ★
+                    </span>
+                  </button>
+                ))}
+              </div>
+              {displayRating > 0 && (
+                <span className="text-[#00d4c8] text-sm font-medium" aria-live="polite">
+                  {STAR_LABELS[displayRating - 1]}
+                </span>
+              )}
+            </div>
+
+            {/* Feedback textarea */}
+            <div className="flex flex-col gap-2">
+              <label htmlFor="delivery-feedback" className="text-white font-medium text-sm">
+                Feedback <span className="text-[rgba(255,255,255,0.4)] font-normal">(optional)</span>
+              </label>
+              <textarea
+                id="delivery-feedback"
+                rows={3}
+                value={feedback}
+                onChange={(e) => setFeedback(e.target.value)}
+                placeholder="Share any comments about your delivery..."
+                className="bg-[rgba(0,0,0,0.3)] border-[1.5px] border-[rgba(0,180,160,0.3)] rounded-xl px-4 py-3 text-white text-sm font-[inherit] resize-none transition-all w-full focus:outline-none focus:border-[#00d4c8] focus:shadow-[0_0_0_4px_rgba(0,212,200,0.1)] placeholder:text-[rgba(255,255,255,0.3)]"
+              />
+            </div>
+
+            {error && (
+              <p role="alert" className="text-[#ef4444] text-sm text-center">
+                {error}
+              </p>
+            )}
+
+            <button
+              type="submit"
+              disabled={rating === 0 || isSubmitting}
+              className="bg-[linear-gradient(135deg,#00d4c8_0%,#009990_100%)] text-black font-semibold py-4 rounded-xl text-base transition-all shadow-[0_4px_15px_rgba(0,212,200,0.3)] hover:not-disabled:-translate-y-0.5 hover:not-disabled:shadow-[0_8px_25px_rgba(0,212,200,0.4)] disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none focus:outline-none focus:ring-2 focus:ring-[#00d4c8] focus:ring-offset-2 focus:ring-offset-transparent flex items-center justify-center gap-2"
+              aria-busy={isSubmitting}
+            >
+              {isSubmitting ? (
+                <>
+                  <svg className="animate-spin-svg w-5 h-5" viewBox="0 0 50 50" aria-hidden="true">
+                    <circle className="animate-dash" cx="25" cy="25" r="20" fill="none" strokeWidth="5" stroke="currentColor" />
+                  </svg>
+                  Submitting...
+                </>
+              ) : 'Submit Confirmation'}
+            </button>
+          </form>
+        )}
+
+        {view === 'success' && (
+          <div data-success tabIndex={-1} className="flex flex-col items-center gap-5 text-center animate-fade-in-up" role="status" aria-live="polite">
+            <div className="w-16 h-16 rounded-full bg-[rgba(0,212,200,0.15)] border border-[rgba(0,212,200,0.3)] flex items-center justify-center">
+              <CheckCircle2 className="w-8 h-8 text-[#00d4c8]" />
+            </div>
+            <div>
+              <h3 className="text-white text-xl font-semibold mb-1">Thank you for confirming!</h3>
+              <p className="text-[rgba(200,230,240,0.75)] text-sm">Your feedback helps us improve our service.</p>
+            </div>
+            <div className="flex flex-col items-center gap-1">
+              <span className="text-[rgba(255,255,255,0.5)] text-xs uppercase tracking-wider">Your rating</span>
+              <div className="flex gap-1" aria-label={`Submitted rating: ${submittedRating} out of 5 stars`}>
+                {[1, 2, 3, 4, 5].map((star) => (
+                  <span key={star} className={`text-2xl ${star <= submittedRating ? 'text-[#fbbf24]' : 'text-[rgba(255,255,255,0.2)]'}`} aria-hidden="true">
+                    ★
+                  </span>
+                ))}
+              </div>
+              <span className="text-[#00d4c8] text-sm font-medium">{STAR_LABELS[submittedRating - 1]}</span>
+            </div>
+          </div>
+        )}
+
+      </div>
+    </div>
+  );
+};
+
+export default DeliveryConfirmation;
diff --git a/frontend/src/components/shipment/StatusUpdate/StatusUpdate.css b/frontend/src/components/shipment/StatusUpdate/StatusUpdate.css
deleted file mode 100644
index 607fc94..0000000
--- a/frontend/src/components/shipment/StatusUpdate/StatusUpdate.css
+++ /dev/null
@@ -1,134 +0,0 @@
-.status-update {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.status-update-trigger {
-  border: 1px solid var(--border-color, #1e2433);
-  background: #121620;
-  color: var(--text-primary, #ffffff);
-  border-radius: 8px;
-  padding: 8px 12px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  min-width: 180px;
-  text-align: left;
-}
-
-.status-update-trigger:hover {
-  border-color: var(--accent-blue, #3b82f6);
-}
-
-.status-update-menu {
-  list-style: none;
-  margin: 0;
-  padding: 6px;
-  border: 1px solid var(--border-color, #1e2433);
-  border-radius: 10px;
-  background: var(--bg-card, #0f121a);
-  position: absolute;
-  top: calc(100% + 6px);
-  left: 0;
-  min-width: 220px;
-  z-index: 30;
-  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
-}
-
-.status-update-option {
-  width: 100%;
-  border: none;
-  background: transparent;
-  color: var(--text-primary, #ffffff);
-  text-align: left;
-  border-radius: 8px;
-  padding: 8px 10px;
-  font-size: 13px;
-  cursor: pointer;
-}
-
-.status-update-option:hover {
-  background: #1a2030;
-}
-
-.status-update-dialog-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(2, 6, 23, 0.72);
-  backdrop-filter: blur(2px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.status-update-dialog {
-  width: min(92vw, 420px);
-  border: 1px solid var(--border-color, #1e2433);
-  border-radius: 14px;
-  padding: 18px;
-  background: var(--bg-card, #0f121a);
-  color: var(--text-primary, #ffffff);
-  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
-}
-
-.status-update-dialog h3 {
-  margin: 0 0 8px;
-  font-size: 17px;
-}
-
-.status-update-dialog p {
-  margin: 0;
-  color: var(--text-secondary, #9ca3af);
-  font-size: 14px;
-}
-
-.status-update-actions {
-  margin-top: 16px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
-.status-update-cancel,
-.status-update-confirm {
-  border-radius: 8px;
-  border: 1px solid var(--border-color, #1e2433);
-  padding: 8px 12px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.status-update-cancel {
-  background: transparent;
-  color: var(--text-primary, #ffffff);
-}
-
-.status-update-confirm {
-  background: var(--accent-blue, #3b82f6);
-  border-color: var(--accent-blue, #3b82f6);
-  color: #ffffff;
-}
-
-.status-update-cancel:disabled,
-.status-update-confirm:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.status-update-feedback {
-  margin: 0;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.status-update-feedback.success {
-  color: #10b981;
-}
-
-.status-update-feedback.error {
-  color: #f87171;
-}
diff --git a/frontend/src/components/shipment/StatusUpdate/StatusUpdate.tsx b/frontend/src/components/shipment/StatusUpdate/StatusUpdate.tsx
index 31d6afd..f73ae15 100644
--- a/frontend/src/components/shipment/StatusUpdate/StatusUpdate.tsx
+++ b/frontend/src/components/shipment/StatusUpdate/StatusUpdate.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import './StatusUpdate.css';
 
 export type ShipmentMilestone =
   | 'Picked Up'
@@ -37,42 +36,25 @@ const StatusUpdate: React.FC<StatusUpdateProps> = ({
   const containerRef = useRef<HTMLDivElement | null>(null);
   const triggerRef = useRef<HTMLButtonElement | null>(null);
 
-  useEffect(() => {
-    setActiveStatus(currentStatus);
-  }, [currentStatus]);
+  useEffect(() => { setActiveStatus(currentStatus); }, [currentStatus]);
 
   useEffect(() => {
-    if (!isMenuOpen) {
-      return;
-    }
-
+    if (!isMenuOpen) return;
     const handleOutsideClick = (event: MouseEvent) => {
-      if (!containerRef.current?.contains(event.target as Node)) {
-        setIsMenuOpen(false);
-      }
+      if (!containerRef.current?.contains(event.target as Node)) setIsMenuOpen(false);
     };
-
     document.addEventListener('mousedown', handleOutsideClick);
     return () => document.removeEventListener('mousedown', handleOutsideClick);
   }, [isMenuOpen]);
 
   useEffect(() => {
-    if (!successMessage) {
-      return;
-    }
-
-    const timer = window.setTimeout(() => {
-      setSuccessMessage('');
-    }, 3000);
-
+    if (!successMessage) return;
+    const timer = window.setTimeout(() => setSuccessMessage(''), 3000);
     return () => window.clearTimeout(timer);
   }, [successMessage]);
 
   const dialogMessage = useMemo(() => {
-    if (!pendingStatus) {
-      return '';
-    }
-
+    if (!pendingStatus) return '';
     return `Update shipment #${shipmentId} to ${pendingStatus}?`;
   }, [pendingStatus, shipmentId]);
 
@@ -90,18 +72,11 @@ const StatusUpdate: React.FC<StatusUpdateProps> = ({
   };
 
   const handleConfirm = async () => {
-    if (!pendingStatus) {
-      return;
-    }
-
+    if (!pendingStatus) return;
     setIsUpdating(true);
     setErrorMessage('');
-
     try {
-      if (onStatusUpdate) {
-        await onStatusUpdate(shipmentId, pendingStatus);
-      }
-
+      if (onStatusUpdate) await onStatusUpdate(shipmentId, pendingStatus);
       setActiveStatus(pendingStatus);
       setSuccessMessage(`Shipment #${shipmentId} updated to ${pendingStatus}.`);
       setIsDialogOpen(false);
@@ -116,10 +91,10 @@ const StatusUpdate: React.FC<StatusUpdateProps> = ({
   };
 
   return (
-    <div className="status-update" ref={containerRef}>
+    <div className="relative inline-flex flex-col gap-2" ref={containerRef}>
       <button
         type="button"
-        className="status-update-trigger"
+        className="border border-border bg-background-elevated text-text-primary rounded-lg px-3 py-2 text-[13px] font-semibold cursor-pointer min-w-[180px] text-left hover:border-accent-blue transition-colors"
         onClick={() => setIsMenuOpen(prev => !prev)}
         aria-expanded={isMenuOpen}
         aria-haspopup="listbox"
@@ -130,12 +105,16 @@ const StatusUpdate: React.FC<StatusUpdateProps> = ({
       </button>
 
       {isMenuOpen && (
-        <ul className="status-update-menu" role="listbox" aria-label="Shipment milestones">
+        <ul
+          className="list-none m-0 p-1.5 border border-border rounded-[10px] bg-background-card absolute top-[calc(100%+6px)] left-0 min-w-[220px] z-30 shadow-[0_10px_24px_rgba(0,0,0,0.25)]"
+          role="listbox"
+          aria-label="Shipment milestones"
+        >
           {MILESTONE_OPTIONS.map(status => (
             <li key={status}>
               <button
                 type="button"
-                className="status-update-option"
+                className="w-full border-none bg-transparent text-text-primary text-left rounded-lg px-2.5 py-2 text-[13px] cursor-pointer hover:bg-[#1a2030] transition-colors"
                 onClick={() => openConfirmation(status)}
               >
                 {status}
@@ -146,24 +125,32 @@ const StatusUpdate: React.FC<StatusUpdateProps> = ({
       )}
 
       {isDialogOpen && pendingStatus && (
-        <div className="status-update-dialog-backdrop">
+        <div className="fixed inset-0 bg-[rgba(2,6,23,0.72)] backdrop-blur-sm flex items-center justify-center z-[1000]">
           <div
-            className="status-update-dialog"
+            className="w-[min(92vw,420px)] border border-border rounded-[14px] p-[18px] bg-background-card text-text-primary shadow-[0_24px_50px_rgba(0,0,0,0.35)]"
             role="dialog"
             aria-modal="true"
             aria-labelledby={`status-update-title-${shipmentId}`}
             aria-describedby={`status-update-message-${shipmentId}`}
           >
-            <h3 id={`status-update-title-${shipmentId}`}>Confirm status update</h3>
-            <p id={`status-update-message-${shipmentId}`}>{dialogMessage}</p>
-
-            <div className="status-update-actions">
-              <button type="button" className="status-update-cancel" onClick={handleCancel} disabled={isUpdating}>
+            <h3 id={`status-update-title-${shipmentId}`} className="m-0 mb-2 text-[17px] font-semibold">
+              Confirm status update
+            </h3>
+            <p id={`status-update-message-${shipmentId}`} className="m-0 text-text-secondary text-sm">
+              {dialogMessage}
+            </p>
+            <div className="mt-4 flex justify-end gap-2.5">
+              <button
+                type="button"
+                className="rounded-lg border border-border px-3 py-2 text-[13px] font-semibold cursor-pointer bg-transparent text-text-primary disabled:cursor-not-allowed disabled:opacity-60 transition-colors"
+                onClick={handleCancel}
+                disabled={isUpdating}
+              >
                 Cancel
               </button>
               <button
                 type="button"
-                className="status-update-confirm"
+                className="rounded-lg border border-accent-blue px-3 py-2 text-[13px] font-semibold cursor-pointer bg-accent-blue text-white disabled:cursor-not-allowed disabled:opacity-60 transition-colors"
                 onClick={handleConfirm}
                 disabled={isUpdating}
               >
@@ -175,12 +162,12 @@ const StatusUpdate: React.FC<StatusUpdateProps> = ({
       )}
 
       {successMessage && (
-        <p className="status-update-feedback success" role="status" aria-live="polite">
+        <p className="m-0 text-xs font-semibold text-accent-green" role="status" aria-live="polite">
           {successMessage}
         </p>
       )}
       {errorMessage && (
-        <p className="status-update-feedback error" role="alert">
+        <p className="m-0 text-xs font-semibold text-[#f87171]" role="alert">
           {errorMessage}
         </p>
       )}
diff --git a/frontend/src/components/shipment/StatusUpdate/index.ts b/frontend/src/components/shipment/StatusUpdate/index.ts
new file mode 100644
index 0000000..23e0d9a
--- /dev/null
+++ b/frontend/src/components/shipment/StatusUpdate/index.ts
@@ -0,0 +1,2 @@
+export { default } from './StatusUpdate';
+export type { StatusUpdateProps, ShipmentMilestone } from './StatusUpdate';
diff --git a/frontend/src/components/shipment/TrackingTimeline/TrackingTimeline.css b/frontend/src/components/shipment/TrackingTimeline/TrackingTimeline.css
deleted file mode 100644
index cb9cd9a..0000000
--- a/frontend/src/components/shipment/TrackingTimeline/TrackingTimeline.css
+++ /dev/null
@@ -1,129 +0,0 @@
-.tracking-timeline {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  padding: 1rem;
-  max-width: 600px;
-}
-
-.timeline-item {
-  display: flex;
-  gap: 1rem;
-  position: relative;
-}
-
-.timeline-marker {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.timeline-icon {
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-  z-index: 1;
-}
-
-.timeline-icon-completed {
-  color: #2563eb;
-}
-
-.timeline-icon-current {
-  color: #2563eb;
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-    filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0));
-  }
-  50% {
-    opacity: 1;
-    filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.8));
-  }
-}
-
-.timeline-icon-upcoming {
-  color: #9ca3af;
-}
-
-.timeline-connector {
-  width: 2px;
-  flex-grow: 1;
-  min-height: 40px;
-  margin-top: 4px;
-  margin-bottom: 4px;
-}
-
-.timeline-connector-solid {
-  background-color: #2563eb;
-}
-
-.timeline-connector-dashed {
-  background-image: linear-gradient(to bottom, #9ca3af 50%, transparent 50%);
-  background-size: 2px 8px;
-  background-repeat: repeat-y;
-}
-
-.timeline-content {
-  flex-grow: 1;
-  padding-bottom: 2rem;
-}
-
-.timeline-item:last-child .timeline-content {
-  padding-bottom: 0;
-}
-
-.timeline-name {
-  font-size: 1rem;
-  font-weight: 600;
-  margin: 0 0 0.25rem 0;
-  color: #111827;
-}
-
-.timeline-item-upcoming .timeline-name {
-  color: #9ca3af;
-}
-
-.timeline-timestamp {
-  font-size: 0.875rem;
-  color: #6b7280;
-  margin: 0 0 0.25rem 0;
-}
-
-.timeline-item-upcoming .timeline-timestamp {
-  color: #9ca3af;
-}
-
-.timeline-location {
-  font-size: 0.875rem;
-  color: #6b7280;
-  margin: 0;
-}
-
-.timeline-item-upcoming .timeline-location {
-  color: #9ca3af;
-}
-
-/* Responsive adjustments */
-@media (max-width: 640px) {
-  .tracking-timeline {
-    padding: 0.5rem;
-  }
-
-  .timeline-item {
-    gap: 0.75rem;
-  }
-
-  .timeline-name {
-    font-size: 0.9375rem;
-  }
-
-  .timeline-timestamp,
-  .timeline-location {
-    font-size: 0.8125rem;
-  }
-}
diff --git a/frontend/src/components/shipment/TrackingTimeline/TrackingTimeline.test.tsx b/frontend/src/components/shipment/TrackingTimeline/TrackingTimeline.test.tsx
index d97219b..4ed36e5 100644
--- a/frontend/src/components/shipment/TrackingTimeline/TrackingTimeline.test.tsx
+++ b/frontend/src/components/shipment/TrackingTimeline/TrackingTimeline.test.tsx
@@ -56,50 +56,68 @@ describe('TrackingTimeline', () => {
 
     expect(screen.getByText('Order Placed')).toBeInTheDocument();
     expect(screen.getByText('2026-02-20 10:00 AM')).toBeInTheDocument();
-    expect(screen.getByText('New York, NY')).toBeInTheDocument();
+    expect(screen.getAllByText('New York, NY').length).toBeGreaterThanOrEqual(1);
 
     expect(screen.getByText('Out for Delivery')).toBeInTheDocument();
     expect(screen.getByText('2026-02-23 09:00 AM')).toBeInTheDocument();
-    expect(screen.getByText('Boston, MA')).toBeInTheDocument();
+    expect(screen.getAllByText('Boston, MA').length).toBeGreaterThanOrEqual(1);
   });
 
   it('shows visual distinction between completed, current, and upcoming nodes', () => {
     render(<TrackingTimeline milestones={mockMilestones} />);
 
-    const completedIcon = screen.getByLabelText('Completed');
-    expect(completedIcon).toHaveClass('timeline-icon-completed');
+    // Icons use aria-label to indicate status
+    const completedIcons = screen.getAllByLabelText('Completed');
+    expect(completedIcons.length).toBeGreaterThanOrEqual(1);
 
     const currentIcon = screen.getByLabelText('Current');
-    expect(currentIcon).toHaveClass('timeline-icon-current');
+    expect(currentIcon).toBeInTheDocument();
 
     const upcomingIcon = screen.getByLabelText('Upcoming');
-    expect(upcomingIcon).toHaveClass('timeline-icon-upcoming');
+    expect(upcomingIcon).toBeInTheDocument();
   });
 
-  it('applies correct CSS classes for milestone status', () => {
-    const { container } = render(<TrackingTimeline milestones={mockMilestones} />);
+  it('renders the correct number of completed, current, and upcoming icons', () => {
+    render(<TrackingTimeline milestones={mockMilestones} />);
+
+    expect(screen.getAllByLabelText('Completed').length).toBe(3);
+    expect(screen.getAllByLabelText('Current').length).toBe(1);
+    expect(screen.getAllByLabelText('Upcoming').length).toBe(1);
+  });
 
-    const completedItems = container.querySelectorAll('.timeline-item-completed');
-    expect(completedItems.length).toBe(3);
+  it('marks the current milestone as the active step for assistive technologies', () => {
+    render(<TrackingTimeline milestones={mockMilestones} />);
+
+    const currentMilestone = screen.getByRole('listitem', { name: /out for delivery/i });
+    expect(currentMilestone).toHaveAttribute('aria-current', 'step');
+  });
 
-    const currentItems = container.querySelectorAll('.timeline-item-current');
-    expect(currentItems.length).toBe(1);
+  it('renders connectors between milestones (n-1 connectors for n milestones)', () => {
+    const { container } = render(<TrackingTimeline milestones={mockMilestones} />);
 
-    const upcomingItems = container.querySelectorAll('.timeline-item-upcoming');
-    expect(upcomingItems.length).toBe(1);
+    // Connectors are aria-hidden divs (not SVGs) between milestone items
+    const connectors = container.querySelectorAll('div[aria-hidden="true"]');
+    expect(connectors.length).toBe(mockMilestones.length - 1);
   });
 
-  it('renders solid connectors for completed milestones', () => {
+  it('completed connectors use solid background color', () => {
     const { container } = render(<TrackingTimeline milestones={mockMilestones} />);
 
-    const solidConnectors = container.querySelectorAll('.timeline-connector-solid');
+    const connectors = container.querySelectorAll('div[aria-hidden="true"]');
+    // First 3 milestones are completed — their connectors should have bg-accent-blue
+    const solidConnectors = Array.from(connectors).filter(el =>
+      el.className.includes('bg-accent-blue')
+    );
     expect(solidConnectors.length).toBeGreaterThan(0);
   });
 
-  it('renders dashed connectors for current and upcoming milestones', () => {
+  it('non-completed connectors use dashed style', () => {
     const { container } = render(<TrackingTimeline milestones={mockMilestones} />);
 
-    const dashedConnectors = container.querySelectorAll('.timeline-connector-dashed');
+    const connectors = container.querySelectorAll('div[aria-hidden="true"]');
+    const dashedConnectors = Array.from(connectors).filter(el =>
+      el.className.includes('connector-dashed')
+    );
     expect(dashedConnectors.length).toBeGreaterThan(0);
   });
 
diff --git a/frontend/src/components/shipment/TrackingTimeline/TrackingTimeline.tsx b/frontend/src/components/shipment/TrackingTimeline/TrackingTimeline.tsx
index 66876fa..c60437f 100644
--- a/frontend/src/components/shipment/TrackingTimeline/TrackingTimeline.tsx
+++ b/frontend/src/components/shipment/TrackingTimeline/TrackingTimeline.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import './TrackingTimeline.css';
 
 export interface Milestone {
   id: string;
@@ -18,82 +17,112 @@ const TrackingTimeline: React.FC<TrackingTimelineProps> = ({ milestones }) => {
     switch (status) {
       case 'completed':
         return (
-          <svg
-            className="timeline-icon timeline-icon-completed"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            aria-label="Completed"
-          >
-            <circle cx="12" cy="12" r="10" fill="currentColor" />
-            <path
-              d="M8 12l3 3 5-6"
-              stroke="white"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
+          <div className="relative flex items-center justify-center">
+            <div className="absolute w-8 h-8 bg-accent-blue/10 rounded-full scale-110" />
+            <svg
+              className="w-6 h-6 shrink-0 z-10 text-accent-blue"
+              width="24" height="24" viewBox="0 0 24 24" fill="none"
+              xmlns="http://www.w3.org/2000/svg" aria-label="Completed"
+            >
+              <circle cx="12" cy="12" r="10" fill="currentColor" />
+              <path d="M8 12l3 3 5-6" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </div>
         );
       case 'current':
         return (
-          <svg
-            className="timeline-icon timeline-icon-current"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            aria-label="Current"
-          >
-            <circle cx="12" cy="12" r="10" fill="currentColor" />
-            <circle cx="12" cy="12" r="4" fill="white" />
-          </svg>
+          <div className="relative flex items-center justify-center">
+            <div className="absolute w-8 h-8 bg-accent-blue/20 rounded-full animate-ping" />
+            <svg
+              className="w-6 h-6 shrink-0 z-10 text-accent-blue animate-timeline-pulse"
+              width="24" height="24" viewBox="0 0 24 24" fill="none"
+              xmlns="http://www.w3.org/2000/svg" aria-label="Current"
+            >
+              <circle cx="12" cy="12" r="10" fill="currentColor" />
+              <circle cx="12" cy="12" r="4" fill="white" />
+            </svg>
+          </div>
         );
       case 'upcoming':
         return (
-          <svg
-            className="timeline-icon timeline-icon-upcoming"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            aria-label="Upcoming"
-          >
-            <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" fill="none" />
-          </svg>
+          <div className="relative flex items-center justify-center">
+            <svg
+              className="w-6 h-6 shrink-0 z-10 text-text-secondary/40"
+              width="24" height="24" viewBox="0 0 24 24" fill="none"
+              xmlns="http://www.w3.org/2000/svg" aria-label="Upcoming"
+            >
+              <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" fill="none" />
+            </svg>
+          </div>
         );
     }
   };
 
   return (
-    <div className="tracking-timeline" role="list" aria-label="Shipment tracking timeline">
+    <div className="flex flex-col p-6 sm:p-4 max-w-[700px] w-full bg-background-card/50 backdrop-blur-sm border border-border/50 rounded-2xl shadow-xl" role="list" aria-label="Shipment tracking timeline">
       {milestones.map((milestone, index) => (
         <div
           key={milestone.id}
-          className={`timeline-item timeline-item-${milestone.status}`}
+          className={`flex gap-6 sm:gap-4 relative group transition-all duration-300 ${
+            milestone.status === 'upcoming' ? 'opacity-60 grayscale-[0.5]' : 'opacity-100'
+          }`}
           role="listitem"
+          aria-label={milestone.name}
+          aria-current={milestone.status === 'current' ? 'step' : undefined}
         >
-          <div className="timeline-marker">
+          {/* Vertical Line Connector */}
+          <div className="flex flex-col items-center shrink-0 w-8">
             {getStatusIcon(milestone.status)}
             {index < milestones.length - 1 && (
               <div
-                className={`timeline-connector ${
+                className={`w-0.5 grow min-h-[50px] my-1 transition-colors duration-500 ${
                   milestone.status === 'completed'
-                    ? 'timeline-connector-solid'
-                    : 'timeline-connector-dashed'
+                    ? 'bg-accent-blue shadow-[0_0_8px_rgba(59,130,246,0.3)]'
+                    : 'connector-dashed'
                 }`}
                 aria-hidden="true"
               />
             )}
           </div>
-          <div className="timeline-content">
-            <h3 className="timeline-name">{milestone.name}</h3>
-            <p className="timeline-timestamp">{milestone.timestamp}</p>
-            <p className="timeline-location">{milestone.location}</p>
+
+          {/* Milestone Details Card-like content */}
+          <div className="grow pb-10 last:pb-0 pt-0.5 group-hover:translate-x-1 transition-transform duration-300">
+            <div className={`p-4 rounded-xl border transition-all duration-300 ${
+              milestone.status === 'current' 
+                ? 'bg-accent-blue/5 border-accent-blue/30 shadow-[0_0_15px_rgba(59,130,246,0.1)]' 
+                : 'bg-transparent border-transparent hover:bg-white/5 hover:border-white/10'
+            }`}>
+              <h3 className={`text-base font-bold m-0 mb-1.5 flex items-center gap-2 ${
+                milestone.status === 'upcoming' ? 'text-text-secondary' : 'text-text-primary'
+              }`}>
+                {milestone.name}
+                {milestone.status === 'current' && (
+                  <span className="text-[10px] uppercase tracking-wider bg-accent-blue text-white px-2 py-0.5 rounded-full font-black animate-pulse">
+                    Live
+                  </span>
+                )}
+              </h3>
+              
+              <div className="flex flex-col gap-1.5">
+                <p className={`text-xs sm:text-[0.8125rem] m-0 flex items-center gap-2 font-medium ${
+                  milestone.status === 'upcoming' ? 'text-text-secondary/70' : 'text-text-secondary'
+                }`}>
+                  <svg className="w-3.5 h-3.5 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  {milestone.timestamp}
+                </p>
+                <p className={`text-xs sm:text-[0.8125rem] m-0 flex items-center gap-2 font-medium ${
+                  milestone.status === 'upcoming' ? 'text-text-secondary/70' : 'text-text-secondary'
+                }`}>
+                  <svg className="w-3.5 h-3.5 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                  {milestone.location}
+                </p>
+              </div>
+            </div>
           </div>
         </div>
       ))}
diff --git a/frontend/src/components/shipment/TrackingTimeline/index.ts b/frontend/src/components/shipment/TrackingTimeline/index.ts
new file mode 100644
index 0000000..518863d
--- /dev/null
+++ b/frontend/src/components/shipment/TrackingTimeline/index.ts
@@ -0,0 +1,2 @@
+export { default } from './TrackingTimeline';
+export type { TrackingTimelineProps, Milestone } from './TrackingTimeline';
diff --git a/frontend/src/components/ui/StatusBadge/StatusBadge.css b/frontend/src/components/ui/StatusBadge/StatusBadge.css
new file mode 100644
index 0000000..e14a8ba
--- /dev/null
+++ b/frontend/src/components/ui/StatusBadge/StatusBadge.css
@@ -0,0 +1,29 @@
+.status-badge {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.status-in-transit {
+  background-color: rgba(59, 130, 246, 0.1);
+  color: #60a5fa;
+}
+
+.status-delivered {
+  background-color: rgba(16, 185, 129, 0.1);
+  color: #34d399;
+}
+
+.status-pending {
+  background-color: rgba(245, 158, 11, 0.1);
+  color: #fbbf24;
+}
+
+.status-cancelled {
+  background-color: rgba(239, 68, 68, 0.1);
+  color: #f87171;
+}
\ No newline at end of file
diff --git a/frontend/src/components/ui/StatusBadge/StatusBadge.tsx b/frontend/src/components/ui/StatusBadge/StatusBadge.tsx
new file mode 100644
index 0000000..491ccc4
--- /dev/null
+++ b/frontend/src/components/ui/StatusBadge/StatusBadge.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import './StatusBadge.css';
+
+export type ShipmentStatus = 
+  | 'In Transit'
+  | 'Delivered'
+  | 'Pending Approval'
+  | 'Cancelled'
+  | 'Picked Up'
+  | 'At Checkpoint'
+  | 'Out for Delivery';
+
+export interface StatusBadgeProps {
+  status: ShipmentStatus;
+  className?: string;
+}
+
+export const StatusBadge: React.FC<StatusBadgeProps> = ({ 
+  status, 
+  className = '' 
+}) => {
+  const getStatusClassName = (status: ShipmentStatus): string => {
+    switch (status) {
+      case 'In Transit':
+      case 'Picked Up':
+      case 'At Checkpoint':
+      case 'Out for Delivery':
+        return 'status-in-transit';
+      case 'Delivered':
+        return 'status-delivered';
+      case 'Pending Approval':
+        return 'status-pending';
+      case 'Cancelled':
+        return 'status-cancelled';
+      default:
+        return 'status-in-transit';
+    }
+  };
+
+  return (
+    <span 
+      className={`status-badge ${getStatusClassName(status)} ${className}`}
+      aria-label={`Shipment status: ${status}`}
+    >
+      {status}
+    </span>
+  );
+};
+
+export default StatusBadge;
\ No newline at end of file
diff --git a/frontend/src/components/ui/StatusBadge/index.ts b/frontend/src/components/ui/StatusBadge/index.ts
new file mode 100644
index 0000000..66736cf
--- /dev/null
+++ b/frontend/src/components/ui/StatusBadge/index.ts
@@ -0,0 +1,2 @@
+export { StatusBadge, type StatusBadgeProps, type ShipmentStatus } from './StatusBadge';
+export { default } from './StatusBadge';
\ No newline at end of file
diff --git a/frontend/src/context/ToastContext.tsx b/frontend/src/context/ToastContext.tsx
new file mode 100644
index 0000000..a634a9f
--- /dev/null
+++ b/frontend/src/context/ToastContext.tsx
@@ -0,0 +1,63 @@
+import React, { createContext, useContext, useState, useCallback } from "react";
+import { Toast } from "../components/notifications/Toast/Toast";
+
+export type ToastType = "success" | "error" | "info" | "warning";
+
+export interface ToastMessage {
+  id: string;
+  type: ToastType;
+  message: string;
+  navigateTo?: string;
+}
+
+interface ToastContextType {
+  addToast: (message: string, type: ToastType, navigateTo?: string) => void;
+  removeToast: (id: string) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [toasts, setToasts] = useState<ToastMessage[]>([]);
+
+  const addToast = useCallback(
+    (message: string, type: ToastType, navigateTo?: string) => {
+      const id = Math.random().toString(36).substring(2, 9);
+      setToasts((prev) => {
+        const newList = [...prev, { id, type, message, navigateTo }];
+        // Keep only the latest 3
+        return newList.slice(-3);
+      });
+    },
+    [],
+  );
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ addToast, removeToast }}>
+      {children}
+      {/* Toast Container for Positioning */}
+      <div className="fixed top-4 right-4 z-50 flex flex-col gap-3 pointer-events-none">
+        {toasts.map((toast) => (
+          <Toast
+            key={toast.id}
+            {...toast}
+            onClose={() => removeToast(toast.id)}
+          />
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+};
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) throw new Error("useToast must be used within a ToastProvider");
+  return context;
+};
diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
new file mode 100644
index 0000000..77e9d9f
--- /dev/null
+++ b/frontend/src/hooks/index.ts
@@ -0,0 +1 @@
+export { useAuth } from './useAuth';
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 892075e..f96aa64 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,31 +1,443 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap");
+@import "tailwindcss";
 
-  color-scheme: dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #050505;
+/* ── Shared keyframe animations (used by migrated components) ── */
+@keyframes pulse-glow {
+  0%,
+  100% {
+    opacity: 1;
+    filter: drop-shadow(0 0 0 rgba(0, 217, 255, 0));
+  }
+  50% {
+    opacity: 1;
+    filter: drop-shadow(0 0 12px rgba(0, 217, 255, 0.8));
+  }
+}
+
+@keyframes timeline-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0));
+  }
+  50% {
+    opacity: 1;
+    filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.8));
+  }
+}
+
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes twinkle {
+  0%,
+  100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.4);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes shipment-skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+.animate-in {
+  animation: slideInRight 0.3s ease-out forwards;
 }
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+/* Utility classes for animations not expressible in Tailwind alone */
+.animate-pulse-glow {
+  animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+.animate-timeline-pulse {
+  animation: timeline-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+.animate-slide-down {
+  animation: slide-down 0.3s ease;
+}
+.animate-fade-in-up {
+  animation: fade-in-up 1s ease-out;
+}
+.animate-spin-svg {
+  animation: spin 2s linear infinite;
+}
+.animate-dash {
+  animation: dash 1.5s ease-in-out infinite;
+  stroke-linecap: round;
+}
+.animate-shimmer {
+  background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
+  background-size: 250% 100%;
+  animation: shipment-skeleton-shimmer 1.4s infinite;
+}
+.animate-shimmer-teal {
+  background: linear-gradient(
+    90deg,
+    rgba(98, 255, 255, 0.05) 25%,
+    rgba(98, 255, 255, 0.15) 50%,
+    rgba(98, 255, 255, 0.05) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+/* Connector line patterns */
+.connector-dashed {
+  background-image: linear-gradient(to bottom, #9ca3af 50%, transparent 50%);
+  background-size: 2px 8px;
+  background-repeat: repeat-y;
+}
+.connector-dashed-milestone {
+  background-image: linear-gradient(to bottom, #6b7280 50%, transparent 50%);
+  background-size: 3px 10px;
+  background-repeat: repeat-y;
 }
 
-body {
-  min-width: 320px;
-  min-height: 100vh;
-  background-color: #050505;
+/* Twinkle stars */
+.hero__star {
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background: rgba(180, 230, 255, 0.6);
+  animation: twinkle var(--d, 3s) ease-in-out infinite var(--delay, 0s);
+}
+.hero__star:nth-child(1) {
+  top: 5%;
+  left: 10%;
+  --d: 2.5s;
+  --delay: 0.1s;
+}
+.hero__star:nth-child(2) {
+  top: 8%;
+  left: 25%;
+  --d: 3.2s;
+  --delay: 0.5s;
+}
+.hero__star:nth-child(3) {
+  top: 3%;
+  left: 40%;
+  --d: 2.8s;
+  --delay: 0.8s;
+}
+.hero__star:nth-child(4) {
+  top: 12%;
+  left: 55%;
+  --d: 3.5s;
+  --delay: 0.2s;
+}
+.hero__star:nth-child(5) {
+  top: 6%;
+  left: 70%;
+  --d: 2.2s;
+  --delay: 1s;
+}
+.hero__star:nth-child(6) {
+  top: 15%;
+  left: 85%;
+  --d: 3s;
+  --delay: 0.4s;
+}
+.hero__star:nth-child(7) {
+  top: 20%;
+  left: 5%;
+  --d: 2.6s;
+  --delay: 0.7s;
+}
+.hero__star:nth-child(8) {
+  top: 18%;
+  left: 18%;
+  --d: 3.1s;
+  --delay: 0.3s;
+}
+.hero__star:nth-child(9) {
+  top: 22%;
+  left: 32%;
+  --d: 2.4s;
+  --delay: 0.9s;
+}
+.hero__star:nth-child(10) {
+  top: 16%;
+  left: 48%;
+  --d: 3.3s;
+  --delay: 0.6s;
+}
+.hero__star:nth-child(11) {
+  top: 25%;
+  left: 62%;
+  --d: 2.7s;
+  --delay: 0.1s;
+}
+.hero__star:nth-child(12) {
+  top: 19%;
+  left: 78%;
+  --d: 3.4s;
+  --delay: 0.5s;
+}
+.hero__star:nth-child(13) {
+  top: 30%;
+  left: 2%;
+  --d: 2.3s;
+  --delay: 0.8s;
+}
+.hero__star:nth-child(14) {
+  top: 35%;
+  left: 14%;
+  --d: 3s;
+  --delay: 0.2s;
+}
+.hero__star:nth-child(15) {
+  top: 28%;
+  left: 90%;
+  --d: 2.9s;
+  --delay: 0.7s;
+}
+.hero__star:nth-child(16) {
+  top: 40%;
+  left: 95%;
+  --d: 2.5s;
+  --delay: 0.4s;
+}
+.hero__star:nth-child(17) {
+  top: 45%;
+  left: 8%;
+  --d: 3.2s;
+  --delay: 1.1s;
+}
+.hero__star:nth-child(18) {
+  top: 50%;
+  left: 20%;
+  --d: 2.8s;
+  --delay: 0.3s;
+}
+.hero__star:nth-child(19) {
+  top: 55%;
+  left: 75%;
+  --d: 3.1s;
+  --delay: 0.6s;
+}
+.hero__star:nth-child(20) {
+  top: 60%;
+  left: 88%;
+  --d: 2.6s;
+  --delay: 0.9s;
+}
+.hero__star:nth-child(21) {
+  top: 2%;
+  left: 92%;
+  --d: 3.3s;
+  --delay: 0.2s;
+}
+.hero__star:nth-child(22) {
+  top: 10%;
+  left: 3%;
+  --d: 2.4s;
+  --delay: 0.7s;
+}
+.hero__star:nth-child(23) {
+  top: 70%;
+  left: 12%;
+  --d: 2.9s;
+  --delay: 0.5s;
+}
+.hero__star:nth-child(24) {
+  top: 75%;
+  left: 30%;
+  --d: 3s;
+  --delay: 0.1s;
+}
+.hero__star:nth-child(25) {
+  top: 80%;
+  left: 50%;
+  --d: 2.7s;
+  --delay: 0.8s;
 }
 
-#root {
+/* Password strength bar */
+.strength-progress {
+  height: 100%;
+  width: 0%;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 2px;
+}
+.strength-progress.weak {
+  background: #ff4d4d;
+  width: 33.33%;
+}
+.strength-progress.fair {
+  background: #ffab00;
+  width: 66.66%;
+}
+.strength-progress.strong {
+  background: #00e676;
   width: 100%;
-  min-height: 100vh;
-}
\ No newline at end of file
+}
+
+/* Custom checkbox */
+.checkbox-container {
+  display: block;
+  position: relative;
+  padding-left: 28px;
+  cursor: pointer;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.6);
+  user-select: none;
+}
+.checkbox-container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+.checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 18px;
+  width: 18px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+.checkbox-container:hover input ~ .checkmark {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.checkbox-container input:checked ~ .checkmark {
+  background-color: #00dac1;
+  border-color: #00dac1;
+}
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+.checkbox-container input:checked ~ .checkmark:after {
+  display: block;
+}
+.checkbox-container .checkmark:after {
+  left: 6px;
+  top: 2px;
+  width: 3px;
+  height: 8px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+@layer base {
+  :root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+
+    color-scheme: dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #050505;
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    /* CSS Variables for compatibility */
+    --bg-card: #0f1419;
+    --border-color: #1e2433;
+    --text-secondary: #9ca3af;
+    --accent-blue: #3b82f6;
+    --accent-green: #10b981;
+    --accent-red: #ef4444;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    min-width: 320px;
+    min-height: 100vh;
+    background-color: #050505;
+  }
+
+  #root {
+    width: 100%;
+    min-height: 100vh;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index bef5202..cebd72a 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,10 +1,13 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+import { ToastProvider } from "./context/ToastContext.tsx";
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <ToastProvider>
+      <App />
+    </ToastProvider>
   </StrictMode>,
-)
+);
diff --git a/frontend/src/pages/ComponentDemos/PaginationDemo/PaginationDemo.tsx b/frontend/src/pages/ComponentDemos/PaginationDemo/PaginationDemo.tsx
new file mode 100644
index 0000000..492f658
--- /dev/null
+++ b/frontend/src/pages/ComponentDemos/PaginationDemo/PaginationDemo.tsx
@@ -0,0 +1,18 @@
+import PaginationExample from '@components/common/Pagination/Pagination.example';
+
+function PaginationDemo() {
+  return (
+    <main className="min-h-screen bg-background p-8 text-text-primary">
+      <div className="mx-auto max-w-4xl">
+        <h1 className="text-3xl font-bold mb-2">Pagination Component Demo</h1>
+        <p className="text-text-secondary mb-8">
+          Use this page to validate pagination behavior, disabled states, and ellipsis rendering.
+        </p>
+
+        <PaginationExample />
+      </div>
+    </main>
+  );
+}
+
+export default PaginationDemo;
diff --git a/frontend/src/pages/Home/Home.css b/frontend/src/pages/Home/Home.css
deleted file mode 100644
index a98c16c..0000000
--- a/frontend/src/pages/Home/Home.css
+++ /dev/null
@@ -1,143 +0,0 @@
-.home-container {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: var(--bg-dark);
-  color: var(--text-main);
-  position: relative;
-  overflow: hidden;
-  font-family:
-    "Inter",
-    system-ui,
-    -apple-system,
-    sans-serif;
-  text-align: center;
-  padding: 20px;
-  margin: 0;
-}
-
-.home-container::before {
-  content: "";
-  position: absolute;
-  width: 600px;
-  height: 600px;
-  background: radial-gradient(
-    circle,
-    rgba(0, 218, 193, 0.15) 0%,
-    transparent 70%
-  );
-  top: -300px;
-  right: -200px;
-  z-index: 0;
-}
-
-.home-container::after {
-  content: "";
-  position: absolute;
-  width: 600px;
-  height: 600px;
-  background: radial-gradient(
-    circle,
-    rgba(22, 171, 255, 0.1) 0%,
-    transparent 70%
-  );
-  bottom: -300px;
-  left: -200px;
-  z-index: 0;
-}
-
-.home-content {
-  z-index: 1;
-  max-width: 800px;
-  animation: fadeIn 1s ease-out;
-  padding-top: 120px;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.home-title {
-  font-size: clamp(3rem, 8vw, 5rem);
-  font-weight: 800;
-  line-height: 1.1;
-  margin-bottom: 24px;
-  background: linear-gradient(135deg, #fff 30%, var(--teal-primary) 100%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.home-subtitle {
-  font-size: clamp(1rem, 3vw, 1.25rem);
-  color: var(--text-muted);
-  max-width: 600px;
-  margin: 0 auto 48px;
-  line-height: 1.6;
-}
-
-.home-actions {
-  display: flex;
-  gap: 20px;
-  justify-content: center;
-}
-
-.btn-primary,
-.btn-secondary {
-  padding: 16px 32px;
-  border-radius: 12px;
-  font-size: 1rem;
-  font-weight: 700;
-  text-decoration: none;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 160px;
-}
-
-.btn-primary {
-  background: linear-gradient(
-    135deg,
-    var(--teal-primary) 0%,
-    var(--teal-secondary) 100%
-  );
-  color: #000;
-}
-
-.btn-primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(0, 218, 193, 0.4);
-}
-
-.btn-secondary {
-  background: rgba(255, 255, 255, 0.05);
-  color: #fff;
-  border: 1px solid var(--border-color);
-  backdrop-filter: blur(10px);
-}
-
-.btn-secondary:hover {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.2);
-  transform: translateY(-2px);
-}
-
-@media (max-width: 480px) {
-  .home-actions {
-    flex-direction: column;
-    width: 100%;
-    max-width: 300px;
-    margin: 0 auto;
-  }
-}
diff --git a/frontend/src/pages/Home/Home.tsx b/frontend/src/pages/Home/Home.tsx
index b736dea..51f077d 100644
--- a/frontend/src/pages/Home/Home.tsx
+++ b/frontend/src/pages/Home/Home.tsx
@@ -1,11 +1,10 @@
 import React from "react";
 import Navbar from "@/components/Navbar/Navbar";
 import LandingPage from "../../LandingPage/LandingPage";
-import "./Home.css";
 
 const Home: React.FC = () => {
     return (
-        <div className="home-container">
+        <div className="min-h-screen flex flex-col items-center justify-center bg-background text-text-primary relative overflow-hidden text-center p-5 m-0">
             <Navbar />
             <LandingPage />
         </div>
diff --git a/frontend/src/pages/Notifications/NotificationsPage.tsx b/frontend/src/pages/Notifications/NotificationsPage.tsx
new file mode 100644
index 0000000..e30c960
--- /dev/null
+++ b/frontend/src/pages/Notifications/NotificationsPage.tsx
@@ -0,0 +1,292 @@
+import {
+  Bell, Settings, UserCircle, Search, Check,
+  Truck, FileText, AlertTriangle, Server, Receipt, DollarSign,
+} from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+type NotificationType = "all" | "shipments" | "settlements" | "system";
+
+interface Notification {
+  id: string;
+  type: NotificationType;
+  icon: "shipment" | "contract" | "alert" | "system" | "invoice" | "payment";
+  title: string;
+  badge?: string;
+  badgeColor?: string;
+  description: string;
+  timestamp: string;
+  actionLabel?: string;
+  isRead: boolean;
+  link?: string;
+}
+
+const iconStyles: Record<string, string> = {
+  shipment: "bg-[rgba(37,99,235,0.1)] text-[#3b82f6]",
+  contract: "bg-[rgba(5,150,105,0.1)] text-[#10b981]",
+  alert:    "bg-[rgba(220,38,38,0.1)] text-[#ef4444]",
+  system:   "bg-[rgba(107,114,128,0.1)] text-[#9ca3af]",
+  invoice:  "bg-[rgba(107,114,128,0.1)] text-[#9ca3af]",
+  payment:  "bg-[rgba(74,222,128,0.1)] text-[#4ade80]",
+};
+
+const NotificationsPage = () => {
+  const navigate = useNavigate();
+  const [activeFilter, setActiveFilter] = useState<NotificationType>("all");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 10;
+
+  const [notificationsList, setNotificationsList] = useState<Notification[]>([
+    { id: "1",  type: "shipments",   icon: "shipment", title: "Shipment Arrived at Port",       badge: "SHIPMENT #NV-9920", badgeColor: "#137FEC", description: "The container has cleared customs in Singapore and is ready for last-mile delivery. All documents have been verified on-chain.", timestamp: "2 mins ago",              actionLabel: "View Details",   isRead: false, link: "/dashboard/shipments/NV-9920" },
+    { id: "2",  type: "settlements", icon: "contract", title: "Smart Contract Executed",         badge: "USDC SETTLEMENT",   badgeColor: "#4ADE80", description: "Payment of 500 USDC has been automatically released to Carrier A following successful delivery confirmation.",              timestamp: "1 hour ago",              actionLabel: "View Contract",  isRead: false, link: "/dashboard/settlements" },
+    { id: "3",  type: "shipments",   icon: "alert",    title: "Documentation Required",          badge: "ACTION NEEDED",     badgeColor: "#FB923C", description: "Shipment #NV-8812 is missing the 'Bill of Lading' document. Upload immediately to prevent delays.",                        timestamp: "3 hours ago",             actionLabel: "Upload",         isRead: false, link: "/dashboard/shipments/NV-8812" },
+    { id: "4",  type: "settlements", icon: "payment",  title: "Payment Received",                badge: "PAYMENT #PAY-1024", badgeColor: "#4ADE80", description: "Payment of 1,200 USDC received from Client B for shipment #NV-9815.",                                                     timestamp: "5 hours ago",             actionLabel: "View Details",   isRead: false, link: "/dashboard/settlements" },
+    { id: "5",  type: "shipments",   icon: "shipment", title: "Shipment In Transit",             badge: "SHIPMENT #NV-9921", badgeColor: "#137FEC", description: "Your shipment is currently in transit and expected to arrive at Los Angeles Port on Feb 28.",                              timestamp: "8 hours ago",             actionLabel: "Track",          isRead: false, link: "/dashboard/shipments/NV-9921" },
+    { id: "6",  type: "system",      icon: "alert",    title: "Security Alert",                  badge: "SECURITY",          badgeColor: "#EF4444", description: "New login detected from IP 192.168.1.1. If this wasn't you, please secure your account immediately.",                       timestamp: "12 hours ago",            actionLabel: "Review",         isRead: false, link: "/dashboard/settings/security" },
+    { id: "7",  type: "shipments",   icon: "shipment", title: "Customs Clearance Completed",     badge: "SHIPMENT #NV-9918", badgeColor: "#137FEC", description: "Customs clearance completed for shipment #NV-9918 at Dubai Port. Ready for final delivery.",                              timestamp: "Yesterday at 11:30 PM",   actionLabel: "View Details",   isRead: true,  link: "/dashboard/shipments/NV-9918" },
+    { id: "8",  type: "settlements", icon: "contract", title: "Settlement Pending",              badge: "PENDING",           badgeColor: "#F59E0B", description: "Settlement for shipment #NV-9917 is pending approval. Expected completion in 24 hours.",                                   timestamp: "Yesterday at 6:45 PM",    actionLabel: "View Contract",  isRead: true,  link: "/dashboard/settlements" },
+    { id: "9",  type: "system",      icon: "system",   title: "System Maintenance Scheduled",                                                       description: "Routine maintenance is scheduled for Friday 23:00 UTC. The platform will be unavailable for approx 30 mins.",              timestamp: "Yesterday at 4:30 PM",                                   isRead: true,  link: "/dashboard" },
+    { id: "10", type: "shipments",   icon: "shipment", title: "Shipment Departed",               badge: "SHIPMENT #NV-9815", badgeColor: "#137FEC", description: "Vessel 'Ever Green' has departed from Rotterdam Port en route to New York.",                                               timestamp: "Yesterday at 10:15 AM",                                  isRead: true,  link: "/dashboard/shipments/NV-9815" },
+    { id: "11", type: "settlements", icon: "invoice",  title: "Invoice Generated",               badge: "INV-2026-001",      badgeColor: "#6B7280", description: "Monthly invoice for October services has been generated and sent to finance.",                                              timestamp: "Yesterday at 9:00 AM",                                   isRead: true,  link: "/dashboard/settlements" },
+    { id: "12", type: "shipments",   icon: "alert",    title: "Delivery Delayed",                badge: "SHIPMENT #NV-9810", badgeColor: "#FB923C", description: "Shipment #NV-9810 has been delayed due to weather conditions. New ETA: March 2, 2026.",                                   timestamp: "2 days ago",              actionLabel: "View Details",   isRead: true,  link: "/dashboard/shipments/NV-9810" },
+    { id: "13", type: "settlements", icon: "payment",  title: "Payment Processed",               badge: "PAYMENT #PAY-1020", badgeColor: "#4ADE80", description: "Payment of 850 USDC has been processed for carrier services on shipment #NV-9808.",                                       timestamp: "2 days ago",              actionLabel: "View Details",   isRead: true,  link: "/dashboard/settlements" },
+    { id: "14", type: "shipments",   icon: "shipment", title: "Shipment Delivered",              badge: "SHIPMENT #NV-9805", badgeColor: "#4ADE80", description: "Shipment #NV-9805 has been successfully delivered to the destination. Customer signature received.",                       timestamp: "3 days ago",              actionLabel: "View Proof",     isRead: true,  link: "/dashboard/shipments/NV-9805" },
+    { id: "15", type: "system",      icon: "system",   title: "Platform Update",                 badge: "UPDATE v2.1.0",     badgeColor: "#8B5CF6", description: "New features added: Enhanced tracking, multi-currency support, and improved analytics dashboard.",                         timestamp: "3 days ago",              actionLabel: "Learn More",     isRead: true,  link: "/dashboard/updates" },
+    { id: "16", type: "settlements", icon: "contract", title: "Contract Renewal Due",            badge: "CONTRACT #CNT-445", badgeColor: "#F59E0B", description: "Your contract with Carrier C is due for renewal in 7 days. Please review and renew to avoid service interruption.",        timestamp: "4 days ago",              actionLabel: "Renew",          isRead: true,  link: "/dashboard/contracts" },
+  ]);
+
+  const getIconComponent = (iconType: string) => {
+    switch (iconType) {
+      case "shipment": return <Truck size={20} />;
+      case "contract": return <FileText size={20} />;
+      case "alert":    return <AlertTriangle size={20} />;
+      case "system":   return <Server size={20} />;
+      case "invoice":  return <Receipt size={20} />;
+      case "payment":  return <DollarSign size={20} />;
+      default:         return <Bell size={20} />;
+    }
+  };
+
+  const handleMarkAllAsRead = () =>
+    setNotificationsList(notificationsList.map((n) => ({ ...n, isRead: true })));
+
+  const handleNotificationClick = (id: string) => {
+    const notification = notificationsList.find((n) => n.id === id);
+    setNotificationsList(notificationsList.map((n) => n.id === id ? { ...n, isRead: true } : n));
+    if (notification?.link) navigate(notification.link);
+  };
+
+  const filteredNotifications = notificationsList.filter((n) => {
+    const matchesFilter = activeFilter === "all" || n.type === activeFilter;
+    const matchesSearch = searchQuery === "" ||
+      n.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      n.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      n.badge?.toLowerCase().includes(searchQuery.toLowerCase());
+    return matchesFilter && matchesSearch;
+  });
+
+  const totalPages = Math.ceil(filteredNotifications.length / itemsPerPage);
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const paginatedNotifications = filteredNotifications.slice(startIndex, startIndex + itemsPerPage);
+  const getFilterCount = (type: NotificationType) =>
+    type === "all" ? notificationsList.length : notificationsList.filter((n) => n.type === type).length;
+
+  const todayNotifications = paginatedNotifications.filter((n) => !n.isRead);
+  const olderNotifications = paginatedNotifications.filter((n) => n.isRead);
+
+  const filters: { key: NotificationType; label: string }[] = [
+    { key: "all", label: "All" },
+    { key: "shipments", label: "Shipments" },
+    { key: "settlements", label: "Settlements" },
+    { key: "system", label: "System" },
+  ];
+
+  const NotificationCard = ({ notification }: { notification: Notification }) => (
+    <div
+      className={`border rounded-xl p-5 flex gap-4 transition-all cursor-pointer ${
+        notification.isRead
+          ? "bg-[#1a1f28] border-[#374151]"
+          : "bg-[#1f2937] border-[#374151] hover:bg-[#283039] hover:border-[#4b5563]"
+      }`}
+      onClick={() => handleNotificationClick(notification.id)}
+    >
+      {/* Icon */}
+      <div className={`w-12 h-12 rounded-full flex items-center justify-center shrink-0 relative ${iconStyles[notification.icon]}`}>
+        {getIconComponent(notification.icon)}
+        {!notification.isRead && (
+          <div className="absolute top-1 right-1 w-2 h-2 bg-[#3b82f6] rounded-full" />
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 flex flex-col gap-2">
+        <div className="flex items-center gap-3 flex-wrap">
+          <span className={`text-base font-semibold ${notification.isRead ? "text-[#6b7280] font-medium" : "text-white font-bold"}`}>
+            {notification.title}
+          </span>
+          {notification.badge && (
+            <span
+              className="px-2.5 py-1 rounded text-[11px] font-semibold tracking-[0.5px] text-white inline-flex items-center whitespace-nowrap leading-none"
+              style={notification.isRead
+                ? { backgroundColor: 'transparent', border: `1px solid ${notification.badgeColor}`, color: notification.badgeColor }
+                : { backgroundColor: notification.badgeColor, borderColor: notification.badgeColor }}
+            >
+              {notification.badge}
+            </span>
+          )}
+        </div>
+        <p className={`text-sm leading-[1.5] m-0 ${notification.isRead ? "text-[#6b7280]" : "text-[#9ca3af]"}`}>
+          {notification.description}
+        </p>
+        <span className="text-xs text-[#6b7280]">{notification.timestamp}</span>
+      </div>
+
+      {/* Actions */}
+      {!notification.isRead && (
+        <div className="flex items-center gap-2 shrink-0">
+          {notification.actionLabel && (
+            <button
+              className={`px-4 py-2 rounded-md text-sm font-medium cursor-pointer transition-all border ${
+                notification.actionLabel === "View Contract"
+                  ? "bg-transparent text-[#2563eb] border-[#2563eb] hover:bg-[#2563eb] hover:text-white"
+                  : "bg-[#2563eb] border-[#2563eb] text-white hover:bg-[#1d4ed8] hover:border-[#1d4ed8]"
+              }`}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {notification.actionLabel}
+            </button>
+          )}
+          <button
+            className="w-9 h-9 rounded-md bg-transparent border border-[#374151] flex items-center justify-center cursor-pointer transition-all text-[#6b7280] hover:bg-[#374151] hover:border-[#4b5563] hover:text-white"
+            onClick={(e) => { e.stopPropagation(); handleNotificationClick(notification.id); }}
+          >
+            <Check size={16} />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <div className="bg-[#101922] min-h-screen text-white">
+      {/* Header */}
+      <div className="bg-[#111418] w-full border-b border-[#283039] px-8 py-4 flex justify-between items-center">
+        <div className="flex items-center gap-3">
+          <img src="/plan.svg" alt="Plan Icon" className="w-8 h-8" />
+          <p className="text-lg font-semibold m-0 tracking-[0.5px]">NAVIN</p>
+        </div>
+        <div className="flex items-center gap-8">
+          <nav className="flex gap-8">
+            {["Dashboard", "Shipments", "Settlements", "Contracts", "Network"].map((item) => (
+              <span key={item} className="cursor-pointer text-sm text-[#9ca3af] hover:text-white transition-colors">{item}</span>
+            ))}
+          </nav>
+          <div className="flex gap-3">
+            {[{ icon: <Bell size={20} />, active: true }, { icon: <Settings size={20} /> }, { icon: <UserCircle size={20} /> }].map(({ icon, active }, i) => (
+              <div key={i} className={`w-10 h-10 rounded-lg flex items-center justify-center cursor-pointer transition-colors ${active ? "bg-[#2563eb] text-white" : "bg-[#1f2937] text-[#9ca3af] hover:bg-[#374151]"}`}>
+                {icon}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="max-w-[1200px] mx-auto px-8 py-12">
+        {/* Content header */}
+        <div className="flex justify-between items-start mb-8">
+          <div>
+            <h1 className="text-[32px] font-semibold m-0 mb-2">Notifications</h1>
+            <p className="text-[#9ca3af] text-sm m-0">Stay updated with your supply chain events and settlements.</p>
+          </div>
+          <button
+            className="flex items-center gap-2 px-4 py-2.5 bg-[#283039] border border-[#374151] rounded-lg text-white text-sm cursor-pointer transition-all hover:bg-[#1f2937] hover:border-[#4b5563]"
+            onClick={handleMarkAllAsRead}
+          >
+            <Check size={16} /> Mark all as read
+          </button>
+        </div>
+
+        {/* Filters */}
+        <div className="flex justify-between items-center mb-8 gap-6 border-b border-[#283039] pb-5 flex-wrap">
+          <div className="flex gap-2 flex-wrap">
+            {filters.map(({ key, label }) => (
+              <button
+                key={key}
+                className={`px-4 py-2.5 border-none rounded-[20px] text-sm cursor-pointer transition-all flex items-center gap-2 ${
+                  activeFilter === key ? "bg-[#2563eb] text-white" : "bg-transparent text-[#9ca3af] hover:bg-[#1f2937] hover:text-white"
+                }`}
+                onClick={() => setActiveFilter(key)}
+              >
+                {label}
+                <span className="bg-[rgba(255,255,255,0.2)] px-2 py-0.5 rounded-xl text-xs font-semibold">
+                  {getFilterCount(key)}
+                </span>
+              </button>
+            ))}
+          </div>
+          <div className="flex items-center gap-3 bg-[#1f2937] border border-[#374151] rounded-lg px-4 py-2.5 flex-1 max-w-[400px]">
+            <Search size={18} className="text-[#6b7280] shrink-0" />
+            <input
+              type="text"
+              placeholder="Search by ID, contract, or keyword..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="bg-transparent border-none outline-none text-white text-sm flex-1 placeholder:text-[#6b7280]"
+            />
+          </div>
+        </div>
+
+        {/* Notifications list */}
+        <div className="flex flex-col gap-4">
+          {filteredNotifications.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-20 text-center text-[#6b7280]">
+              <Bell size={48} className="mb-6 opacity-50" />
+              <h3 className="text-xl font-semibold text-[#9ca3af] m-0 mb-2">No notifications found</h3>
+              <p className="text-sm m-0">
+                {searchQuery ? "Try adjusting your search terms" : "You're all caught up! No notifications in this category."}
+              </p>
+            </div>
+          ) : (
+            <>
+              {todayNotifications.length > 0 && (
+                <>
+                  <div className="text-xs font-semibold text-[#6b7280] tracking-[0.5px] mt-4 mb-2">TODAY</div>
+                  {todayNotifications.map((n) => <NotificationCard key={n.id} notification={n} />)}
+                </>
+              )}
+              {olderNotifications.length > 0 && (
+                <>
+                  <div className="text-xs font-semibold text-[#6b7280] tracking-[0.5px] mt-4 mb-2">EARLIER</div>
+                  {olderNotifications.map((n) => <NotificationCard key={n.id} notification={n} />)}
+                </>
+              )}
+              {totalPages > 1 && (
+                <div className="flex items-center justify-center gap-4 mt-8 py-5">
+                  <button
+                    className="px-5 py-2.5 bg-[#1f2937] border border-[#374151] rounded-lg text-[#9ca3af] text-sm cursor-pointer transition-all hover:not-disabled:bg-[#374151] hover:not-disabled:border-[#4b5563] hover:not-disabled:text-white disabled:opacity-50 disabled:cursor-not-allowed"
+                    onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                    disabled={currentPage === 1}
+                  >
+                    Previous
+                  </button>
+                  <span className="text-[#9ca3af] text-sm">Page {currentPage} of {totalPages}</span>
+                  <button
+                    className="px-5 py-2.5 bg-[#1f2937] border border-[#374151] rounded-lg text-[#9ca3af] text-sm cursor-pointer transition-all hover:not-disabled:bg-[#374151] hover:not-disabled:border-[#4b5563] hover:not-disabled:text-white disabled:opacity-50 disabled:cursor-not-allowed"
+                    onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                    disabled={currentPage === totalPages}
+                  >
+                    Next
+                  </button>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NotificationsPage;
diff --git a/frontend/src/pages/Payments/PaymentDetailModal/PaymentDetailModal.css b/frontend/src/pages/Payments/PaymentDetailModal/PaymentDetailModal.css
new file mode 100644
index 0000000..926d40d
--- /dev/null
+++ b/frontend/src/pages/Payments/PaymentDetailModal/PaymentDetailModal.css
@@ -0,0 +1,246 @@
+/* frontend/src/pages/Payments/PaymentDetailModal/PaymentDetailModal.css */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 13, 16, 0.85);
+  backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.3s ease;
+}
+
+.modal-content {
+  background: rgba(8, 40, 50, 0.95);
+  border: 1.5px solid rgba(98, 255, 255, 0.2);
+  border-radius: 2rem;
+  width: 90%;
+  max-width: 550px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 212, 200, 0.1);
+  animation: slideUp 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.close-btn {
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+  background: transparent;
+  border: none;
+  color: rgba(98, 255, 255, 0.5);
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.close-btn:hover {
+  color: #62ffff;
+}
+
+.modal-header {
+  padding: 2.5rem 2rem 1.5rem;
+  background: linear-gradient(to bottom, rgba(0, 212, 200, 0.05), transparent);
+  border-bottom: 1px solid rgba(98, 255, 255, 0.1);
+}
+
+.header-top {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+}
+
+.status-badge {
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.status-badge.pending { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
+.status-badge.escrowed { background: rgba(98, 255, 255, 0.15); color: #62ffff; border: 1px solid rgba(98, 255, 255, 0.3); }
+.status-badge.released { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
+.status-badge.failed { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
+
+.payment-id {
+  font-size: 0.8rem;
+  color: rgba(98, 255, 255, 0.4);
+  font-family: 'Courier New', monospace;
+}
+
+.payment-amount {
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 3.5rem;
+  margin: 0;
+  color: white;
+  letter-spacing: 0.02em;
+}
+
+.payment-amount .token {
+  color: #00d4c8;
+  font-size: 1.5rem;
+  vertical-align: middle;
+}
+
+.modal-body {
+  padding: 2rem;
+}
+
+.detail-section {
+  display: grid;
+  gap: 1.25rem;
+  margin-bottom: 2.5rem;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.detail-label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: rgba(98, 255, 255, 0.4);
+  letter-spacing: 0.1em;
+}
+
+.detail-value {
+  font-size: 0.9rem;
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.detail-value.link {
+  color: #62ffff;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.detail-value.link:hover {
+  text-decoration: underline;
+}
+
+.detail-value.mono {
+  font-family: 'Courier New', monospace;
+}
+
+.section-title {
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 1.5rem;
+  margin: 0 0 1.25rem;
+  letter-spacing: 0.04em;
+}
+
+.section-title .highlight { color: #00d4c8; }
+
+.timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  position: relative;
+  padding-left: 0.5rem;
+}
+
+.timeline::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0.9rem;
+  height: 100%;
+  width: 2px;
+  background: rgba(98, 255, 255, 0.1);
+}
+
+.timeline-item {
+  display: flex;
+  gap: 1.5rem;
+  position: relative;
+  opacity: 0.3;
+  transition: opacity 0.3s;
+}
+
+.timeline-item.active {
+  opacity: 1;
+}
+
+.timeline-dot {
+  width: 10px;
+  height: 10px;
+  background: #082832;
+  border: 2px solid rgba(98, 255, 255, 0.3);
+  border-radius: 50%;
+  position: relative;
+  z-index: 1;
+  margin-top: 5px;
+  transition: all 0.3s;
+}
+
+.active .timeline-dot {
+  background: #00d4c8;
+  border-color: #62ffff;
+  box-shadow: 0 0 10px rgba(98, 255, 255, 0.5);
+}
+
+.timeline-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.step-label {
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: white;
+}
+
+.step-time {
+  font-size: 0.75rem;
+  color: rgba(200, 230, 240, 0.6);
+}
+
+.modal-footer {
+  padding: 1.5rem 2rem 2.5rem;
+  display: flex;
+  gap: 1rem;
+}
+
+.primary-btn, .secondary-btn {
+  font-family: 'Bebas Neue', sans-serif;
+  flex: 1;
+  padding: 0.75rem;
+  border-radius: 0.75rem;
+  font-size: 1.1rem;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  transition: 0.2s;
+  text-align: center;
+  text-decoration: none;
+}
+
+.primary-btn {
+  background: #00d4c8;
+  color: black;
+  border: 1px solid #00d4c8;
+}
+
+.primary-btn:hover { background: #62ffff; border-color: #62ffff; }
+
+.secondary-btn {
+  background: transparent;
+  color: white;
+  border: 1px solid rgba(98, 255, 255, 0.2);
+}
+
+.secondary-btn:hover { background: rgba(98, 255, 255, 0.1); border-color: #62ffff; }
+
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
diff --git a/frontend/src/pages/Payments/PaymentDetailModal/PaymentDetailModal.tsx b/frontend/src/pages/Payments/PaymentDetailModal/PaymentDetailModal.tsx
new file mode 100644
index 0000000..83c2bc9
--- /dev/null
+++ b/frontend/src/pages/Payments/PaymentDetailModal/PaymentDetailModal.tsx
@@ -0,0 +1,163 @@
+// frontend/src/pages/Payments/PaymentDetailModal/PaymentDetailModal.tsx
+import React, { useEffect } from "react";
+import { X, ExternalLink, ShieldCheck, MapPin } from "lucide-react";
+import "./PaymentDetailModal.css";
+
+interface PaymentDetailModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    payment: {
+        id: string;
+        date: string;
+        shipmentId: string;
+        amount: number;
+        token: string;
+        status: string;
+        txHash: string;
+        payerAddress?: string;
+        payeeAddress?: string;
+    } | null;
+}
+
+const PaymentDetailModal: React.FC<PaymentDetailModalProps> = ({
+    isOpen,
+    onClose,
+    payment,
+}) => {
+    useEffect(() => {
+        const handleEsc = (e: KeyboardEvent) => {
+            if (e.key === "Escape") onClose();
+        };
+        window.addEventListener("keydown", handleEsc);
+        return () => window.removeEventListener("keydown", handleEsc);
+    }, [onClose]);
+
+    if (!isOpen || !payment) return null;
+
+    const getStellarExplorerUrl = (hash: string) =>
+        `https://stellar.expert/explorer/public/tx/${hash}`;
+
+    const statusSteps = [
+        {
+            label: "Pending",
+            timestamp: payment.date + " 09:00 AM",
+            active: true,
+        },
+        {
+            label: "Escrowed",
+            timestamp: payment.date + " 02:30 PM",
+            active: ["Escrowed", "Released"].includes(payment.status),
+        },
+        {
+            label: "Released",
+            timestamp: payment.date + " 11:45 PM",
+            active: payment.status === "Released",
+        },
+    ];
+
+    return (
+        <div className="modal-overlay" onClick={onClose}>
+            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+                <button className="close-btn" onClick={onClose}>
+                    <X size={24} />
+                </button>
+
+                <div className="modal-header">
+                    <div className="header-top">
+                        <span
+                            className={`status-badge ${payment.status.toLowerCase()}`}
+                        >
+                            {payment.status}
+                        </span>
+                        <span className="payment-id">
+                            ID: #{payment.id.padStart(6, "0")}
+                        </span>
+                    </div>
+                    <h2 className="payment-amount">
+                        {payment.amount.toLocaleString()}{" "}
+                        <span className="token">{payment.token}</span>
+                    </h2>
+                </div>
+
+                <div className="modal-body">
+                    <div className="detail-section">
+                        <div className="detail-row">
+                            <span className="detail-label">SHIPMENT</span>
+                            <a
+                                href={`/dashboard/shipments/${payment.shipmentId}`}
+                                className="detail-value link"
+                            >
+                                {payment.shipmentId} <MapPin size={14} />
+                            </a>
+                        </div>
+                        <div className="detail-row">
+                            <span className="detail-label">TRANSACTION</span>
+                            <a
+                                href={getStellarExplorerUrl(payment.txHash)}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="detail-value link hash"
+                            >
+                                {payment.txHash.slice(0, 12)}...
+                                {payment.txHash.slice(-8)}{" "}
+                                <ExternalLink size={14} />
+                            </a>
+                        </div>
+                        <div className="detail-row">
+                            <span className="detail-label">PAYER</span>
+                            <span className="detail-value mono">
+                                GBST...4X7P <ShieldCheck size={14} />
+                            </span>
+                        </div>
+                        <div className="detail-row">
+                            <span className="detail-label">PAYEE</span>
+                            <span className="detail-value mono">
+                                GCSV...9L2M <ShieldCheck size={14} />
+                            </span>
+                        </div>
+                    </div>
+
+                    <div className="timeline-section">
+                        <h3 className="section-title">
+                            PAYMENT <span className="highlight">TIMELINE</span>
+                        </h3>
+                        <div className="timeline">
+                            {statusSteps.map((step, idx) => (
+                                <div
+                                    key={idx}
+                                    className={`timeline-item ${step.active ? "active" : ""}`}
+                                >
+                                    <div className="timeline-dot"></div>
+                                    <div className="timeline-info">
+                                        <span className="step-label">
+                                            {step.label}
+                                        </span>
+                                        <span className="step-time">
+                                            {step.timestamp}
+                                        </span>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+
+                <div className="modal-footer">
+                    <button className="secondary-btn" onClick={onClose}>
+                        CLOSE
+                    </button>
+                    <a
+                        href={getStellarExplorerUrl(payment.txHash)}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="primary-btn"
+                    >
+                        VERIFY ON BLOCKCHAIN
+                    </a>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default PaymentDetailModal;
diff --git a/frontend/src/pages/Payments/PaymentHistory/PaymentHistory.tsx b/frontend/src/pages/Payments/PaymentHistory/PaymentHistory.tsx
new file mode 100644
index 0000000..e3888d0
--- /dev/null
+++ b/frontend/src/pages/Payments/PaymentHistory/PaymentHistory.tsx
@@ -0,0 +1,536 @@
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ExternalLink,
+  ArrowUpDown,
+  X,
+} from "lucide-react";
+import PaymentSummaryCards from "../PaymentSummaryCards";
+
+type PaymentStatus = "Pending" | "Escrowed" | "Released" | "Failed";
+
+interface Payment {
+  id: string;
+  date: string;
+  shipmentId: string;
+  amount: number;
+  token: string;
+  status: PaymentStatus;
+  txHash: string;
+}
+
+const statusClasses: Record<PaymentStatus, string> = {
+  Pending:
+    "bg-[rgba(245,158,11,0.15)] text-[#fbbf24] border border-[rgba(245,158,11,0.3)]",
+  Escrowed:
+    "bg-[rgba(98,255,255,0.15)] text-[#62ffff] border border-[rgba(98,255,255,0.3)]",
+  Released:
+    "bg-[rgba(16,185,129,0.15)] text-[#34d399] border border-[rgba(16,185,129,0.3)]",
+  Failed:
+    "bg-[rgba(239,68,68,0.15)] text-[#f87171] border border-[rgba(239,68,68,0.3)]",
+};
+
+interface PaymentDetailModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  payment: Payment | null;
+}
+
+const PaymentDetailModal: React.FC<PaymentDetailModalProps> = ({
+  isOpen,
+  onClose,
+  payment,
+}) => {
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleEsc);
+    return () => window.removeEventListener("keydown", handleEsc);
+  }, [onClose]);
+
+  if (!isOpen || !payment) return null;
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="bg-[rgba(8,40,50,0.95)] border border-[rgba(98,255,255,0.2)] rounded-2xl p-6 w-full max-w-md shadow-xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-lg font-bold text-[#62ffff]">Payment Details</h2>
+          <button
+            onClick={onClose}
+            className="text-text-secondary hover:text-white transition-colors"
+          >
+            <X size={20} />
+          </button>
+        </div>
+        <dl className="flex flex-col gap-3 text-sm">
+          {(
+            [
+              ["Shipment ID", payment.shipmentId],
+              ["Date", payment.date],
+              [
+                "Amount",
+                `$${payment.amount.toLocaleString()} ${payment.token}`,
+              ],
+              ["Status", payment.status],
+              ["Tx Hash", payment.txHash],
+            ] as [string, string][]
+          ).map(([label, value]) => (
+            <div key={label} className="flex justify-between gap-4">
+              <dt className="text-text-secondary">{label}</dt>
+              <dd className="text-white font-medium break-all text-right">
+                {value}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </div>
+  );
+};
+
+const PaymentHistory: React.FC = () => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  // ✅ ADDED
+  React.useEffect(() => {
+    const timer = setTimeout(() => setIsLoading(false), 2500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const [filterStatus, setFilterStatus] = useState<PaymentStatus | "All">(
+    "All",
+  );
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedPayment, setSelectedPayment] = useState<Payment | null>(null);
+  const itemsPerPage = 10;
+
+  const allPayments: Payment[] = [
+    {
+      id: "1",
+      date: "2026-02-26",
+      shipmentId: "SHP-9021",
+      amount: 5420.5,
+      token: "USDC",
+      status: "Released",
+      txHash: "0x4a9b2f81c3e5d7a9b2f81c3e5d7a9b2f81c3e5d7",
+    },
+    {
+      id: "2",
+      date: "2026-02-25",
+      shipmentId: "SHP-8842",
+      amount: 3200.0,
+      token: "XLM",
+      status: "Escrowed",
+      txHash: "0x9c1a9e55b7d4f2c8a1e9b7d4f2c8a1e9b7d4f2c8",
+    },
+    {
+      id: "3",
+      date: "2026-02-24",
+      shipmentId: "SHP-8711",
+      amount: 7850.75,
+      token: "USDC",
+      status: "Released",
+      txHash: "0x2e8f3a6c9d1b5e7f3a6c9d1b5e7f3a6c9d1b5e7f",
+    },
+    {
+      id: "4",
+      date: "2026-02-23",
+      shipmentId: "SHP-8590",
+      amount: 1250.0,
+      token: "USDC",
+      status: "Pending",
+      txHash: "0x7b4d2f9a8c3e6d1b4f9a8c3e6d1b4f9a8c3e6d1b",
+    },
+    {
+      id: "5",
+      date: "2026-02-22",
+      shipmentId: "SHP-8421",
+      amount: 4100.25,
+      token: "XLM",
+      status: "Released",
+      txHash: "0x5c9e1a7f3b8d2c6e1a7f3b8d2c6e1a7f3b8d2c6e",
+    },
+    {
+      id: "6",
+      date: "2026-02-21",
+      shipmentId: "SHP-8305",
+      amount: 2980.0,
+      token: "USDC",
+      status: "Failed",
+      txHash: "0x8d3f6b2a9c5e1d7f6b2a9c5e1d7f6b2a9c5e1d7f",
+    },
+    {
+      id: "7",
+      date: "2026-02-20",
+      shipmentId: "SHP-8192",
+      amount: 6750.5,
+      token: "USDC",
+      status: "Released",
+      txHash: "0x1f7c4e9b3a6d8f2c4e9b3a6d8f2c4e9b3a6d8f2c",
+    },
+    {
+      id: "8",
+      date: "2026-02-19",
+      shipmentId: "SHP-8043",
+      amount: 3450.0,
+      token: "XLM",
+      status: "Escrowed",
+      txHash: "0x6a2d8f1c5b9e3a7d8f1c5b9e3a7d8f1c5b9e3a7d",
+    },
+    {
+      id: "9",
+      date: "2026-02-18",
+      shipmentId: "SHP-7921",
+      amount: 5200.75,
+      token: "USDC",
+      status: "Released",
+      txHash: "0x9e5b3f7a2d6c1e8b3f7a2d6c1e8b3f7a2d6c1e8b",
+    },
+    {
+      id: "10",
+      date: "2026-02-17",
+      shipmentId: "SHP-7805",
+      amount: 2100.0,
+      token: "USDC",
+      status: "Pending",
+      txHash: "0x3c8a6f2d9b1e5c7a6f2d9b1e5c7a6f2d9b1e5c7a",
+    },
+    {
+      id: "11",
+      date: "2026-02-16",
+      shipmentId: "SHP-7692",
+      amount: 8900.5,
+      token: "XLM",
+      status: "Released",
+      txHash: "0x7d1f9c4a8e2b6d3f9c4a8e2b6d3f9c4a8e2b6d3f",
+    },
+    {
+      id: "12",
+      date: "2026-02-15",
+      shipmentId: "SHP-7543",
+      amount: 4320.25,
+      token: "USDC",
+      status: "Escrowed",
+      txHash: "0x2b6e9a3f7c1d5e8a3f7c1d5e8a3f7c1d5e8a3f7c",
+    },
+    {
+      id: "13",
+      date: "2026-02-14",
+      shipmentId: "SHP-7421",
+      amount: 1850.0,
+      token: "USDC",
+      status: "Released",
+      txHash: "0x5f3c8d1a9b7e2f4c8d1a9b7e2f4c8d1a9b7e2f4c",
+    },
+    {
+      id: "14",
+      date: "2026-02-13",
+      shipmentId: "SHP-7305",
+      amount: 6100.75,
+      token: "XLM",
+      status: "Failed",
+      txHash: "0x8a4f2c9d6b3e1a7f2c9d6b3e1a7f2c9d6b3e1a7f",
+    },
+    {
+      id: "15",
+      date: "2026-02-12",
+      shipmentId: "SHP-7192",
+      amount: 3700.0,
+      token: "USDC",
+      status: "Released",
+      txHash: "0x1d7b5f9c3a8e6d2b5f9c3a8e6d2b5f9c3a8e6d2b",
+    },
+    {
+      id: "16",
+      date: "2026-02-11",
+      shipmentId: "SHP-7081",
+      amount: 5550.5,
+      token: "USDC",
+      status: "Pending",
+      txHash: "0x4e9a2f6c8d1b7e3a2f6c8d1b7e3a2f6c8d1b7e3a",
+    },
+  ];
+
+  const filteredPayments =
+    filterStatus === "All"
+      ? allPayments
+      : allPayments.filter((p) => p.status === filterStatus);
+  const sortedPayments = [...filteredPayments].sort((a, b) => {
+    const diff = new Date(a.date).getTime() - new Date(b.date).getTime();
+    return sortOrder === "desc" ? -diff : diff;
+  });
+  const totalPages = Math.ceil(sortedPayments.length / itemsPerPage);
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const paginatedPayments = sortedPayments.slice(
+    startIndex,
+    startIndex + itemsPerPage,
+  );
+  const truncateHash = (hash: string) =>
+    `${hash.slice(0, 6)}...${hash.slice(-4)}`;
+  const getStellarExplorerUrl = (hash: string) =>
+    `https://stellar.expert/explorer/public/tx/${hash}`;
+
+  const tableContainerClass =
+    "bg-[rgba(19,186,186,0.05)] border border-[rgba(98,255,255,0.2)] rounded-2xl overflow-hidden mb-5 shadow-[inset_0_0_20px_0px_rgba(0,128,128,0.3)]";
+  const thClass =
+    "text-left px-6 py-4 text-[11px] font-semibold text-[#62ffff] uppercase border-b border-[rgba(98,255,255,0.2)]";
+  const tdClass = "px-6 py-4 text-sm border-b border-[rgba(98,255,255,0.2)]";
+
+  // if (isLoading) {
+  //     return (
+  //         <div className="p-6 md:p-4">
+  //             <div className="mb-6">
+  //                 <h1 className="text-2xl font-bold mb-1">Payment History</h1>
+  //                 <p className="text-text-secondary text-sm">
+  //                     Track all payment transactions on the blockchain
+  //                 </p>
+  //             </div>
+  //             <div className={`${tableContainerClass} p-6`}>
+  //                 {[...Array(10)].map((_, i) => (
+  //                     <div
+  //                         key={i}
+  //                         className="grid grid-cols-[1fr_1fr_1fr_1fr_1.5fr] gap-6 mb-4"
+  //                     >
+  //                         {[...Array(5)].map((__, j) => (
+  //                             <div
+  //                                 key={j}
+  //                                 className="h-8 rounded animate-shimmer-teal"
+  //                             />
+  //                         ))}
+  //                     </div>
+  //                 ))}
+  //             </div>
+  //         </div>
+  //     );
+  // }
+
+  if (sortedPayments.length === 0) {
+    return (
+      <div className="p-6 md:p-4">
+        <div className="mb-6">
+          <h1 className="text-2xl font-bold mb-1">Payment History</h1>
+          <p className="text-text-secondary text-sm">
+            Track all payment transactions on the blockchain
+          </p>
+        </div>
+        <div className={`${tableContainerClass} px-10 py-20 text-center`}>
+          <div className="text-[64px] mb-4">💳</div>
+          <h2 className="text-xl font-bold mb-2 text-[#62ffff]">
+            No Payments Found
+          </h2>
+          <p className="text-text-secondary text-sm">
+            There are no payment transactions matching your criteria.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 md:p-4">
+      {/* Header */}
+      <div className="flex justify-between items-start mb-6 max-md:flex-col max-md:gap-4">
+        <div>
+          <h1 className="text-2xl font-bold mb-1 max-md:text-xl max-md:font-semibold">
+            Payment History
+          </h1>
+          <p className="text-text-secondary text-sm max-md:text-xs">
+            Track all payment transactions on the blockchain
+          </p>
+        </div>
+        <div className="flex gap-3 max-md:w-full max-md:flex-col max-md:gap-2">
+          <div className="relative flex items-center max-md:w-full">
+            <select
+              value={filterStatus}
+              onChange={(e) => {
+                setFilterStatus(e.target.value as PaymentStatus | "All");
+                setCurrentPage(1);
+              }}
+              className="appearance-none bg-[rgba(19,186,186,0.1)] border border-[rgba(98,255,255,0.2)] text-text-primary px-3.5 py-2 pr-9 rounded-lg text-sm font-medium cursor-pointer outline-none hover:border-[#62ffff] hover:bg-[rgba(19,186,186,0.15)] transition-colors max-md:w-full"
+            >
+              <option value="All">All Status</option>
+              <option value="Pending">Pending</option>
+              <option value="Escrowed">Escrowed</option>
+              <option value="Released">Released</option>
+              <option value="Failed">Failed</option>
+            </select>
+            <ChevronDown
+              size={16}
+              className="absolute right-3 pointer-events-none text-text-secondary"
+            />
+          </div>
+          <span
+            className="inline-flex items-center gap-2 appearance-none bg-[rgba(19,186,186,0.1)] border border-[rgba(98,255,255,0.2)] text-text-primary px-3.5 py-2 pr-9 rounded-lg text-sm font-medium cursor-pointer outline-none hover:border-[#62ffff] hover:bg-[rgba(19,186,186,0.15)] transition-colors max-md:w-full max-md:justify-center"
+            onClick={() =>
+              setSortOrder((prev) => (prev === "desc" ? "asc" : "desc"))
+            }
+          >
+            Date
+            <ArrowUpDown size={14} />
+            <span className=" text-text-secondary max-md:hidden">
+              {sortOrder === "desc" ? "Newest" : "Oldest"}
+            </span>
+          </span>
+        </div>
+      </div>
+
+      {/* Payment Summary Cards */}
+      <PaymentSummaryCards />
+
+      {/* Table */}
+      <div className={`${tableContainerClass} md:overflow-x-auto`}>
+        <table className="w-full border-collapse md:min-w-200">
+          <thead className="bg-[rgba(19,186,186,0.1)]">
+            <tr>
+              <th
+                className={`${thClass} cursor-pointer select-none`}
+                onClick={() =>
+                  setSortOrder((prev) => (prev === "desc" ? "asc" : "desc"))
+                }
+              >
+                <span className="inline-flex items-center gap-2">
+                  Date <ArrowUpDown size={14} />
+                </span>
+              </th>
+              <th className={thClass}>Shipment ID</th>
+              <th className={thClass}>Amount</th>
+              <th className={thClass}>Status</th>
+              <th className={thClass}>Transaction Hash</th>
+            </tr>
+          </thead>
+          <tbody>
+            {isLoading
+              ? [...Array(itemsPerPage)].map((_, i) => (
+                  <tr key={i}>
+                    {[...Array(5)].map((__, j) => (
+                      <td key={j} className={tdClass}>
+                        <div className="h-8 w-full rounded bg-[rgba(98,255,255,0.1)] animate-shimmer-teal" />
+                      </td>
+                    ))}
+                  </tr>
+                ))
+              : paginatedPayments.map((payment) => (
+                  <tr
+                    key={payment.id}
+                    className="hover:bg-[rgba(98,255,255,0.05)] transition-colors last:border-b-0 cursor-pointer"
+                    onClick={() => {
+                      setSelectedPayment(payment);
+                      setIsModalOpen(true);
+                    }}
+                  >
+                    <td
+                      className={`${tdClass} font-medium text-text-secondary`}
+                    >
+                      {new Date(payment.date).toLocaleDateString(undefined, {
+                        year: "numeric",
+                        month: "short",
+                        day: "numeric",
+                      })}
+                    </td>
+                    <td className={tdClass}>
+                      <Link
+                        to={`/dashboard/shipments/${payment.shipmentId}`}
+                        className="text-[#62ffff] font-semibold no-underline hover:underline"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        {payment.shipmentId}
+                      </Link>
+                    </td>
+                    <td className={tdClass}>
+                      <div className="flex flex-col gap-0.5">
+                        <span className="font-semibold text-sm">
+                          ${payment.amount.toLocaleString()}
+                        </span>
+                        <span className="text-[11px] text-text-secondary uppercase">
+                          {payment.token}
+                        </span>
+                      </div>
+                    </td>
+                    <td className={tdClass}>
+                      <span
+                        className={`px-2.5 py-1 rounded-full text-[11px] font-semibold uppercase inline-block ${statusClasses[payment.status]}`}
+                      >
+                        {payment.status}
+                      </span>
+                    </td>
+                    <td
+                      className={`${tdClass} font-['Courier_New',monospace] text-xs`}
+                    >
+                      <a
+                        href={getStellarExplorerUrl(payment.txHash)}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        onClick={(e) => e.stopPropagation()}
+                        className="text-text-secondary no-underline flex items-center gap-1.5 transition-colors hover:text-[#62ffff]"
+                      >
+                        {truncateHash(payment.txHash)}
+                        <ExternalLink size={12} className="text-[#62ffff]" />
+                      </a>
+                    </td>
+                  </tr>
+                ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      <div className="flex justify-between items-center px-6 py-4 bg-[rgba(19,186,186,0.05)] border border-[rgba(98,255,255,0.2)] rounded-xl shadow-[inset_0_0_15px_0px_rgba(0,128,128,0.2)] md:flex-col md:gap-4">
+        <div className="text-sm text-text-secondary">
+          Showing {startIndex + 1}–
+          {Math.min(startIndex + itemsPerPage, sortedPayments.length)} of{" "}
+          {sortedPayments.length}
+        </div>
+        <div className="flex gap-2 md:w-full md:justify-center">
+          <button
+            onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
+            disabled={currentPage === 1}
+            className="bg-transparent border border-[rgba(98,255,255,0.2)] text-text-primary px-3 py-2 rounded-md text-sm font-medium cursor-pointer flex items-center justify-center min-w-9 transition-all hover:not-disabled:bg-[rgba(98,255,255,0.1)] hover:not-disabled:border-[#62ffff] hover:not-disabled:text-[#62ffff] disabled:opacity-30 disabled:cursor-not-allowed"
+          >
+            <ChevronLeft size={16} />
+          </button>
+          {[...Array(totalPages)].map((_, i) => (
+            <button
+              key={i + 1}
+              onClick={() => setCurrentPage(i + 1)}
+              className={`border px-3 py-2 rounded-md text-sm font-semibold cursor-pointer min-w-9 transition-all ${
+                currentPage === i + 1
+                  ? "bg-[#62ffff] border-[#62ffff] text-black"
+                  : "bg-transparent border-[rgba(98,255,255,0.2)] text-text-primary hover:bg-[rgba(98,255,255,0.1)] hover:border-[#62ffff] hover:text-[#62ffff]"
+              }`}
+            >
+              {i + 1}
+            </button>
+          ))}
+          <button
+            onClick={() =>
+              setCurrentPage((prev) => Math.min(totalPages, prev + 1))
+            }
+            disabled={currentPage === totalPages}
+            className="bg-transparent border border-[rgba(98,255,255,0.2)] text-text-primary px-3 py-2 rounded-md text-sm font-medium cursor-pointer flex items-center justify-center min-w-9 transition-all hover:not-disabled:bg-[rgba(98,255,255,0.1)] hover:not-disabled:border-[#62ffff] hover:not-disabled:text-[#62ffff] disabled:opacity-30 disabled:cursor-not-allowed"
+          >
+            <ChevronRight size={16} />
+          </button>
+        </div>
+      </div>
+
+      <PaymentDetailModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        payment={selectedPayment}
+      />
+    </div>
+  );
+};
+
+export default PaymentHistory;
diff --git a/frontend/src/pages/Payments/PaymentSummaryCards/PaymentSummaryCards.tsx b/frontend/src/pages/Payments/PaymentSummaryCards/PaymentSummaryCards.tsx
new file mode 100644
index 0000000..f45ed56
--- /dev/null
+++ b/frontend/src/pages/Payments/PaymentSummaryCards/PaymentSummaryCards.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import { CreditCard, DollarSign, Clock, CheckCircle } from "lucide-react";
+
+interface PaymentSummaryCardProps {
+  icon: React.ReactNode;
+  value: string;
+  label: string;
+}
+
+const PaymentSummaryCard: React.FC<PaymentSummaryCardProps> = ({
+  icon,
+  value,
+  label,
+}) => {
+  return (
+    <div className="relative bg-background-card border border-border rounded-2xl p-5 overflow-hidden after:absolute after:top-0 after:right-0 after:w-24 after:h-24 after:bg-[radial-gradient(circle_at_top_right,rgba(59,130,246,0.1),transparent_70%)] after:pointer-events-none">
+      {/* Header */}
+      <div className="flex justify-between items-start mb-5 relative z-10">
+        <div className="w-10 h-10 rounded-[10px] bg-background-elevated flex items-center justify-center text-accent-blue">
+          {icon}
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="relative z-10">
+        <div className="text-text-secondary text-xs font-semibold uppercase mb-2">
+          {label}
+        </div>
+        <div className="text-[32px] font-bold leading-none max-md:text-2xl">
+          {value}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const PaymentSummaryCards: React.FC = () => {
+  // Mock data - in real app, this would come from props or API
+  const summaryData = [
+    {
+      icon: <CreditCard size={20} />,
+      value: "156",
+      label: "Total Payments",
+    },
+    {
+      icon: <DollarSign size={20} />,
+      value: "$127,450",
+      label: "Total Value",
+    },
+    {
+      icon: <Clock size={20} />,
+      value: "12",
+      label: "Pending Payments",
+    },
+    {
+      icon: <CheckCircle size={20} />,
+      value: "134",
+      label: "Released Payments",
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+      {summaryData.map((card, index) => (
+        <PaymentSummaryCard
+          key={index}
+          icon={card.icon}
+          value={card.value}
+          label={card.label}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default PaymentSummaryCards;
diff --git a/frontend/src/pages/Payments/PaymentSummaryCards/index.ts b/frontend/src/pages/Payments/PaymentSummaryCards/index.ts
new file mode 100644
index 0000000..1d257c0
--- /dev/null
+++ b/frontend/src/pages/Payments/PaymentSummaryCards/index.ts
@@ -0,0 +1 @@
+export { default } from './PaymentSummaryCards';
\ No newline at end of file
diff --git a/frontend/src/pages/Settings/NotificationPreferences/NotificationPreferences.css b/frontend/src/pages/Settings/NotificationPreferences/NotificationPreferences.css
new file mode 100644
index 0000000..aea8dc8
--- /dev/null
+++ b/frontend/src/pages/Settings/NotificationPreferences/NotificationPreferences.css
@@ -0,0 +1,223 @@
+.notif-pref-container {
+  background-color: #14171E;
+  border: 1px solid #1E293B;
+  border-radius: 12px;
+  overflow: hidden;
+  width: 100%;
+}
+
+.notif-pref-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 24px;
+  border-bottom: 1px solid #1E293B;
+}
+
+.notif-pref-icon {
+  color: #3B82F6;
+  background: rgba(59, 130, 246, 0.1);
+  padding: 6px;
+  border-radius: 8px;
+  box-sizing: content-box;
+  flex-shrink: 0;
+}
+
+.notif-pref-header h2 {
+  font-size: 18px;
+  font-weight: 600;
+  color: #F1F5F9;
+  margin: 0 0 4px;
+}
+
+.notif-pref-header p {
+  font-size: 13px;
+  color: #64748B;
+  margin: 0;
+}
+
+.notif-pref-list {
+  padding: 8px 24px;
+  display: flex;
+  flex-direction: column;
+}
+
+.notif-pref-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 0;
+  border-bottom: 1px solid rgba(30, 41, 59, 0.5);
+  gap: 16px;
+}
+
+.notif-pref-row:last-child {
+  border-bottom: none;
+}
+
+.notif-pref-info {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.notif-pref-label {
+  font-size: 15px;
+  font-weight: 500;
+  color: #E2E8F0;
+}
+
+.notif-pref-desc {
+  font-size: 13px;
+  color: #64748B;
+}
+
+.notif-switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.notif-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.notif-slider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background-color: #1E293B;
+  border: 1px solid #334155;
+  transition: 0.3s;
+}
+
+.notif-slider::before {
+  position: absolute;
+  content: '';
+  height: 18px;
+  width: 18px;
+  left: 2px;
+  bottom: 2px;
+  background-color: #94A3B8;
+  transition: 0.3s;
+}
+
+.notif-switch input:checked + .notif-slider {
+  background-color: rgba(59, 130, 246, 0.1);
+  border-color: #3B82F6;
+}
+
+.notif-switch input:checked + .notif-slider::before {
+  background-color: #3B82F6;
+  transform: translateX(20px);
+}
+
+.notif-slider.round {
+  border-radius: 24px;
+}
+
+.notif-slider.round::before {
+  border-radius: 50%;
+}
+
+.notif-pref-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 16px;
+  padding: 20px 24px;
+  border-top: 1px solid #1E293B;
+}
+
+.notif-selection-count {
+  margin-right: auto;
+  font-size: 13px;
+  color: #94A3B8;
+}
+
+.notif-success-toast {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #10B981;
+  background-color: rgba(16, 185, 129, 0.1);
+  padding: 8px 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  animation: notifSlideIn 0.3s ease-out;
+}
+
+.notif-save-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  background-color: #3B82F6;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.notif-save-btn:hover:not(:disabled) {
+  background-color: #2563EB;
+}
+
+.notif-save-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.notif-spinner {
+  animation: notifSpin 1s linear infinite;
+}
+
+@keyframes notifSpin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes notifSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 640px) {
+  .notif-pref-header,
+  .notif-pref-list,
+  .notif-pref-footer {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  .notif-pref-footer {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+
+  .notif-selection-count {
+    margin: 0;
+    text-align: center;
+  }
+
+  .notif-save-btn {
+    justify-content: center;
+    width: 100%;
+  }
+}
diff --git a/frontend/src/pages/Settings/NotificationPreferences/NotificationPreferences.test.tsx b/frontend/src/pages/Settings/NotificationPreferences/NotificationPreferences.test.tsx
new file mode 100644
index 0000000..cb45651
--- /dev/null
+++ b/frontend/src/pages/Settings/NotificationPreferences/NotificationPreferences.test.tsx
@@ -0,0 +1,44 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import NotificationPreferences from './NotificationPreferences';
+
+describe('NotificationPreferences', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('renders all required notification categories', () => {
+    render(<NotificationPreferences />);
+
+    expect(screen.getByLabelText('Shipment Updates in-app notifications')).toBeInTheDocument();
+    expect(screen.getByLabelText('Payment Alerts in-app notifications')).toBeInTheDocument();
+    expect(screen.getByLabelText('Delivery Confirmations in-app notifications')).toBeInTheDocument();
+    expect(screen.getByLabelText('System Announcements in-app notifications')).toBeInTheDocument();
+  });
+
+  it('updates toggle states when a category is clicked', () => {
+    render(<NotificationPreferences />);
+
+    const shipmentUpdates = screen.getByLabelText('Shipment Updates in-app notifications') as HTMLInputElement;
+    expect(shipmentUpdates.checked).toBe(true);
+
+    fireEvent.click(shipmentUpdates);
+    expect(shipmentUpdates.checked).toBe(false);
+  });
+
+  it('shows save loading state and success feedback', () => {
+    vi.useFakeTimers();
+    render(<NotificationPreferences />);
+
+    fireEvent.click(screen.getByRole('button', { name: /save preferences/i }));
+
+    expect(screen.getByRole('button', { name: /saving.../i })).toBeDisabled();
+
+    act(() => {
+      vi.advanceTimersByTime(1200);
+    });
+
+    expect(screen.getByText('Preferences saved successfully!')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /save preferences/i })).toBeEnabled();
+  });
+});
diff --git a/frontend/src/pages/Settings/NotificationPreferences/NotificationPreferences.tsx b/frontend/src/pages/Settings/NotificationPreferences/NotificationPreferences.tsx
new file mode 100644
index 0000000..e47cba2
--- /dev/null
+++ b/frontend/src/pages/Settings/NotificationPreferences/NotificationPreferences.tsx
@@ -0,0 +1,131 @@
+import React, { useMemo, useState } from 'react';
+import { Bell, Loader2, Save, CheckCircle2 } from 'lucide-react';
+import './NotificationPreferences.css';
+
+type NotificationPreferenceKey =
+  | 'shipmentUpdates'
+  | 'paymentAlerts'
+  | 'deliveryConfirmations'
+  | 'systemAnnouncements';
+
+interface NotificationCategory {
+  key: NotificationPreferenceKey;
+  label: string;
+  description: string;
+}
+
+const CATEGORIES: NotificationCategory[] = [
+  {
+    key: 'shipmentUpdates',
+    label: 'Shipment Updates',
+    description: 'Get notified when shipment status changes or milestones are reached.',
+  },
+  {
+    key: 'paymentAlerts',
+    label: 'Payment Alerts',
+    description: 'Receive alerts for payment settlements and transaction events.',
+  },
+  {
+    key: 'deliveryConfirmations',
+    label: 'Delivery Confirmations',
+    description: 'Be notified when deliveries are confirmed on-chain.',
+  },
+  {
+    key: 'systemAnnouncements',
+    label: 'System Announcements',
+    description: 'Platform updates, maintenance notices, and feature announcements.',
+  },
+];
+
+type Preferences = Record<NotificationPreferenceKey, boolean>;
+
+const initialPreferences: Preferences = {
+  shipmentUpdates: true,
+  paymentAlerts: true,
+  deliveryConfirmations: true,
+  systemAnnouncements: false,
+};
+
+const NotificationPreferences: React.FC = () => {
+  const [preferences, setPreferences] = useState<Preferences>(initialPreferences);
+  const [loading, setLoading] = useState(false);
+  const [successMsg, setSuccessMsg] = useState('');
+
+  const enabledCount = useMemo(() => Object.values(preferences).filter(Boolean).length, [preferences]);
+
+  const toggle = (key: NotificationPreferenceKey) => {
+    setPreferences(prev => ({ ...prev, [key]: !prev[key] }));
+    setSuccessMsg('');
+  };
+
+  const handleSave = () => {
+    setLoading(true);
+    setSuccessMsg('');
+
+    setTimeout(() => {
+      setLoading(false);
+      setSuccessMsg('Preferences saved successfully!');
+      setTimeout(() => setSuccessMsg(''), 3000);
+    }, 1200);
+  };
+
+  return (
+    <section className="notif-pref-container" aria-labelledby="notification-preferences-title">
+      <div className="notif-pref-header">
+        <Bell className="notif-pref-icon" size={24} />
+        <div>
+          <h2 id="notification-preferences-title">Notification Preferences</h2>
+          <p>Choose which in-app notifications you want to receive.</p>
+        </div>
+      </div>
+
+      <div className="notif-pref-list">
+        {CATEGORIES.map(({ key, label, description }) => (
+          <div key={key} className="notif-pref-row">
+            <div className="notif-pref-info">
+              <span className="notif-pref-label">{label}</span>
+              <span className="notif-pref-desc">{description}</span>
+            </div>
+            <label className="notif-switch" htmlFor={key}>
+              <input
+                id={key}
+                type="checkbox"
+                checked={preferences[key]}
+                onChange={() => toggle(key)}
+                aria-label={`${label} in-app notifications`}
+              />
+              <span className="notif-slider round" />
+            </label>
+          </div>
+        ))}
+      </div>
+
+      <div className="notif-pref-footer">
+        <span className="notif-selection-count" aria-live="polite">
+          {enabledCount} of {CATEGORIES.length} enabled
+        </span>
+        {successMsg && (
+          <div className="notif-success-toast" role="status">
+            <CheckCircle2 size={16} />
+            {successMsg}
+          </div>
+        )}
+        <button className="notif-save-btn" onClick={handleSave} disabled={loading}>
+          {loading ? (
+            <>
+              <Loader2 className="notif-spinner" size={16} />
+              Saving...
+            </>
+          ) : (
+            <>
+              <Save size={16} />
+              Save Preferences
+            </>
+          )}
+        </button>
+      </div>
+    </section>
+  );
+};
+
+export default NotificationPreferences;
diff --git a/frontend/src/pages/Shipment/ShipmentDetail.tsx b/frontend/src/pages/Shipment/ShipmentDetail.tsx
new file mode 100644
index 0000000..ac1cfee
--- /dev/null
+++ b/frontend/src/pages/Shipment/ShipmentDetail.tsx
@@ -0,0 +1,147 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import ShipmentHeader from './sections/ShipmentHeader/ShipmentHeader';
+import { ShipmentStatus } from '../../components/ui/StatusBadge';
+
+// Mock data for demonstration
+const MOCK_SHIPMENT_DATA = {
+  id: 'SHP-2024-001234',
+  status: 'In Transit' as ShipmentStatus,
+  sender: {
+    name: 'Acme Corporation',
+    address: '123 Business Ave, New York, NY 10001',
+  },
+  receiver: {
+    name: 'Global Logistics Ltd',
+    address: '456 Commerce St, Los Angeles, CA 90210',
+  },
+  createdAt: '2024-04-15T10:30:00Z',
+  expectedDelivery: '2024-04-22T16:00:00Z',
+};
+
+const ShipmentDetail: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  
+  // In a real app, you would fetch shipment data based on the ID
+  const shipmentData = MOCK_SHIPMENT_DATA;
+
+  const handleTrack = () => {
+    console.log('Tracking shipment:', id);
+    // Implement tracking functionality
+  };
+
+  const handleDownloadProof = () => {
+    console.log('Downloading proof for shipment:', id);
+    // Implement download proof functionality
+  };
+
+  const handleShare = () => {
+    console.log('Sharing shipment:', id);
+    // Implement share functionality
+  };
+
+  return (
+    <div className="shipment-detail-page">
+      <ShipmentHeader
+        shipmentId={shipmentData.id}
+        status={shipmentData.status}
+        sender={shipmentData.sender}
+        receiver={shipmentData.receiver}
+        createdAt={shipmentData.createdAt}
+        expectedDelivery={shipmentData.expectedDelivery}
+        onTrack={handleTrack}
+        onDownloadProof={handleDownloadProof}
+        onShare={handleShare}
+      />
+      
+      {/* Additional shipment detail sections would go here */}
+      <div style={{ padding: '24px', textAlign: 'center', color: 'var(--text-secondary)' }}>
+        Additional shipment details and tracking information will be displayed here.
+import MilestoneTimeline from './sections/MilestoneTimeline/MilestoneTimeline';
+import { Milestone } from './sections/MilestoneTimeline/types';
+
+const ShipmentDetail: React.FC = () => {
+  const mockMilestones: Milestone[] = [
+    {
+      id: '1',
+      status: 'Created',
+      label: 'Shipment Created',
+      timestamp: 'Oct 20, 2026, 09:00 AM',
+      location: 'Warehouse A, San Francisco',
+      isCompleted: true,
+    },
+    {
+      id: '2',
+      status: 'In Transit',
+      label: 'Picked Up by Carrier',
+      timestamp: 'Oct 21, 2026, 02:30 PM',
+      location: 'San Francisco Distribution Center',
+      isCompleted: true,
+    },
+    {
+      id: '3',
+      status: 'At Checkpoint',
+      label: 'Customs Clearance',
+      timestamp: 'Oct 22, 2026, 11:15 AM',
+      location: 'Port of Los Angeles',
+      isCompleted: false,
+      isCurrent: true,
+    },
+    {
+      id: '4',
+      status: 'Delivered',
+      label: 'Delivered to Destination',
+      timestamp: 'Estimated: Oct 24, 2026',
+      location: 'Retail Store, San Diego',
+      isCompleted: false,
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-background text-text-primary p-4 md:p-8">
+      <div className="max-w-4xl mx-auto">
+        <header className="mb-12">
+          <div className="flex items-center gap-4 mb-4">
+            <span className="px-3 py-1 bg-primary/10 text-primary border border-primary/20 rounded-full text-xs font-bold uppercase tracking-wider">
+              In Transit
+            </span>
+            <h1 className="text-3xl md:text-4xl font-display font-bold">
+              Shipment <span className="text-primary">#NVN-2026-X81</span>
+            </h1>
+          </div>
+          <p className="text-text-secondary">
+            Blockchain-verified tracking for secure global logistics.
+          </p>
+        </header>
+
+        <main>
+          <section className="bg-background-card border border-border rounded-3xl p-6 md:p-10 shadow-xl overflow-hidden relative">
+            <div className="absolute top-0 right-0 p-8 opacity-5">
+              <Package className="w-32 h-32" />
+            </div>
+            
+            <h2 className="text-2xl font-display font-semibold mb-8 border-b border-border pb-4">
+              Tracking <span className="text-primary">Timeline</span>
+            </h2>
+            
+            <MilestoneTimeline milestones={mockMilestones} />
+          </section>
+        </main>
+
+        <footer className="mt-12 text-center text-text-secondary text-sm">
+          <p>© 2026 Navin Logistics Platform. All milestones are recorded on the Stellar blockchain.</p>
+        </footer>
+      </div>
+    </div>
+  );
+};
+
+export default ShipmentDetail;
+// Simple Package icon for the background decoration
+const Package = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="m7.5 4.27 9 5.15" /><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" /><path d="m3.3 7 8.7 5 8.7-5" /><path d="M12 22V12" />
+  </svg>
+);
+
+export default ShipmentDetail;
diff --git a/frontend/src/pages/Shipment/sections/MilestoneTimeline/MilestoneTimeline.test.tsx b/frontend/src/pages/Shipment/sections/MilestoneTimeline/MilestoneTimeline.test.tsx
new file mode 100644
index 0000000..fd7e192
--- /dev/null
+++ b/frontend/src/pages/Shipment/sections/MilestoneTimeline/MilestoneTimeline.test.tsx
@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import MilestoneTimeline from './MilestoneTimeline';
+import { Milestone } from './types';
+
+describe('MilestoneTimeline', () => {
+  const mockMilestones: Milestone[] = [
+    {
+      id: '1',
+      status: 'Created',
+      label: 'Order Created',
+      timestamp: '2026-02-20 09:15 AM',
+      location: 'New York, NY',
+      isCompleted: true,
+    },
+    {
+      id: '2',
+      status: 'In Transit',
+      label: 'In Transit',
+      timestamp: '2026-02-21 10:00 AM',
+      location: 'Philadelphia, PA',
+      isCompleted: false,
+      isCurrent: true,
+    },
+    {
+      id: '3',
+      status: 'Delivered',
+      label: 'Delivered',
+      timestamp: 'Expected: 2026-02-23 05:00 PM',
+      location: 'Boston, MA',
+      isCompleted: false,
+    },
+  ];
+
+  it('renders all milestones in desktop view', () => {
+    render(<MilestoneTimeline milestones={mockMilestones} />);
+    
+    // Check for labels
+    expect(screen.getAllByText('Order Created').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('In Transit').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Delivered').length).toBeGreaterThan(0);
+  });
+
+  it('shows timestamps and locations', () => {
+    render(<MilestoneTimeline milestones={mockMilestones} />);
+    
+    expect(screen.getAllByText('2026-02-20 09:15 AM').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('New York, NY').length).toBeGreaterThan(0);
+  });
+
+  it('highlights the current milestone', () => {
+    const { container } = render(<MilestoneTimeline milestones={mockMilestones} />);
+    
+    // The current milestone should have a primary color border (part of classes)
+    const currentMilestone = container.querySelector('.border-primary\\/30');
+    expect(currentMilestone).toBeInTheDocument();
+    expect(currentMilestone).toHaveTextContent('In Transit');
+  });
+
+  it('marks completed milestones', () => {
+    const { container } = render(<MilestoneTimeline milestones={mockMilestones} />);
+    
+    // Completed milestones use bg-accent-blue for the node
+    const completedNode = container.querySelector('.bg-accent-blue');
+    expect(completedNode).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/pages/Shipment/sections/MilestoneTimeline/MilestoneTimeline.tsx b/frontend/src/pages/Shipment/sections/MilestoneTimeline/MilestoneTimeline.tsx
new file mode 100644
index 0000000..65c2a13
--- /dev/null
+++ b/frontend/src/pages/Shipment/sections/MilestoneTimeline/MilestoneTimeline.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { CheckCircle2, Circle, Package, Truck, MapPin, Flag } from 'lucide-react';
+import { MilestoneTimelineProps } from './types';
+
+const statusIcons: Record<string, React.ReactNode> = {
+  'Created': <Package className="w-5 h-5" />,
+  'In Transit': <Truck className="w-5 h-5" />,
+  'At Checkpoint': <MapPin className="w-5 h-5" />,
+  'Delivered': <Flag className="w-5 h-5" />,
+};
+
+const MilestoneTimeline: React.FC<MilestoneTimelineProps> = ({ milestones }) => {
+  return (
+    <div className="w-full py-8">
+      {/* Desktop View: Vertical Timeline */}
+      <div className="hidden md:flex flex-col space-y-0 relative before:absolute before:left-[19px] before:top-2 before:bottom-2 before:w-0.5 before:bg-border">
+        {milestones.map((milestone) => (
+          <div key={milestone.id} className="relative flex items-start gap-6 pb-10 last:pb-0">
+            {/* Timeline Node */}
+            <div className="relative z-10 flex items-center justify-center">
+              {milestone.isCompleted ? (
+                <div className="w-10 h-10 rounded-full bg-accent-blue flex items-center justify-center text-white shadow-[0_0_15px_rgba(59,130,246,0.5)]">
+                  <CheckCircle2 className="w-6 h-6" />
+                </div>
+              ) : milestone.isCurrent ? (
+                <div className="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-background shadow-[0_0_15px_rgba(0,217,255,0.5)] animate-pulse">
+                  {statusIcons[milestone.status] || <Circle className="w-6 h-6" />}
+                </div>
+              ) : (
+                <div className="w-10 h-10 rounded-full bg-background-card border-2 border-border flex items-center justify-center text-text-secondary">
+                  <Circle className="w-6 h-6" />
+                </div>
+              )}
+            </div>
+
+            {/* Content */}
+            <div className={`flex-1 p-5 rounded-2xl border transition-all duration-300 ${
+              milestone.isCurrent 
+                ? 'bg-background-card border-primary/30 shadow-[0_0_20px_rgba(0,217,255,0.1)]' 
+                : milestone.isCompleted 
+                ? 'bg-background-card border-border hover:border-accent-blue/30' 
+                : 'bg-background-secondary/50 border-border/50 opacity-60'
+            }`}>
+              <div className="flex justify-between items-start mb-2">
+                <h3 className={`text-lg font-semibold ${milestone.isCompleted ? 'text-text-primary' : milestone.isCurrent ? 'text-primary' : 'text-text-secondary'}`}>
+                  {milestone.label}
+                </h3>
+                <span className="text-sm font-medium text-text-secondary">
+                  {milestone.timestamp}
+                </span>
+              </div>
+              
+              <div className="flex items-center gap-2 text-text-secondary text-sm">
+                <MapPin className="w-4 h-4" />
+                <span>{milestone.location || 'Location pending'}</span>
+              </div>
+
+              {milestone.isCurrent && (
+                <div className="mt-4 flex items-center gap-2">
+                  <span className="flex h-2 w-2 rounded-full bg-primary animate-ping"></span>
+                  <span className="text-xs font-bold uppercase tracking-wider text-primary">Live Updates Enabled</span>
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Mobile View: Horizontal Card List */}
+      <div className="md:hidden flex flex-col gap-4 overflow-x-auto pb-4">
+        {milestones.map((milestone) => (
+          <div 
+            key={milestone.id} 
+            className={`flex items-center gap-4 p-4 rounded-xl border ${
+              milestone.isCurrent 
+                ? 'bg-background-card border-primary/40 shadow-glow-blue' 
+                : 'bg-background-card border-border'
+            } ${!milestone.isCompleted && !milestone.isCurrent ? 'opacity-60' : ''}`}
+          >
+            <div className={`shrink-0 w-12 h-12 rounded-full flex items-center justify-center ${
+              milestone.isCompleted ? 'bg-accent-blue text-white' : milestone.isCurrent ? 'bg-primary text-background' : 'bg-background-secondary text-text-secondary'
+            }`}>
+              {milestone.isCompleted ? <CheckCircle2 className="w-6 h-6" /> : (statusIcons[milestone.status] || <Circle className="w-6 h-6" />)}
+            </div>
+            
+            <div className="flex-1 min-w-0">
+              <h4 className={`font-bold truncate ${milestone.isCurrent ? 'text-primary' : 'text-text-primary'}`}>
+                {milestone.label}
+              </h4>
+              <p className="text-xs text-text-secondary truncate">{milestone.location}</p>
+              <p className="text-[10px] text-text-secondary mt-1">{milestone.timestamp}</p>
+            </div>
+
+            {milestone.isCurrent && (
+              <div className="w-2 h-2 rounded-full bg-primary shadow-[0_0_8px_#00D9FF]"></div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MilestoneTimeline;
diff --git a/frontend/src/pages/Shipment/sections/MilestoneTimeline/types.ts b/frontend/src/pages/Shipment/sections/MilestoneTimeline/types.ts
new file mode 100644
index 0000000..f5214aa
--- /dev/null
+++ b/frontend/src/pages/Shipment/sections/MilestoneTimeline/types.ts
@@ -0,0 +1,15 @@
+export type MilestoneStatus = 'Created' | 'In Transit' | 'At Checkpoint' | 'Delivered';
+
+export interface Milestone {
+  id: string;
+  status: MilestoneStatus;
+  label: string;
+  timestamp: string;
+  location?: string;
+  isCompleted: boolean;
+  isCurrent?: boolean;
+}
+
+export interface MilestoneTimelineProps {
+  milestones: Milestone[];
+}
diff --git a/frontend/src/pages/Shipment/sections/ShipmentHeader/ShipmentHeader.css b/frontend/src/pages/Shipment/sections/ShipmentHeader/ShipmentHeader.css
new file mode 100644
index 0000000..23f7747
--- /dev/null
+++ b/frontend/src/pages/Shipment/sections/ShipmentHeader/ShipmentHeader.css
@@ -0,0 +1,242 @@
+.shipment-header {
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  padding: 24px;
+  margin-bottom: 24px;
+}
+
+.shipment-header-content {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 32px;
+  align-items: start;
+}
+
+/* Left Section - Shipment ID and Status */
+.shipment-header-left {
+  min-width: 200px;
+}
+
+.shipment-id-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.shipment-id {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+  letter-spacing: -0.025em;
+}
+
+/* Center Section - Parties and Dates */
+.shipment-header-center {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  min-width: 0; /* Allow shrinking */
+}
+
+.shipment-parties {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.party-info {
+  flex: 1;
+  min-width: 0; /* Allow text truncation */
+}
+
+.party-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 0 0 8px 0;
+}
+
+.party-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 4px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.party-address {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.route-arrow {
+  color: var(--accent-blue);
+  flex-shrink: 0;
+}
+
+.shipment-dates {
+  display: flex;
+  gap: 32px;
+}
+
+.date-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.date-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.date-value {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+/* Right Section - Action Buttons */
+.shipment-header-right {
+  min-width: 200px;
+}
+
+.action-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.action-btn:hover {
+  transform: translateY(-1px);
+}
+
+.action-btn:active {
+  transform: translateY(0);
+}
+
+.action-btn.primary {
+  background-color: var(--accent-blue);
+  color: white;
+}
+
+.action-btn.primary:hover {
+  background-color: #2563eb;
+}
+
+.action-btn.secondary {
+  background-color: transparent;
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+}
+
+.action-btn.secondary:hover {
+  background-color: var(--bg-card-header);
+  color: var(--text-primary);
+  border-color: var(--accent-blue);
+}
+
+/* Mobile Responsive */
+@media (max-width: 1024px) {
+  .shipment-header-content {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+  
+  .shipment-header-left {
+    min-width: auto;
+  }
+  
+  .shipment-id-section {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .shipment-parties {
+    flex-direction: column;
+    gap: 16px;
+    align-items: stretch;
+  }
+  
+  .route-arrow {
+    align-self: center;
+    transform: rotate(90deg);
+  }
+  
+  .party-info {
+    text-align: center;
+  }
+  
+  .party-name,
+  .party-address {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: unset;
+  }
+  
+  .shipment-dates {
+    justify-content: space-between;
+  }
+  
+  .shipment-header-right {
+    min-width: auto;
+  }
+  
+  .action-buttons {
+    flex-direction: row;
+    gap: 12px;
+  }
+  
+  .action-btn {
+    flex: 1;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 640px) {
+  .shipment-header {
+    padding: 16px;
+  }
+  
+  .shipment-id {
+    font-size: 24px;
+  }
+  
+  .shipment-dates {
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .action-buttons {
+    flex-direction: column;
+    gap: 8px;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Shipment/sections/ShipmentHeader/ShipmentHeader.tsx b/frontend/src/pages/Shipment/sections/ShipmentHeader/ShipmentHeader.tsx
new file mode 100644
index 0000000..c8e6bbf
--- /dev/null
+++ b/frontend/src/pages/Shipment/sections/ShipmentHeader/ShipmentHeader.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import { Download, Share2, MapPin } from 'lucide-react';
+import { StatusBadge, ShipmentStatus } from '../../../../components/ui/StatusBadge/StatusBadge';
+import './ShipmentHeader.css';
+
+export interface ShipmentHeaderProps {
+  shipmentId: string;
+  status: ShipmentStatus;
+  sender: {
+    name: string;
+    address: string;
+  };
+  receiver: {
+    name: string;
+    address: string;
+  };
+  createdAt: string;
+  expectedDelivery: string;
+  onTrack?: () => void;
+  onDownloadProof?: () => void;
+  onShare?: () => void;
+}
+
+export const ShipmentHeader: React.FC<ShipmentHeaderProps> = ({
+  shipmentId,
+  status,
+  sender,
+  receiver,
+  createdAt,
+  expectedDelivery,
+  onTrack = () => console.log('Track clicked'),
+  onDownloadProof = () => console.log('Download Proof clicked'),
+  onShare = () => console.log('Share clicked'),
+}) => {
+  const formatDate = (dateString: string): string => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  return (
+    <header className="shipment-header">
+      <div className="shipment-header-content">
+        {/* Left Section - Shipment ID and Status */}
+        <section className="shipment-header-left">
+          <div className="shipment-id-section">
+            <h1 className="shipment-id">#{shipmentId}</h1>
+            <StatusBadge status={status} />
+          </div>
+        </section>
+
+        {/* Center Section - Sender and Receiver Details */}
+        <section className="shipment-header-center">
+          <div className="shipment-parties">
+            <div className="party-info">
+              <h3 className="party-label">From</h3>
+              <p className="party-name">{sender.name}</p>
+              <p className="party-address">{sender.address}</p>
+            </div>
+            
+            <div className="route-arrow">
+              <MapPin size={16} />
+            </div>
+            
+            <div className="party-info">
+              <h3 className="party-label">To</h3>
+              <p className="party-name">{receiver.name}</p>
+              <p className="party-address">{receiver.address}</p>
+            </div>
+          </div>
+          
+          <div className="shipment-dates">
+            <div className="date-info">
+              <span className="date-label">Created:</span>
+              <span className="date-value">{formatDate(createdAt)}</span>
+            </div>
+            <div className="date-info">
+              <span className="date-label">Expected Delivery:</span>
+              <span className="date-value">{formatDate(expectedDelivery)}</span>
+            </div>
+          </div>
+        </section>
+
+        {/* Right Section - Action Buttons */}
+        <section className="shipment-header-right">
+          <div className="action-buttons">
+            <button 
+              className="action-btn primary"
+              onClick={onTrack}
+              aria-label="Track shipment"
+            >
+              <MapPin size={16} />
+              Track
+            </button>
+            <button 
+              className="action-btn secondary"
+              onClick={onDownloadProof}
+              aria-label="Download proof of delivery"
+            >
+              <Download size={16} />
+              Download Proof
+            </button>
+            <button 
+              className="action-btn secondary"
+              onClick={onShare}
+              aria-label="Share shipment details"
+            >
+              <Share2 size={16} />
+              Share
+            </button>
+          </div>
+        </section>
+      </div>
+    </header>
+  );
+};
+
+export default ShipmentHeader;
\ No newline at end of file
diff --git a/frontend/src/pages/ShipmentDetail/DeliveryProofUpload/DeliveryProofUpload.tsx b/frontend/src/pages/ShipmentDetail/DeliveryProofUpload/DeliveryProofUpload.tsx
new file mode 100644
index 0000000..9bad768
--- /dev/null
+++ b/frontend/src/pages/ShipmentDetail/DeliveryProofUpload/DeliveryProofUpload.tsx
@@ -0,0 +1,238 @@
+import React, { useState, useRef } from "react";
+
+const DeliveryProofUpload: React.FC = () => {
+  const [file, setFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [recipientName, setRecipientName] = useState<string>("");
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const [submitted, setSubmitted] = useState<boolean>(false);
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (e.dataTransfer.files?.[0]) handleFileSelection(e.dataTransfer.files[0]);
+  };
+
+  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files?.[0]) handleFileSelection(e.target.files[0]);
+  };
+
+  const handleFileSelection = (selectedFile: File) => {
+    if (!selectedFile.type.startsWith("image/")) {
+      alert("Please upload an image file.");
+      return;
+    }
+
+    // ADD THIS: Cleanup the previous URL if it exists
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl);
+    }
+
+    setFile(selectedFile);
+    setPreviewUrl(URL.createObjectURL(selectedFile));
+  };
+
+  const triggerFileInput = () => fileInputRef.current?.click();
+
+  const removeFile = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setFile(null);
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl);
+      setPreviewUrl(null);
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!file || !recipientName.trim()) return;
+    setIsSubmitting(true);
+    setTimeout(() => {
+      setIsSubmitting(false);
+      setSubmitted(true);
+    }, 1500);
+  };
+
+  return (
+    <div className="bg-[rgba(8,40,50,0.4)] border-[1.5px] border-[rgba(0,180,160,0.3)] rounded-3xl px-8 py-12 backdrop-blur-[12px] shadow-[0_8px_32px_rgba(0,0,0,0.3)] mt-8 md:px-5 md:py-8 md:rounded-2xl sm:px-4 sm:py-6">
+      <h2 className="font-['Bebas_Neue',sans-serif] text-[clamp(1.75rem,4vw,2.5rem)] font-normal tracking-[0.04em] leading-[1.2] text-white text-center mb-8">
+        DELIVERY <span className="text-[#00d4c8]">PROOF</span>
+      </h2>
+
+      {!submitted ? (
+        <form className="flex flex-col gap-8" onSubmit={handleSubmit}>
+          {/* Upload area */}
+          <div
+            className={`border-2 border-dashed rounded-2xl min-h-[250px] flex items-center justify-center bg-[rgba(0,0,0,0.2)] transition-all duration-300 relative overflow-hidden sm:min-h-[200px] ${
+              previewUrl ? "border-solid cursor-default p-4" : "cursor-pointer"
+            } ${
+              isDragging
+                ? "border-[#00d4c8] bg-[rgba(0,212,200,0.05)]"
+                : "border-[rgba(0,212,200,0.3)] hover:border-[#00d4c8] hover:bg-[rgba(0,212,200,0.05)]"
+            }`}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            onClick={!previewUrl ? triggerFileInput : undefined}
+          >
+            <input
+              type="file"
+              ref={fileInputRef}
+              onChange={handleFileInputChange}
+              accept="image/*"
+              className="hidden"
+            />
+            {previewUrl ? (
+              <div className="w-full h-full flex flex-col items-center gap-4">
+                <img
+                  src={previewUrl}
+                  alt="Delivery Proof Preview"
+                  className="max-w-full max-h-[300px] rounded-lg object-contain"
+                />
+                <button
+                  type="button"
+                  className="bg-[rgba(255,59,48,0.1)] text-[#ff3b30] border border-[rgba(255,59,48,0.3)] px-6 py-2 rounded-lg text-[0.9rem] font-medium cursor-pointer transition-all hover:bg-[rgba(255,59,48,0.2)] hover:border-[#ff3b30]"
+                  onClick={removeFile}
+                >
+                  Remove Image
+                </button>
+              </div>
+            ) : (
+              <div className="flex flex-col items-center text-center text-[rgba(255,255,255,0.7)]">
+                <div className="text-[#00d4c8] mb-4">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="48"
+                    height="48"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                    <polyline points="17 8 12 3 7 8" />
+                    <line x1="12" y1="3" x2="12" y2="15" />
+                  </svg>
+                </div>
+                <p className="text-[1.1rem] font-medium text-white m-0 mb-2">
+                  Click or drag & drop to upload
+                </p>
+                <p className="text-[0.9rem] m-0 text-[rgba(200,230,240,0.5)]">
+                  SVG, PNG, JPG or GIF (max. 10MB)
+                </p>
+              </div>
+            )}
+          </div>
+
+          {/* Recipient input */}
+          <div className="flex flex-col gap-3">
+            <label
+              htmlFor="recipientName"
+              className="text-white font-medium text-base"
+            >
+              Recipient Name
+            </label>
+            <input
+              type="text"
+              id="recipientName"
+              className="bg-[rgba(0,0,0,0.3)] border-[1.5px] border-[rgba(0,180,160,0.3)] rounded-xl px-6 py-4 text-white text-base font-[inherit] transition-all w-full focus:outline-none focus:border-[#00d4c8] focus:shadow-[0_0_0_4px_rgba(0,212,200,0.1)] placeholder:text-[rgba(255,255,255,0.3)]"
+              value={recipientName}
+              onChange={(e) => setRecipientName(e.target.value)}
+              placeholder="Who signed for this delivery?"
+              required
+            />
+          </div>
+
+          {/* Submit button */}
+          <button
+            type="submit"
+            className="bg-[linear-gradient(135deg,#00d4c8_0%,#009990_100%)] text-black border-none rounded-xl py-5 text-[1.1rem] font-semibold font-[inherit] cursor-pointer transition-all flex items-center justify-center mt-4 shadow-[0_4px_15px_rgba(0,212,200,0.3)] hover:not-disabled:-translate-y-0.5 hover:not-disabled:shadow-[0_8px_25px_rgba(0,212,200,0.4)] disabled:bg-[rgba(255,255,255,0.1)] disabled:text-[rgba(255,255,255,0.4)] disabled:cursor-not-allowed disabled:shadow-none"
+            disabled={!file || !recipientName.trim() || isSubmitting}
+          >
+            {isSubmitting ? (
+              <span className="flex items-center gap-3">
+                <svg className="animate-spin-svg w-6 h-6" viewBox="0 0 50 50">
+                  <circle
+                    className="animate-dash"
+                    cx="25"
+                    cy="25"
+                    r="20"
+                    fill="none"
+                    strokeWidth="5"
+                    stroke="currentColor"
+                  />
+                </svg>
+                Submitting...
+              </span>
+            ) : (
+              "Submit Proof"
+            )}
+          </button>
+        </form>
+      ) : (
+        <div className="flex flex-col gap-8">
+          {/* Success banner */}
+          <div className="bg-[rgba(0,212,200,0.1)] border border-[rgba(0,212,200,0.3)] text-[#00d4c8] px-6 py-4 rounded-xl flex items-center gap-4 font-medium">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="shrink-0"
+            >
+              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+              <polyline points="22 4 12 14.01 9 11.01" />
+            </svg>
+            <span>Delivery proof submitted successfully</span>
+          </div>
+
+          {/* Proof details */}
+          <div className="bg-[rgba(0,0,0,0.2)] rounded-2xl overflow-hidden border border-[rgba(255,255,255,0.05)]">
+            <div className="w-full bg-[rgba(0,0,0,0.5)] flex items-center justify-center p-8 min-h-[200px]">
+              {previewUrl && (
+                <img
+                  src={previewUrl}
+                  alt="Submitted Delivery Proof"
+                  className="max-w-full max-h-[400px] rounded-lg object-contain"
+                />
+              )}
+            </div>
+            <div className="px-8 py-6 bg-[rgba(255,255,255,0.02)] grid grid-cols-[auto_1fr] gap-x-8 gap-y-4 items-center md:grid-cols-1 md:gap-y-2">
+              <p className="text-[rgba(255,255,255,0.5)] text-[0.9rem] m-0">
+                Signed By
+              </p>
+              <p className="text-white text-[1.1rem] font-medium m-0 md:mb-4">
+                {recipientName}
+              </p>
+              <p className="text-[rgba(255,255,255,0.5)] text-[0.9rem] m-0">
+                Timestamp
+              </p>
+              <p className="text-white text-[1.1rem] font-medium m-0">
+                {new Date().toLocaleString()}
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DeliveryProofUpload;
diff --git a/frontend/src/pages/ShipmentDetail/MilestoneTimeline/MilestoneTimeline.example.tsx b/frontend/src/pages/ShipmentDetail/MilestoneTimeline/MilestoneTimeline.example.tsx
new file mode 100644
index 0000000..c92f4d3
--- /dev/null
+++ b/frontend/src/pages/ShipmentDetail/MilestoneTimeline/MilestoneTimeline.example.tsx
@@ -0,0 +1,245 @@
+/**
+ * Example usage of the MilestoneTimeline component
+ * This file demonstrates how to use the expanded milestone timeline in your application
+ */
+
+import MilestoneTimeline, { MilestoneDetail } from './MilestoneTimeline';
+
+// Example 1: Complete shipment journey with blockchain verification
+export const CompleteShipmentExample = () => {
+  const milestones: MilestoneDetail[] = [
+    {
+      id: '1',
+      name: 'Order Confirmed',
+      timestamp: '2026-02-20 09:15 AM EST',
+      location: 'New York Distribution Center, NY',
+      blockchainAddress: 'GABCD1234567890WXYZ1234567890ABCDEF',
+      status: 'completed',
+      notes: 'Order successfully confirmed and payment verified on blockchain. Shipment prepared for pickup.',
+      sensorReadings: {
+        temperature: '22°C',
+        humidity: '45%',
+        pressure: '1013 hPa',
+      },
+    },
+    {
+      id: '2',
+      name: 'Picked Up by Carrier',
+      timestamp: '2026-02-20 02:30 PM EST',
+      location: 'New York Distribution Center, NY',
+      blockchainAddress: 'GEFGH2345678901YZAB2345678901BCDEFG',
+      status: 'completed',
+      notes: 'Package picked up by carrier. Driver ID verified and logged on-chain.',
+      sensorReadings: {
+        temperature: '21°C',
+        humidity: '48%',
+        pressure: '1012 hPa',
+      },
+    },
+    {
+      id: '3',
+      name: 'In Transit - Philadelphia Hub',
+      timestamp: '2026-02-21 08:45 AM EST',
+      location: 'Philadelphia Logistics Hub, PA',
+      blockchainAddress: 'GIJKL3456789012ZABC3456789012CDEFGH',
+      status: 'completed',
+      notes: 'Shipment arrived at Philadelphia hub. Passed quality inspection.',
+      sensorReadings: {
+        temperature: '20°C',
+        humidity: '50%',
+        pressure: '1014 hPa',
+      },
+    },
+    {
+      id: '4',
+      name: 'Out for Delivery',
+      timestamp: '2026-02-23 09:00 AM EST',
+      location: 'Boston, MA',
+      blockchainAddress: 'GMNOP4567890123ABCD4567890123DEFGHI',
+      status: 'current',
+      notes: 'Package is currently out for delivery. Driver en route to destination.',
+      sensorReadings: {
+        temperature: '18°C',
+        humidity: '55%',
+        pressure: '1016 hPa',
+      },
+    },
+    {
+      id: '5',
+      name: 'Delivered',
+      timestamp: 'Expected: 2026-02-23 05:00 PM EST',
+      location: 'Boston, MA',
+      blockchainAddress: 'GQRST5678901234BCDE5678901234EFGHIJ',
+      status: 'upcoming',
+      notes: 'Estimated delivery time. Signature will be required upon delivery.',
+    },
+  ];
+
+  return (
+    <div style={{ padding: '2rem', backgroundColor: '#050505', minHeight: '100vh' }}>
+      <MilestoneTimeline milestones={milestones} />
+    </div>
+  );
+};
+
+// Example 2: International shipment with customs clearance
+export const InternationalShipmentExample = () => {
+  const milestones: MilestoneDetail[] = [
+    {
+      id: '1',
+      name: 'Order Placed',
+      timestamp: '2026-02-15 10:00 AM CST',
+      location: 'Shanghai, China',
+      blockchainAddress: 'GUVWX6789012345CDEF6789012345FGHIJK',
+      status: 'completed',
+      notes: 'International order confirmed. Export documentation prepared.',
+      sensorReadings: {
+        temperature: '24°C',
+        humidity: '60%',
+      },
+    },
+    {
+      id: '2',
+      name: 'Departed Origin Port',
+      timestamp: '2026-02-16 02:00 PM CST',
+      location: 'Shanghai Port, China',
+      blockchainAddress: 'GYZAB7890123456DEFG7890123456GHIJKL',
+      status: 'completed',
+      notes: 'Container loaded onto vessel. Sea freight journey initiated.',
+      sensorReadings: {
+        temperature: '23°C',
+        humidity: '65%',
+      },
+    },
+    {
+      id: '3',
+      name: 'In Transit - Pacific Ocean',
+      timestamp: '2026-02-18 08:00 AM PST',
+      location: 'Pacific Ocean',
+      blockchainAddress: 'GCDEF8901234567EFGH8901234567HIJKLM',
+      status: 'completed',
+      notes: 'Vessel on schedule. All cargo secure and monitored.',
+      sensorReadings: {
+        temperature: '22°C',
+        humidity: '70%',
+      },
+    },
+    {
+      id: '4',
+      name: 'Arrived at Destination Port',
+      timestamp: '2026-02-22 01:00 PM PST',
+      location: 'Los Angeles Port, CA',
+      blockchainAddress: 'GHIJK9012345678FGHI9012345678IJKLMN',
+      status: 'completed',
+      notes: 'Container offloaded. Awaiting customs clearance.',
+    },
+    {
+      id: '5',
+      name: 'Customs Clearance',
+      timestamp: '2026-02-23 10:30 AM PST',
+      location: 'Los Angeles Customs, CA',
+      blockchainAddress: 'GLMNO0123456789GHIJ0123456789JKLMNO',
+      status: 'current',
+      notes: 'Customs inspection in progress. Documentation under review.',
+    },
+    {
+      id: '6',
+      name: 'Out for Delivery',
+      timestamp: 'Expected: 2026-02-24 09:00 AM PST',
+      location: 'Los Angeles, CA',
+      blockchainAddress: 'GOPQR1234567890HIJK1234567890KLMNOP',
+      status: 'upcoming',
+    },
+    {
+      id: '7',
+      name: 'Delivered',
+      timestamp: 'Expected: 2026-02-24 05:00 PM PST',
+      location: 'Los Angeles, CA',
+      blockchainAddress: 'GRSTU2345678901IJKL2345678901LMNOPQ',
+      status: 'upcoming',
+    },
+  ];
+
+  return (
+    <div style={{ padding: '2rem', backgroundColor: '#050505', minHeight: '100vh' }}>
+      <MilestoneTimeline milestones={milestones} />
+    </div>
+  );
+};
+
+// Example 3: Cold chain shipment with detailed sensor monitoring
+export const ColdChainExample = () => {
+  const milestones: MilestoneDetail[] = [
+    {
+      id: '1',
+      name: 'Pharmaceutical Order Confirmed',
+      timestamp: '2026-02-22 08:00 AM EST',
+      location: 'Boston Medical Supply, MA',
+      blockchainAddress: 'GVWXY3456789012JKLM3456789012MNOPQR',
+      status: 'completed',
+      notes: 'Temperature-controlled shipment initiated. Cold chain protocol activated.',
+      sensorReadings: {
+        temperature: '4°C',
+        humidity: '35%',
+        pressure: '1015 hPa',
+      },
+    },
+    {
+      id: '2',
+      name: 'Loaded into Refrigerated Truck',
+      timestamp: '2026-02-22 10:30 AM EST',
+      location: 'Boston Medical Supply, MA',
+      blockchainAddress: 'GYZAB4567890123KLMN4567890123NOPQRS',
+      status: 'completed',
+      notes: 'Package secured in temperature-controlled compartment. Continuous monitoring active.',
+      sensorReadings: {
+        temperature: '3°C',
+        humidity: '38%',
+        pressure: '1014 hPa',
+      },
+    },
+    {
+      id: '3',
+      name: 'Temperature Alert - Resolved',
+      timestamp: '2026-02-22 02:15 PM EST',
+      location: 'En route to Hartford, CT',
+      blockchainAddress: 'GBCDE5678901234LMNO5678901234OPQRST',
+      status: 'completed',
+      notes: 'Brief temperature fluctuation detected (5.2°C). Cooling system adjusted. Temperature restored to safe range within 3 minutes.',
+      sensorReadings: {
+        temperature: '3.5°C',
+        humidity: '40%',
+        pressure: '1013 hPa',
+      },
+    },
+    {
+      id: '4',
+      name: 'Arrived at Distribution Center',
+      timestamp: '2026-02-22 06:00 PM EST',
+      location: 'Hartford Distribution Center, CT',
+      blockchainAddress: 'GEFGH6789012345MNOP6789012345PQRSTU',
+      status: 'current',
+      notes: 'Package transferred to facility cold storage. Quality check in progress.',
+      sensorReadings: {
+        temperature: '4°C',
+        humidity: '36%',
+        pressure: '1015 hPa',
+      },
+    },
+    {
+      id: '5',
+      name: 'Final Delivery',
+      timestamp: 'Expected: 2026-02-23 09:00 AM EST',
+      location: 'Hartford Hospital, CT',
+      blockchainAddress: 'GHIJK7890123456NOPQ7890123456QRSTUV',
+      status: 'upcoming',
+      notes: 'Scheduled delivery to hospital pharmacy. Cold chain integrity maintained throughout journey.',
+    },
+  ];
+
+  return (
+    <div style={{ padding: '2rem', backgroundColor: '#050505', minHeight: '100vh' }}>
+      <MilestoneTimeline milestones={milestones} />
+    </div>
+  );
+};
diff --git a/frontend/src/pages/ShipmentDetail/MilestoneTimeline/MilestoneTimeline.test.tsx b/frontend/src/pages/ShipmentDetail/MilestoneTimeline/MilestoneTimeline.test.tsx
new file mode 100644
index 0000000..c5f7587
--- /dev/null
+++ b/frontend/src/pages/ShipmentDetail/MilestoneTimeline/MilestoneTimeline.test.tsx
@@ -0,0 +1,136 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import MilestoneTimeline, { MilestoneDetail } from './MilestoneTimeline';
+
+describe('MilestoneTimeline', () => {
+  const mockMilestones: MilestoneDetail[] = [
+    {
+      id: '1',
+      name: 'Order Confirmed',
+      timestamp: '2026-02-20 09:15 AM',
+      location: 'New York, NY',
+      blockchainAddress: 'GABCD1234567890WXYZ',
+      status: 'completed',
+      notes: 'Order confirmed',
+      sensorReadings: {
+        temperature: '22°C',
+        humidity: '45%',
+      },
+    },
+    {
+      id: '2',
+      name: 'In Transit',
+      timestamp: '2026-02-21 10:00 AM',
+      location: 'Philadelphia, PA',
+      blockchainAddress: 'GEFGH2345678901YZAB',
+      status: 'current',
+    },
+    {
+      id: '3',
+      name: 'Delivered',
+      timestamp: 'Expected: 2026-02-23 05:00 PM',
+      location: 'Boston, MA',
+      blockchainAddress: 'GIJKL3456789012ZABC',
+      status: 'upcoming',
+    },
+  ];
+
+  it('renders all milestones', () => {
+    render(<MilestoneTimeline milestones={mockMilestones} />);
+    
+    expect(screen.getByText('Order Confirmed')).toBeInTheDocument();
+    expect(screen.getByText('In Transit')).toBeInTheDocument();
+    expect(screen.getByText('Delivered')).toBeInTheDocument();
+  });
+
+  it('displays truncated blockchain addresses', () => {
+    render(<MilestoneTimeline milestones={mockMilestones} />);
+    
+    expect(screen.getByText('GABCD...WXYZ')).toBeInTheDocument();
+    expect(screen.getByText('GEFGH...YZAB')).toBeInTheDocument();
+  });
+
+  it('shows timestamps and locations', () => {
+    render(<MilestoneTimeline milestones={mockMilestones} />);
+    
+    expect(screen.getByText('2026-02-20 09:15 AM')).toBeInTheDocument();
+    expect(screen.getByText('New York, NY')).toBeInTheDocument();
+  });
+
+  it('expands milestone details when expand button is clicked', () => {
+    render(<MilestoneTimeline milestones={mockMilestones} />);
+    
+    // Notes should not be visible initially
+    expect(screen.queryByText('Order confirmed')).not.toBeInTheDocument();
+    
+    // Find and click the expand button for the first milestone
+    const expandButtons = screen.getAllByLabelText('Expand details');
+    fireEvent.click(expandButtons[0]);
+    
+    // Notes should now be visible
+    expect(screen.getByText('Order confirmed')).toBeInTheDocument();
+  });
+
+  it('displays sensor readings when expanded', () => {
+    render(<MilestoneTimeline milestones={mockMilestones} />);
+    
+    // Expand the first milestone
+    const expandButtons = screen.getAllByLabelText('Expand details');
+    fireEvent.click(expandButtons[0]);
+    
+    // Check for sensor readings
+    expect(screen.getByText('22°C')).toBeInTheDocument();
+    expect(screen.getByText('45%')).toBeInTheDocument();
+  });
+
+  it('collapses milestone details when expand button is clicked again', () => {
+    render(<MilestoneTimeline milestones={mockMilestones} />);
+    
+    const expandButtons = screen.getAllByLabelText('Expand details');
+    
+    // Expand
+    fireEvent.click(expandButtons[0]);
+    expect(screen.getByText('Order confirmed')).toBeInTheDocument();
+    
+    // Collapse
+    const collapseButton = screen.getByLabelText('Collapse details');
+    fireEvent.click(collapseButton);
+    expect(screen.queryByText('Order confirmed')).not.toBeInTheDocument();
+  });
+
+  it('does not show expand button for milestones without additional details', () => {
+    render(<MilestoneTimeline milestones={mockMilestones} />);
+    
+    // The second milestone has no notes or sensor readings
+    const expandButtons = screen.getAllByLabelText(/Expand details|Collapse details/);
+    
+    // Only the first milestone should have an expand button
+    expect(expandButtons.length).toBe(1);
+  });
+
+  it('renders status icons with correct aria-labels', () => {
+    render(<MilestoneTimeline milestones={mockMilestones} />);
+
+    expect(screen.getByLabelText('Completed')).toBeInTheDocument();
+    expect(screen.getByLabelText('Current')).toBeInTheDocument();
+    expect(screen.getByLabelText('Upcoming')).toBeInTheDocument();
+  });
+
+  it('renders connectors between milestones', () => {
+    const { container } = render(<MilestoneTimeline milestones={mockMilestones} />);
+    
+    // Connectors are aria-hidden divs (not SVGs) between milestone items
+    const connectors = container.querySelectorAll('div[aria-hidden="true"]');
+    
+    // Should have n-1 connectors for n milestones
+    expect(connectors.length).toBe(mockMilestones.length - 1);
+  });
+
+  it('handles empty milestones array', () => {
+    render(<MilestoneTimeline milestones={[]} />);
+    
+    const timeline = screen.getByRole('list');
+    expect(timeline).toBeInTheDocument();
+    expect(timeline.children.length).toBe(0);
+  });
+});
diff --git a/frontend/src/pages/ShipmentDetail/MilestoneTimeline/MilestoneTimeline.tsx b/frontend/src/pages/ShipmentDetail/MilestoneTimeline/MilestoneTimeline.tsx
new file mode 100644
index 0000000..759beb0
--- /dev/null
+++ b/frontend/src/pages/ShipmentDetail/MilestoneTimeline/MilestoneTimeline.tsx
@@ -0,0 +1,211 @@
+import React, { useState } from 'react';
+
+export interface MilestoneDetail {
+  id: string;
+  name: string;
+  timestamp: string;
+  location: string;
+  blockchainAddress: string;
+  status: 'completed' | 'current' | 'upcoming';
+  notes?: string;
+  sensorReadings?: {
+    temperature?: string;
+    humidity?: string;
+    pressure?: string;
+    [key: string]: string | undefined;
+  };
+}
+
+export interface MilestoneTimelineProps {
+  milestones: MilestoneDetail[];
+}
+
+const MilestoneTimeline: React.FC<MilestoneTimelineProps> = ({ milestones }) => {
+  const [expandedMilestones, setExpandedMilestones] = useState<Set<string>>(new Set());
+
+  const toggleExpanded = (id: string) => {
+    setExpandedMilestones(prev => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  };
+
+  const truncateAddress = (address: string) =>
+    address.length <= 12 ? address : `${address.slice(0, 5)}...${address.slice(-4)}`;
+
+  const getStatusIcon = (status: MilestoneDetail['status']) => {
+    const base = 'w-8 h-8 shrink-0 z-10';
+    switch (status) {
+      case 'completed':
+        return (
+          <svg className={`${base} text-accent-blue`} width="32" height="32" viewBox="0 0 32 32" fill="none" aria-label="Completed">
+            <circle cx="16" cy="16" r="14" fill="currentColor" />
+            <path d="M10 16l5 5 7-9" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        );
+      case 'current':
+        return (
+          <svg className={`${base} text-primary animate-pulse-glow`} width="32" height="32" viewBox="0 0 32 32" fill="none" aria-label="Current">
+            <circle cx="16" cy="16" r="14" fill="currentColor" />
+            <circle cx="16" cy="16" r="6" fill="white" />
+          </svg>
+        );
+      case 'upcoming':
+        return (
+          <svg className={`${base} text-text-secondary`} width="32" height="32" viewBox="0 0 32 32" fill="none" aria-label="Upcoming">
+            <circle cx="16" cy="16" r="14" stroke="currentColor" strokeWidth="2.5" fill="none" />
+          </svg>
+        );
+    }
+  };
+
+  const hasExpandableContent = (m: MilestoneDetail) => !!(m.notes || m.sensorReadings);
+  //build
+  return (
+    <div className="flex flex-col p-6 w-full max-w-[900px] md:p-4 sm:p-3" role="list" aria-label="Detailed shipment milestone timeline">
+      {milestones.map((milestone, index) => {
+        const isExpanded = expandedMilestones.has(milestone.id);
+        const canExpand = hasExpandableContent(milestone);
+        const isUpcoming = milestone.status === 'upcoming';
+        const isCurrent = milestone.status === 'current';
+
+        return (
+          <div key={milestone.id} className="flex gap-6 relative md:gap-4 sm:gap-3" role="listitem">
+            {/* Marker */}
+            <div className="flex flex-col items-center shrink-0 pt-1">
+              {getStatusIcon(milestone.status)}
+              {index < milestones.length - 1 && (
+                <div
+                  className={`w-[3px] grow min-h-[60px] mt-1.5 mb-1.5 ${
+                    milestone.status === 'completed' ? 'bg-accent-blue' : 'connector-dashed-milestone'
+                  }`}
+                  aria-hidden="true"
+                />
+              )}
+            </div>
+
+            {/* Content wrapper */}
+            <div className="grow pb-10 last:pb-0 sm:pb-8">
+              <div className={`rounded-xl p-5 border transition-all duration-300 md:p-4 sm:p-3.5 ${
+                isCurrent
+                  ? 'bg-background-card border-[rgba(0,217,255,0.3)] shadow-[0_0_20px_rgba(0,217,255,0.1)]'
+                  : isUpcoming
+                  ? 'bg-[rgba(15,20,25,0.5)] border-[rgba(30,36,51,0.5)]'
+                  : 'bg-background-card border-border'
+              }`}>
+                {/* Header row */}
+                <div className="flex justify-between items-start mb-4 gap-4 sm:flex-col sm:gap-2">
+                  <h3 className={`text-[1.125rem] font-semibold m-0 leading-[1.4] md:text-base sm:text-[0.9375rem] ${
+                    isUpcoming ? 'text-text-secondary' : 'text-text-primary'
+                  }`}>
+                    {milestone.name}
+                  </h3>
+                  {canExpand && (
+                    <button
+                      className={`bg-none border-none p-1 cursor-pointer transition-all duration-200 shrink-0 rounded hover:text-primary hover:bg-[rgba(0,217,255,0.1)] focus:outline-[2px] focus:outline-primary focus:outline-offset-2 ${
+                        isUpcoming ? 'text-text-secondary' : 'text-text-secondary'
+                      } sm:self-start`}
+                      onClick={() => toggleExpanded(milestone.id)}
+                      aria-expanded={isExpanded}
+                      aria-label={isExpanded ? 'Collapse details' : 'Expand details'}
+                    >
+                      <svg
+                        width="20" height="20" viewBox="0 0 20 20" fill="none"
+                        className={`transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`}
+                      >
+                        <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                      </svg>
+                    </button>
+                  )}
+                </div>
+
+                {/* Info rows */}
+                <div className="flex flex-col gap-2.5 sm:gap-2">
+                  {[
+                    {
+                      icon: (
+                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                          <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" />
+                          <path d="M8 4v4l3 2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                        </svg>
+                      ),
+                      text: milestone.timestamp,
+                    },
+                    {
+                      icon: (
+                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                          <path d="M8 1C5.79 1 4 2.79 4 5c0 3 4 8 4 8s4-5 4-8c0-2.21-1.79-4-4-4z" stroke="currentColor" strokeWidth="1.5" fill="none" />
+                          <circle cx="8" cy="5" r="1.5" fill="currentColor" />
+                        </svg>
+                      ),
+                      text: milestone.location,
+                    },
+                  ].map(({ icon, text }, i) => (
+                    <p key={i} className={`flex items-center gap-2 text-[0.9375rem] m-0 leading-[1.5] sm:text-sm sm:flex-wrap ${
+                      isUpcoming ? 'text-[#6B7280]' : 'text-text-secondary'
+                    }`}>
+                      <span className={`shrink-0 ${isCurrent ? 'text-primary' : 'text-[#6B7280]'}`}>{icon}</span>
+                      {text}
+                    </p>
+                  ))}
+
+                  {/* Blockchain address */}
+                  <p className={`flex items-center gap-2 text-[0.9375rem] m-0 leading-[1.5] font-[Inter,monospace] sm:text-[0.8125rem] sm:flex-wrap ${
+                    isUpcoming ? 'text-[#6B7280]' : 'text-text-secondary'
+                  }`}>
+                    <span className={`shrink-0 ${isCurrent ? 'text-primary' : 'text-[#6B7280]'}`}>
+                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                        <rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" strokeWidth="1.5" fill="none" />
+                        <path d="M5 6h6M5 9h4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                      </svg>
+                    </span>
+                    <span className="font-medium">Blockchain:</span>
+                    <code className={`text-sm px-2 py-0.5 rounded font-['Courier_New',monospace] ${
+                      isUpcoming
+                        ? 'bg-[rgba(107,114,128,0.1)] text-[#6B7280]'
+                        : 'bg-[rgba(0,217,255,0.1)] text-primary'
+                    }`}>
+                      {truncateAddress(milestone.blockchainAddress)}
+                    </code>
+                  </p>
+                </div>
+
+                {/* Expandable details */}
+                {canExpand && isExpanded && (
+                  <div className="mt-5 pt-5 border-t border-border animate-slide-down">
+                    {milestone.notes && (
+                      <div className="mb-4 last:mb-0">
+                        <h4 className="text-sm font-semibold text-primary m-0 mb-2 uppercase tracking-[0.05em]">Notes</h4>
+                        <p className="text-[0.9375rem] text-[#D1D5DB] m-0 leading-[1.6]">{milestone.notes}</p>
+                      </div>
+                    )}
+                    {milestone.sensorReadings && (
+                      <div className="mb-4 last:mb-0">
+                        <h4 className="text-sm font-semibold text-primary m-0 mb-2 uppercase tracking-[0.05em]">Sensor Readings</h4>
+                        <div className="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-3 sm:grid-cols-1">
+                          {Object.entries(milestone.sensorReadings).map(([key, value]) =>
+                            value ? (
+                              <div key={key} className="flex flex-col gap-1 bg-[rgba(0,217,255,0.05)] p-3 rounded-lg border border-[rgba(0,217,255,0.1)]">
+                                <span className="text-[0.8125rem] text-text-secondary font-medium">
+                                  {key.charAt(0).toUpperCase() + key.slice(1)}:
+                                </span>
+                                <span className="text-base text-text-primary font-semibold">{value}</span>
+                              </div>
+                            ) : null
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default MilestoneTimeline;
diff --git a/frontend/src/pages/ShipmentDetail/MilestoneTimeline/README.md b/frontend/src/pages/ShipmentDetail/MilestoneTimeline/README.md
new file mode 100644
index 0000000..0d771b0
--- /dev/null
+++ b/frontend/src/pages/ShipmentDetail/MilestoneTimeline/README.md
@@ -0,0 +1,151 @@
+# MilestoneTimeline Component
+
+An expanded, detailed timeline component for displaying shipment milestones with blockchain verification, sensor readings, and expandable details.
+
+## Features
+
+- **Blockchain Verification**: Each milestone displays a truncated blockchain address (e.g., GABCD...WXYZ)
+- **Visual Status States**: Completed, current, and upcoming milestones with distinct styling
+- **Expandable Details**: Click to reveal additional notes and sensor readings
+- **Sensor Monitoring**: Display temperature, humidity, pressure, and custom sensor data
+- **Responsive Design**: Optimized for mobile, tablet, and desktop views
+- **Accessibility**: Full keyboard navigation and ARIA labels
+
+## Usage
+
+```tsx
+import MilestoneTimeline, { MilestoneDetail } from './MilestoneTimeline/MilestoneTimeline';
+
+const milestones: MilestoneDetail[] = [
+  {
+    id: '1',
+    name: 'Order Confirmed',
+    timestamp: '2026-02-20 09:15 AM EST',
+    location: 'New York, NY',
+    blockchainAddress: 'GABCD1234567890WXYZ1234567890ABCDEF',
+    status: 'completed',
+    notes: 'Order successfully confirmed and payment verified.',
+    sensorReadings: {
+      temperature: '22°C',
+      humidity: '45%',
+      pressure: '1013 hPa',
+    },
+  },
+  // ... more milestones
+];
+
+<MilestoneTimeline milestones={milestones} />
+```
+
+## Props
+
+### MilestoneTimelineProps
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| milestones | `MilestoneDetail[]` | Yes | Array of milestone objects to display |
+
+### MilestoneDetail
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| id | `string` | Yes | Unique identifier for the milestone |
+| name | `string` | Yes | Display name of the milestone event |
+| timestamp | `string` | Yes | Timestamp of the milestone |
+| location | `string` | Yes | Geographic location of the milestone |
+| blockchainAddress | `string` | Yes | Blockchain address that recorded the event |
+| status | `'completed' \| 'current' \| 'upcoming'` | Yes | Visual state of the milestone |
+| notes | `string` | No | Additional notes or description (shown when expanded) |
+| sensorReadings | `object` | No | Sensor data readings (shown when expanded) |
+
+### SensorReadings
+
+The `sensorReadings` object accepts any key-value pairs where values are strings:
+
+```tsx
+sensorReadings: {
+  temperature?: string;
+  humidity?: string;
+  pressure?: string;
+  [key: string]: string | undefined;
+}
+```
+
+## Status States
+
+### Completed
+- Blue checkmark icon
+- Solid blue connector line
+- Full color text and details
+- Indicates milestone has been reached
+
+### Current
+- Pulsing cyan icon with glow effect
+- Dashed connector line to next milestone
+- Highlighted border on card
+- Indicates active/in-progress milestone
+
+### Upcoming
+- Gray outlined icon
+- Dashed gray connector line
+- Muted text colors
+- Indicates future milestone
+
+## Expandable Details
+
+Milestones with `notes` or `sensorReadings` display an expand/collapse button. Click to reveal:
+
+- **Notes Section**: Detailed description or additional information
+- **Sensor Readings Section**: Grid of sensor data with labels and values
+
+## Blockchain Address Truncation
+
+Long blockchain addresses are automatically truncated for readability:
+- Full: `GABCD1234567890WXYZ1234567890ABCDEF`
+- Displayed: `GABCD...CDEF`
+
+Addresses 12 characters or shorter are displayed in full.
+
+## Styling
+
+The component uses custom CSS with design tokens from the Tailwind config:
+- Background colors: `#0F1419` (card), `#050505` (page)
+- Border colors: `#1E2433` (default), `rgba(0, 217, 255, 0.3)` (current)
+- Accent colors: `#00D9FF` (primary), `#3B82F6` (completed)
+- Text colors: `rgba(255, 255, 255, 0.87)` (primary), `#9CA3AF` (secondary)
+
+## Responsive Breakpoints
+
+- **Desktop** (>768px): Full layout with multi-column sensor grid
+- **Tablet** (480px-768px): Adjusted spacing and single-column sensor grid
+- **Mobile** (<480px): Compact layout with smaller icons and stacked elements
+
+## Accessibility
+
+- Semantic HTML with proper ARIA labels
+- Keyboard navigation support
+- Focus indicators on interactive elements
+- Screen reader friendly status icons
+- Proper heading hierarchy
+
+## Examples
+
+See `MilestoneTimeline.example.tsx` for complete usage examples:
+- Standard domestic shipment
+- International shipment with customs
+- Cold chain pharmaceutical delivery
+
+## Testing
+
+Run tests with:
+```bash
+pnpm run test MilestoneTimeline.test.tsx
+```
+
+The test suite covers:
+- Rendering all milestones
+- Blockchain address truncation
+- Expand/collapse functionality
+- Sensor readings display
+- Status state styling
+- Empty state handling
diff --git a/frontend/src/pages/ShipmentDetail/PaymentStatus/PaymentStatus.tsx b/frontend/src/pages/ShipmentDetail/PaymentStatus/PaymentStatus.tsx
new file mode 100644
index 0000000..3669583
--- /dev/null
+++ b/frontend/src/pages/ShipmentDetail/PaymentStatus/PaymentStatus.tsx
@@ -0,0 +1,139 @@
+import React from "react";
+import { ExternalLink, Wallet, CreditCard, ArrowRightLeft, Hash } from "lucide-react";
+
+export type PaymentStatusType = "pending" | "escrowed" | "released" | "failed";
+
+export interface PaymentData {
+  amount: string;
+  tokenSymbol: string;
+  status: PaymentStatusType;
+  payerAddress: string;
+  payeeAddress: string;
+  transactionHash: string;
+}
+
+export interface PaymentStatusProps {
+  payment?: PaymentData | null;
+}
+
+const PaymentStatus: React.FC<PaymentStatusProps> = ({ payment }) => {
+  const statusStyles: Record<PaymentStatusType, string> = {
+    pending: "bg-yellow-500/20 text-yellow-300 border border-yellow-500/40",
+    escrowed: "bg-blue-500/20 text-blue-300 border border-blue-500/40",
+    released: "bg-green-500/20 text-green-300 border border-green-500/40",
+    failed: "bg-red-500/20 text-red-300 border border-red-500/40",
+  };
+
+  const formatStatus = (status: PaymentStatusType): string =>
+    status.charAt(0).toUpperCase() + status.slice(1);
+
+  const truncateAddress = (address: string): string => {
+    if (address.length <= 12) return address;
+    return `${address.slice(0, 6)}...${address.slice(-4)}`;
+  };
+
+  const getStellarExplorerUrl = (txHash: string): string =>
+    `https://stellar.expert/explorer/testnet/tx/${txHash}`;
+
+  return (
+    <div className="bg-[rgba(8,40,50,0.4)] border-[1.5px] border-[rgba(0,180,160,0.3)] rounded-3xl px-8 py-12 backdrop-blur-md shadow-[0_8px_32px_rgba(0,0,0,0.3)] mt-8 md:px-5 md:py-8 md:rounded-2xl sm:px-4 sm:py-6">
+      <h2 className="font-['Bebas_Neue',sans-serif] text-[clamp(1.75rem,4vw,2.5rem)] font-normal tracking-[0.04em] leading-[1.2] text-white text-center mb-8">
+        PAYMENT <span className="text-[#00d4c8]">STATUS</span>
+      </h2>
+
+      {payment ? (
+        <div className="bg-[rgba(0,0,0,0.2)] rounded-2xl border border-[rgba(255,255,255,0.05)] overflow-hidden">
+          {/* Payment Amount Header */}
+          <div className="bg-[rgba(0,212,200,0.05)] border-b border-[rgba(0,212,200,0.2)] px-6 py-5 flex items-center justify-between flex-wrap gap-4">
+            <div className="flex items-center gap-4">
+              <div className="bg-[rgba(0,212,200,0.15)] rounded-xl w-12 h-12 flex items-center justify-center">
+                <Wallet className="w-6 h-6 text-[#00d4c8]" />
+              </div>
+              <div>
+                <p className="text-[rgba(255,255,255,0.5)] text-sm m-0 mb-1">Payment Amount</p>
+                <p className="text-white text-2xl font-semibold m-0">
+                  {payment.amount} <span className="text-[#00d4c8]">{payment.tokenSymbol}</span>
+                </p>
+              </div>
+            </div>
+            <span
+              className={`inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-semibold ${statusStyles[payment.status]}`}
+            >
+              <span
+                className={`w-2 h-2 rounded-full ${
+                  payment.status === "pending" ? "bg-yellow-400 animate-pulse" :
+                  payment.status === "escrowed" ? "bg-blue-400 animate-pulse" :
+                  payment.status === "released" ? "bg-green-400" :
+                  "bg-red-400"
+                }`}
+              />
+              {formatStatus(payment.status)}
+            </span>
+          </div>
+
+          {/* Payment Details */}
+          <div className="px-6 py-6 flex flex-col gap-5">
+            {/* Payer Address */}
+            <div className="flex items-start gap-4">
+              <div className="bg-[rgba(0,212,200,0.1)] rounded-lg w-10 h-10 flex items-center justify-center shrink-0">
+                <CreditCard className="w-5 h-5 text-[#00d4c8]" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-[rgba(255,255,255,0.5)] text-sm m-0 mb-1">Payer Address</p>
+                <p className="text-white text-base font-medium m-0 font-mono" title={payment.payerAddress}>
+                  {truncateAddress(payment.payerAddress)}
+                </p>
+              </div>
+            </div>
+
+            {/* Payee Address */}
+            <div className="flex items-start gap-4">
+              <div className="bg-[rgba(0,212,200,0.1)] rounded-lg w-10 h-10 flex items-center justify-center shrink-0">
+                <ArrowRightLeft className="w-5 h-5 text-[#00d4c8]" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-[rgba(255,255,255,0.5)] text-sm m-0 mb-1">Payee Address</p>
+                <p className="text-white text-base font-medium m-0 font-mono" title={payment.payeeAddress}>
+                  {truncateAddress(payment.payeeAddress)}
+                </p>
+              </div>
+            </div>
+
+            {/* Transaction Hash */}
+            <div className="flex items-start gap-4">
+              <div className="bg-[rgba(0,212,200,0.1)] rounded-lg w-10 h-10 flex items-center justify-center shrink-0">
+                <Hash className="w-5 h-5 text-[#00d4c8]" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-[rgba(255,255,255,0.5)] text-sm m-0 mb-1">Transaction Hash</p>
+                <a
+                  href={getStellarExplorerUrl(payment.transactionHash)}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-2 text-[#00d4c8] text-base font-medium font-mono hover:text-[#1fffff] transition-colors group"
+                  title={payment.transactionHash}
+                >
+                  {truncateAddress(payment.transactionHash)}
+                  <ExternalLink className="w-4 h-4 opacity-70 group-hover:opacity-100 transition-opacity" />
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        /* Empty State */
+        <div className="bg-[rgba(0,0,0,0.2)] rounded-2xl border border-[rgba(255,255,255,0.05)] px-8 py-12 flex flex-col items-center text-center">
+          <div className="bg-[rgba(255,255,255,0.05)] rounded-full w-20 h-20 flex items-center justify-center mb-6">
+            <Wallet className="w-10 h-10 text-[rgba(255,255,255,0.3)]" />
+          </div>
+          <h3 className="text-white text-xl font-semibold m-0 mb-2">Payment Not Yet Initiated</h3>
+          <p className="text-[rgba(255,255,255,0.5)] text-base m-0 max-w-md">
+            No payment has been made for this shipment yet. Payment details will appear here once a transaction is initiated.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PaymentStatus;
\ No newline at end of file
diff --git a/frontend/src/pages/ShipmentDetail/SensorDataCards/SensorDataCards.tsx b/frontend/src/pages/ShipmentDetail/SensorDataCards/SensorDataCards.tsx
new file mode 100644
index 0000000..f97e606
--- /dev/null
+++ b/frontend/src/pages/ShipmentDetail/SensorDataCards/SensorDataCards.tsx
@@ -0,0 +1,163 @@
+import React from "react";
+import { Thermometer, Droplets, MapPin, AlertTriangle } from "lucide-react";
+
+export interface SensorData {
+  temperature?: {
+    value: number;
+    unit: string;
+    lastUpdated: string;
+  };
+  humidity?: {
+    value: number;
+    unit: string;
+    lastUpdated: string;
+  };
+  gps?: {
+    latitude: number;
+    longitude: number;
+    lastUpdated: string;
+  };
+  shockTilt?: {
+    eventCount: number;
+    lastUpdated: string;
+  };
+}
+
+export interface SensorDataCardsProps {
+  sensorData?: SensorData | null;
+}
+
+interface SensorCardProps {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  subValue?: string;
+  lastUpdated: string;
+}
+
+const SensorCard: React.FC<SensorCardProps> = ({
+  icon,
+  label,
+  value,
+  subValue,
+  lastUpdated,
+}) => (
+  <div className="bg-[rgba(0,0,0,0.2)] rounded-2xl border border-[rgba(255,255,255,0.05)] p-5 flex flex-col gap-3 hover:border-[rgba(0,212,200,0.3)] transition-colors">
+    <div className="flex items-center gap-3">
+      <div className="bg-[rgba(0,212,200,0.15)] rounded-xl w-11 h-11 flex items-center justify-center shrink-0">
+        {icon}
+      </div>
+      <span className="text-[rgba(255,255,255,0.6)] text-sm font-medium">{label}</span>
+    </div>
+    <div className="flex flex-col gap-1">
+      <p className="text-white text-2xl font-semibold m-0">
+        {value}
+        {subValue && (
+          <span className="text-[#00d4c8] text-lg ml-1">{subValue}</span>
+        )}
+      </p>
+      <p className="text-[rgba(255,255,255,0.4)] text-xs m-0">
+        Last updated: {lastUpdated}
+      </p>
+    </div>
+  </div>
+);
+
+const SensorDataCards: React.FC<SensorDataCardsProps> = ({ sensorData }) => {
+  const formatCoordinate = (coord: number, type: "lat" | "lng"): string => {
+    const direction = type === "lat" ? (coord >= 0 ? "N" : "S") : (coord >= 0 ? "E" : "W");
+    return `${Math.abs(coord).toFixed(4)}° ${direction}`;
+  };
+
+  const hasAnyData = sensorData && (
+    sensorData.temperature ||
+    sensorData.humidity ||
+    sensorData.gps ||
+    sensorData.shockTilt
+  );
+
+  return (
+    <div className="bg-[rgba(8,40,50,0.4)] border-[1.5px] border-[rgba(0,180,160,0.3)] rounded-3xl px-8 py-12 backdrop-blur-md shadow-[0_8px_32px_rgba(0,0,0,0.3)] mt-8 md:px-5 md:py-8 md:rounded-2xl sm:px-4 sm:py-6">
+      <h2 className="font-['Bebas_Neue',sans-serif] text-[clamp(1.75rem,4vw,2.5rem)] font-normal tracking-[0.04em] leading-[1.2] text-white text-center mb-8">
+        SENSOR <span className="text-[#00d4c8]">DATA</span>
+      </h2>
+
+      {hasAnyData ? (
+        <div className="grid grid-cols-4 gap-4 lg:grid-cols-2 sm:grid-cols-2">
+          {/* Temperature Card */}
+          {sensorData.temperature ? (
+            <SensorCard
+              icon={<Thermometer className="w-5 h-5 text-[#00d4c8]" />}
+              label="Temperature"
+              value={`${sensorData.temperature.value}`}
+              subValue={sensorData.temperature.unit}
+              lastUpdated={sensorData.temperature.lastUpdated}
+            />
+          ) : (
+            <div className="bg-[rgba(0,0,0,0.2)] rounded-2xl border border-[rgba(255,255,255,0.05)] p-5 flex items-center justify-center">
+              <p className="text-[rgba(255,255,255,0.3)] text-sm m-0">No temperature data</p>
+            </div>
+          )}
+
+          {/* Humidity Card */}
+          {sensorData.humidity ? (
+            <SensorCard
+              icon={<Droplets className="w-5 h-5 text-[#00d4c8]" />}
+              label="Humidity"
+              value={`${sensorData.humidity.value}`}
+              subValue={sensorData.humidity.unit}
+              lastUpdated={sensorData.humidity.lastUpdated}
+            />
+          ) : (
+            <div className="bg-[rgba(0,0,0,0.2)] rounded-2xl border border-[rgba(255,255,255,0.05)] p-5 flex items-center justify-center">
+              <p className="text-[rgba(255,255,255,0.3)] text-sm m-0">No humidity data</p>
+            </div>
+          )}
+
+          {/* GPS Location Card */}
+          {sensorData.gps ? (
+            <SensorCard
+              icon={<MapPin className="w-5 h-5 text-[#00d4c8]" />}
+              label="GPS Location"
+              value={formatCoordinate(sensorData.gps.latitude, "lat")}
+              subValue={formatCoordinate(sensorData.gps.longitude, "lng")}
+              lastUpdated={sensorData.gps.lastUpdated}
+            />
+          ) : (
+            <div className="bg-[rgba(0,0,0,0.2)] rounded-2xl border border-[rgba(255,255,255,0.05)] p-5 flex items-center justify-center">
+              <p className="text-[rgba(255,255,255,0.3)] text-sm m-0">No GPS data</p>
+            </div>
+          )}
+
+          {/* Shock/Tilt Events Card */}
+          {sensorData.shockTilt ? (
+            <SensorCard
+              icon={<AlertTriangle className="w-5 h-5 text-[#00d4c8]" />}
+              label="Shock/Tilt Events"
+              value={`${sensorData.shockTilt.eventCount}`}
+              subValue="events"
+              lastUpdated={sensorData.shockTilt.lastUpdated}
+            />
+          ) : (
+            <div className="bg-[rgba(0,0,0,0.2)] rounded-2xl border border-[rgba(255,255,255,0.05)] p-5 flex items-center justify-center">
+              <p className="text-[rgba(255,255,255,0.3)] text-sm m-0">No shock/tilt data</p>
+            </div>
+          )}
+        </div>
+      ) : (
+        /* Empty State */
+        <div className="bg-[rgba(0,0,0,0.2)] rounded-2xl border border-[rgba(255,255,255,0.05)] px-8 py-12 flex flex-col items-center text-center">
+          <div className="bg-[rgba(255,255,255,0.05)] rounded-full w-20 h-20 flex items-center justify-center mb-6">
+            <Thermometer className="w-10 h-10 text-[rgba(255,255,255,0.3)]" />
+          </div>
+          <h3 className="text-white text-xl font-semibold m-0 mb-2">No Sensor Data Available</h3>
+          <p className="text-[rgba(255,255,255,0.5)] text-base m-0 max-w-md">
+            IoT sensor readings will appear here once the shipment tracking devices start transmitting data.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SensorDataCards;
\ No newline at end of file
diff --git a/frontend/src/pages/ShipmentDetail/ShipmentDetail.tsx b/frontend/src/pages/ShipmentDetail/ShipmentDetail.tsx
new file mode 100644
index 0000000..9e62001
--- /dev/null
+++ b/frontend/src/pages/ShipmentDetail/ShipmentDetail.tsx
@@ -0,0 +1,217 @@
+import React from "react";
+import MilestoneTimeline, {
+    MilestoneDetail,
+} from "./MilestoneTimeline/MilestoneTimeline";
+import ShipmentDetailHeader from "./ShipmentDetailHeader/ShipmentDetailHeader";
+import ShipmentMap from "./ShipmentMap/ShipmentMap";
+import DeliveryProofUpload from "./DeliveryProofUpload/DeliveryProofUpload";
+import DeliveryConfirmation from "../../components/shipment/DeliveryConfirmation/DeliveryConfirmation";
+import PaymentStatus, { PaymentData } from "./PaymentStatus/PaymentStatus";
+import SensorDataCards, { SensorData } from "./SensorDataCards/SensorDataCards";
+
+const ShipmentDetail: React.FC = () => {
+    const shipmentHeaderData = {
+        shipmentId: "#SHP-992834",
+        status: "in_transit" as const,
+        originAddress: "New York Distribution Center, NY 10001",
+        destinationAddress: "123 Main Street, Boston, MA 02101",
+        expectedDeliveryDate: "Oct 24, 2026 by 5:00 PM EST",
+        userRole: "company" as const,
+    };
+
+    const handleUpdateStatus = () => {
+        console.log("Update status clicked");
+    };
+    const handleTrack = () => {
+        console.log("Track clicked");
+    };
+
+    // Mock payment data - set to null to show empty state
+    const mockPaymentData: PaymentData | null = {
+        amount: "1,500.00",
+        tokenSymbol: "XLM",
+        status: "escrowed",
+        payerAddress:
+            "GBZXN7PIRZGNMHGA7MUUUF4GWPY5AYPV6LY4UV2GL6VJGIQRXFDNMADI",
+        payeeAddress:
+            "GCFXHS4GXL6BVUCXBWXGTITROWLVYXQKQLF4YH5O5JT3YZXCYPAFBJZB",
+        transactionHash:
+            "a]b c9d4e8f7a6b5c4d3e2f1a0b9c8d7e6f5a4b3c2d1e0f9a8b7c6d5e4f3a2b1c0d9",
+    };
+
+    // Mock sensor data - set to null to show empty state
+    const mockSensorData: SensorData | null = {
+        temperature: {
+            value: 22,
+            unit: "°C",
+            lastUpdated: "2026-02-23 09:15 AM EST",
+        },
+        humidity: {
+            value: 45,
+            unit: "%",
+            lastUpdated: "2026-02-23 09:15 AM EST",
+        },
+        gps: {
+            latitude: 42.3601,
+            longitude: -71.0589,
+            lastUpdated: "2026-02-23 09:10 AM EST",
+        },
+        shockTilt: {
+            eventCount: 2,
+            lastUpdated: "2026-02-22 03:45 PM EST",
+        },
+    };
+
+    const mockMilestones: MilestoneDetail[] = [
+        {
+            id: "1",
+            name: "Order Confirmed",
+            timestamp: "2026-02-20 09:15 AM EST",
+            location: "New York Distribution Center, NY",
+            blockchainAddress: "GABCD1234567890WXYZ1234567890ABCDEF",
+            status: "completed",
+            notes: "Order successfully confirmed and payment verified on blockchain. Shipment prepared for pickup.",
+            sensorReadings: {
+                temperature: "22°C",
+                humidity: "45%",
+                pressure: "1013 hPa",
+            },
+        },
+        {
+            id: "2",
+            name: "Picked Up by Carrier",
+            timestamp: "2026-02-20 02:30 PM EST",
+            location: "New York Distribution Center, NY",
+            blockchainAddress: "GEFGH2345678901YZAB2345678901BCDEFG",
+            status: "completed",
+            notes: "Package picked up by carrier. Driver ID verified and logged on-chain.",
+            sensorReadings: {
+                temperature: "21°C",
+                humidity: "48%",
+                pressure: "1012 hPa",
+            },
+        },
+        {
+            id: "3",
+            name: "In Transit - Philadelphia Hub",
+            timestamp: "2026-02-21 08:45 AM EST",
+            location: "Philadelphia Logistics Hub, PA",
+            blockchainAddress: "GIJKL3456789012ZABC3456789012CDEFGH",
+            status: "completed",
+            notes: "Shipment arrived at Philadelphia hub. Passed quality inspection.",
+            sensorReadings: {
+                temperature: "20°C",
+                humidity: "50%",
+                pressure: "1014 hPa",
+            },
+        },
+        {
+            id: "4",
+            name: "Departed Philadelphia Hub",
+            timestamp: "2026-02-21 03:20 PM EST",
+            location: "Philadelphia Logistics Hub, PA",
+            blockchainAddress: "GMNOP4567890123ABCD4567890123DEFGHI",
+            status: "completed",
+            notes: "Package departed Philadelphia hub en route to Boston.",
+            sensorReadings: {
+                temperature: "19°C",
+                humidity: "52%",
+                pressure: "1015 hPa",
+            },
+        },
+        {
+            id: "5",
+            name: "Arrived at Boston Facility",
+            timestamp: "2026-02-22 07:10 AM EST",
+            location: "Boston Regional Facility, MA",
+            blockchainAddress: "GQRST5678901234BCDE5678901234EFGHIJ",
+            status: "completed",
+            notes: "Shipment arrived at Boston facility. Sorted and prepared for final delivery.",
+            sensorReadings: {
+                temperature: "18°C",
+                humidity: "55%",
+                pressure: "1016 hPa",
+            },
+        },
+        {
+            id: "6",
+            name: "Out for Delivery",
+            timestamp: "2026-02-23 09:00 AM EST",
+            location: "Boston, MA",
+            blockchainAddress: "GUVWX6789012345CDEF6789012345FGHIJK",
+            status: "current",
+            notes: "Package is currently out for delivery. Driver en route to destination address.",
+            sensorReadings: {
+                temperature: "17°C",
+                humidity: "58%",
+                pressure: "1017 hPa",
+            },
+        },
+        {
+            id: "7",
+            name: "Delivered",
+            timestamp: "Expected: 2026-02-23 05:00 PM EST",
+            location: "Boston, MA",
+            blockchainAddress: "GYZAB7890123456DEFG7890123456GHIJKL",
+            status: "upcoming",
+            notes: "Estimated delivery time. Signature will be required upon delivery.",
+        },
+    ];
+
+    return (
+        <div className="relative min-h-screen w-full bg-[radial-gradient(ellipse_at_50%_0%,#0a3d3a_0%,#061e20_35%,#020d10_70%,#000_100%)] px-8 py-16 md:px-4 md:py-8 sm:px-3 sm:py-6 font-sans">
+            <div className="max-w-300 mx-auto relative z-10">
+                {/* Page header */}
+                <div className="text-center mb-16 md:mb-10">
+                    <h1 className="font-['Bebas_Neue',sans-serif] text-[clamp(2.5rem,7vw,5rem)] font-normal tracking-[0.04em] leading-[1.1] text-white m-0 mb-4">
+                        SHIPMENT <span className="text-[#00d4c8]">DETAILS</span>
+                    </h1>
+                    <p className="text-[clamp(0.95rem,2vw,1.1rem)] font-light leading-[1.7] text-[rgba(200,230,240,0.75)] max-w-150 mx-auto">
+                        Track your shipment's journey with blockchain-verified
+                        milestones
+                    </p>
+                </div>
+
+                {/* Content card */}
+                <div className="bg-[rgba(8,40,50,0.4)] border-[1.5px] border-[rgba(0,180,160,0.3)] rounded-3xl p-8 backdrop-blur-md shadow-[0_8px_32px_rgba(0,0,0,0.3)] md:p-5 md:rounded-2xl sm:p-4">
+                    <ShipmentMap
+                        origin={shipmentHeaderData.originAddress}
+                        destination={shipmentHeaderData.destinationAddress}
+                    />
+
+                    <ShipmentDetailHeader
+                        {...shipmentHeaderData}
+                        onUpdateStatus={handleUpdateStatus}
+                        onTrack={handleTrack}
+                    />
+
+                    {/* Divider */}
+                    <div className="h-px bg-[rgba(0,212,200,0.2)] my-8" />
+
+                    <h2 className="font-['Bebas_Neue',sans-serif] text-[clamp(1.75rem,4vw,2.5rem)] font-normal tracking-[0.04em] leading-[1.2] text-white mt-10 mb-0 text-center md:mb-8">
+                        MILESTONE{" "}
+                        <span className="text-[#00d4c8]">TIMELINE</span>
+                    </h2>
+                    <MilestoneTimeline milestones={mockMilestones} />
+                </div>
+
+                <SensorDataCards sensorData={mockSensorData} />
+                <PaymentStatus payment={mockPaymentData} />
+                <DeliveryProofUpload />
+                <DeliveryConfirmation
+                    shipmentId={shipmentHeaderData.shipmentId}
+                    status={shipmentHeaderData.status}
+                    onConfirm={async (id, rating, feedback) => {
+                        console.log("Delivery confirmed", {
+                            id,
+                            rating,
+                            feedback,
+                        });
+                    }}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default ShipmentDetail;
diff --git a/frontend/src/pages/ShipmentDetail/ShipmentDetailHeader/ShipmentDetailHeader.tsx b/frontend/src/pages/ShipmentDetail/ShipmentDetailHeader/ShipmentDetailHeader.tsx
new file mode 100644
index 0000000..b73f4a1
--- /dev/null
+++ b/frontend/src/pages/ShipmentDetail/ShipmentDetailHeader/ShipmentDetailHeader.tsx
@@ -0,0 +1,115 @@
+import React from "react";
+import { Package, ArrowRight } from "lucide-react";
+
+export type ShipmentStatus =
+  | "pending"
+  | "in_transit"
+  | "out_for_delivery"
+  | "delivered";
+
+export type UserRole = "company" | "customer";
+
+export interface ShipmentDetailHeaderProps {
+  shipmentId: string;
+  status: ShipmentStatus;
+  expectedDeliveryDate: string;
+  userRole: UserRole;
+  originAddress?: string;
+  destinationAddress?: string;
+  onUpdateStatus?: () => void;
+  onTrack?: () => void;
+}
+
+const ShipmentDetailHeader: React.FC<ShipmentDetailHeaderProps> = ({
+  shipmentId,
+  status,
+  expectedDeliveryDate,
+  userRole,
+  originAddress,
+  destinationAddress,
+  onUpdateStatus,
+  onTrack,
+}) => {
+  const statusColors: Record<ShipmentStatus, string> = {
+    pending: "bg-yellow-500/20 text-yellow-300 border border-yellow-500/40",
+    in_transit: "bg-blue-500/20 text-blue-300 border border-blue-500/40",
+    out_for_delivery:
+      "bg-purple-500/20 text-purple-300 border border-purple-500/40",
+    delivered: "bg-green-500/20 text-green-300 border border-green-500/40",
+  };
+
+  const formatStatus = (status: ShipmentStatus): string =>
+    status
+      .split("_")
+      .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+      .join(" ");
+
+  return (
+    <div className="bg-background-card p-6 md:p-8 mb-8 flex flex-col md:flex-row md:items-center md:justify-between gap-6">
+      {/* Left Section */}
+      <div className="flex items-center gap-6">
+        {/* Icon Container */}
+        <div className="bg-emerald-300/20 flex items-center justify-center rounded-xl w-20 h-20 shrink-0">
+          <Package className="w-10 h-10 text-[#00d4c8]" />
+        </div>
+
+        {/* Shipment Info */}
+        <div className="flex flex-col gap-2">
+          {/* Title + Status */}
+          <div className="flex items-center gap-4 flex-wrap">
+            <h1 className="text-3xl md:text-4xl font-bold text-white">
+              {shipmentId}
+            </h1>
+
+            <span
+              className={`inline-flex items-center px-4 gap-1.5 py-2 w-24 h-6 text-center justify-center rounded-full text-sm font-semibold whitespace-nowrap shrink-0 ${statusColors[status]}`}
+            >
+              <span className="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></span>
+              {formatStatus(status)}
+            </span>
+          </div>
+
+          <p className="text-sm md:text-base text-text-primary text-white/80">
+            ETA: {expectedDeliveryDate}
+          </p>
+
+          {/* Origin to Destination */}
+          {originAddress && destinationAddress && (
+            <div className="flex items-center text-white/70 gap-2 mt-2 flex-wrap">
+              <span className="text-xs md:text-sm text-text-secondary">
+                {originAddress}
+              </span>
+              <ArrowRight className="w-4 h-4 text-primary shrink-0" />
+              <span className="text-xs md:text-sm text-text-secondary">
+                {destinationAddress}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Right Section - Actions */}
+      <div className="flex gap-3 w-full text-lg md:w-auto">
+        {userRole === "company" && (
+          <button
+            onClick={onUpdateStatus}
+            className="px-6 py-3 rounded-lg bg-emerald-400/50 hover:bg-emerald-500 text-white font-semibold transition-colors duration-200 w-40 h-12"
+          >
+            Update Status
+          </button>
+        )}
+
+        {userRole === "customer" && (
+          <button
+            onClick={onTrack}
+            className="px-6 py-3 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white font-semibold transition-colors duration-200 w-10 md:w-auto"
+          >
+            Track
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ShipmentDetailHeader;
diff --git a/frontend/src/pages/ShipmentDetail/ShipmentDetailHeader/index.ts b/frontend/src/pages/ShipmentDetail/ShipmentDetailHeader/index.ts
new file mode 100644
index 0000000..70c9c90
--- /dev/null
+++ b/frontend/src/pages/ShipmentDetail/ShipmentDetailHeader/index.ts
@@ -0,0 +1,6 @@
+export { default } from "./ShipmentDetailHeader";
+export type {
+  ShipmentDetailHeaderProps,
+  ShipmentStatus,
+  UserRole,
+} from "./ShipmentDetailHeader";
diff --git a/frontend/src/pages/ShipmentDetail/ShipmentMap/ShipmentMap.css b/frontend/src/pages/ShipmentDetail/ShipmentMap/ShipmentMap.css
new file mode 100644
index 0000000..df12e27
--- /dev/null
+++ b/frontend/src/pages/ShipmentDetail/ShipmentMap/ShipmentMap.css
@@ -0,0 +1,124 @@
+/* frontend/src/pages/ShipmentDetail/ShipmentMap/ShipmentMap.css */
+.shipment-map-container {
+  margin-bottom: 2.5rem;
+  width: 100%;
+}
+
+.map-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 1.5rem;
+}
+
+.map-title {
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 2.5rem;
+  font-weight: 400;
+  letter-spacing: 0.04em;
+  color: white;
+  margin: 0;
+}
+
+.map-title .highlight {
+  color: #00d4c8;
+}
+
+.map-stats {
+  display: flex;
+  gap: 2rem;
+  text-align: right;
+}
+
+.map-stats .stat {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.map-stats .label {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: rgba(0, 212, 200, 0.6);
+  letter-spacing: 0.1em;
+}
+
+.map-stats .value {
+  font-size: 0.85rem;
+  font-weight: 400;
+  color: rgba(200, 230, 240, 0.9);
+  max-width: 250px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.map-placeholder {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 2 / 1;
+  border-radius: 1.5rem;
+  overflow: hidden;
+  border: 1.5px solid rgba(0, 212, 200, 0.2);
+  background: rgba(8, 40, 50, 0.2);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.map-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.8;
+  filter: saturate(0.8) brightness(0.9);
+}
+
+.map-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: radial-gradient(circle, rgba(0, 212, 200, 0.05) 0%, transparent 70%);
+}
+
+.view-full-map-btn {
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 1.25rem;
+  letter-spacing: 0.05em;
+  padding: 0.75rem 2.5rem;
+  background: rgba(0, 212, 200, 0.1);
+  color: #62ffff;
+  border: 1.5px solid #00d4c8;
+  border-radius: 0.75rem;
+  cursor: pointer;
+  backdrop-filter: blur(8px);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  box-shadow: 0 0 15px rgba(0, 212, 200, 0.2);
+}
+
+.view-full-map-btn:hover {
+  background: #00d4c8;
+  color: #000;
+  transform: translateY(-2px);
+  box-shadow: 0 0 25px rgba(0, 212, 200, 0.4);
+}
+
+@media (max-width: 768px) {
+  .map-header {
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    text-align: center;
+  }
+  
+  .map-stats {
+    text-align: center;
+  }
+  
+  .map-stats .value {
+    max-width: 100%;
+  }
+}
diff --git a/frontend/src/pages/ShipmentDetail/ShipmentMap/ShipmentMap.test.tsx b/frontend/src/pages/ShipmentDetail/ShipmentMap/ShipmentMap.test.tsx
new file mode 100644
index 0000000..becce6b
--- /dev/null
+++ b/frontend/src/pages/ShipmentDetail/ShipmentMap/ShipmentMap.test.tsx
@@ -0,0 +1,21 @@
+import { describe, test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import ShipmentMap from './ShipmentMap';
+
+describe('ShipmentMap placeholder', () => {
+  test('renders map view with origin/destination and view button', () => {
+    render(
+      <ShipmentMap
+        origin="Origin Place"
+        destination="Destination Place"
+        originCoords={{ lat: 1, lng: 2 }}
+        destinationCoords={{ lat: 3, lng: 4 }}
+      />
+    );
+
+    expect(screen.getByRole('heading', { name: /map view/i })).toBeInTheDocument();
+    expect(screen.getByText('ORIGIN:')).toBeInTheDocument();
+    expect(screen.getByText('DESTINATION:')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /View full map/i })).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/pages/ShipmentDetail/ShipmentMap/ShipmentMap.tsx b/frontend/src/pages/ShipmentDetail/ShipmentMap/ShipmentMap.tsx
new file mode 100644
index 0000000..432703a
--- /dev/null
+++ b/frontend/src/pages/ShipmentDetail/ShipmentMap/ShipmentMap.tsx
@@ -0,0 +1,51 @@
+// frontend/src/pages/ShipmentDetail/ShipmentMap/ShipmentMap.tsx
+import React from 'react';
+import './ShipmentMap.css';
+
+interface Coords {
+  lat: number;
+  lng: number;
+}
+
+interface ShipmentMapProps {
+  origin: string;
+  destination: string;
+  originCoords?: Coords;
+  destinationCoords?: Coords;
+}
+
+const ShipmentMap: React.FC<ShipmentMapProps> = ({ origin, destination }) => {
+  return (
+    <div className="shipment-map-container">
+      <div className="map-header">
+        <h3 className="map-title">MAP <span className="highlight">VIEW</span></h3>
+        <div className="map-stats">
+          <div className="stat">
+            <span className="label">ORIGIN:</span>
+            <span className="value">{origin}</span>
+          </div>
+          <div className="stat">
+            <span className="label">DESTINATION:</span>
+            <span className="value">{destination}</span>
+          </div>
+        </div>
+      </div>
+      
+      <div className="map-placeholder">
+        <img 
+          src="/images/map-placeholder.png" 
+          alt="Shipment Route Map" 
+          className="map-image"
+        />
+        <div className="map-overlay">
+          <div className="route-glow"></div>
+          <button aria-label="View full map" className="view-full-map-btn" onClick={() => {}}>
+            VIEW FULL MAP
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ShipmentMap;
diff --git a/frontend/src/pages/ShipmentDetail/index.ts b/frontend/src/pages/ShipmentDetail/index.ts
new file mode 100644
index 0000000..1a1a175
--- /dev/null
+++ b/frontend/src/pages/ShipmentDetail/index.ts
@@ -0,0 +1,3 @@
+export { default } from './ShipmentDetail';
+export { default as MilestoneTimeline } from './MilestoneTimeline/MilestoneTimeline';
+export type { MilestoneDetail, MilestoneTimelineProps } from './MilestoneTimeline/MilestoneTimeline';
diff --git a/frontend/src/pages/auth/ForgotPassword/ForgotPassword.css b/frontend/src/pages/auth/ForgotPassword/ForgotPassword.css
deleted file mode 100644
index ab20c46..0000000
--- a/frontend/src/pages/auth/ForgotPassword/ForgotPassword.css
+++ /dev/null
@@ -1,50 +0,0 @@
-.success-card {
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    animation: fadeIn 0.5s ease-out;
-}
-
-.success-icon-wrapper {
-    margin-bottom: 24px;
-    background: rgba(0, 218, 193, 0.1);
-    padding: 20px;
-    border-radius: 50%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.success-icon {
-    color: var(--teal-primary);
-}
-
-.back-to-login-btn {
-    width: 100%;
-    margin-top: 8px;
-    text-decoration: none;
-}
-
-.input-icon {
-    position: absolute;
-    right: 16px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: var(--text-muted);
-    display: flex;
-    align-items: center;
-    pointer-events: none;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
\ No newline at end of file
diff --git a/frontend/src/pages/auth/ForgotPassword/ForgotPassword.tsx b/frontend/src/pages/auth/ForgotPassword/ForgotPassword.tsx
index 57cf8b0..d7fcdd5 100644
--- a/frontend/src/pages/auth/ForgotPassword/ForgotPassword.tsx
+++ b/frontend/src/pages/auth/ForgotPassword/ForgotPassword.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Mail, ArrowLeft, CheckCircle2 } from 'lucide-react';
-import '../Signup/Signup.css';
-import './ForgotPassword.css';
+
+const authCardClass = "min-h-screen flex items-center justify-center bg-[#050505] text-white relative overflow-hidden font-sans";
+const cardInnerClass = "bg-[rgba(20,20,20,0.7)] backdrop-blur-[20px] border border-[rgba(255,255,255,0.1)] rounded-3xl p-10 w-full max-w-[480px] z-10 shadow-[0_8px_32px_0_rgba(0,0,0,0.8)] sm:p-8 sm:rounded-none sm:min-h-screen sm:flex sm:flex-col sm:justify-center";
 
 const ForgotPassword: React.FC = () => {
   const [email, setEmail] = useState('');
@@ -12,108 +13,109 @@ const ForgotPassword: React.FC = () => {
   const [touched, setTouched] = useState(false);
 
   const validateEmail = (val: string) => {
-    if (!val) {
-      return 'Email is required';
-    } else if (!/\S+@\S+\.\S+/.test(val)) {
-      return 'Invalid email format';
-    }
+    if (!val) return 'Email is required';
+    if (!/\S+@\S+\.\S+/.test(val)) return 'Invalid email format';
     return '';
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const val = e.target.value;
     setEmail(val);
-    if (touched) {
-      setError(validateEmail(val));
-    }
+    if (touched) setError(validateEmail(val));
   };
 
-  const handleBlur = () => {
-    setTouched(true);
-    setError(validateEmail(email));
-  };
+  const handleBlur = () => { setTouched(true); setError(validateEmail(email)); };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setTouched(true);
     const emailError = validateEmail(email);
-    if (emailError) {
-      setError(emailError);
-      return;
-    }
-
+    if (emailError) { setError(emailError); return; }
     setLoading(true);
-    // Simulate API call
-    setTimeout(() => {
-      setLoading(false);
-      setSubmitted(true);
-    }, 1500);
+    setTimeout(() => { setLoading(false); setSubmitted(true); }, 1500);
   };
 
+  const inputBase = "w-full bg-[rgba(255,255,255,0.05)] border border-[rgba(255,255,255,0.1)] rounded-xl px-4 py-3.5 pr-12 text-white text-base transition-all box-border focus:outline-none focus:border-[#00DAC1] focus:bg-[rgba(255,255,255,0.08)] focus:shadow-[0_0_0_4px_rgba(0,218,193,0.1)]";
+
+  const glowTop = (
+    <div className="absolute w-[500px] h-[500px] top-[-250px] right-[-100px] z-0 pointer-events-none"
+      style={{ background: 'radial-gradient(rgba(0,218,193,0.4), rgba(0,218,193,0))' }} />
+  );
+  const glowBottom = (
+    <div className="absolute w-[600px] h-[600px] bottom-[-300px] left-[-200px] z-0 pointer-events-none"
+      style={{ background: 'conic-gradient(from 180deg at 50% 50%, #16abff33 0deg, #0885ff33 55deg, #54d6ff33 120deg, #0071ff33 160deg, transparent 360deg)' }} />
+  );
+
   if (submitted) {
     return (
-      <div className="auth-container">
-        <div className="signup-card success-card">
-          <div className="success-icon-wrapper">
-            <CheckCircle2 size={64} className="success-icon" />
-          </div>
-          <div className="signup-header">
-            <h2>Check your email</h2>
-            <p>If this email exists, you'll receive a reset link shortly.</p>
+      <div className={authCardClass}>
+        {glowTop}{glowBottom}
+        <div className={cardInnerClass}>
+          <div className="flex flex-col items-center text-center">
+            <div className="mb-6 bg-[rgba(0,218,193,0.1)] p-5 rounded-full inline-flex items-center justify-center">
+              <CheckCircle2 size={64} className="text-[#00DAC1]" />
+            </div>
+            <div className="text-center mb-8">
+              <h2 className="text-[2rem] font-bold mb-2 bg-[linear-gradient(135deg,#fff_0%,#00DAC1_100%)] bg-clip-text [-webkit-background-clip:text] [-webkit-text-fill-color:transparent]">
+                Check your email
+              </h2>
+              <p className="text-[rgba(255,255,255,0.6)] text-[0.95rem]">If this email exists, you'll receive a reset link shortly.</p>
+            </div>
+            <Link
+              to="/login"
+              className="w-full mt-2 bg-[linear-gradient(135deg,#00DAC1_0%,#008B7B_100%)] text-black border-none rounded-xl py-4 text-base font-bold no-underline transition-all flex items-center justify-center gap-2 hover:-translate-y-0.5 hover:shadow-[0_4px_15px_rgba(0,218,193,0.4)]"
+            >
+              <ArrowLeft size={20} /> Back to Login
+            </Link>
           </div>
-          <Link to="/login" className="submit-btn back-to-login-btn">
-            <ArrowLeft size={20} />
-            Back to Login
-          </Link>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="auth-container">
-      <div className="signup-card">
-        <div className="signup-header">
-          <h2>Reset Password</h2>
-          <p>Enter your email address and we'll send you a link to reset your password.</p>
+    <div className={authCardClass}>
+      {glowTop}{glowBottom}
+      <div className={cardInnerClass}>
+        <div className="text-center mb-8">
+          <h2 className="text-[2rem] font-bold mb-2 bg-[linear-gradient(135deg,#fff_0%,#00DAC1_100%)] bg-clip-text [-webkit-background-clip:text] [-webkit-text-fill-color:transparent]">
+            Reset Password
+          </h2>
+          <p className="text-[rgba(255,255,255,0.6)] text-[0.95rem]">Enter your email address and we'll send you a link to reset your password.</p>
         </div>
 
-        <form className="signup-form" onSubmit={handleSubmit} noValidate>
-          <div className="form-group">
-            <label htmlFor="email">Email Address</label>
-            <div className="input-wrapper">
+        <form className="flex flex-col gap-5" onSubmit={handleSubmit} noValidate>
+          <div className="flex flex-col gap-2">
+            <label htmlFor="email" className="text-[0.85rem] font-medium text-[rgba(255,255,255,0.6)] ml-1">Email Address</label>
+            <div className="relative">
               <input
-                type="email"
-                id="email"
-                name="email"
-                placeholder="name@company.com"
-                value={email}
-                onChange={handleChange}
-                onBlur={handleBlur}
-                className={error ? 'error' : ''}
-                autoComplete="email"
+                type="email" id="email" name="email" placeholder="name@company.com"
+                value={email} onChange={handleChange} onBlur={handleBlur} autoComplete="email"
+                className={`${inputBase} ${error ? 'border-[#FF4D4D]' : ''}`}
               />
-              <div className="input-icon">
+              <div className="absolute right-4 top-1/2 -translate-y-1/2 text-[rgba(255,255,255,0.6)] flex items-center pointer-events-none">
                 <Mail size={20} />
               </div>
             </div>
-            {error && <span className="error-message">{error}</span>}
+            {error && <span className="text-[#FF4D4D] text-[0.75rem] mt-1 ml-1">{error}</span>}
           </div>
 
-          <button type="submit" className="submit-btn" disabled={loading}>
+          <button
+            type="submit" disabled={loading}
+            className="mt-3 bg-[linear-gradient(135deg,#00DAC1_0%,#008B7B_100%)] text-black border-none rounded-xl py-4 text-base font-bold cursor-pointer transition-all flex items-center justify-center gap-2 hover:not-disabled:-translate-y-0.5 hover:not-disabled:shadow-[0_4px_15px_rgba(0,218,193,0.4)] disabled:opacity-60 disabled:cursor-not-allowed"
+          >
             {loading ? (
               <>
-                <div className="loading-spinner"></div>
+                <div className="w-5 h-5 border-2 border-[rgba(0,0,0,0.1)] border-t-black rounded-full animate-spin" />
                 Sending Link...
               </>
-            ) : (
-              'Send Reset Link'
-            )}
+            ) : 'Send Reset Link'}
           </button>
         </form>
 
-        <p className="login-link">
-          Remember your password? <Link to="/login">Back to Login</Link>
+        <p className="text-center text-[0.9rem] text-[rgba(255,255,255,0.6)] mt-6">
+          Remember your password?{" "}
+          <Link to="/login" className="text-[#00DAC1] no-underline font-semibold hover:underline">Back to Login</Link>
         </p>
       </div>
     </div>
diff --git a/frontend/src/pages/auth/Login/Login.tsx b/frontend/src/pages/auth/Login/Login.tsx
index f8ecefc..2c2f61b 100644
--- a/frontend/src/pages/auth/Login/Login.tsx
+++ b/frontend/src/pages/auth/Login/Login.tsx
@@ -1,168 +1,203 @@
-import React, { useState } from 'react';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
-import { Eye, EyeOff } from 'lucide-react';
-import '../Signup/Signup.css';
+import React, { useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Eye, EyeOff } from "lucide-react";
 
 interface FormErrors {
-  email?: string;
-  password?: string;
+    email?: string;
+    password?: string;
 }
 
 const Login: React.FC = () => {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const [formData, setFormData] = useState({
-    email: '',
-    password: '',
-  });
-
-  const [errors, setErrors] = useState<FormErrors>({});
-  const [loading, setLoading] = useState(false);
-  const [showPassword, setShowPassword] = useState(false);
-  const [touched, setTouched] = useState<{ [key: string]: boolean }>({});
-
-  const validateField = (name: string, value: string) => {
-    let error = '';
-    if (name === 'email') {
-      if (!value) {
-        error = 'Email is required';
-      } else if (!/\S+@\S+\.\S+/.test(value)) {
-        error = 'Invalid email format';
-      }
-    } else if (name === 'password') {
-      if (!value) {
-        error = 'Password is required';
-      }
-    }
-    return error;
-  };
-
-  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setTouched(prev => ({ ...prev, [name]: true }));
-    const error = validateField(name, value);
-    setErrors(prev => ({ ...prev, [name]: error }));
-  };
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setFormData(prev => ({ ...prev, [name]: value }));
-    
-    // Clear error as user types if they've already touched it
-    if (touched[name]) {
-      const error = validateField(name, value);
-      setErrors(prev => ({ ...prev, [name]: error }));
-    }
-  };
-
-  const validateAll = () => {
-    const emailError = validateField('email', formData.email);
-    const passwordError = validateField('password', formData.password);
-    
-    setErrors({
-      email: emailError,
-      password: passwordError,
-    });
-    
-    setTouched({
-      email: true,
-      password: true,
-    });
-
-    return !emailError && !passwordError;
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!validateAll()) return;
-
-    setLoading(true);
-    // Simulate API call
-    setTimeout(() => {
-      localStorage.setItem('authToken', 'navin-demo-token');
-      const from = location.state?.from?.pathname ?? '/dashboard';
-      setLoading(false);
-      navigate(from, { replace: true });
-    }, 2000);
-  };
-
-  return (
-    <div className="auth-container">
-      <div className="signup-card">
-        <div className="signup-header">
-          <h2>Welcome Back</h2>
-          <p>Enter your details to access your account</p>
-        </div>
-
-        <form className="signup-form" onSubmit={handleSubmit} noValidate>
-          {/* Email Field */}
-          <div className="form-group">
-            <label htmlFor="email">Email Address</label>
-            <div className="input-wrapper">
-              <input
-                type="email"
-                id="email"
-                name="email"
-                placeholder="name@company.com"
-                value={formData.email}
-                onChange={handleChange}
-                onBlur={handleBlur}
-                className={errors.email ? 'error' : ''}
-                autoComplete="email"
-              />
-            </div>
-            {errors.email && <span className="error-message">{errors.email}</span>}
-          </div>
-
-          {/* Password Field */}
-          <div className="form-group">
-            <label htmlFor="password">Password</label>
-            <div className="input-wrapper">
-              <input
-                type={showPassword ? 'text' : 'password'}
-                id="password"
-                name="password"
-                placeholder="••••••••"
-                value={formData.password}
-                onChange={handleChange}
-                onBlur={handleBlur}
-                className={errors.password ? 'error' : ''}
-                autoComplete="current-password"
-              />
-              <button
-                type="button"
-                className="password-toggle"
-                onClick={() => setShowPassword(!showPassword)}
-                aria-label={showPassword ? 'Hide password' : 'Show password'}
-              >
-                {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
-              </button>
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [formData, setFormData] = useState({ email: "", password: "" });
+    const [errors, setErrors] = useState<FormErrors>({});
+    const [loading, setLoading] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+    const [touched, setTouched] = useState<{ [key: string]: boolean }>({});
+
+    const validateField = (name: string, value: string) => {
+        if (name === "email") {
+            if (!value) return "Email is required";
+            if (!/\S+@\S+\.\S+/.test(value)) return "Invalid email format";
+        } else if (name === "password") {
+            if (!value) return "Password is required";
+        }
+        return "";
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+        setTouched((prev) => ({ ...prev, [name]: true }));
+        setErrors((prev) => ({ ...prev, [name]: validateField(name, value) }));
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+        setFormData((prev) => ({ ...prev, [name]: value }));
+        if (touched[name])
+            setErrors((prev) => ({
+                ...prev,
+                [name]: validateField(name, value),
+            }));
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        const emailError = validateField("email", formData.email);
+        const passwordError = validateField("password", formData.password);
+        setErrors({ email: emailError, password: passwordError });
+        setTouched({ email: true, password: true });
+        if (emailError || passwordError) return;
+
+        setLoading(true);
+        setTimeout(() => {
+            localStorage.setItem("authToken", "navin-demo-token");
+            const from = location.state?.from?.pathname ?? "/dashboard";
+            setLoading(false);
+            navigate(from, { replace: true });
+        }, 2000);
+    };
+
+    const inputBase =
+        "w-full bg-[rgba(255,255,255,0.05)] border border-[rgba(255,255,255,0.1)] rounded-xl px-4 py-3.5 pr-12 text-white text-base transition-all box-border focus:outline-none focus:border-[#00DAC1] focus:bg-[rgba(255,255,255,0.08)] focus:shadow-[0_0_0_4px_rgba(0,218,193,0.1)]";
+
+    return (
+        <div className="min-h-screen flex items-center justify-center bg-[#050505] text-white relative overflow-hidden font-sans">
+            <div
+                className="absolute w-125 h-125 -top-62.5 -right-25 z-0 pointer-events-none"
+                style={{
+                    background:
+                        "radial-gradient(rgba(0,218,193,0.4), rgba(0,218,193,0))",
+                }}
+            />
+            <div
+                className="absolute w-150 h-150 -bottom-75 -left-50 z-0 pointer-events-none"
+                style={{
+                    background:
+                        "conic-gradient(from 180deg at 50% 50%, #16abff33 0deg, #0885ff33 55deg, #54d6ff33 120deg, #0071ff33 160deg, transparent 360deg)",
+                }}
+            />
+
+            <div className="bg-[rgba(20,20,20,0.7)] backdrop-blur-[20px] border border-[rgba(255,255,255,0.1)] rounded-3xl p-10 w-full max-w-120 z-10 shadow-[0_8px_32px_0_rgba(0,0,0,0.8)] sm:p-8 sm:rounded-none sm:min-h-screen sm:flex sm:flex-col sm:justify-center">
+                <div className="text-center mb-8">
+                    <h2 className="text-[2rem] font-bold mb-2 bg-[linear-gradient(135deg,#fff_0%,#00DAC1_100%)] bg-clip-text [-webkit-background-clip:text] [-webkit-text-fill-color:transparent]">
+                        Welcome Back
+                    </h2>
+                    <p className="text-[rgba(255,255,255,0.6)] text-[0.95rem]">
+                        Enter your details to access your account
+                    </p>
+                </div>
+
+                <form
+                    className="flex flex-col gap-5"
+                    onSubmit={handleSubmit}
+                    noValidate
+                >
+                    {/* Email */}
+                    <div className="flex flex-col gap-2">
+                        <label
+                            htmlFor="email"
+                            className="text-[0.85rem] font-medium text-[rgba(255,255,255,0.6)] ml-1"
+                        >
+                            Email Address
+                        </label>
+                        <input
+                            type="email"
+                            id="email"
+                            name="email"
+                            placeholder="name@company.com"
+                            value={formData.email}
+                            onChange={handleChange}
+                            onBlur={handleBlur}
+                            autoComplete="email"
+                            className={`${inputBase} ${errors.email ? "border-[#FF4D4D]" : ""}`}
+                        />
+                        {errors.email && (
+                            <span className="text-[#FF4D4D] text-[0.75rem] mt-1 ml-1">
+                                {errors.email}
+                            </span>
+                        )}
+                    </div>
+
+                    {/* Password */}
+                    <div className="flex flex-col gap-2">
+                        <label
+                            htmlFor="password"
+                            className="text-[0.85rem] font-medium text-[rgba(255,255,255,0.6)] ml-1"
+                        >
+                            Password
+                        </label>
+                        <div className="relative">
+                            <input
+                                type={showPassword ? "text" : "password"}
+                                id="password"
+                                name="password"
+                                placeholder="••••••••"
+                                value={formData.password}
+                                onChange={handleChange}
+                                onBlur={handleBlur}
+                                autoComplete="current-password"
+                                className={`${inputBase} ${errors.password ? "border-[#FF4D4D]" : ""}`}
+                            />
+                            <button
+                                type="button"
+                                className="absolute right-3 top-1/2 -translate-y-1/2 bg-none border-none text-[rgba(255,255,255,0.6)] cursor-pointer flex items-center justify-center p-2 rounded-lg transition-all hover:text-[#00DAC1] hover:bg-[rgba(255,255,255,0.05)]"
+                                onClick={() => setShowPassword(!showPassword)}
+                                aria-label={
+                                    showPassword
+                                        ? "Hide password"
+                                        : "Show password"
+                                }
+                            >
+                                {showPassword ? (
+                                    <EyeOff size={20} />
+                                ) : (
+                                    <Eye size={20} />
+                                )}
+                            </button>
+                        </div>
+                        {errors.password && (
+                            <span className="text-[#FF4D4D] text-[0.75rem] mt-1 ml-1">
+                                {errors.password}
+                            </span>
+                        )}
+                        <Link
+                            to="/forgot-password"
+                            className="self-end text-[0.8rem] text-[#00DAC1] no-underline -mt-1 transition-all hover:underline hover:opacity-80"
+                        >
+                            Forgot Password?
+                        </Link>
+                    </div>
+
+                    <button
+                        type="submit"
+                        disabled={loading}
+                        className="mt-3 bg-[linear-gradient(135deg,#00DAC1_0%,#008B7B_100%)] text-black border-none rounded-xl py-4 text-base font-bold cursor-pointer transition-all flex items-center justify-center gap-2 hover:not-disabled:-translate-y-0.5 hover:not-disabled:shadow-[0_4px_15px_rgba(0,218,193,0.4)] disabled:opacity-60 disabled:cursor-not-allowed"
+                    >
+                        {loading ? (
+                            <>
+                                <div className="w-5 h-5 border-2 border-[rgba(0,0,0,0.1)] border-t-black rounded-full animate-spin" />
+                                Logging in...
+                            </>
+                        ) : (
+                            "Log In"
+                        )}
+                    </button>
+                </form>
+
+                <p className="text-center text-[0.9rem] text-[rgba(255,255,255,0.6)] mt-6">
+                    Don't have an account?{" "}
+                    <Link
+                        to="/signup"
+                        className="text-[#00DAC1] no-underline font-semibold hover:underline"
+                    >
+                        Sign Up
+                    </Link>
+                </p>
             </div>
-            {errors.password && <span className="error-message">{errors.password}</span>}
-            <Link to="/forgot-password" style={{ alignSelf: 'flex-end', marginTop: '4px' }} className="forgot-password">
-              Forgot Password?
-            </Link>
-          </div>
-
-          {/* Submit Button */}
-          <button type="submit" className="submit-btn" disabled={loading} style={{ marginTop: '12px' }}>
-            {loading ? (
-              <>
-                <div className="loading-spinner"></div>
-                Logging in...
-              </>
-            ) : (
-              'Log In'
-            )}
-          </button>
-        </form>
-
-        <p className="login-link">
-          Don't have an account? <Link to="/signup">Sign Up</Link>
-        </p>
-      </div>
-    </div>
-  );
+        </div>
+    );
 };
 
 export default Login;
diff --git a/frontend/src/pages/auth/Signup/Signup.css b/frontend/src/pages/auth/Signup/Signup.css
deleted file mode 100644
index 4db6c2f..0000000
--- a/frontend/src/pages/auth/Signup/Signup.css
+++ /dev/null
@@ -1,383 +0,0 @@
-:root {
-    --primary-glow: radial-gradient(rgba(0, 218, 193, 0.4), rgba(0, 218, 193, 0));
-    --secondary-glow: conic-gradient(from 180deg at 50% 50%,
-            #16abff33 0deg,
-            #0885ff33 55deg,
-            #54d6ff33 120deg,
-            #0071ff33 160deg,
-            transparent 360deg);
-    --teal-primary: #00DAC1;
-    --teal-secondary: #008B7B;
-    --bg-dark: #050505;
-    --bg-card: rgba(20, 20, 20, 0.7);
-    --border-color: rgba(255, 255, 255, 0.1);
-    --text-main: #FFFFFF;
-    --text-muted: rgba(255, 255, 255, 0.6);
-    --error: #FF4D4D;
-    --success: #00E676;
-    --warning: #FFAB00;
-}
-
-.auth-container {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--bg-dark);
-    color: var(--text-main);
-    position: relative;
-    overflow: hidden;
-    font-family: 'Inter', system-ui, -apple-system, sans-serif;
-}
-
-/* Background elements for that premium look */
-.auth-container::before {
-    content: '';
-    position: absolute;
-    width: 500px;
-    height: 500px;
-    background: var(--primary-glow);
-    top: -250px;
-    right: -100px;
-    z-index: 0;
-}
-
-.auth-container::after {
-    content: '';
-    position: absolute;
-    width: 600px;
-    height: 600px;
-    background: var(--secondary-glow);
-    bottom: -300px;
-    left: -200px;
-    z-index: 0;
-}
-
-.signup-card {
-    background: var(--bg-card);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid var(--border-color);
-    border-radius: 24px;
-    padding: 40px;
-    width: 100%;
-    max-width: 480px;
-    z-index: 1;
-    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
-}
-
-.signup-header {
-    text-align: center;
-    margin-bottom: 32px;
-}
-
-.signup-header h2 {
-    font-size: 2rem;
-    font-weight: 700;
-    margin-bottom: 8px;
-    background: linear-gradient(135deg, #fff 0%, #00DAC1 100%);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-
-.signup-header p {
-    color: var(--text-muted);
-    font-size: 0.95rem;
-}
-
-.signup-form {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-}
-
-.form-group {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.form-group label {
-    font-size: 0.85rem;
-    font-weight: 500;
-    color: var(--text-muted);
-    margin-left: 4px;
-}
-
-.forgot-password {
-    align-self: flex-end;
-    font-size: 0.8rem;
-    color: var(--teal-primary);
-    text-decoration: none;
-    margin-top: -4px;
-    transition: all 0.2s ease;
-}
-
-.forgot-password:hover {
-    text-decoration: underline;
-    opacity: 0.8;
-}
-
-.input-wrapper {
-    position: relative;
-}
-
-.signup-form input[type="text"],
-.signup-form input[type="email"],
-.signup-form input[type="password"] {
-    width: 100%;
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid var(--border-color);
-    border-radius: 12px;
-    padding: 14px 16px;
-    padding-right: 48px;
-    color: white;
-    font-size: 1rem;
-    transition: all 0.3s ease;
-    box-sizing: border-box;
-}
-
-.password-toggle {
-    position: absolute;
-    right: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    background: none;
-    border: none;
-    color: var(--text-muted);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8px;
-    border-radius: 8px;
-    transition: all 0.2s ease;
-    z-index: 2;
-}
-
-.password-toggle:hover {
-    color: var(--teal-primary);
-    background: rgba(255, 255, 255, 0.05);
-}
-
-.signup-form input:focus {
-    outline: none;
-    border-color: var(--teal-primary);
-    background: rgba(255, 255, 255, 0.08);
-    box-shadow: 0 0 0 4px rgba(0, 218, 193, 0.1);
-}
-
-.signup-form input.error {
-    border-color: var(--error);
-}
-
-.error-message {
-    color: var(--error);
-    font-size: 0.75rem;
-    margin-top: 4px;
-    margin-left: 4px;
-}
-
-/* Password Strength Indicator */
-.strength-indicator {
-    margin-top: 8px;
-}
-
-.strength-bar {
-    height: 4px;
-    width: 100%;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 2px;
-    overflow: hidden;
-    margin-bottom: 6px;
-}
-
-.strength-progress {
-    height: 100%;
-    width: 0%;
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.strength-progress.weak {
-    background: var(--error);
-    width: 33.33%;
-}
-
-.strength-progress.fair {
-    background: var(--warning);
-    width: 66.66%;
-}
-
-.strength-progress.strong {
-    background: var(--success);
-    width: 100%;
-}
-
-.strength-text {
-    font-size: 0.75rem;
-    color: var(--text-muted);
-}
-
-.strength-text span {
-    font-weight: 600;
-}
-
-.strength-text .text-weak {
-    color: var(--error);
-}
-
-.strength-text .text-fair {
-    color: var(--warning);
-}
-
-.strength-text .text-strong {
-    color: var(--success);
-}
-
-/* Checkbox */
-.checkbox-group {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-    margin-top: 4px;
-}
-
-.checkbox-container {
-    display: block;
-    position: relative;
-    padding-left: 28px;
-    cursor: pointer;
-    font-size: 0.85rem;
-    color: var(--text-muted);
-    user-select: none;
-}
-
-.checkbox-container input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-}
-
-.checkmark {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 18px;
-    width: 18px;
-    background-color: rgba(255, 255, 255, 0.1);
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    transition: all 0.2s ease;
-}
-
-.checkbox-container:hover input~.checkmark {
-    background-color: rgba(255, 255, 255, 0.15);
-}
-
-.checkbox-container input:checked~.checkmark {
-    background-color: var(--teal-primary);
-    border-color: var(--teal-primary);
-}
-
-.checkmark:after {
-    content: "";
-    position: absolute;
-    display: none;
-}
-
-.checkbox-container input:checked~.checkmark:after {
-    display: block;
-}
-
-.checkbox-container .checkmark:after {
-    left: 6px;
-    top: 2px;
-    width: 3px;
-    height: 8px;
-    border: solid white;
-    border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
-}
-
-.checkbox-container .terms-link {
-    color: var(--teal-primary);
-    text-decoration: none;
-}
-
-/* Submit Button */
-.submit-btn {
-    margin-top: 12px;
-    background: linear-gradient(135deg, var(--teal-primary) 0%, var(--teal-secondary) 100%);
-    color: #000;
-    border: none;
-    border-radius: 12px;
-    padding: 16px;
-    font-size: 1rem;
-    font-weight: 700;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-}
-
-.submit-btn:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 15px rgba(0, 218, 193, 0.4);
-}
-
-.submit-btn:active:not(:disabled) {
-    transform: translateY(0);
-}
-
-.submit-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-.loading-spinner {
-    width: 20px;
-    height: 20px;
-    border: 2px solid rgba(0, 0, 0, 0.1);
-    border-top-color: #000;
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.login-link {
-    text-align: center;
-    font-size: 0.9rem;
-    color: var(--text-muted);
-    margin-top: 24px;
-}
-
-.login-link a {
-    color: var(--teal-primary);
-    text-decoration: none;
-    font-weight: 600;
-}
-
-.login-link a:hover {
-    text-decoration: underline;
-}
-
-@media (max-width: 480px) {
-    .signup-card {
-        padding: 30px 20px;
-        border-radius: 0;
-        height: 100vh;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-    }
-}
\ No newline at end of file
diff --git a/frontend/src/pages/auth/Signup/Signup.tsx b/frontend/src/pages/auth/Signup/Signup.tsx
index 3f5dc1a..dfef7a0 100644
--- a/frontend/src/pages/auth/Signup/Signup.tsx
+++ b/frontend/src/pages/auth/Signup/Signup.tsx
@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { Eye, EyeOff } from "lucide-react";
 import { WalletConnectButton } from "../../../components/auth/WalletConnectButton/WalletConnectButton";
-import "./Signup.css";
 
 interface FormErrors {
   fullName?: string;
@@ -23,181 +22,111 @@ const Signup: React.FC = () => {
 
   const [errors, setErrors] = useState<FormErrors>({});
   const [loading, setLoading] = useState(false);
-  const [passwordStrength, setPasswordStrength] = useState<
-    "none" | "weak" | "fair" | "strong"
-  >("none");
+  const [passwordStrength, setPasswordStrength] = useState<"none" | "weak" | "fair" | "strong">("none");
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
-  // Calculate password strength
-  const calculatePasswordStrength = (
-    pass: string,
-  ): "none" | "weak" | "fair" | "strong" => {
+  const calculatePasswordStrength = (pass: string): "none" | "weak" | "fair" | "strong" => {
     if (!pass) return "none";
     let strength = 0;
     if (pass.length >= 8) strength++;
     if (/[A-Z]/.test(pass)) strength++;
     if (/[0-9]/.test(pass)) strength++;
     if (/[^A-Za-z0-9]/.test(pass)) strength++;
-    if (strength <= 1) return 'weak';
-    if (strength <= 3) return 'fair';
-    return 'strong';
+    if (strength <= 1) return "weak";
+    if (strength <= 3) return "fair";
+    return "strong";
   };
 
   const validate = () => {
     const newErrors: FormErrors = {};
-
-    if (!formData.fullName.trim()) {
-      newErrors.fullName = "Full name is required";
-    }
-
-    if (!formData.email) {
-      newErrors.email = "Email is required";
-    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
-      newErrors.email = "Invalid email format";
-    }
-
-    if (!formData.password) {
-      newErrors.password = "Password is required";
-    } else if (formData.password.length < 8) {
-      newErrors.password = "Minimum 8 characters required";
-    }
-
-    if (formData.password !== formData.confirmPassword) {
-      newErrors.confirmPassword = "Passwords do not match";
-    }
-
-    if (!formData.terms) {
-      newErrors.terms = "You must agree to the terms";
-    }
-
+    if (!formData.fullName.trim()) newErrors.fullName = "Full name is required";
+    if (!formData.email) newErrors.email = "Email is required";
+    else if (!/\S+@\S+\.\S+/.test(formData.email)) newErrors.email = "Invalid email format";
+    if (!formData.password) newErrors.password = "Password is required";
+    else if (formData.password.length < 8) newErrors.password = "Minimum 8 characters required";
+    if (formData.password !== formData.confirmPassword) newErrors.confirmPassword = "Passwords do not match";
+    if (!formData.terms) newErrors.terms = "You must agree to the terms";
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value, type, checked } = e.target;
-    setFormData((prev) => ({
-      ...prev,
-      [name]: type === "checkbox" ? checked : value,
-    }));
-
-    // Calculate password strength when password field changes
-    if (name === "password") {
-      setPasswordStrength(calculatePasswordStrength(value));
-    }
-
-    // Clear error for the field being typed in
-    if (errors[name as keyof FormErrors]) {
-      setErrors((prev) => ({ ...prev, [name]: undefined }));
-    }
+    setFormData((prev) => ({ ...prev, [name]: type === "checkbox" ? checked : value }));
+    if (name === "password") setPasswordStrength(calculatePasswordStrength(value));
+    if (errors[name as keyof FormErrors]) setErrors((prev) => ({ ...prev, [name]: undefined }));
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!validate()) return;
-
     setLoading(true);
-    // Simulate API call
-    setTimeout(() => {
-      setLoading(false);
-      alert("Account created successfully (simulation)");
-    }, 2000);
+    setTimeout(() => { setLoading(false); alert("Account created successfully (simulation)"); }, 2000);
   };
 
-  const getStrengthClass = () => {
-    switch (passwordStrength) {
-      case "weak":
-        return "weak";
-      case "fair":
-        return "fair";
-      case "strong":
-        return "strong";
-      default:
-        return "";
-    }
-  };
+  const strengthBarWidth = { none: "0%", weak: "33.33%", fair: "66.66%", strong: "100%" }[passwordStrength];
+  const strengthBarColor = { none: "transparent", weak: "#FF4D4D", fair: "#FFAB00", strong: "#00E676" }[passwordStrength];
+  const strengthLabel = { none: null, weak: <span className="text-[#FF4D4D] font-semibold">Weak</span>, fair: <span className="text-[#FFAB00] font-semibold">Fair</span>, strong: <span className="text-[#00E676] font-semibold">Strong</span> }[passwordStrength];
 
-  const getStrengthLabel = () => {
-    switch (passwordStrength) {
-      case "weak":
-        return <span className="text-weak">Weak</span>;
-      case "fair":
-        return <span className="text-fair">Fair</span>;
-      case "strong":
-        return <span className="text-strong">Strong</span>;
-      default:
-        return "None";
-    }
-  };
+  const inputBase = "w-full bg-[rgba(255,255,255,0.05)] border border-[rgba(255,255,255,0.1)] rounded-xl px-4 py-3.5 pr-12 text-white text-base transition-all box-border focus:outline-none focus:border-[#00DAC1] focus:bg-[rgba(255,255,255,0.08)] focus:shadow-[0_0_0_4px_rgba(0,218,193,0.1)]";
 
   return (
-    <div className="auth-container">
-      <div className="signup-card">
-        <div className="signup-header">
-          <h2>Create Account</h2>
-          <p>Join Navin and experience transparent tracking</p>
+    <div className="min-h-screen flex items-center justify-center bg-[#050505] text-white relative overflow-hidden font-sans">
+      {/* Background glows */}
+      <div className="absolute w-[500px] h-[500px] top-[-250px] right-[-100px] z-0 pointer-events-none"
+        style={{ background: 'radial-gradient(rgba(0,218,193,0.4), rgba(0,218,193,0))' }} />
+      <div className="absolute w-[600px] h-[600px] bottom-[-300px] left-[-200px] z-0 pointer-events-none"
+        style={{ background: 'conic-gradient(from 180deg at 50% 50%, #16abff33 0deg, #0885ff33 55deg, #54d6ff33 120deg, #0071ff33 160deg, transparent 360deg)' }} />
+
+      <div className="bg-[rgba(20,20,20,0.7)] backdrop-blur-[20px] border border-[rgba(255,255,255,0.1)] rounded-3xl p-10 w-full max-w-[480px] z-10 shadow-[0_8px_32px_0_rgba(0,0,0,0.8)] sm:p-8 sm:rounded-none sm:min-h-screen sm:flex sm:flex-col sm:justify-center">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <h2 className="text-[2rem] font-bold mb-2 bg-[linear-gradient(135deg,#fff_0%,#00DAC1_100%)] bg-clip-text [-webkit-background-clip:text] [-webkit-text-fill-color:transparent]">
+            Create Account
+          </h2>
+          <p className="text-[rgba(255,255,255,0.6)] text-[0.95rem]">Join Navin and experience transparent tracking</p>
         </div>
 
-        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '20px' }}>
+        <div className="flex justify-center mb-5">
           <WalletConnectButton />
         </div>
 
-        <form className="signup-form" onSubmit={handleSubmit}>
+        <form className="flex flex-col gap-5" onSubmit={handleSubmit}>
           {/* Full Name */}
-          <div className="form-group">
-            <label htmlFor="fullName">Full Name</label>
-            <div className="input-wrapper">
-              <input
-                type="text"
-                id="fullName"
-                name="fullName"
-                placeholder="John Doe"
-                value={formData.fullName}
-                onChange={handleChange}
-                className={errors.fullName ? "error" : ""}
-              />
-            </div>
-            {errors.fullName && (
-              <span className="error-message">{errors.fullName}</span>
-            )}
+          <div className="flex flex-col gap-2">
+            <label htmlFor="fullName" className="text-[0.85rem] font-medium text-[rgba(255,255,255,0.6)] ml-1">Full Name</label>
+            <input
+              type="text" id="fullName" name="fullName" placeholder="John Doe"
+              value={formData.fullName} onChange={handleChange}
+              className={`${inputBase} ${errors.fullName ? 'border-[#FF4D4D]' : ''}`}
+            />
+            {errors.fullName && <span className="text-[#FF4D4D] text-[0.75rem] mt-1 ml-1">{errors.fullName}</span>}
           </div>
 
           {/* Email */}
-          <div className="form-group">
-            <label htmlFor="email">Email Address</label>
-            <div className="input-wrapper">
-              <input
-                type="email"
-                id="email"
-                name="email"
-                placeholder="name@company.com"
-                value={formData.email}
-                onChange={handleChange}
-                className={errors.email ? "error" : ""}
-              />
-            </div>
-            {errors.email && (
-              <span className="error-message">{errors.email}</span>
-            )}
+          <div className="flex flex-col gap-2">
+            <label htmlFor="email" className="text-[0.85rem] font-medium text-[rgba(255,255,255,0.6)] ml-1">Email Address</label>
+            <input
+              type="email" id="email" name="email" placeholder="name@company.com"
+              value={formData.email} onChange={handleChange}
+              className={`${inputBase} ${errors.email ? 'border-[#FF4D4D]' : ''}`}
+            />
+            {errors.email && <span className="text-[#FF4D4D] text-[0.75rem] mt-1 ml-1">{errors.email}</span>}
           </div>
 
           {/* Password */}
-          <div className="form-group">
-            <label htmlFor="password">Password</label>
-            <div className="input-wrapper">
+          <div className="flex flex-col gap-2">
+            <label htmlFor="password" className="text-[0.85rem] font-medium text-[rgba(255,255,255,0.6)] ml-1">Password</label>
+            <div className="relative">
               <input
-                type={showPassword ? "text" : "password"}
-                id="password"
-                name="password"
-                placeholder="••••••••"
-                value={formData.password}
-                onChange={handleChange}
-                className={errors.password ? "error" : ""}
+                type={showPassword ? "text" : "password"} id="password" name="password" placeholder="••••••••"
+                value={formData.password} onChange={handleChange}
+                className={`${inputBase} ${errors.password ? 'border-[#FF4D4D]' : ''}`}
               />
               <button
                 type="button"
-                className="password-toggle"
+                className="absolute right-3 top-1/2 -translate-y-1/2 bg-none border-none text-[rgba(255,255,255,0.6)] cursor-pointer flex items-center justify-center p-2 rounded-lg transition-all hover:text-[#00DAC1] hover:bg-[rgba(255,255,255,0.05)]"
                 onClick={() => setShowPassword(!showPassword)}
                 aria-label={showPassword ? "Hide password" : "Show password"}
               >
@@ -205,88 +134,79 @@ const Signup: React.FC = () => {
               </button>
             </div>
             {formData.password && (
-              <div className="strength-indicator">
-                <div className="strength-bar">
-                  <div
-                    className={`strength-progress ${getStrengthClass()}`}
-                  ></div>
-                </div>
-                <div className="strength-text">
-                  Strength: {getStrengthLabel()}
+              <div className="mt-2">
+                <div className="h-1 w-full bg-[rgba(255,255,255,0.1)] rounded-sm overflow-hidden mb-1.5">
+                  <div className="h-full transition-all duration-400" style={{ width: strengthBarWidth, backgroundColor: strengthBarColor }} />
                 </div>
+                <div className="text-[0.75rem] text-[rgba(255,255,255,0.6)]">Strength: {strengthLabel ?? "None"}</div>
               </div>
             )}
-            {errors.password && (
-              <span className="error-message">{errors.password}</span>
-            )}
+            {errors.password && <span className="text-[#FF4D4D] text-[0.75rem] mt-1 ml-1">{errors.password}</span>}
           </div>
 
           {/* Confirm Password */}
-          <div className="form-group">
-            <label htmlFor="confirmPassword">Confirm Password</label>
-            <div className="input-wrapper">
+          <div className="flex flex-col gap-2">
+            <label htmlFor="confirmPassword" className="text-[0.85rem] font-medium text-[rgba(255,255,255,0.6)] ml-1">Confirm Password</label>
+            <div className="relative">
               <input
-                type={showConfirmPassword ? "text" : "password"}
-                id="confirmPassword"
-                name="confirmPassword"
-                placeholder="••••••••"
-                value={formData.confirmPassword}
-                onChange={handleChange}
-                className={errors.confirmPassword ? "error" : ""}
+                type={showConfirmPassword ? "text" : "password"} id="confirmPassword" name="confirmPassword" placeholder="••••••••"
+                value={formData.confirmPassword} onChange={handleChange}
+                className={`${inputBase} ${errors.confirmPassword ? 'border-[#FF4D4D]' : ''}`}
               />
               <button
                 type="button"
-                className="password-toggle"
+                className="absolute right-3 top-1/2 -translate-y-1/2 bg-none border-none text-[rgba(255,255,255,0.6)] cursor-pointer flex items-center justify-center p-2 rounded-lg transition-all hover:text-[#00DAC1] hover:bg-[rgba(255,255,255,0.05)]"
                 onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                aria-label={
-                  showConfirmPassword ? "Hide password" : "Show password"
-                }
+                aria-label={showConfirmPassword ? "Hide password" : "Show password"}
               >
                 {showConfirmPassword ? <EyeOff size={20} /> : <Eye size={20} />}
               </button>
             </div>
-            {errors.confirmPassword && (
-              <span className="error-message">{errors.confirmPassword}</span>
-            )}
+            {errors.confirmPassword && <span className="text-[#FF4D4D] text-[0.75rem] mt-1 ml-1">{errors.confirmPassword}</span>}
           </div>
 
           {/* Terms Checkbox */}
-          <div className="form-group">
-            <div className="checkbox-group">
-              <label className="checkbox-container">
-                I agree to the{" "}
-                <a href="#" className="terms-link">
-                  Terms and Conditions
-                </a>
+          <div className="flex flex-col gap-2">
+            <label className="flex items-start gap-3 cursor-pointer text-[0.85rem] text-[rgba(255,255,255,0.6)] select-none">
+              <div className="relative mt-0.5 shrink-0">
                 <input
-                  type="checkbox"
-                  name="terms"
-                  checked={formData.terms}
-                  onChange={handleChange}
+                  type="checkbox" name="terms" checked={formData.terms} onChange={handleChange}
+                  className="sr-only peer"
                 />
-                <span className="checkmark"></span>
-              </label>
-            </div>
-            {errors.terms && (
-              <span className="error-message">{errors.terms}</span>
-            )}
+                <div className="w-[18px] h-[18px] bg-[rgba(255,255,255,0.1)] border border-[rgba(255,255,255,0.1)] rounded peer-checked:bg-[#00DAC1] peer-checked:border-[#00DAC1] transition-all" />
+                <svg
+                  className="absolute top-0.5 left-0.5 w-3.5 h-3.5 text-white hidden peer-checked:block pointer-events-none"
+                  viewBox="0 0 14 14" fill="none"
+                >
+                  <path d="M2 7l4 4 6-8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              </div>
+              <span>
+                I agree to the{" "}
+                <a href="#" className="text-[#00DAC1] no-underline hover:underline">Terms and Conditions</a>
+              </span>
+            </label>
+            {errors.terms && <span className="text-[#FF4D4D] text-[0.75rem] mt-1 ml-1">{errors.terms}</span>}
           </div>
 
-          {/* Submit Button */}
-          <button type="submit" className="submit-btn" disabled={loading}>
+          {/* Submit */}
+          <button
+            type="submit"
+            disabled={loading}
+            className="mt-3 bg-[linear-gradient(135deg,#00DAC1_0%,#008B7B_100%)] text-black border-none rounded-xl py-4 text-base font-bold cursor-pointer transition-all flex items-center justify-center gap-2 hover:not-disabled:-translate-y-0.5 hover:not-disabled:shadow-[0_4px_15px_rgba(0,218,193,0.4)] disabled:opacity-60 disabled:cursor-not-allowed"
+          >
             {loading ? (
               <>
-                <div className="loading-spinner"></div>
+                <div className="w-5 h-5 border-2 border-[rgba(0,0,0,0.1)] border-t-black rounded-full animate-spin" />
                 Creating Account...
               </>
-            ) : (
-              "Create Account"
-            )}
+            ) : "Create Account"}
           </button>
         </form>
 
-        <p className="login-link">
-          Already have an account? <Link to="/login">Sign in</Link>
+        <p className="text-center text-[0.9rem] text-[rgba(255,255,255,0.6)] mt-6">
+          Already have an account?{" "}
+          <Link to="/login" className="text-[#00DAC1] no-underline font-semibold hover:underline">Sign in</Link>
         </p>
       </div>
     </div>
diff --git a/frontend/src/pages/dashboard/Company/CompanyDashboard.tsx b/frontend/src/pages/dashboard/Company/CompanyDashboard.tsx
index eb3a873..53b5c98 100644
--- a/frontend/src/pages/dashboard/Company/CompanyDashboard.tsx
+++ b/frontend/src/pages/dashboard/Company/CompanyDashboard.tsx
@@ -1,165 +1,274 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import React, { useState, useEffect } from "react";
 import {
-  LayoutGrid,
-  ChevronDown,
-  Box,
-  ShieldCheck,
-  Banknote,
-  Plus,
-  Cpu,
-  Clock,
-  ArrowUpRight,
-  ArrowDownRight,
-} from 'lucide-react';
-import RecentShipments from './RecentShipments/RecentShipments';
-import ShipmentVolumeChart from '../../../components/dashboard/Charts/ShipmentVolumeChart/ShipmentVolumeChart';
-import DeliverySuccessChart from '../../../components/dashboard/Charts/DeliverySuccessChart/DeliverySuccessChart';
-import '../../dashboard/Dashboard.css';
+  Box, Clock, CheckCircle2, Truck, Plus, Printer, UserPlus, MapPin,
+  MoreHorizontal, Ship, Plane, Train, ShieldCheck, AlertTriangle,
+  Rocket, Menu, QrCode,
+} from "lucide-react";
+
+const badgeClasses: Record<string, string> = {
+  "delivered":  "bg-[rgba(16,185,129,0.1)]  text-[#10b981] border border-[rgba(16,185,129,0.2)]",
+  "in-transit": "bg-[rgba(59,130,246,0.1)]  text-[#3b82f6] border border-[rgba(59,130,246,0.2)]",
+  "delayed":    "bg-[rgba(245,158,11,0.1)]  text-[#f59e0b] border border-[rgba(245,158,11,0.2)]",
+  "pending":    "bg-[rgba(148,163,184,0.1)] text-[#94a3b8] border border-[rgba(148,163,184,0.2)]",
+};
+
+const dotClasses: Record<string, string> = {
+  "delivered":  "bg-[#10b981]",
+  "in-transit": "bg-[#3b82f6]",
+  "delayed":    "bg-[#f59e0b]",
+  "pending":    "bg-[#64748b]",
+};
+
+const mobileActionClasses: Record<string, string> = {
+  "delivered":  "border-[rgba(16,185,129,0.4)]  text-[#10b981] bg-[rgba(16,185,129,0.1)]",
+  "in-transit": "border-[rgba(59,130,246,0.4)]  text-[#3b82f6] bg-[rgba(59,130,246,0.1)]",
+  "delayed":    "border-[rgba(249,115,22,0.4)]  text-[#f97316] bg-[rgba(249,115,22,0.1)]",
+  "pending":    "border-[rgba(30,41,59,0.8)]    text-[#64748b] bg-[rgba(255,255,255,0.04)]",
+};
+
+const getStatusKey = (status: string) => {
+  switch (status) {
+    case "DELIVERED":  return "delivered";
+    case "IN-TRANSIT": return "in-transit";
+    case "DELAYED":    return "delayed";
+    default:           return "pending";
+  }
+};
+
+const getTransportIcon = (type: string) => {
+  switch (type) {
+    case "ship":  return <Ship  size={20} strokeWidth={1.5} />;
+    case "plane": return <Plane size={20} strokeWidth={1.5} />;
+    case "train": return <Train size={20} strokeWidth={1.5} />;
+    default:      return <Box   size={20} strokeWidth={1.5} />;
+  }
+};
+
+const TrendIcon = ({ up }: { up: boolean }) => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    {up
+      ? <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
+      : <polyline points="22 17 13.5 8.5 8.5 13.5 2 7" />}
+  </svg>
+);
+
+const stats = [
+  { id: "active",    label: "Active",    value: "128",   trend: "12%", trendType: "positive", icon: <Truck       size={18} /> },
+  { id: "delivered", label: "Delivered", value: "1,420", trend: "5%",  trendType: "positive", icon: <CheckCircle2 size={18} /> },
+  { id: "delayed",   label: "Delayed",   value: "12",    trend: "2%",  trendType: "negative", icon: <Clock       size={18} /> },
+  { id: "verified",  label: "Verified",  value: "45",    trend: "0%",  trendType: "neutral",  icon: <ShieldCheck size={18} /> },
+];
+
+const recentShipments = [
+  { id: "#NVN-9842", destination: "40.7128° N",    status: "IN-TRANSIT", statusLabel: "In Transit", type: "box"   },
+  { id: "#NVN-8711", destination: "Terminal B",    status: "DELIVERED",  statusLabel: "Delivered",  type: "train" },
+  { id: "#NVN-4420", destination: "Customs Check", status: "DELAYED",    statusLabel: "Delayed",    type: "plane" },
+  { id: "#NVN-2109", destination: "Pacific Route", status: "IN-TRANSIT", statusLabel: "On Vessel",  type: "ship"  },
+];
 
 const CompanyDashboard: React.FC = () => {
-  const navigate = useNavigate();
-  const stats = [
-    {
-      label: 'Total Shipments',
-      value: '1,248',
-      trend: '+4.2%',
-      trendType: 'up',
-      icon: <Box size={20} />,
-    },
-    {
-      label: 'In Transit',
-      value: '342',
-      trend: 'Active',
-      trendType: 'neutral',
-      icon: <Cpu size={20} />,
-    },
-    {
-      label: 'Delivered',
-      value: '856',
-      trend: '98% Goal',
-      trendType: 'up',
-      icon: <ShieldCheck size={20} />,
-    },
-    {
-      label: 'Pending Payment',
-      value: '$42.5k',
-      trend: '-1.2%',
-      trendType: 'down',
-      icon: <Banknote size={20} />,
-    },
-  ] as const;
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
 
-  return (
-    <div className="dashboard-home">
-      <div className="dashboard-header">
-        <div className="header-title">
-          <h1>Logistics Overview</h1>
-          <p>Real-time status of your global supply chain on the blockchain.</p>
-        </div>
-        <div className="date-selector">
-          <Clock size={16} />
-          <span>Last 30 Days</span>
-          <ChevronDown size={14} />
+  useEffect(() => {
+    const fetchDashboardData = async () => {
+      try {
+        setIsLoading(true);
+        await new Promise((resolve) => setTimeout(resolve, 1200));
+        setIsLoading(false);
+      } catch {
+        setHasError(true);
+        setIsLoading(false);
+      }
+    };
+    fetchDashboardData();
+  }, []);
+
+  if (hasError) {
+    return (
+      <div className="w-full max-w-[1080px] mx-auto px-[46px] py-6">
+        <div className="flex flex-col items-center justify-center p-12 bg-[#14171e] border border-dashed border-[#ef4444] rounded-xl text-center">
+          <AlertTriangle size={48} className="text-[#ef4444] mb-4" />
+          <h3 className="text-lg font-semibold mb-2">Failed to load dashboard</h3>
+          <p className="text-[#94a3b8] text-sm mb-4">There was a problem connecting to the logistics network.</p>
+          <button className="bg-[#ef4444] text-white border-none px-4 py-2 rounded-md font-medium cursor-pointer" onClick={() => window.location.reload()}>
+            Retry Connection
+          </button>
         </div>
       </div>
+    );
+  }
 
-      <div className="dashboard-left-col">
-        <div className="stats-grid">
-          {stats.map(stat => (
-            <div key={stat.label} className="stat-card">
-              <div className="stat-header">
-                <div className="stat-icon">{stat.icon}</div>
-                <div className={`stat-trend trend-${stat.trendType}`}>
-                  {stat.trendType === 'up' && <ArrowUpRight size={14} />}
-                  {stat.trendType === 'down' && <ArrowDownRight size={14} />}
-                  {stat.trend}
-                </div>
-              </div>
-              <div className="stat-label">{stat.label}</div>
-              <div className="stat-value">{stat.value}</div>
-            </div>
-          ))}
-        </div>
+  return (
+    <div className="font-sans text-white bg-transparent w-full max-w-[1080px] mx-auto min-h-[calc(100vh-72px)] px-[46px] py-6 flex flex-col gap-8 max-md:px-4 max-md:gap-6 max-md:pb-[90px]">
 
-        <div className="content-section">
-          <ShipmentVolumeChart />
+      {/* Mobile branded header */}
+      <div className="hidden max-md:flex items-center justify-between py-3">
+        <div className="flex items-center gap-2.5">
+          <div className="w-9 h-9 bg-[#3b82f6] rounded-[10px] flex items-center justify-center">
+            <Rocket size={16} color="#fff" />
+          </div>
+          <span className="text-lg font-extrabold text-white tracking-widest">NAVIN</span>
         </div>
+        <button className="bg-transparent border-none cursor-pointer p-1 flex items-center" aria-label="Menu">
+          <Menu size={22} color="#fff" />
+        </button>
+      </div>
 
-        <div className="content-section">
-          <DeliverySuccessChart />
+      {/* Title */}
+      <div className="flex justify-between items-end max-md:flex-col max-md:items-start max-md:gap-1">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight m-0 mb-1 max-md:text-[22px] max-md:font-bold">Logistics Overview</h1>
+          <p className="text-[#94a3b8] text-sm m-0">Blockchain-synced real-time data</p>
         </div>
-
-        <div className="content-section">
-          <div className="section-title">
-            <h2>
-              <LayoutGrid size={18} />
-              Recent Shipments
-            </h2>
-            <span className="view-all">View All</span>
-          </div>
-          <RecentShipments />
+        <div className="max-md:hidden flex items-center gap-1.5 bg-[#14171e] border border-[#1e293b] px-3 py-1.5 rounded-md text-xs font-medium text-[#94a3b8]">
+          Live: <span className="text-[#10b981]">Connected</span>
         </div>
       </div>
 
-      <div className="right-rail">
-        <div className="rail-card">
-          <h3>Quick Actions</h3>
-          <div className="quick-actions-list">
-            <button className="action-button primary" type="button" onClick={() => navigate('/dashboard/shipments/create')}>
-              <span className="action-label">Create New Shipment</span>
-              <div className="action-icon">
-                <Plus size={20} />
+      {/* Stats */}
+      <div className="grid grid-cols-2 gap-6 max-md:gap-3">
+        {isLoading
+          ? [1, 2, 3, 4].map((i) => <div key={i} className="h-[120px] rounded-xl animate-shimmer" />)
+          : stats.map((stat) => (
+            <div key={stat.id} className="bg-[#14171e] border border-[#1e293b] rounded-xl p-6 flex flex-col transition-transform duration-200 hover:-translate-y-0.5 hover:border-[#334155] max-md:p-4">
+              <div className="flex items-center gap-2 text-[#94a3b8] text-[11px] font-semibold uppercase tracking-[0.05em] mb-4">
+                {stat.icon}{stat.label}
               </div>
-            </button>
-            <button className="action-button" type="button">
-              <span className="action-label">Track Token Asset</span>
-              <div className="action-icon">
-                <LayoutGrid size={20} />
+              <div className={`text-[32px] font-semibold mb-2 max-md:text-[28px] ${stat.id === "delayed" ? "text-[#f59e0b]" : "text-white"}`}>
+                {stat.value}
               </div>
-            </button>
-            <button className="action-button" type="button">
-              <span className="action-label">Generate Settlement</span>
-              <div className="action-icon">
-                <Banknote size={20} />
+              <div className={`text-[13px] font-medium flex items-center gap-1 ${
+                stat.trendType === "positive" ? "text-[#10b981]" :
+                stat.trendType === "negative" ? "text-[#ef4444]" : "text-[#94a3b8]"
+              }`}>
+                <TrendIcon up={stat.trendType === "positive"} />{stat.trend}
               </div>
+            </div>
+          ))
+        }
+      </div>
+
+      {/* Quick Actions — desktop only */}
+      <div className="max-md:hidden">
+        <h2 className="text-[13px] font-semibold text-[#64748b] uppercase tracking-[0.05em] m-0 mb-4">QUICK ACTIONS</h2>
+        <div className="grid grid-cols-2 gap-4">
+          <button className="flex items-center gap-2 px-4 h-[50px] rounded-lg text-sm font-medium cursor-pointer bg-[#4f46e5] text-white border-transparent transition-colors hover:bg-[#4338ca]">
+            <Plus size={18} /> New Shipment
+          </button>
+          {[
+            { icon: <Printer size={18} />, label: "Print Labels" },
+            { icon: <UserPlus size={18} />, label: "Assign Driver" },
+            { icon: <MapPin size={18} />, label: "Track ID" },
+          ].map(({ icon, label }) => (
+            <button key={label} className="flex items-center gap-2 px-4 h-[50px] rounded-lg text-sm font-medium cursor-pointer bg-[#14171e] border border-[#1e293b] text-white transition-colors hover:bg-[#1e2433] hover:border-[#334155]">
+              {icon} {label}
             </button>
-          </div>
+          ))}
         </div>
+      </div>
 
-        <div className="rail-card">
-          <div className="distribution-header">
-            <h3>Network Distribution</h3>
-          </div>
-          <div className="map-placeholder">
-            <svg width="100%" height="100%" viewBox="0 0 100 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M10 30 Q 25 10, 40 30 T 70 30 T 90 20"
-                stroke="#1e2433"
-                strokeWidth="0.5"
-                fill="none"
-              />
-              <circle cx="20" cy="25" r="1.5" fill="#3b82f6" />
-              <circle cx="45" cy="35" r="1.5" fill="#10b981" />
-              <circle cx="75" cy="20" r="1.5" fill="#3b82f6" />
-              <circle cx="85" cy="40" r="1.5" fill="#3b82f6" />
-            </svg>
+      {/* Shipments */}
+      <div className="flex flex-col">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-[13px] font-semibold text-[#64748b] uppercase tracking-[0.05em] m-0 max-md:text-lg max-md:font-bold max-md:text-white max-md:normal-case max-md:tracking-normal">
+            Recent Shipments
+          </h2>
+          <a href="#" className="text-[13px] font-medium text-[#94a3b8] no-underline transition-colors hover:text-white max-md:text-[#3b82f6] max-md:font-semibold">
+            View All
+          </a>
+        </div>
+
+        {isLoading ? (
+          <div className="h-[300px] rounded-xl animate-shimmer" />
+        ) : (
+          <div className="border border-[rgba(30,41,59,0.5)] rounded-xl overflow-hidden max-md:bg-transparent max-md:border-none">
+            {/* Desktop table */}
+            <table className="w-full border-collapse max-md:hidden">
+              <thead>
+                <tr>
+                  {["ID", "Destination", "Status"].map((h) => (
+                    <th key={h} className="text-left px-6 py-4 text-[13px] font-medium text-[#64748b] border-b border-[rgba(30,41,59,0.5)] bg-[rgba(15,23,42,0.5)]">{h}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {recentShipments.map((s) => (
+                  <tr key={s.id} className="group">
+                    <td className="px-6 py-4 text-sm border-b border-[rgba(30,41,59,0.5)] bg-[#131720] group-hover:bg-[rgba(255,255,255,0.02)]">
+                      <span className="text-[#94a3b8] font-mono text-[13px]">{s.id}</span>
+                    </td>
+                    <td className="px-6 py-4 text-sm text-white border-b border-[rgba(30,41,59,0.5)] bg-[#131720] group-hover:bg-[rgba(255,255,255,0.02)]">{s.destination}</td>
+                    <td className="px-6 py-4 text-sm border-b border-[rgba(30,41,59,0.5)] bg-[#131720] group-hover:bg-[rgba(255,255,255,0.02)]">
+                      <span className={`inline-flex items-center px-2.5 py-1 rounded text-[10px] font-bold uppercase tracking-[0.05em] ${badgeClasses[getStatusKey(s.status)]}`}>
+                        {s.status}
+                      </span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+
+            {/* Mobile cards */}
+            <div className="hidden max-md:flex flex-col">
+              {recentShipments.map((s) => {
+                const key = getStatusKey(s.status);
+                const isQr = s.status === "IN-TRANSIT" && s.id === "#NVN-2109";
+                return (
+                  <div key={`mob-${s.id}`} className="flex items-center bg-[#131720] rounded-xl mb-2 border border-[rgba(30,41,59,0.5)] px-4 py-3.5 gap-3">
+                    <div className="w-10 h-10 min-w-[40px] bg-[rgba(255,255,255,0.04)] rounded-[10px] flex items-center justify-center text-[#94a3b8]">
+                      {getTransportIcon(s.type)}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <span className="block font-bold text-[15px] text-white whitespace-nowrap overflow-hidden text-ellipsis">{s.id}</span>
+                      <div className="flex items-center gap-1.5 text-[13px] text-[#94a3b8] mt-0.5">
+                        <div className={`w-2 h-2 rounded-full flex-shrink-0 ${dotClasses[key]}`} />
+                        {s.statusLabel} - {s.destination}
+                      </div>
+                    </div>
+                    <button className={`min-w-[36px] w-9 h-9 rounded-full border flex items-center justify-center cursor-pointer flex-shrink-0 ${isQr ? "!w-11 !h-11 bg-[#3b82f6] text-white border-[#3b82f6]" : mobileActionClasses[key]}`}>
+                      {s.status === "DELIVERED" ? <ShieldCheck size={18} /> : isQr ? <QrCode size={18} /> : <MoreHorizontal size={18} />}
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
           </div>
-          <div className="distribution-stats">
-            <div className="dist-stat-item">
-              <span className="dist-stat-label">Active Nodes</span>
-              <span className="dist-stat-value">142</span>
+        )}
+      </div>
+
+      {/* Active Fleet — desktop only */}
+      {!isLoading && (
+        <div className="max-md:hidden bg-[#14171e] border border-[#1e293b] rounded-xl px-6 py-4 flex justify-between items-center">
+          <div className="flex items-center gap-4">
+            <div className="w-10 h-10 bg-[rgba(79,70,229,0.1)] text-[#4f46e5] rounded-md flex items-center justify-center">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M12 2v20" /><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+              </svg>
             </div>
-            <div className="dist-stat-item">
-              <span className="dist-stat-label">TPS</span>
-              <span className="dist-stat-value">2,140</span>
+            <div>
+              <h3 className="m-0 mb-0.5 text-sm font-semibold">Active Fleet Routes</h3>
+              <p className="m-0 text-xs text-[#94a3b8]">12 drivers currently active</p>
+            </div>
+          </div>
+          <div className="flex items-center">
+            {[
+              { seed: "Felix", bg: "b6e3f4" },
+              { seed: "Aneka", bg: "c0aede" },
+              { seed: "Jack",  bg: "ffdfbf" },
+            ].map((a, i) => (
+              <div key={i} className="w-7 h-7 rounded-full border-2 border-[#14171e] -ml-2 first:ml-0 bg-[#334155] overflow-hidden">
+                <img src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${a.seed}&backgroundColor=${a.bg}`} alt="Driver" className="w-full h-full object-cover" />
+              </div>
+            ))}
+            <div className="w-7 h-7 rounded-full border-2 border-[#14171e] -ml-2 bg-[#334155] flex items-center justify-center text-[11px] font-semibold text-white">
+              +9
             </div>
           </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };
 
 export default CompanyDashboard;
-
diff --git a/frontend/src/pages/dashboard/Company/RecentShipments/RecentShipments.css b/frontend/src/pages/dashboard/Company/RecentShipments/RecentShipments.css
deleted file mode 100644
index 43e1a31..0000000
--- a/frontend/src/pages/dashboard/Company/RecentShipments/RecentShipments.css
+++ /dev/null
@@ -1,148 +0,0 @@
-.recent-shipments-table .sortable-header {
-  border: none;
-  background: transparent;
-  color: inherit;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font: inherit;
-  text-transform: inherit;
-  cursor: pointer;
-  padding: 0;
-}
-
-.recent-shipments-table .sortable-header:hover {
-  color: var(--text-primary);
-}
-
-.status-pending-approval {
-  background-color: rgba(245, 158, 11, 0.1);
-  color: #fbbf24;
-}
-
-.status-cancelled {
-  background-color: rgba(239, 68, 68, 0.1);
-  color: #f87171;
-}
-
-.recent-shipments-skeleton {
-  padding: 16px 24px 24px;
-}
-
-.recent-shipments-skeleton-row {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(90px, 1fr));
-  gap: 12px;
-  padding: 14px 0;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.recent-shipments-skeleton-row:last-child {
-  border-bottom: none;
-}
-
-.skeleton-cell {
-  height: 14px;
-  border-radius: 999px;
-  background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
-  background-size: 250% 100%;
-  animation: shipment-skeleton-shimmer 1.4s infinite;
-}
-
-@keyframes shipment-skeleton-shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-.recent-shipments-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 48px 24px;
-  text-align: center;
-}
-
-.recent-shipments-empty h3 {
-  font-size: 18px;
-}
-
-.recent-shipments-empty p {
-  color: var(--text-secondary);
-  font-size: 14px;
-  max-width: 420px;
-}
-
-.create-shipment-button {
-  margin-top: 8px;
-  background-color: var(--accent-blue);
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  padding: 8px 14px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.table-pagination {
-  border-top: 1px solid var(--border-color);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 24px;
-  gap: 12px;
-}
-
-.pagination-nav,
-.pagination-page {
-  border: 1px solid var(--border-color);
-  background: #121620;
-  color: #d1d5db;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.pagination-nav {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
-}
-
-.pagination-pages {
-  display: flex;
-  gap: 8px;
-}
-
-.pagination-page {
-  min-width: 32px;
-  padding: 6px 10px;
-}
-
-.pagination-page.is-active {
-  background: var(--accent-blue);
-  border-color: var(--accent-blue);
-  color: white;
-}
-
-.pagination-nav:disabled,
-.pagination-page:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-@media (max-width: 768px) {
-  .table-pagination {
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-}
-
diff --git a/frontend/src/pages/dashboard/Company/RecentShipments/RecentShipments.tsx b/frontend/src/pages/dashboard/Company/RecentShipments/RecentShipments.tsx
index 715db64..ee81c67 100644
--- a/frontend/src/pages/dashboard/Company/RecentShipments/RecentShipments.tsx
+++ b/frontend/src/pages/dashboard/Company/RecentShipments/RecentShipments.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { ChevronLeft, ChevronRight, ChevronsUpDown } from 'lucide-react';
 import { MOCK_SHIPMENTS, type Shipment } from './mockShipments';
-import './RecentShipments.css';
 
 type SortKey = 'createdAt' | 'status';
 type SortDirection = 'asc' | 'desc';
@@ -21,14 +20,14 @@ const statusRank: Record<Shipment['status'], number> = {
 };
 
 const formatCreatedDate = (createdAt: string) =>
-  new Intl.DateTimeFormat('en-US', {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  }).format(new Date(createdAt));
+  new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(new Date(createdAt));
 
-const statusClassName = (status: Shipment['status']) =>
-  `status-${status.toLowerCase().replace(/\s+/g, '-')}`;
+const statusClasses: Record<Shipment['status'], string> = {
+  'Pending Approval': 'bg-[rgba(245,158,11,0.1)] text-[#fbbf24]',
+  'In Transit':       'bg-[rgba(59,130,246,0.1)] text-[#60a5fa]',
+  Delivered:          'bg-[rgba(16,185,129,0.1)] text-[#34d399]',
+  Cancelled:          'bg-[rgba(239,68,68,0.1)] text-[#f87171]',
+};
 
 const RecentShipments: React.FC<RecentShipmentsProps> = ({
   shipments = MOCK_SHIPMENTS,
@@ -41,57 +40,39 @@ const RecentShipments: React.FC<RecentShipmentsProps> = ({
   const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
 
   useEffect(() => {
-    const timer = window.setTimeout(() => {
-      setLoadedShipments(shipments);
-      setIsLoading(false);
-    }, loadingDelayMs);
-
+    const timer = window.setTimeout(() => { setLoadedShipments(shipments); setIsLoading(false); }, loadingDelayMs);
     return () => window.clearTimeout(timer);
   }, [shipments, loadingDelayMs]);
 
   const sortedShipments = useMemo(() => {
-    const sorted = [...loadedShipments].sort((a, b) => {
-      if (sortKey === 'createdAt') {
-        return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
-      }
-
-      return statusRank[a.status] - statusRank[b.status];
-    });
-
+    const sorted = [...loadedShipments].sort((a, b) =>
+      sortKey === 'createdAt'
+        ? new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+        : statusRank[a.status] - statusRank[b.status]
+    );
     return sortDirection === 'asc' ? sorted : sorted.reverse();
   }, [loadedShipments, sortKey, sortDirection]);
 
   const totalPages = Math.max(1, Math.ceil(sortedShipments.length / PAGE_SIZE));
   const activePage = Math.min(currentPage, totalPages);
-
   const currentRows = useMemo(() => {
     const start = (activePage - 1) * PAGE_SIZE;
     return sortedShipments.slice(start, start + PAGE_SIZE);
   }, [activePage, sortedShipments]);
 
   const handleSort = (nextKey: SortKey) => {
-    if (sortKey === nextKey) {
-      setCurrentPage(1);
-      setSortDirection(prev => (prev === 'asc' ? 'desc' : 'asc'));
-      return;
-    }
-
-    setCurrentPage(1);
-    setSortKey(nextKey);
-    setSortDirection('asc');
+    if (sortKey === nextKey) { setCurrentPage(1); setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'); return; }
+    setCurrentPage(1); setSortKey(nextKey); setSortDirection('asc');
   };
 
   if (isLoading) {
     return (
-      <div className="recent-shipments-skeleton" aria-label="Recent shipments loading">
+      <div className="px-6 pt-4 pb-6" aria-label="Recent shipments loading">
         {Array.from({ length: PAGE_SIZE }).map((_, idx) => (
-          <div className="recent-shipments-skeleton-row" key={idx}>
-            <span className="skeleton-cell" />
-            <span className="skeleton-cell" />
-            <span className="skeleton-cell" />
-            <span className="skeleton-cell" />
-            <span className="skeleton-cell" />
-            <span className="skeleton-cell" />
+          <div key={idx} className="grid grid-cols-[repeat(6,minmax(90px,1fr))] gap-3 py-3.5 border-b border-border last:border-b-0">
+            {Array.from({ length: 6 }).map((__, i) => (
+              <span key={i} className="h-3.5 rounded-full animate-shimmer" />
+            ))}
           </div>
         ))}
       </div>
@@ -100,63 +81,64 @@ const RecentShipments: React.FC<RecentShipmentsProps> = ({
 
   if (sortedShipments.length === 0) {
     return (
-      <div className="recent-shipments-empty">
-        <h3>No shipments found</h3>
-        <p>Start by creating your first shipment to track your delivery pipeline.</p>
-        <button type="button" className="create-shipment-button">
+      <div className="flex flex-col items-center justify-center gap-3 px-6 py-12 text-center">
+        <h3 className="text-lg font-semibold">No shipments found</h3>
+        <p className="text-text-secondary text-sm max-w-[420px]">Start by creating your first shipment to track your delivery pipeline.</p>
+        <button type="button" className="mt-2 bg-accent-blue text-white border-none rounded-lg px-3.5 py-2 text-[13px] font-semibold cursor-pointer">
           Create your first shipment
         </button>
       </div>
     );
   }
 
+  const thBase = "text-left px-6 py-4 text-xs font-semibold text-text-secondary uppercase tracking-wide border-b border-border";
+  const tdBase = "px-6 py-4 text-sm border-b border-border";
+
   return (
     <>
-      <table className="shipments-table recent-shipments-table">
+      <table className="w-full border-collapse">
         <thead>
           <tr>
-            <th>Shipment ID</th>
-            <th>Origin</th>
-            <th>Destination</th>
-            <th>
+            <th className={thBase}>Shipment ID</th>
+            <th className={thBase}>Origin</th>
+            <th className={thBase}>Destination</th>
+            <th className={thBase}>
               <button
                 type="button"
-                className="sortable-header"
+                className="border-none bg-transparent text-inherit inline-flex items-center gap-1.5 font-[inherit] text-inherit uppercase cursor-pointer p-0 hover:text-text-primary transition-colors"
                 onClick={() => handleSort('status')}
                 aria-label={`Sort by status (${sortDirection})`}
               >
-                Status
-                <ChevronsUpDown size={14} />
+                Status <ChevronsUpDown size={14} />
               </button>
             </th>
-            <th>
+            <th className={thBase}>
               <button
                 type="button"
-                className="sortable-header"
+                className="border-none bg-transparent text-inherit inline-flex items-center gap-1.5 font-[inherit] text-inherit uppercase cursor-pointer p-0 hover:text-text-primary transition-colors"
                 onClick={() => handleSort('createdAt')}
                 aria-label={`Sort by created date (${sortDirection})`}
               >
-                Created Date
-                <ChevronsUpDown size={14} />
+                Created Date <ChevronsUpDown size={14} />
               </button>
             </th>
-            <th>Actions</th>
+            <th className={thBase}>Actions</th>
           </tr>
         </thead>
         <tbody>
           {currentRows.map(shipment => (
-            <tr key={shipment.id}>
-              <td className="shipment-id-cell">{shipment.id}</td>
-              <td>{shipment.origin}</td>
-              <td>{shipment.destination}</td>
-              <td>
-                <span className={`status-badge ${statusClassName(shipment.status)}`}>
+            <tr key={shipment.id} className="hover:bg-[rgba(255,255,255,0.02)] transition-colors">
+              <td className={`${tdBase} font-medium text-text-primary`}>{shipment.id}</td>
+              <td className={tdBase}>{shipment.origin}</td>
+              <td className={tdBase}>{shipment.destination}</td>
+              <td className={tdBase}>
+                <span className={`px-2.5 py-1 rounded-full text-xs font-semibold ${statusClasses[shipment.status]}`}>
                   {shipment.status}
                 </span>
               </td>
-              <td>{formatCreatedDate(shipment.createdAt)}</td>
-              <td>
-                <button type="button" className="verify-button">
+              <td className={tdBase}>{formatCreatedDate(shipment.createdAt)}</td>
+              <td className={tdBase}>
+                <button type="button" className="bg-accent-blue/10 text-accent-blue border border-accent-blue/20 rounded-md px-3 py-1.5 text-xs font-semibold cursor-pointer hover:bg-accent-blue hover:text-white transition-all">
                   View
                 </button>
               </td>
@@ -165,27 +147,29 @@ const RecentShipments: React.FC<RecentShipmentsProps> = ({
         </tbody>
       </table>
 
-      <div className="table-pagination" aria-label="Recent shipments pagination">
+      {/* Pagination */}
+      <div className="border-t border-border flex items-center justify-between px-6 py-3.5 gap-3 flex-wrap md:justify-center" aria-label="Recent shipments pagination">
         <button
           type="button"
-          className="pagination-nav"
+          className="border border-border bg-background-elevated text-[#d1d5db] rounded-lg cursor-pointer text-xs font-semibold inline-flex items-center gap-1.5 px-2.5 py-1.5 disabled:opacity-45 disabled:cursor-not-allowed transition-colors hover:not-disabled:bg-[#1a2030]"
           onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
           disabled={activePage === 1}
           aria-label="Previous page"
         >
-          <ChevronLeft size={14} />
-          Prev
+          <ChevronLeft size={14} /> Prev
         </button>
-
-        <div className="pagination-pages">
+        <div className="flex gap-2">
           {Array.from({ length: totalPages }).map((_, idx) => {
             const page = idx + 1;
-
             return (
               <button
-                type="button"
                 key={page}
-                className={`pagination-page ${page === activePage ? 'is-active' : ''}`}
+                type="button"
+                className={`border rounded-lg cursor-pointer text-xs font-semibold min-w-[32px] px-2.5 py-1.5 transition-colors ${
+                  page === activePage
+                    ? 'bg-accent-blue border-accent-blue text-white'
+                    : 'border-border bg-background-elevated text-[#d1d5db] hover:bg-[#1a2030]'
+                }`}
                 onClick={() => setCurrentPage(page)}
                 aria-label={`Page ${page}`}
                 aria-current={page === activePage ? 'page' : undefined}
@@ -195,16 +179,14 @@ const RecentShipments: React.FC<RecentShipmentsProps> = ({
             );
           })}
         </div>
-
         <button
           type="button"
-          className="pagination-nav"
+          className="border border-border bg-background-elevated text-[#d1d5db] rounded-lg cursor-pointer text-xs font-semibold inline-flex items-center gap-1.5 px-2.5 py-1.5 disabled:opacity-45 disabled:cursor-not-allowed transition-colors hover:not-disabled:bg-[#1a2030]"
           onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
           disabled={activePage === totalPages}
           aria-label="Next page"
         >
-          Next
-          <ChevronRight size={14} />
+          Next <ChevronRight size={14} />
         </button>
       </div>
     </>
@@ -212,4 +194,3 @@ const RecentShipments: React.FC<RecentShipmentsProps> = ({
 };
 
 export default RecentShipments;
-
diff --git a/frontend/src/pages/dashboard/Company/Settings/CompanySettings.tsx b/frontend/src/pages/dashboard/Company/Settings/CompanySettings.tsx
index f5f954e..b33b5ba 100644
--- a/frontend/src/pages/dashboard/Company/Settings/CompanySettings.tsx
+++ b/frontend/src/pages/dashboard/Company/Settings/CompanySettings.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { Camera, Save, CheckCircle2, Loader2, Link as LinkIcon, Bell, Building2 } from 'lucide-react';
+import { Camera, Save, CheckCircle2, Loader2, Link as LinkIcon, Building2 } from 'lucide-react';
 import { WalletConnectButton } from '../../../../components/auth/WalletConnectButton/WalletConnectButton';
+import NotificationPreferences from '../../../Settings/NotificationPreferences/NotificationPreferences';
 import './CompanySettings.css';
 
 const CompanySettings: React.FC = () => {
@@ -11,12 +12,6 @@ const CompanySettings: React.FC = () => {
 
     const [logoPreview, setLogoPreview] = useState<string | null>(null);
 
-    const [notifications, setNotifications] = useState({
-        email: true,
-        inApp: true,
-        sms: false,
-    });
-
     const [loading, setLoading] = useState(false);
     const [successMsg, setSuccessMsg] = useState('');
 
@@ -33,10 +28,6 @@ const CompanySettings: React.FC = () => {
         }
     };
 
-    const toggleNotification = (key: keyof typeof notifications) => {
-        setNotifications(prev => ({ ...prev, [key]: !prev[key] }));
-    };
-
     const handleSave = () => {
         setLoading(true);
         setSuccessMsg('');
@@ -113,58 +104,7 @@ const CompanySettings: React.FC = () => {
               </section>
 
               {/* Notification Preferences Section */}
-              <section className="settings-card">
-                  <div className="card-header">
-                      <Bell className="card-icon" size={24} />
-                      <h2>Notification Preferences</h2>
-                  </div>
-                  <div className="card-body">
-                      <div className="toggle-group">
-                          <div className="toggle-info">
-                              <span className="toggle-label">Email Alerts</span>
-                              <span className="toggle-desc">Receive shipment updates via email</span>
-                          </div>
-                          <label className="switch">
-                              <input
-                                  type="checkbox"
-                                  checked={notifications.email}
-                                  onChange={() => toggleNotification('email')}
-                              />
-                              <span className="slider round"></span>
-                          </label>
-                      </div>
-
-                      <div className="toggle-group">
-                          <div className="toggle-info">
-                              <span className="toggle-label">In-App Notifications</span>
-                              <span className="toggle-desc">Show alerts within the dashboard</span>
-                          </div>
-                          <label className="switch">
-                              <input
-                                  type="checkbox"
-                                  checked={notifications.inApp}
-                                  onChange={() => toggleNotification('inApp')}
-                              />
-                              <span className="slider round"></span>
-                          </label>
-                      </div>
-
-                      <div className="toggle-group">
-                          <div className="toggle-info">
-                              <span className="toggle-label">SMS Alerts</span>
-                              <span className="toggle-desc">Receive critical alerts via SMS text</span>
-                          </div>
-                          <label className="switch">
-                              <input
-                                  type="checkbox"
-                                  checked={notifications.sms}
-                                  onChange={() => toggleNotification('sms')}
-                              />
-                              <span className="slider round"></span>
-                          </label>
-                      </div>
-                  </div>
-              </section>
+              <NotificationPreferences />
 
               {/* Connected Wallet Section */}
               <section className="settings-card">
diff --git a/frontend/src/pages/dashboard/Customer/ActiveShipments/ActiveShipments.css b/frontend/src/pages/dashboard/Customer/ActiveShipments/ActiveShipments.css
deleted file mode 100644
index 4f59c96..0000000
--- a/frontend/src/pages/dashboard/Customer/ActiveShipments/ActiveShipments.css
+++ /dev/null
@@ -1,140 +0,0 @@
-.active-shipments {
-  padding: 2rem;
-}
-
-.active-shipments-title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-bottom: 1.5rem;
-  color: #1a1a1a;
-}
-
-.shipment-cards-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1.5rem;
-}
-
-.shipment-card {
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  transition: box-shadow 0.2s ease;
-}
-
-.shipment-card:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-}
-
-.shipment-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.shipment-id {
-  font-weight: 600;
-  font-size: 1rem;
-  color: #1a1a1a;
-}
-
-.status-badge {
-  padding: 0.25rem 0.75rem;
-  border-radius: 12px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: capitalize;
-}
-
-.status-in-transit {
-  background: #dbeafe;
-  color: #1e40af;
-}
-
-.status-pending-pickup {
-  background: #fef3c7;
-  color: #92400e;
-}
-
-.status-out-for-delivery {
-  background: #d1fae5;
-  color: #065f46;
-}
-
-.status-delayed {
-  background: #fee2e2;
-  color: #991b1b;
-}
-
-.shipment-route {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  color: #4b5563;
-}
-
-.route-location {
-  font-weight: 500;
-}
-
-.route-arrow {
-  color: #9ca3af;
-  font-size: 1rem;
-}
-
-.shipment-eta {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  font-size: 0.875rem;
-}
-
-.eta-label {
-  color: #6b7280;
-  font-weight: 400;
-}
-
-.eta-date {
-  color: #1a1a1a;
-  font-weight: 500;
-}
-
-.track-button {
-  background: #2563eb;
-  color: #ffffff;
-  border: none;
-  border-radius: 6px;
-  padding: 0.625rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.2s ease;
-}
-
-.track-button:hover {
-  background: #1d4ed8;
-}
-
-.track-button:active {
-  background: #1e40af;
-}
-
-@media (max-width: 768px) {
-  .active-shipments {
-    padding: 1rem;
-  }
-
-  .shipment-cards-grid {
-    grid-template-columns: 1fr;
-    gap: 1rem;
-  }
-
-  .active-shipments-title {
-    font-size: 1.25rem;
-  }
-}
diff --git a/frontend/src/pages/dashboard/Customer/ActiveShipments/ActiveShipments.test.tsx b/frontend/src/pages/dashboard/Customer/ActiveShipments/ActiveShipments.test.tsx
new file mode 100644
index 0000000..0abf666
--- /dev/null
+++ b/frontend/src/pages/dashboard/Customer/ActiveShipments/ActiveShipments.test.tsx
@@ -0,0 +1,37 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import ActiveShipments from './ActiveShipments';
+
+const navigateMock = vi.fn();
+
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual<typeof import('react-router-dom')>('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => navigateMock,
+  };
+});
+
+describe('ActiveShipments', () => {
+  it('renders at least four shipment cards with required fields', () => {
+    render(<ActiveShipments />);
+
+    const cards = screen.getAllByTestId('active-shipment-card');
+    expect(cards.length).toBeGreaterThanOrEqual(4);
+
+    expect(screen.getByText('SHP-2001')).toBeInTheDocument();
+    expect(screen.getByText('In Transit')).toBeInTheDocument();
+    expect(screen.getByText('Singapore')).toBeInTheDocument();
+    expect(screen.getByText('Los Angeles')).toBeInTheDocument();
+    expect(screen.getByText('Feb 28, 2026')).toBeInTheDocument();
+  });
+
+  it('navigates to shipment detail page when track is clicked', () => {
+    render(<ActiveShipments />);
+
+    const firstTrackButton = screen.getAllByRole('button', { name: 'Track' })[0];
+    fireEvent.click(firstTrackButton);
+
+    expect(navigateMock).toHaveBeenCalledWith('/dashboard/shipments/SHP-2001');
+  });
+});
diff --git a/frontend/src/pages/dashboard/Customer/ActiveShipments/ActiveShipments.tsx b/frontend/src/pages/dashboard/Customer/ActiveShipments/ActiveShipments.tsx
index 5211be1..24856f8 100644
--- a/frontend/src/pages/dashboard/Customer/ActiveShipments/ActiveShipments.tsx
+++ b/frontend/src/pages/dashboard/Customer/ActiveShipments/ActiveShipments.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import "./ActiveShipments.css";
 
 interface ActiveShipment {
   id: string;
@@ -11,80 +10,54 @@ interface ActiveShipment {
 }
 
 const MOCK_ACTIVE_SHIPMENTS: ActiveShipment[] = [
-  {
-    id: "SHP-2001",
-    status: "In Transit",
-    origin: "Singapore",
-    destination: "Los Angeles",
-    estimatedDelivery: "2026-02-28",
-  },
-  {
-    id: "SHP-2002",
-    status: "Out for Delivery",
-    origin: "Dubai",
-    destination: "London",
-    estimatedDelivery: "2026-02-24",
-  },
-  {
-    id: "SHP-2003",
-    status: "Pending Pickup",
-    origin: "Shanghai",
-    destination: "Rotterdam",
-    estimatedDelivery: "2026-03-05",
-  },
-  {
-    id: "SHP-2004",
-    status: "Delayed",
-    origin: "Mumbai",
-    destination: "New York",
-    estimatedDelivery: "2026-03-02",
-  },
+  { id: "SHP-2001", status: "In Transit", origin: "Singapore", destination: "Los Angeles", estimatedDelivery: "2026-02-28" },
+  { id: "SHP-2002", status: "Out for Delivery", origin: "Dubai", destination: "London", estimatedDelivery: "2026-02-24" },
+  { id: "SHP-2003", status: "Pending Pickup", origin: "Shanghai", destination: "Rotterdam", estimatedDelivery: "2026-03-05" },
+  { id: "SHP-2004", status: "Delayed", origin: "Mumbai", destination: "New York", estimatedDelivery: "2026-03-02" },
 ];
 
-const formatDate = (dateString: string) => {
-  return new Intl.DateTimeFormat("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-  }).format(new Date(dateString));
+const formatDate = (dateString: string) =>
+  new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric" }).format(new Date(dateString));
+
+const statusStyles: Record<ActiveShipment["status"], string> = {
+  "In Transit":       "bg-blue-100 text-blue-800",
+  "Pending Pickup":   "bg-yellow-100 text-yellow-800",
+  "Out for Delivery": "bg-green-100 text-green-800",
+  "Delayed":          "bg-red-100 text-red-800",
 };
 
 const ActiveShipments: React.FC = () => {
   const navigate = useNavigate();
 
-  const handleTrack = (shipmentId: string) => {
-    navigate(`/shipments/${shipmentId}`);
-  };
-
   return (
-    <div className="active-shipments">
-      <h2 className="active-shipments-title">Active Shipments</h2>
-      <div className="shipment-cards-grid">
+    <div className="p-8 md:p-4">
+      <h2 className="text-2xl font-semibold mb-6 text-[#1a1a1a] md:text-xl">Active Shipments</h2>
+      <div className="grid grid-cols-2 gap-6 md:grid-cols-1 md:gap-4">
         {MOCK_ACTIVE_SHIPMENTS.map((shipment) => (
-          <div key={shipment.id} className="shipment-card">
-            <div className="shipment-card-header">
-              <span className="shipment-id">{shipment.id}</span>
-              <span
-                className={`status-badge status-${shipment.status.toLowerCase().replace(/\s+/g, "-")}`}
-              >
+          <div
+            key={shipment.id}
+            data-testid="active-shipment-card"
+            className="bg-white border border-[#e5e7eb] rounded-lg p-6 flex flex-col gap-4 transition-shadow hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)]"
+          >
+            <div className="flex justify-between items-center">
+              <span className="font-semibold text-base text-[#1a1a1a]">{shipment.id}</span>
+              <span className={`px-3 py-1 rounded-xl text-xs font-medium capitalize ${statusStyles[shipment.status]}`}>
                 {shipment.status}
               </span>
             </div>
-            <div className="shipment-route">
-              <span className="route-location">{shipment.origin}</span>
-              <span className="route-arrow">→</span>
-              <span className="route-location">{shipment.destination}</span>
+            <div className="flex items-center gap-2 text-sm text-[#4b5563]">
+              <span className="font-medium">{shipment.origin}</span>
+              <span className="text-[#9ca3af] text-base">→</span>
+              <span className="font-medium">{shipment.destination}</span>
             </div>
-            <div className="shipment-eta">
-              <span className="eta-label">Est. Delivery:</span>
-              <span className="eta-date">
-                {formatDate(shipment.estimatedDelivery)}
-              </span>
+            <div className="flex flex-col gap-1 text-sm">
+              <span className="text-[#6b7280]">Est. Delivery:</span>
+              <span className="text-[#1a1a1a] font-medium">{formatDate(shipment.estimatedDelivery)}</span>
             </div>
             <button
               type="button"
-              className="track-button"
-              onClick={() => handleTrack(shipment.id)}
+              className="bg-[#2563eb] text-white border-none rounded-md px-4 py-2.5 text-sm font-medium cursor-pointer transition-colors hover:bg-[#1d4ed8] active:bg-[#1e40af]"
+              onClick={() => navigate(`/dashboard/shipments/${shipment.id}`)}
             >
               Track
             </button>
diff --git a/frontend/src/pages/dashboard/Customer/Profile/CustomerProfile.tsx b/frontend/src/pages/dashboard/Customer/Profile/CustomerProfile.tsx
new file mode 100644
index 0000000..957af5e
--- /dev/null
+++ b/frontend/src/pages/dashboard/Customer/Profile/CustomerProfile.tsx
@@ -0,0 +1,248 @@
+import React, { useState } from 'react';
+import { User, Phone, MapPin, Mail, Wallet, Save, Loader2, CheckCircle2 } from 'lucide-react';
+import { WalletConnectButton } from '../../../../components/auth/WalletConnectButton/WalletConnectButton';
+
+type Profile = { fullName: string; email: string; phone: string; address: string; };
+type ProfileErrors = { fullName?: string; phone?: string; address?: string; };
+
+const initialProfile: Profile = { 
+  fullName: 'John Doe', 
+  email: 'john.doe@example.com', 
+  phone: '', 
+  address: '' 
+};
+
+const CustomerProfile: React.FC = () => {
+  const [profile, setProfile] = useState<Profile>(initialProfile);
+  const [errors, setErrors] = useState<ProfileErrors>({});
+  const [loading, setLoading] = useState(false);
+  const [successMsg, setSuccessMsg] = useState('');
+  const [walletAddress, setWalletAddress] = useState<string | null>(null);
+
+  const validate = (field: keyof Profile, value: string): string => {
+    if (field === 'fullName' && !value.trim()) return 'Full name is required.';
+    if (field === 'phone' && value && !/^\+?[\d\s-]{10,}$/.test(value)) return 'Enter a valid phone number.';
+    if (field === 'address' && !value.trim()) return 'Delivery address is required.';
+    return '';
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setProfile({ ...profile, [name]: value } as Profile);
+    setErrors({ ...errors, [name]: validate(name as keyof Profile, value) });
+  };
+
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setErrors({ ...errors, [name]: validate(name as keyof Profile, value) });
+  };
+
+  const handleSave = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const newErrors: ProfileErrors = {};
+    (Object.keys(profile) as Array<keyof Profile>).forEach((field) => {
+      if (field !== 'email') {
+        const error = validate(field, profile[field]);
+        if (error) newErrors[field] = error;
+      }
+    });
+    setErrors(newErrors);
+    if (Object.keys(newErrors).length === 0) {
+      setLoading(true);
+      setSuccessMsg('');
+      setTimeout(() => {
+        setLoading(false);
+        setSuccessMsg('Profile saved successfully!');
+        setTimeout(() => setSuccessMsg(''), 3000);
+      }, 1500);
+    }
+  };
+
+  const handleWalletConnect = (address: string) => {
+    setWalletAddress(address);
+  };
+
+  const handleWalletDisconnect = () => {
+    setWalletAddress(null);
+  };
+
+  const truncateAddress = (addr: string) => {
+    if (!addr) return '';
+    return `${addr.slice(0, 8)}...${addr.slice(-6)}`;
+  };
+
+  return (
+    <div className="p-6 md:p-8 max-w-4xl mx-auto">
+      {/* Page Header */}
+      <div className="mb-8">
+        <h1 className="text-2xl md:text-3xl font-semibold text-white mb-2">Customer Profile</h1>
+        <p className="text-[rgba(255,255,255,0.6)] text-sm md:text-base">
+          Manage your personal information and connected wallet.
+        </p>
+      </div>
+
+      <form onSubmit={handleSave} className="flex flex-col gap-6">
+        {/* Profile Information Card */}
+        <div className="bg-[rgba(20,20,20,0.7)] backdrop-blur-md border border-[rgba(255,255,255,0.1)] rounded-2xl p-6 md:p-8">
+          <div className="flex items-center gap-3 mb-6">
+            <div className="w-10 h-10 rounded-xl bg-[rgba(0,212,200,0.1)] flex items-center justify-center">
+              <User size={20} className="text-[#00d4c8]" />
+            </div>
+            <h2 className="text-lg font-semibold text-white">Personal Information</h2>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+            {/* Full Name */}
+            <div className="flex flex-col gap-2">
+              <label className="text-sm font-medium text-[rgba(255,255,255,0.6)] flex items-center gap-2">
+                <User size={14} />
+                Full Name
+              </label>
+              <input
+                name="fullName"
+                type="text"
+                value={profile.fullName}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                placeholder="Enter your full name"
+                className={`w-full bg-[rgba(255,255,255,0.05)] border rounded-xl px-4 py-3.5 text-white text-base transition-all focus:outline-none focus:border-[#00d4c8] focus:bg-[rgba(255,255,255,0.08)] focus:shadow-[0_0_0_4px_rgba(0,212,200,0.1)] ${
+                  errors.fullName ? 'border-[#FF4D4D]' : 'border-[rgba(255,255,255,0.1)]'
+                }`}
+              />
+              {errors.fullName && (
+                <span className="text-[#FF4D4D] text-sm">{errors.fullName}</span>
+              )}
+            </div>
+
+            {/* Email (Read-only) */}
+            <div className="flex flex-col gap-2">
+              <label className="text-sm font-medium text-[rgba(255,255,255,0.6)] flex items-center gap-2">
+                <Mail size={14} />
+                Email Address
+              </label>
+              <input
+                name="email"
+                type="email"
+                value={profile.email}
+                disabled
+                className="w-full bg-[rgba(255,255,255,0.03)] border border-[rgba(255,255,255,0.08)] rounded-xl px-4 py-3.5 text-[rgba(255,255,255,0.5)] text-base cursor-not-allowed"
+              />
+              <span className="text-xs text-[rgba(255,255,255,0.4)]">Email cannot be changed</span>
+            </div>
+
+            {/* Phone Number */}
+            <div className="flex flex-col gap-2">
+              <label className="text-sm font-medium text-[rgba(255,255,255,0.6)] flex items-center gap-2">
+                <Phone size={14} />
+                Phone Number
+              </label>
+              <input
+                name="phone"
+                type="tel"
+                value={profile.phone}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                placeholder="+1 234 567 8900"
+                className={`w-full bg-[rgba(255,255,255,0.05)] border rounded-xl px-4 py-3.5 text-white text-base transition-all focus:outline-none focus:border-[#00d4c8] focus:bg-[rgba(255,255,255,0.08)] focus:shadow-[0_0_0_4px_rgba(0,212,200,0.1)] ${
+                  errors.phone ? 'border-[#FF4D4D]' : 'border-[rgba(255,255,255,0.1)]'
+                }`}
+              />
+              {errors.phone && (
+                <span className="text-[#FF4D4D] text-sm">{errors.phone}</span>
+              )}
+            </div>
+
+            {/* Delivery Address */}
+            <div className="flex flex-col gap-2 md:col-span-2">
+              <label className="text-sm font-medium text-[rgba(255,255,255,0.6)] flex items-center gap-2">
+                <MapPin size={14} />
+                Delivery Address
+              </label>
+              <textarea
+                name="address"
+                value={profile.address}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                placeholder="Enter your delivery address"
+                rows={3}
+                className={`w-full bg-[rgba(255,255,255,0.05)] border rounded-xl px-4 py-3.5 text-white text-base transition-all resize-none focus:outline-none focus:border-[#00d4c8] focus:bg-[rgba(255,255,255,0.08)] focus:shadow-[0_0_0_4px_rgba(0,212,200,0.1)] ${
+                  errors.address ? 'border-[#FF4D4D]' : 'border-[rgba(255,255,255,0.1)]'
+                }`}
+              />
+              {errors.address && (
+                <span className="text-[#FF4D4D] text-sm">{errors.address}</span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Connected Wallet Card */}
+        <div className="bg-[rgba(20,20,20,0.7)] backdrop-blur-md border border-[rgba(255,255,255,0.1)] rounded-2xl p-6 md:p-8">
+          <div className="flex items-center gap-3 mb-6">
+            <div className="w-10 h-10 rounded-xl bg-[rgba(0,212,200,0.1)] flex items-center justify-center">
+              <Wallet size={20} className="text-[#00d4c8]" />
+            </div>
+            <h2 className="text-lg font-semibold text-white">Connected Wallet</h2>
+          </div>
+
+          <div className="flex flex-col gap-4">
+            <p className="text-[rgba(255,255,255,0.6)] text-sm">
+              Connect your Stellar wallet to authorize blockchain transactions and receive payments.
+            </p>
+            
+            <div className="flex flex-col sm:flex-row sm:items-center gap-4">
+              {walletAddress ? (
+                <div className="flex items-center gap-3 px-4 py-3 bg-[rgba(0,212,200,0.1)] border border-[rgba(0,212,200,0.2)] rounded-xl">
+                  <div className="w-2 h-2 rounded-full bg-[#00d4c8] animate-pulse" />
+                  <span className="text-[#00d4c8] font-mono text-sm">
+                    {truncateAddress(walletAddress)}
+                  </span>
+                </div>
+              ) : (
+                <div className="flex items-center gap-3 px-4 py-3 bg-[rgba(255,255,255,0.03)] border border-[rgba(255,255,255,0.08)] rounded-xl">
+                  <div className="w-2 h-2 rounded-full bg-[rgba(255,255,255,0.3)]" />
+                  <span className="text-[rgba(255,255,255,0.5)] text-sm">Not Connected</span>
+                </div>
+              )}
+              
+              <WalletConnectButton 
+                onConnect={handleWalletConnect}
+                onDisconnect={handleWalletDisconnect}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Save Button and Success Message */}
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-2">
+          {successMsg && (
+            <div className="flex items-center gap-2 px-4 py-2 bg-[rgba(0,212,200,0.1)] border border-[rgba(0,212,200,0.2)] rounded-xl text-[#00d4c8] text-sm">
+              <CheckCircle2 size={16} />
+              {successMsg}
+            </div>
+          )}
+          
+          <button
+            type="submit"
+            disabled={loading}
+            className="ml-auto flex items-center justify-center gap-2 px-6 py-3.5 bg-linear-to-r from-[#00d4c8] to-[#00a89e] text-[#010101] font-semibold rounded-xl transition-all hover:opacity-90 hover:-translate-y-0.5 hover:shadow-[0_4px_15px_rgba(0,212,200,0.3)] disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:translate-y-0"
+          >
+            {loading ? (
+              <>
+                <Loader2 size={18} className="animate-spin" />
+                Saving...
+              </>
+            ) : (
+              <>
+                <Save size={18} />
+                Save Changes
+              </>
+            )}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default CustomerProfile;
\ No newline at end of file
diff --git a/frontend/src/pages/dashboard/Customer/ShipmentHistory/ShipmentHistory.tsx b/frontend/src/pages/dashboard/Customer/ShipmentHistory/ShipmentHistory.tsx
new file mode 100644
index 0000000..ca1ad63
--- /dev/null
+++ b/frontend/src/pages/dashboard/Customer/ShipmentHistory/ShipmentHistory.tsx
@@ -0,0 +1,269 @@
+import React, { useState, useMemo } from "react";
+import { useNavigate } from "react-router-dom";
+import { ChevronLeft, ChevronRight, ArrowUpDown, Search, Star, Eye, Package } from "lucide-react";
+
+interface HistoricalShipment {
+  id: string;
+  origin: string;
+  destination: string;
+  deliveredDate: string;
+  rating: number | null; // 1-5 stars, null if not rated
+}
+
+const MOCK_SHIPMENT_HISTORY: HistoricalShipment[] = [
+  { id: "SHP-7001", origin: "Singapore", destination: "Los Angeles", deliveredDate: "2026-02-20", rating: 5 },
+  { id: "SHP-6892", origin: "Dubai", destination: "London", deliveredDate: "2026-02-18", rating: 4 },
+  { id: "SHP-6754", origin: "Shanghai", destination: "Rotterdam", deliveredDate: "2026-02-15", rating: 5 },
+  { id: "SHP-6621", origin: "Mumbai", destination: "New York", deliveredDate: "2026-02-12", rating: 3 },
+  { id: "SHP-6503", origin: "Tokyo", destination: "Sydney", deliveredDate: "2026-02-10", rating: null },
+  { id: "SHP-6412", origin: "Hong Kong", destination: "Vancouver", deliveredDate: "2026-02-08", rating: 5 },
+  { id: "SHP-6298", origin: "Seoul", destination: "Hamburg", deliveredDate: "2026-02-05", rating: 4 },
+  { id: "SHP-6187", origin: "Bangkok", destination: "Miami", deliveredDate: "2026-02-02", rating: 5 },
+  { id: "SHP-6054", origin: "Jakarta", destination: "Seattle", deliveredDate: "2026-01-28", rating: 2 },
+  { id: "SHP-5921", origin: "Manila", destination: "Chicago", deliveredDate: "2026-01-25", rating: 4 },
+  { id: "SHP-5803", origin: "Taipei", destination: "Boston", deliveredDate: "2026-01-22", rating: 5 },
+  { id: "SHP-5692", origin: "Ho Chi Minh", destination: "San Francisco", deliveredDate: "2026-01-18", rating: null },
+];
+
+const formatDate = (dateString: string) =>
+  new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric" }).format(new Date(dateString));
+
+const StarRating: React.FC<{ rating: number | null }> = ({ rating }) => {
+  if (rating === null) {
+    return <span className="text-text-secondary text-xs italic">Not rated</span>;
+  }
+  return (
+    <div className="flex items-center gap-0.5">
+      {[1, 2, 3, 4, 5].map((star) => (
+        <Star
+          key={star}
+          size={14}
+          className={star <= rating ? "fill-[#fbbf24] text-[#fbbf24]" : "fill-transparent text-[rgba(255,255,255,0.2)]"}
+        />
+      ))}
+    </div>
+  );
+};
+
+const ShipmentHistory: React.FC = () => {
+  const navigate = useNavigate();
+  const [isLoading] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 10;
+
+  // Filter by search query (shipment ID)
+  const filteredShipments = useMemo(() => {
+    if (!searchQuery.trim()) return MOCK_SHIPMENT_HISTORY;
+    return MOCK_SHIPMENT_HISTORY.filter((shipment) =>
+      shipment.id.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [searchQuery]);
+
+  // Sort by delivered date
+  const sortedShipments = useMemo(() => {
+    return [...filteredShipments].sort((a, b) => {
+      const diff = new Date(a.deliveredDate).getTime() - new Date(b.deliveredDate).getTime();
+      return sortOrder === "desc" ? -diff : diff;
+    });
+  }, [filteredShipments, sortOrder]);
+
+  // Pagination
+  const totalPages = Math.max(1, Math.ceil(sortedShipments.length / itemsPerPage));
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const paginatedShipments = sortedShipments.slice(startIndex, startIndex + itemsPerPage);
+
+  // Reset to page 1 when search changes
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+    setCurrentPage(1);
+  };
+
+  const toggleSortOrder = () => {
+    setSortOrder((prev) => (prev === "desc" ? "asc" : "desc"));
+    setCurrentPage(1);
+  };
+
+  const tableContainerClass =
+    "bg-[rgba(19,186,186,0.05)] border border-[rgba(98,255,255,0.2)] rounded-2xl overflow-hidden mb-5 shadow-[inset_0_0_20px_0px_rgba(0,128,128,0.3)]";
+  const thClass =
+    "text-left px-6 py-4 text-[11px] font-semibold text-[#62ffff] uppercase border-b border-[rgba(98,255,255,0.2)]";
+  const tdClass = "px-6 py-4 text-sm border-b border-[rgba(98,255,255,0.2)]";
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="p-6 md:p-4">
+        <div className="mb-6">
+          <h1 className="text-2xl font-bold mb-1">Shipment History</h1>
+          <p className="text-text-secondary text-sm">View all your past delivered shipments</p>
+        </div>
+        <div className={`${tableContainerClass} p-6`}>
+          {[...Array(10)].map((_, i) => (
+            <div key={i} className="grid grid-cols-[1fr_1fr_1fr_1fr_1fr_0.5fr] gap-6 mb-4">
+              {[...Array(6)].map((__, j) => (
+                <div key={j} className="h-5 rounded animate-shimmer-teal" />
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // Empty state
+  if (sortedShipments.length === 0 && !searchQuery) {
+    return (
+      <div className="p-6 md:p-4">
+        <div className="mb-6">
+          <h1 className="text-2xl font-bold mb-1">Shipment History</h1>
+          <p className="text-text-secondary text-sm">View all your past delivered shipments</p>
+        </div>
+        <div className={`${tableContainerClass} px-10 py-20 text-center`}>
+          <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[rgba(98,255,255,0.1)] flex items-center justify-center">
+            <Package size={32} className="text-[#62ffff]" />
+          </div>
+          <h2 className="text-xl font-bold mb-2 text-[#62ffff]">No Shipment History</h2>
+          <p className="text-text-secondary text-sm max-w-md mx-auto">
+            You don&apos;t have any completed shipments yet. Once your shipments are delivered, they will appear here.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 md:p-4">
+      {/* Header */}
+      <div className="flex justify-between items-start mb-6 lg:flex-col lg:gap-4">
+        <div>
+          <h1 className="text-2xl font-bold mb-1 sm:text-xl">Shipment History</h1>
+          <p className="text-text-secondary text-sm">View all your past delivered shipments</p>
+        </div>
+
+        {/* Search */}
+        <div className="relative lg:w-full">
+          <Search
+            size={16}
+            className="absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary pointer-events-none"
+          />
+          <input
+            type="text"
+            placeholder="Search by Shipment ID..."
+            value={searchQuery}
+            onChange={handleSearchChange}
+            className="bg-[rgba(19,186,186,0.1)] border border-[rgba(98,255,255,0.2)] text-text-primary pl-10 pr-4 py-2 rounded-lg text-sm font-medium outline-none w-64 lg:w-full placeholder:text-text-secondary hover:border-[#62ffff] focus:border-[#62ffff] focus:bg-[rgba(19,186,186,0.15)] transition-colors"
+          />
+        </div>
+      </div>
+
+      {/* No results for search */}
+      {sortedShipments.length === 0 && searchQuery && (
+        <div className={`${tableContainerClass} px-10 py-12 text-center`}>
+          <div className="w-12 h-12 mx-auto mb-4 rounded-full bg-[rgba(98,255,255,0.1)] flex items-center justify-center">
+            <Search size={24} className="text-[#62ffff]" />
+          </div>
+          <h2 className="text-lg font-bold mb-2 text-[#62ffff]">No Results Found</h2>
+          <p className="text-text-secondary text-sm">
+            No shipments match &quot;{searchQuery}&quot;. Try a different search term.
+          </p>
+        </div>
+      )}
+
+      {/* Table */}
+      {sortedShipments.length > 0 && (
+        <>
+          <div className={`${tableContainerClass} md:overflow-x-auto`}>
+            <table className="w-full border-collapse md:min-w-175">
+              <thead className="bg-[rgba(19,186,186,0.1)]">
+                <tr>
+                  <th className={thClass}>Shipment ID</th>
+                  <th className={thClass}>Origin</th>
+                  <th className={thClass}>Destination</th>
+                  <th
+                    className={`${thClass} cursor-pointer select-none`}
+                    onClick={toggleSortOrder}
+                  >
+                    <span className="inline-flex items-center gap-2">
+                      Delivered Date <ArrowUpDown size={14} />
+                    </span>
+                  </th>
+                  <th className={thClass}>Rating</th>
+                  <th className={thClass}>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {paginatedShipments.map((shipment) => (
+                  <tr
+                    key={shipment.id}
+                    className="hover:bg-[rgba(98,255,255,0.05)] transition-colors"
+                  >
+                    <td className={`${tdClass} font-semibold text-[#62ffff]`}>{shipment.id}</td>
+                    <td className={`${tdClass} text-text-primary`}>{shipment.origin}</td>
+                    <td className={`${tdClass} text-text-primary`}>{shipment.destination}</td>
+                    <td className={`${tdClass} text-text-secondary`}>
+                      {formatDate(shipment.deliveredDate)}
+                    </td>
+                    <td className={tdClass}>
+                      <StarRating rating={shipment.rating} />
+                    </td>
+                    <td className={tdClass}>
+                      <button
+                        type="button"
+                        onClick={() => navigate(`/dashboard/shipments/${shipment.id}`)}
+                        className="bg-transparent border border-[rgba(98,255,255,0.3)] text-[#62ffff] px-3 py-1.5 rounded-md text-xs font-semibold cursor-pointer inline-flex items-center gap-1.5 transition-all hover:bg-[rgba(98,255,255,0.1)] hover:border-[#62ffff]"
+                      >
+                        <Eye size={14} />
+                        View Detail
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Pagination */}
+          <div className="flex justify-between items-center px-6 py-4 bg-[rgba(19,186,186,0.05)] border border-[rgba(98,255,255,0.2)] rounded-xl shadow-[inset_0_0_15px_0px_rgba(0,128,128,0.2)] md:flex-col md:gap-4">
+            <div className="text-sm text-text-secondary">
+              Showing {startIndex + 1}–{Math.min(startIndex + itemsPerPage, sortedShipments.length)} of{" "}
+              {sortedShipments.length}
+            </div>
+            <div className="flex gap-2 md:w-full md:justify-center">
+              <button
+                onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
+                disabled={currentPage === 1}
+                className="bg-transparent border border-[rgba(98,255,255,0.2)] text-text-primary px-3 py-2 rounded-md text-sm font-medium cursor-pointer flex items-center justify-center min-w-9 transition-all hover:not-disabled:bg-[rgba(98,255,255,0.1)] hover:not-disabled:border-[#62ffff] hover:not-disabled:text-[#62ffff] disabled:opacity-30 disabled:cursor-not-allowed"
+              >
+                <ChevronLeft size={16} />
+              </button>
+              {[...Array(totalPages)].map((_, i) => (
+                <button
+                  key={i + 1}
+                  onClick={() => setCurrentPage(i + 1)}
+                  className={`border px-3 py-2 rounded-md text-sm font-semibold cursor-pointer min-w-9 transition-all ${
+                    currentPage === i + 1
+                      ? "bg-[#62ffff] border-[#62ffff] text-black"
+                      : "bg-transparent border-[rgba(98,255,255,0.2)] text-text-primary hover:bg-[rgba(98,255,255,0.1)] hover:border-[#62ffff] hover:text-[#62ffff]"
+                  }`}
+                >
+                  {i + 1}
+                </button>
+              ))}
+              <button
+                onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
+                disabled={currentPage === totalPages}
+                className="bg-transparent border border-[rgba(98,255,255,0.2)] text-text-primary px-3 py-2 rounded-md text-sm font-medium cursor-pointer flex items-center justify-center min-w-9 transition-all hover:not-disabled:bg-[rgba(98,255,255,0.1)] hover:not-disabled:border-[#62ffff] hover:not-disabled:text-[#62ffff] disabled:opacity-30 disabled:cursor-not-allowed"
+              >
+                <ChevronRight size={16} />
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ShipmentHistory;
\ No newline at end of file
diff --git a/frontend/src/pages/dashboard/Dashboard.css b/frontend/src/pages/dashboard/Dashboard.css
index 79b91aa..aeac375 100644
--- a/frontend/src/pages/dashboard/Dashboard.css
+++ b/frontend/src/pages/dashboard/Dashboard.css
@@ -1,7 +1,7 @@
 /* Dashboard Content */
 .dashboard-home {
-  display: grid;
-  grid-template-columns: 1fr 340px;
+  display: flex;
+  flex-direction: column;
   gap: 24px;
 }
 
@@ -10,7 +10,6 @@
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 24px;
-  grid-column: 1 / -1;
 }
 
 .header-title h1 {
@@ -28,17 +27,19 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  background-color: #121620;
-  border: 1px solid var(--border-color);
-  padding: 8px 14px;
-  border-radius: 8px;
+  background-color: transparent;
+  color: var(--text-primary);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
 }
 
+.date-selector svg {
+  color: var(--text-secondary);
+}
+
 /* Stats Cards */
-.stats-grid {
+.stats-grid-full {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
@@ -46,23 +47,14 @@
 }
 
 .stat-card {
-  background-color: var(--bg-card);
+  background-color: transparent;
   border: 1px solid var(--border-color);
   border-radius: 16px;
   padding: 20px;
   position: relative;
   overflow: hidden;
-}
-
-.stat-card::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 100px;
-  height: 100px;
-  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 70%);
-  pointer-events: none;
+  display: flex;
+  flex-direction: column;
 }
 
 .stat-header {
@@ -72,15 +64,13 @@
   margin-bottom: 20px;
 }
 
-.stat-icon {
+.stat-icon-wrapper {
   width: 40px;
   height: 40px;
   border-radius: 10px;
-  background-color: #1a1f2e;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--accent-blue);
 }
 
 .stat-trend {
@@ -100,7 +90,7 @@
 }
 
 .trend-neutral {
-  color: var(--accent-blue);
+  color: var(--text-secondary);
 }
 
 .stat-label {
@@ -109,16 +99,25 @@
   font-weight: 600;
   text-transform: uppercase;
   margin-bottom: 8px;
+  letter-spacing: 0.5px;
 }
 
 .stat-value {
   font-size: 32px;
   font-weight: 700;
+  line-height: 1;
+}
+
+/* Content Layout Grid */
+.dashboard-content-grid {
+  display: grid;
+  grid-template-columns: 1fr 340px;
+  gap: 24px;
 }
 
 /* Shipments Section */
 .content-section {
-  background-color: var(--bg-card);
+  background-color: transparent;
   border: 1px solid var(--border-color);
   border-radius: 16px;
   overflow: hidden;
@@ -140,10 +139,6 @@
   gap: 10px;
 }
 
-.section-title h2 svg {
-  color: var(--accent-blue);
-}
-
 .view-all {
   color: var(--accent-blue);
   font-size: 12px;
@@ -161,14 +156,14 @@
   padding: 16px 24px;
   font-size: 11px;
   font-weight: 600;
-  color: var(--text-secondary);
+  color: #2dd4bf; /* Cyan color matching the photo */
   text-transform: uppercase;
   border-bottom: 1px solid var(--border-color);
 }
 
 .shipments-table td {
   padding: 16px 24px;
-  font-size: 14px;
+  font-size: 13px;
   border-bottom: 1px solid var(--border-color);
 }
 
@@ -177,7 +172,8 @@
 }
 
 .shipment-id-cell {
-  font-weight: 600;
+  font-weight: 700;
+  color: #fff;
 }
 
 .location-cell {
@@ -187,6 +183,7 @@
 
 .location-label {
   font-size: 12px;
+  color: #e2e8f0;
 }
 
 .location-sublabel {
@@ -195,7 +192,7 @@
 }
 
 .status-badge {
-  padding: 4px 10px;
+  padding: 4px 12px;
   border-radius: 99px;
   font-size: 11px;
   font-weight: 600;
@@ -203,42 +200,37 @@
 }
 
 .status-in-transit {
-  background-color: rgba(59, 130, 246, 0.1);
+  background-color: #1e3a5f;
   color: #60a5fa;
 }
 
 .status-delivered {
-  background-color: rgba(16, 185, 129, 0.1);
+  background-color: #103b2e;
   color: #34d399;
 }
 
 .status-pending {
-  background-color: rgba(245, 158, 11, 0.1);
+  background-color: #4a2d12;
   color: #fbbf24;
 }
 
 .hash-cell {
   font-family: 'Courier New', Courier, monospace;
   font-size: 12px;
-  color: var(--text-secondary);
   display: flex;
   align-items: center;
-  gap: 8px;
-}
-
-.hash-cell svg {
-  color: var(--accent-green);
 }
 
 .verify-button {
   background-color: transparent;
   border: 1px solid var(--border-color);
   color: var(--accent-blue);
-  padding: 6px 12px;
-  border-radius: 6px;
-  font-size: 12px;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 13px;
   font-weight: 600;
   cursor: pointer;
+  background-color: rgba(255, 255, 255, 0.05);
 }
 
 /* Right Rail */
@@ -249,26 +241,26 @@
 }
 
 .rail-card {
-  background-color: var(--bg-card);
+  background-color: transparent;
   border: 1px solid var(--border-color);
   border-radius: 16px;
-  padding: 20px;
+  padding: 24px;
 }
 
 .rail-card h3 {
-  font-size: 14px;
-  font-weight: 700;
+  font-size: 18px;
+  font-weight: 500;
   margin-bottom: 20px;
 }
 
 .quick-actions-list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
 }
 
 .action-button {
-  background-color: #1a1f2e;
+  background-color: transparent;
   border: 1px solid var(--border-color);
   border-radius: 12px;
   padding: 16px;
@@ -277,45 +269,49 @@
   justify-content: space-between;
   cursor: pointer;
   transition: all 0.2s;
+  color: #fff;
 }
 
 .action-button:hover {
-  background-color: #242b3d;
-  border-color: #3b82f6;
-}
-
-.action-button.primary {
-  background-color: var(--accent-blue);
-  border-color: var(--accent-blue);
-  color: white;
-}
-
-.action-button.primary:hover {
-  background-color: #2563eb;
+  background-color: rgba(255,255,255,0.05);
 }
 
 .action-label {
   font-size: 14px;
-  font-weight: 600;
+  line-height: 1.4;
+  text-align: left;
+  font-weight: 400;
 }
 
-.action-icon {
-  width: 28px;
-  height: 28px;
+.action-icon-circle {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 1px solid;
 }
 
-.distribution-header {
+.border-cyan { border-color: #00f0ff; }
+.text-cyan { color: #00f0ff; }
+
+.border-white { border-color: #cfcfcf; }
+.text-white { color: #fff; }
+
+.network-card h3 {
+  font-size: 14px;
+  letter-spacing: 1.5px;
+  color: #9ca3af;
   margin-bottom: 16px;
 }
 
 .map-placeholder {
   width: 100%;
-  aspect-ratio: 16/10;
-  background-color: #0d1118;
-  border-radius: 8px;
+  aspect-ratio: 16/9;
+  background-color: #7b8394;
+  background: transparent;
+  border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -324,85 +320,42 @@
   overflow: hidden;
 }
 
-.map-placeholder img {
+.world-map-svg {
   width: 100%;
-  height: 100%;
-  object-fit: cover;
-  opacity: 0.5;
+  height: auto;
+  opacity: 0.8;
+  background-color: #cfcfcf;
+  border-radius: 12px;
 }
 
 .distribution-stats {
   display: flex;
-  justify-content: space-between;
-}
-
-.dist-stat-item {
-  display: flex;
-  flex-direction: column;
-}
-
-.dist-stat-label {
-  font-size: 10px;
+  gap: 12px;
+  font-size: 12px;
   color: var(--text-secondary);
-  text-transform: uppercase;
-  margin-bottom: 4px;
-}
-
-.dist-stat-value {
-  font-size: 14px;
-  font-weight: 600;
+  align-items: center;
 }
 
 /* Responsive Dashboard Home */
 @media (max-width: 1280px) {
-  .dashboard-home {
+  .dashboard-content-grid {
     grid-template-columns: 1fr;
   }
-
-  .right-rail {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-  }
 }
 
 @media (max-width: 1024px) {
-  .stats-grid {
+  .stats-grid-full {
     grid-template-columns: repeat(2, 1fr);
   }
-
-  .dashboard-header {
-    flex-direction: column;
-    gap: 16px;
-  }
 }
 
 @media (max-width: 768px) {
-  .right-rail {
+  .stats-grid-full {
     grid-template-columns: 1fr;
   }
-
   .shipments-table {
     display: block;
     overflow-x: auto;
     white-space: nowrap;
   }
-
-  .stat-value {
-    font-size: 24px;
-  }
-}
-
-@media (max-width: 480px) {
-  .stats-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .header-title h1 {
-    font-size: 20px;
-  }
-
-  .date-selector {
-    width: 100%;
-    justify-content: center;
-  }
 }
\ No newline at end of file
diff --git a/frontend/src/pages/dashboard/Dashboard.tsx b/frontend/src/pages/dashboard/Dashboard.tsx
index 53a8121..e02abfc 100644
--- a/frontend/src/pages/dashboard/Dashboard.tsx
+++ b/frontend/src/pages/dashboard/Dashboard.tsx
@@ -1,223 +1 @@
-import React from 'react';
-import {
-  LayoutGrid,
-  ChevronDown,
-  Box,
-  ShieldCheck,
-  Banknote,
-  Plus,
-  Link as LinkIcon,
-  Cpu,
-  Clock,
-  ArrowUpRight,
-  ArrowDownRight,
-} from 'lucide-react';
-import './Dashboard.css';
-
-const Dashboard: React.FC = () => {
-  const stats = [
-    {
-      label: 'Total Shipments',
-      value: '1,248',
-      trend: '+4.2%',
-      trendType: 'up',
-      icon: <Box size={20} />,
-    },
-    {
-      label: 'In Transit',
-      value: '342',
-      trend: 'Active',
-      trendType: 'neutral',
-      icon: <Cpu size={20} />,
-    },
-    {
-      label: 'Delivered',
-      value: '856',
-      trend: '98% Goal',
-      trendType: 'up',
-      icon: <ShieldCheck size={20} />,
-    },
-    {
-      label: 'Pending Payment',
-      value: '$42.5k',
-      trend: '-1.2%',
-      trendType: 'down',
-      icon: <Banknote size={20} />,
-    },
-  ];
-
-  const shipments = [
-    {
-      id: '#SHP-9021',
-      origin: 'Singapore',
-      destination: 'Rotterdam',
-      status: 'In Transit',
-      hash: '0x4a9b...2f81',
-    },
-    {
-      id: '#SHP-8842',
-      origin: 'Hong Kong',
-      destination: 'Los Angeles',
-      status: 'Delivered',
-      hash: '0x9c1a...9e55',
-    },
-    {
-      id: '#SHP-8711',
-      origin: 'Mumbai',
-      destination: 'Dubai',
-      status: 'Pending Approval',
-      hash: 'Awaiting Mining...',
-    },
-  ];
-
-  return (
-    <div className="dashboard-home">
-      <div className="dashboard-header">
-        <div className="header-title">
-          <h1>Logistics Overview</h1>
-          <p>Real-time status of your global supply chain on the blockchain.</p>
-        </div>
-        <div className="date-selector">
-          <Clock size={16} />
-          <span>Last 30 Days</span>
-          <ChevronDown size={14} />
-        </div>
-      </div>
-
-      {/* Left Column */}
-      <div className="dashboard-left-col">
-        <div className="stats-grid">
-          {stats.map((stat) => (
-            <div key={stat.label} className="stat-card">
-              <div className="stat-header">
-                <div className="stat-icon">{stat.icon}</div>
-                <div className={`stat-trend trend-${stat.trendType}`}>
-                  {stat.trendType === 'up' && <ArrowUpRight size={14} />}
-                  {stat.trendType === 'down' && <ArrowDownRight size={14} />}
-                  {stat.trend}
-                </div>
-              </div>
-              <div className="stat-label">{stat.label}</div>
-              <div className="stat-value">{stat.value}</div>
-            </div>
-          ))}
-        </div>
-
-        <div className="content-section">
-          <div className="section-title">
-            <h2>
-              <LayoutGrid size={18} />
-              Recent Shipments
-            </h2>
-            <span className="view-all">View All</span>
-          </div>
-          <table className="shipments-table">
-            <thead>
-              <tr>
-                <th>ID</th>
-                <th>Origin / Destination</th>
-                <th>Status</th>
-                <th>Blockchain Hash</th>
-                <th>Action</th>
-              </tr>
-            </thead>
-            <tbody>
-              {shipments.map((shipment) => (
-                <tr key={shipment.id}>
-                  <td className="shipment-id-cell">{shipment.id}</td>
-                  <td>
-                    <div className="location-cell">
-                      <span className="location-label">From: {shipment.origin}</span>
-                      <span className="location-sublabel">To: {shipment.destination}</span>
-                    </div>
-                  </td>
-                  <td>
-                    <span
-                      className={`status-badge status-${shipment.status
-                        .toLowerCase()
-                        .replace(' ', '-')}`}
-                    >
-                      {shipment.status}
-                    </span>
-                  </td>
-                  <td className="hash-cell">
-                    <LinkIcon size={12} />
-                    {shipment.hash}
-                  </td>
-                  <td>
-                    <button className="verify-button">Verify</button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      {/* Right Column (Rail) */}
-      <div className="right-rail">
-        <div className="rail-card">
-          <h3>Quick Actions</h3>
-          <div className="quick-actions-list">
-            <button className="action-button primary">
-              <span className="action-label">Create New Shipment</span>
-              <div className="action-icon">
-                <Plus size={20} />
-              </div>
-            </button>
-            <button className="action-button">
-              <span className="action-label">Track Token Asset</span>
-              <div className="action-icon">
-                <LayoutGrid size={20} />
-              </div>
-            </button>
-            <button className="action-button">
-              <span className="action-label">Generate Settlement</span>
-              <div className="action-icon">
-                <Banknote size={20} />
-              </div>
-            </button>
-          </div>
-        </div>
-
-        <div className="rail-card">
-          <div className="distribution-header">
-            <h3>Network Distribution</h3>
-          </div>
-          <div className="map-placeholder">
-            <svg
-              width="100%"
-              height="100%"
-              viewBox="0 0 100 60"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M10 30 Q 25 10, 40 30 T 70 30 T 90 20"
-                stroke="#1e2433"
-                strokeWidth="0.5"
-                fill="none"
-              />
-              <circle cx="20" cy="25" r="1.5" fill="#3b82f6" />
-              <circle cx="45" cy="35" r="1.5" fill="#10b981" />
-              <circle cx="75" cy="20" r="1.5" fill="#3b82f6" />
-              <circle cx="85" cy="40" r="1.5" fill="#3b82f6" />
-            </svg>
-          </div>
-          <div className="distribution-stats">
-            <div className="dist-stat-item">
-              <span className="dist-stat-label">Active Nodes</span>
-              <span className="dist-stat-value">142</span>
-            </div>
-            <div className="dist-stat-item">
-              <span className="dist-stat-label">TPS</span>
-              <span className="dist-stat-value">2,140</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Dashboard;
+
diff --git a/frontend/src/services/api/client.ts b/frontend/src/services/api/client.ts
new file mode 100644
index 0000000..85df995
--- /dev/null
+++ b/frontend/src/services/api/client.ts
@@ -0,0 +1,20 @@
+import axios from "axios";
+import { setupAuthInterceptor } from "./interceptors/authInterceptor";
+import { setupErrorInterceptor } from "./interceptors/errorInterceptor";
+
+const baseURL = import.meta.env.VITE_API_BASE_URL;
+
+if (!baseURL) {
+    throw new Error("VITE_API_BASE_URL is not defined");
+}
+
+export const apiClient = axios.create({
+    baseURL,
+    headers: {
+        "Content-Type": "application/json",
+    },
+    withCredentials: true,
+});
+
+setupAuthInterceptor(apiClient);
+setupErrorInterceptor(apiClient);
diff --git a/frontend/src/services/api/endpoints/auth.ts b/frontend/src/services/api/endpoints/auth.ts
new file mode 100644
index 0000000..575c584
--- /dev/null
+++ b/frontend/src/services/api/endpoints/auth.ts
@@ -0,0 +1,32 @@
+import { apiClient } from "../client";
+
+export interface LoginRequest {
+    email: string;
+    password: string;
+}
+
+export interface AuthResponse {
+    access_token: string;
+    user: {
+        id: string;
+        email: string;
+        name: string;
+    };
+}
+
+export const authApi = {
+    login: async (data: LoginRequest): Promise<AuthResponse> => {
+        const res = await apiClient.post<AuthResponse>("/auth/login", data);
+        return res.data;
+    },
+
+    register: async (data: LoginRequest): Promise<AuthResponse> => {
+        const res = await apiClient.post<AuthResponse>("/auth/register", data);
+        return res.data;
+    },
+
+    logout: async (): Promise<void> => {
+        await apiClient.post("/auth/logout");
+        localStorage.removeItem("access_token");
+    },
+};
diff --git a/frontend/src/services/api/endpoints/shipments.ts b/frontend/src/services/api/endpoints/shipments.ts
new file mode 100644
index 0000000..491574b
--- /dev/null
+++ b/frontend/src/services/api/endpoints/shipments.ts
@@ -0,0 +1,31 @@
+import { apiClient } from "../client";
+
+export interface Shipment {
+    id: string;
+    status: "pending" | "in_transit" | "delivered";
+    origin: string;
+    destination: string;
+    createdAt: string;
+}
+
+export interface CreateShipmentRequest {
+    origin: string;
+    destination: string;
+}
+
+export const shipmentApi = {
+    getAll: async (): Promise<Shipment[]> => {
+        const res = await apiClient.get<Shipment[]>("/shipments");
+        return res.data;
+    },
+
+    getById: async (id: string): Promise<Shipment> => {
+        const res = await apiClient.get<Shipment>(`/shipments/${id}`);
+        return res.data;
+    },
+
+    create: async (data: CreateShipmentRequest): Promise<Shipment> => {
+        const res = await apiClient.post<Shipment>("/shipments", data);
+        return res.data;
+    },
+};
diff --git a/frontend/src/services/api/index.ts b/frontend/src/services/api/index.ts
new file mode 100644
index 0000000..d98920a
--- /dev/null
+++ b/frontend/src/services/api/index.ts
@@ -0,0 +1,3 @@
+export * from "./client";
+export * from "./endpoints/auth";
+export * from "./endpoints/shipments";
diff --git a/frontend/src/services/api/interceptors/authInterceptor.ts b/frontend/src/services/api/interceptors/authInterceptor.ts
new file mode 100644
index 0000000..0b10d3e
--- /dev/null
+++ b/frontend/src/services/api/interceptors/authInterceptor.ts
@@ -0,0 +1,16 @@
+import { AxiosInstance, InternalAxiosRequestConfig } from "axios";
+
+export const setupAuthInterceptor = (client: AxiosInstance) => {
+    client.interceptors.request.use(
+        (config: InternalAxiosRequestConfig) => {
+            const token = localStorage.getItem("access_token");
+
+            if (token && config.headers) {
+                config.headers.Authorization = `Bearer ${token}`;
+            }
+
+            return config;
+        },
+        (error) => Promise.reject(error),
+    );
+};
diff --git a/frontend/src/services/api/interceptors/errorInterceptor.ts b/frontend/src/services/api/interceptors/errorInterceptor.ts
new file mode 100644
index 0000000..e0d5600
--- /dev/null
+++ b/frontend/src/services/api/interceptors/errorInterceptor.ts
@@ -0,0 +1,31 @@
+import { AxiosInstance, AxiosError } from "axios";
+
+export const setupErrorInterceptor = (client: AxiosInstance) => {
+    client.interceptors.response.use(
+        (response) => response,
+        (error: AxiosError) => {
+            const status = error.response?.status;
+
+            switch (status) {
+                case 401:
+                    console.error("Unauthorized - logging out");
+                    localStorage.removeItem("access_token");
+                    window.location.href = "/login";
+                    break;
+
+                case 403:
+                    console.error("Forbidden - insufficient permissions");
+                    break;
+
+                case 500:
+                    console.error("Server error - try again later");
+                    break;
+
+                default:
+                    console.error("API Error:", error.message);
+            }
+
+            return Promise.reject(error);
+        },
+    );
+};
diff --git a/frontend/src/test/setup.ts b/frontend/src/test/setup.ts
index c44951a..17cdac2 100644
--- a/frontend/src/test/setup.ts
+++ b/frontend/src/test/setup.ts
@@ -1 +1,7 @@
 import '@testing-library/jest-dom'
+import { cleanup } from '@testing-library/react'
+import { afterEach } from 'vitest'
+
+afterEach(() => {
+  cleanup()
+})
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..798c396
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,59 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: '#00D9FF',
+          dark: '#008080',
+          light: '#60C9CD',
+        },
+        accent: {
+          blue: '#3B82F6',
+          green: '#10B981',
+          red: '#EF4444',
+          teal: '#00C2CB',
+        },
+        background: {
+          DEFAULT: '#050505',
+          secondary: '#0A0A0A',
+          card: '#0F1419',
+          elevated: '#121620',
+        },
+        border: {
+          DEFAULT: '#1E2433',
+          light: 'rgba(0, 217, 255, 0.1)',
+        },
+        text: {
+          primary: 'rgba(255, 255, 255, 0.87)',
+          secondary: '#9CA3AF',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'Avenir', 'Helvetica', 'Arial', 'sans-serif'],
+        display: ['Bricolage Grotesque', 'sans-serif'],
+        albert: ['Albert Sans', 'sans-serif'],
+      },
+      backgroundImage: {
+        'gradient-primary': 'linear-gradient(135deg, #00D9FF 0%, #0099CC 100%)',
+        'gradient-card': 'linear-gradient(0deg, rgba(0, 128, 128, 0.22) 62.5%, rgba(1, 1, 1, 0.22) 100%)',
+        'gradient-dark': 'linear-gradient(135deg, #0A1628 0%, #0F1F3D 100%)',
+      },
+      boxShadow: {
+        'glow-blue': '-3px -2px 12px rgba(0, 194, 203, 0.18), -1px -2px 12px rgba(0, 194, 203, 0.29)',
+        'glow-blue-hover': '-1px -2px 16px rgba(0, 194, 203, 0.4), -3px -2px 16px rgba(0, 194, 203, 0.25)',
+        'inset-teal': 'inset 2px -2px 4px rgb(2, 43, 45), inset -2px 2px 4px rgba(13, 133, 137), inset -2px -2px 5px rgb(2, 43, 45)',
+        'inset-teal-hover': 'inset 2px -2px 4px rgba(15, 139, 144, 0.25), inset -2px 2px 4px rgba(15, 139, 144, 0.25), inset -2px -2px 5px rgba(15, 139, 144, 0.9)',
+      },
+      backdropBlur: {
+        'xs': '6px',
+      },
+    },
+  },
+  plugins: [],
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 990b6cd..4dc1bdf 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -13,9 +13,12 @@
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
 
     /* Vitest globals (describe / it / expect) */
-    "types": ["vitest/globals"],
+    "types": ["node", "react", "vitest"],
 
     /* Strict type checking — required for Soroban SDK interop */
     "strict": true,
diff --git a/frontend/tsconfig.node.tsbuildinfo b/frontend/tsconfig.node.tsbuildinfo
index 3374774..9799074 100644
--- a/frontend/tsconfig.node.tsbuildinfo
+++ b/frontend/tsconfig.node.tsbuildinfo
@@ -1 +1 @@
-{"fileNames":["./node_modules/typescript/lib/lib.es5.d.ts","./node_modules/typescript/lib/lib.es2015.d.ts","./node_modules/typescript/lib/lib.es2016.d.ts","./node_modules/typescript/lib/lib.es2017.d.ts","./node_modules/typescript/lib/lib.es2018.d.ts","./node_modules/typescript/lib/lib.es2019.d.ts","./node_modules/typescript/lib/lib.es2020.d.ts","./node_modules/typescript/lib/lib.es2021.d.ts","./node_modules/typescript/lib/lib.es2022.d.ts","./node_modules/typescript/lib/lib.es2023.d.ts","./node_modules/typescript/lib/lib.es2015.core.d.ts","./node_modules/typescript/lib/lib.es2015.collection.d.ts","./node_modules/typescript/lib/lib.es2015.generator.d.ts","./node_modules/typescript/lib/lib.es2015.iterable.d.ts","./node_modules/typescript/lib/lib.es2015.promise.d.ts","./node_modules/typescript/lib/lib.es2015.proxy.d.ts","./node_modules/typescript/lib/lib.es2015.reflect.d.ts","./node_modules/typescript/lib/lib.es2015.symbol.d.ts","./node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","./node_modules/typescript/lib/lib.es2016.array.include.d.ts","./node_modules/typescript/lib/lib.es2016.intl.d.ts","./node_modules/typescript/lib/lib.es2017.arraybuffer.d.ts","./node_modules/typescript/lib/lib.es2017.date.d.ts","./node_modules/typescript/lib/lib.es2017.object.d.ts","./node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","./node_modules/typescript/lib/lib.es2017.string.d.ts","./node_modules/typescript/lib/lib.es2017.intl.d.ts","./node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","./node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","./node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","./node_modules/typescript/lib/lib.es2018.intl.d.ts","./node_modules/typescript/lib/lib.es2018.promise.d.ts","./node_modules/typescript/lib/lib.es2018.regexp.d.ts","./node_modules/typescript/lib/lib.es2019.array.d.ts","./node_modules/typescript/lib/lib.es2019.object.d.ts","./node_modules/typescript/lib/lib.es2019.string.d.ts","./node_modules/typescript/lib/lib.es2019.symbol.d.ts","./node_modules/typescript/lib/lib.es2019.intl.d.ts","./node_modules/typescript/lib/lib.es2020.bigint.d.ts","./node_modules/typescript/lib/lib.es2020.date.d.ts","./node_modules/typescript/lib/lib.es2020.promise.d.ts","./node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","./node_modules/typescript/lib/lib.es2020.string.d.ts","./node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","./node_modules/typescript/lib/lib.es2020.intl.d.ts","./node_modules/typescript/lib/lib.es2020.number.d.ts","./node_modules/typescript/lib/lib.es2021.promise.d.ts","./node_modules/typescript/lib/lib.es2021.string.d.ts","./node_modules/typescript/lib/lib.es2021.weakref.d.ts","./node_modules/typescript/lib/lib.es2021.intl.d.ts","./node_modules/typescript/lib/lib.es2022.array.d.ts","./node_modules/typescript/lib/lib.es2022.error.d.ts","./node_modules/typescript/lib/lib.es2022.intl.d.ts","./node_modules/typescript/lib/lib.es2022.object.d.ts","./node_modules/typescript/lib/lib.es2022.string.d.ts","./node_modules/typescript/lib/lib.es2022.regexp.d.ts","./node_modules/typescript/lib/lib.es2023.array.d.ts","./node_modules/typescript/lib/lib.es2023.collection.d.ts","./node_modules/typescript/lib/lib.es2023.intl.d.ts","./node_modules/typescript/lib/lib.decorators.d.ts","./node_modules/typescript/lib/lib.decorators.legacy.d.ts","./node_modules/@vitest/pretty-format/dist/index.d.ts","./node_modules/@vitest/utils/dist/display.d.ts","./node_modules/@vitest/utils/dist/types.d.ts","./node_modules/@vitest/utils/dist/helpers.d.ts","./node_modules/@vitest/utils/dist/timers.d.ts","./node_modules/@vitest/utils/dist/index.d.ts","./node_modules/@vitest/runner/dist/tasks.d-c7uxawj9.d.ts","./node_modules/@vitest/utils/dist/types.d-bcelap-c.d.ts","./node_modules/@vitest/utils/dist/diff.d.ts","./node_modules/@vitest/runner/dist/types.d.ts","./node_modules/@vitest/runner/dist/index.d.ts","./node_modules/vitest/dist/chunks/traces.d.402v_yfi.d.ts","./node_modules/vite/types/hmrpayload.d.ts","./node_modules/vite/dist/node/chunks/modulerunnertransport.d.ts","./node_modules/vite/types/customevent.d.ts","./node_modules/vite/types/hot.d.ts","./node_modules/vite/dist/node/module-runner.d.ts","./node_modules/@vitest/snapshot/dist/environment.d-dhdq1csl.d.ts","./node_modules/@vitest/snapshot/dist/rawsnapshot.d-lfsmjfud.d.ts","./node_modules/@vitest/snapshot/dist/index.d.ts","./node_modules/vitest/dist/chunks/config.d.cy95hicx.d.ts","./node_modules/vitest/dist/chunks/environment.d.crsxczp1.d.ts","./node_modules/vitest/dist/chunks/rpc.d.rh3apgef.d.ts","./node_modules/vitest/dist/chunks/worker.d.dyxm8del.d.ts","./node_modules/vitest/dist/chunks/browser.d.chkacdzh.d.ts","./node_modules/@vitest/spy/dist/index.d.ts","./node_modules/tinyrainbow/dist/index.d.ts","./node_modules/@standard-schema/spec/dist/index.d.ts","./node_modules/@types/deep-eql/index.d.ts","./node_modules/assertion-error/index.d.ts","./node_modules/@types/chai/index.d.ts","./node_modules/@vitest/expect/dist/index.d.ts","./node_modules/@vitest/runner/dist/utils.d.ts","./node_modules/tinybench/dist/index.d.ts","./node_modules/vitest/dist/chunks/benchmark.d.daahlpsq.d.ts","./node_modules/vitest/dist/chunks/global.d.b15mdlcr.d.ts","./node_modules/vitest/dist/chunks/suite.d.bjwk38hb.d.ts","./node_modules/vitest/dist/chunks/evaluatedmodules.d.bxj5omdx.d.ts","./node_modules/expect-type/dist/utils.d.ts","./node_modules/expect-type/dist/overloads.d.ts","./node_modules/expect-type/dist/branding.d.ts","./node_modules/expect-type/dist/messages.d.ts","./node_modules/expect-type/dist/index.d.ts","./node_modules/vitest/dist/index.d.ts","./node_modules/@types/node/compatibility/disposable.d.ts","./node_modules/@types/node/compatibility/indexable.d.ts","./node_modules/@types/node/compatibility/iterators.d.ts","./node_modules/@types/node/compatibility/index.d.ts","./node_modules/@types/node/globals.typedarray.d.ts","./node_modules/@types/node/buffer.buffer.d.ts","./node_modules/@types/node/globals.d.ts","./node_modules/@types/node/web-globals/abortcontroller.d.ts","./node_modules/@types/node/web-globals/domexception.d.ts","./node_modules/@types/node/web-globals/events.d.ts","./node_modules/buffer/index.d.ts","./node_modules/undici-types/header.d.ts","./node_modules/undici-types/readable.d.ts","./node_modules/undici-types/file.d.ts","./node_modules/undici-types/fetch.d.ts","./node_modules/undici-types/formdata.d.ts","./node_modules/undici-types/connector.d.ts","./node_modules/undici-types/client.d.ts","./node_modules/undici-types/errors.d.ts","./node_modules/undici-types/dispatcher.d.ts","./node_modules/undici-types/global-dispatcher.d.ts","./node_modules/undici-types/global-origin.d.ts","./node_modules/undici-types/pool-stats.d.ts","./node_modules/undici-types/pool.d.ts","./node_modules/undici-types/handlers.d.ts","./node_modules/undici-types/balanced-pool.d.ts","./node_modules/undici-types/agent.d.ts","./node_modules/undici-types/mock-interceptor.d.ts","./node_modules/undici-types/mock-agent.d.ts","./node_modules/undici-types/mock-client.d.ts","./node_modules/undici-types/mock-pool.d.ts","./node_modules/undici-types/mock-errors.d.ts","./node_modules/undici-types/proxy-agent.d.ts","./node_modules/undici-types/env-http-proxy-agent.d.ts","./node_modules/undici-types/retry-handler.d.ts","./node_modules/undici-types/retry-agent.d.ts","./node_modules/undici-types/api.d.ts","./node_modules/undici-types/interceptors.d.ts","./node_modules/undici-types/util.d.ts","./node_modules/undici-types/cookies.d.ts","./node_modules/undici-types/patch.d.ts","./node_modules/undici-types/websocket.d.ts","./node_modules/undici-types/eventsource.d.ts","./node_modules/undici-types/filereader.d.ts","./node_modules/undici-types/diagnostics-channel.d.ts","./node_modules/undici-types/content-type.d.ts","./node_modules/undici-types/cache.d.ts","./node_modules/undici-types/index.d.ts","./node_modules/@types/node/web-globals/fetch.d.ts","./node_modules/@types/node/web-globals/navigator.d.ts","./node_modules/@types/node/web-globals/storage.d.ts","./node_modules/@types/node/assert.d.ts","./node_modules/@types/node/assert/strict.d.ts","./node_modules/@types/node/async_hooks.d.ts","./node_modules/@types/node/buffer.d.ts","./node_modules/@types/node/child_process.d.ts","./node_modules/@types/node/cluster.d.ts","./node_modules/@types/node/console.d.ts","./node_modules/@types/node/constants.d.ts","./node_modules/@types/node/crypto.d.ts","./node_modules/@types/node/dgram.d.ts","./node_modules/@types/node/diagnostics_channel.d.ts","./node_modules/@types/node/dns.d.ts","./node_modules/@types/node/dns/promises.d.ts","./node_modules/@types/node/domain.d.ts","./node_modules/@types/node/events.d.ts","./node_modules/@types/node/fs.d.ts","./node_modules/@types/node/fs/promises.d.ts","./node_modules/@types/node/http.d.ts","./node_modules/@types/node/http2.d.ts","./node_modules/@types/node/https.d.ts","./node_modules/@types/node/inspector.d.ts","./node_modules/@types/node/inspector.generated.d.ts","./node_modules/@types/node/module.d.ts","./node_modules/@types/node/net.d.ts","./node_modules/@types/node/os.d.ts","./node_modules/@types/node/path.d.ts","./node_modules/@types/node/perf_hooks.d.ts","./node_modules/@types/node/process.d.ts","./node_modules/@types/node/punycode.d.ts","./node_modules/@types/node/querystring.d.ts","./node_modules/@types/node/readline.d.ts","./node_modules/@types/node/readline/promises.d.ts","./node_modules/@types/node/repl.d.ts","./node_modules/@types/node/sea.d.ts","./node_modules/@types/node/sqlite.d.ts","./node_modules/@types/node/stream.d.ts","./node_modules/@types/node/stream/promises.d.ts","./node_modules/@types/node/stream/consumers.d.ts","./node_modules/@types/node/stream/web.d.ts","./node_modules/@types/node/string_decoder.d.ts","./node_modules/@types/node/test.d.ts","./node_modules/@types/node/timers.d.ts","./node_modules/@types/node/timers/promises.d.ts","./node_modules/@types/node/tls.d.ts","./node_modules/@types/node/trace_events.d.ts","./node_modules/@types/node/tty.d.ts","./node_modules/@types/node/url.d.ts","./node_modules/@types/node/util.d.ts","./node_modules/@types/node/v8.d.ts","./node_modules/@types/node/vm.d.ts","./node_modules/@types/node/wasi.d.ts","./node_modules/@types/node/worker_threads.d.ts","./node_modules/@types/node/zlib.d.ts","./node_modules/@types/node/index.d.ts","./node_modules/@types/estree/index.d.ts","./node_modules/rollup/dist/rollup.d.ts","./node_modules/rollup/dist/parseast.d.ts","./node_modules/esbuild/lib/main.d.ts","./node_modules/vite/types/internal/terseroptions.d.ts","./node_modules/source-map-js/source-map.d.ts","./node_modules/postcss/lib/previous-map.d.ts","./node_modules/postcss/lib/input.d.ts","./node_modules/postcss/lib/css-syntax-error.d.ts","./node_modules/postcss/lib/declaration.d.ts","./node_modules/postcss/lib/root.d.ts","./node_modules/postcss/lib/warning.d.ts","./node_modules/postcss/lib/lazy-result.d.ts","./node_modules/postcss/lib/no-work-result.d.ts","./node_modules/postcss/lib/processor.d.ts","./node_modules/postcss/lib/result.d.ts","./node_modules/postcss/lib/document.d.ts","./node_modules/postcss/lib/rule.d.ts","./node_modules/postcss/lib/node.d.ts","./node_modules/postcss/lib/comment.d.ts","./node_modules/postcss/lib/container.d.ts","./node_modules/postcss/lib/at-rule.d.ts","./node_modules/postcss/lib/list.d.ts","./node_modules/postcss/lib/postcss.d.ts","./node_modules/postcss/lib/postcss.d.mts","./node_modules/vite/types/internal/csspreprocessoroptions.d.ts","./node_modules/vite/types/internal/lightningcssoptions.d.ts","./node_modules/vite/types/importglob.d.ts","./node_modules/vite/types/metadata.d.ts","./node_modules/vite/dist/node/index.d.ts","./node_modules/@vitest/mocker/dist/types.d-b8cckmht.d.ts","./node_modules/@vitest/mocker/dist/index.d-c-slyzi-.d.ts","./node_modules/@vitest/mocker/dist/index.d.ts","./node_modules/@vitest/utils/dist/source-map.d.ts","./node_modules/vitest/dist/chunks/coverage.d.bztk59wp.d.ts","./node_modules/@vitest/utils/dist/serialize.d.ts","./node_modules/@vitest/utils/dist/error.d.ts","./node_modules/vitest/dist/browser.d.ts","./node_modules/vitest/browser/context.d.ts","./node_modules/vitest/optional-types.d.ts","./node_modules/@vitest/snapshot/dist/manager.d.ts","./node_modules/vitest/dist/chunks/reporters.d.cwxni2jg.d.ts","./node_modules/vitest/dist/chunks/plugin.d.ctqpeehp.d.ts","./node_modules/vitest/dist/config.d.ts","./node_modules/vitest/config.d.ts","./node_modules/@babel/types/lib/index.d.ts","./node_modules/@types/babel__generator/index.d.ts","./node_modules/@babel/parser/typings/babel-parser.d.ts","./node_modules/@types/babel__template/index.d.ts","./node_modules/@types/babel__traverse/index.d.ts","./node_modules/@types/babel__core/index.d.ts","./node_modules/@vitejs/plugin-react/dist/index.d.ts","./vite.config.ts","./node_modules/@types/aria-query/index.d.ts","./node_modules/@types/d3-array/index.d.ts","./node_modules/@types/d3-color/index.d.ts","./node_modules/@types/d3-ease/index.d.ts","./node_modules/@types/d3-interpolate/index.d.ts","./node_modules/@types/d3-path/index.d.ts","./node_modules/@types/d3-time/index.d.ts","./node_modules/@types/d3-scale/index.d.ts","./node_modules/@types/d3-shape/index.d.ts","./node_modules/@types/d3-timer/index.d.ts","./node_modules/@types/json-schema/index.d.ts","./node_modules/@types/react/global.d.ts","./node_modules/csstype/index.d.ts","./node_modules/@types/react/index.d.ts","./node_modules/@types/react-dom/index.d.ts","./node_modules/@types/use-sync-external-store/index.d.ts"],"fileIdsList":[[111,160,177,178,256],[111,160,177,178],[111,160,177,178,256,257,258,259,260],[111,160,177,178,256,258],[90,91,111,160,177,178],[111,160,177,178,266],[111,160,177,178,270],[111,160,177,178,269],[111,157,158,160,177,178],[111,159,160,177,178],[160,177,178],[111,160,165,177,178,195],[111,160,161,166,171,177,178,180,192,203],[111,160,161,162,171,177,178,180],[106,107,108,111,160,177,178],[111,160,163,177,178,204],[111,160,164,165,172,177,178,181],[111,160,165,177,178,192,200],[111,160,166,168,171,177,178,180],[111,159,160,167,177,178],[111,160,168,169,177,178],[111,160,170,171,177,178],[111,159,160,171,177,178],[111,160,171,172,173,177,178,192,203],[111,160,171,172,173,177,178,187,192,195],[111,153,160,168,171,174,177,178,180,192,203],[111,160,171,172,174,175,177,178,180,192,200,203],[111,160,174,176,177,178,192,200,203],[109,110,111,112,113,114,115,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209],[111,160,171,177,178],[111,160,177,178,179,203],[111,160,168,171,177,178,180,192],[111,160,177,178,181],[111,160,177,178,182],[111,159,160,177,178,183],[111,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209],[111,160,177,178,185],[111,160,177,178,186],[111,160,171,177,178,187,188],[111,160,177,178,187,189,204,206],[111,160,172,177,178],[111,160,171,177,178,192,193,195],[111,160,177,178,194,195],[111,160,177,178,192,193],[111,160,177,178,195],[111,160,177,178,196],[111,157,160,177,178,192,197,203],[111,160,171,177,178,198,199],[111,160,177,178,198,199],[111,160,165,177,178,180,192,200],[111,160,177,178,201],[111,160,177,178,180,202],[111,160,174,177,178,186,203],[111,160,165,177,178,204],[111,160,177,178,192,205],[111,160,177,178,179,206],[111,160,177,178,207],[111,153,160,177,178],[111,153,160,171,173,177,178,183,192,195,203,205,206,208],[111,160,177,178,192,209],[111,160,177,178,277],[111,160,177,178,275,276],[111,160,177,178,240,254,261],[63,67,70,72,87,88,89,92,97,111,160,177,178],[111,160,177,178,241],[111,160,177,178,241,242],[67,68,70,71,111,160,177,178],[67,111,160,177,178],[67,68,70,111,160,177,178],[67,68,111,160,177,178],[62,79,80,111,160,177,178],[62,79,111,160,177,178],[62,69,111,160,177,178],[62,111,160,177,178],[62,69,111,160,177,178,246],[64,111,160,177,178],[62,63,64,65,66,111,160,177,178],[100,101,111,160,177,178],[100,101,102,103,111,160,177,178],[100,102,111,160,177,178],[100,111,160,177,178],[111,160,177,178,231],[111,160,177,178,229,231],[111,160,177,178,220,228,229,230,232,234],[111,160,177,178,218],[111,160,177,178,221,226,231,234],[111,160,177,178,217,234],[111,160,177,178,221,222,225,226,227,234],[111,160,177,178,221,222,223,225,226,234],[111,160,177,178,218,219,220,221,222,226,227,228,230,231,232,234],[111,160,177,178,234],[111,160,177,178,216,218,219,220,221,222,223,225,226,227,228,229,230,231,232,233],[111,160,177,178,216,234],[111,160,177,178,221,223,224,226,227,234],[111,160,177,178,225,234],[111,160,177,178,226,227,231,234],[111,160,177,178,219,229],[111,160,177,178,212,239,240],[111,160,177,178,211,212],[111,125,129,160,177,178,203],[111,125,160,177,178,192,203],[111,120,160,177,178],[111,122,125,160,177,178,200,203],[111,160,177,178,180,200],[111,160,177,178,210],[111,120,160,177,178,210],[111,122,125,160,177,178,180,203],[111,117,118,121,124,160,171,177,178,192,203],[111,125,132,160,177,178],[111,117,123,160,177,178],[111,125,146,147,160,177,178],[111,121,125,160,177,178,195,203,210],[111,146,160,177,178,210],[111,119,120,160,177,178,210],[111,125,160,177,178],[111,119,120,121,122,123,124,125,126,127,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,147,148,149,150,151,152,160,177,178],[111,125,140,160,177,178],[111,125,132,133,160,177,178],[111,123,125,133,134,160,177,178],[111,124,160,177,178],[111,117,120,125,160,177,178],[111,125,129,133,134,160,177,178],[111,129,160,177,178],[111,123,125,128,160,177,178,203],[111,117,122,125,132,160,177,178],[111,160,177,178,192],[111,120,125,146,160,177,178,208,210],[74,111,160,177,178],[74,75,76,78,111,160,171,172,174,175,176,177,178,180,192,200,203,209,210,212,213,214,215,235,236,237,238,239,240],[74,75,76,77,111,160,177,178],[76,111,160,177,178],[111,160,177,178,212,240],[111,160,177,178,248],[93,97,111,160,177,178,254],[62,63,65,66,67,70,72,73,81,82,87,97,111,160,177,178,244,245,247],[72,94,95,97,111,160,177,178],[72,73,85,97,111,160,177,178],[62,70,72,81,97,111,160,177,178],[78,111,160,177,178],[62,72,81,84,93,96,97,111,160,177,178],[111,160,177,178,240,252,254],[62,67,70,72,73,81,82,84,85,86,93,96,97,111,160,163,172,177,178,192,240,243,244,245,249,250,251,254],[72,73,78,81,97,111,160,177,178],[72,94,95,96,97,111,160,177,178],[72,78,82,83,84,97,111,160,177,178],[62,67,70,72,73,78,81,82,83,84,85,86,93,94,95,96,97,111,160,163,172,177,178,192,240,243,244,245,249,250,251,252,253,254],[62,67,70,72,73,78,81,82,83,84,85,86,87,93,94,95,96,97,98,99,104,111,160,177,178],[105,111,160,177,178,182,203,210,255,262]],"fileInfos":[{"version":"c430d44666289dae81f30fa7b2edebf186ecc91a2d4c71266ea6ae76388792e1","affectsGlobalScope":true,"impliedFormat":1},{"version":"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4","impliedFormat":1},{"version":"3facaf05f0c5fc569c5649dd359892c98a85557e3e0c847964caeb67076f4d75","impliedFormat":1},{"version":"e44bb8bbac7f10ecc786703fe0a6a4b952189f908707980ba8f3c8975a760962","impliedFormat":1},{"version":"5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8","impliedFormat":1},{"version":"68d73b4a11549f9c0b7d352d10e91e5dca8faa3322bfb77b661839c42b1ddec7","impliedFormat":1},{"version":"5efce4fc3c29ea84e8928f97adec086e3dc876365e0982cc8479a07954a3efd4","impliedFormat":1},{"version":"feecb1be483ed332fad555aff858affd90a48ab19ba7272ee084704eb7167569","impliedFormat":1},{"version":"ee7bad0c15b58988daa84371e0b89d313b762ab83cb5b31b8a2d1162e8eb41c2","impliedFormat":1},{"version":"27bdc30a0e32783366a5abeda841bc22757c1797de8681bbe81fbc735eeb1c10","impliedFormat":1},{"version":"c57796738e7f83dbc4b8e65132f11a377649c00dd3eee333f672b8f0a6bea671","affectsGlobalScope":true,"impliedFormat":1},{"version":"dc2df20b1bcdc8c2d34af4926e2c3ab15ffe1160a63e58b7e09833f616efff44","affectsGlobalScope":true,"impliedFormat":1},{"version":"515d0b7b9bea2e31ea4ec968e9edd2c39d3eebf4a2d5cbd04e88639819ae3b71","affectsGlobalScope":true,"impliedFormat":1},{"version":"0559b1f683ac7505ae451f9a96ce4c3c92bdc71411651ca6ddb0e88baaaad6a3","affectsGlobalScope":true,"impliedFormat":1},{"version":"0dc1e7ceda9b8b9b455c3a2d67b0412feab00bd2f66656cd8850e8831b08b537","affectsGlobalScope":true,"impliedFormat":1},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true,"impliedFormat":1},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true,"impliedFormat":1},{"version":"4ff2a353abf8a80ee399af572debb8faab2d33ad38c4b4474cff7f26e7653b8d","affectsGlobalScope":true,"impliedFormat":1},{"version":"fb0f136d372979348d59b3f5020b4cdb81b5504192b1cacff5d1fbba29378aa1","affectsGlobalScope":true,"impliedFormat":1},{"version":"d15bea3d62cbbdb9797079416b8ac375ae99162a7fba5de2c6c505446486ac0a","affectsGlobalScope":true,"impliedFormat":1},{"version":"68d18b664c9d32a7336a70235958b8997ebc1c3b8505f4f1ae2b7e7753b87618","affectsGlobalScope":true,"impliedFormat":1},{"version":"eb3d66c8327153d8fa7dd03f9c58d351107fe824c79e9b56b462935176cdf12a","affectsGlobalScope":true,"impliedFormat":1},{"version":"38f0219c9e23c915ef9790ab1d680440d95419ad264816fa15009a8851e79119","affectsGlobalScope":true,"impliedFormat":1},{"version":"69ab18c3b76cd9b1be3d188eaf8bba06112ebbe2f47f6c322b5105a6fbc45a2e","affectsGlobalScope":true,"impliedFormat":1},{"version":"a680117f487a4d2f30ea46f1b4b7f58bef1480456e18ba53ee85c2746eeca012","affectsGlobalScope":true,"impliedFormat":1},{"version":"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893","affectsGlobalScope":true,"impliedFormat":1},{"version":"4de680d5bb41c17f7f68e0419412ca23c98d5749dcaaea1896172f06435891fc","affectsGlobalScope":true,"impliedFormat":1},{"version":"954296b30da6d508a104a3a0b5d96b76495c709785c1d11610908e63481ee667","affectsGlobalScope":true,"impliedFormat":1},{"version":"ac9538681b19688c8eae65811b329d3744af679e0bdfa5d842d0e32524c73e1c","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a969edff4bd52585473d24995c5ef223f6652d6ef46193309b3921d65dd4376","affectsGlobalScope":true,"impliedFormat":1},{"version":"9e9fbd7030c440b33d021da145d3232984c8bb7916f277e8ffd3dc2e3eae2bdb","affectsGlobalScope":true,"impliedFormat":1},{"version":"811ec78f7fefcabbda4bfa93b3eb67d9ae166ef95f9bff989d964061cbf81a0c","affectsGlobalScope":true,"impliedFormat":1},{"version":"717937616a17072082152a2ef351cb51f98802fb4b2fdabd32399843875974ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"d7e7d9b7b50e5f22c915b525acc5a49a7a6584cf8f62d0569e557c5cfc4b2ac2","affectsGlobalScope":true,"impliedFormat":1},{"version":"71c37f4c9543f31dfced6c7840e068c5a5aacb7b89111a4364b1d5276b852557","affectsGlobalScope":true,"impliedFormat":1},{"version":"576711e016cf4f1804676043e6a0a5414252560eb57de9faceee34d79798c850","affectsGlobalScope":true,"impliedFormat":1},{"version":"89c1b1281ba7b8a96efc676b11b264de7a8374c5ea1e6617f11880a13fc56dc6","affectsGlobalScope":true,"impliedFormat":1},{"version":"74f7fa2d027d5b33eb0471c8e82a6c87216223181ec31247c357a3e8e2fddc5b","affectsGlobalScope":true,"impliedFormat":1},{"version":"d6d7ae4d1f1f3772e2a3cde568ed08991a8ae34a080ff1151af28b7f798e22ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"063600664504610fe3e99b717a1223f8b1900087fab0b4cad1496a114744f8df","affectsGlobalScope":true,"impliedFormat":1},{"version":"934019d7e3c81950f9a8426d093458b65d5aff2c7c1511233c0fd5b941e608ab","affectsGlobalScope":true,"impliedFormat":1},{"version":"52ada8e0b6e0482b728070b7639ee42e83a9b1c22d205992756fe020fd9f4a47","affectsGlobalScope":true,"impliedFormat":1},{"version":"3bdefe1bfd4d6dee0e26f928f93ccc128f1b64d5d501ff4a8cf3c6371200e5e6","affectsGlobalScope":true,"impliedFormat":1},{"version":"59fb2c069260b4ba00b5643b907ef5d5341b167e7d1dbf58dfd895658bda2867","affectsGlobalScope":true,"impliedFormat":1},{"version":"639e512c0dfc3fad96a84caad71b8834d66329a1f28dc95e3946c9b58176c73a","affectsGlobalScope":true,"impliedFormat":1},{"version":"368af93f74c9c932edd84c58883e736c9e3d53cec1fe24c0b0ff451f529ceab1","affectsGlobalScope":true,"impliedFormat":1},{"version":"af3dd424cf267428f30ccfc376f47a2c0114546b55c44d8c0f1d57d841e28d74","affectsGlobalScope":true,"impliedFormat":1},{"version":"995c005ab91a498455ea8dfb63aa9f83fa2ea793c3d8aa344be4a1678d06d399","affectsGlobalScope":true,"impliedFormat":1},{"version":"959d36cddf5e7d572a65045b876f2956c973a586da58e5d26cde519184fd9b8a","affectsGlobalScope":true,"impliedFormat":1},{"version":"965f36eae237dd74e6cca203a43e9ca801ce38824ead814728a2807b1910117d","affectsGlobalScope":true,"impliedFormat":1},{"version":"3925a6c820dcb1a06506c90b1577db1fdbf7705d65b62b99dce4be75c637e26b","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a3d63ef2b853447ec4f749d3f368ce642264246e02911fcb1590d8c161b8005","affectsGlobalScope":true,"impliedFormat":1},{"version":"8cdf8847677ac7d20486e54dd3fcf09eda95812ac8ace44b4418da1bbbab6eb8","affectsGlobalScope":true,"impliedFormat":1},{"version":"8444af78980e3b20b49324f4a16ba35024fef3ee069a0eb67616ea6ca821c47a","affectsGlobalScope":true,"impliedFormat":1},{"version":"3287d9d085fbd618c3971944b65b4be57859f5415f495b33a6adc994edd2f004","affectsGlobalScope":true,"impliedFormat":1},{"version":"b4b67b1a91182421f5df999988c690f14d813b9850b40acd06ed44691f6727ad","affectsGlobalScope":true,"impliedFormat":1},{"version":"df83c2a6c73228b625b0beb6669c7ee2a09c914637e2d35170723ad49c0f5cd4","affectsGlobalScope":true,"impliedFormat":1},{"version":"436aaf437562f276ec2ddbee2f2cdedac7664c1e4c1d2c36839ddd582eeb3d0a","affectsGlobalScope":true,"impliedFormat":1},{"version":"8e3c06ea092138bf9fa5e874a1fdbc9d54805d074bee1de31b99a11e2fec239d","affectsGlobalScope":true,"impliedFormat":1},{"version":"8e7f8264d0fb4c5339605a15daadb037bf238c10b654bb3eee14208f860a32ea","affectsGlobalScope":true,"impliedFormat":1},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true,"impliedFormat":1},{"version":"acfb723d81eda39156251aed414c553294870bf53062429ebfcfba8a68cb4753","impliedFormat":99},{"version":"fa69a90381c2f85889722a911a732a5ee3596dc3acecda8a9aa2fa89b9615d8d","impliedFormat":99},{"version":"b5ce343886d23392be9c8280e9f24a87f1d7d3667f6672c2fe4aa61fa4ece7d4","impliedFormat":99},{"version":"57e9e1b0911874c62d743af24b5d56032759846533641d550b12a45ff404bf07","impliedFormat":99},{"version":"b0857bb28fd5236ace84280f79a25093f919fd0eff13e47cc26ea03de60a7294","impliedFormat":99},{"version":"5e43e0824f10cd8c48e7a8c5c673638488925a12c31f0f9e0957965c290eb14c","impliedFormat":99},{"version":"854cd3a3375ffc4e7a92b2168dd065d7ff2614b43341038a65cca865a44c00c5","impliedFormat":99},{"version":"ef13c73d6157a32933c612d476c1524dd674cf5b9a88571d7d6a0d147544d529","impliedFormat":99},{"version":"3b0a56d056d81a011e484b9c05d5e430711aaecd561a788bad1d0498aad782c7","impliedFormat":99},{"version":"2f863ee9b873a65d9c3338ea7aaddbdb41a9673f062f06983d712bd01c25dc6b","impliedFormat":99},{"version":"67aa128c2bc170b93794f191feffc65a4b33e878db211cfcb7658c4b72f7a1f5","impliedFormat":99},{"version":"ac3d263474022e9a14c43f588f485d549641d839b159ecc971978b90f34bdf6b","impliedFormat":99},{"version":"a7ca8df4f2931bef2aa4118078584d84a0b16539598eaadf7dce9104dfaa381c","impliedFormat":1},{"version":"10073cdcf56982064c5337787cc59b79586131e1b28c106ede5bff362f912b70","impliedFormat":99},{"version":"72950913f4900b680f44d8cab6dd1ea0311698fc1eefb014eb9cdfc37ac4a734","impliedFormat":1},{"version":"36977c14a7f7bfc8c0426ae4343875689949fb699f3f84ecbe5b300ebf9a2c55","impliedFormat":1},{"version":"ff0a83c9a0489a627e264ffcb63f2264b935b20a502afa3a018848139e3d8575","impliedFormat":99},{"version":"324ac98294dab54fbd580c7d0e707d94506d7b2c3d5efe981a8495f02cf9ad96","impliedFormat":99},{"version":"9ec72eb493ff209b470467e24264116b6a8616484bca438091433a545dfba17e","impliedFormat":99},{"version":"c35b8117804c639c53c87f2c23e0c786df61d552e513bd5179f5b88e29964838","impliedFormat":99},{"version":"c609331c6ed4ad4af54e101088c6a4dcb48f8db7b0b97e44a6efeb130f4331bd","impliedFormat":99},{"version":"bcbd3becd08b4515225880abea0dbfbbf0d1181ce3af8f18f72f61edbe4febfb","impliedFormat":99},{"version":"67acaedb46832d66c15f1b09fb7b6a0b7f41bdbf8eaa586ec70459b3e8896eb9","impliedFormat":99},{"version":"4535ab977ee871e956eb7bebe2db5de79f5d5ec7dfbbf1d35e08f4a2d6630dac","impliedFormat":99},{"version":"b79b5ed99f26ffb2f8ae4bdcc4b34a9542197dc3fa96cfb425c2a81e618cff28","impliedFormat":99},{"version":"31fd7c12f6e27154efb52a916b872509a771880f3b20f2dfd045785c13aa813f","impliedFormat":99},{"version":"b481de4ab5379bd481ca12fc0b255cdc47341629a22c240a89cdb4e209522be2","impliedFormat":99},{"version":"bdd14f07b4eca0b4b5203b85b8dbc4d084c749fa590bee5ea613e1641dcd3b29","impliedFormat":99},{"version":"427fe2004642504828c1476d0af4270e6ad4db6de78c0b5da3e4c5ca95052a99","impliedFormat":1},{"version":"2eeffcee5c1661ddca53353929558037b8cf305ffb86a803512982f99bcab50d","impliedFormat":99},{"version":"9afb4cb864d297e4092a79ee2871b5d3143ea14153f62ef0bb04ede25f432030","affectsGlobalScope":true,"impliedFormat":99},{"version":"4e258d11c899cb9ff36b4b5c53df59cf4a5ccae9a9931529686e77431e0a3518","affectsGlobalScope":true,"impliedFormat":99},{"version":"a5ae67a67f786ffe92d34b55467a40fb50fb0093e92388cadce6168fa42690fd","impliedFormat":99},{"version":"69bf2422313487956e4dacf049f30cb91b34968912058d244cb19e4baa24da97","impliedFormat":99},{"version":"6987dfb4b0c4e02112cc4e548e7a77b3d9ddfeffa8c8a2db13ceac361a4567d9","impliedFormat":99},{"version":"a534e61c2f06a147d97aebad720db97dffd8066b7142212e46bcbcdcb640b81a","impliedFormat":99},{"version":"ddf569d04470a4d629090d43a16735185001f3fcf0ae036ead99f2ceab62be48","impliedFormat":99},{"version":"b413fbc6658fe2774f8bf9a15cf4c53e586fc38a2d5256b3b9647da242c14389","impliedFormat":99},{"version":"c30a41267fc04c6518b17e55dcb2b810f267af4314b0b6d7df1c33a76ce1b330","impliedFormat":1},{"version":"72422d0bac4076912385d0c10911b82e4694fc106e2d70added091f88f0824ba","impliedFormat":1},{"version":"da251b82c25bee1d93f9fd80c5a61d945da4f708ca21285541d7aff83ecb8200","impliedFormat":1},{"version":"64db14db2bf37ac089766fdb3c7e1160fabc10e9929bc2deeede7237e4419fc8","impliedFormat":1},{"version":"98b94085c9f78eba36d3d2314affe973e8994f99864b8708122750788825c771","impliedFormat":1},{"version":"53c448183c7177c83d3eb0b40824cf8952721a6584cf22052adc24f778986732","impliedFormat":99},{"version":"6c7176368037af28cb72f2392010fa1cef295d6d6744bca8cfb54985f3a18c3e","affectsGlobalScope":true,"impliedFormat":1},{"version":"ab41ef1f2cdafb8df48be20cd969d875602483859dc194e9c97c8a576892c052","affectsGlobalScope":true,"impliedFormat":1},{"version":"437e20f2ba32abaeb7985e0afe0002de1917bc74e949ba585e49feba65da6ca1","affectsGlobalScope":true,"impliedFormat":1},{"version":"21d819c173c0cf7cc3ce57c3276e77fd9a8a01d35a06ad87158781515c9a438a","impliedFormat":1},{"version":"98cffbf06d6bab333473c70a893770dbe990783904002c4f1a960447b4b53dca","affectsGlobalScope":true,"impliedFormat":1},{"version":"3af97acf03cc97de58a3a4bc91f8f616408099bc4233f6d0852e72a8ffb91ac9","affectsGlobalScope":true,"impliedFormat":1},{"version":"808069bba06b6768b62fd22429b53362e7af342da4a236ed2d2e1c89fcca3b4a","affectsGlobalScope":true,"impliedFormat":1},{"version":"1db0b7dca579049ca4193d034d835f6bfe73096c73663e5ef9a0b5779939f3d0","affectsGlobalScope":true,"impliedFormat":1},{"version":"9798340ffb0d067d69b1ae5b32faa17ab31b82466a3fc00d8f2f2df0c8554aaa","affectsGlobalScope":true,"impliedFormat":1},{"version":"f26b11d8d8e4b8028f1c7d618b22274c892e4b0ef5b3678a8ccbad85419aef43","affectsGlobalScope":true,"impliedFormat":1},{"version":"4967529644e391115ca5592184d4b63980569adf60ee685f968fd59ab1557188","impliedFormat":1},{"version":"5929864ce17fba74232584d90cb721a89b7ad277220627cc97054ba15a98ea8f","impliedFormat":1},{"version":"763fe0f42b3d79b440a9b6e51e9ba3f3f91352469c1e4b3b67bfa4ff6352f3f4","impliedFormat":1},{"version":"25c8056edf4314820382a5fdb4bb7816999acdcb929c8f75e3f39473b87e85bc","impliedFormat":1},{"version":"c464d66b20788266e5353b48dc4aa6bc0dc4a707276df1e7152ab0c9ae21fad8","impliedFormat":1},{"version":"78d0d27c130d35c60b5e5566c9f1e5be77caf39804636bc1a40133919a949f21","impliedFormat":1},{"version":"c6fd2c5a395f2432786c9cb8deb870b9b0e8ff7e22c029954fabdd692bff6195","impliedFormat":1},{"version":"1d6e127068ea8e104a912e42fc0a110e2aa5a66a356a917a163e8cf9a65e4a75","impliedFormat":1},{"version":"5ded6427296cdf3b9542de4471d2aa8d3983671d4cac0f4bf9c637208d1ced43","impliedFormat":1},{"version":"7f182617db458e98fc18dfb272d40aa2fff3a353c44a89b2c0ccb3937709bfb5","impliedFormat":1},{"version":"cadc8aced301244057c4e7e73fbcae534b0f5b12a37b150d80e5a45aa4bebcbd","impliedFormat":1},{"version":"385aab901643aa54e1c36f5ef3107913b10d1b5bb8cbcd933d4263b80a0d7f20","impliedFormat":1},{"version":"9670d44354bab9d9982eca21945686b5c24a3f893db73c0dae0fd74217a4c219","impliedFormat":1},{"version":"0b8a9268adaf4da35e7fa830c8981cfa22adbbe5b3f6f5ab91f6658899e657a7","impliedFormat":1},{"version":"11396ed8a44c02ab9798b7dca436009f866e8dae3c9c25e8c1fbc396880bf1bb","impliedFormat":1},{"version":"ba7bc87d01492633cb5a0e5da8a4a42a1c86270e7b3d2dea5d156828a84e4882","impliedFormat":1},{"version":"4893a895ea92c85345017a04ed427cbd6a1710453338df26881a6019432febdd","impliedFormat":1},{"version":"c21dc52e277bcfc75fac0436ccb75c204f9e1b3fa5e12729670910639f27343e","impliedFormat":1},{"version":"13f6f39e12b1518c6650bbb220c8985999020fe0f21d818e28f512b7771d00f9","impliedFormat":1},{"version":"9b5369969f6e7175740bf51223112ff209f94ba43ecd3bb09eefff9fd675624a","impliedFormat":1},{"version":"4fe9e626e7164748e8769bbf74b538e09607f07ed17c2f20af8d680ee49fc1da","impliedFormat":1},{"version":"24515859bc0b836719105bb6cc3d68255042a9f02a6022b3187948b204946bd2","impliedFormat":1},{"version":"ea0148f897b45a76544ae179784c95af1bd6721b8610af9ffa467a518a086a43","impliedFormat":1},{"version":"24c6a117721e606c9984335f71711877293a9651e44f59f3d21c1ea0856f9cc9","impliedFormat":1},{"version":"dd3273ead9fbde62a72949c97dbec2247ea08e0c6952e701a483d74ef92d6a17","impliedFormat":1},{"version":"405822be75ad3e4d162e07439bac80c6bcc6dbae1929e179cf467ec0b9ee4e2e","impliedFormat":1},{"version":"0db18c6e78ea846316c012478888f33c11ffadab9efd1cc8bcc12daded7a60b6","impliedFormat":1},{"version":"e61be3f894b41b7baa1fbd6a66893f2579bfad01d208b4ff61daef21493ef0a8","impliedFormat":1},{"version":"bd0532fd6556073727d28da0edfd1736417a3f9f394877b6d5ef6ad88fba1d1a","impliedFormat":1},{"version":"89167d696a849fce5ca508032aabfe901c0868f833a8625d5a9c6e861ef935d2","impliedFormat":1},{"version":"615ba88d0128ed16bf83ef8ccbb6aff05c3ee2db1cc0f89ab50a4939bfc1943f","impliedFormat":1},{"version":"a4d551dbf8746780194d550c88f26cf937caf8d56f102969a110cfaed4b06656","impliedFormat":1},{"version":"8bd86b8e8f6a6aa6c49b71e14c4ffe1211a0e97c80f08d2c8cc98838006e4b88","impliedFormat":1},{"version":"317e63deeb21ac07f3992f5b50cdca8338f10acd4fbb7257ebf56735bf52ab00","impliedFormat":1},{"version":"4732aec92b20fb28c5fe9ad99521fb59974289ed1e45aecb282616202184064f","impliedFormat":1},{"version":"2e85db9e6fd73cfa3d7f28e0ab6b55417ea18931423bd47b409a96e4a169e8e6","impliedFormat":1},{"version":"c46e079fe54c76f95c67fb89081b3e399da2c7d109e7dca8e4b58d83e332e605","impliedFormat":1},{"version":"bf67d53d168abc1298888693338cb82854bdb2e69ef83f8a0092093c2d562107","impliedFormat":1},{"version":"b52476feb4a0cbcb25e5931b930fc73cb6643fb1a5060bf8a3dda0eeae5b4b68","affectsGlobalScope":true,"impliedFormat":1},{"version":"f9501cc13ce624c72b61f12b3963e84fad210fbdf0ffbc4590e08460a3f04eba","affectsGlobalScope":true,"impliedFormat":1},{"version":"e7721c4f69f93c91360c26a0a84ee885997d748237ef78ef665b153e622b36c1","affectsGlobalScope":true,"impliedFormat":1},{"version":"0fa06ada475b910e2106c98c68b10483dc8811d0c14a8a8dd36efb2672485b29","impliedFormat":1},{"version":"33e5e9aba62c3193d10d1d33ae1fa75c46a1171cf76fef750777377d53b0303f","impliedFormat":1},{"version":"2b06b93fd01bcd49d1a6bd1f9b65ddcae6480b9a86e9061634d6f8e354c1468f","impliedFormat":1},{"version":"6a0cd27e5dc2cfbe039e731cf879d12b0e2dded06d1b1dedad07f7712de0d7f4","affectsGlobalScope":true,"impliedFormat":1},{"version":"13f5c844119c43e51ce777c509267f14d6aaf31eafb2c2b002ca35584cd13b29","impliedFormat":1},{"version":"e60477649d6ad21542bd2dc7e3d9ff6853d0797ba9f689ba2f6653818999c264","impliedFormat":1},{"version":"c2510f124c0293ab80b1777c44d80f812b75612f297b9857406468c0f4dafe29","affectsGlobalScope":true,"impliedFormat":1},{"version":"5524481e56c48ff486f42926778c0a3cce1cc85dc46683b92b1271865bcf015a","impliedFormat":1},{"version":"4c829ab315f57c5442c6667b53769975acbf92003a66aef19bce151987675bd1","affectsGlobalScope":true,"impliedFormat":1},{"version":"b2ade7657e2db96d18315694789eff2ddd3d8aea7215b181f8a0b303277cc579","impliedFormat":1},{"version":"9855e02d837744303391e5623a531734443a5f8e6e8755e018c41d63ad797db2","impliedFormat":1},{"version":"4d631b81fa2f07a0e63a9a143d6a82c25c5f051298651a9b69176ba28930756d","impliedFormat":1},{"version":"836a356aae992ff3c28a0212e3eabcb76dd4b0cc06bcb9607aeef560661b860d","impliedFormat":1},{"version":"1e0d1f8b0adfa0b0330e028c7941b5a98c08b600efe7f14d2d2a00854fb2f393","impliedFormat":1},{"version":"41670ee38943d9cbb4924e436f56fc19ee94232bc96108562de1a734af20dc2c","affectsGlobalScope":true,"impliedFormat":1},{"version":"c906fb15bd2aabc9ed1e3f44eb6a8661199d6c320b3aa196b826121552cb3695","impliedFormat":1},{"version":"22295e8103f1d6d8ea4b5d6211e43421fe4564e34d0dd8e09e520e452d89e659","impliedFormat":1},{"version":"f949f7f6c7802a338039cfc2156d1fe285cdd1e092c64437ebe15ae8edc854e0","impliedFormat":1},{"version":"6b4e081d55ac24fc8a4631d5dd77fe249fa25900abd7d046abb87d90e3b45645","impliedFormat":1},{"version":"a10f0e1854f3316d7ee437b79649e5a6ae3ae14ffe6322b02d4987071a95362e","impliedFormat":1},{"version":"e208f73ef6a980104304b0d2ca5f6bf1b85de6009d2c7e404028b875020fa8f2","impliedFormat":1},{"version":"d163b6bc2372b4f07260747cbc6c0a6405ab3fbcea3852305e98ac43ca59f5bc","impliedFormat":1},{"version":"e6fa9ad47c5f71ff733744a029d1dc472c618de53804eae08ffc243b936f87ff","affectsGlobalScope":true,"impliedFormat":1},{"version":"83e63d6ccf8ec004a3bb6d58b9bb0104f60e002754b1e968024b320730cc5311","impliedFormat":1},{"version":"24826ed94a78d5c64bd857570fdbd96229ad41b5cb654c08d75a9845e3ab7dde","impliedFormat":1},{"version":"8b479a130ccb62e98f11f136d3ac80f2984fdc07616516d29881f3061f2dd472","impliedFormat":1},{"version":"928af3d90454bf656a52a48679f199f64c1435247d6189d1caf4c68f2eaf921f","affectsGlobalScope":true,"impliedFormat":1},{"version":"d2bc7425ef40526650d6db7e072c1ff4a51101c3ac2cc4b666623b19496a6e27","affectsGlobalScope":true,"impliedFormat":1},{"version":"3f16a7e4deafa527ed9995a772bb380eb7d3c2c0fd4ae178c5263ed18394db2c","impliedFormat":1},{"version":"933921f0bb0ec12ef45d1062a1fc0f27635318f4d294e4d99de9a5493e618ca2","impliedFormat":1},{"version":"71a0f3ad612c123b57239a7749770017ecfe6b66411488000aba83e4546fde25","impliedFormat":1},{"version":"77fbe5eecb6fac4b6242bbf6eebfc43e98ce5ccba8fa44e0ef6a95c945ff4d98","impliedFormat":1},{"version":"4f9d8ca0c417b67b69eeb54c7ca1bedd7b56034bb9bfd27c5d4f3bc4692daca7","impliedFormat":1},{"version":"814118df420c4e38fe5ae1b9a3bafb6e9c2aa40838e528cde908381867be6466","impliedFormat":1},{"version":"a3fc63c0d7b031693f665f5494412ba4b551fe644ededccc0ab5922401079c95","impliedFormat":1},{"version":"f27524f4bef4b6519c604bdb23bf4465bddcccbf3f003abb901acbd0d7404d99","impliedFormat":1},{"version":"37ba7b45141a45ce6e80e66f2a96c8a5ab1bcef0fc2d0f56bb58df96ec67e972","impliedFormat":1},{"version":"45650f47bfb376c8a8ed39d4bcda5902ab899a3150029684ee4c10676d9fbaee","impliedFormat":1},{"version":"6b039f55681caaf111d5eb84d292b9bee9e0131d0db1ad0871eef0964f533c73","affectsGlobalScope":true,"impliedFormat":1},{"version":"18fd40412d102c5564136f29735e5d1c3b455b8a37f920da79561f1fde068208","impliedFormat":1},{"version":"c8d3e5a18ba35629954e48c4cc8f11dc88224650067a172685c736b27a34a4dc","impliedFormat":1},{"version":"f0be1b8078cd549d91f37c30c222c2a187ac1cf981d994fb476a1adc61387b14","affectsGlobalScope":true,"impliedFormat":1},{"version":"0aaed1d72199b01234152f7a60046bc947f1f37d78d182e9ae09c4289e06a592","impliedFormat":1},{"version":"0dba70b3fb0dcd713fda33c2df64fa6751fff6460e536971cee917260fb17882","impliedFormat":1},{"version":"66ba1b2c3e3a3644a1011cd530fb444a96b1b2dfe2f5e837a002d41a1a799e60","impliedFormat":1},{"version":"7e514f5b852fdbc166b539fdd1f4e9114f29911592a5eb10a94bb3a13ccac3c4","impliedFormat":1},{"version":"5b7aa3c4c1a5d81b411e8cb302b45507fea9358d3569196b27eb1a27ae3a90ef","affectsGlobalScope":true,"impliedFormat":1},{"version":"5987a903da92c7462e0b35704ce7da94d7fdc4b89a984871c0e2b87a8aae9e69","affectsGlobalScope":true,"impliedFormat":1},{"version":"ea08a0345023ade2b47fbff5a76d0d0ed8bff10bc9d22b83f40858a8e941501c","impliedFormat":1},{"version":"47613031a5a31510831304405af561b0ffaedb734437c595256bb61a90f9311b","impliedFormat":1},{"version":"ae062ce7d9510060c5d7e7952ae379224fb3f8f2dd74e88959878af2057c143b","impliedFormat":1},{"version":"8a1a0d0a4a06a8d278947fcb66bf684f117bf147f89b06e50662d79a53be3e9f","affectsGlobalScope":true,"impliedFormat":1},{"version":"9f663c2f91127ef7024e8ca4b3b4383ff2770e5f826696005de382282794b127","impliedFormat":1},{"version":"9f55299850d4f0921e79b6bf344b47c420ce0f507b9dcf593e532b09ea7eeea1","impliedFormat":1},{"version":"151ff381ef9ff8da2da9b9663ebf657eac35c4c9a19183420c05728f31a6761d","impliedFormat":1},{"version":"ee70b8037ecdf0de6c04f35277f253663a536d7e38f1539d270e4e916d225a3f","affectsGlobalScope":true,"impliedFormat":1},{"version":"a660aa95476042d3fdcc1343cf6bb8fdf24772d31712b1db321c5a4dcc325434","impliedFormat":1},{"version":"161c8e0690c46021506e32fda85956d785b70f309ae97011fd27374c065cac9b","affectsGlobalScope":true,"impliedFormat":1},{"version":"f582b0fcbf1eea9b318ab92fb89ea9ab2ebb84f9b60af89328a91155e1afce72","impliedFormat":1},{"version":"402e5c534fb2b85fa771170595db3ac0dd532112c8fa44fc23f233bc6967488b","impliedFormat":1},{"version":"8885cf05f3e2abf117590bbb951dcf6359e3e5ac462af1c901cfd24c6a6472e2","impliedFormat":1},{"version":"333caa2bfff7f06017f114de738050dd99a765c7eb16571c6d25a38c0d5365dc","impliedFormat":1},{"version":"e61df3640a38d535fd4bc9f4a53aef17c296b58dc4b6394fd576b808dd2fe5e6","impliedFormat":1},{"version":"459920181700cec8cbdf2a5faca127f3f17fd8dd9d9e577ed3f5f3af5d12a2e4","impliedFormat":1},{"version":"4719c209b9c00b579553859407a7e5dcfaa1c472994bd62aa5dd3cc0757eb077","impliedFormat":1},{"version":"7ec359bbc29b69d4063fe7dad0baaf35f1856f914db16b3f4f6e3e1bca4099fa","impliedFormat":1},{"version":"70790a7f0040993ca66ab8a07a059a0f8256e7bb57d968ae945f696cbff4ac7a","impliedFormat":1},{"version":"d1b9a81e99a0050ca7f2d98d7eedc6cda768f0eb9fa90b602e7107433e64c04c","impliedFormat":1},{"version":"a022503e75d6953d0e82c2c564508a5c7f8556fad5d7f971372d2d40479e4034","impliedFormat":1},{"version":"b215c4f0096f108020f666ffcc1f072c81e9f2f95464e894a5d5f34c5ea2a8b1","impliedFormat":1},{"version":"644491cde678bd462bb922c1d0cfab8f17d626b195ccb7f008612dc31f445d2d","impliedFormat":1},{"version":"dfe54dab1fa4961a6bcfba68c4ca955f8b5bbeb5f2ab3c915aa7adaa2eabc03a","impliedFormat":1},{"version":"1251d53755b03cde02466064260bb88fd83c30006a46395b7d9167340bc59b73","impliedFormat":1},{"version":"47865c5e695a382a916b1eedda1b6523145426e48a2eae4647e96b3b5e52024f","impliedFormat":1},{"version":"4cdf27e29feae6c7826cdd5c91751cc35559125e8304f9e7aed8faef97dcf572","impliedFormat":1},{"version":"331b8f71bfae1df25d564f5ea9ee65a0d847c4a94baa45925b6f38c55c7039bf","impliedFormat":1},{"version":"2a771d907aebf9391ac1f50e4ad37952943515eeea0dcc7e78aa08f508294668","impliedFormat":1},{"version":"0146fd6262c3fd3da51cb0254bb6b9a4e42931eb2f56329edd4c199cb9aaf804","impliedFormat":1},{"version":"183f480885db5caa5a8acb833c2be04f98056bdcc5fb29e969ff86e07efe57ab","impliedFormat":99},{"version":"960bd764c62ac43edc24eaa2af958a4b4f1fa5d27df5237e176d0143b36a39c6","affectsGlobalScope":true,"impliedFormat":1},{"version":"4ec16d7a4e366c06a4573d299e15fe6207fc080f41beac5da06f4af33ea9761e","impliedFormat":1},{"version":"59f8dc89b9e724a6a667f52cdf4b90b6816ae6c9842ce176d38fcc973669009e","affectsGlobalScope":true,"impliedFormat":1},{"version":"e4af494f7a14b226bbe732e9c130d8811f8c7025911d7c58dd97121a85519715","impliedFormat":1},{"version":"47416e41b1af81e53e8c3cc5bf909d47ff632a7b6eddfe7ff43d187b4dcca047","impliedFormat":99},{"version":"213a00d511892898e9dad3c98efe3b1de230f171b9e91496faca3e40e27ef6a7","impliedFormat":99},{"version":"62486ec77ac020b82d5a65a270096bb7f2a1fd0627a89f29c5a5d3cbd6bd1f59","impliedFormat":99},{"version":"c637a793905f02d354b640fae41a6ae79395ed0d77fbb87c36d9664ecbd95ac1","impliedFormat":99},{"version":"437b7613a30a2fcde463f7b707c6d5567a8823fbc51de50b8641bf5b1d126fad","impliedFormat":99},{"version":"63ea959e28c110923f495576e614fb8b36c09b6828b467b2c7cd7f03b03ccf9f","impliedFormat":99},{"version":"1601a95dbb33059fc3d12638ed2a9aecff899e339c5c0f3a0b28768866d385b4","impliedFormat":99},{"version":"a8dd232837b1d83f76a47a5193c1afd9e17b9bf352cb84345f86f7759ee346d0","impliedFormat":99},{"version":"be5fc0dd37f64420b0423059370b8319521e0b58060d7b07b8f62fe1c145b02e","impliedFormat":99},{"version":"45f770f2ae71acc1cacfac137f50911e1a004ccba52b2b55c4432c0d4bd97814","impliedFormat":99},{"version":"8124828a11be7db984fcdab052fd4ff756b18edcfa8d71118b55388176210923","impliedFormat":99},{"version":"b62006bbc815fe8190c7aee262aad6bff993e3f9ade70d7057dfceab6de79d2f","impliedFormat":99},{"version":"a20c4976da01d1c823b165275cef98a896d4758388c6409bc4ce24f0a5b49900","impliedFormat":99},{"version":"dffffa77f7716aa110e4253c6cd73a067e4729d95c97a538dbb20e58f0eb3e1d","impliedFormat":99},{"version":"0daddd6f389da2b55770e95c9ef8831bf2520aab44fb941bae38bb7ddfe1d6b6","impliedFormat":99},{"version":"7bbff6783e96c691a41a7cf12dd5486b8166a01b0c57d071dbcfca55c9525ec4","impliedFormat":99},{"version":"556ccd493ec36c7d7cb130d51be66e147b91cc1415be383d71da0f1e49f742a9","impliedFormat":1},{"version":"b6d03c9cfe2cf0ba4c673c209fcd7c46c815b2619fd2aad59fc4229aaef2ed43","impliedFormat":1},{"version":"95aba78013d782537cc5e23868e736bec5d377b918990e28ed56110e3ae8b958","impliedFormat":1},{"version":"670a76db379b27c8ff42f1ba927828a22862e2ab0b0908e38b671f0e912cc5ed","impliedFormat":1},{"version":"13b77ab19ef7aadd86a1e54f2f08ea23a6d74e102909e3c00d31f231ed040f62","impliedFormat":1},{"version":"069bebfee29864e3955378107e243508b163e77ab10de6a5ee03ae06939f0bb9","impliedFormat":1},{"version":"ef94438f848be3a3b0033013bf64753f771f983c1e205e4a06675eb253ca7cd2","impliedFormat":99},{"version":"ce4dfe8b652d47a1f36dcf6f6a62c418ef87a42e5bfc13e317731a61f08c8cbe","signature":"4b96dd19fd2949d28ce80e913412b0026dc421e5bf6c31d87c7b5eb11b5753b4"},{"version":"ae77d81a5541a8abb938a0efedf9ac4bea36fb3a24cc28cfa11c598863aba571","impliedFormat":1},{"version":"b1538a92b9bae8d230267210c5db38c2eb6bdb352128a3ce3aa8c6acf9fc9622","impliedFormat":1},{"version":"6fc1a4f64372593767a9b7b774e9b3b92bf04e8785c3f9ea98973aa9f4bbe490","impliedFormat":1},{"version":"ff09b6fbdcf74d8af4e131b8866925c5e18d225540b9b19ce9485ca93e574d84","impliedFormat":1},{"version":"d5895252efa27a50f134a9b580aa61f7def5ab73d0a8071f9b5bf9a317c01c2d","impliedFormat":1},{"version":"2c378d9368abcd2eba8c29b294d40909845f68557bc0b38117e4f04fc56e5f9c","impliedFormat":1},{"version":"56208c500dcb5f42be7e18e8cb578f257a1a89b94b3280c506818fed06391805","impliedFormat":1},{"version":"0c94c2e497e1b9bcfda66aea239d5d36cd980d12a6d9d59e66f4be1fa3da5d5a","impliedFormat":1},{"version":"9b048390bcffe88c023a4cd742a720b41d4cd7df83bc9270e6f2339bf38de278","affectsGlobalScope":true,"impliedFormat":1},{"version":"1f366bde16e0513fa7b64f87f86689c4d36efd85afce7eb24753e9c99b91c319","impliedFormat":1},{"version":"f3d8c757e148ad968f0d98697987db363070abada5f503da3c06aefd9d4248c1","impliedFormat":1},{"version":"7e29f41b158de217f94cb9676bf9cbd0cd9b5a46e1985141ed36e075c52bf6ad","affectsGlobalScope":true,"impliedFormat":1},{"version":"ac51dd7d31333793807a6abaa5ae168512b6131bd41d9c5b98477fc3b7800f9f","impliedFormat":1},{"version":"dc0a7f107690ee5cd8afc8dbf05c4df78085471ce16bdd9881642ec738bc81fe","impliedFormat":1},{"version":"be1cc4d94ea60cbe567bc29ed479d42587bf1e6cba490f123d329976b0fe4ee5","impliedFormat":1},{"version":"7fa8d75d229eeaee235a801758d9c694e94405013fe77d5d1dd8e3201fc414f1","impliedFormat":1}],"root":[263],"options":{"composite":true,"module":99,"skipLibCheck":true,"strict":true,"target":9},"referencedMap":[[258,1],[256,2],[89,2],[264,2],[261,3],[257,1],[259,4],[260,1],[92,5],[265,2],[266,2],[267,2],[268,6],[269,2],[271,7],[272,8],[270,2],[273,2],[90,2],[211,2],[274,2],[157,9],[158,9],[159,10],[111,11],[160,12],[161,13],[162,14],[106,2],[109,15],[107,2],[108,2],[163,16],[164,17],[165,18],[166,19],[167,20],[168,21],[169,21],[170,22],[171,23],[172,24],[173,25],[112,2],[110,2],[174,26],[175,27],[176,28],[210,29],[177,30],[178,2],[179,31],[180,32],[181,33],[182,34],[183,35],[184,36],[185,37],[186,38],[187,39],[188,39],[189,40],[190,2],[191,41],[192,42],[194,43],[193,44],[195,45],[196,46],[197,47],[198,48],[199,49],[200,50],[201,51],[202,52],[203,53],[204,54],[205,55],[206,56],[207,57],[113,2],[114,2],[115,2],[154,58],[155,2],[156,2],[208,59],[209,60],[278,61],[275,2],[277,62],[279,2],[262,63],[93,64],[242,65],[243,66],[241,2],[62,2],[72,67],[68,68],[71,69],[94,70],[79,2],[81,71],[251,71],[80,72],[87,2],[70,73],[63,74],[247,75],[65,76],[67,77],[246,2],[244,76],[66,2],[69,74],[64,2],[91,2],[116,2],[276,2],[214,2],[102,78],[104,79],[103,80],[101,81],[100,2],[232,82],[230,83],[231,84],[219,85],[220,83],[227,86],[218,87],[223,88],[233,2],[224,89],[229,90],[235,91],[234,92],[217,93],[225,94],[226,95],[221,96],[228,82],[222,97],[213,98],[212,99],[216,2],[95,2],[88,2],[60,2],[61,2],[12,2],[11,2],[2,2],[13,2],[14,2],[15,2],[16,2],[17,2],[18,2],[19,2],[20,2],[3,2],[21,2],[22,2],[4,2],[23,2],[27,2],[24,2],[25,2],[26,2],[28,2],[29,2],[30,2],[5,2],[31,2],[32,2],[33,2],[34,2],[6,2],[38,2],[35,2],[36,2],[37,2],[39,2],[7,2],[40,2],[45,2],[46,2],[41,2],[42,2],[43,2],[44,2],[8,2],[50,2],[47,2],[48,2],[49,2],[51,2],[9,2],[52,2],[53,2],[54,2],[56,2],[55,2],[57,2],[58,2],[10,2],[59,2],[1,2],[132,100],[142,101],[131,100],[152,102],[123,103],[122,104],[151,105],[145,106],[150,107],[125,108],[139,109],[124,110],[148,111],[120,112],[119,105],[149,113],[121,114],[126,115],[127,2],[130,115],[117,2],[153,116],[143,117],[134,118],[135,119],[137,120],[133,121],[136,122],[146,105],[128,123],[129,124],[138,125],[118,126],[141,117],[140,115],[144,2],[147,127],[75,128],[240,129],[78,130],[76,128],[74,2],[77,131],[238,2],[236,2],[237,2],[215,2],[239,132],[249,133],[255,134],[248,135],[96,136],[86,137],[82,138],[245,2],[83,68],[99,139],[97,140],[253,141],[252,142],[84,143],[98,144],[73,2],[85,145],[254,146],[105,147],[250,2],[263,148]],"latestChangedDtsFile":"./vite.config.d.ts","version":"5.9.3"}
\ No newline at end of file
+{"fileNames":["./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es5.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2016.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2023.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.core.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.collection.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.generator.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.iterable.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.promise.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.proxy.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.reflect.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.symbol.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2016.array.include.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2016.intl.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.arraybuffer.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.date.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.object.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.string.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.intl.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.intl.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.promise.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.regexp.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.array.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.object.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.string.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.symbol.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.intl.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.bigint.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.date.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.promise.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.string.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.intl.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.number.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.promise.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.string.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.weakref.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.intl.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.array.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.error.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.intl.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.object.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.string.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.regexp.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2023.array.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2023.collection.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2023.intl.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.decorators.d.ts","./node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.decorators.legacy.d.ts","./node_modules/.pnpm/@vitest+pretty-format@4.0.18/node_modules/@vitest/pretty-format/dist/index.d.ts","./node_modules/.pnpm/@vitest+utils@4.0.18/node_modules/@vitest/utils/dist/display.d.ts","./node_modules/.pnpm/@vitest+utils@4.0.18/node_modules/@vitest/utils/dist/types.d.ts","./node_modules/.pnpm/@vitest+utils@4.0.18/node_modules/@vitest/utils/dist/helpers.d.ts","./node_modules/.pnpm/@vitest+utils@4.0.18/node_modules/@vitest/utils/dist/timers.d.ts","./node_modules/.pnpm/@vitest+utils@4.0.18/node_modules/@vitest/utils/dist/index.d.ts","./node_modules/.pnpm/@vitest+runner@4.0.18/node_modules/@vitest/runner/dist/tasks.d-c7uxawj9.d.ts","./node_modules/.pnpm/@vitest+utils@4.0.18/node_modules/@vitest/utils/dist/types.d-bcelap-c.d.ts","./node_modules/.pnpm/@vitest+utils@4.0.18/node_modules/@vitest/utils/dist/diff.d.ts","./node_modules/.pnpm/@vitest+runner@4.0.18/node_modules/@vitest/runner/dist/types.d.ts","./node_modules/.pnpm/@vitest+runner@4.0.18/node_modules/@vitest/runner/dist/index.d.ts","./node_modules/.pnpm/vitest@4.0.18_@types+node@2_8ce06a7eaac35dcc234999df29fcbd86/node_modules/vitest/dist/chunks/traces.d.402v_yfi.d.ts","./node_modules/.pnpm/vite@7.3.1_@types+node@22.1_b280ad665d0c853011aeeed7a50427fc/node_modules/vite/types/hmrpayload.d.ts","./node_modules/.pnpm/vite@7.3.1_@types+node@22.1_b280ad665d0c853011aeeed7a50427fc/node_modules/vite/dist/node/chunks/modulerunnertransport.d.ts","./node_modules/.pnpm/vite@7.3.1_@types+node@22.1_b280ad665d0c853011aeeed7a50427fc/node_modules/vite/types/customevent.d.ts","./node_modules/.pnpm/vite@7.3.1_@types+node@22.1_b280ad665d0c853011aeeed7a50427fc/node_modules/vite/types/hot.d.ts","./node_modules/.pnpm/vite@7.3.1_@types+node@22.1_b280ad665d0c853011aeeed7a50427fc/node_modules/vite/dist/node/module-runner.d.ts","./node_modules/.pnpm/@vitest+snapshot@4.0.18/node_modules/@vitest/snapshot/dist/environment.d-dhdq1csl.d.ts","./node_modules/.pnpm/@vitest+snapshot@4.0.18/node_modules/@vitest/snapshot/dist/rawsnapshot.d-lfsmjfud.d.ts","./node_modules/.pnpm/@vitest+snapshot@4.0.18/node_modules/@vitest/snapshot/dist/index.d.ts","./node_modules/.pnpm/vitest@4.0.18_@types+node@2_8ce06a7eaac35dcc234999df29fcbd86/node_modules/vitest/dist/chunks/config.d.cy95hicx.d.ts","./node_modules/.pnpm/vitest@4.0.18_@types+node@2_8ce06a7eaac35dcc234999df29fcbd86/node_modules/vitest/dist/chunks/environment.d.crsxczp1.d.ts","./node_modules/.pnpm/vitest@4.0.18_@types+node@2_8ce06a7eaac35dcc234999df29fcbd86/node_modules/vitest/dist/chunks/rpc.d.rh3apgef.d.ts","./node_modules/.pnpm/vitest@4.0.18_@types+node@2_8ce06a7eaac35dcc234999df29fcbd86/node_modules/vitest/dist/chunks/worker.d.dyxm8del.d.ts","./node_modules/.pnpm/vitest@4.0.18_@types+node@2_8ce06a7eaac35dcc234999df29fcbd86/node_modules/vitest/dist/chunks/browser.d.chkacdzh.d.ts","./node_modules/.pnpm/@vitest+spy@4.0.18/node_modules/@vitest/spy/dist/index.d.ts","./node_modules/.pnpm/tinyrainbow@3.0.3/node_modules/tinyrainbow/dist/index.d.ts","./node_modules/.pnpm/@standard-schema+spec@1.1.0/node_modules/@standard-schema/spec/dist/index.d.ts","./node_modules/.pnpm/@types+deep-eql@4.0.2/node_modules/@types/deep-eql/index.d.ts","./node_modules/.pnpm/assertion-error@2.0.1/node_modules/assertion-error/index.d.ts","./node_modules/.pnpm/@types+chai@5.2.3/node_modules/@types/chai/index.d.ts","./node_modules/.pnpm/@vitest+expect@4.0.18/node_modules/@vitest/expect/dist/index.d.ts","./node_modules/.pnpm/@vitest+runner@4.0.18/node_modules/@vitest/runner/dist/utils.d.ts","./node_modules/.pnpm/tinybench@2.9.0/node_modules/tinybench/dist/index.d.ts","./node_modules/.pnpm/vitest@4.0.18_@types+node@2_8ce06a7eaac35dcc234999df29fcbd86/node_modules/vitest/dist/chunks/benchmark.d.daahlpsq.d.ts","./node_modules/.pnpm/vitest@4.0.18_@types+node@2_8ce06a7eaac35dcc234999df29fcbd86/node_modules/vitest/dist/chunks/global.d.b15mdlcr.d.ts","./node_modules/.pnpm/vitest@4.0.18_@types+node@2_8ce06a7eaac35dcc234999df29fcbd86/node_modules/vitest/dist/chunks/suite.d.bjwk38hb.d.ts","./node_modules/.pnpm/vitest@4.0.18_@types+node@2_8ce06a7eaac35dcc234999df29fcbd86/node_modules/vitest/dist/chunks/evaluatedmodules.d.bxj5omdx.d.ts","./node_modules/.pnpm/expect-type@1.3.0/node_modules/expect-type/dist/utils.d.ts","./node_modules/.pnpm/expect-type@1.3.0/node_modules/expect-type/dist/overloads.d.ts","./node_modules/.pnpm/expect-type@1.3.0/node_modules/expect-type/dist/branding.d.ts","./node_modules/.pnpm/expect-type@1.3.0/node_modules/expect-type/dist/messages.d.ts","./node_modules/.pnpm/expect-type@1.3.0/node_modules/expect-type/dist/index.d.ts","./node_modules/.pnpm/vitest@4.0.18_@types+node@2_8ce06a7eaac35dcc234999df29fcbd86/node_modules/vitest/dist/index.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/compatibility/disposable.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/compatibility/indexable.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/compatibility/iterators.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/compatibility/index.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/globals.typedarray.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/buffer.buffer.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/globals.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/web-globals/abortcontroller.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/web-globals/domexception.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/web-globals/events.d.ts","./node_modules/.pnpm/buffer@6.0.3/node_modules/buffer/index.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/header.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/readable.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/file.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/fetch.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/formdata.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/connector.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/client.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/errors.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/dispatcher.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/global-dispatcher.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/global-origin.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/pool-stats.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/pool.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/handlers.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/balanced-pool.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/agent.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/mock-interceptor.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/mock-agent.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/mock-client.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/mock-pool.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/mock-errors.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/proxy-agent.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/env-http-proxy-agent.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/retry-handler.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/retry-agent.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/api.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/interceptors.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/util.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/cookies.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/patch.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/websocket.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/eventsource.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/filereader.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/diagnostics-channel.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/content-type.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/cache.d.ts","./node_modules/.pnpm/undici-types@6.21.0/node_modules/undici-types/index.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/web-globals/fetch.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/web-globals/navigator.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/web-globals/storage.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/assert.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/assert/strict.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/async_hooks.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/buffer.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/child_process.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/cluster.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/console.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/constants.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/crypto.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/dgram.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/diagnostics_channel.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/dns.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/dns/promises.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/domain.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/events.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/fs.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/fs/promises.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/http.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/http2.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/https.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/inspector.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/inspector.generated.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/module.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/net.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/os.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/path.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/perf_hooks.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/process.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/punycode.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/querystring.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/readline.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/readline/promises.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/repl.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/sea.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/sqlite.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/stream.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/stream/promises.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/stream/consumers.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/stream/web.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/string_decoder.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/test.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/timers.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/timers/promises.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/tls.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/trace_events.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/tty.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/url.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/util.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/v8.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/vm.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/wasi.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/worker_threads.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/zlib.d.ts","./node_modules/.pnpm/@types+node@22.19.11/node_modules/@types/node/index.d.ts","./node_modules/.pnpm/@types+estree@1.0.8/node_modules/@types/estree/index.d.ts","./node_modules/.pnpm/rollup@4.59.0/node_modules/rollup/dist/rollup.d.ts","./node_modules/.pnpm/rollup@4.59.0/node_modules/rollup/dist/parseast.d.ts","./node_modules/.pnpm/esbuild@0.27.3/node_modules/esbuild/lib/main.d.ts","./node_modules/.pnpm/vite@7.3.1_@types+node@22.1_b280ad665d0c853011aeeed7a50427fc/node_modules/vite/types/internal/terseroptions.d.ts","./node_modules/.pnpm/source-map-js@1.2.1/node_modules/source-map-js/source-map.d.ts","./node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/previous-map.d.ts","./node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/input.d.ts","./node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/css-syntax-error.d.ts","./node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/declaration.d.ts","./node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/root.d.ts","./node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/warning.d.ts","./node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/lazy-result.d.ts","./node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/no-work-result.d.ts","./node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/processor.d.ts","./node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/result.d.ts","./node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/document.d.ts","./node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/rule.d.ts","./node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/node.d.ts","./node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/comment.d.ts","./node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/container.d.ts","./node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/at-rule.d.ts","./node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/list.d.ts","./node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/postcss.d.ts","./node_modules/.pnpm/postcss@8.5.6/node_modules/postcss/lib/postcss.d.mts","./node_modules/.pnpm/vite@7.3.1_@types+node@22.1_b280ad665d0c853011aeeed7a50427fc/node_modules/vite/types/internal/csspreprocessoroptions.d.ts","./node_modules/.pnpm/lightningcss@1.31.1/node_modules/lightningcss/node/ast.d.ts","./node_modules/.pnpm/lightningcss@1.31.1/node_modules/lightningcss/node/targets.d.ts","./node_modules/.pnpm/lightningcss@1.31.1/node_modules/lightningcss/node/index.d.ts","./node_modules/.pnpm/vite@7.3.1_@types+node@22.1_b280ad665d0c853011aeeed7a50427fc/node_modules/vite/types/internal/lightningcssoptions.d.ts","./node_modules/.pnpm/vite@7.3.1_@types+node@22.1_b280ad665d0c853011aeeed7a50427fc/node_modules/vite/types/importglob.d.ts","./node_modules/.pnpm/vite@7.3.1_@types+node@22.1_b280ad665d0c853011aeeed7a50427fc/node_modules/vite/types/metadata.d.ts","./node_modules/.pnpm/vite@7.3.1_@types+node@22.1_b280ad665d0c853011aeeed7a50427fc/node_modules/vite/dist/node/index.d.ts","./node_modules/.pnpm/@vitest+mocker@4.0.18_vite@_7b8cf3a293925790caedaa7bf9dabc23/node_modules/@vitest/mocker/dist/types.d-b8cckmht.d.ts","./node_modules/.pnpm/@vitest+mocker@4.0.18_vite@_7b8cf3a293925790caedaa7bf9dabc23/node_modules/@vitest/mocker/dist/index.d-c-slyzi-.d.ts","./node_modules/.pnpm/@vitest+mocker@4.0.18_vite@_7b8cf3a293925790caedaa7bf9dabc23/node_modules/@vitest/mocker/dist/index.d.ts","./node_modules/.pnpm/@vitest+utils@4.0.18/node_modules/@vitest/utils/dist/source-map.d.ts","./node_modules/.pnpm/vitest@4.0.18_@types+node@2_8ce06a7eaac35dcc234999df29fcbd86/node_modules/vitest/dist/chunks/coverage.d.bztk59wp.d.ts","./node_modules/.pnpm/@vitest+utils@4.0.18/node_modules/@vitest/utils/dist/serialize.d.ts","./node_modules/.pnpm/@vitest+utils@4.0.18/node_modules/@vitest/utils/dist/error.d.ts","./node_modules/.pnpm/vitest@4.0.18_@types+node@2_8ce06a7eaac35dcc234999df29fcbd86/node_modules/vitest/dist/browser.d.ts","./node_modules/.pnpm/vitest@4.0.18_@types+node@2_8ce06a7eaac35dcc234999df29fcbd86/node_modules/vitest/browser/context.d.ts","./node_modules/.pnpm/vitest@4.0.18_@types+node@2_8ce06a7eaac35dcc234999df29fcbd86/node_modules/vitest/optional-types.d.ts","./node_modules/.pnpm/@vitest+snapshot@4.0.18/node_modules/@vitest/snapshot/dist/manager.d.ts","./node_modules/.pnpm/vitest@4.0.18_@types+node@2_8ce06a7eaac35dcc234999df29fcbd86/node_modules/vitest/dist/chunks/reporters.d.cwxni2jg.d.ts","./node_modules/.pnpm/vitest@4.0.18_@types+node@2_8ce06a7eaac35dcc234999df29fcbd86/node_modules/vitest/dist/chunks/plugin.d.ctqpeehp.d.ts","./node_modules/.pnpm/vitest@4.0.18_@types+node@2_8ce06a7eaac35dcc234999df29fcbd86/node_modules/vitest/dist/config.d.ts","./node_modules/.pnpm/vitest@4.0.18_@types+node@2_8ce06a7eaac35dcc234999df29fcbd86/node_modules/vitest/config.d.ts","./node_modules/.pnpm/@babel+types@7.29.0/node_modules/@babel/types/lib/index.d.ts","./node_modules/.pnpm/@types+babel__generator@7.27.0/node_modules/@types/babel__generator/index.d.ts","./node_modules/.pnpm/@babel+parser@7.29.0/node_modules/@babel/parser/typings/babel-parser.d.ts","./node_modules/.pnpm/@types+babel__template@7.4.4/node_modules/@types/babel__template/index.d.ts","./node_modules/.pnpm/@types+babel__traverse@7.28.0/node_modules/@types/babel__traverse/index.d.ts","./node_modules/.pnpm/@types+babel__core@7.20.5/node_modules/@types/babel__core/index.d.ts","./node_modules/.pnpm/@vitejs+plugin-react@5.1.4__c7eddff940b6bc32fd981fa79b5284cf/node_modules/@vitejs/plugin-react/dist/index.d.ts","./vite.config.ts","./node_modules/.pnpm/@types+aria-query@5.0.4/node_modules/@types/aria-query/index.d.ts","./node_modules/.pnpm/@types+d3-array@3.2.2/node_modules/@types/d3-array/index.d.ts","./node_modules/.pnpm/@types+d3-color@3.1.3/node_modules/@types/d3-color/index.d.ts","./node_modules/.pnpm/@types+d3-ease@3.0.2/node_modules/@types/d3-ease/index.d.ts","./node_modules/.pnpm/@types+d3-interpolate@3.0.4/node_modules/@types/d3-interpolate/index.d.ts","./node_modules/.pnpm/@types+d3-path@3.1.1/node_modules/@types/d3-path/index.d.ts","./node_modules/.pnpm/@types+d3-time@3.0.4/node_modules/@types/d3-time/index.d.ts","./node_modules/.pnpm/@types+d3-scale@4.0.9/node_modules/@types/d3-scale/index.d.ts","./node_modules/.pnpm/@types+d3-shape@3.1.8/node_modules/@types/d3-shape/index.d.ts","./node_modules/.pnpm/@types+d3-timer@3.0.2/node_modules/@types/d3-timer/index.d.ts","./node_modules/.pnpm/@types+json-schema@7.0.15/node_modules/@types/json-schema/index.d.ts","./node_modules/.pnpm/@types+react@19.2.14/node_modules/@types/react/global.d.ts","./node_modules/.pnpm/csstype@3.2.3/node_modules/csstype/index.d.ts","./node_modules/.pnpm/@types+react@19.2.14/node_modules/@types/react/index.d.ts","./node_modules/.pnpm/@types+react-dom@19.2.3_@types+react@19.2.14/node_modules/@types/react-dom/index.d.ts","./node_modules/.pnpm/@types+use-sync-external-store@0.0.6/node_modules/@types/use-sync-external-store/index.d.ts"],"fileIdsList":[[111,160,177,178,259],[111,160,177,178],[111,160,177,178,259,260,261,262,263],[111,160,177,178,259,261],[90,91,111,160,177,178],[111,160,177,178,269],[111,160,177,178,273],[111,160,177,178,272],[111,157,158,160,177,178],[111,159,160,177,178],[160,177,178],[111,160,165,177,178,195],[111,160,161,166,171,177,178,180,192,203],[111,160,161,162,171,177,178,180],[106,107,108,111,160,177,178],[111,160,163,177,178,204],[111,160,164,165,172,177,178,181],[111,160,165,177,178,192,200],[111,160,166,168,171,177,178,180],[111,159,160,167,177,178],[111,160,168,169,177,178],[111,160,170,171,177,178],[111,159,160,171,177,178],[111,160,171,172,173,177,178,192,203],[111,160,171,172,173,177,178,187,192,195],[111,153,160,168,171,174,177,178,180,192,203],[111,160,171,172,174,175,177,178,180,192,200,203],[111,160,174,176,177,178,192,200,203],[109,110,111,112,113,114,115,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209],[111,160,171,177,178],[111,160,177,178,179,203],[111,160,168,171,177,178,180,192],[111,160,177,178,181],[111,160,177,178,182],[111,159,160,177,178,183],[111,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209],[111,160,177,178,185],[111,160,177,178,186],[111,160,171,177,178,187,188],[111,160,177,178,187,189,204,206],[111,160,172,177,178],[111,160,171,177,178,192,193,195],[111,160,177,178,194,195],[111,160,177,178,192,193],[111,160,177,178,195],[111,160,177,178,196],[111,157,160,177,178,192,197,203],[111,160,171,177,178,198,199],[111,160,177,178,198,199],[111,160,165,177,178,180,192,200],[111,160,177,178,201],[111,160,177,178,180,202],[111,160,174,177,178,186,203],[111,160,165,177,178,204],[111,160,177,178,192,205],[111,160,177,178,179,206],[111,160,177,178,207],[111,153,160,177,178],[111,153,160,171,173,177,178,183,192,195,203,205,206,208],[111,160,177,178,192,209],[111,160,177,178,280],[111,160,177,178,278,279],[111,160,177,178,243,257,264],[63,67,70,72,87,88,89,92,97,111,160,177,178],[111,160,177,178,244],[111,160,177,178,244,245],[67,68,70,71,111,160,177,178],[67,111,160,177,178],[67,68,70,111,160,177,178],[67,68,111,160,177,178],[62,79,80,111,160,177,178],[62,79,111,160,177,178],[62,69,111,160,177,178],[62,111,160,177,178],[62,69,111,160,177,178,249],[64,111,160,177,178],[62,63,64,65,66,111,160,177,178],[100,101,111,160,177,178],[100,101,102,103,111,160,177,178],[100,102,111,160,177,178],[100,111,160,177,178],[111,160,177,178,237,238],[111,160,177,178,231],[111,160,177,178,229,231],[111,160,177,178,220,228,229,230,232,234],[111,160,177,178,218],[111,160,177,178,221,226,231,234],[111,160,177,178,217,234],[111,160,177,178,221,222,225,226,227,234],[111,160,177,178,221,222,223,225,226,234],[111,160,177,178,218,219,220,221,222,226,227,228,230,231,232,234],[111,160,177,178,234],[111,160,177,178,216,218,219,220,221,222,223,225,226,227,228,229,230,231,232,233],[111,160,177,178,216,234],[111,160,177,178,221,223,224,226,227,234],[111,160,177,178,225,234],[111,160,177,178,226,227,231,234],[111,160,177,178,219,229],[111,160,177,178,212,242,243],[111,160,177,178,211,212],[111,125,129,160,177,178,203],[111,125,160,177,178,192,203],[111,120,160,177,178],[111,122,125,160,177,178,200,203],[111,160,177,178,180,200],[111,160,177,178,210],[111,120,160,177,178,210],[111,122,125,160,177,178,180,203],[111,117,118,121,124,160,171,177,178,192,203],[111,125,132,160,177,178],[111,117,123,160,177,178],[111,125,146,147,160,177,178],[111,121,125,160,177,178,195,203,210],[111,146,160,177,178,210],[111,119,120,160,177,178,210],[111,125,160,177,178],[111,119,120,121,122,123,124,125,126,127,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,147,148,149,150,151,152,160,177,178],[111,125,140,160,177,178],[111,125,132,133,160,177,178],[111,123,125,133,134,160,177,178],[111,124,160,177,178],[111,117,120,125,160,177,178],[111,125,129,133,134,160,177,178],[111,129,160,177,178],[111,123,125,128,160,177,178,203],[111,117,122,125,132,160,177,178],[111,160,177,178,192],[111,120,125,146,160,177,178,208,210],[74,111,160,177,178],[74,75,76,78,111,160,171,172,174,175,176,177,178,180,192,200,203,209,210,212,213,214,215,235,236,240,241,242,243],[74,75,76,77,111,160,177,178],[76,111,160,177,178],[111,160,177,178,239],[111,160,177,178,212,243],[111,160,177,178,251],[93,97,111,160,177,178,257],[62,63,65,66,67,70,72,73,81,82,87,97,111,160,177,178,247,248,250],[72,94,95,97,111,160,177,178],[72,73,85,97,111,160,177,178],[62,70,72,81,97,111,160,177,178],[78,111,160,177,178],[62,72,81,84,93,96,97,111,160,177,178],[111,160,177,178,243,255,257],[62,67,70,72,73,81,82,84,85,86,93,96,97,111,160,163,172,177,178,192,243,246,247,248,252,253,254,257],[72,73,78,81,97,111,160,177,178],[72,94,95,96,97,111,160,177,178],[72,78,82,83,84,97,111,160,177,178],[62,67,70,72,73,78,81,82,83,84,85,86,93,94,95,96,97,111,160,163,172,177,178,192,243,246,247,248,252,253,254,255,256,257],[62,67,70,72,73,78,81,82,83,84,85,86,87,93,94,95,96,97,98,99,104,111,160,177,178],[105,111,160,177,178,182,203,210,258,265]],"fileInfos":[{"version":"c430d44666289dae81f30fa7b2edebf186ecc91a2d4c71266ea6ae76388792e1","affectsGlobalScope":true,"impliedFormat":1},{"version":"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4","impliedFormat":1},{"version":"3facaf05f0c5fc569c5649dd359892c98a85557e3e0c847964caeb67076f4d75","impliedFormat":1},{"version":"e44bb8bbac7f10ecc786703fe0a6a4b952189f908707980ba8f3c8975a760962","impliedFormat":1},{"version":"5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8","impliedFormat":1},{"version":"68d73b4a11549f9c0b7d352d10e91e5dca8faa3322bfb77b661839c42b1ddec7","impliedFormat":1},{"version":"5efce4fc3c29ea84e8928f97adec086e3dc876365e0982cc8479a07954a3efd4","impliedFormat":1},{"version":"feecb1be483ed332fad555aff858affd90a48ab19ba7272ee084704eb7167569","impliedFormat":1},{"version":"ee7bad0c15b58988daa84371e0b89d313b762ab83cb5b31b8a2d1162e8eb41c2","impliedFormat":1},{"version":"27bdc30a0e32783366a5abeda841bc22757c1797de8681bbe81fbc735eeb1c10","impliedFormat":1},{"version":"c57796738e7f83dbc4b8e65132f11a377649c00dd3eee333f672b8f0a6bea671","affectsGlobalScope":true,"impliedFormat":1},{"version":"dc2df20b1bcdc8c2d34af4926e2c3ab15ffe1160a63e58b7e09833f616efff44","affectsGlobalScope":true,"impliedFormat":1},{"version":"515d0b7b9bea2e31ea4ec968e9edd2c39d3eebf4a2d5cbd04e88639819ae3b71","affectsGlobalScope":true,"impliedFormat":1},{"version":"0559b1f683ac7505ae451f9a96ce4c3c92bdc71411651ca6ddb0e88baaaad6a3","affectsGlobalScope":true,"impliedFormat":1},{"version":"0dc1e7ceda9b8b9b455c3a2d67b0412feab00bd2f66656cd8850e8831b08b537","affectsGlobalScope":true,"impliedFormat":1},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true,"impliedFormat":1},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true,"impliedFormat":1},{"version":"4ff2a353abf8a80ee399af572debb8faab2d33ad38c4b4474cff7f26e7653b8d","affectsGlobalScope":true,"impliedFormat":1},{"version":"fb0f136d372979348d59b3f5020b4cdb81b5504192b1cacff5d1fbba29378aa1","affectsGlobalScope":true,"impliedFormat":1},{"version":"d15bea3d62cbbdb9797079416b8ac375ae99162a7fba5de2c6c505446486ac0a","affectsGlobalScope":true,"impliedFormat":1},{"version":"68d18b664c9d32a7336a70235958b8997ebc1c3b8505f4f1ae2b7e7753b87618","affectsGlobalScope":true,"impliedFormat":1},{"version":"eb3d66c8327153d8fa7dd03f9c58d351107fe824c79e9b56b462935176cdf12a","affectsGlobalScope":true,"impliedFormat":1},{"version":"38f0219c9e23c915ef9790ab1d680440d95419ad264816fa15009a8851e79119","affectsGlobalScope":true,"impliedFormat":1},{"version":"69ab18c3b76cd9b1be3d188eaf8bba06112ebbe2f47f6c322b5105a6fbc45a2e","affectsGlobalScope":true,"impliedFormat":1},{"version":"a680117f487a4d2f30ea46f1b4b7f58bef1480456e18ba53ee85c2746eeca012","affectsGlobalScope":true,"impliedFormat":1},{"version":"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893","affectsGlobalScope":true,"impliedFormat":1},{"version":"4de680d5bb41c17f7f68e0419412ca23c98d5749dcaaea1896172f06435891fc","affectsGlobalScope":true,"impliedFormat":1},{"version":"954296b30da6d508a104a3a0b5d96b76495c709785c1d11610908e63481ee667","affectsGlobalScope":true,"impliedFormat":1},{"version":"ac9538681b19688c8eae65811b329d3744af679e0bdfa5d842d0e32524c73e1c","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a969edff4bd52585473d24995c5ef223f6652d6ef46193309b3921d65dd4376","affectsGlobalScope":true,"impliedFormat":1},{"version":"9e9fbd7030c440b33d021da145d3232984c8bb7916f277e8ffd3dc2e3eae2bdb","affectsGlobalScope":true,"impliedFormat":1},{"version":"811ec78f7fefcabbda4bfa93b3eb67d9ae166ef95f9bff989d964061cbf81a0c","affectsGlobalScope":true,"impliedFormat":1},{"version":"717937616a17072082152a2ef351cb51f98802fb4b2fdabd32399843875974ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"d7e7d9b7b50e5f22c915b525acc5a49a7a6584cf8f62d0569e557c5cfc4b2ac2","affectsGlobalScope":true,"impliedFormat":1},{"version":"71c37f4c9543f31dfced6c7840e068c5a5aacb7b89111a4364b1d5276b852557","affectsGlobalScope":true,"impliedFormat":1},{"version":"576711e016cf4f1804676043e6a0a5414252560eb57de9faceee34d79798c850","affectsGlobalScope":true,"impliedFormat":1},{"version":"89c1b1281ba7b8a96efc676b11b264de7a8374c5ea1e6617f11880a13fc56dc6","affectsGlobalScope":true,"impliedFormat":1},{"version":"74f7fa2d027d5b33eb0471c8e82a6c87216223181ec31247c357a3e8e2fddc5b","affectsGlobalScope":true,"impliedFormat":1},{"version":"d6d7ae4d1f1f3772e2a3cde568ed08991a8ae34a080ff1151af28b7f798e22ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"063600664504610fe3e99b717a1223f8b1900087fab0b4cad1496a114744f8df","affectsGlobalScope":true,"impliedFormat":1},{"version":"934019d7e3c81950f9a8426d093458b65d5aff2c7c1511233c0fd5b941e608ab","affectsGlobalScope":true,"impliedFormat":1},{"version":"52ada8e0b6e0482b728070b7639ee42e83a9b1c22d205992756fe020fd9f4a47","affectsGlobalScope":true,"impliedFormat":1},{"version":"3bdefe1bfd4d6dee0e26f928f93ccc128f1b64d5d501ff4a8cf3c6371200e5e6","affectsGlobalScope":true,"impliedFormat":1},{"version":"59fb2c069260b4ba00b5643b907ef5d5341b167e7d1dbf58dfd895658bda2867","affectsGlobalScope":true,"impliedFormat":1},{"version":"639e512c0dfc3fad96a84caad71b8834d66329a1f28dc95e3946c9b58176c73a","affectsGlobalScope":true,"impliedFormat":1},{"version":"368af93f74c9c932edd84c58883e736c9e3d53cec1fe24c0b0ff451f529ceab1","affectsGlobalScope":true,"impliedFormat":1},{"version":"af3dd424cf267428f30ccfc376f47a2c0114546b55c44d8c0f1d57d841e28d74","affectsGlobalScope":true,"impliedFormat":1},{"version":"995c005ab91a498455ea8dfb63aa9f83fa2ea793c3d8aa344be4a1678d06d399","affectsGlobalScope":true,"impliedFormat":1},{"version":"959d36cddf5e7d572a65045b876f2956c973a586da58e5d26cde519184fd9b8a","affectsGlobalScope":true,"impliedFormat":1},{"version":"965f36eae237dd74e6cca203a43e9ca801ce38824ead814728a2807b1910117d","affectsGlobalScope":true,"impliedFormat":1},{"version":"3925a6c820dcb1a06506c90b1577db1fdbf7705d65b62b99dce4be75c637e26b","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a3d63ef2b853447ec4f749d3f368ce642264246e02911fcb1590d8c161b8005","affectsGlobalScope":true,"impliedFormat":1},{"version":"8cdf8847677ac7d20486e54dd3fcf09eda95812ac8ace44b4418da1bbbab6eb8","affectsGlobalScope":true,"impliedFormat":1},{"version":"8444af78980e3b20b49324f4a16ba35024fef3ee069a0eb67616ea6ca821c47a","affectsGlobalScope":true,"impliedFormat":1},{"version":"3287d9d085fbd618c3971944b65b4be57859f5415f495b33a6adc994edd2f004","affectsGlobalScope":true,"impliedFormat":1},{"version":"b4b67b1a91182421f5df999988c690f14d813b9850b40acd06ed44691f6727ad","affectsGlobalScope":true,"impliedFormat":1},{"version":"df83c2a6c73228b625b0beb6669c7ee2a09c914637e2d35170723ad49c0f5cd4","affectsGlobalScope":true,"impliedFormat":1},{"version":"436aaf437562f276ec2ddbee2f2cdedac7664c1e4c1d2c36839ddd582eeb3d0a","affectsGlobalScope":true,"impliedFormat":1},{"version":"8e3c06ea092138bf9fa5e874a1fdbc9d54805d074bee1de31b99a11e2fec239d","affectsGlobalScope":true,"impliedFormat":1},{"version":"8e7f8264d0fb4c5339605a15daadb037bf238c10b654bb3eee14208f860a32ea","affectsGlobalScope":true,"impliedFormat":1},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true,"impliedFormat":1},{"version":"acfb723d81eda39156251aed414c553294870bf53062429ebfcfba8a68cb4753","impliedFormat":99},{"version":"fa69a90381c2f85889722a911a732a5ee3596dc3acecda8a9aa2fa89b9615d8d","impliedFormat":99},{"version":"b5ce343886d23392be9c8280e9f24a87f1d7d3667f6672c2fe4aa61fa4ece7d4","impliedFormat":99},{"version":"57e9e1b0911874c62d743af24b5d56032759846533641d550b12a45ff404bf07","impliedFormat":99},{"version":"b0857bb28fd5236ace84280f79a25093f919fd0eff13e47cc26ea03de60a7294","impliedFormat":99},{"version":"5e43e0824f10cd8c48e7a8c5c673638488925a12c31f0f9e0957965c290eb14c","impliedFormat":99},{"version":"854cd3a3375ffc4e7a92b2168dd065d7ff2614b43341038a65cca865a44c00c5","impliedFormat":99},{"version":"ef13c73d6157a32933c612d476c1524dd674cf5b9a88571d7d6a0d147544d529","impliedFormat":99},{"version":"3b0a56d056d81a011e484b9c05d5e430711aaecd561a788bad1d0498aad782c7","impliedFormat":99},{"version":"2f863ee9b873a65d9c3338ea7aaddbdb41a9673f062f06983d712bd01c25dc6b","impliedFormat":99},{"version":"67aa128c2bc170b93794f191feffc65a4b33e878db211cfcb7658c4b72f7a1f5","impliedFormat":99},{"version":"ac3d263474022e9a14c43f588f485d549641d839b159ecc971978b90f34bdf6b","impliedFormat":99},{"version":"a7ca8df4f2931bef2aa4118078584d84a0b16539598eaadf7dce9104dfaa381c","impliedFormat":1},{"version":"10073cdcf56982064c5337787cc59b79586131e1b28c106ede5bff362f912b70","impliedFormat":99},{"version":"72950913f4900b680f44d8cab6dd1ea0311698fc1eefb014eb9cdfc37ac4a734","impliedFormat":1},{"version":"36977c14a7f7bfc8c0426ae4343875689949fb699f3f84ecbe5b300ebf9a2c55","impliedFormat":1},{"version":"ff0a83c9a0489a627e264ffcb63f2264b935b20a502afa3a018848139e3d8575","impliedFormat":99},{"version":"324ac98294dab54fbd580c7d0e707d94506d7b2c3d5efe981a8495f02cf9ad96","impliedFormat":99},{"version":"9ec72eb493ff209b470467e24264116b6a8616484bca438091433a545dfba17e","impliedFormat":99},{"version":"c35b8117804c639c53c87f2c23e0c786df61d552e513bd5179f5b88e29964838","impliedFormat":99},{"version":"c609331c6ed4ad4af54e101088c6a4dcb48f8db7b0b97e44a6efeb130f4331bd","impliedFormat":99},{"version":"bcbd3becd08b4515225880abea0dbfbbf0d1181ce3af8f18f72f61edbe4febfb","impliedFormat":99},{"version":"67acaedb46832d66c15f1b09fb7b6a0b7f41bdbf8eaa586ec70459b3e8896eb9","impliedFormat":99},{"version":"4535ab977ee871e956eb7bebe2db5de79f5d5ec7dfbbf1d35e08f4a2d6630dac","impliedFormat":99},{"version":"b79b5ed99f26ffb2f8ae4bdcc4b34a9542197dc3fa96cfb425c2a81e618cff28","impliedFormat":99},{"version":"31fd7c12f6e27154efb52a916b872509a771880f3b20f2dfd045785c13aa813f","impliedFormat":99},{"version":"b481de4ab5379bd481ca12fc0b255cdc47341629a22c240a89cdb4e209522be2","impliedFormat":99},{"version":"bdd14f07b4eca0b4b5203b85b8dbc4d084c749fa590bee5ea613e1641dcd3b29","impliedFormat":99},{"version":"427fe2004642504828c1476d0af4270e6ad4db6de78c0b5da3e4c5ca95052a99","impliedFormat":1},{"version":"2eeffcee5c1661ddca53353929558037b8cf305ffb86a803512982f99bcab50d","impliedFormat":99},{"version":"9afb4cb864d297e4092a79ee2871b5d3143ea14153f62ef0bb04ede25f432030","affectsGlobalScope":true,"impliedFormat":99},{"version":"4e258d11c899cb9ff36b4b5c53df59cf4a5ccae9a9931529686e77431e0a3518","affectsGlobalScope":true,"impliedFormat":99},{"version":"a5ae67a67f786ffe92d34b55467a40fb50fb0093e92388cadce6168fa42690fd","impliedFormat":99},{"version":"69bf2422313487956e4dacf049f30cb91b34968912058d244cb19e4baa24da97","impliedFormat":99},{"version":"6987dfb4b0c4e02112cc4e548e7a77b3d9ddfeffa8c8a2db13ceac361a4567d9","impliedFormat":99},{"version":"a534e61c2f06a147d97aebad720db97dffd8066b7142212e46bcbcdcb640b81a","impliedFormat":99},{"version":"ddf569d04470a4d629090d43a16735185001f3fcf0ae036ead99f2ceab62be48","impliedFormat":99},{"version":"b413fbc6658fe2774f8bf9a15cf4c53e586fc38a2d5256b3b9647da242c14389","impliedFormat":99},{"version":"c30a41267fc04c6518b17e55dcb2b810f267af4314b0b6d7df1c33a76ce1b330","impliedFormat":1},{"version":"72422d0bac4076912385d0c10911b82e4694fc106e2d70added091f88f0824ba","impliedFormat":1},{"version":"da251b82c25bee1d93f9fd80c5a61d945da4f708ca21285541d7aff83ecb8200","impliedFormat":1},{"version":"64db14db2bf37ac089766fdb3c7e1160fabc10e9929bc2deeede7237e4419fc8","impliedFormat":1},{"version":"98b94085c9f78eba36d3d2314affe973e8994f99864b8708122750788825c771","impliedFormat":1},{"version":"53c448183c7177c83d3eb0b40824cf8952721a6584cf22052adc24f778986732","impliedFormat":99},{"version":"6c7176368037af28cb72f2392010fa1cef295d6d6744bca8cfb54985f3a18c3e","affectsGlobalScope":true,"impliedFormat":1},{"version":"ab41ef1f2cdafb8df48be20cd969d875602483859dc194e9c97c8a576892c052","affectsGlobalScope":true,"impliedFormat":1},{"version":"437e20f2ba32abaeb7985e0afe0002de1917bc74e949ba585e49feba65da6ca1","affectsGlobalScope":true,"impliedFormat":1},{"version":"21d819c173c0cf7cc3ce57c3276e77fd9a8a01d35a06ad87158781515c9a438a","impliedFormat":1},{"version":"98cffbf06d6bab333473c70a893770dbe990783904002c4f1a960447b4b53dca","affectsGlobalScope":true,"impliedFormat":1},{"version":"3af97acf03cc97de58a3a4bc91f8f616408099bc4233f6d0852e72a8ffb91ac9","affectsGlobalScope":true,"impliedFormat":1},{"version":"808069bba06b6768b62fd22429b53362e7af342da4a236ed2d2e1c89fcca3b4a","affectsGlobalScope":true,"impliedFormat":1},{"version":"1db0b7dca579049ca4193d034d835f6bfe73096c73663e5ef9a0b5779939f3d0","affectsGlobalScope":true,"impliedFormat":1},{"version":"9798340ffb0d067d69b1ae5b32faa17ab31b82466a3fc00d8f2f2df0c8554aaa","affectsGlobalScope":true,"impliedFormat":1},{"version":"f26b11d8d8e4b8028f1c7d618b22274c892e4b0ef5b3678a8ccbad85419aef43","affectsGlobalScope":true,"impliedFormat":1},{"version":"4967529644e391115ca5592184d4b63980569adf60ee685f968fd59ab1557188","impliedFormat":1},{"version":"5929864ce17fba74232584d90cb721a89b7ad277220627cc97054ba15a98ea8f","impliedFormat":1},{"version":"763fe0f42b3d79b440a9b6e51e9ba3f3f91352469c1e4b3b67bfa4ff6352f3f4","impliedFormat":1},{"version":"25c8056edf4314820382a5fdb4bb7816999acdcb929c8f75e3f39473b87e85bc","impliedFormat":1},{"version":"c464d66b20788266e5353b48dc4aa6bc0dc4a707276df1e7152ab0c9ae21fad8","impliedFormat":1},{"version":"78d0d27c130d35c60b5e5566c9f1e5be77caf39804636bc1a40133919a949f21","impliedFormat":1},{"version":"c6fd2c5a395f2432786c9cb8deb870b9b0e8ff7e22c029954fabdd692bff6195","impliedFormat":1},{"version":"1d6e127068ea8e104a912e42fc0a110e2aa5a66a356a917a163e8cf9a65e4a75","impliedFormat":1},{"version":"5ded6427296cdf3b9542de4471d2aa8d3983671d4cac0f4bf9c637208d1ced43","impliedFormat":1},{"version":"7f182617db458e98fc18dfb272d40aa2fff3a353c44a89b2c0ccb3937709bfb5","impliedFormat":1},{"version":"cadc8aced301244057c4e7e73fbcae534b0f5b12a37b150d80e5a45aa4bebcbd","impliedFormat":1},{"version":"385aab901643aa54e1c36f5ef3107913b10d1b5bb8cbcd933d4263b80a0d7f20","impliedFormat":1},{"version":"9670d44354bab9d9982eca21945686b5c24a3f893db73c0dae0fd74217a4c219","impliedFormat":1},{"version":"0b8a9268adaf4da35e7fa830c8981cfa22adbbe5b3f6f5ab91f6658899e657a7","impliedFormat":1},{"version":"11396ed8a44c02ab9798b7dca436009f866e8dae3c9c25e8c1fbc396880bf1bb","impliedFormat":1},{"version":"ba7bc87d01492633cb5a0e5da8a4a42a1c86270e7b3d2dea5d156828a84e4882","impliedFormat":1},{"version":"4893a895ea92c85345017a04ed427cbd6a1710453338df26881a6019432febdd","impliedFormat":1},{"version":"c21dc52e277bcfc75fac0436ccb75c204f9e1b3fa5e12729670910639f27343e","impliedFormat":1},{"version":"13f6f39e12b1518c6650bbb220c8985999020fe0f21d818e28f512b7771d00f9","impliedFormat":1},{"version":"9b5369969f6e7175740bf51223112ff209f94ba43ecd3bb09eefff9fd675624a","impliedFormat":1},{"version":"4fe9e626e7164748e8769bbf74b538e09607f07ed17c2f20af8d680ee49fc1da","impliedFormat":1},{"version":"24515859bc0b836719105bb6cc3d68255042a9f02a6022b3187948b204946bd2","impliedFormat":1},{"version":"ea0148f897b45a76544ae179784c95af1bd6721b8610af9ffa467a518a086a43","impliedFormat":1},{"version":"24c6a117721e606c9984335f71711877293a9651e44f59f3d21c1ea0856f9cc9","impliedFormat":1},{"version":"dd3273ead9fbde62a72949c97dbec2247ea08e0c6952e701a483d74ef92d6a17","impliedFormat":1},{"version":"405822be75ad3e4d162e07439bac80c6bcc6dbae1929e179cf467ec0b9ee4e2e","impliedFormat":1},{"version":"0db18c6e78ea846316c012478888f33c11ffadab9efd1cc8bcc12daded7a60b6","impliedFormat":1},{"version":"e61be3f894b41b7baa1fbd6a66893f2579bfad01d208b4ff61daef21493ef0a8","impliedFormat":1},{"version":"bd0532fd6556073727d28da0edfd1736417a3f9f394877b6d5ef6ad88fba1d1a","impliedFormat":1},{"version":"89167d696a849fce5ca508032aabfe901c0868f833a8625d5a9c6e861ef935d2","impliedFormat":1},{"version":"615ba88d0128ed16bf83ef8ccbb6aff05c3ee2db1cc0f89ab50a4939bfc1943f","impliedFormat":1},{"version":"a4d551dbf8746780194d550c88f26cf937caf8d56f102969a110cfaed4b06656","impliedFormat":1},{"version":"8bd86b8e8f6a6aa6c49b71e14c4ffe1211a0e97c80f08d2c8cc98838006e4b88","impliedFormat":1},{"version":"317e63deeb21ac07f3992f5b50cdca8338f10acd4fbb7257ebf56735bf52ab00","impliedFormat":1},{"version":"4732aec92b20fb28c5fe9ad99521fb59974289ed1e45aecb282616202184064f","impliedFormat":1},{"version":"2e85db9e6fd73cfa3d7f28e0ab6b55417ea18931423bd47b409a96e4a169e8e6","impliedFormat":1},{"version":"c46e079fe54c76f95c67fb89081b3e399da2c7d109e7dca8e4b58d83e332e605","impliedFormat":1},{"version":"bf67d53d168abc1298888693338cb82854bdb2e69ef83f8a0092093c2d562107","impliedFormat":1},{"version":"b52476feb4a0cbcb25e5931b930fc73cb6643fb1a5060bf8a3dda0eeae5b4b68","affectsGlobalScope":true,"impliedFormat":1},{"version":"f9501cc13ce624c72b61f12b3963e84fad210fbdf0ffbc4590e08460a3f04eba","affectsGlobalScope":true,"impliedFormat":1},{"version":"e7721c4f69f93c91360c26a0a84ee885997d748237ef78ef665b153e622b36c1","affectsGlobalScope":true,"impliedFormat":1},{"version":"0fa06ada475b910e2106c98c68b10483dc8811d0c14a8a8dd36efb2672485b29","impliedFormat":1},{"version":"33e5e9aba62c3193d10d1d33ae1fa75c46a1171cf76fef750777377d53b0303f","impliedFormat":1},{"version":"2b06b93fd01bcd49d1a6bd1f9b65ddcae6480b9a86e9061634d6f8e354c1468f","impliedFormat":1},{"version":"6a0cd27e5dc2cfbe039e731cf879d12b0e2dded06d1b1dedad07f7712de0d7f4","affectsGlobalScope":true,"impliedFormat":1},{"version":"13f5c844119c43e51ce777c509267f14d6aaf31eafb2c2b002ca35584cd13b29","impliedFormat":1},{"version":"e60477649d6ad21542bd2dc7e3d9ff6853d0797ba9f689ba2f6653818999c264","impliedFormat":1},{"version":"c2510f124c0293ab80b1777c44d80f812b75612f297b9857406468c0f4dafe29","affectsGlobalScope":true,"impliedFormat":1},{"version":"5524481e56c48ff486f42926778c0a3cce1cc85dc46683b92b1271865bcf015a","impliedFormat":1},{"version":"4c829ab315f57c5442c6667b53769975acbf92003a66aef19bce151987675bd1","affectsGlobalScope":true,"impliedFormat":1},{"version":"b2ade7657e2db96d18315694789eff2ddd3d8aea7215b181f8a0b303277cc579","impliedFormat":1},{"version":"9855e02d837744303391e5623a531734443a5f8e6e8755e018c41d63ad797db2","impliedFormat":1},{"version":"4d631b81fa2f07a0e63a9a143d6a82c25c5f051298651a9b69176ba28930756d","impliedFormat":1},{"version":"836a356aae992ff3c28a0212e3eabcb76dd4b0cc06bcb9607aeef560661b860d","impliedFormat":1},{"version":"1e0d1f8b0adfa0b0330e028c7941b5a98c08b600efe7f14d2d2a00854fb2f393","impliedFormat":1},{"version":"41670ee38943d9cbb4924e436f56fc19ee94232bc96108562de1a734af20dc2c","affectsGlobalScope":true,"impliedFormat":1},{"version":"c906fb15bd2aabc9ed1e3f44eb6a8661199d6c320b3aa196b826121552cb3695","impliedFormat":1},{"version":"22295e8103f1d6d8ea4b5d6211e43421fe4564e34d0dd8e09e520e452d89e659","impliedFormat":1},{"version":"f949f7f6c7802a338039cfc2156d1fe285cdd1e092c64437ebe15ae8edc854e0","impliedFormat":1},{"version":"6b4e081d55ac24fc8a4631d5dd77fe249fa25900abd7d046abb87d90e3b45645","impliedFormat":1},{"version":"a10f0e1854f3316d7ee437b79649e5a6ae3ae14ffe6322b02d4987071a95362e","impliedFormat":1},{"version":"e208f73ef6a980104304b0d2ca5f6bf1b85de6009d2c7e404028b875020fa8f2","impliedFormat":1},{"version":"d163b6bc2372b4f07260747cbc6c0a6405ab3fbcea3852305e98ac43ca59f5bc","impliedFormat":1},{"version":"e6fa9ad47c5f71ff733744a029d1dc472c618de53804eae08ffc243b936f87ff","affectsGlobalScope":true,"impliedFormat":1},{"version":"83e63d6ccf8ec004a3bb6d58b9bb0104f60e002754b1e968024b320730cc5311","impliedFormat":1},{"version":"24826ed94a78d5c64bd857570fdbd96229ad41b5cb654c08d75a9845e3ab7dde","impliedFormat":1},{"version":"8b479a130ccb62e98f11f136d3ac80f2984fdc07616516d29881f3061f2dd472","impliedFormat":1},{"version":"928af3d90454bf656a52a48679f199f64c1435247d6189d1caf4c68f2eaf921f","affectsGlobalScope":true,"impliedFormat":1},{"version":"d2bc7425ef40526650d6db7e072c1ff4a51101c3ac2cc4b666623b19496a6e27","affectsGlobalScope":true,"impliedFormat":1},{"version":"3f16a7e4deafa527ed9995a772bb380eb7d3c2c0fd4ae178c5263ed18394db2c","impliedFormat":1},{"version":"933921f0bb0ec12ef45d1062a1fc0f27635318f4d294e4d99de9a5493e618ca2","impliedFormat":1},{"version":"71a0f3ad612c123b57239a7749770017ecfe6b66411488000aba83e4546fde25","impliedFormat":1},{"version":"77fbe5eecb6fac4b6242bbf6eebfc43e98ce5ccba8fa44e0ef6a95c945ff4d98","impliedFormat":1},{"version":"4f9d8ca0c417b67b69eeb54c7ca1bedd7b56034bb9bfd27c5d4f3bc4692daca7","impliedFormat":1},{"version":"814118df420c4e38fe5ae1b9a3bafb6e9c2aa40838e528cde908381867be6466","impliedFormat":1},{"version":"a3fc63c0d7b031693f665f5494412ba4b551fe644ededccc0ab5922401079c95","impliedFormat":1},{"version":"f27524f4bef4b6519c604bdb23bf4465bddcccbf3f003abb901acbd0d7404d99","impliedFormat":1},{"version":"37ba7b45141a45ce6e80e66f2a96c8a5ab1bcef0fc2d0f56bb58df96ec67e972","impliedFormat":1},{"version":"45650f47bfb376c8a8ed39d4bcda5902ab899a3150029684ee4c10676d9fbaee","impliedFormat":1},{"version":"6b039f55681caaf111d5eb84d292b9bee9e0131d0db1ad0871eef0964f533c73","affectsGlobalScope":true,"impliedFormat":1},{"version":"18fd40412d102c5564136f29735e5d1c3b455b8a37f920da79561f1fde068208","impliedFormat":1},{"version":"c8d3e5a18ba35629954e48c4cc8f11dc88224650067a172685c736b27a34a4dc","impliedFormat":1},{"version":"f0be1b8078cd549d91f37c30c222c2a187ac1cf981d994fb476a1adc61387b14","affectsGlobalScope":true,"impliedFormat":1},{"version":"0aaed1d72199b01234152f7a60046bc947f1f37d78d182e9ae09c4289e06a592","impliedFormat":1},{"version":"0dba70b3fb0dcd713fda33c2df64fa6751fff6460e536971cee917260fb17882","impliedFormat":1},{"version":"66ba1b2c3e3a3644a1011cd530fb444a96b1b2dfe2f5e837a002d41a1a799e60","impliedFormat":1},{"version":"7e514f5b852fdbc166b539fdd1f4e9114f29911592a5eb10a94bb3a13ccac3c4","impliedFormat":1},{"version":"5b7aa3c4c1a5d81b411e8cb302b45507fea9358d3569196b27eb1a27ae3a90ef","affectsGlobalScope":true,"impliedFormat":1},{"version":"5987a903da92c7462e0b35704ce7da94d7fdc4b89a984871c0e2b87a8aae9e69","affectsGlobalScope":true,"impliedFormat":1},{"version":"ea08a0345023ade2b47fbff5a76d0d0ed8bff10bc9d22b83f40858a8e941501c","impliedFormat":1},{"version":"47613031a5a31510831304405af561b0ffaedb734437c595256bb61a90f9311b","impliedFormat":1},{"version":"ae062ce7d9510060c5d7e7952ae379224fb3f8f2dd74e88959878af2057c143b","impliedFormat":1},{"version":"8a1a0d0a4a06a8d278947fcb66bf684f117bf147f89b06e50662d79a53be3e9f","affectsGlobalScope":true,"impliedFormat":1},{"version":"9f663c2f91127ef7024e8ca4b3b4383ff2770e5f826696005de382282794b127","impliedFormat":1},{"version":"9f55299850d4f0921e79b6bf344b47c420ce0f507b9dcf593e532b09ea7eeea1","impliedFormat":1},{"version":"151ff381ef9ff8da2da9b9663ebf657eac35c4c9a19183420c05728f31a6761d","impliedFormat":1},{"version":"ee70b8037ecdf0de6c04f35277f253663a536d7e38f1539d270e4e916d225a3f","affectsGlobalScope":true,"impliedFormat":1},{"version":"a660aa95476042d3fdcc1343cf6bb8fdf24772d31712b1db321c5a4dcc325434","impliedFormat":1},{"version":"161c8e0690c46021506e32fda85956d785b70f309ae97011fd27374c065cac9b","affectsGlobalScope":true,"impliedFormat":1},{"version":"f582b0fcbf1eea9b318ab92fb89ea9ab2ebb84f9b60af89328a91155e1afce72","impliedFormat":1},{"version":"402e5c534fb2b85fa771170595db3ac0dd532112c8fa44fc23f233bc6967488b","impliedFormat":1},{"version":"8885cf05f3e2abf117590bbb951dcf6359e3e5ac462af1c901cfd24c6a6472e2","impliedFormat":1},{"version":"333caa2bfff7f06017f114de738050dd99a765c7eb16571c6d25a38c0d5365dc","impliedFormat":1},{"version":"e61df3640a38d535fd4bc9f4a53aef17c296b58dc4b6394fd576b808dd2fe5e6","impliedFormat":1},{"version":"459920181700cec8cbdf2a5faca127f3f17fd8dd9d9e577ed3f5f3af5d12a2e4","impliedFormat":1},{"version":"4719c209b9c00b579553859407a7e5dcfaa1c472994bd62aa5dd3cc0757eb077","impliedFormat":1},{"version":"7ec359bbc29b69d4063fe7dad0baaf35f1856f914db16b3f4f6e3e1bca4099fa","impliedFormat":1},{"version":"70790a7f0040993ca66ab8a07a059a0f8256e7bb57d968ae945f696cbff4ac7a","impliedFormat":1},{"version":"d1b9a81e99a0050ca7f2d98d7eedc6cda768f0eb9fa90b602e7107433e64c04c","impliedFormat":1},{"version":"a022503e75d6953d0e82c2c564508a5c7f8556fad5d7f971372d2d40479e4034","impliedFormat":1},{"version":"b215c4f0096f108020f666ffcc1f072c81e9f2f95464e894a5d5f34c5ea2a8b1","impliedFormat":1},{"version":"644491cde678bd462bb922c1d0cfab8f17d626b195ccb7f008612dc31f445d2d","impliedFormat":1},{"version":"dfe54dab1fa4961a6bcfba68c4ca955f8b5bbeb5f2ab3c915aa7adaa2eabc03a","impliedFormat":1},{"version":"1251d53755b03cde02466064260bb88fd83c30006a46395b7d9167340bc59b73","impliedFormat":1},{"version":"47865c5e695a382a916b1eedda1b6523145426e48a2eae4647e96b3b5e52024f","impliedFormat":1},{"version":"4cdf27e29feae6c7826cdd5c91751cc35559125e8304f9e7aed8faef97dcf572","impliedFormat":1},{"version":"331b8f71bfae1df25d564f5ea9ee65a0d847c4a94baa45925b6f38c55c7039bf","impliedFormat":1},{"version":"2a771d907aebf9391ac1f50e4ad37952943515eeea0dcc7e78aa08f508294668","impliedFormat":1},{"version":"0146fd6262c3fd3da51cb0254bb6b9a4e42931eb2f56329edd4c199cb9aaf804","impliedFormat":1},{"version":"183f480885db5caa5a8acb833c2be04f98056bdcc5fb29e969ff86e07efe57ab","impliedFormat":99},{"version":"960bd764c62ac43edc24eaa2af958a4b4f1fa5d27df5237e176d0143b36a39c6","affectsGlobalScope":true,"impliedFormat":1},{"version":"3fd8a5aefd8c3feb3936ca66f5aa89dff7bf6e6537b4158dbd0f6e0d65ed3b9e","impliedFormat":1},{"version":"a18642ddf216f162052a16cba0944892c4c4c977d3306a87cb673d46abbb0cbf","impliedFormat":1},{"version":"509f8efdfc5f9f6b52284170e8d7413552f02d79518d1db691ee15acc0088676","impliedFormat":1},{"version":"4ec16d7a4e366c06a4573d299e15fe6207fc080f41beac5da06f4af33ea9761e","impliedFormat":1},{"version":"59f8dc89b9e724a6a667f52cdf4b90b6816ae6c9842ce176d38fcc973669009e","affectsGlobalScope":true,"impliedFormat":1},{"version":"e4af494f7a14b226bbe732e9c130d8811f8c7025911d7c58dd97121a85519715","impliedFormat":1},{"version":"47416e41b1af81e53e8c3cc5bf909d47ff632a7b6eddfe7ff43d187b4dcca047","impliedFormat":99},{"version":"213a00d511892898e9dad3c98efe3b1de230f171b9e91496faca3e40e27ef6a7","impliedFormat":99},{"version":"62486ec77ac020b82d5a65a270096bb7f2a1fd0627a89f29c5a5d3cbd6bd1f59","impliedFormat":99},{"version":"c637a793905f02d354b640fae41a6ae79395ed0d77fbb87c36d9664ecbd95ac1","impliedFormat":99},{"version":"437b7613a30a2fcde463f7b707c6d5567a8823fbc51de50b8641bf5b1d126fad","impliedFormat":99},{"version":"63ea959e28c110923f495576e614fb8b36c09b6828b467b2c7cd7f03b03ccf9f","impliedFormat":99},{"version":"1601a95dbb33059fc3d12638ed2a9aecff899e339c5c0f3a0b28768866d385b4","impliedFormat":99},{"version":"a8dd232837b1d83f76a47a5193c1afd9e17b9bf352cb84345f86f7759ee346d0","impliedFormat":99},{"version":"be5fc0dd37f64420b0423059370b8319521e0b58060d7b07b8f62fe1c145b02e","impliedFormat":99},{"version":"45f770f2ae71acc1cacfac137f50911e1a004ccba52b2b55c4432c0d4bd97814","impliedFormat":99},{"version":"8124828a11be7db984fcdab052fd4ff756b18edcfa8d71118b55388176210923","impliedFormat":99},{"version":"b62006bbc815fe8190c7aee262aad6bff993e3f9ade70d7057dfceab6de79d2f","impliedFormat":99},{"version":"a20c4976da01d1c823b165275cef98a896d4758388c6409bc4ce24f0a5b49900","impliedFormat":99},{"version":"dffffa77f7716aa110e4253c6cd73a067e4729d95c97a538dbb20e58f0eb3e1d","impliedFormat":99},{"version":"0daddd6f389da2b55770e95c9ef8831bf2520aab44fb941bae38bb7ddfe1d6b6","impliedFormat":99},{"version":"7bbff6783e96c691a41a7cf12dd5486b8166a01b0c57d071dbcfca55c9525ec4","impliedFormat":99},{"version":"556ccd493ec36c7d7cb130d51be66e147b91cc1415be383d71da0f1e49f742a9","impliedFormat":1},{"version":"b6d03c9cfe2cf0ba4c673c209fcd7c46c815b2619fd2aad59fc4229aaef2ed43","impliedFormat":1},{"version":"95aba78013d782537cc5e23868e736bec5d377b918990e28ed56110e3ae8b958","impliedFormat":1},{"version":"670a76db379b27c8ff42f1ba927828a22862e2ab0b0908e38b671f0e912cc5ed","impliedFormat":1},{"version":"13b77ab19ef7aadd86a1e54f2f08ea23a6d74e102909e3c00d31f231ed040f62","impliedFormat":1},{"version":"069bebfee29864e3955378107e243508b163e77ab10de6a5ee03ae06939f0bb9","impliedFormat":1},{"version":"ef94438f848be3a3b0033013bf64753f771f983c1e205e4a06675eb253ca7cd2","impliedFormat":99},{"version":"cdecc758617936c98ad8d8bd198c032f3bdefc7136cf2fcad1b69f101f4aafd4","signature":"4b96dd19fd2949d28ce80e913412b0026dc421e5bf6c31d87c7b5eb11b5753b4"},{"version":"ae77d81a5541a8abb938a0efedf9ac4bea36fb3a24cc28cfa11c598863aba571","impliedFormat":1},{"version":"b1538a92b9bae8d230267210c5db38c2eb6bdb352128a3ce3aa8c6acf9fc9622","impliedFormat":1},{"version":"6fc1a4f64372593767a9b7b774e9b3b92bf04e8785c3f9ea98973aa9f4bbe490","impliedFormat":1},{"version":"ff09b6fbdcf74d8af4e131b8866925c5e18d225540b9b19ce9485ca93e574d84","impliedFormat":1},{"version":"d5895252efa27a50f134a9b580aa61f7def5ab73d0a8071f9b5bf9a317c01c2d","impliedFormat":1},{"version":"2c378d9368abcd2eba8c29b294d40909845f68557bc0b38117e4f04fc56e5f9c","impliedFormat":1},{"version":"56208c500dcb5f42be7e18e8cb578f257a1a89b94b3280c506818fed06391805","impliedFormat":1},{"version":"0c94c2e497e1b9bcfda66aea239d5d36cd980d12a6d9d59e66f4be1fa3da5d5a","impliedFormat":1},{"version":"9b048390bcffe88c023a4cd742a720b41d4cd7df83bc9270e6f2339bf38de278","affectsGlobalScope":true,"impliedFormat":1},{"version":"1f366bde16e0513fa7b64f87f86689c4d36efd85afce7eb24753e9c99b91c319","impliedFormat":1},{"version":"f3d8c757e148ad968f0d98697987db363070abada5f503da3c06aefd9d4248c1","impliedFormat":1},{"version":"7e29f41b158de217f94cb9676bf9cbd0cd9b5a46e1985141ed36e075c52bf6ad","affectsGlobalScope":true,"impliedFormat":1},{"version":"ac51dd7d31333793807a6abaa5ae168512b6131bd41d9c5b98477fc3b7800f9f","impliedFormat":1},{"version":"dc0a7f107690ee5cd8afc8dbf05c4df78085471ce16bdd9881642ec738bc81fe","impliedFormat":1},{"version":"be1cc4d94ea60cbe567bc29ed479d42587bf1e6cba490f123d329976b0fe4ee5","impliedFormat":1},{"version":"7fa8d75d229eeaee235a801758d9c694e94405013fe77d5d1dd8e3201fc414f1","impliedFormat":1}],"root":[266],"options":{"composite":true,"module":99,"skipLibCheck":true,"strict":true,"target":9},"referencedMap":[[261,1],[259,2],[89,2],[267,2],[264,3],[260,1],[262,4],[263,1],[92,5],[268,2],[269,2],[270,2],[271,6],[272,2],[274,7],[275,8],[273,2],[276,2],[90,2],[211,2],[277,2],[157,9],[158,9],[159,10],[111,11],[160,12],[161,13],[162,14],[106,2],[109,15],[107,2],[108,2],[163,16],[164,17],[165,18],[166,19],[167,20],[168,21],[169,21],[170,22],[171,23],[172,24],[173,25],[112,2],[110,2],[174,26],[175,27],[176,28],[210,29],[177,30],[178,2],[179,31],[180,32],[181,33],[182,34],[183,35],[184,36],[185,37],[186,38],[187,39],[188,39],[189,40],[190,2],[191,41],[192,42],[194,43],[193,44],[195,45],[196,46],[197,47],[198,48],[199,49],[200,50],[201,51],[202,52],[203,53],[204,54],[205,55],[206,56],[207,57],[113,2],[114,2],[115,2],[154,58],[155,2],[156,2],[208,59],[209,60],[281,61],[278,2],[280,62],[282,2],[265,63],[93,64],[245,65],[246,66],[244,2],[62,2],[72,67],[68,68],[71,69],[94,70],[79,2],[81,71],[254,71],[80,72],[87,2],[70,73],[63,74],[250,75],[65,76],[67,77],[249,2],[247,76],[66,2],[69,74],[64,2],[91,2],[116,2],[279,2],[214,2],[102,78],[104,79],[103,80],[101,81],[100,2],[237,2],[239,82],[238,2],[232,83],[230,84],[231,85],[219,86],[220,84],[227,87],[218,88],[223,89],[233,2],[224,90],[229,91],[235,92],[234,93],[217,94],[225,95],[226,96],[221,97],[228,83],[222,98],[213,99],[212,100],[216,2],[95,2],[88,2],[60,2],[61,2],[12,2],[11,2],[2,2],[13,2],[14,2],[15,2],[16,2],[17,2],[18,2],[19,2],[20,2],[3,2],[21,2],[22,2],[4,2],[23,2],[27,2],[24,2],[25,2],[26,2],[28,2],[29,2],[30,2],[5,2],[31,2],[32,2],[33,2],[34,2],[6,2],[38,2],[35,2],[36,2],[37,2],[39,2],[7,2],[40,2],[45,2],[46,2],[41,2],[42,2],[43,2],[44,2],[8,2],[50,2],[47,2],[48,2],[49,2],[51,2],[9,2],[52,2],[53,2],[54,2],[56,2],[55,2],[57,2],[58,2],[10,2],[59,2],[1,2],[132,101],[142,102],[131,101],[152,103],[123,104],[122,105],[151,106],[145,107],[150,108],[125,109],[139,110],[124,111],[148,112],[120,113],[119,106],[149,114],[121,115],[126,116],[127,2],[130,116],[117,2],[153,117],[143,118],[134,119],[135,120],[137,121],[133,122],[136,123],[146,106],[128,124],[129,125],[138,126],[118,127],[141,118],[140,116],[144,2],[147,128],[75,129],[243,130],[78,131],[76,129],[74,2],[77,132],[241,2],[236,2],[240,133],[215,2],[242,134],[252,135],[258,136],[251,137],[96,138],[86,139],[82,140],[248,2],[83,68],[99,141],[97,142],[256,143],[255,144],[84,145],[98,146],[73,2],[85,147],[257,148],[105,149],[253,2],[266,150]],"latestChangedDtsFile":"./vite.config.d.ts","version":"5.9.3"}
\ No newline at end of file
diff --git a/frontend/tsconfig.tsbuildinfo b/frontend/tsconfig.tsbuildinfo
index 8f0f169..2bb3d2c 100644
--- a/frontend/tsconfig.tsbuildinfo
+++ b/frontend/tsconfig.tsbuildinfo
@@ -1 +1,3 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/landingpage/landingpage.tsx","./src/landingpage/sections/hero/hero.tsx","./src/landingpage/sections/howitworks/howitworks.tsx","./src/landingpage/sections/whynavin/whynavin.tsx","./src/components/navbar/navbar.tsx","./src/components/auth/protectedroute/protectedroute.test.tsx","./src/components/auth/protectedroute/protectedroute.tsx","./src/components/auth/walletconnectbutton/walletconnectbutton.tsx","./src/components/dashboard/charts/deliverysuccesschart/deliverysuccesschart.test.tsx","./src/components/dashboard/charts/deliverysuccesschart/deliverysuccesschart.tsx","./src/components/dashboard/charts/deliverysuccesschart/mockdeliverydata.ts","./src/components/dashboard/charts/shipmentvolumechart/shipmentvolumechart.test.tsx","./src/components/dashboard/charts/shipmentvolumechart/shipmentvolumechart.tsx","./src/components/dashboard/charts/shipmentvolumechart/mockvolumedata.ts","./src/components/layout/dashboardlayout.tsx","./src/components/layout/topheader/topheader.tsx","./src/components/shipment/statusupdate/statusupdate.test.tsx","./src/components/shipment/statusupdate/statusupdate.tsx","./src/components/shipment/trackingtimeline/trackingtimeline.example.tsx","./src/components/shipment/trackingtimeline/trackingtimeline.test.tsx","./src/components/shipment/trackingtimeline/trackingtimeline.tsx","./src/hooks/useauth.ts","./src/pages/analytics/analytics.tsx","./src/pages/blockchainledger/blockchainledger.tsx","./src/pages/helpcenter/helpcenter.tsx","./src/pages/home/home.tsx","./src/pages/landingpage/sections/features/features.tsx","./src/pages/settings/settings.tsx","./src/pages/settlements/settlements.tsx","./src/pages/shipments/shipments.tsx","./src/pages/auth/forgotpassword/forgotpassword.tsx","./src/pages/auth/login/login.tsx","./src/pages/auth/signup/signup.tsx","./src/pages/dashboard/dashboard.tsx","./src/pages/dashboard/company/companydashboard.tsx","./src/pages/dashboard/company/createshipment/createshipment.tsx","./src/pages/dashboard/company/recentshipments/recentshipments.test.tsx","./src/pages/dashboard/company/recentshipments/recentshipments.tsx","./src/pages/dashboard/company/recentshipments/mockshipments.ts","./src/pages/dashboard/company/settings/companysettings.tsx","./src/pages/dashboard/company/usermanagement/usermanagement.tsx","./src/pages/dashboard/customer/customerdashboard.tsx","./src/pages/dashboard/customer/activeshipments/activeshipments.tsx","./src/test/app.test.tsx","./src/test/setup.ts"],"version":"5.9.3"}
\ No newline at end of file
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/landingpage/landingpage.tsx","./src/landingpage/sections/hero/hero.tsx","./src/landingpage/sections/howitworks/howitworks.tsx","./src/landingpage/sections/whynavin/whynavin.tsx","./src/components/navbar/navbar.tsx","./src/components/auth/protectedroute/protectedroute.test.tsx","./src/components/auth/protectedroute/protectedroute.tsx","./src/components/auth/walletconnectbutton/walletconnectbutton.tsx","./src/components/dashboard/charts/deliverysuccesschart/deliverysuccesschart.test.tsx","./src/components/dashboard/charts/deliverysuccesschart/deliverysuccesschart.tsx","./src/components/dashboard/charts/deliverysuccesschart/mockdeliverydata.ts","./src/components/dashboard/charts/shipmentvolumechart/shipmentvolumechart.test.tsx","./src/components/dashboard/charts/shipmentvolumechart/shipmentvolumechart.tsx","./src/components/dashboard/charts/shipmentvolumechart/mockvolumedata.ts","./src/components/layout/dashboardlayout.tsx","./src/components/layout/topheader/topheader.tsx","./src/components/shipment/statusupdate/statusupdate.test.tsx","./src/components/shipment/statusupdate/statusupdate.tsx","./src/components/shipment/trackingtimeline/trackingtimeline.example.tsx","./src/components/shipment/trackingtimeline/trackingtimeline.test.tsx","./src/components/shipment/trackingtimeline/trackingtimeline.tsx","./src/components/ui/statusbadge/statusbadge.tsx","./src/components/ui/statusbadge/index.ts","./src/hooks/useauth.ts","./src/pages/analytics/analytics.tsx","./src/pages/blockchainledger/blockchainledger.tsx","./src/pages/helpcenter/helpcenter.tsx","./src/pages/home/home.tsx","./src/pages/landingpage/sections/features/features.tsx","./src/pages/settings/settings.tsx","./src/pages/settlements/settlements.tsx","./src/pages/shipment/shipmentdetail.tsx","./src/pages/shipment/sections/shipmentheader/shipmentheader.tsx","./src/pages/shipments/shipments.tsx","./src/pages/auth/forgotpassword/forgotpassword.tsx","./src/pages/auth/login/login.tsx","./src/pages/auth/signup/signup.tsx","./src/pages/dashboard/dashboard.tsx","./src/pages/dashboard/company/companydashboard.tsx","./src/pages/dashboard/company/createshipment/createshipment.tsx","./src/pages/dashboard/company/recentshipments/recentshipments.test.tsx","./src/pages/dashboard/company/recentshipments/recentshipments.tsx","./src/pages/dashboard/company/recentshipments/mockshipments.ts","./src/pages/dashboard/company/settings/companysettings.tsx","./src/pages/dashboard/company/usermanagement/usermanagement.tsx","./src/pages/dashboard/customer/customerdashboard.tsx","./src/pages/dashboard/customer/activeshipments/activeshipments.tsx","./src/test/app.test.tsx","./src/test/setup.ts"],"version":"5.9.3"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/landingpage/landingpage.tsx","./src/landingpage/sections/hero/hero.tsx","./src/landingpage/sections/howitworks/howitworks.tsx","./src/landingpage/sections/whynavin/whynavin.tsx","./src/components/index.ts","./src/components/button/button.tsx","./src/components/button/index.ts","./src/components/card/card.tsx","./src/components/card/index.ts","./src/components/errorboundary/errorboundary.tsx","./src/components/navbar/navbar.tsx","./src/components/navbar/index.ts","./src/components/auth/protectedroute/protectedroute.test.tsx","./src/components/auth/protectedroute/protectedroute.tsx","./src/components/auth/protectedroute/index.ts","./src/components/auth/walletconnectbutton/walletconnectbutton.tsx","./src/components/auth/walletconnectbutton/index.ts","./src/components/common/breadcrumb/breadcrumb.tsx","./src/components/common/breadcrumb/index.ts","./src/components/common/breadcrumb/types.ts","./src/components/common/datatable/datatable.example.tsx","./src/components/common/datatable/datatable.tsx","./src/components/common/datatable/index.ts","./src/components/common/datatable/types.ts","./src/components/common/emptystate/emptystate.tsx","./src/components/common/emptystate/index.ts","./src/components/common/emptystate/types.ts","./src/components/common/modal/modal.tsx","./src/components/common/modal/index.ts","./src/components/common/pagination/pagination.example.tsx","./src/components/common/pagination/pagination.tsx","./src/components/common/pagination/index.ts","./src/components/common/pagination/types.ts","./src/components/common/statusbadge/statusbadge.tsx","./src/components/common/statusbadge/index.ts","./src/components/common/statusbadge/statusbadgevariants.ts","./src/components/dashboard/charts/deliverysuccesschart/deliverysuccesschart.test.tsx","./src/components/dashboard/charts/deliverysuccesschart/deliverysuccesschart.tsx","./src/components/dashboard/charts/deliverysuccesschart/index.ts","./src/components/dashboard/charts/deliverysuccesschart/mockdeliverydata.ts","./src/components/dashboard/charts/shipmentvolumechart/shipmentvolumechart.test.tsx","./src/components/dashboard/charts/shipmentvolumechart/shipmentvolumechart.tsx","./src/components/dashboard/charts/shipmentvolumechart/index.ts","./src/components/dashboard/charts/shipmentvolumechart/mockvolumedata.ts","./src/components/dashboard/statcard/statcard.tsx","./src/components/dashboard/statcard/index.ts","./src/components/layout/dashboardlayout.tsx","./src/components/layout/sidebar/sidebar.tsx","./src/components/layout/sidebar/index.ts","./src/components/layout/topheader/topheader.tsx","./src/components/layout/topheader/index.ts","./src/components/notifications/notificationdropdown/notificationdropdown.test.tsx","./src/components/notifications/notificationdropdown/notificationdropdown.tsx","./src/components/notifications/notificationdropdown/index.ts","./src/components/notifications/toast/toast.test.tsx","./src/components/notifications/toast/toast.tsx","./src/components/shipment/deliveryconfirmation/deliveryconfirmation.test.tsx","./src/components/shipment/deliveryconfirmation/deliveryconfirmation.tsx","./src/components/shipment/statusupdate/statusupdate.test.tsx","./src/components/shipment/statusupdate/statusupdate.tsx","./src/components/shipment/statusupdate/index.ts","./src/components/shipment/trackingtimeline/trackingtimeline.example.tsx","./src/components/shipment/trackingtimeline/trackingtimeline.test.tsx","./src/components/shipment/trackingtimeline/trackingtimeline.tsx","./src/components/shipment/trackingtimeline/index.ts","./src/context/toastcontext.tsx","./src/hooks/index.ts","./src/hooks/useauth.ts","./src/pages/analytics/analytics.tsx","./src/pages/blockchainledger/blockchainledger.tsx","./src/pages/componentdemos/paginationdemo/paginationdemo.tsx","./src/pages/helpcenter/helpcenter.tsx","./src/pages/home/home.tsx","./src/pages/landingpage/sections/features/features.tsx","./src/pages/notifications/notificationspage.tsx","./src/pages/payments/paymentdetailmodal/paymentdetailmodal.tsx","./src/pages/payments/paymenthistory/paymenthistory.tsx","./src/pages/payments/paymentsummarycards/paymentsummarycards.tsx","./src/pages/payments/paymentsummarycards/index.ts","./src/pages/settings/settings.tsx","./src/pages/settings/notificationpreferences/notificationpreferences.test.tsx","./src/pages/settings/notificationpreferences/notificationpreferences.tsx","./src/pages/settlements/settlements.tsx","./src/pages/shipmentdetail/shipmentdetail.tsx","./src/pages/shipmentdetail/index.ts","./src/pages/shipmentdetail/deliveryproofupload/deliveryproofupload.tsx","./src/pages/shipmentdetail/milestonetimeline/milestonetimeline.example.tsx","./src/pages/shipmentdetail/milestonetimeline/milestonetimeline.test.tsx","./src/pages/shipmentdetail/milestonetimeline/milestonetimeline.tsx","./src/pages/shipmentdetail/paymentstatus/paymentstatus.tsx","./src/pages/shipmentdetail/sensordatacards/sensordatacards.tsx","./src/pages/shipmentdetail/shipmentdetailheader/shipmentdetailheader.tsx","./src/pages/shipmentdetail/shipmentdetailheader/index.ts","./src/pages/shipmentdetail/shipmentmap/shipmentmap.test.tsx","./src/pages/shipmentdetail/shipmentmap/shipmentmap.tsx","./src/pages/shipments/shipments.tsx","./src/pages/auth/forgotpassword/forgotpassword.tsx","./src/pages/auth/login/login.tsx","./src/pages/auth/signup/signup.tsx","./src/pages/dashboard/dashboard.tsx","./src/pages/dashboard/company/companydashboard.tsx","./src/pages/dashboard/company/createshipment/createshipment.tsx","./src/pages/dashboard/company/recentshipments/recentshipments.test.tsx","./src/pages/dashboard/company/recentshipments/recentshipments.tsx","./src/pages/dashboard/company/recentshipments/mockshipments.ts","./src/pages/dashboard/company/settings/companysettings.tsx","./src/pages/dashboard/company/usermanagement/usermanagement.tsx","./src/pages/dashboard/customer/customerdashboard.tsx","./src/pages/dashboard/customer/activeshipments/activeshipments.test.tsx","./src/pages/dashboard/customer/activeshipments/activeshipments.tsx","./src/pages/dashboard/customer/profile/customerprofile.tsx","./src/pages/dashboard/customer/shipmenthistory/shipmenthistory.tsx","./src/services/api/client.ts","./src/services/api/index.ts","./src/services/api/endpoints/auth.ts","./src/services/api/endpoints/shipments.ts","./src/services/api/interceptors/authinterceptor.ts","./src/services/api/interceptors/errorinterceptor.ts","./src/test/app.test.tsx","./src/test/setup.ts"],"version":"5.9.3"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/landingpage/landingpage.tsx","./src/landingpage/sections/hero/hero.tsx","./src/landingpage/sections/howitworks/howitworks.tsx","./src/landingpage/sections/whynavin/whynavin.tsx","./src/components/index.ts","./src/components/button/button.tsx","./src/components/button/index.ts","./src/components/card/card.tsx","./src/components/card/index.ts","./src/components/errorboundary/errorboundary.tsx","./src/components/navbar/navbar.tsx","./src/components/navbar/index.ts","./src/components/auth/protectedroute/protectedroute.test.tsx","./src/components/auth/protectedroute/protectedroute.tsx","./src/components/auth/protectedroute/index.ts","./src/components/auth/walletconnectbutton/walletconnectbutton.tsx","./src/components/auth/walletconnectbutton/index.ts","./src/components/common/breadcrumb/breadcrumb.tsx","./src/components/common/breadcrumb/index.ts","./src/components/common/breadcrumb/types.ts","./src/components/common/datatable/datatable.example.tsx","./src/components/common/datatable/datatable.tsx","./src/components/common/datatable/index.ts","./src/components/common/datatable/types.ts","./src/components/common/emptystate/emptystate.tsx","./src/components/common/emptystate/index.ts","./src/components/common/emptystate/types.ts","./src/components/common/modal/modal.tsx","./src/components/common/modal/index.ts","./src/components/common/pagination/pagination.example.tsx","./src/components/common/pagination/pagination.tsx","./src/components/common/pagination/index.ts","./src/components/common/pagination/types.ts","./src/components/common/statusbadge/statusbadge.tsx","./src/components/common/statusbadge/index.ts","./src/components/common/statusbadge/statusbadgevariants.ts","./src/components/dashboard/charts/deliverysuccesschart/deliverysuccesschart.test.tsx","./src/components/dashboard/charts/deliverysuccesschart/deliverysuccesschart.tsx","./src/components/dashboard/charts/deliverysuccesschart/index.ts","./src/components/dashboard/charts/deliverysuccesschart/mockdeliverydata.ts","./src/components/dashboard/charts/shipmentvolumechart/shipmentvolumechart.test.tsx","./src/components/dashboard/charts/shipmentvolumechart/shipmentvolumechart.tsx","./src/components/dashboard/charts/shipmentvolumechart/index.ts","./src/components/dashboard/charts/shipmentvolumechart/mockvolumedata.ts","./src/components/dashboard/statcard/statcard.tsx","./src/components/dashboard/statcard/index.ts","./src/components/layout/dashboardlayout.tsx","./src/components/layout/sidebar/sidebar.tsx","./src/components/layout/sidebar/index.ts","./src/components/layout/topheader/topheader.tsx","./src/components/layout/topheader/index.ts","./src/components/notifications/notificationdropdown/notificationdropdown.test.tsx","./src/components/notifications/notificationdropdown/notificationdropdown.tsx","./src/components/notifications/notificationdropdown/index.ts","./src/components/notifications/toast/toast.test.tsx","./src/components/notifications/toast/toast.tsx","./src/components/shipment/deliveryconfirmation/deliveryconfirmation.test.tsx","./src/components/shipment/deliveryconfirmation/deliveryconfirmation.tsx","./src/components/shipment/statusupdate/statusupdate.test.tsx","./src/components/shipment/statusupdate/statusupdate.tsx","./src/components/shipment/statusupdate/index.ts","./src/components/shipment/trackingtimeline/trackingtimeline.example.tsx","./src/components/shipment/trackingtimeline/trackingtimeline.test.tsx","./src/components/shipment/trackingtimeline/trackingtimeline.tsx","./src/components/shipment/trackingtimeline/index.ts","./src/context/toastcontext.tsx","./src/hooks/index.ts","./src/hooks/useauth.ts","./src/pages/analytics/analytics.tsx","./src/pages/blockchainledger/blockchainledger.tsx","./src/pages/componentdemos/paginationdemo/paginationdemo.tsx","./src/pages/helpcenter/helpcenter.tsx","./src/pages/home/home.tsx","./src/pages/landingpage/sections/features/features.tsx","./src/pages/notifications/notificationspage.tsx","./src/pages/payments/paymentdetailmodal/paymentdetailmodal.tsx","./src/pages/payments/paymenthistory/paymenthistory.tsx","./src/pages/payments/paymentsummarycards/paymentsummarycards.tsx","./src/pages/payments/paymentsummarycards/index.ts","./src/pages/settings/settings.tsx","./src/pages/settings/notificationpreferences/notificationpreferences.test.tsx","./src/pages/settings/notificationpreferences/notificationpreferences.tsx","./src/pages/settlements/settlements.tsx","./src/pages/shipment/shipmentdetail.tsx","./src/pages/shipment/sections/milestonetimeline/milestonetimeline.tsx","./src/pages/shipment/sections/milestonetimeline/types.ts","./src/pages/shipmentdetail/shipmentdetail.tsx","./src/pages/shipmentdetail/index.ts","./src/pages/shipmentdetail/deliveryproofupload/deliveryproofupload.tsx","./src/pages/shipmentdetail/milestonetimeline/milestonetimeline.example.tsx","./src/pages/shipmentdetail/milestonetimeline/milestonetimeline.test.tsx","./src/pages/shipmentdetail/milestonetimeline/milestonetimeline.tsx","./src/pages/shipmentdetail/paymentstatus/paymentstatus.tsx","./src/pages/shipmentdetail/sensordatacards/sensordatacards.tsx","./src/pages/shipmentdetail/shipmentdetailheader/shipmentdetailheader.tsx","./src/pages/shipmentdetail/shipmentdetailheader/index.ts","./src/pages/shipmentdetail/shipmentmap/shipmentmap.test.tsx","./src/pages/shipmentdetail/shipmentmap/shipmentmap.tsx","./src/pages/shipments/shipments.tsx","./src/pages/auth/forgotpassword/forgotpassword.tsx","./src/pages/auth/login/login.tsx","./src/pages/auth/signup/signup.tsx","./src/pages/dashboard/dashboard.tsx","./src/pages/dashboard/company/companydashboard.tsx","./src/pages/dashboard/company/createshipment/createshipment.tsx","./src/pages/dashboard/company/recentshipments/recentshipments.test.tsx","./src/pages/dashboard/company/recentshipments/recentshipments.tsx","./src/pages/dashboard/company/recentshipments/mockshipments.ts","./src/pages/dashboard/company/settings/companysettings.tsx","./src/pages/dashboard/company/usermanagement/usermanagement.tsx","./src/pages/dashboard/customer/customerdashboard.tsx","./src/pages/dashboard/customer/activeshipments/activeshipments.test.tsx","./src/pages/dashboard/customer/activeshipments/activeshipments.tsx","./src/pages/dashboard/customer/profile/customerprofile.tsx","./src/pages/dashboard/customer/shipmenthistory/shipmenthistory.tsx","./src/services/api/client.ts","./src/services/api/index.ts","./src/services/api/endpoints/auth.ts","./src/services/api/endpoints/shipments.ts","./src/services/api/interceptors/authinterceptor.ts","./src/services/api/interceptors/errorinterceptor.ts","./src/test/app.test.tsx","./src/test/setup.ts"],"version":"5.9.3"}
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 5cca44a..917eac4 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -4,10 +4,11 @@ import { configDefaults, defineConfig } from "vitest/config";
 import react from "@vitejs/plugin-react";
 import { resolve } from "path";
 import { fileURLToPath } from "url";
+// import tailwindcss from '@tailwindcss/vite'
 const __dirname = fileURLToPath(new URL(".", import.meta.url));
 // https://vite.dev/config/
 export default defineConfig({
-    plugins: [react()],
+    plugins: [react()], // tailwindcss() removed temporarily for CI
     resolve: {
         alias: {
             "@": resolve(__dirname, "./src"),
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 42c059c..2afe732 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -4,12 +4,13 @@ import { configDefaults, defineConfig } from "vitest/config";
 import react from "@vitejs/plugin-react";
 import { resolve } from "path";
 import { fileURLToPath } from "url";
+// import tailwindcss from '@tailwindcss/vite'
 
 const __dirname = fileURLToPath(new URL(".", import.meta.url));
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react()], // tailwindcss() removed temporarily for CI
   resolve: {
     alias: {
       "@": resolve(__dirname, "./src"),
diff --git a/frontend/vt.json b/frontend/vt.json
new file mode 100644
index 0000000..f9dee1f
--- /dev/null
+++ b/frontend/vt.json
@@ -0,0 +1,62 @@
+
+> navin-frontend@0.1.0 test /home/trinnex/Documents/CodeBase/drips/newcatch/navin-frontend/frontend
+> vitest run -- --passWithNoTests --threads=1 --reporter json
+
+
+ RUN  v4.0.18 /home/trinnex/Documents/CodeBase/drips/newcatch/navin-frontend/frontend
+
+ ✓ src/components/notifications/NotificationDropdown/NotificationDropdown.test.tsx (5 tests) 367ms
+ ✓ src/components/shipment/TrackingTimeline/TrackingTimeline.test.tsx (8 tests) 970ms
+     ✓ renders a vertical timeline with at least 5 milestones  806ms
+ ✓ src/pages/ShipmentDetail/MilestoneTimeline/MilestoneTimeline.test.tsx (10 tests) 1312ms
+     ✓ handles empty milestones array  699ms
+ ✓ src/pages/dashboard/Customer/ActiveShipments/ActiveShipments.test.tsx (2 tests) 949ms
+     ✓ navigates to shipment detail page when track is clicked  702ms
+ ✓ src/components/shipment/StatusUpdate/StatusUpdate.test.tsx (4 tests) 2096ms
+     ✓ shows a dropdown with five milestone options  1052ms
+     ✓ opens confirmation dialog and closes on cancel  322ms
+     ✓ confirms status update and shows success feedback  305ms
+     ✓ shows error feedback when update fails  406ms
+ ✓ src/pages/dashboard/Company/RecentShipments/RecentShipments.test.tsx (5 tests) 3721ms
+     ✓ shows an empty state when there are no shipments  553ms
+     ✓ sorts by created date when header is clicked  1117ms
+     ✓ sorts by status and toggles direction  927ms
+     ✓ paginates with next and page number controls  914ms
+ ✓ src/components/auth/ProtectedRoute/ProtectedRoute.test.tsx (3 tests) 120ms
+ ✓ src/components/dashboard/Charts/DeliverySuccessChart/DeliverySuccessChart.test.tsx (5 tests) 267ms
+ ✓ src/test/App.test.tsx (1 test) 419ms
+     ✓ renders without crashing  411ms
+ ✓ src/components/dashboard/Charts/ShipmentVolumeChart/ShipmentVolumeChart.test.tsx (6 tests) 156ms
+ ❯ src/components/shipment/DeliveryConfirmation/DeliveryConfirmation.test.tsx (25 tests | 4 failed) 5633ms
+       × renders when status is delivered 209ms
+       ✓ renders nothing when status is not delivered 6ms
+       ✓ renders nothing for pending status 5ms
+       ✓ shows shipment ID in prompt 15ms
+       ✓ shows Confirm Receipt button initially  530ms
+       ✓ reveals form when Confirm Receipt is clicked  333ms
+       ✓ does not show form before Confirm Receipt is clicked 7ms
+       ✓ renders 5 star buttons 191ms
+       ✓ marks selected star as checked 268ms
+       ✓ shows label for selected rating 273ms
+       ✓ shows hover preview on mouse enter 245ms
+       ✓ clears hover preview on mouse leave from group 174ms
+       ✓ supports keyboard selection with Enter 201ms
+       ✓ supports keyboard selection with Space 197ms
+       ✓ submit button is disabled when no rating selected 138ms
+       ✓ submit button is enabled after rating is selected 297ms
+       × does not submit without a rating 692ms
+       × calls onConfirm with correct args on submit 584ms
+       × submits with empty feedback when feedback is optional 445ms
+       ✓ shows loading state during submission 181ms
+       ✓ prevents duplicate submissions 150ms
+       ✓ shows thank-you message after successful submission 120ms
+       ✓ displays submitted rating in success state 114ms
+       ✓ shows error message when submission fails 122ms
+       ✓ does not show form after successful submission 126ms
+
+ Test Files  1 failed | 10 passed (11)
+      Tests  4 failed | 70 passed (74)
+   Start at  17:56:53
+   Duration  9.24s (transform 1.89s, setup 2.06s, import 9.03s, tests 16.01s, environment 20.49s)
+
+ ELIFECYCLE  Test failed. See above for more details.