diff --git a/apps/edr-freight-api/.env.example b/apps/edr-freight-api/.env.example
index 5f2d2b8ee..90aa517ff 100644
--- a/apps/edr-freight-api/.env.example
+++ b/apps/edr-freight-api/.env.example
@@ -23,6 +23,10 @@ SUPER_ADMIN_EMAIL=superadmin@tria.com
 SUPER_ADMIN_PHONE=
 DEFAULT_PASSWORD=password@tria
 
+# Freight org + staff (bookings / rule-engine IAM)
+SEED_EDR_ORG=true
+SEED_FREIGHT_STAFF=true
+
 # MinIO (used by @tria-plc/iamapi-common for file storage)
 MINIO_ENDPOINT=localhost
 MINIO_PORT=9000
diff --git a/apps/edr-freight-api/nest-cli.json b/apps/edr-freight-api/nest-cli.json
index 6c524a8a1..f4a3b488d 100644
--- a/apps/edr-freight-api/nest-cli.json
+++ b/apps/edr-freight-api/nest-cli.json
@@ -4,7 +4,10 @@
   "sourceRoot": "src",
   "compilerOptions": {
     "deleteOutDir": true,
-    "assets": [{ "include": "migrations/**/*", "outDir": "dist" }],
+    "assets": [
+      { "include": "migrations/**/*", "outDir": "dist" },
+      { "include": "contracts/templates/**/*", "watchAssets": true }
+    ],
     "watchAssets": true
   }
 }
diff --git a/apps/edr-freight-api/package.json b/apps/edr-freight-api/package.json
index 41c570010..e086598b8 100644
--- a/apps/edr-freight-api/package.json
+++ b/apps/edr-freight-api/package.json
@@ -32,11 +32,12 @@
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.1",
     "dotenv": "^17.4.2",
+    "handlebars": "^4.7.9",
     "minio": "7.1.3",
+    "puppeteer": "^24.2.0",
     "pg": "^8.13.0",
     "reflect-metadata": "^0.2.2",
-    "rxjs": "^7.8.1",
-    "typeorm": "^0.3.20"
+    "rxjs": "^7.8.1"
   },
   "devDependencies": {
     "@edr/api-common": "workspace:*",
@@ -58,6 +59,7 @@
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
+    "typeorm": "^1.0.0",
     "typescript": "^5.5.4"
   },
   "jest": {
diff --git a/apps/edr-freight-api/src/app.module.ts b/apps/edr-freight-api/src/app.module.ts
index 1f9e7a5ce..75826364c 100644
--- a/apps/edr-freight-api/src/app.module.ts
+++ b/apps/edr-freight-api/src/app.module.ts
@@ -12,7 +12,13 @@ import databaseConfig from "./config/database.config";
 import { BookingsModule } from "./modules/bookings/bookings.module";
 import { FilesModule } from "./modules/files/files.module";
 import { ConsignmentsModule } from "./modules/consignments/consignments.module";
-import { TrainsModule } from "./modules/trains/trains.module";
+
+//import { TrainsModule } from "./modules/trains/trains.module";
+import { LocomotivesModule } from "./modules/locomotives/locomotives.module";
+import { WagonTypesModule } from "./modules/wagon-types/wagon-types.module";
+import { TrainSetsModule } from "./modules/train-sets/train-sets.module";
+import { TrainSchedulesModule } from "./modules/train-schedules/train-schedules.module";
+import { TrainSchedulingModule } from "./modules/train-scheduling/train-scheduling.module";
 import { CustomersModule } from "./modules/customers/customers.module";
 import { CompaniesModule } from "./modules/companies/companies.module";
 import { TrackingModule } from "./modules/tracking/tracking.module";
@@ -24,13 +30,23 @@ import { OtpModule } from './modules/otp/otp.module';
 import { RuleEngineModule } from "./modules/rule-engine/rule-engine.module";
 import { BackofficeModule } from "./modules/backoffice/backoffice.module";
 import { DemoPermissionsModule } from "./modules/demo-permissions/demo-permissions.module";
+import { FreightAuthModule } from "./modules/auth/freight-auth.module";
 import {
   EDR_FREIGHT_APPLICATION,
   EDR_FREIGHT_PERMISSIONS,
 } from "./seed/edr-freight.seed";
 import { EdrOrgSeeder } from "./seed/edr-org.seeder";
 import { DemoUsersSeeder } from "./seed/demo-users.seeder";
+import { FreightStaffUsersSeeder } from "./seed/freight-staff-users.seeder";
 import { PaymentModule } from "./modules/payment/payment.module";
+import { DemoBookingsSeeder } from "./seed/demo-bookings.seeder";
+import { PricingDataSeeder } from "./seed/pricing-data.seeder";
+import { FileUploadSettingsSeeder } from "./seed/file-upload-settings.seeder";
+//New Trains, Wagons, Container and Cargo management modules
+import { TrainsModule } from "./modules/trains/trains.module";
+import { WagonsModule } from './modules/wagons/wagons.module';
+import { ContainersModule } from './modules/container-management/containers.module';
+import { CargoesModule } from './modules/cargoes/cargoes.module';
 
 @Module({
   imports: [
@@ -60,6 +76,11 @@ import { PaymentModule } from "./modules/payment/payment.module";
     FilesModule,
     ConsignmentsModule,
     TrainsModule,
+    LocomotivesModule,
+    WagonTypesModule,
+    TrainSetsModule,
+    TrainSchedulesModule,
+    TrainSchedulingModule,
     CustomersModule,
     CompaniesModule,
     TrackingModule,
@@ -71,20 +92,34 @@ import { PaymentModule } from "./modules/payment/payment.module";
     RuleEngineModule,
     BackofficeModule,
     DemoPermissionsModule,
-    PaymentModule
+    FreightAuthModule,
+    PaymentModule,
+    //New Modules
+    TrainsModule,
+    WagonsModule,
+    ContainersModule,
+    CargoesModule,
   ],
-  providers: [EdrOrgSeeder, DemoUsersSeeder],
+  providers: [EdrOrgSeeder, DemoUsersSeeder,FreightStaffUsersSeeder, DemoBookingsSeeder, PricingDataSeeder, FileUploadSettingsSeeder],
 })
 export class AppModule implements OnApplicationBootstrap {
   constructor(
     private readonly seeder: DataSeeder,
     private readonly edrOrgSeeder: EdrOrgSeeder,
     private readonly demoUsersSeeder: DemoUsersSeeder,
+    private readonly freightStaffUsersSeeder: FreightStaffUsersSeeder,
+    private readonly demoBookingsSeeder: DemoBookingsSeeder,
+    private readonly pricingDataSeeder: PricingDataSeeder,
+    private readonly fileUploadSettingsSeeder: FileUploadSettingsSeeder,
   ) { }
 
   async onApplicationBootstrap() {
     await this.seeder.run();
     await this.edrOrgSeeder.run();
     await this.demoUsersSeeder.run();
+    await this.freightStaffUsersSeeder.run();
+    await this.demoBookingsSeeder.run();
+    await this.pricingDataSeeder.run();
+    await this.fileUploadSettingsSeeder.run();
   }
 }
diff --git a/apps/edr-freight-api/src/common/booking-guards.ts b/apps/edr-freight-api/src/common/booking-guards.ts
new file mode 100644
index 000000000..2ebae8175
--- /dev/null
+++ b/apps/edr-freight-api/src/common/booking-guards.ts
@@ -0,0 +1,17 @@
+import { applyDecorators, UseGuards } from '@nestjs/common';
+import { JwtGuard } from '@tria-plc/api-common/modules/auth/services/jwt.guard';
+
+import { FreightPermissionGuard } from './freight-permission.guard';
+import { FREIGHT_PERMS } from '../seed/freight-permissions.registry';
+
+export const BookingStaff = (permission: string | string[]) =>
+  applyDecorators(
+    UseGuards(
+      JwtGuard,
+      FreightPermissionGuard(
+        Array.isArray(permission) ? permission : [permission],
+      ),
+    ),
+  );
+
+export const BookingView = () => BookingStaff(FREIGHT_PERMS.bookings.view);
diff --git a/apps/edr-freight-api/src/common/freight-permission.guard.ts b/apps/edr-freight-api/src/common/freight-permission.guard.ts
new file mode 100644
index 000000000..68def6440
--- /dev/null
+++ b/apps/edr-freight-api/src/common/freight-permission.guard.ts
@@ -0,0 +1,38 @@
+import {
+  CanActivate,
+  ExecutionContext,
+  ForbiddenException,
+  Injectable,
+  Type,
+  UnauthorizedException,
+} from '@nestjs/common';
+import type { TCurrentUser } from '@tria-plc/api-common/modules/auth/types/current-user.type';
+
+import { hasFreightPermission } from './freight-permission.util';
+
+export function FreightPermissionGuard(
+  permissions: string[],
+): Type<CanActivate> {
+  @Injectable()
+  class FreightPermissionsGuard implements CanActivate {
+    canActivate(context: ExecutionContext): boolean {
+      const request = context.switchToHttp().getRequest<{ user?: TCurrentUser }>();
+      const user = request.user;
+
+      if (!permissions?.length) return true;
+      if (!user) {
+        throw new UnauthorizedException('Authentication required');
+      }
+
+      if (permissions.some((p) => hasFreightPermission(user, p))) {
+        return true;
+      }
+
+      throw new ForbiddenException(
+        `Missing permission. Required one of: ${permissions.join(', ')}`,
+      );
+    }
+  }
+
+  return FreightPermissionsGuard;
+}
diff --git a/apps/edr-freight-api/src/common/freight-permission.util.ts b/apps/edr-freight-api/src/common/freight-permission.util.ts
new file mode 100644
index 000000000..69596c21d
--- /dev/null
+++ b/apps/edr-freight-api/src/common/freight-permission.util.ts
@@ -0,0 +1,109 @@
+import { ForbiddenException } from '@nestjs/common';
+import type { TCurrentUser } from '@tria-plc/api-common/modules/auth/types/current-user.type';
+
+import { FREIGHT_PERMS } from '../seed/freight-permissions.registry';
+
+const SUPER_ADMIN_ROLE = 'super_admin';
+const ORGANIZATION_ADMIN_ROLE = 'organization_admin';
+
+type PermissionLike = { key?: string };
+type MeLikeUser = {
+  roles?: { key?: string }[];
+  permissions?: PermissionLike[];
+  employee?:
+    | {
+        position?: { permissions?: PermissionLike[] };
+        delegatedPositions?: { permissions?: PermissionLike[] }[];
+      }
+    | {
+        positions?: { permissions?: PermissionLike[] }[];
+      }[]
+    | null;
+};
+
+export function isSuperAdmin(user: MeLikeUser | null | undefined): boolean {
+  if (!user?.roles?.length) return false;
+  return user.roles.some((r) => r.key === SUPER_ADMIN_ROLE);
+}
+
+export function isOrganizationAdmin(user: MeLikeUser | null | undefined): boolean {
+  if (!user?.roles?.length) return false;
+  return user.roles.some((r) => r.key === ORGANIZATION_ADMIN_ROLE);
+}
+
+export function isFreightApprovalAdmin(user: MeLikeUser | null | undefined): boolean {
+  return isSuperAdmin(user) || isOrganizationAdmin(user);
+}
+
+/** Flat permission keys from JWT / session user (roles + position permissions). */
+export function collectPermissionKeys(user: MeLikeUser | null | undefined): string[] {
+  if (!user) return [];
+
+  const keys = new Set<string>();
+
+  for (const p of user.permissions ?? []) {
+    if (p.key) keys.add(p.key);
+  }
+
+  const employee = user.employee;
+  if (!employee) {
+    return [...keys];
+  }
+
+  if (Array.isArray(employee)) {
+    for (const emp of employee) {
+      for (const pos of emp.positions ?? []) {
+        for (const p of pos.permissions ?? []) {
+          if (p.key) keys.add(p.key);
+        }
+      }
+    }
+    return [...keys];
+  }
+
+  for (const p of employee.position?.permissions ?? []) {
+    if (p.key) keys.add(p.key);
+  }
+  for (const delegated of employee.delegatedPositions ?? []) {
+    for (const p of delegated.permissions ?? []) {
+      if (p.key) keys.add(p.key);
+    }
+  }
+
+  return [...keys];
+}
+
+export function hasFreightPermission(
+  user: MeLikeUser | null | undefined,
+  permissionKey: string,
+): boolean {
+  if (!user) return false;
+  if (isSuperAdmin(user)) return true;
+  return collectPermissionKeys(user).includes(permissionKey);
+}
+
+export function assertFreightPermission(
+  user: TCurrentUser | MeLikeUser | null | undefined,
+  permissionKey: string,
+): void {
+  if (hasFreightPermission(user, permissionKey)) return;
+  throw new ForbiddenException(`Missing permission: ${permissionKey}`);
+}
+
+const APPROVE_ROLE_PERMISSION: Record<string, string> = {
+  LINE_STAFF: FREIGHT_PERMS.bookings.approveLineStaff,
+  DIRECTOR: FREIGHT_PERMS.bookings.approveDirector,
+  CEO: FREIGHT_PERMS.bookings.approveCeo,
+};
+
+export function assertCanApproveBookingStep(
+  user: TCurrentUser | MeLikeUser | null | undefined,
+  requiredRole: string,
+): void {
+  if (isFreightApprovalAdmin(user)) return;
+  const perm = APPROVE_ROLE_PERMISSION[requiredRole];
+  if (!perm) {
+    throw new ForbiddenException(`Unknown approval role: ${requiredRole}`);
+  }
+  assertFreightPermission(user, perm);
+}
diff --git a/apps/edr-freight-api/src/common/resolve-auth-user-id.ts b/apps/edr-freight-api/src/common/resolve-auth-user-id.ts
new file mode 100644
index 000000000..cab29b671
--- /dev/null
+++ b/apps/edr-freight-api/src/common/resolve-auth-user-id.ts
@@ -0,0 +1,12 @@
+import { UnauthorizedException } from '@nestjs/common';
+
+export type AuthUserPayload = { id?: string; sub?: string } | null | undefined;
+
+/** Resolve IAM user id from JWT payload attached by JwtGuard. */
+export function resolveAuthUserId(user: AuthUserPayload): string {
+  const id = user?.id ?? user?.sub;
+  if (!id) {
+    throw new UnauthorizedException('Authentication required');
+  }
+  return id;
+}
diff --git a/apps/edr-freight-api/src/common/rule-engine-guards.ts b/apps/edr-freight-api/src/common/rule-engine-guards.ts
new file mode 100644
index 000000000..12ba30e11
--- /dev/null
+++ b/apps/edr-freight-api/src/common/rule-engine-guards.ts
@@ -0,0 +1,18 @@
+import { applyDecorators, UseGuards } from '@nestjs/common';
+import { JwtGuard } from '@tria-plc/api-common/modules/auth/services/jwt.guard';
+
+import { FreightPermissionGuard } from './freight-permission.guard';
+import {
+  FREIGHT_PERMS,
+  type RuleEngineResourceSlug,
+} from '../seed/freight-permissions.registry';
+
+export const RuleEngineView = (slug: RuleEngineResourceSlug) =>
+  applyDecorators(
+    UseGuards(JwtGuard, FreightPermissionGuard([FREIGHT_PERMS.ruleEngine.view(slug)])),
+  );
+
+export const RuleEngineManage = (slug: RuleEngineResourceSlug) =>
+  applyDecorators(
+    UseGuards(JwtGuard, FreightPermissionGuard([FREIGHT_PERMS.ruleEngine.manage(slug)])),
+  );
diff --git a/apps/edr-freight-api/src/contracts/contract-clause-packs.ts b/apps/edr-freight-api/src/contracts/contract-clause-packs.ts
new file mode 100644
index 000000000..2d73cd50d
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/contract-clause-packs.ts
@@ -0,0 +1,224 @@
+import type {
+  Article1Clause,
+  ContractClausePack,
+  ContractDirection,
+  ContractFreight,
+  ContractServiceScope,
+} from './contract-template.types';
+
+const STANDARD_CONTRACT_DOCUMENTS = [
+  'Amendments (if any)',
+  'This Contract Agreement',
+  'Final Minutes of Negotiation (if any)',
+];
+
+const PAYMENT_OBLIGATION =
+  'Pay 100% transportation fees in advance per train set in accordance with Article 5.';
+
+const HAZARDOUS_OBLIGATION =
+  'Notify EDR 48 hours in advance for hazardous or valuable cargo.';
+
+function clonePack(pack: ContractClausePack): ContractClausePack {
+  return {
+    article1: {
+      objective: pack.article1.objective,
+      scope: [...pack.article1.scope],
+    },
+    clientObligations: [...pack.clientObligations],
+    providerObligations: [...pack.providerObligations],
+    contractDocuments: [...pack.contractDocuments],
+  };
+}
+
+function applyForwardingOverlay(
+  pack: ContractClausePack,
+  service: ContractServiceScope,
+): ContractClausePack {
+  if (service !== 'FORWARDING') return pack;
+
+  const next = clonePack(pack);
+  next.article1.scope.push(
+    'First-mile and/or last-mile coordination, documentation, and handover with road or port partners where included in the agreed service scope.',
+  );
+  next.providerObligations.push(
+    'Coordinate first-mile and last-mile logistics with designated partners and keep the Client informed of handover milestones.',
+  );
+  return next;
+}
+
+function buildImportContainerPack(): ContractClausePack {
+  return {
+    article1: {
+      objective:
+        'To provide railway transportation for 40ft and/or 20ft full containers from SGTD to Dire Dawa, Modjo dry port and/or Galaan Multipurpose port (GMP), and empty container return from those terminals to SGTD.',
+      scope: [
+        'Railway transport service on the agreed import corridor.',
+        'Cargo handling at Galaan Multipurpose port (GMP) where applicable.',
+      ],
+    },
+    clientObligations: [
+      'Provide shipment instructions to EDR for container movements on the agreed corridor.',
+      'Meet minimum container supply per terminal (Modjo, Dire Dawa, GMP) as per EDR operational rules.',
+      'Submit required documents to Djibouti Nagad station at least 24 hours before loading.',
+      PAYMENT_OBLIGATION,
+      HAZARDOUS_OBLIGATION,
+    ],
+    providerObligations: [
+      'Assign voyage per operational schedule and notify train schedule 48 hours in advance.',
+      'Provide safe transportation and deliver within agreed timelines when documents are complete.',
+      'Return empty containers from Dire Dawa, Modjo and GMP to SGTD within seven (7) calendar days of receipt.',
+      'Maintain cargo liability insurance per wagon.',
+    ],
+    contractDocuments: [...STANDARD_CONTRACT_DOCUMENTS],
+  };
+}
+
+function buildImportBulkPack(): ContractClausePack {
+  return {
+    article1: {
+      objective:
+        'To provide railway transportation for bulk cargo from SGTD railway freight station at Djibouti to designated Ethiopian rail terminals on the import corridor.',
+      scope: [
+        'Railway bulk transport service on the agreed import corridor.',
+        'Loading and unloading coordination at designated terminals per EDR operational rules.',
+      ],
+    },
+    clientObligations: [
+      'Provide accurate commodity description, weight, and shipment instructions for each train movement.',
+      'Ensure cargo is prepared and available at origin per the agreed loading window.',
+      'Submit required customs and operational documents at least 24 hours before loading where applicable.',
+      PAYMENT_OBLIGATION,
+      HAZARDOUS_OBLIGATION,
+    ],
+    providerObligations: [
+      'Assign train capacity per operational schedule and notify departure timing 48 hours in advance where practicable.',
+      'Provide safe bulk transportation and deliver within agreed timelines when documents are complete.',
+      'Maintain cargo liability insurance per wagon or train consist as applicable.',
+    ],
+    contractDocuments: [...STANDARD_CONTRACT_DOCUMENTS],
+  };
+}
+
+function buildExportContainerPack(): ContractClausePack {
+  return {
+    article1: {
+      objective:
+        'To provide railway transportation for 40ft and/or 20ft full containers from designated Ethiopian dry ports and terminals to SGTD and related export corridors.',
+      scope: [
+        'Railway export transport service on the agreed corridor.',
+        'Terminal coordination at origin yards for export dispatch where applicable.',
+      ],
+    },
+    clientObligations: [
+      'Provide export shipment instructions and container release details for each movement.',
+      'Ensure containers are available at origin terminals per EDR operational windows.',
+      'Submit required export, customs, and operational documents at origin at least 24 hours before loading.',
+      PAYMENT_OBLIGATION,
+      HAZARDOUS_OBLIGATION,
+    ],
+    providerObligations: [
+      'Assign voyage per operational schedule and notify train schedule 48 hours in advance.',
+      'Provide safe transportation to SGTD and hand over for export processing when documents are complete.',
+      'Maintain cargo liability insurance per wagon.',
+    ],
+    contractDocuments: [...STANDARD_CONTRACT_DOCUMENTS],
+  };
+}
+
+function buildExportBulkPack(): ContractClausePack {
+  return {
+    article1: {
+      objective:
+        'To provide railway transportation for bulk export cargo from designated Ethiopian rail terminals to SGTD and related export corridors.',
+      scope: [
+        'Railway bulk export transport on the agreed corridor.',
+        'Loading coordination at origin terminals per EDR operational rules.',
+      ],
+    },
+    clientObligations: [
+      'Provide accurate commodity description, weight, and export shipment instructions.',
+      'Ensure bulk cargo is prepared and available at origin per the agreed loading window.',
+      'Submit required export and customs documents at least 24 hours before loading where applicable.',
+      PAYMENT_OBLIGATION,
+      HAZARDOUS_OBLIGATION,
+    ],
+    providerObligations: [
+      'Assign train capacity per operational schedule and notify departure timing 48 hours in advance where practicable.',
+      'Provide safe bulk transportation to SGTD within agreed timelines when documents are complete.',
+      'Maintain cargo liability insurance per wagon or train consist as applicable.',
+    ],
+    contractDocuments: [...STANDARD_CONTRACT_DOCUMENTS],
+  };
+}
+
+function buildDomesticContainerPack(): ContractClausePack {
+  return {
+    article1: {
+      objective:
+        'To provide railway transportation for 40ft and/or 20ft containers between designated Ethiopian rail terminals on the domestic corridor.',
+      scope: ['Domestic railway container transport between agreed origin and destination yards.'],
+    },
+    clientObligations: [
+      'Provide shipment instructions for each domestic container movement.',
+      'Ensure containers are available at origin per EDR operational rules.',
+      PAYMENT_OBLIGATION,
+      HAZARDOUS_OBLIGATION,
+    ],
+    providerObligations: [
+      'Assign voyage per operational schedule and notify train schedule 48 hours in advance where practicable.',
+      'Provide safe transportation and deliver within agreed timelines when instructions are complete.',
+      'Maintain cargo liability insurance per wagon.',
+    ],
+    contractDocuments: [...STANDARD_CONTRACT_DOCUMENTS],
+  };
+}
+
+function buildDomesticBulkPack(): ContractClausePack {
+  return {
+    article1: {
+      objective:
+        'To provide railway transportation for bulk cargo between designated Ethiopian rail terminals on the domestic corridor.',
+      scope: ['Domestic railway bulk transport between agreed origin and destination terminals.'],
+    },
+    clientObligations: [
+      'Provide commodity description, weight, and shipment instructions for each movement.',
+      'Ensure cargo is prepared at origin per the agreed loading window.',
+      PAYMENT_OBLIGATION,
+      HAZARDOUS_OBLIGATION,
+    ],
+    providerObligations: [
+      'Assign train capacity per operational schedule and notify departure timing 48 hours in advance where practicable.',
+      'Provide safe bulk transportation within agreed timelines.',
+      'Maintain cargo liability insurance per wagon or train consist as applicable.',
+    ],
+    contractDocuments: [...STANDARD_CONTRACT_DOCUMENTS],
+  };
+}
+
+const BASE_PACKS: Record<ContractDirection, Record<ContractFreight, () => ContractClausePack>> = {
+  IMP: {
+    CON: buildImportContainerPack,
+    BULK: buildImportBulkPack,
+  },
+  EXP: {
+    CON: buildExportContainerPack,
+    BULK: buildExportBulkPack,
+  },
+  DOM: {
+    CON: buildDomesticContainerPack,
+    BULK: buildDomesticBulkPack,
+  },
+};
+
+export function buildClausePack(
+  direction: ContractDirection,
+  freight: ContractFreight,
+  service: ContractServiceScope,
+): ContractClausePack {
+  const base = BASE_PACKS[direction][freight]();
+  return applyForwardingOverlay(base, service);
+}
+
+export function article1ObjectiveFromClause(article1: Article1Clause): string {
+  return article1.objective;
+}
diff --git a/apps/edr-freight-api/src/contracts/contract-pdf.service.ts b/apps/edr-freight-api/src/contracts/contract-pdf.service.ts
new file mode 100644
index 000000000..9e0acc6fb
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/contract-pdf.service.ts
@@ -0,0 +1,116 @@
+import { existsSync } from 'fs';
+
+import { Injectable, InternalServerErrorException, Logger } from '@nestjs/common';
+
+const MIN_VALID_PDF_BYTES = 2_000;
+
+const PDF_PRINT_STYLES = `
+<style id="contract-pdf-print-fix">
+  @media print {
+    html, body {
+      background: #fff !important;
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
+    }
+    .cover {
+      min-height: auto !important;
+      page-break-after: always;
+    }
+    .cover-title {
+      margin: 24mm 0 20mm !important;
+    }
+  }
+</style>`;
+
+@Injectable()
+export class ContractPdfService {
+  private readonly logger = new Logger(ContractPdfService.name);
+
+  async htmlToPdfBuffer(html: string): Promise<Buffer> {
+    const preparedHtml = this.injectPdfPrintStyles(html);
+    const executablePath = this.resolveExecutablePath();
+
+    try {
+      const puppeteer = await import('puppeteer');
+      const launchOptions: import('puppeteer').LaunchOptions = {
+        headless: true,
+        args: [
+          '--no-sandbox',
+          '--disable-setuid-sandbox',
+          '--disable-dev-shm-usage',
+        ],
+        ...(executablePath ? { executablePath } : {}),
+      };
+
+      const browser = await puppeteer.default.launch(launchOptions);
+      try {
+        const page = await browser.newPage();
+        await page.setViewport({ width: 794, height: 1123, deviceScaleFactor: 1 });
+        await page.setContent(preparedHtml, {
+          waitUntil: 'load',
+          timeout: 60_000,
+        });
+        await page.emulateMediaType('print');
+        await new Promise((resolve) => setTimeout(resolve, 400));
+
+        const pdf = await page.pdf({
+          format: 'A4',
+          printBackground: true,
+          displayHeaderFooter: true,
+          headerTemplate: '<span></span>',
+          footerTemplate:
+            '<div style="width:100%;font-size:8px;color:#64748b;text-align:center;font-family:Arial,sans-serif;">Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>',
+          margin: { top: '18mm', bottom: '22mm', left: '14mm', right: '14mm' },
+        });
+
+        const buffer = Buffer.from(pdf);
+        if (!this.isValidPdf(buffer)) {
+          throw new Error(
+            `Puppeteer produced invalid PDF (${buffer.length} bytes)`,
+          );
+        }
+        this.logger.log(
+          `Contract PDF rendered (${buffer.length} bytes) via ${executablePath ?? 'bundled Chromium'}`,
+        );
+        return buffer;
+      } finally {
+        await browser.close();
+      }
+    } catch (err) {
+      this.logger.error(
+        `Puppeteer PDF failed (executable=${executablePath ?? 'default'}): ${err}`,
+      );
+      throw new InternalServerErrorException(
+        'Contract PDF could not be generated. Ensure Chromium is installed or set PUPPETEER_EXECUTABLE_PATH.',
+      );
+    }
+  }
+
+  private injectPdfPrintStyles(html: string): string {
+    if (html.includes('contract-pdf-print-fix')) return html;
+    if (html.includes('</head>')) {
+      return html.replace('</head>', `${PDF_PRINT_STYLES}</head>`);
+    }
+    return `${PDF_PRINT_STYLES}${html}`;
+  }
+
+  private resolveExecutablePath(): string | undefined {
+    const fromEnv = process.env.PUPPETEER_EXECUTABLE_PATH?.trim();
+    if (fromEnv && existsSync(fromEnv)) return fromEnv;
+
+    const candidates = [
+      '/usr/bin/chromium',
+      '/usr/bin/chromium-browser',
+      '/usr/bin/google-chrome-stable',
+      '/usr/bin/google-chrome',
+    ];
+    return candidates.find((p) => existsSync(p));
+  }
+
+  private isValidPdf(buffer: Buffer): boolean {
+    return (
+      buffer.length >= MIN_VALID_PDF_BYTES &&
+      buffer.subarray(0, 5).toString('ascii') === '%PDF-'
+    );
+  }
+}
diff --git a/apps/edr-freight-api/src/contracts/contract-pricing-schedule.builder.ts b/apps/edr-freight-api/src/contracts/contract-pricing-schedule.builder.ts
new file mode 100644
index 000000000..dd961a14b
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/contract-pricing-schedule.builder.ts
@@ -0,0 +1,70 @@
+import { Injectable } from '@nestjs/common';
+
+import { BookingPricingService } from '../modules/bookings/booking-pricing.service';
+import { Booking } from '../modules/bookings/entities/booking.entity';
+import { PriceLineItemDto } from '../modules/bookings/dto/generate-price-response.dto';
+
+export interface PricingScheduleRow {
+  label: string;
+  description: string;
+  amount: number;
+  currency: string;
+}
+
+export interface PricingSchedule {
+  lineItems: PricingScheduleRow[];
+  surcharges: PricingScheduleRow[];
+  totalAmount: number;
+  currency: string;
+  equipmentReturn?: string;
+  originLabel: string;
+  destinationLabel: string;
+  containerLines: Array<{
+    label: string;
+    quantity: number;
+    vgmPerUnitTons: number;
+  }>;
+}
+
+@Injectable()
+export class ContractPricingScheduleBuilder {
+  constructor(private readonly pricingService: BookingPricingService) {}
+
+  async build(booking: Booking): Promise<PricingSchedule> {
+    const { lineItems, totalAmount, currency } =
+      await this.pricingService.computeContractLineItems(booking);
+
+    const isSurcharge = (l: PriceLineItemDto) =>
+      l.code.includes('SURCHARGE') || l.description.toLowerCase().includes('surcharge');
+
+    const baseLines = lineItems.filter((l) => !isSurcharge(l));
+    const surchargeLines = lineItems.filter(isSurcharge);
+
+    return {
+      lineItems: baseLines.map((l) => ({
+        label: l.code,
+        description: l.description,
+        amount: l.amount,
+        currency: l.currency,
+      })),
+      surcharges: surchargeLines.map((l) => ({
+        label: l.code,
+        description: l.description,
+        amount: l.amount,
+        currency: l.currency,
+      })),
+      totalAmount,
+      currency,
+      equipmentReturn: booking.equipmentReturn ?? '—',
+      originLabel: booking.originYard?.label ?? booking.originYard?.code ?? '—',
+      destinationLabel:
+        booking.destinationYard?.label ?? booking.destinationYard?.code ?? '—',
+      containerLines: (booking.bookingContainers ?? []).map((c) => ({
+        label:
+          c.containerType?.label ?? c.containerType?.code ?? c.containerTypeId,
+        quantity: c.quantity,
+        vgmPerUnitTons: Number(c.vgmPerUnitTons),
+      })),
+    };
+  }
+}
diff --git a/apps/edr-freight-api/src/contracts/contract-renderer.service.spec.ts b/apps/edr-freight-api/src/contracts/contract-renderer.service.spec.ts
new file mode 100644
index 000000000..a66a516c0
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/contract-renderer.service.spec.ts
@@ -0,0 +1,82 @@
+import { ContractRendererService } from './contract-renderer.service';
+import { getTemplateMeta } from './contract-template.registry';
+import type { ContractViewModel } from './contract-view-model.builder';
+
+describe('ContractRendererService', () => {
+  const renderer = new ContractRendererService();
+  renderer.onModuleInit();
+
+  function minimalView(templateKey: string): ContractViewModel {
+    const template = getTemplateMeta(templateKey);
+    return {
+      bookingId: 'test-id',
+      reference: 'BK-TEST-001',
+      status: 'CONTRACT_READY',
+      templateKey,
+      template,
+      contractDate: '1 January 2026',
+      contractYear: 2026,
+      client: {
+        companyName: 'Test Co',
+        companyAddress: 'Addis Ababa',
+        companyLocation: 'Ethiopia',
+        phone: '+251900000000',
+        email: 'test@example.com',
+        tinNumber: '1234567890',
+        vatNumber: 'VAT-001',
+        fanNumber: 'FAN-001',
+        businessLicense: 'BL-001',
+      },
+      provider: {
+        name: 'Ethio-Djibouti Standard Gauge Railway Share Company',
+        address: 'Addis Ababa, Ethiopia',
+        phone: '+251 11 872 0000',
+        email: 'info@edr.gov.et',
+        tinNumber: '—',
+      },
+      schedule: {
+        originLabel: 'SGTD',
+        destinationLabel: 'Modjo',
+        tradeDirection: 'IMPORT',
+        freightType: 'CONTAINER',
+        serviceType: 'Rail transport',
+        scheduledDate: '1 January 2026',
+        contractType: 'NEW',
+        cargoDescription: 'Container cargo',
+        totalWeightVgm: '24 tons',
+        equipmentReturn: 'RETURN',
+        hazardousLabel: 'No',
+        firstMilePickupAddress: '—',
+        lastMileDeliveryAddress: '—',
+      },
+      pricing: {
+        lineItems: [{ label: 'RAIL', description: 'Rail transport', amount: 1000, currency: 'ETB' }],
+        surcharges: [],
+        totalAmount: 1000,
+        currency: 'ETB',
+        originLabel: 'SGTD',
+        destinationLabel: 'Modjo',
+        containerLines: [{ label: '40ft', quantity: 2, vgmPerUnitTons: 12 }],
+      },
+      signatures: [],
+      canSignCustomer: true,
+      canSignStaff: false,
+      hasContractDocument: false,
+      hasCustomerSignature: false,
+      hasStaffSignature: false,
+    };
+  }
+
+  it('renders import flagship with Nagad and Article 5', () => {
+    const html = renderer.render(minimalView('IMP_CON_ETB_TRANSPORT_ONLY'));
+    expect(html).toContain('Djibouti Nagad');
+    expect(html).toContain('Article 5: Contract Price');
+    expect(html).toContain('Article 2: Obligations of the Client');
+  });
+
+  it('renders export variant without import empty-return clause', () => {
+    const html = renderer.render(minimalView('EXP_CON_USD_TRANSPORT_ONLY'));
+    expect(html).toContain('export corridors');
+    expect(html).not.toContain('Return empty containers from Dire Dawa');
+  });
+});
diff --git a/apps/edr-freight-api/src/contracts/contract-renderer.service.ts b/apps/edr-freight-api/src/contracts/contract-renderer.service.ts
new file mode 100644
index 000000000..dd539df25
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/contract-renderer.service.ts
@@ -0,0 +1,51 @@
+import { Injectable, OnModuleInit } from '@nestjs/common';
+import * as fs from 'fs';
+import * as path from 'path';
+import Handlebars from 'handlebars';
+
+import { ContractViewModel } from './contract-view-model.builder';
+
+@Injectable()
+export class ContractRendererService implements OnModuleInit {
+  private readonly templatesDir = path.join(__dirname, 'templates');
+  private readonly compiled = new Map<string, Handlebars.TemplateDelegate>();
+
+  onModuleInit(): void {
+    Handlebars.registerHelper('eq', (a: unknown, b: unknown) => a === b);
+
+    const partialsDir = path.join(this.templatesDir, '_partials');
+    if (fs.existsSync(partialsDir)) {
+      for (const file of fs.readdirSync(partialsDir)) {
+        if (!file.endsWith('.hbs')) continue;
+        const name = file.replace(/\.hbs$/, '');
+        const content = fs.readFileSync(path.join(partialsDir, file), 'utf-8');
+        Handlebars.registerPartial(name, content);
+      }
+    }
+  }
+
+  render(view: ContractViewModel): string {
+    const fileName =
+      view.template.templateFile ?? 'generic.hbs';
+    const template = this.getCompiled(fileName);
+    return template({
+      ...view,
+      paymentArticle: view.pricing.currency === 'ETB' ? 'ETB' : 'USD',
+    });
+  }
+
+  private getCompiled(fileName: string): Handlebars.TemplateDelegate {
+    const cached = this.compiled.get(fileName);
+    if (cached) return cached;
+
+    const filePath = path.join(this.templatesDir, fileName);
+    const fallbackPath = path.join(this.templatesDir, 'generic.hbs');
+    const source = fs.existsSync(filePath)
+      ? fs.readFileSync(filePath, 'utf-8')
+      : fs.readFileSync(fallbackPath, 'utf-8');
+
+    const compiled = Handlebars.compile(source);
+    this.compiled.set(fileName, compiled);
+    return compiled;
+  }
+}
diff --git a/apps/edr-freight-api/src/contracts/contract-template.registry.spec.ts b/apps/edr-freight-api/src/contracts/contract-template.registry.spec.ts
new file mode 100644
index 000000000..2c921889a
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/contract-template.registry.spec.ts
@@ -0,0 +1,68 @@
+import {
+  CONTRACT_TEMPLATE_KEYS,
+  CONTRACT_TEMPLATE_REGISTRY,
+  getTemplateMeta,
+  isValidTemplateKey,
+} from './contract-template.registry';
+
+describe('ContractTemplateRegistry', () => {
+  it('defines exactly 24 template keys', () => {
+    expect(CONTRACT_TEMPLATE_KEYS).toHaveLength(24);
+    expect(Object.keys(CONTRACT_TEMPLATE_REGISTRY)).toHaveLength(24);
+  });
+
+  it('keys match the direction_freight_currency_service pattern', () => {
+    for (const key of CONTRACT_TEMPLATE_KEYS) {
+      expect(isValidTemplateKey(key)).toBe(true);
+    }
+  });
+
+  it('each meta has non-empty obligations and article1 scope', () => {
+    for (const key of CONTRACT_TEMPLATE_KEYS) {
+      const meta = CONTRACT_TEMPLATE_REGISTRY[key]!;
+      expect(meta.clientObligations.length).toBeGreaterThan(0);
+      expect(meta.providerObligations.length).toBeGreaterThan(0);
+      expect(meta.article1.scope.length).toBeGreaterThan(0);
+      expect(meta.article1.objective.length).toBeGreaterThan(0);
+      expect(meta.contractDocuments.length).toBeGreaterThan(0);
+    }
+  });
+
+  it('IMP_CON_ETB_TRANSPORT_ONLY retains import container flagship clauses', () => {
+    const meta = getTemplateMeta('IMP_CON_ETB_TRANSPORT_ONLY');
+    expect(meta.direction).toBe('IMP');
+    expect(meta.freight).toBe('CON');
+    expect(meta.article1.objective).toContain('SGTD');
+    expect(meta.article1.objective).toContain('empty container return');
+    const clientText = meta.clientObligations.join(' ');
+    expect(clientText).toContain('Djibouti Nagad');
+    const providerText = meta.providerObligations.join(' ');
+    expect(providerText).toContain('seven (7) calendar days');
+  });
+
+  it('EXP_CON_USD_TRANSPORT_ONLY uses export-oriented article1', () => {
+    const meta = getTemplateMeta('EXP_CON_USD_TRANSPORT_ONLY');
+    expect(meta.direction).toBe('EXP');
+    expect(meta.article1.objective).toContain('SGTD');
+    expect(meta.providerObligations.join(' ')).not.toContain(
+      'Return empty containers from Dire Dawa',
+    );
+  });
+
+  it('FORWARDING adds scope and provider obligations', () => {
+    const transport = getTemplateMeta('IMP_CON_ETB_TRANSPORT_ONLY');
+    const forwarding = getTemplateMeta('IMP_CON_ETB_FORWARDING');
+    expect(forwarding.article1.scope.length).toBeGreaterThan(
+      transport.article1.scope.length,
+    );
+    expect(forwarding.providerObligations.length).toBeGreaterThan(
+      transport.providerObligations.length,
+    );
+  });
+
+  it('getTemplateMeta fallback includes clause arrays for unknown keys', () => {
+    const meta = getTemplateMeta('UNKNOWN_KEY');
+    expect(meta.clientObligations.length).toBeGreaterThan(0);
+    expect(meta.article1.scope.length).toBeGreaterThan(0);
+  });
+});
diff --git a/apps/edr-freight-api/src/contracts/contract-template.registry.ts b/apps/edr-freight-api/src/contracts/contract-template.registry.ts
new file mode 100644
index 000000000..3e91e1b4f
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/contract-template.registry.ts
@@ -0,0 +1,119 @@
+import {
+  article1ObjectiveFromClause,
+  buildClausePack,
+} from './contract-clause-packs';
+import type {
+  ContractDirection,
+  ContractFreight,
+  ContractServiceScope,
+  ContractTemplateMeta,
+} from './contract-template.types';
+
+export type { ContractTemplateMeta } from './contract-template.types';
+
+const DIRECTION_LABELS: Record<ContractDirection, string> = {
+  IMP: 'Import',
+  EXP: 'Export',
+  DOM: 'Domestic',
+};
+
+const FREIGHT_LABELS: Record<ContractFreight, string> = {
+  CON: 'Container',
+  BULK: 'Bulk',
+};
+
+const DIRECTIONS: ContractDirection[] = ['IMP', 'EXP', 'DOM'];
+const FREIGHTS: ContractFreight[] = ['CON', 'BULK'];
+const CURRENCIES = ['ETB', 'USD'] as const;
+const SERVICES: ContractServiceScope[] = ['TRANSPORT_ONLY', 'FORWARDING'];
+
+const KEY_PATTERN =
+  /^(IMP|EXP|DOM)_(CON|BULK)_(ETB|USD)_(TRANSPORT_ONLY|FORWARDING)$/;
+
+function buildMeta(
+  dir: ContractDirection,
+  freight: ContractFreight,
+  currency: string,
+  service: ContractServiceScope,
+): ContractTemplateMeta {
+  const key = `${dir}_${freight}_${currency}_${service}`;
+  const dirLabel = DIRECTION_LABELS[dir];
+  const freightLabel = FREIGHT_LABELS[freight];
+  const serviceLabel =
+    service === 'FORWARDING' ? 'Rail and Forwarding' : 'Transport Only';
+
+  const corridor =
+    dir === 'IMP'
+      ? 'from SGTD railway freight station at Djibouti to Ethiopian dry ports and return of empty containers as applicable'
+      : dir === 'EXP'
+        ? 'from Ethiopian dry ports to SGTD and related export corridors'
+        : 'between designated Ethiopian rail terminals';
+
+  const clauses = buildClausePack(dir, freight, service);
+
+  return {
+    key,
+    direction: dir,
+    freight,
+    currency,
+    serviceScope: service,
+    title: `${dirLabel} ${freightLabel} Transport Service by Railway (${serviceLabel})`,
+    directionLabel: dirLabel,
+    freightLabel,
+    whereas: `The Client has requested transportation of ${freightLabel.toLowerCase()} cargo ${corridor} using the Addis Ababa–Djibouti Railway line. The Service Provider has agreed to provide services per this contract.`,
+    article1Objective: article1ObjectiveFromClause(clauses.article1),
+    article1: clauses.article1,
+    clientObligations: clauses.clientObligations,
+    providerObligations: clauses.providerObligations,
+    contractDocuments: clauses.contractDocuments,
+  };
+}
+
+/** Full template matrix (24 keys). */
+export const CONTRACT_TEMPLATE_REGISTRY: Record<string, ContractTemplateMeta> =
+  {};
+
+for (const dir of DIRECTIONS) {
+  for (const freight of FREIGHTS) {
+    for (const currency of CURRENCIES) {
+      for (const service of SERVICES) {
+        const meta = buildMeta(dir, freight, currency, service);
+        CONTRACT_TEMPLATE_REGISTRY[meta.key] = meta;
+      }
+    }
+  }
+}
+
+export const CONTRACT_TEMPLATE_KEYS = Object.keys(CONTRACT_TEMPLATE_REGISTRY);
+
+export function listTemplateKeys(): string[] {
+  return CONTRACT_TEMPLATE_KEYS;
+}
+
+export function getTemplateMeta(key: string): ContractTemplateMeta {
+  const found = CONTRACT_TEMPLATE_REGISTRY[key];
+  if (found) return found;
+
+  const fallbackClauses = buildClausePack('IMP', 'CON', 'TRANSPORT_ONLY');
+  return {
+    key,
+    direction: 'IMP',
+    freight: 'CON',
+    currency: 'USD',
+    serviceScope: 'TRANSPORT_ONLY',
+    title: 'Freight Contract Agreement',
+    directionLabel: 'Freight',
+    freightLabel: 'Cargo',
+    whereas:
+      'The parties agree to railway freight services as described in the schedule below.',
+    article1Objective: article1ObjectiveFromClause(fallbackClauses.article1),
+    article1: fallbackClauses.article1,
+    clientObligations: fallbackClauses.clientObligations,
+    providerObligations: fallbackClauses.providerObligations,
+    contractDocuments: fallbackClauses.contractDocuments,
+  };
+}
+
+export function isValidTemplateKey(key: string): boolean {
+  return KEY_PATTERN.test(key);
+}
diff --git a/apps/edr-freight-api/src/contracts/contract-template.resolver.spec.ts b/apps/edr-freight-api/src/contracts/contract-template.resolver.spec.ts
new file mode 100644
index 000000000..f4cb1c4ee
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/contract-template.resolver.spec.ts
@@ -0,0 +1,65 @@
+import { ContractTemplateResolver } from './contract-template.resolver';
+import { Booking } from '../modules/bookings/entities/booking.entity';
+import { ServiceType } from '../modules/rule-engine/entities/service-type.entity';
+import { CargoType } from '../modules/rule-engine/entities/cargo-type.entity';
+
+describe('ContractTemplateResolver', () => {
+  const resolver = new ContractTemplateResolver();
+
+  function booking(partial: Partial<Booking>): Booking {
+    return partial as Booking;
+  }
+
+  it('resolves import container ETB transport-only', () => {
+    const key = resolver.resolve(
+      booking({
+        tradeDirection: 'IMPORT',
+        freightType: 'CONTAINER',
+        paymentCurrency: 'ETB',
+        serviceType: { code: 'RAIL_ONLY', includesFirstMile: false, includesLastMile: false } as ServiceType,
+      }),
+    );
+    expect(key).toBe('IMP_CON_ETB_TRANSPORT_ONLY');
+  });
+
+  it('resolves export bulk USD forwarding', () => {
+    const key = resolver.resolve(
+      booking({
+        tradeDirection: 'EXPORT',
+        freightType: 'BULK',
+        paymentCurrency: 'USD',
+        serviceType: {
+          code: 'RAIL_FORWARDING',
+          includesFirstMile: true,
+          includesLastMile: false,
+        } as ServiceType,
+      }),
+    );
+    expect(key).toBe('EXP_BULK_USD_FORWARDING');
+  });
+
+  it('maps BREAK_BULK cargo to BULK freight', () => {
+    const key = resolver.resolve(
+      booking({
+        tradeDirection: 'IMPORT',
+        freightType: 'CONTAINER',
+        paymentCurrency: 'ETB',
+        cargoType: { code: 'BREAK_BULK_GENERAL' } as CargoType,
+        serviceType: undefined,
+      }),
+    );
+    expect(key).toBe('IMP_BULK_ETB_TRANSPORT_ONLY');
+  });
+
+  it('resolves domestic container', () => {
+    const key = resolver.resolve(
+      booking({
+        tradeDirection: 'DOMESTIC',
+        freightType: 'CONTAINER',
+        paymentCurrency: 'USD',
+        serviceType: undefined,
+      }),
+    );
+    expect(key).toBe('DOM_CON_USD_TRANSPORT_ONLY');
+  });
+});
diff --git a/apps/edr-freight-api/src/contracts/contract-template.resolver.ts b/apps/edr-freight-api/src/contracts/contract-template.resolver.ts
new file mode 100644
index 000000000..daa48a4e7
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/contract-template.resolver.ts
@@ -0,0 +1,43 @@
+import { Injectable } from '@nestjs/common';
+
+import { Booking } from '../modules/bookings/entities/booking.entity';
+import { ServiceType } from '../modules/rule-engine/entities/service-type.entity';
+import { CargoType } from '../modules/rule-engine/entities/cargo-type.entity';
+
+@Injectable()
+export class ContractTemplateResolver {
+  resolve(booking: Booking): string {
+    const dir =
+      booking.tradeDirection === 'IMPORT'
+        ? 'IMP'
+        : booking.tradeDirection === 'EXPORT'
+          ? 'EXP'
+          : 'DOM';
+
+    let freight = booking.freightType === 'BULK' ? 'BULK' : 'CON';
+    const cargoCode = (booking.cargoType as CargoType | undefined)?.code ?? '';
+    if (cargoCode.startsWith('BREAK_BULK')) {
+      freight = 'BULK';
+    }
+
+    const currency = booking.paymentCurrency === 'ETB' ? 'ETB' : 'USD';
+    const service = this.resolveServiceScope(booking.serviceType);
+
+    return `${dir}_${freight}_${currency}_${service}`;
+  }
+
+  private resolveServiceScope(
+    serviceType?: ServiceType | null,
+  ): 'TRANSPORT_ONLY' | 'FORWARDING' {
+    if (!serviceType) return 'TRANSPORT_ONLY';
+    const code = (serviceType.code ?? '').toUpperCase();
+    if (
+      serviceType.includesFirstMile ||
+      serviceType.includesLastMile ||
+      code.includes('FORWARD')
+    ) {
+      return 'FORWARDING';
+    }
+    return 'TRANSPORT_ONLY';
+  }
+}
diff --git a/apps/edr-freight-api/src/contracts/contract-template.types.ts b/apps/edr-freight-api/src/contracts/contract-template.types.ts
new file mode 100644
index 000000000..b056b4c69
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/contract-template.types.ts
@@ -0,0 +1,35 @@
+export type ContractDirection = 'IMP' | 'EXP' | 'DOM';
+export type ContractFreight = 'CON' | 'BULK';
+export type ContractServiceScope = 'TRANSPORT_ONLY' | 'FORWARDING';
+
+export interface Article1Clause {
+  objective: string;
+  scope: string[];
+}
+
+export interface ContractClausePack {
+  article1: Article1Clause;
+  clientObligations: string[];
+  providerObligations: string[];
+  contractDocuments: string[];
+}
+
+export interface ContractTemplateMeta {
+  key: string;
+  direction: ContractDirection;
+  freight: ContractFreight;
+  currency: string;
+  serviceScope: ContractServiceScope;
+  title: string;
+  directionLabel: string;
+  freightLabel: string;
+  whereas: string;
+  /** Summary line for APIs; mirrors article1.objective */
+  article1Objective: string;
+  article1: Article1Clause;
+  clientObligations: string[];
+  providerObligations: string[];
+  contractDocuments: string[];
+  /** Optional dedicated .hbs file; otherwise uses generic.hbs */
+  templateFile?: string;
+}
diff --git a/apps/edr-freight-api/src/contracts/contract-view-model.builder.ts b/apps/edr-freight-api/src/contracts/contract-view-model.builder.ts
new file mode 100644
index 000000000..676e4f4ba
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/contract-view-model.builder.ts
@@ -0,0 +1,207 @@
+import { Injectable, NotFoundException } from '@nestjs/common';
+
+import { BookingsRepository } from '../modules/bookings/bookings.repository';
+import { Booking } from '../modules/bookings/entities/booking.entity';
+import {
+  BookingContractSignature,
+  ContractSignerRole,
+} from '../modules/bookings/entities/booking-contract-signature.entity';
+import { ContractPricingScheduleBuilder, PricingSchedule } from './contract-pricing-schedule.builder';
+import { ContractTemplateResolver } from './contract-template.resolver';
+import { ContractTemplateMeta, getTemplateMeta } from './contract-template.registry';
+
+export interface ContractSignatureView {
+  role: ContractSignerRole;
+  signerDisplayName: string;
+  signedAt: string;
+  signatureImageUrl?: string | null;
+}
+
+export interface ContractViewModel {
+  bookingId: string;
+  reference: string;
+  status: string;
+  templateKey: string;
+  template: ContractTemplateMeta;
+  contractDate: string;
+  contractYear: number;
+  client: {
+    companyName: string;
+    companyAddress: string;
+    companyLocation: string;
+    phone: string;
+    email: string;
+    tinNumber: string;
+    vatNumber: string;
+    fanNumber: string;
+    businessLicense: string;
+  };
+  provider: {
+    name: string;
+    address: string;
+    phone: string;
+    email: string;
+    tinNumber: string;
+  };
+  schedule: {
+    originLabel: string;
+    destinationLabel: string;
+    tradeDirection: string;
+    freightType: string;
+    serviceType: string;
+    scheduledDate: string;
+    contractType: string;
+    cargoDescription: string;
+    totalWeightVgm: string;
+    equipmentReturn: string;
+    hazardousLabel: string;
+    firstMilePickupAddress: string;
+    lastMileDeliveryAddress: string;
+  };
+  pricing: PricingSchedule;
+  signatures: ContractSignatureView[];
+  canSignCustomer: boolean;
+  canSignStaff: boolean;
+  hasContractDocument: boolean;
+  hasCustomerSignature: boolean;
+  hasStaffSignature: boolean;
+}
+
+@Injectable()
+export class ContractViewModelBuilder {
+  constructor(
+    private readonly bookingsRepository: BookingsRepository,
+    private readonly templateResolver: ContractTemplateResolver,
+    private readonly pricingBuilder: ContractPricingScheduleBuilder,
+  ) {}
+
+  async build(bookingId: string): Promise<{ booking: Booking; view: ContractViewModel }> {
+    const booking = await this.bookingsRepository.findByIdWithFiles(bookingId);
+    if (!booking) {
+      throw new NotFoundException(`Booking ${bookingId} not found`);
+    }
+
+    const templateKey =
+      booking.contractTemplateKey ?? this.templateResolver.resolve(booking);
+    const template = getTemplateMeta(templateKey);
+    const pricing = await this.pricingBuilder.build(booking);
+    const signatures = await this.loadSignatures(bookingId);
+
+    const hasCustomer = signatures.some((s) => s.role === 'CUSTOMER');
+    const hasStaff = signatures.some((s) => s.role === 'STAFF');
+    const hasContractFile = Boolean(
+      booking.files?.some((f) => f.code === 'contract'),
+    );
+
+    const view: ContractViewModel = {
+      bookingId: booking.id,
+      reference: booking.reference,
+      status: booking.status,
+      templateKey,
+      template,
+      contractDate: new Date().toLocaleDateString('en-GB', {
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+      }),
+      contractYear: new Date().getFullYear(),
+      client: {
+        companyName: booking.company?.name ?? 'Client',
+        companyAddress: this.valueOrDash(booking.company?.address),
+        companyLocation: this.valueOrDash(booking.company?.country),
+        phone: this.valueOrDash(booking.company?.phone),
+        email: this.valueOrDash(booking.company?.email),
+        tinNumber: this.valueOrDash(booking.company?.tin),
+        vatNumber: this.valueOrDash(booking.company?.vatNumber),
+        fanNumber: this.valueOrDash(booking.company?.fanNumber),
+        businessLicense: this.valueOrDash(booking.company?.businessLicense),
+      },
+      provider: {
+        name: 'Ethio-Djibouti Standard Gauge Railway Share Company',
+        address: 'Addis Ababa, Ethiopia',
+        phone: '+251 11 872 0000',
+        email: 'info@edr.gov.et',
+        tinNumber: '—',
+      },
+      schedule: this.buildSchedule(booking),
+      pricing,
+      signatures,
+      canSignCustomer:
+        booking.status === 'CONTRACT_READY' && !hasCustomer,
+      canSignStaff:
+        booking.status === 'SIGNED_CUSTOMER' && hasCustomer && !hasStaff,
+      hasContractDocument: hasContractFile,
+      hasCustomerSignature: hasCustomer,
+      hasStaffSignature: hasStaff,
+    };
+
+    return { booking, view };
+  }
+
+  private async loadSignatures(bookingId: string): Promise<ContractSignatureView[]> {
+    const rows = await this.bookingsRepository.findContractSignatures(bookingId);
+    return rows.map((s) => this.toSignatureView(s));
+  }
+
+  toSignatureView(row: BookingContractSignature): ContractSignatureView {
+    return {
+      role: row.signerRole,
+      signerDisplayName: row.signerDisplayName,
+      signedAt: this.formatDate(row.signedAt),
+      signatureImageUrl: row.signatureFile?.url ?? null,
+    };
+  }
+
+  private buildSchedule(booking: Booking): ContractViewModel['schedule'] {
+    const cargoName =
+      booking.freightType === 'BULK'
+        ? booking.cargoFreeText ||
+          booking.cargoType?.cargoTypeName ||
+          'Bulk commodity'
+        : booking.cargoType?.cargoTypeName || 'Container cargo';
+    const totalWeight = Number(booking.cargoTotalWeightVgm || 0);
+
+    return {
+      originLabel: this.yardLabel(booking.originYard),
+      destinationLabel: this.yardLabel(booking.destinationYard),
+      tradeDirection: this.valueOrDash(booking.tradeDirection),
+      freightType: this.valueOrDash(booking.freightType),
+      serviceType: this.valueOrDash(
+        booking.serviceType?.serviceName ?? booking.serviceType?.code,
+      ),
+      scheduledDate: this.formatDate(booking.scheduledDate),
+      contractType: this.valueOrDash(booking.contractType),
+      cargoDescription: this.valueOrDash(cargoName),
+      totalWeightVgm:
+        totalWeight > 0 ? `${totalWeight.toLocaleString()} tons` : '—',
+      equipmentReturn: this.valueOrDash(booking.equipmentReturn),
+      hazardousLabel: booking.isHazardous ? 'Yes' : 'No',
+      firstMilePickupAddress: this.valueOrDash(
+        booking.firstMilePickupAddress,
+      ),
+      lastMileDeliveryAddress: this.valueOrDash(
+        booking.lastMileDeliveryAddress,
+      ),
+    };
+  }
+
+  private yardLabel(yard?: { label?: string; code?: string } | null): string {
+    return this.valueOrDash(yard?.label ?? yard?.code);
+  }
+
+  private formatDate(value?: Date | string | null): string {
+    if (!value) return '—';
+    const date = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(date.getTime())) return '—';
+    return date.toLocaleDateString('en-GB', {
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric',
+    });
+  }
+
+  private valueOrDash(value?: string | number | null): string {
+    if (value === undefined || value === null || value === '') return '—';
+    return String(value);
+  }
+}
diff --git a/apps/edr-freight-api/src/contracts/templates/_partials/article1.hbs b/apps/edr-freight-api/src/contracts/templates/_partials/article1.hbs
new file mode 100644
index 000000000..d8b3d3fe1
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/templates/_partials/article1.hbs
@@ -0,0 +1,15 @@
+<div class="article">
+  <h2>Article 1: Objective and Scope of Services</h2>
+  <p>
+    <strong>1.1 Objective.</strong>
+    {{template.article1.objective}}
+  </p>
+  {{#if template.article1.scope.length}}
+  <p><strong>1.2 Scope of Services.</strong></p>
+  <ol>
+    {{#each template.article1.scope}}
+    <li>{{this}}</li>
+    {{/each}}
+  </ol>
+  {{/if}}
+</div>
diff --git a/apps/edr-freight-api/src/contracts/templates/_partials/article5_pricing.hbs b/apps/edr-freight-api/src/contracts/templates/_partials/article5_pricing.hbs
new file mode 100644
index 000000000..cb3440739
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/templates/_partials/article5_pricing.hbs
@@ -0,0 +1,66 @@
+<h2>Article 5: Contract Price and Terms of Payment</h2>
+<div class="article">
+  <h3>Contract Price</h3>
+  <p>
+    The contract price is calculated based on the agreed railway corridor, cargo details, applicable rate
+    schedule, and any approved operational surcharges.
+  </p>
+  <table class="details-table">
+    <tbody>
+      <tr>
+        <th>Corridor</th>
+        <td>{{pricing.originLabel}} → {{pricing.destinationLabel}}</td>
+        <th>Currency</th>
+        <td>{{pricing.currency}}</td>
+      </tr>
+      <tr>
+        <th>Payment currency</th>
+        <td>{{paymentArticle}}</td>
+        <th>Equipment return</th>
+        <td>{{pricing.equipmentReturn}}</td>
+      </tr>
+    </tbody>
+  </table>
+  {{#if pricing.equipmentReturn}}
+  <p><strong>Equipment return:</strong> {{pricing.equipmentReturn}}</p>
+  {{/if}}
+
+  <h3>Charges</h3>
+  <table class="schedule">
+    <thead>
+      <tr><th>Item</th><th>Description</th><th>Amount</th></tr>
+    </thead>
+    <tbody>
+      {{#each pricing.lineItems}}
+      <tr>
+        <td>{{label}}</td>
+        <td>{{description}}</td>
+        <td>{{currency}} {{amount}}</td>
+      </tr>
+      {{/each}}
+      {{#if pricing.surcharges.length}}
+      <tr>
+        <th colspan="3">Surcharges and Adjustments</th>
+      </tr>
+      {{#each pricing.surcharges}}
+      <tr>
+        <td>{{label}}</td>
+        <td>{{description}}</td>
+        <td>{{currency}} {{amount}}</td>
+      </tr>
+      {{/each}}
+      {{/if}}
+      <tr class="total-row">
+        <td colspan="2"><strong>Total contract value</strong></td>
+        <td><strong>{{pricing.currency}} {{pricing.totalAmount}}</strong></td>
+      </tr>
+    </tbody>
+  </table>
+  <h3>Terms of payment</h3>
+  <p>
+    Unless otherwise agreed in writing, the Client shall settle the contract value in
+    <strong>{{paymentArticle}}</strong> before the service is performed and in accordance with EDR payment
+    instructions. Bank charges, penalties, demurrage, storage, and third-party charges remain the
+    responsibility of the Client where applicable.
+  </p>
+</div>
diff --git a/apps/edr-freight-api/src/contracts/templates/_partials/articles_obligations.hbs b/apps/edr-freight-api/src/contracts/templates/_partials/articles_obligations.hbs
new file mode 100644
index 000000000..8a82c72d4
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/templates/_partials/articles_obligations.hbs
@@ -0,0 +1,19 @@
+<div class="article">
+  <h2>Article 2: Obligations of the Client</h2>
+  <p>The Client shall perform the following obligations in good faith and within the operational timelines communicated by EDR:</p>
+  <ol>
+    {{#each template.clientObligations}}
+    <li>{{this}}</li>
+    {{/each}}
+  </ol>
+</div>
+
+<div class="article">
+  <h2>Article 3: Obligations of the Service Provider</h2>
+  <p>EDR shall provide the agreed railway freight services in accordance with this Agreement and applicable operational rules:</p>
+  <ol>
+    {{#each template.providerObligations}}
+    <li>{{this}}</li>
+    {{/each}}
+  </ol>
+</div>
diff --git a/apps/edr-freight-api/src/contracts/templates/_partials/contract_documents.hbs b/apps/edr-freight-api/src/contracts/templates/_partials/contract_documents.hbs
new file mode 100644
index 000000000..adb1ac797
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/templates/_partials/contract_documents.hbs
@@ -0,0 +1,9 @@
+<div class="article">
+  <h2>Article 6: Contract Documents</h2>
+  <p>The following documents form part of this Agreement and shall be read together with the signed contract:</p>
+  <ol>
+    {{#each template.contractDocuments}}
+    <li>{{this}}</li>
+    {{/each}}
+  </ol>
+</div>
diff --git a/apps/edr-freight-api/src/contracts/templates/_partials/contract_schedule.hbs b/apps/edr-freight-api/src/contracts/templates/_partials/contract_schedule.hbs
new file mode 100644
index 000000000..9531ac4ae
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/templates/_partials/contract_schedule.hbs
@@ -0,0 +1,65 @@
+<section class="page-section">
+  <h2>Booking Schedule and Commercial Summary</h2>
+  <table class="details-table">
+    <tbody>
+      <tr>
+        <th>Route</th>
+        <td>{{schedule.originLabel}} → {{schedule.destinationLabel}}</td>
+        <th>Trade direction</th>
+        <td>{{schedule.tradeDirection}}</td>
+      </tr>
+      <tr>
+        <th>Freight type</th>
+        <td>{{schedule.freightType}}</td>
+        <th>Service type</th>
+        <td>{{schedule.serviceType}}</td>
+      </tr>
+      <tr>
+        <th>Scheduled date</th>
+        <td>{{schedule.scheduledDate}}</td>
+        <th>Contract type</th>
+        <td>{{schedule.contractType}}</td>
+      </tr>
+      <tr>
+        <th>Cargo</th>
+        <td>{{schedule.cargoDescription}}</td>
+        <th>Total VGM</th>
+        <td>{{schedule.totalWeightVgm}}</td>
+      </tr>
+      <tr>
+        <th>Equipment return</th>
+        <td>{{schedule.equipmentReturn}}</td>
+        <th>Hazardous cargo</th>
+        <td>{{schedule.hazardousLabel}}</td>
+      </tr>
+      <tr>
+        <th>First mile</th>
+        <td>{{schedule.firstMilePickupAddress}}</td>
+        <th>Last mile</th>
+        <td>{{schedule.lastMileDeliveryAddress}}</td>
+      </tr>
+    </tbody>
+  </table>
+
+  {{#if pricing.containerLines.length}}
+  <h3>Container Details</h3>
+  <table class="schedule">
+    <thead>
+      <tr>
+        <th>Container type</th>
+        <th>Quantity</th>
+        <th>VGM / unit (tons)</th>
+      </tr>
+    </thead>
+    <tbody>
+      {{#each pricing.containerLines}}
+      <tr>
+        <td>{{label}}</td>
+        <td>{{quantity}}</td>
+        <td>{{vgmPerUnitTons}}</td>
+      </tr>
+      {{/each}}
+    </tbody>
+  </table>
+  {{/if}}
+</section>
diff --git a/apps/edr-freight-api/src/contracts/templates/_partials/force_majeure.hbs b/apps/edr-freight-api/src/contracts/templates/_partials/force_majeure.hbs
new file mode 100644
index 000000000..d8c1d1287
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/templates/_partials/force_majeure.hbs
@@ -0,0 +1,12 @@
+<div class="article">
+  <h2>Article 4: Force Majeure</h2>
+  <p>
+    Neither party shall be liable for delay or non-performance caused by events beyond its reasonable control,
+    including natural disaster, war, civil unrest, government restriction, railway interruption, port closure,
+    or other force majeure events interpreted under the Ethiopian Civil Code.
+  </p>
+  <p>
+    The affected party shall notify the other party promptly and shall use reasonable efforts to reduce the
+    effect of the force majeure event on the performance of this Agreement.
+  </p>
+</div>
diff --git a/apps/edr-freight-api/src/contracts/templates/_partials/signatures_block.hbs b/apps/edr-freight-api/src/contracts/templates/_partials/signatures_block.hbs
new file mode 100644
index 000000000..05dd450e4
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/templates/_partials/signatures_block.hbs
@@ -0,0 +1,44 @@
+<div class="signatures">
+  <div class="sig-block">
+    <p class="sig-title">For the Service Provider</p>
+    <p><strong>{{provider.name}}</strong></p>
+    {{#if hasStaffSignature}}
+    {{#each signatures}}
+    {{#if (eq role "STAFF")}}
+    <div class="sig-image-box">
+      {{#if signatureImageUrl}}<img src="{{signatureImageUrl}}" alt="Staff signature" />{{/if}}
+    </div>
+    <p class="sig-line"><strong>Name:</strong> {{signerDisplayName}}</p>
+    <p class="sig-meta"><strong>Role:</strong> Authorized EDR representative</p>
+    <p class="sig-meta"><strong>Date:</strong> {{signedAt}}</p>
+    {{/if}}
+    {{/each}}
+    {{else}}
+    <div class="sig-image-box"><span class="sig-placeholder">Signature pending</span></div>
+    <p class="sig-line"><strong>Name:</strong> Authorized representative</p>
+    <p class="sig-meta"><strong>Role:</strong> EDR representative</p>
+    <p class="sig-meta"><strong>Date:</strong></p>
+    {{/if}}
+  </div>
+  <div class="sig-block">
+    <p class="sig-title">For the Client</p>
+    <p><strong>{{client.companyName}}</strong></p>
+    {{#if hasCustomerSignature}}
+    {{#each signatures}}
+    {{#if (eq role "CUSTOMER")}}
+    <div class="sig-image-box">
+      {{#if signatureImageUrl}}<img src="{{signatureImageUrl}}" alt="Customer signature" />{{/if}}
+    </div>
+    <p class="sig-line"><strong>Name:</strong> {{signerDisplayName}}</p>
+    <p class="sig-meta"><strong>Role:</strong> Authorized client representative</p>
+    <p class="sig-meta"><strong>Date:</strong> {{signedAt}}</p>
+    {{/if}}
+    {{/each}}
+    {{else}}
+    <div class="sig-image-box"><span class="sig-placeholder">Signature pending</span></div>
+    <p class="sig-line"><strong>Name:</strong> Client representative</p>
+    <p class="sig-meta"><strong>Role:</strong> Authorized client representative</p>
+    <p class="sig-meta"><strong>Date:</strong></p>
+    {{/if}}
+  </div>
+</div>
diff --git a/apps/edr-freight-api/src/contracts/templates/_partials/styles.hbs b/apps/edr-freight-api/src/contracts/templates/_partials/styles.hbs
new file mode 100644
index 000000000..43a5495ec
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/templates/_partials/styles.hbs
@@ -0,0 +1,258 @@
+<style>
+  * { box-sizing: border-box; }
+  @page { size: A4; margin: 18mm 14mm; }
+
+  body {
+    margin: 0;
+    background: #f5f7fb;
+    color: #111827;
+    font-family: "Times New Roman", Times, serif;
+    font-size: 10.5pt;
+    line-height: 1.48;
+  }
+
+  .contract {
+    width: 210mm;
+    min-height: 297mm;
+    margin: 0 auto;
+    background: #fff;
+    padding: 18mm 15mm;
+  }
+
+  h1, h2, h3, p { margin-top: 0; }
+  h1 {
+    color: #0f2742;
+    font-size: 18pt;
+    line-height: 1.25;
+    margin-bottom: 10px;
+    text-align: center;
+    text-transform: uppercase;
+  }
+  h2 {
+    border-bottom: 1.5px solid #1e3a5f;
+    color: #1e3a5f;
+    font-size: 12pt;
+    letter-spacing: 0.03em;
+    margin: 18px 0 10px;
+    padding-bottom: 5px;
+    text-transform: uppercase;
+  }
+  h3 {
+    color: #0f2742;
+    font-size: 10.8pt;
+    margin: 12px 0 6px;
+  }
+  p { margin-bottom: 8px; }
+  ol { margin: 6px 0 0; padding-left: 20px; }
+  li { margin-bottom: 5px; }
+
+  .page-section,
+  .article {
+    margin-bottom: 18px;
+    page-break-inside: avoid;
+  }
+
+  .brand-row {
+    align-items: center;
+    border-bottom: 3px solid #1e3a5f;
+    display: flex;
+    gap: 14px;
+    padding-bottom: 14px;
+  }
+  .logo-mark {
+    align-items: center;
+    background: #1e3a5f;
+    border-radius: 8px;
+    color: #fff;
+    display: flex;
+    font-family: Arial, sans-serif;
+    font-size: 16pt;
+    font-weight: 700;
+    height: 52px;
+    justify-content: center;
+    letter-spacing: 0.08em;
+    width: 72px;
+  }
+  .kicker {
+    color: #1e3a5f;
+    font-family: Arial, sans-serif;
+    font-size: 10pt;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    margin-bottom: 2px;
+    text-transform: uppercase;
+  }
+  .muted {
+    color: #6b7280;
+    font-family: Arial, sans-serif;
+    font-size: 9pt;
+    margin: 0;
+  }
+
+  .cover {
+    min-height: 255mm;
+    position: relative;
+  }
+  .cover-title {
+    margin: 54mm 0 34mm;
+    text-align: center;
+  }
+  .document-label {
+    color: #6b7280;
+    font-family: Arial, sans-serif;
+    font-size: 10pt;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+  }
+  .summary-line {
+    color: #374151;
+    font-family: Arial, sans-serif;
+    font-size: 9.5pt;
+    margin-top: 12px;
+  }
+
+  table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+  .meta-grid,
+  .details-table,
+  .schedule {
+    font-size: 9.5pt;
+    margin: 10px 0 16px;
+  }
+  .meta-grid th,
+  .meta-grid td,
+  .details-table th,
+  .details-table td,
+  .schedule th,
+  .schedule td {
+    border: 1px solid #cbd5e1;
+    padding: 7px 8px;
+    text-align: left;
+    vertical-align: top;
+  }
+  .meta-grid th,
+  .details-table th,
+  .schedule th {
+    background: #eef4fb;
+    color: #1e3a5f;
+    font-family: Arial, sans-serif;
+    font-size: 8.5pt;
+    text-transform: uppercase;
+  }
+  .schedule tbody tr:nth-child(even) td { background: #f8fafc; }
+  .total-row td {
+    background: #e8f0f8 !important;
+    color: #0f2742;
+    font-weight: 700;
+  }
+
+  .lead {
+    color: #374151;
+    font-size: 10.5pt;
+  }
+  .party-grid {
+    display: grid;
+    gap: 12px;
+    grid-template-columns: 1fr 1fr;
+  }
+  .party-card {
+    border: 1px solid #cbd5e1;
+    border-radius: 8px;
+    padding: 12px;
+  }
+  .party-card h3 {
+    background: #1e3a5f;
+    border-radius: 5px;
+    color: #fff;
+    font-family: Arial, sans-serif;
+    font-size: 9pt;
+    margin: 0 0 10px;
+    padding: 7px 9px;
+    text-transform: uppercase;
+  }
+  .party-name {
+    color: #0f2742;
+    font-weight: 700;
+    margin-bottom: 8px;
+  }
+  dl {
+    display: grid;
+    grid-template-columns: 32% 68%;
+    margin: 0;
+  }
+  dt {
+    color: #475569;
+    font-family: Arial, sans-serif;
+    font-size: 8.5pt;
+    font-weight: 700;
+    padding: 2px 6px 2px 0;
+  }
+  dd {
+    margin: 0;
+    padding: 2px 0;
+  }
+
+  .signatures {
+    display: grid;
+    gap: 18px;
+    grid-template-columns: 1fr 1fr;
+    margin-top: 24px;
+    page-break-inside: avoid;
+  }
+  .sig-block {
+    border: 1.5px solid #1e3a5f;
+    border-radius: 8px;
+    min-height: 96mm;
+    padding: 12px;
+  }
+  .sig-title {
+    color: #1e3a5f;
+    font-family: Arial, sans-serif;
+    font-size: 9pt;
+    font-weight: 700;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+  }
+  .sig-image-box {
+    align-items: center;
+    border: 1px dashed #94a3b8;
+    display: flex;
+    height: 28mm;
+    justify-content: center;
+    margin: 14px 0;
+  }
+  .sig-image-box img {
+    display: block;
+    max-height: 24mm;
+    max-width: 70mm;
+  }
+  .sig-placeholder {
+    color: #94a3b8;
+    font-family: Arial, sans-serif;
+    font-size: 8.5pt;
+  }
+  .sig-line {
+    border-top: 1px solid #111827;
+    margin-top: 16px;
+    padding-top: 5px;
+  }
+  .sig-meta {
+    color: #475569;
+    font-size: 9pt;
+    margin: 4px 0;
+  }
+
+  @media print {
+    body { background: #fff; }
+    .contract {
+      margin: 0;
+      padding: 0;
+      width: auto;
+    }
+    .cover { page-break-after: always; }
+  }
+</style>
diff --git a/apps/edr-freight-api/src/contracts/templates/generic.hbs b/apps/edr-freight-api/src/contracts/templates/generic.hbs
new file mode 100644
index 000000000..75f795bce
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/templates/generic.hbs
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>{{template.title}} — {{reference}}</title>
+  {{> styles}}
+</head>
+<body>
+  <main class="contract">
+    <section class="cover page-section">
+      <div class="brand-row">
+        <div class="logo-mark">EDR</div>
+        <div>
+          <p class="kicker">Ethio-Djibouti Standard Gauge Railway Share Company</p>
+          <p class="muted">Freight Transport Contract</p>
+        </div>
+      </div>
+
+      <div class="cover-title">
+        <p class="document-label">Contract Agreement</p>
+        <h1>{{template.title}}</h1>
+        <p class="summary-line">{{template.directionLabel}} • {{template.freightLabel}} • {{template.currency}} • {{template.serviceScope}}</p>
+      </div>
+
+      <table class="meta-grid">
+        <tr>
+          <th>Contract Ref No.</th>
+          <td>{{reference}}</td>
+          <th>Contract Year</th>
+          <td>{{contractYear}}</td>
+        </tr>
+        <tr>
+          <th>Contract Date</th>
+          <td>{{contractDate}}</td>
+          <th>Status</th>
+          <td>{{status}}</td>
+        </tr>
+      </table>
+    </section>
+
+    <section class="page-section">
+      <h2>Parties to the Agreement</h2>
+      <p class="lead">
+        This Contract Agreement is made on <strong>{{contractDate}}</strong> between the Service Provider and the Client named below.
+      </p>
+
+      <div class="party-grid">
+        <div class="party-card">
+          <h3>Service Provider</h3>
+          <p class="party-name">{{provider.name}}</p>
+          <dl>
+            <dt>Address</dt><dd>{{provider.address}}</dd>
+            <dt>Phone</dt><dd>{{provider.phone}}</dd>
+            <dt>Email</dt><dd>{{provider.email}}</dd>
+            <dt>TIN</dt><dd>{{provider.tinNumber}}</dd>
+          </dl>
+        </div>
+        <div class="party-card">
+          <h3>Client</h3>
+          <p class="party-name">{{client.companyName}}</p>
+          <dl>
+            <dt>Address</dt><dd>{{client.companyAddress}}</dd>
+            <dt>Location</dt><dd>{{client.companyLocation}}</dd>
+            <dt>Phone</dt><dd>{{client.phone}}</dd>
+            <dt>Email</dt><dd>{{client.email}}</dd>
+            <dt>TIN</dt><dd>{{client.tinNumber}}</dd>
+            <dt>VAT</dt><dd>{{client.vatNumber}}</dd>
+            <dt>FAN</dt><dd>{{client.fanNumber}}</dd>
+            <dt>Business license</dt><dd>{{client.businessLicense}}</dd>
+          </dl>
+        </div>
+      </div>
+    </section>
+
+    {{> contract_schedule}}
+
+    <section class="page-section">
+      <h2>Whereas</h2>
+      <p>{{template.whereas}}</p>
+      <p>Now therefore, the parties agree as follows:</p>
+    </section>
+
+    {{> article1}}
+    {{> articles_obligations}}
+    {{> force_majeure}}
+    {{> article5_pricing}}
+    {{> contract_documents}}
+    {{> signatures_block}}
+  </main>
+</body>
+</html>
diff --git a/apps/edr-freight-api/src/data-source.ts b/apps/edr-freight-api/src/data-source.ts
new file mode 100644
index 000000000..b35d79932
--- /dev/null
+++ b/apps/edr-freight-api/src/data-source.ts
@@ -0,0 +1,20 @@
+// apps/edr-freight-api/src/data-source.ts
+import { DataSource } from 'typeorm';
+//import { ensurePostgresSchemas } from './utils/ensure-postgres-schemas'; // adjust path if needed
+
+export const AppDataSource = new DataSource({
+  type: 'postgres',
+  host: 'localhost',
+  port: 5432,
+  username: 'postgres',
+  password: '', // Laragon default: empty
+  database: 'edr_freight',
+  schema: 'freight', // default schema for entities without an explicit schema
+  entities: [__dirname + '/**/*.entity{.ts,.js}'],
+  migrations: [__dirname + '/migrations/*{.ts,.js}'],
+  synchronize: false,
+  logging: true,
+});
+
+// Optional: call ensurePostgresSchemas before initializing
+// But you can also run it separately.
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/migrations/1748900000000-MoveCustomersToFreightSchema.ts b/apps/edr-freight-api/src/migrations/1748900000000-MoveCustomersToFreightSchema.ts
index 43bb0eb02..36e848e64 100644
--- a/apps/edr-freight-api/src/migrations/1748900000000-MoveCustomersToFreightSchema.ts
+++ b/apps/edr-freight-api/src/migrations/1748900000000-MoveCustomersToFreightSchema.ts
@@ -43,10 +43,10 @@ export class MoveCustomersToFreightSchema1748900000000 implements MigrationInter
       CREATE INDEX IF NOT EXISTS "IDX_freight_customers_email"
         ON freight.customers (email);
     `);
-    await queryRunner.query(`
-      CREATE INDEX IF NOT EXISTS "IDX_freight_customers_user_id"
-        ON freight.customers (user_id);
-    `);
+   // await queryRunner.query(`
+     // CREATE INDEX IF NOT EXISTS "IDX_freight_customers_user_id"
+     //   ON freight.customers (user_id);
+    //`);
 
     // Copy rows from public.customers when that legacy table exists
     await queryRunner.query(`
diff --git a/apps/edr-freight-api/src/migrations/1749200000000-BookingFlowRefactor.ts b/apps/edr-freight-api/src/migrations/1749200000000-BookingFlowRefactor.ts
new file mode 100644
index 000000000..162672727
--- /dev/null
+++ b/apps/edr-freight-api/src/migrations/1749200000000-BookingFlowRefactor.ts
@@ -0,0 +1,50 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class BookingFlowRefactor1749200000000 implements MigrationInterface {
+  name = 'BookingFlowRefactor1749200000000';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS freight.booking_review_note (
+        id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+        booking_id UUID NOT NULL REFERENCES freight.bookings(id) ON DELETE CASCADE,
+        author_id UUID,
+        note TEXT NOT NULL,
+        type VARCHAR(30) NOT NULL,
+        created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+        updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+        deleted_at TIMESTAMPTZ
+      );
+      CREATE INDEX IF NOT EXISTS idx_booking_review_note_booking_id
+        ON freight.booking_review_note(booking_id);
+    `);
+
+    await queryRunner.query(`
+      ALTER TABLE freight.bookings
+        ADD COLUMN IF NOT EXISTS marketing_approved_by_id UUID,
+        ADD COLUMN IF NOT EXISTS marketing_approved_at TIMESTAMPTZ,
+        ADD COLUMN IF NOT EXISTS contract_summary TEXT,
+        ADD COLUMN IF NOT EXISTS locked_at TIMESTAMPTZ;
+    `);
+
+    await queryRunner.query(`
+      UPDATE freight.bookings SET status = 'SUBMITTED'
+        WHERE status IN ('RFQ_SUBMITTED', 'QUOTATION_SENT', 'QUOTATION_APPROVED');
+      UPDATE freight.bookings SET status = 'REJECTED'
+        WHERE status = 'QUOTATION_REJECTED';
+      UPDATE freight.bookings SET status = 'CANCELLED'
+        WHERE status = 'CANCELLED';
+    `);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      ALTER TABLE freight.bookings
+        DROP COLUMN IF EXISTS locked_at,
+        DROP COLUMN IF EXISTS contract_summary,
+        DROP COLUMN IF EXISTS marketing_approved_at,
+        DROP COLUMN IF EXISTS marketing_approved_by_id;
+    `);
+    await queryRunner.query(`DROP TABLE IF EXISTS freight.booking_review_note;`);
+  }
+}
diff --git a/apps/edr-freight-api/src/migrations/1749300000000-AddBookingFreightType.ts b/apps/edr-freight-api/src/migrations/1749300000000-AddBookingFreightType.ts
new file mode 100644
index 000000000..795d93fc3
--- /dev/null
+++ b/apps/edr-freight-api/src/migrations/1749300000000-AddBookingFreightType.ts
@@ -0,0 +1,71 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddBookingFreightType1749300000000 implements MigrationInterface {
+  name = 'AddBookingFreightType1749300000000';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      ALTER TABLE freight.bookings
+        ADD COLUMN IF NOT EXISTS freight_type VARCHAR(20);
+    `);
+
+    await queryRunner.query(`
+      UPDATE freight.bookings b
+      SET freight_type = 'CONTAINER'
+      WHERE EXISTS (
+        SELECT 1 FROM freight.booking_container bc WHERE bc.booking_id = b.id
+      );
+    `);
+
+    await queryRunner.query(`
+      UPDATE freight.bookings b
+      SET freight_type = 'BULK'
+      WHERE freight_type IS NULL
+        AND b.cargo_type_id IS NOT NULL
+        AND EXISTS (
+          SELECT 1 FROM freight.cargo_types ct
+          WHERE ct.id = b.cargo_type_id AND ct.requires_director_approval = true
+        );
+    `);
+
+    await queryRunner.query(`
+      UPDATE freight.bookings
+      SET freight_type = 'CONTAINER'
+      WHERE freight_type IS NULL;
+    `);
+
+    await queryRunner.query(`
+      ALTER TABLE freight.bookings
+        ALTER COLUMN cargo_type_id DROP NOT NULL;
+    `);
+
+    await queryRunner.query(`
+      ALTER TABLE freight.bookings
+        ALTER COLUMN freight_type SET NOT NULL;
+    `);
+
+    await queryRunner.query(`
+      ALTER TABLE freight.bookings
+        ADD CONSTRAINT chk_bookings_freight_type
+        CHECK (freight_type IN ('CONTAINER', 'BULK'));
+    `);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      ALTER TABLE freight.bookings DROP CONSTRAINT IF EXISTS chk_bookings_freight_type;
+    `);
+    await queryRunner.query(`
+      ALTER TABLE freight.bookings DROP COLUMN IF EXISTS freight_type;
+    `);
+    await queryRunner.query(`
+      UPDATE freight.bookings SET cargo_type_id = (
+        SELECT id FROM freight.cargo_types LIMIT 1
+      ) WHERE cargo_type_id IS NULL;
+    `);
+    await queryRunner.query(`
+      ALTER TABLE freight.bookings
+        ALTER COLUMN cargo_type_id SET NOT NULL;
+    `);
+  }
+}
diff --git a/apps/edr-freight-api/src/migrations/1749300000000-AddFanNumberToCompanies.ts b/apps/edr-freight-api/src/migrations/1749300000000-AddFanNumberToCompanies.ts
index 38620c33f..4df7ea4ce 100644
--- a/apps/edr-freight-api/src/migrations/1749300000000-AddFanNumberToCompanies.ts
+++ b/apps/edr-freight-api/src/migrations/1749300000000-AddFanNumberToCompanies.ts
@@ -1,19 +1,20 @@
-// import { MigrationInterface, QueryRunner } from 'typeorm';
+import { MigrationInterface, QueryRunner } from 'typeorm';
 
-// export class AddFanNumberToCompanies1749300000000 implements MigrationInterface {
-//   name = 'AddFanNumberToCompanies1749300000000';
+export class AddFanNumberToCompanies1749300000000 implements MigrationInterface {
+  name = 'AddFanNumberToCompanies1749300000000';
 
-//   public async up(queryRunner: QueryRunner): Promise<void> {
-//     await queryRunner.query(`
-//       ALTER TABLE freight.companies
-//         ADD COLUMN fan_number varchar(16) NULL;
-//     `);
-//   }
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    // fan_number may already exist when CreateCompaniesModule ran with the full schema
+    await queryRunner.query(`
+      ALTER TABLE freight.companies
+        ADD COLUMN IF NOT EXISTS fan_number varchar(16) NULL;
+    `);
+  }
 
-//   public async down(queryRunner: QueryRunner): Promise<void> {
-//     await queryRunner.query(`
-//       ALTER TABLE freight.companies
-//         DROP COLUMN fan_number;
-//     `);
-//   }
-// }
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      ALTER TABLE freight.companies
+        DROP COLUMN IF EXISTS fan_number;
+    `);
+  }
+}
diff --git a/apps/edr-freight-api/src/migrations/1749400000000-AddContractSignatures.ts b/apps/edr-freight-api/src/migrations/1749400000000-AddContractSignatures.ts
new file mode 100644
index 000000000..8126b91ca
--- /dev/null
+++ b/apps/edr-freight-api/src/migrations/1749400000000-AddContractSignatures.ts
@@ -0,0 +1,45 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddContractSignatures1749400000000 implements MigrationInterface {
+  name = 'AddContractSignatures1749400000000';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      ALTER TABLE freight.bookings
+        ADD COLUMN IF NOT EXISTS contract_template_key VARCHAR(80),
+        ADD COLUMN IF NOT EXISTS contract_generated_at TIMESTAMPTZ,
+        ADD COLUMN IF NOT EXISTS pricing_breakdown JSONB;
+    `);
+
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS freight.booking_contract_signatures (
+        id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+        booking_id UUID NOT NULL REFERENCES freight.bookings(id) ON DELETE CASCADE,
+        signer_role VARCHAR(20) NOT NULL,
+        signer_user_id UUID,
+        signer_display_name VARCHAR(200) NOT NULL,
+        signed_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+        signature_file_id UUID REFERENCES freight.files(id) ON DELETE SET NULL,
+        consent_text TEXT,
+        ip_address VARCHAR(64),
+        created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+        updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+        deleted_at TIMESTAMPTZ,
+        CONSTRAINT uq_booking_contract_signatures_role
+          UNIQUE (booking_id, signer_role)
+      );
+      CREATE INDEX IF NOT EXISTS idx_booking_contract_signatures_booking_id
+        ON freight.booking_contract_signatures(booking_id);
+    `);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`DROP TABLE IF EXISTS freight.booking_contract_signatures;`);
+    await queryRunner.query(`
+      ALTER TABLE freight.bookings
+        DROP COLUMN IF EXISTS pricing_breakdown,
+        DROP COLUMN IF EXISTS contract_generated_at,
+        DROP COLUMN IF EXISTS contract_template_key;
+    `);
+  }
+}
diff --git a/apps/edr-freight-api/src/migrations/1749400000000-AddTrainScheduling.ts b/apps/edr-freight-api/src/migrations/1749400000000-AddTrainScheduling.ts
new file mode 100644
index 000000000..5e61797da
--- /dev/null
+++ b/apps/edr-freight-api/src/migrations/1749400000000-AddTrainScheduling.ts
@@ -0,0 +1,153 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddTrainScheduling1749400000000 implements MigrationInterface {
+  name = 'AddTrainScheduling1749400000000';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS freight.wagon_types (
+        id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+        code VARCHAR(32) NOT NULL UNIQUE,
+        name VARCHAR(100) NOT NULL,
+        capacity_tons NUMERIC(10,3) NOT NULL,
+        length_meters NUMERIC(10,3) NOT NULL,
+        max_wagons_per_train INT NULL,
+        supported_load_types TEXT[] NOT NULL DEFAULT '{}',
+        is_active BOOLEAN NOT NULL DEFAULT true,
+        created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+        updated_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+        deleted_at TIMESTAMPTZ NULL
+      );
+    `);
+
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS freight.locomotives (
+        id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+        code VARCHAR(32) NOT NULL UNIQUE,
+        name VARCHAR(100) NULL,
+        max_pull_weight_tons NUMERIC(10,3) NOT NULL,
+        status VARCHAR(20) NOT NULL DEFAULT 'AVAILABLE',
+        available_from TIMESTAMPTZ NULL,
+        created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+        updated_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+        deleted_at TIMESTAMPTZ NULL
+      );
+    `);
+
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS freight.train_sets (
+        id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+        locomotive_id UUID NOT NULL,
+        total_weight_tons NUMERIC(10,3) NOT NULL,
+        total_length_meters NUMERIC(10,3) NOT NULL,
+        wagon_count INT NOT NULL,
+        status VARCHAR(20) NOT NULL DEFAULT 'DRAFT',
+        created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+        updated_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+        deleted_at TIMESTAMPTZ NULL,
+        CONSTRAINT fk_train_sets_locomotive FOREIGN KEY (locomotive_id)
+          REFERENCES freight.locomotives(id)
+      );
+    `);
+
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS freight.train_set_wagons (
+        id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+        train_set_id UUID NOT NULL,
+        wagon_type_id UUID NOT NULL,
+        sequence_no INT NOT NULL,
+        capacity_tons NUMERIC(10,3) NOT NULL,
+        length_meters NUMERIC(10,3) NOT NULL,
+        assigned_weight_tons NUMERIC(10,3) NOT NULL DEFAULT 0,
+        created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+        updated_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+        deleted_at TIMESTAMPTZ NULL,
+        CONSTRAINT uq_train_set_wagons_sequence UNIQUE (train_set_id, sequence_no),
+        CONSTRAINT fk_train_set_wagons_train_set FOREIGN KEY (train_set_id)
+          REFERENCES freight.train_sets(id) ON DELETE CASCADE,
+        CONSTRAINT fk_train_set_wagons_wagon_type FOREIGN KEY (wagon_type_id)
+          REFERENCES freight.wagon_types(id)
+      );
+    `);
+
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS freight.train_schedules (
+        id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+        train_set_id UUID NOT NULL UNIQUE,
+        origin_station_id UUID NOT NULL,
+        destination_station_id UUID NOT NULL,
+        scheduled_departure_date TIMESTAMPTZ NOT NULL,
+        scheduled_arrival_date TIMESTAMPTZ NULL,
+        status VARCHAR(20) NOT NULL DEFAULT 'DRAFT',
+        created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+        updated_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+        deleted_at TIMESTAMPTZ NULL,
+        CONSTRAINT fk_train_schedules_train_set FOREIGN KEY (train_set_id)
+          REFERENCES freight.train_sets(id),
+        CONSTRAINT fk_train_schedules_origin FOREIGN KEY (origin_station_id)
+          REFERENCES freight.yards(id),
+        CONSTRAINT fk_train_schedules_destination FOREIGN KEY (destination_station_id)
+          REFERENCES freight.yards(id)
+      );
+    `);
+
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS freight.train_schedule_bookings (
+        id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+        train_schedule_id UUID NOT NULL,
+        booking_id UUID NOT NULL UNIQUE,
+        created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+        updated_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+        deleted_at TIMESTAMPTZ NULL,
+        CONSTRAINT uq_train_schedule_booking UNIQUE (train_schedule_id, booking_id),
+        CONSTRAINT fk_train_schedule_bookings_schedule FOREIGN KEY (train_schedule_id)
+          REFERENCES freight.train_schedules(id) ON DELETE CASCADE,
+        CONSTRAINT fk_train_schedule_bookings_booking FOREIGN KEY (booking_id)
+          REFERENCES freight.bookings(id)
+      );
+    `);
+
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS freight.wagon_booking_allocations (
+        id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+        train_set_wagon_id UUID NOT NULL,
+        booking_id UUID NOT NULL,
+        allocated_weight_tons NUMERIC(10,3) NOT NULL,
+        created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+        updated_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+        deleted_at TIMESTAMPTZ NULL,
+        CONSTRAINT fk_wagon_booking_allocations_wagon FOREIGN KEY (train_set_wagon_id)
+          REFERENCES freight.train_set_wagons(id) ON DELETE CASCADE,
+        CONSTRAINT fk_wagon_booking_allocations_booking FOREIGN KEY (booking_id)
+          REFERENCES freight.bookings(id)
+      );
+    `);
+
+    await queryRunner.query(`
+      CREATE INDEX IF NOT EXISTS idx_locomotives_status
+      ON freight.locomotives(status);
+    `);
+    await queryRunner.query(`
+      CREATE INDEX IF NOT EXISTS idx_train_sets_status
+      ON freight.train_sets(status);
+    `);
+    await queryRunner.query(`
+      CREATE INDEX IF NOT EXISTS idx_train_schedules_departure_status
+      ON freight.train_schedules(scheduled_departure_date, status);
+    `);
+    await queryRunner.query(`
+      CREATE INDEX IF NOT EXISTS idx_wagon_booking_allocations_booking
+      ON freight.wagon_booking_allocations(booking_id);
+    `);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`DROP TABLE IF EXISTS freight.wagon_booking_allocations;`);
+    await queryRunner.query(`DROP TABLE IF EXISTS freight.train_schedule_bookings;`);
+    await queryRunner.query(`DROP TABLE IF EXISTS freight.train_schedules;`);
+    await queryRunner.query(`DROP TABLE IF EXISTS freight.train_set_wagons;`);
+    await queryRunner.query(`DROP TABLE IF EXISTS freight.train_sets;`);
+    await queryRunner.query(`DROP TABLE IF EXISTS freight.locomotives;`);
+    await queryRunner.query(`DROP TABLE IF EXISTS freight.wagon_types;`);
+  }
+}
diff --git a/apps/edr-freight-api/src/migrations/1749500000000-AddCompanyIdToBookings.ts b/apps/edr-freight-api/src/migrations/1749500000000-AddCompanyIdToBookings.ts
new file mode 100644
index 000000000..25fbe1806
--- /dev/null
+++ b/apps/edr-freight-api/src/migrations/1749500000000-AddCompanyIdToBookings.ts
@@ -0,0 +1,59 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddCompanyIdToBookings1749500000000 implements MigrationInterface {
+  name = 'AddCompanyIdToBookings1749500000000';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      ALTER TABLE freight.bookings
+        ALTER COLUMN customer_id DROP NOT NULL;
+    `);
+
+    await queryRunner.query(`
+      ALTER TABLE freight.bookings
+        ADD COLUMN IF NOT EXISTS company_id UUID;
+    `);
+
+    await queryRunner.query(`
+      CREATE INDEX IF NOT EXISTS idx_bookings_company_id
+        ON freight.bookings(company_id);
+    `);
+
+    await queryRunner.query(`
+      DO $$
+      BEGIN
+        IF NOT EXISTS (
+          SELECT 1 FROM pg_constraint WHERE conname = 'FK_bookings_company_id'
+        ) THEN
+          ALTER TABLE freight.bookings
+            ADD CONSTRAINT "FK_bookings_company_id"
+            FOREIGN KEY (company_id)
+            REFERENCES freight.companies(id);
+        END IF;
+      END $$;
+    `);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      ALTER TABLE freight.bookings
+        DROP CONSTRAINT IF EXISTS "FK_bookings_company_id";
+    `);
+
+    await queryRunner.query(`
+      UPDATE freight.bookings SET customer_id = company_id WHERE customer_id IS NULL AND company_id IS NOT NULL;
+    `);
+
+    await queryRunner.query(`
+      ALTER TABLE freight.bookings
+        ALTER COLUMN customer_id SET NOT NULL;
+    `);
+    await queryRunner.query(`
+      DROP INDEX IF EXISTS freight.idx_bookings_company_id;
+    `);
+    await queryRunner.query(`
+      ALTER TABLE freight.bookings
+        DROP COLUMN IF EXISTS company_id;
+    `);
+  }
+}
diff --git a/apps/edr-freight-api/src/migrations/1749600000000-AddBlocksRoleToApprovalStep.ts b/apps/edr-freight-api/src/migrations/1749600000000-AddBlocksRoleToApprovalStep.ts
new file mode 100644
index 000000000..a1830c370
--- /dev/null
+++ b/apps/edr-freight-api/src/migrations/1749600000000-AddBlocksRoleToApprovalStep.ts
@@ -0,0 +1,19 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddBlocksRoleToApprovalStep1749600000000 implements MigrationInterface {
+  name = 'AddBlocksRoleToApprovalStep1749600000000';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      ALTER TABLE freight.booking_approval_step
+        ADD COLUMN IF NOT EXISTS blocks_role VARCHAR(30) NULL;
+    `);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      ALTER TABLE freight.booking_approval_step
+        DROP COLUMN IF EXISTS blocks_role;
+    `);
+  }
+}
diff --git a/apps/edr-freight-api/src/migrations/1749700000000-SeedDefaultApprovalRules.ts b/apps/edr-freight-api/src/migrations/1749700000000-SeedDefaultApprovalRules.ts
new file mode 100644
index 000000000..f972f50c2
--- /dev/null
+++ b/apps/edr-freight-api/src/migrations/1749700000000-SeedDefaultApprovalRules.ts
@@ -0,0 +1,48 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+/**
+ * Seed ITMLS US-06 approval chains if missing (standard + bulk).
+ */
+export class SeedDefaultApprovalRules1749700000000 implements MigrationInterface {
+  name = 'SeedDefaultApprovalRules1749700000000';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      INSERT INTO freight.approval_rules
+        (id, requires_director_approval, step_order, required_role, action_label, blocks_role, created_at, updated_at)
+      SELECT uuid_generate_v4(), false, 1, 'LINE_STAFF', 'Review & Approve', NULL, now(), now()
+      WHERE NOT EXISTS (
+        SELECT 1 FROM freight.approval_rules
+        WHERE requires_director_approval = false AND step_order = 1 AND deleted_at IS NULL
+      );
+
+      INSERT INTO freight.approval_rules
+        (id, requires_director_approval, step_order, required_role, action_label, blocks_role, created_at, updated_at)
+      SELECT uuid_generate_v4(), false, 2, 'DIRECTOR', 'Final Signature', 'LINE_STAFF', now(), now()
+      WHERE NOT EXISTS (
+        SELECT 1 FROM freight.approval_rules
+        WHERE requires_director_approval = false AND step_order = 2 AND deleted_at IS NULL
+      );
+
+      INSERT INTO freight.approval_rules
+        (id, requires_director_approval, step_order, required_role, action_label, blocks_role, created_at, updated_at)
+      SELECT uuid_generate_v4(), true, 1, 'DIRECTOR', 'Review & Approve', 'LINE_STAFF', now(), now()
+      WHERE NOT EXISTS (
+        SELECT 1 FROM freight.approval_rules
+        WHERE requires_director_approval = true AND step_order = 1 AND deleted_at IS NULL
+      );
+
+      INSERT INTO freight.approval_rules
+        (id, requires_director_approval, step_order, required_role, action_label, blocks_role, created_at, updated_at)
+      SELECT uuid_generate_v4(), true, 2, 'CEO', 'Final Signature', NULL, now(), now()
+      WHERE NOT EXISTS (
+        SELECT 1 FROM freight.approval_rules
+        WHERE requires_director_approval = true AND step_order = 2 AND deleted_at IS NULL
+      );
+    `);
+  }
+
+  public async down(_queryRunner: QueryRunner): Promise<void> {
+    // Keep seeded rules on rollback to avoid breaking in-flight bookings.
+  }
+}
diff --git a/apps/edr-freight-api/src/migrations/1749800000000-AddShippingLinesCodeUniqueIndex.ts b/apps/edr-freight-api/src/migrations/1749800000000-AddShippingLinesCodeUniqueIndex.ts
new file mode 100644
index 000000000..374fea724
--- /dev/null
+++ b/apps/edr-freight-api/src/migrations/1749800000000-AddShippingLinesCodeUniqueIndex.ts
@@ -0,0 +1,28 @@
+import { MigrationInterface, QueryRunner, TableIndex } from 'typeorm';
+
+/**
+ * shipping_lines was created without a unique index on code; seeder upserts require it.
+ */
+export class AddShippingLinesCodeUniqueIndex1749800000000 implements MigrationInterface {
+  name = 'AddShippingLinesCodeUniqueIndex1749800000000';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    const existing = await queryRunner.query(
+      `SELECT 1 FROM pg_indexes WHERE schemaname = 'freight' AND tablename = 'shipping_lines' AND indexdef ILIKE '%UNIQUE%code%' LIMIT 1`,
+    );
+    if (existing.length === 0) {
+      await queryRunner.createIndex(
+        'freight.shipping_lines',
+        new TableIndex({
+          name: 'UQ_shipping_lines_code',
+          columnNames: ['code'],
+          isUnique: true,
+        }),
+      );
+    }
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.dropIndex('freight.shipping_lines', 'UQ_shipping_lines_code');
+  }
+}
diff --git a/apps/edr-freight-api/src/migrations/1749900000000-CreateFileUploadSettingsTables.ts b/apps/edr-freight-api/src/migrations/1749900000000-CreateFileUploadSettingsTables.ts
new file mode 100644
index 000000000..cbbf914d4
--- /dev/null
+++ b/apps/edr-freight-api/src/migrations/1749900000000-CreateFileUploadSettingsTables.ts
@@ -0,0 +1,63 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+/**
+ * file_upload_settings / file_upload_fields entities had no migration; seeder requires both tables.
+ */
+export class CreateFileUploadSettingsTables1749900000000 implements MigrationInterface {
+  name = 'CreateFileUploadSettingsTables1749900000000';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS freight.file_upload_settings (
+        id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+        code VARCHAR(128) NOT NULL,
+        label VARCHAR(256) NOT NULL,
+        description TEXT,
+        entity VARCHAR(32) NOT NULL DEFAULT 'other',
+        created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+        updated_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+        deleted_at TIMESTAMPTZ
+      );
+    `);
+
+    await queryRunner.query(`
+      CREATE UNIQUE INDEX IF NOT EXISTS "UQ_file_upload_settings_code"
+        ON freight.file_upload_settings (code);
+    `);
+
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS freight.file_upload_fields (
+        id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+        setting_id UUID NOT NULL,
+        file_key VARCHAR(128) NOT NULL,
+        file_label VARCHAR(256) NOT NULL,
+        help_text TEXT,
+        is_required BOOLEAN NOT NULL DEFAULT false,
+        is_multiple BOOLEAN NOT NULL DEFAULT false,
+        max_files INTEGER NOT NULL DEFAULT 1,
+        allowed_extensions TEXT[] NOT NULL DEFAULT '{}'::text[],
+        max_size_mb INTEGER NOT NULL DEFAULT 10,
+        display_order INTEGER NOT NULL DEFAULT 0,
+        created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+        updated_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+        deleted_at TIMESTAMPTZ,
+        CONSTRAINT "CHK_file_upload_fields_max_files" CHECK (max_files > 0),
+        CONSTRAINT "CHK_file_upload_fields_max_size_mb" CHECK (max_size_mb > 0),
+        CONSTRAINT "FK_file_upload_fields_setting"
+          FOREIGN KEY (setting_id)
+          REFERENCES freight.file_upload_settings(id)
+          ON DELETE CASCADE
+      );
+    `);
+
+    await queryRunner.query(`
+      CREATE UNIQUE INDEX IF NOT EXISTS "UQ_file_upload_fields_setting_file_key"
+        ON freight.file_upload_fields (setting_id, file_key);
+    `);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`DROP TABLE IF EXISTS freight.file_upload_fields CASCADE`);
+    await queryRunner.query(`DROP TABLE IF EXISTS freight.file_upload_settings CASCADE`);
+  }
+}
diff --git a/apps/edr-freight-api/src/migrations/1750000000000-AddTrainExtendedColumns.ts b/apps/edr-freight-api/src/migrations/1750000000000-AddTrainExtendedColumns.ts
new file mode 100644
index 000000000..b249bd198
--- /dev/null
+++ b/apps/edr-freight-api/src/migrations/1750000000000-AddTrainExtendedColumns.ts
@@ -0,0 +1,45 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+/**
+ * Train entity gained extended fields; baseline trains table only had code/capacity/status/notes.
+ */
+export class AddTrainExtendedColumns1750000000000 implements MigrationInterface {
+  name = 'AddTrainExtendedColumns1750000000000';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      ALTER TABLE freight.trains
+        ADD COLUMN IF NOT EXISTS train_number VARCHAR(20),
+        ADD COLUMN IF NOT EXISTS train_name VARCHAR(100),
+        ADD COLUMN IF NOT EXISTS route_id UUID,
+        ADD COLUMN IF NOT EXISTS origin_station_id UUID,
+        ADD COLUMN IF NOT EXISTS destination_station_id UUID,
+        ADD COLUMN IF NOT EXISTS departure_time TIMESTAMPTZ,
+        ADD COLUMN IF NOT EXISTS arrival_time TIMESTAMPTZ,
+        ADD COLUMN IF NOT EXISTS locomotive_number VARCHAR(50),
+        ADD COLUMN IF NOT EXISTS remarks TEXT;
+    `);
+
+    await queryRunner.query(`
+      CREATE UNIQUE INDEX IF NOT EXISTS "UQ_trains_train_number"
+        ON freight.trains (train_number)
+        WHERE train_number IS NOT NULL;
+    `);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`DROP INDEX IF EXISTS freight."UQ_trains_train_number"`);
+    await queryRunner.query(`
+      ALTER TABLE freight.trains
+        DROP COLUMN IF EXISTS remarks,
+        DROP COLUMN IF EXISTS locomotive_number,
+        DROP COLUMN IF EXISTS arrival_time,
+        DROP COLUMN IF EXISTS departure_time,
+        DROP COLUMN IF EXISTS destination_station_id,
+        DROP COLUMN IF EXISTS origin_station_id,
+        DROP COLUMN IF EXISTS route_id,
+        DROP COLUMN IF EXISTS train_name,
+        DROP COLUMN IF EXISTS train_number;
+    `);
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/auth/freight-auth.module.ts b/apps/edr-freight-api/src/modules/auth/freight-auth.module.ts
new file mode 100644
index 000000000..a689ba24e
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/auth/freight-auth.module.ts
@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+
+import { FreightMeController } from './freight-me.controller';
+import { FreightMeService } from './freight-me.service';
+
+@Module({
+  controllers: [FreightMeController],
+  providers: [FreightMeService],
+})
+export class FreightAuthModule {}
diff --git a/apps/edr-freight-api/src/modules/auth/freight-me.controller.ts b/apps/edr-freight-api/src/modules/auth/freight-me.controller.ts
new file mode 100644
index 000000000..b85ecea84
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/auth/freight-me.controller.ts
@@ -0,0 +1,23 @@
+import { Controller, Get, UseGuards } from '@nestjs/common';
+import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
+import { CurrentUser } from '@tria-plc/api-common/modules/auth/decorators/current-user.decorator';
+import { JwtGuard } from '@tria-plc/api-common/modules/auth/services/jwt.guard';
+import type { TCurrentUser } from '@tria-plc/api-common/modules/auth/types/current-user.type';
+
+import { FreightMeService } from './freight-me.service';
+
+@ApiTags('auth')
+@Controller('me')
+@ApiBearerAuth()
+export class FreightMeController {
+  constructor(private readonly freightMeService: FreightMeService) {}
+
+  @Get()
+  @UseGuards(JwtGuard)
+  @ApiOperation({
+    summary: 'Current user with flat permissionKeys for backoffice gating',
+  })
+  getMe(@CurrentUser() user: TCurrentUser) {
+    return this.freightMeService.getEnrichedProfile(user);
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/auth/freight-me.service.ts b/apps/edr-freight-api/src/modules/auth/freight-me.service.ts
new file mode 100644
index 000000000..50c90213b
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/auth/freight-me.service.ts
@@ -0,0 +1,57 @@
+import { Injectable } from '@nestjs/common';
+import type { TCurrentUser } from '@tria-plc/api-common/modules/auth/types/current-user.type';
+
+import {
+  collectPermissionKeys,
+  isSuperAdmin,
+} from '../../common/freight-permission.util';
+import { PERMISSIONS_CATALOG } from '../../seed/freight-permissions.registry';
+
+@Injectable()
+export class FreightMeService {
+  getEnrichedProfile(user: TCurrentUser) {
+    const employee = user.employee
+      ? [
+          {
+            id: user.employee.id,
+            organizationId: user.employee.organizationId,
+            unitId: user.employee.unitId,
+            name: user.employee.name,
+            positions: user.employee.position
+              ? [
+                  {
+                    id: user.employee.position.id,
+                    key: user.employee.position.key,
+                    employeePositionId: user.employee.position.employeePositionId,
+                    name: user.employee.position.name,
+                    isDelegate: user.employee.position.isDelegate,
+                    parentPositionId: user.employee.position.parentPositionId,
+                    permissions: user.employee.position.permissions ?? [],
+                  },
+                ]
+              : [],
+          },
+        ]
+      : [];
+
+    const permissionKeys = collectPermissionKeys(user);
+
+    return {
+      id: user.id,
+      email: user.email,
+      name: user.name,
+      username: user.username,
+      phoneNumber: user.phoneNumber,
+      userType: user.userType,
+      status: user.status,
+      hasFinishedRegistration: user.hasFinishedRegistration,
+      hasFinishedDMSOnboarding: user.hasFinishedDMSOnboarding,
+      roles: user.roles,
+      permissions: user.permissions,
+      employee,
+      permissionKeys,
+      isSuperAdmin: isSuperAdmin(user),
+      permissionsCatalog: PERMISSIONS_CATALOG,
+    };
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/booking-contract.service.ts b/apps/edr-freight-api/src/modules/bookings/booking-contract.service.ts
new file mode 100644
index 000000000..ab8a8dfa7
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/bookings/booking-contract.service.ts
@@ -0,0 +1,284 @@
+import {
+  BadRequestException,
+  Injectable,
+  NotFoundException,
+} from '@nestjs/common';
+import { Readable } from 'stream';
+
+import { ContractPdfService } from '../../contracts/contract-pdf.service';
+import { ContractRendererService } from '../../contracts/contract-renderer.service';
+import { getTemplateMeta } from '../../contracts/contract-template.registry';
+import { ContractTemplateResolver } from '../../contracts/contract-template.resolver';
+import { ContractViewModelBuilder } from '../../contracts/contract-view-model.builder';
+import { MinioService } from '../minio/minio.service';
+import { FilesService } from '../files/files.service';
+import { FileRecord } from '../files/entities/file.entity';
+import { BookingsRepository } from './bookings.repository';
+import { Booking } from './entities/booking.entity';
+import { assertBookingStatus } from './booking-status.util';
+import { ContractViewDto } from './dto/contract-view.dto';
+import { SignContractDto } from './dto/sign-contract.dto';
+import { ContractSignerRole } from './entities/booking-contract-signature.entity';
+
+@Injectable()
+export class BookingContractService {
+  constructor(
+    private readonly bookingsRepository: BookingsRepository,
+    private readonly filesService: FilesService,
+    private readonly minioService: MinioService,
+    private readonly templateResolver: ContractTemplateResolver,
+    private readonly viewModelBuilder: ContractViewModelBuilder,
+    private readonly renderer: ContractRendererService,
+    private readonly pdfService: ContractPdfService,
+  ) {}
+
+  buildContractSummary(booking: Booking): string {
+    const direction =
+      booking.tradeDirection === 'IMPORT'
+        ? 'Import'
+        : booking.tradeDirection === 'EXPORT'
+          ? 'Export'
+          : booking.tradeDirection;
+
+    const cargo = booking.cargoType;
+    const isBulk = booking.freightType === 'BULK';
+
+    let cargoLabel: string;
+    if (isBulk) {
+      cargoLabel = `Bulk (${booking.cargoFreeText || cargo?.cargoTypeName || 'Commodity'})`;
+    } else {
+      const lines =
+        booking.bookingContainers?.map((bc) => {
+          const label = bc.containerType?.label ?? bc.containerType?.code ?? 'Container';
+          return `${bc.quantity}× ${label}`;
+        }) ?? [];
+      cargoLabel =
+        lines.length > 0
+          ? `Container (${lines.join(', ')})`
+          : 'Container (Standard)';
+    }
+
+    return `Operation: ${direction} | Cargo Type: ${cargoLabel}`;
+  }
+
+  async getSummary(bookingId: string): Promise<{ summary: string }> {
+    const booking = await this.requireBooking(bookingId);
+    const summary = booking.contractSummary ?? this.buildContractSummary(booking);
+    return { summary };
+  }
+
+  async getContractView(bookingId: string): Promise<ContractViewDto> {
+    const { view } = await this.viewModelBuilder.build(bookingId);
+    await this.inlineSignatureImages(view.signatures);
+    const html = this.renderer.render(view);
+    return {
+      bookingId: view.bookingId,
+      reference: view.reference,
+      status: view.status,
+      templateKey: view.templateKey,
+      title: view.template.title,
+      html,
+      canSignCustomer: view.canSignCustomer,
+      canSignStaff: view.canSignStaff,
+      hasContractDocument: view.hasContractDocument,
+      signatures: view.signatures,
+      pricingSchedule: view.pricing as unknown as Record<string, unknown>,
+    };
+  }
+
+  async generateContract(bookingId: string): Promise<Booking> {
+    const booking = await this.requireBooking(bookingId);
+    assertBookingStatus(booking, ['APPROVED']);
+
+    const templateKey = this.templateResolver.resolve(booking);
+    const summary = this.buildContractSummary(booking);
+    await this.upsertContractPdf(bookingId, booking.reference, templateKey);
+
+    const now = new Date();
+    const updated = await this.bookingsRepository.update(bookingId, {
+      status: 'CONTRACT_READY',
+      contractSummary: summary,
+      contractTemplateKey: templateKey,
+      contractGeneratedAt: now,
+    } as never);
+    return updated!;
+  }
+
+  async streamContract(bookingId: string) {
+    const booking = await this.requireBooking(bookingId);
+    const templateKey =
+      booking.contractTemplateKey ?? this.templateResolver.resolve(booking);
+    const record = await this.upsertContractPdf(
+      bookingId,
+      booking.reference,
+      templateKey,
+    );
+    return this.filesService.streamById(record.id);
+  }
+
+  async signContract(
+    bookingId: string,
+    dto: SignContractDto,
+    options: { signerUserId?: string; ipAddress?: string },
+  ): Promise<Booking> {
+    const booking = await this.requireBooking(bookingId);
+    const role = dto.role as ContractSignerRole;
+
+    if (role === 'CUSTOMER') {
+      assertBookingStatus(booking, ['CONTRACT_READY']);
+      const existing = await this.bookingsRepository.findContractSignature(
+        bookingId,
+        'CUSTOMER',
+      );
+      if (existing) {
+        throw new BadRequestException('Customer has already signed this contract');
+      }
+    } else {
+      assertBookingStatus(booking, ['SIGNED_CUSTOMER']);
+      const existing = await this.bookingsRepository.findContractSignature(
+        bookingId,
+        'STAFF',
+      );
+      if (existing) {
+        throw new BadRequestException('Staff has already signed this contract');
+      }
+    }
+
+    const buffer = this.decodeSignatureImage(dto.signatureImageBase64);
+    const sigFile: Express.Multer.File = {
+      fieldname: `signature_${role.toLowerCase()}`,
+      originalname: `signature-${role.toLowerCase()}-${booking.reference}.png`,
+      encoding: '7bit',
+      mimetype: 'image/png',
+      size: buffer.length,
+      buffer,
+      stream: Readable.from(buffer),
+      destination: '',
+      filename: '',
+      path: '',
+    };
+
+    const fileRecord = await this.filesService.upsertByCode({
+      resourceId: bookingId,
+      resource: 'bookings',
+      code: role === 'CUSTOMER' ? 'signature_customer' : 'signature_staff',
+      file: sigFile,
+    });
+
+    const now = new Date();
+    await this.bookingsRepository.saveContractSignature({
+      bookingId,
+      signerRole: role,
+      signerUserId: options.signerUserId ?? null,
+      signerDisplayName: dto.signerDisplayName,
+      signedAt: now,
+      signatureFileId: fileRecord.id,
+      consentText: dto.consentText ?? null,
+      ipAddress: options.ipAddress ?? null,
+    });
+
+    const updates: Record<string, unknown> = {};
+
+    if (role === 'CUSTOMER') {
+      updates.status = 'SIGNED_CUSTOMER';
+      updates.customerSignedAt = now;
+    } else {
+      updates.status = 'FULLY_EXECUTED';
+      updates.fullyExecutedAt = now;
+      updates.marketingApprovedAt = now;
+      updates.marketingApprovedById = options.signerUserId ?? null;
+      updates.lockedAt = now;
+    }
+
+    const updated = await this.bookingsRepository.update(bookingId, updates as never);
+    await this.upsertContractPdf(
+      bookingId,
+      booking.reference,
+      booking.contractTemplateKey ?? this.templateResolver.resolve(booking),
+    );
+    return updated!;
+  }
+
+  async getSignatures(bookingId: string) {
+    const rows = await this.bookingsRepository.findContractSignatures(bookingId);
+    const views = rows.map((r) => this.viewModelBuilder.toSignatureView(r));
+    await this.inlineSignatureImages(views);
+    return { signatures: views };
+  }
+
+  private async upsertContractPdf(
+    bookingId: string,
+    reference: string,
+    templateKey: string,
+  ): Promise<FileRecord> {
+    const { view } = await this.viewModelBuilder.build(bookingId);
+    view.templateKey = templateKey;
+    view.template = getTemplateMeta(templateKey);
+    await this.inlineSignatureImages(view.signatures);
+
+    const html = this.renderer.render(view);
+    const pdfBuffer = await this.pdfService.htmlToPdfBuffer(html);
+    const file: Express.Multer.File = {
+      fieldname: 'contract',
+      originalname: `contract-${reference}.pdf`,
+      encoding: '7bit',
+      mimetype: 'application/pdf',
+      size: pdfBuffer.length,
+      buffer: pdfBuffer,
+      stream: Readable.from(pdfBuffer),
+      destination: '',
+      filename: '',
+      path: '',
+    };
+
+    return this.filesService.upsertByCode({
+      resourceId: bookingId,
+      resource: 'bookings',
+      code: 'contract',
+      file,
+    });
+  }
+
+  private async inlineSignatureImages(
+    signatures: Array<{ signatureImageUrl?: string | null }>,
+  ): Promise<void> {
+    for (const sig of signatures) {
+      if (!sig.signatureImageUrl) continue;
+      try {
+        if (sig.signatureImageUrl.startsWith('data:')) continue;
+        const objectName = this.minioService.getObjectNameFromUrl(
+          sig.signatureImageUrl,
+        );
+        const stream = await this.minioService.getFileStream(objectName);
+        const buffer = await this.streamToBuffer(stream);
+        sig.signatureImageUrl = `data:image/png;base64,${buffer.toString(
+          'base64',
+        )}`;
+      } catch {
+        /* keep original url */
+      }
+    }
+  }
+
+  private streamToBuffer(stream: Readable): Promise<Buffer> {
+    return new Promise((resolve, reject) => {
+      const chunks: Buffer[] = [];
+      stream.on('data', (chunk: Buffer | string) => {
+        chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
+      });
+      stream.on('error', reject);
+      stream.on('end', () => resolve(Buffer.concat(chunks)));
+    });
+  }
+
+  private decodeSignatureImage(base64: string): Buffer {
+    const raw = base64.includes(',') ? base64.split(',')[1]! : base64;
+    return Buffer.from(raw, 'base64');
+  }
+
+  private async requireBooking(id: string): Promise<Booking> {
+    const booking = await this.bookingsRepository.findByIdWithFiles(id);
+    if (!booking) throw new NotFoundException(`Booking ${id} not found`);
+    return booking;
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/booking-freight.util.ts b/apps/edr-freight-api/src/modules/bookings/booking-freight.util.ts
new file mode 100644
index 000000000..e3e97f301
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/bookings/booking-freight.util.ts
@@ -0,0 +1,44 @@
+import { BadRequestException } from '@nestjs/common';
+
+import { FREIGHT_TYPES, FreightType } from './entities/booking.entity';
+import { BookingFreightShapeInput } from './dto/validators/booking-freight.validator';
+
+/** Normalize and validate booking freight shape (used on create and after update merge). */
+export function assertFreightShape(input: BookingFreightShapeInput): void {
+  if (!input.freightType || !FREIGHT_TYPES.includes(input.freightType as FreightType)) {
+    throw new BadRequestException(
+      `freightType is required and must be one of: ${FREIGHT_TYPES.join(', ')}`,
+    );
+  }
+  //
+
+  const containers = input.containers ?? [];
+  const hasContainers = containers.length > 0;
+  const hasCargoType = Boolean(input.cargoTypeId);
+
+  if (input.freightType === 'BULK') {
+    if (hasContainers) {
+      throw new BadRequestException(
+        'BULK freight cannot include container lines; use cargoTypeId only',
+      );
+    }
+    if (!hasCargoType) {
+      throw new BadRequestException('cargoTypeId is required for BULK freight');
+    }
+    return;
+  }
+
+  if (hasCargoType) {
+    throw new BadRequestException('cargoTypeId is not allowed for CONTAINER freight');
+  }
+  if (!hasContainers) {
+    throw new BadRequestException(
+      'CONTAINER freight requires at least one container line with containerTypeId',
+    );
+  }
+  for (const line of containers) {
+    if (!line.containerTypeId) {
+      throw new BadRequestException('Each container line must include containerTypeId');
+    }
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/booking-list-tabs.config.ts b/apps/edr-freight-api/src/modules/bookings/booking-list-tabs.config.ts
new file mode 100644
index 000000000..ce15125c2
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/bookings/booking-list-tabs.config.ts
@@ -0,0 +1,54 @@
+export const BOOKING_LIST_TAB_KEYS = [
+  'all',
+  'intake',
+  'in_approval',
+  'approved_contract',
+  'payment',
+  'operations',
+  'completed',
+  'closed',
+] as const;
+
+export type BookingListTabKey = (typeof BOOKING_LIST_TAB_KEYS)[number];
+
+export const BOOKING_LIST_TABS: ReadonlyArray<{
+  key: BookingListTabKey;
+  statuses: readonly string[] | null;
+}> = [
+  { key: 'all', statuses: null },
+  { key: 'intake', statuses: ['SUBMITTED'] },
+  {
+    key: 'in_approval',
+    statuses: ['PENDING_APPROVAL', 'APPROVED_PENDING_SIGNATURE'],
+  },
+  {
+    key: 'approved_contract',
+    statuses: ['APPROVED', 'CONTRACT_READY', 'SIGNED_CUSTOMER', 'FULLY_EXECUTED'],
+  },
+  { key: 'payment', statuses: ['FULLY_EXECUTED', 'PAID'] },
+  {
+    key: 'operations',
+    statuses: ['IN_TRANSIT', 'PENDING_CONSOLIDATION', 'CONSOLIDATED'],
+  },
+  { key: 'completed', statuses: ['COMPLETED'] },
+  { key: 'closed', statuses: ['REJECTED', 'CANCELLED'] },
+];
+
+export function mapStatusCountsToTabs(
+  statusCounts: Record<string, number>,
+): Record<BookingListTabKey, number> {
+  const result = {} as Record<BookingListTabKey, number>;
+
+  for (const tab of BOOKING_LIST_TABS) {
+    if (!tab.statuses?.length) {
+      result[tab.key] = Object.values(statusCounts).reduce((sum, n) => sum + n, 0);
+      continue;
+    }
+    result[tab.key] = tab.statuses.reduce(
+      (sum, status) => sum + (statusCounts[status] ?? 0),
+      0,
+    );
+  }
+
+  return result;
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/booking-next-step.util.ts b/apps/edr-freight-api/src/modules/bookings/booking-next-step.util.ts
new file mode 100644
index 000000000..c0a865949
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/bookings/booking-next-step.util.ts
@@ -0,0 +1,68 @@
+import { BookingApprovalStep } from './entities/booking-approval-step.entity';
+import { Booking } from './entities/booking.entity';
+
+export interface BookingNextStep {
+  action: string;
+  description: string;
+  requiredRole?: string;
+}
+
+export function computeNextStep(
+  booking: Pick<Booking, 'status' | 'paymentCurrency'>,
+  nextPendingStep?: Pick<BookingApprovalStep, 'requiredRole' | 'stepOrder'> | null,
+): BookingNextStep | null {
+  const { status } = booking;
+
+  switch (status) {
+    case 'SUBMITTED':
+      return {
+        action: 'ACCEPT_INTAKE',
+        description: 'Line Staff must accept the submission to begin approval',
+      };
+    case 'PENDING_APPROVAL':
+    case 'APPROVED_PENDING_SIGNATURE':
+      if (nextPendingStep) {
+        return {
+          action: 'APPROVE_STEP',
+          requiredRole: nextPendingStep.requiredRole,
+          description: `${nextPendingStep.requiredRole} must approve step ${nextPendingStep.stepOrder}`,
+        };
+      }
+      return {
+        action: 'APPROVE_STEP',
+        description: 'Complete the pending approval step in sequence',
+      };
+    case 'APPROVED':
+      return {
+        action: 'GENERATE_CONTRACT',
+        description: 'Generate the contract document',
+      };
+    case 'CONTRACT_READY':
+      return {
+        action: 'CUSTOMER_SIGN',
+        description: 'Customer must sign the contract',
+      };
+    case 'SIGNED_CUSTOMER':
+      return {
+        action: 'STAFF_SIGN',
+        description: 'Internal staff must counter-sign the contract',
+      };
+    case 'FULLY_EXECUTED':
+      return {
+        action: 'PAY',
+        description: 'Complete in-app payment',
+      };
+    case 'PAID':
+      return {
+        action: 'START_TRANSIT',
+        description: 'Mark shipment as in transit',
+      };
+    case 'IN_TRANSIT':
+      return {
+        action: 'COMPLETE',
+        description: 'Mark shipment complete',
+      };
+    default:
+      return null;
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/booking-payment.service.ts b/apps/edr-freight-api/src/modules/bookings/booking-payment.service.ts
new file mode 100644
index 000000000..4697728e7
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/bookings/booking-payment.service.ts
@@ -0,0 +1,50 @@
+import { Injectable, NotFoundException } from '@nestjs/common';
+import { BookingsRepository } from './bookings.repository';
+import { Booking } from './entities/booking.entity';
+import { assertBookingStatus } from './booking-status.util';
+import { InAppPaymentReceiptDto } from './dto/pay-booking.dto';
+
+export interface InAppPaymentReceipt extends InAppPaymentReceiptDto {}
+
+@Injectable()
+export class BookingPaymentService {
+  constructor(private readonly bookingsRepository: BookingsRepository) {}
+
+  async pay(
+    bookingId: string,
+  ): Promise<{ booking: Booking; receipt: InAppPaymentReceipt }> {
+    const booking = await this.requireBooking(bookingId);
+    assertBookingStatus(booking, ['FULLY_EXECUTED']);
+
+    const receipt = this.buildMockReceipt(booking);
+
+    const updated = await this.bookingsRepository.update(bookingId, {
+      status: 'PAID',
+      paymentStatus: 'PAID',
+    } as never);
+
+    return { booking: updated!, receipt };
+  }
+
+  private buildMockReceipt(booking: Booking): InAppPaymentReceipt {
+    const timestamp = Date.now();
+    const isEtb = booking.paymentCurrency === 'ETB';
+    const prefix = isEtb ? 'TB' : 'CARD';
+    const provider = isEtb ? 'TELEBIRR' : 'CARD';
+
+    return {
+      success: true,
+      provider,
+      providerRef: `${prefix}-${booking.reference}-${timestamp}`,
+      amount: booking.totalAmount,
+      currency: booking.paymentCurrency,
+      paidAt: new Date().toISOString(),
+    };
+  }
+
+  private async requireBooking(id: string): Promise<Booking> {
+    const booking = await this.bookingsRepository.findById(id);
+    if (!booking) throw new NotFoundException(`Booking ${id} not found`);
+    return booking;
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/booking-pricing.service.ts b/apps/edr-freight-api/src/modules/bookings/booking-pricing.service.ts
new file mode 100644
index 000000000..4e47456e0
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/bookings/booking-pricing.service.ts
@@ -0,0 +1,311 @@
+import { Injectable, NotFoundException } from '@nestjs/common';
+
+import { ContainerTypesService } from '../rule-engine/services/container-types.service';
+import { RatesService } from '../rule-engine/services/rates.service';
+import { ServiceTypesService } from '../rule-engine/services/service-types.service';
+import { Rate } from '../rule-engine/entities/rate.entity';
+import {
+  AppliedCargoModifier,
+  BookingEvaluationInput,
+  RuleEngineService,
+} from '../rule-engine/rule-engine.service';
+import { BookingsRepository } from './bookings.repository';
+import { GeneratePriceResponseDto, PriceLineItemDto } from './dto/generate-price-response.dto';
+import { Booking } from './entities/booking.entity';
+import { assertBookingStatus } from './booking-status.util';
+
+@Injectable()
+export class BookingPricingService {
+  constructor(
+    private readonly bookingsRepository: BookingsRepository,
+    private readonly ruleEngineService: RuleEngineService,
+    private readonly containerTypesService: ContainerTypesService,
+    private readonly ratesService: RatesService,
+    private readonly serviceTypesService: ServiceTypesService,
+  ) {}
+
+  async generatePrice(bookingId: string): Promise<GeneratePriceResponseDto> {
+    const booking = await this.requireBooking(bookingId);
+    assertBookingStatus(booking, ['DRAFT']);
+
+    const evalInput = await this.buildEvalInputForBooking(booking);
+    console.log('evalInput----', evalInput);
+    const ruleResult = await this.ruleEngineService.evaluate(evalInput);
+    this.ruleEngineService.assertNoHardBlocks(ruleResult);
+
+    const lineItems: PriceLineItemDto[] = [];
+    let total = 0;
+
+    const baseLines = await this.computeBaseRailLines(booking, evalInput);
+    for (const line of baseLines) {
+      lineItems.push(line);
+      total += line.amount;
+    }
+
+    for (const mod of ruleResult.appliedModifiers) {
+      const item: PriceLineItemDto = {
+        code: mod.surchargeTypeCode,
+        description: `Surcharge: ${mod.surchargeTypeCode}`,
+        amount: mod.calculatedAmount,
+        currency: mod.currency,
+      };
+      lineItems.push(item);
+      total += mod.calculatedAmount;
+    }
+
+    await this.persistPriceRun(bookingId, ruleResult.appliedModifiers, total);
+
+    await this.bookingsRepository.update(bookingId, {
+      totalAmount: total,
+      priorityScore: ruleResult.priorityScore,
+      pricingBreakdown: {
+        lineItems,
+        totalAmount: total,
+        currency: booking.paymentCurrency,
+        generatedAt: new Date().toISOString(),
+      },
+    } as never);
+
+    return {
+      bookingId,
+      totalAmount: total,
+      currency: booking.paymentCurrency,
+      lineItems,
+      warnings: ruleResult.warnings,
+    };
+  }
+
+  async buildEvalInputForBooking(booking: Booking): Promise<BookingEvaluationInput> {
+    const containers = await Promise.all(
+      (booking.bookingContainers ?? []).map(async (bc) => {
+        const ct = await this.containerTypesService.findById(bc.containerTypeId);
+        const vgm = Number(bc.vgmPerUnitTons);
+        const qty = bc.quantity;
+        return {
+          containerTypeId: bc.containerTypeId,
+          quantity: qty,
+          vgmPerUnitTons: vgm,
+          totalVgmTons: qty * vgm,
+          isReefer: ct.isReefer,
+        };
+      }),
+    );
+    return {
+      freightType: booking.freightType as 'CONTAINER' | 'BULK',
+      cargoTypeId: booking.cargoTypeId ?? null,
+      serviceTypeId: booking.serviceTypeId,
+      paymentCurrency: booking.paymentCurrency,
+      tradeDirection: booking.tradeDirection,
+      isHazardous: booking.isHazardous,
+      allowConsolidation: booking.allowConsolidation,
+      shippingLineId: booking.shippingLineId,
+      containers,
+    };
+  }
+
+  private async requireBooking(id: string): Promise<Booking> {
+    const booking = await this.bookingsRepository.findByIdWithFiles(id);
+    if (!booking) throw new NotFoundException(`Booking ${id} not found`);
+    return booking;
+  }
+
+  /** Line items for contract schedule (uses stored breakdown or recomputes). */
+  async computeContractLineItems(booking: Booking): Promise<{
+    lineItems: PriceLineItemDto[];
+    totalAmount: number;
+    currency: string;
+  }> {
+    const stored = booking.pricingBreakdown as {
+      lineItems?: PriceLineItemDto[];
+      totalAmount?: number;
+      currency?: string;
+    } | null;
+
+    if (stored?.lineItems?.length) {
+      return {
+        lineItems: stored.lineItems,
+        totalAmount: Number(stored.totalAmount ?? booking.totalAmount),
+        currency: stored.currency ?? booking.paymentCurrency,
+      };
+    }
+
+    const evalInput = await this.buildEvalInputForBooking(booking);
+    const ruleResult = await this.ruleEngineService.evaluate(evalInput);
+    const lineItems: PriceLineItemDto[] = [];
+    let total = 0;
+
+    const baseLines = await this.computeBaseRailLines(booking, evalInput);
+    for (const line of baseLines) {
+      lineItems.push(line);
+      total += line.amount;
+    }
+
+    for (const mod of ruleResult.appliedModifiers) {
+      lineItems.push({
+        code: mod.surchargeTypeCode,
+        description: `Surcharge: ${mod.surchargeTypeCode}`,
+        amount: mod.calculatedAmount,
+        currency: mod.currency,
+      });
+      total += mod.calculatedAmount;
+    }
+
+    if (lineItems.length === 0) {
+      total = Number(booking.totalAmount);
+      lineItems.push({
+        code: 'TOTAL',
+        description: 'Contract total',
+        amount: total,
+        currency: booking.paymentCurrency,
+      });
+    }
+
+    return {
+      lineItems,
+      totalAmount: total || Number(booking.totalAmount),
+      currency: booking.paymentCurrency,
+    };
+  }
+
+  /** Recompute priority on submit (USD + service tier). */
+  async computeSubmitPriorityScore(booking: Booking): Promise<number> {
+    const evalInput = await this.buildEvalInputForBooking(booking);
+    const ruleResult = await this.ruleEngineService.evaluate(evalInput);
+    let score = ruleResult.priorityScore;
+
+    const serviceType = await this.serviceTypesService.findById(booking.serviceTypeId);
+    if (booking.paymentCurrency === 'USD' && serviceType) {
+      const code = (serviceType.code ?? '').toUpperCase();
+      const hasForwarding =
+        serviceType.includesFirstMile ||
+        serviceType.includesLastMile ||
+        code.includes('FORWARD') ||
+        code.includes('Y');
+      const railOnly = code.includes('RAIL') && !hasForwarding;
+
+      if (hasForwarding) score += 1000;
+      else if (railOnly || code.includes('X')) score += 500;
+    }
+
+    return score;
+  }
+
+  private async computeBaseRailLines(
+    booking: Booking,
+    evalInput: BookingEvaluationInput,
+  ): Promise<PriceLineItemDto[]> {
+    const liveRates = await this.ratesService.findLiveRates();
+    const currency = booking.paymentCurrency;
+    const isBulk = booking.freightType === 'BULK';
+console.log('liveRates----', liveRates);
+    const rateType =
+      booking.tradeDirection === 'IMPORT'
+        ? isBulk
+          ? 'BULK_IMPORT'
+          : 'CONTAINER_IMPORT'
+        : booking.tradeDirection === 'EXPORT'
+          ? isBulk
+            ? 'BULK_EXPORT'
+            : 'CONTAINER_EXPORT'
+          : 'INTERCITY_CONTAINER';
+
+
+          console.log('rateType----', rateType);
+
+    const lines: PriceLineItemDto[] = [];
+    const wagonCount = await this.bookingsRepository.calculateWagonCount(booking.id);
+
+    for (const container of evalInput.containers) {
+      console.log('container----', container);
+      const rate = this.pickRate(liveRates, rateType, container.containerTypeId, currency);
+      console.log('rate----', rate);
+      if (!rate) continue;
+
+      const amount = this.amountForRate(rate, container.quantity, wagonCount);
+      lines.push({
+        code: rateType,
+        description: `Base rail (${rateType})`,
+        amount,
+        currency: rate.currency,
+      });
+    }
+
+    if (lines.length === 0) {
+      const fallback = liveRates.find(
+        (r) => r.rateType === rateType && r.currency === currency && r.status === 'LIVE',
+      );
+      if (fallback) {
+        const amount = this.amountForRate(fallback, 1, wagonCount);
+        lines.push({
+          code: rateType,
+          description: `Base rail (${rateType})`,
+          amount,
+          currency: fallback.currency,
+        });
+      }
+    }
+
+    return lines;
+  }
+
+  private pickRate(
+    rates: Rate[],
+    rateType: string,
+    containerTypeId: string,
+    currency: string,
+  ): Rate | undefined {
+    return (
+      rates.find(
+        (r) =>
+          r.rateType === rateType &&
+          r.currency === currency &&
+          r.containerTypeId === containerTypeId,
+      ) ??
+      rates.find((r) => r.rateType === rateType && r.currency === currency && !r.containerTypeId)
+    );
+  }
+
+  private amountForRate(rate: Rate, quantity: number, wagonCount: number): number {
+    const value = Number(rate.rateValue);
+    switch (rate.rateUnit) {
+      case 'PER_CONTAINER':
+        return value * quantity;
+      case 'PER_WAGON':
+        return value * wagonCount;
+      case 'PER_TON':
+        return value * quantity;
+      case 'FLAT':
+        return value;
+      default:
+        return value * quantity;
+    }
+  }
+
+  private async persistPriceRun(
+    bookingId: string,
+    modifiers: AppliedCargoModifier[],
+    _total: number,
+  ): Promise<void> {
+    await this.bookingsRepository.clearPricingArtifacts(bookingId);
+    const snapshots = await this.ruleEngineService.snapshotLiveRates(bookingId);
+
+    const snapshotByRateId = new Map(snapshots.map((s) => [s.rateId, s.id]));
+    const rows = modifiers
+      .map((m) => {
+        const snapshotId = snapshotByRateId.get(m.rateId);
+        if (!snapshotId) return null;
+        return {
+          bookingId,
+          surchargeTypeId: m.surchargeTypeId,
+          triggerValue: m.triggerValue,
+          calculatedAmount: m.calculatedAmount,
+          rateSnapshotId: snapshotId,
+        };
+      })
+      .filter((r): r is NonNullable<typeof r> => r !== null);
+
+    if (rows.length > 0) {
+      await this.bookingsRepository.createCargoModifiers(rows);
+    }
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/booking-status.util.ts b/apps/edr-freight-api/src/modules/bookings/booking-status.util.ts
new file mode 100644
index 000000000..fe9152149
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/bookings/booking-status.util.ts
@@ -0,0 +1,10 @@
+import { ConflictException } from '@nestjs/common';
+import { Booking } from './entities/booking.entity';
+
+export function assertBookingStatus(booking: Booking, allowed: string[]): void {
+  if (!allowed.includes(booking.status)) {
+    throw new ConflictException(
+      `Cannot perform this action on status "${booking.status}". Allowed: ${allowed.join(', ')}`,
+    );
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/booking-transition.service.ts b/apps/edr-freight-api/src/modules/bookings/booking-transition.service.ts
new file mode 100644
index 000000000..56ab6394b
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/bookings/booking-transition.service.ts
@@ -0,0 +1,319 @@
+import { BadRequestException, forwardRef, Inject, Injectable } from '@nestjs/common';
+import type { TCurrentUser } from '@tria-plc/api-common/modules/auth/types/current-user.type';
+
+import { assertCanApproveBookingStep } from '../../common/freight-permission.util';
+import { RuleEngineService } from '../rule-engine/rule-engine.service';
+import { BookingContractService } from './booking-contract.service';
+import { BookingPricingService } from './booking-pricing.service';
+import { BookingsRepository } from './bookings.repository';
+import { assertBookingStatus } from './booking-status.util';
+import { computeNextStep, type BookingNextStep } from './booking-next-step.util';
+import { Booking } from './entities/booking.entity';
+import { BookingsService } from './bookings.service';
+
+@Injectable()
+export class BookingTransitionService {
+  constructor(
+    private readonly bookingsRepository: BookingsRepository,
+    private readonly ruleEngineService: RuleEngineService,
+    private readonly pricingService: BookingPricingService,
+    private readonly contractService: BookingContractService,
+    @Inject(forwardRef(() => BookingsService))
+    private readonly bookingsService: BookingsService,
+  ) {}
+
+  async submit(bookingId: string): Promise<Booking> {
+    const booking = await this.bookingsService.findById(bookingId);
+    assertBookingStatus(booking, ['DRAFT', 'CHANGES_REQUESTED']);
+
+    if (Number(booking.totalAmount) <= 0) {
+      throw new BadRequestException(
+        'Generate a price before submitting (POST /bookings/:id/generate-price)',
+      );
+    }
+
+    const priorityScore = await this.pricingService.computeSubmitPriorityScore(booking);
+    await this.ruleEngineService.snapshotLiveRates(bookingId);
+
+    const updated = await this.bookingsRepository.update(bookingId, {
+      status: 'SUBMITTED',
+      priorityScore,
+    } as never);
+    return this.bookingsService.findById(updated!.id);
+  }
+
+  async requestChanges(
+    bookingId: string,
+    note: string,
+    actorId: string,
+  ): Promise<Booking> {
+    const booking = await this.bookingsService.findById(bookingId);
+    assertBookingStatus(booking, ['SUBMITTED']);
+
+    await this.bookingsRepository.createReviewNote(
+      bookingId,
+      note,
+      'CHANGES_REQUESTED',
+      actorId,
+    );
+
+    const updated = await this.bookingsRepository.update(bookingId, {
+      status: 'CHANGES_REQUESTED',
+    } as never);
+    return this.bookingsService.findById(updated!.id);
+  }
+
+  /** Auto-create booking approval steps from system rules when none exist yet. */
+  private async ensureBookingApprovalSteps(booking: Booking): Promise<void> {
+    if ((booking.approvalSteps?.length ?? 0) > 0) return;
+
+    await this.ruleEngineService.instantiateApprovalSteps(booking.id, {
+      freightType: booking.freightType as 'CONTAINER' | 'BULK',
+      cargoTypeId: booking.cargoTypeId,
+    });
+  }
+
+  async acceptIntake(bookingId: string, actorId: string): Promise<Booking> {
+    const booking = await this.bookingsService.findById(bookingId);
+    assertBookingStatus(booking, ['SUBMITTED']);
+
+    await this.ruleEngineService.instantiateApprovalSteps(bookingId, {
+      freightType: booking.freightType as 'CONTAINER' | 'BULK',
+      cargoTypeId: booking.cargoTypeId,
+    });
+
+    const updated = await this.bookingsRepository.update(bookingId, {
+      status: 'PENDING_APPROVAL',
+      approvedByStaffId: actorId,
+      approvedByStaffAt: new Date(),
+    } as never);
+    return this.bookingsService.findById(updated!.id);
+  }
+
+  async staffReject(
+    bookingId: string,
+    reason: string,
+    actorId: string,
+  ): Promise<Booking> {
+    const booking = await this.bookingsService.findById(bookingId);
+    assertBookingStatus(booking, ['SUBMITTED', 'PENDING_APPROVAL']);
+
+    await this.bookingsRepository.createReviewNote(
+      bookingId,
+      reason,
+      'REJECTION',
+      actorId,
+    );
+
+    const updated = await this.bookingsRepository.update(bookingId, {
+      status: 'REJECTED',
+    } as never);
+    return this.bookingsService.findById(updated!.id);
+  }
+
+  async approveStep(
+    bookingId: string,
+    stepId: string,
+    actorId: string,
+    requiredRole: string,
+    authUser?: TCurrentUser,
+  ): Promise<Booking> {
+    if (authUser) {
+      assertCanApproveBookingStep(authUser, requiredRole);
+    }
+
+    let booking = await this.bookingsService.findById(bookingId);
+    assertBookingStatus(booking, [
+      'PENDING_APPROVAL',
+      'APPROVED_PENDING_SIGNATURE',
+    ]);
+
+    if ((booking.approvalSteps?.length ?? 0) === 0) {
+      await this.ensureBookingApprovalSteps(booking);
+      booking = await this.bookingsService.findById(bookingId);
+    }
+
+    const step = await this.bookingsRepository.findApprovalStepById(
+      bookingId,
+      stepId,
+    );
+    if (!step || step.status !== 'PENDING') {
+      throw new BadRequestException('Approval step not found or already actioned');
+    }
+
+    const next = await this.bookingsRepository.findNextPendingApprovalStep(bookingId);
+    if (!next || next.id !== step.id) {
+      throw new BadRequestException(
+        'Approval steps must be completed in order',
+      );
+    }
+
+    if (step.requiredRole !== requiredRole) {
+      throw new BadRequestException(
+        `Step requires role ${step.requiredRole}, not ${requiredRole}`,
+      );
+    }
+
+    const blocksRole = step.blocksRole;
+    if (blocksRole && blocksRole === requiredRole) {
+      throw new BadRequestException(`Role ${requiredRole} is blocked for this step`);
+    }
+
+    await this.bookingsRepository.completeApprovalStep(step.id, actorId, 'APPROVED');
+
+    const updates: Record<string, unknown> = {};
+    const now = new Date();
+
+    if (requiredRole === 'LINE_STAFF') {
+      updates.status = 'APPROVED_PENDING_SIGNATURE';
+      updates.approvedByStaffId = actorId;
+      updates.approvedByStaffAt = now;
+    } else if (requiredRole === 'DIRECTOR') {
+      updates.signedByDirectorId = actorId;
+      updates.signedByDirectorAt = now;
+    } else if (requiredRole === 'CEO') {
+      updates.signedByCeoId = actorId;
+      updates.signedByCeoAt = now;
+    }
+
+    const allDone = await this.bookingsRepository.allApprovalStepsComplete(bookingId);
+    if (allDone) {
+      updates.status = 'APPROVED';
+    }
+
+    if (Object.keys(updates).length > 0) {
+      await this.bookingsRepository.update(bookingId, updates as never);
+    }
+
+    return this.bookingsService.findById(bookingId);
+  }
+
+  async rejectStep(
+    bookingId: string,
+    stepId: string,
+    actorId: string,
+    reason: string,
+  ): Promise<Booking> {
+    const booking = await this.bookingsService.findById(bookingId);
+    assertBookingStatus(booking, ['PENDING_APPROVAL', 'APPROVED_PENDING_SIGNATURE']);
+
+    const step = await this.bookingsRepository.findApprovalStepById(
+      bookingId,
+      stepId,
+    );
+    if (!step) throw new BadRequestException('Approval step not found');
+
+    await this.bookingsRepository.completeApprovalStep(
+      step.id,
+      actorId,
+      'REJECTED',
+      reason,
+    );
+
+    await this.bookingsRepository.createReviewNote(
+      bookingId,
+      reason,
+      'REJECTION',
+      actorId,
+    );
+
+    const updated = await this.bookingsRepository.update(bookingId, {
+      status: 'REJECTED',
+    } as never);
+    return this.bookingsService.findById(updated!.id);
+  }
+
+  async customerSign(bookingId: string): Promise<Booking> {
+    const booking = await this.bookingsService.findById(bookingId);
+    assertBookingStatus(booking, ['CONTRACT_READY']);
+
+    const updated = await this.bookingsRepository.update(bookingId, {
+      status: 'SIGNED_CUSTOMER',
+      customerSignedAt: new Date(),
+    } as never);
+    return this.bookingsService.findById(updated!.id);
+  }
+
+  async marketingApprove(bookingId: string, actorId: string): Promise<Booking> {
+    const booking = await this.bookingsService.findById(bookingId);
+    assertBookingStatus(booking, ['SIGNED_CUSTOMER']);
+
+    const updated = await this.bookingsRepository.update(bookingId, {
+      status: 'FULLY_EXECUTED',
+      fullyExecutedAt: new Date(),
+      marketingApprovedById: actorId,
+      marketingApprovedAt: new Date(),
+      lockedAt: new Date(),
+    } as never);
+    return this.bookingsService.findById(updated!.id);
+  }
+
+  async startTransit(bookingId: string): Promise<Booking> {
+    const booking = await this.bookingsService.findById(bookingId);
+    assertBookingStatus(booking, ['PAID']);
+
+    const updated = await this.bookingsRepository.update(bookingId, {
+      status: 'IN_TRANSIT',
+    } as never);
+    return this.bookingsService.findById(updated!.id);
+  }
+
+  async complete(bookingId: string): Promise<Booking> {
+    const booking = await this.bookingsService.findById(bookingId);
+    assertBookingStatus(booking, ['IN_TRANSIT']);
+
+    const updated = await this.bookingsRepository.update(bookingId, {
+      status: 'COMPLETED',
+      endDate: new Date(),
+    } as never);
+    return this.bookingsService.findById(updated!.id);
+  }
+
+  async cancel(bookingId: string, reason: string): Promise<Booking> {
+    const booking = await this.bookingsService.findById(bookingId);
+    assertBookingStatus(booking, [
+      'DRAFT',
+      'SUBMITTED',
+      'CHANGES_REQUESTED',
+      'PENDING_APPROVAL',
+      'CONTRACT_READY',
+    ]);
+
+    await this.bookingsRepository.createReviewNote(
+      bookingId,
+      reason,
+      'REJECTION',
+    );
+
+    const updated = await this.bookingsRepository.update(bookingId, {
+      status: 'CANCELLED',
+    } as never);
+    return this.bookingsService.findById(updated!.id);
+  }
+
+  async enrichBookingResponse(booking: Booking): Promise<Booking & {
+    latestChangeRequestNote?: string | null;
+    contractSummary?: string | null;
+    nextStep: BookingNextStep | null;
+  }> {
+    const note = await this.bookingsRepository.findLatestReviewNote(
+      booking.id,
+      'CHANGES_REQUESTED',
+    );
+    const summary =
+      booking.contractSummary ??
+      this.contractService.buildContractSummary(booking);
+    const nextPending =
+      booking.status === 'PENDING_APPROVAL' ||
+      booking.status === 'APPROVED_PENDING_SIGNATURE'
+        ? await this.bookingsRepository.findNextPendingApprovalStep(booking.id)
+        : null;
+    const nextStep = computeNextStep(booking, nextPending);
+    return {
+      ...booking,
+      latestChangeRequestNote: note?.note ?? null,
+      contractSummary: summary,
+      nextStep,
+    };
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/bookings.controller.ts b/apps/edr-freight-api/src/modules/bookings/bookings.controller.ts
index 41a1a09c4..ccd598577 100644
--- a/apps/edr-freight-api/src/modules/bookings/bookings.controller.ts
+++ b/apps/edr-freight-api/src/modules/bookings/bookings.controller.ts
@@ -10,10 +10,15 @@ import {
   Post,
   Query,
   Request,
+  Res,
   UploadedFiles,
   UseInterceptors,
-} from "@nestjs/common";
-import { AnyFilesInterceptor } from "@nestjs/platform-express";
+} from '@nestjs/common';
+import { CurrentUser } from '@edr/api-common';
+import type { TCurrentUser } from '@tria-plc/api-common/modules/auth/types/current-user.type';
+import { BookingStaff } from '../../common/booking-guards';
+import { FREIGHT_PERMS } from '../../seed/freight-permissions.registry';
+import { AnyFilesInterceptor } from '@nestjs/platform-express';
 import {
   ApiBearerAuth,
   ApiBody,
@@ -21,181 +26,392 @@ import {
   ApiOkResponse,
   ApiOperation,
   ApiTags,
-} from "@nestjs/swagger";
+} from '@nestjs/swagger';
+import type { Response } from 'express';
 
-import { BookingReferenceDataService } from "./booking-reference-data.service";
-import { BookingsService } from "./bookings.service";
-import { BookingReferenceDataDto } from "./dto/booking-reference-data.dto";
-import { CreateBookingDto } from "./dto/create-booking.dto";
-import { FilterBookingDto } from "./dto/filter-booking.dto";
-import { UpdateBookingDto } from "./dto/update-booking.dto";
-import { UpdateStatusDto } from "./dto/update-status.dto";
+import { BookingContractService } from './booking-contract.service';
+import { BookingPricingService } from './booking-pricing.service';
+import { BookingTransitionService } from './booking-transition.service';
+import { BookingReferenceDataService } from './booking-reference-data.service';
+import { BookingsService } from './bookings.service';
+import { BookingReferenceDataDto } from './dto/booking-reference-data.dto';
+import { CreateBookingDto } from './dto/create-booking.dto';
+import { BookingListSummaryDto } from './dto/booking-list-summary.dto';
+import { FilterBookingDto } from './dto/filter-booking.dto';
+import { GeneratePriceResponseDto } from './dto/generate-price-response.dto';
+import {
+  ApproveStepDto,
+  CancelBookingDto,
+  RejectStepDto,
+  RequestChangesDto,
+  StaffRejectDto,
+} from './dto/request-changes.dto';
+import { ContractViewDto } from './dto/contract-view.dto';
+import { SignContractDto } from './dto/sign-contract.dto';
+import { UpdateBookingDto } from './dto/update-booking.dto';
+import {
+  type AuthUserPayload,
+  resolveAuthUserId,
+} from '../../common/resolve-auth-user-id';
 
-@ApiTags("bookings")
-@Controller("bookings")
+@ApiTags('bookings')
+@Controller('bookings')
 @ApiBearerAuth()
 export class BookingsController {
   constructor(
     private readonly bookingsService: BookingsService,
     private readonly bookingReferenceDataService: BookingReferenceDataService,
+    private readonly pricingService: BookingPricingService,
+    private readonly transitionService: BookingTransitionService,
+    private readonly contractService: BookingContractService,
   ) {}
 
-  // ── 1. Create booking (multipart/form-data) ──────────────────────────
   @Post()
   @UseInterceptors(AnyFilesInterceptor())
-  @ApiConsumes("multipart/form-data")
-  @ApiOperation({
-    summary: "Create a new freight booking",
-    description:
-      "Accepts all booking fields as form fields + dynamic file keys (e.g. passport, license). " +
-      "Auto-enables consolidation when container quantity does not fill a whole wagon; attempts partner match or PENDING_CONSOLIDATION.",
-  })
-  @ApiBody({
-    description:
-      "Booking form data. Attach files with any field name (e.g. passport, tin_certificate). " +
-      "Each uploaded file is saved as a row in the files table (resource=bookings).",
-    type: CreateBookingDto,
-  })
+  @ApiConsumes('multipart/form-data')
+  @ApiOperation({ summary: 'Create a new freight booking (DRAFT)' })
+  @ApiBody({ type: CreateBookingDto })
   create(
     @Body() dto: CreateBookingDto,
     @UploadedFiles() files: Express.Multer.File[],
-    @Request() req: any,
+    @Request() req: { user?: { id?: string; sub?: string } },
   ) {
-    console.log(
-      "[BookingsController] Files received:",
-      files?.length,
-      files?.map((f) => ({
-        fieldname: f.fieldname,
-        originalname: f.originalname,
-        size: f.size,
-        mimetype: f.mimetype,
-      })),
-    );
-    const userId: string | undefined = req.user?.id ?? req.user?.sub;
+    const userId = req.user?.id ?? req.user?.sub;
     return this.bookingsService.create(dto, files ?? [], userId);
   }
 
-  // ── 2. Update draft booking (multipart/form-data) ─────────────────────
-  @Patch(":id")
+  @Patch(':id')
   @UseInterceptors(AnyFilesInterceptor())
-  @ApiConsumes("multipart/form-data")
+  @ApiConsumes('multipart/form-data')
   @ApiOperation({
-    summary: "Update a draft booking",
-    description:
-      "Only DRAFT bookings can be updated. New files are merged into existing documents.",
+    summary: 'Update booking',
+    description: 'Allowed when status is DRAFT or CHANGES_REQUESTED.',
   })
   @ApiBody({ type: UpdateBookingDto })
   update(
-    @Param("id", ParseUUIDPipe) id: string,
+    @Param('id', ParseUUIDPipe) id: string,
     @Body() dto: UpdateBookingDto,
     @UploadedFiles() files: Express.Multer.File[],
   ) {
     return this.bookingsService.update(id, dto, files ?? []);
   }
 
-  // ── 3. List bookings (paginated + filtered) ───────────────────────────
   @Get()
-  @ApiOperation({
-    summary: "List freight bookings (paginated)",
-    description:
-      "Filter by status, customerId, contractType, serviceTypeId, cargoTypeId, tradeDirection, " +
-      "paymentCurrency, allowConsolidation, consolidationPaired. " +
-      "Sort by createdAt or priorityScore.",
-  })
+  @ApiOperation({ summary: 'List freight bookings (paginated)' })
   findAll(@Query() filter: FilterBookingDto) {
     return this.bookingsService.findAll(filter);
   }
 
-  // ── Booking form catalog (must be before :id) ─────────────────────────
-  @Get("reference-data")
+  @Get('list-summary')
+  @ApiOperation({ summary: 'Booking list metrics and tab counts (backoffice)' })
+  @ApiOkResponse({ type: BookingListSummaryDto })
+  findListSummary(@Query() filter: FilterBookingDto) {
+    return this.bookingsService.getListSummary(filter);
+  }
+
+  @Get('queues/:queue')
   @ApiOperation({
-    summary: "Booking form catalog",
-    description:
-      "Returns yards, container types (grouped by size), service types, shipping lines, " +
-      "and hierarchical cargo types for the booking UI in a single payload.",
+    summary: 'List bookings for a dashboard queue',
+    description: 'Queues: intake, approval, signatures, marketing, finance',
   })
+  findQueue(
+    @Param('queue') queue: string,
+    @Query() filter: FilterBookingDto,
+    @Query('excludeBulk') excludeBulk?: string,
+  ) {
+    return this.bookingsService.findQueue(queue, filter, {
+      excludeBulk: excludeBulk === 'true',
+    });
+  }
+
+  @Get('reference-data')
+  @ApiOperation({ summary: 'Booking form catalog' })
   @ApiOkResponse({ type: BookingReferenceDataDto })
   getReferenceData(): Promise<BookingReferenceDataDto> {
     return this.bookingReferenceDataService.getReferenceData();
   }
 
-  // ── 5. Lookup by reference (must be before :id to avoid conflict) ─────
-  @Get("by-reference/:reference")
-  @ApiOperation({
-    summary: "Get a freight booking by reference number",
-    description: "Lookup booking by its human-readable reference string.",
-  })
-  findByReference(@Param("reference") reference: string) {
-    return this.bookingsService.findByReference(reference);
+  @Get('by-reference/:reference')
+  @ApiOperation({ summary: 'Get booking by reference' })
+  async findByReference(@Param('reference') reference: string) {
+    const booking = await this.bookingsService.findByReference(reference);
+    return this.transitionService.enrichBookingResponse(booking);
   }
 
-  // ── 4. Get single booking by ID ───────────────────────────────────────
-  @Get(":id")
-  @ApiOperation({ summary: "Get a freight booking by ID" })
-  findOne(@Param("id", ParseUUIDPipe) id: string) {
-    return this.bookingsService.findById(id);
+  @Get(':id')
+  @ApiOperation({ summary: 'Get booking by ID' })
+  async findOne(@Param('id', ParseUUIDPipe) id: string) {
+    const booking = await this.bookingsService.findById(id);
+    return this.transitionService.enrichBookingResponse(booking);
   }
 
-  // ── 6. Soft-delete (DRAFT only) ───────────────────────────────────────
-  @Delete(":id")
+  @Delete(':id')
   @HttpCode(204)
-  @ApiOperation({
-    summary: "Soft-delete a freight booking",
-    description: "Only DRAFT bookings can be deleted.",
-  })
-  remove(@Param("id", ParseUUIDPipe) id: string) {
+  @ApiOperation({ summary: 'Soft-delete DRAFT booking' })
+  remove(@Param('id', ParseUUIDPipe) id: string) {
     return this.bookingsService.remove(id);
   }
 
-  // ── 7. Unified status transition ──────────────────────────────────────
-  @Patch(":id/status")
-  @ApiOperation({
-    summary: "Transition booking status",
-    description:
-      "Unified endpoint for all status transitions. Actions: " +
-      "SUBMIT, APPROVE_STAFF, APPROVE_DIRECTOR, APPROVE_CEO, REJECT, CANCEL, ACTIVATE, EXPIRE. " +
-      "Approval routing: Standard → LINE_STAFF → DIRECTOR → SIGNED. " +
-      "Bulk/high-volume → DIRECTOR → CEO → SIGNED.",
-  })
-  updateStatus(
-    @Param("id", ParseUUIDPipe) id: string,
-    @Body() dto: UpdateStatusDto,
+  @Post(':id/documents')
+  @UseInterceptors(AnyFilesInterceptor())
+  @ApiConsumes('multipart/form-data')
+  @ApiOperation({ summary: 'Upload documents for a booking (DRAFT only)' })
+  async uploadDocuments(
+    @Param('id', ParseUUIDPipe) id: string,
+    @UploadedFiles() files: Express.Multer.File[],
   ) {
-    return this.bookingsService.updateStatus(id, dto);
+    const booking = await this.bookingsService.uploadDocuments(id, files ?? []);
+    return this.transitionService.enrichBookingResponse(booking);
   }
 
-  // ── 8. Request or auto-pair consolidation ─────────────────────────────
-  @Post(":id/consolidation")
+  @Post(':id/generate-price')
+  @ApiOperation({ summary: 'Generate price preview (DRAFT only)' })
+  @ApiOkResponse({ type: GeneratePriceResponseDto })
+  generatePrice(@Param('id', ParseUUIDPipe) id: string) {
+    return this.pricingService.generatePrice(id);
+  }
+
+  @Post(':id/submit')
+  @ApiOperation({ summary: 'Customer submit booking' })
+  async submit(@Param('id', ParseUUIDPipe) id: string) {
+    const booking = await this.transitionService.submit(id);
+    return this.transitionService.enrichBookingResponse(booking);
+  }
+
+  @Post(':id/staff/request-changes')
+  @BookingStaff(FREIGHT_PERMS.bookings.requestChanges)
+  @ApiOperation({ summary: 'Staff return booking for customer updates' })
+  async requestChanges(
+    @Param('id', ParseUUIDPipe) id: string,
+    @Body() dto: RequestChangesDto,
+    @CurrentUser() user: AuthUserPayload,
+  ) {
+    const booking = await this.transitionService.requestChanges(
+      id,
+      dto.note,
+      resolveAuthUserId(user),
+    );
+    return this.transitionService.enrichBookingResponse(booking);
+  }
+
+  @Post(':id/staff/accept')
+  @BookingStaff(FREIGHT_PERMS.bookings.staffAccept)
+  @ApiOperation({ summary: 'Staff accept intake → start approval chain' })
+  async acceptIntake(
+    @Param('id', ParseUUIDPipe) id: string,
+    @CurrentUser() user: AuthUserPayload,
+  ) {
+    const booking = await this.transitionService.acceptIntake(
+      id,
+      resolveAuthUserId(user),
+    );
+    return this.transitionService.enrichBookingResponse(booking);
+  }
+
+  @Post(':id/staff/reject')
+  @BookingStaff(FREIGHT_PERMS.bookings.reject)
+  @ApiOperation({ summary: 'Staff final reject' })
+  async staffReject(
+    @Param('id', ParseUUIDPipe) id: string,
+    @Body() dto: StaffRejectDto,
+    @CurrentUser() user: AuthUserPayload,
+  ) {
+    const booking = await this.transitionService.staffReject(
+      id,
+      dto.reason,
+      resolveAuthUserId(user),
+    );
+    return this.transitionService.enrichBookingResponse(booking);
+  }
+
+  @Post(':id/approval-steps/:stepId/approve')
+  @BookingStaff([
+    FREIGHT_PERMS.bookings.approveLineStaff,
+    FREIGHT_PERMS.bookings.approveDirector,
+    FREIGHT_PERMS.bookings.approveCeo,
+  ])
+  @ApiOperation({ summary: 'Approve one approval step in sequence' })
+  async approveStep(
+    @Param('id', ParseUUIDPipe) id: string,
+    @Param('stepId', ParseUUIDPipe) stepId: string,
+    @Body() dto: ApproveStepDto,
+    @CurrentUser() user: TCurrentUser,
+  ) {
+    const booking = await this.transitionService.approveStep(
+      id,
+      stepId,
+      resolveAuthUserId(user),
+      dto.requiredRole,
+      user,
+    );
+    return this.transitionService.enrichBookingResponse(booking);
+  }
+
+  @Post(':id/approval-steps/:stepId/reject')
+  @BookingStaff(FREIGHT_PERMS.bookings.rejectApproval)
+  @ApiOperation({ summary: 'Reject at approval step' })
+  async rejectStep(
+    @Param('id', ParseUUIDPipe) id: string,
+    @Param('stepId', ParseUUIDPipe) stepId: string,
+    @Body() dto: RejectStepDto,
+    @CurrentUser() user: AuthUserPayload,
+  ) {
+    const booking = await this.transitionService.rejectStep(
+      id,
+      stepId,
+      resolveAuthUserId(user),
+      dto.reason,
+    );
+    return this.transitionService.enrichBookingResponse(booking);
+  }
+
+  @Post(':id/contract/generate')
+  @BookingStaff(FREIGHT_PERMS.bookings.generateContract)
+  @ApiOperation({ summary: 'Generate contract PDF from template' })
+  async generateContract(@Param('id', ParseUUIDPipe) id: string) {
+    const booking = await this.contractService.generateContract(id);
+    return this.transitionService.enrichBookingResponse(booking);
+  }
+
+  @Get(':id/contract/view')
+  @ApiOkResponse({ type: ContractViewDto })
+  @ApiOperation({ summary: 'Contract HTML view for portal and backoffice' })
+  getContractView(@Param('id', ParseUUIDPipe) id: string) {
+    return this.contractService.getContractView(id);
+  }
+
+  @Get(':id/contract/document')
+  @ApiOperation({ summary: 'Download contract PDF' })
+  async downloadContractDocument(
+    @Param('id', ParseUUIDPipe) id: string,
+    @Res() res: Response,
+  ): Promise<void> {
+    const { stream, record } = await this.contractService.streamContract(id);
+    res.setHeader('Content-Type', record.mimeType ?? 'application/pdf');
+    res.setHeader(
+      'Content-Disposition',
+      `attachment; filename="${record.name}"`,
+    );
+    stream.pipe(res);
+  }
+
+  @Get(':id/contract')
+  @ApiOperation({ summary: 'Download contract file (alias)' })
+  async downloadContract(
+    @Param('id', ParseUUIDPipe) id: string,
+    @Res() res: Response,
+  ): Promise<void> {
+    return this.downloadContractDocument(id, res);
+  }
+
+  @Post(':id/contract/sign')
+  @ApiOperation({ summary: 'Apply digital signature (customer or staff)' })
+  async signContract(
+    @Param('id', ParseUUIDPipe) id: string,
+    @Body() dto: SignContractDto,
+    @Request() req: { user?: { id?: string; sub?: string }; ip?: string },
+  ) {
+    const userId = req.user?.id ?? req.user?.sub;
+    const booking = await this.contractService.signContract(id, dto, {
+      signerUserId: userId,
+      ipAddress: req.ip,
+    });
+    return this.transitionService.enrichBookingResponse(booking);
+  }
+
+  @Get(':id/contract/signatures')
+  @ApiOperation({ summary: 'List contract signatures' })
+  getContractSignatures(@Param('id', ParseUUIDPipe) id: string) {
+    return this.contractService.getSignatures(id);
+  }
+
+  @Get(':id/summary')
+  @ApiOperation({ summary: 'Contract summary string for dashboard' })
+  getSummary(@Param('id', ParseUUIDPipe) id: string) {
+    return this.contractService.getSummary(id);
+  }
+
+  @Post(':id/customer/sign')
   @ApiOperation({
-    summary: "Request freight consolidation",
-    description:
-      "Searches for a partner whose container quantity complements yours to fill whole wagon(s) " +
-      "(same route, same container type). Pairs on match or sets PENDING_CONSOLIDATION with a status message.",
+    summary: 'Customer digital signature (deprecated — use POST contract/sign)',
   })
-  requestConsolidation(@Param("id", ParseUUIDPipe) id: string) {
+  async customerSign(
+    @Param('id', ParseUUIDPipe) id: string,
+    @Body() dto: SignContractDto,
+    @Request() req: { user?: { id?: string; sub?: string }; ip?: string },
+  ) {
+    const payload: SignContractDto = { ...dto, role: 'CUSTOMER' };
+    const booking = await this.contractService.signContract(id, payload, {
+      signerUserId: req.user?.id ?? req.user?.sub,
+      ipAddress: req.ip,
+    });
+    return this.transitionService.enrichBookingResponse(booking);
+  }
+
+  @Post(':id/marketing/approve')
+  @BookingStaff(FREIGHT_PERMS.bookings.signStaff)
+  @ApiOperation({
+    summary: 'Staff contract signature and fully execute (use contract/sign STAFF preferred)',
+  })
+  async marketingApprove(
+    @Param('id', ParseUUIDPipe) id: string,
+    @Body() dto: SignContractDto,
+    @CurrentUser() user: AuthUserPayload,
+    @Request() req: { ip?: string },
+  ) {
+    const payload: SignContractDto = {
+      ...dto,
+      role: 'STAFF',
+    };
+    const booking = await this.contractService.signContract(id, payload, {
+      signerUserId: resolveAuthUserId(user),
+      ipAddress: req.ip,
+    });
+    return this.transitionService.enrichBookingResponse(booking);
+  }
+
+  @Post(':id/operations/start-transit')
+  @BookingStaff(FREIGHT_PERMS.bookings.operations)
+  @ApiOperation({ summary: 'Mark in transit' })
+  async startTransit(@Param('id', ParseUUIDPipe) id: string) {
+    const booking = await this.transitionService.startTransit(id);
+    return this.transitionService.enrichBookingResponse(booking);
+  }
+
+  @Post(':id/operations/complete')
+  @BookingStaff(FREIGHT_PERMS.bookings.operations)
+  @ApiOperation({ summary: 'Mark completed' })
+  async complete(@Param('id', ParseUUIDPipe) id: string) {
+    const booking = await this.transitionService.complete(id);
+    return this.transitionService.enrichBookingResponse(booking);
+  }
+
+  @Post(':id/cancel')
+  @BookingStaff(FREIGHT_PERMS.bookings.cancel)
+  @ApiOperation({ summary: 'Cancel booking' })
+  async cancel(
+    @Param('id', ParseUUIDPipe) id: string,
+    @Body() dto: CancelBookingDto,
+  ) {
+    const booking = await this.transitionService.cancel(id, dto.reason);
+    return this.transitionService.enrichBookingResponse(booking);
+  }
+
+  @Post(':id/consolidation')
+  @ApiOperation({ summary: 'Request freight consolidation' })
+  requestConsolidation(@Param('id', ParseUUIDPipe) id: string) {
     return this.bookingsService.requestConsolidation(id);
   }
 
-  // ── 9. Remove consolidation pairing ───────────────────────────────────
-  @Delete(":id/consolidation")
-  @ApiOperation({
-    summary: "Remove consolidation pairing",
-    description:
-      "Unpairs both bookings and returns them to PENDING_CONSOLIDATION status.",
-  })
-  removeConsolidation(@Param("id", ParseUUIDPipe) id: string) {
+  @Delete(':id/consolidation')
+  @ApiOperation({ summary: 'Remove consolidation pairing' })
+  removeConsolidation(@Param('id', ParseUUIDPipe) id: string) {
     return this.bookingsService.removeConsolidation(id);
   }
 
-  // ── 10. Get consolidation details ─────────────────────────────────────
-  @Get(":id/consolidation")
-  @ApiOperation({
-    summary: "Get consolidation details",
-    description:
-      "Returns partner booking details and split billing information.",
-  })
-  getConsolidationDetails(@Param("id", ParseUUIDPipe) id: string) {
+  @Get(':id/consolidation')
+  @ApiOperation({ summary: 'Get consolidation details' })
+  getConsolidationDetails(@Param('id', ParseUUIDPipe) id: string) {
     return this.bookingsService.getConsolidationDetails(id);
   }
-
 }
diff --git a/apps/edr-freight-api/src/modules/bookings/bookings.module.ts b/apps/edr-freight-api/src/modules/bookings/bookings.module.ts
index 9785ec270..8fdaff7d1 100644
--- a/apps/edr-freight-api/src/modules/bookings/bookings.module.ts
+++ b/apps/edr-freight-api/src/modules/bookings/bookings.module.ts
@@ -1,12 +1,18 @@
 import { Module } from '@nestjs/common';
 import { TypeOrmModule } from '@nestjs/typeorm';
 
-import { CustomersModule } from '../customers/customers.module';
+// import { CustomersModule } from '../customers/customers.module';
+import { CompaniesModule } from '../companies/companies.module';
 import { FilesModule } from '../files/files.module';
 import { MinioModule } from '../minio/minio.module';
 import { RuleEngineModule } from '../rule-engine/rule-engine.module';
+import { BookingContractService } from './booking-contract.service';
+import { BookingPaymentService } from './booking-payment.service';
+import { BookingPricingService } from './booking-pricing.service';
 import { BookingReferenceDataService } from './booking-reference-data.service';
+import { BookingTransitionService } from './booking-transition.service';
 import { BookingsController } from './bookings.controller';
+import { PayController } from './pay.controller';
 import { BookingsRepository } from './bookings.repository';
 import { ConsolidationService } from './consolidation.service';
 import { BookingsService } from './bookings.service';
@@ -14,7 +20,14 @@ import { BookingApprovalStep } from './entities/booking-approval-step.entity';
 import { BookingCargoModifier } from './entities/booking-cargo-modifier.entity';
 import { BookingContainer } from './entities/booking-container.entity';
 import { BookingRateSnapshot } from './entities/booking-rate-snapshot.entity';
+import { BookingContractSignature } from './entities/booking-contract-signature.entity';
+import { BookingReviewNote } from './entities/booking-review-note.entity';
 import { Booking } from './entities/booking.entity';
+import { ContractPdfService } from '../../contracts/contract-pdf.service';
+import { ContractPricingScheduleBuilder } from '../../contracts/contract-pricing-schedule.builder';
+import { ContractRendererService } from '../../contracts/contract-renderer.service';
+import { ContractTemplateResolver } from '../../contracts/contract-template.resolver';
+import { ContractViewModelBuilder } from '../../contracts/contract-view-model.builder';
 
 @Module({
   imports: [
@@ -24,19 +37,31 @@ import { Booking } from './entities/booking.entity';
       BookingCargoModifier,
       BookingApprovalStep,
       BookingRateSnapshot,
+      BookingReviewNote,
+      BookingContractSignature,
     ]),
     FilesModule,
     MinioModule,
-    CustomersModule,
+    CompaniesModule,
+    // CustomersModule,
     RuleEngineModule,
   ],
-  controllers: [BookingsController],
+  controllers: [BookingsController, PayController],
   providers: [
     BookingsService,
     BookingsRepository,
     ConsolidationService,
     BookingReferenceDataService,
+    BookingPricingService,
+    BookingTransitionService,
+    BookingContractService,
+    BookingPaymentService,
+    ContractTemplateResolver,
+    ContractViewModelBuilder,
+    ContractPricingScheduleBuilder,
+    ContractRendererService,
+    ContractPdfService,
   ],
-  exports: [BookingsService],
+  exports: [BookingsService, BookingsRepository],
 })
 export class BookingsModule {}
diff --git a/apps/edr-freight-api/src/modules/bookings/bookings.repository.ts b/apps/edr-freight-api/src/modules/bookings/bookings.repository.ts
index f329c942f..9c17eff3e 100644
--- a/apps/edr-freight-api/src/modules/bookings/bookings.repository.ts
+++ b/apps/edr-freight-api/src/modules/bookings/bookings.repository.ts
@@ -1,17 +1,36 @@
 import { BaseRepository } from '@edr/api-common';
 import { Injectable } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
-import { DataSource, Repository } from 'typeorm';
+import { DataSource, FindOptionsWhere, Repository, SelectQueryBuilder } from 'typeorm';
 
 import { ContainerType } from '../rule-engine/entities/container-type.entity';
 import { BookingApprovalStep } from './entities/booking-approval-step.entity';
 import { BookingCargoModifier } from './entities/booking-cargo-modifier.entity';
 import { BookingContainer } from './entities/booking-container.entity';
 import { BookingRateSnapshot } from './entities/booking-rate-snapshot.entity';
+import { BookingReviewNote, ReviewNoteType } from './entities/booking-review-note.entity';
 import { Booking } from './entities/booking.entity';
+import {
+  BookingContractSignature,
+  ContractSignerRole,
+} from './entities/booking-contract-signature.entity';
 import { FileRecord } from '../files/entities/file.entity';
 import { ContainerWeightResult } from '../rule-engine/rule-engine.service';
 
+export interface BookingListFilterOptions {
+  statuses?: string[];
+  status?: string;
+  companyId?: string;
+  contractType?: string;
+  serviceTypeId?: string;
+  cargoTypeId?: string;
+  freightType?: string;
+  tradeDirection?: string;
+  paymentCurrency?: string;
+  allowConsolidation?: boolean;
+  consolidationPaired?: string;
+}
+
 @Injectable()
 export class BookingsRepository extends BaseRepository<Booking> {
   constructor(
@@ -56,7 +75,8 @@ export class BookingsRepository extends BaseRepository<Booking> {
       .createQueryBuilder('booking')
       .leftJoinAndSelect('booking.bookingContainers', 'bc')
       .leftJoinAndSelect('bc.containerType', 'ct')
-      .leftJoinAndSelect('booking.customer', 'customer')
+      .leftJoinAndSelect('booking.company', 'company')
+      // .leftJoinAndSelect('booking.customer', 'customer')
       .leftJoinAndSelect('booking.train', 'train')
       .leftJoinAndSelect('booking.serviceType', 'st')
       .leftJoinAndSelect('booking.cargoType', 'cargo')
@@ -66,6 +86,7 @@ export class BookingsRepository extends BaseRepository<Booking> {
       .leftJoinAndSelect('booking.approvalSteps', 'steps')
       .leftJoinAndSelect('booking.rateSnapshots', 'snapshots')
       .leftJoinAndSelect('booking.cargoModifiers', 'modifiers')
+      .leftJoinAndSelect('booking.reviewNotes', 'reviewNotes')
       .where('booking.id = :id', { id })
       .leftJoinAndMapMany(
         'booking.files',
@@ -216,15 +237,33 @@ export class BookingsRepository extends BaseRepository<Booking> {
     await this.dataSource.getRepository(BookingContainer).delete({ bookingId });
   }
 
-  /** Get pending approval step for a role. */
+  /** Lowest-order pending approval step (sequential enforcement). */
+  async findNextPendingApprovalStep(
+    bookingId: string,
+  ): Promise<BookingApprovalStep | null> {
+    return this.dataSource.getRepository(BookingApprovalStep).findOne({
+      where: { bookingId, status: 'PENDING' },
+      order: { stepOrder: 'ASC' },
+    });
+  }
+
+  async findApprovalStepById(
+    bookingId: string,
+    stepId: string,
+  ): Promise<BookingApprovalStep | null> {
+    return this.dataSource.getRepository(BookingApprovalStep).findOne({
+      where: { bookingId, id: stepId },
+    });
+  }
+
+  /** Get pending approval step for a role (must match next in sequence). */
   async findPendingApprovalStep(
     bookingId: string,
     requiredRole: string,
   ): Promise<BookingApprovalStep | null> {
-    return this.dataSource.getRepository(BookingApprovalStep).findOne({
-      where: { bookingId, requiredRole, status: 'PENDING' },
-      order: { stepOrder: 'ASC' },
-    });
+    const next = await this.findNextPendingApprovalStep(bookingId);
+    if (!next || next.requiredRole !== requiredRole) return null;
+    return next;
   }
 
   /** Mark an approval step complete. */
@@ -277,4 +316,273 @@ export class BookingsRepository extends BaseRepository<Booking> {
       where: { bookingId, rateId },
     });
   }
+
+  async createReviewNote(
+    bookingId: string,
+    note: string,
+    type: ReviewNoteType,
+    authorId?: string,
+  ): Promise<BookingReviewNote> {
+    const repo = this.dataSource.getRepository(BookingReviewNote);
+    return repo.save(
+      repo.create({ bookingId, note, type, authorId: authorId ?? null }),
+    );
+  }
+
+  async findLatestReviewNote(
+    bookingId: string,
+    type?: ReviewNoteType,
+  ): Promise<BookingReviewNote | null> {
+    const repo = this.dataSource.getRepository(BookingReviewNote);
+    return repo.findOne({
+      where: type ? { bookingId, type } : { bookingId },
+      order: { createdAt: 'DESC' },
+    });
+  }
+
+  async clearPricingArtifacts(bookingId: string): Promise<void> {
+    await this.dataSource.getRepository(BookingCargoModifier).delete({ bookingId });
+    await this.dataSource.getRepository(BookingRateSnapshot).delete({ bookingId });
+  }
+
+  /** Queue listing with optional bulk exclusion for LINE_STAFF. */
+  async findQueue(options: {
+    status: string | string[];
+    page?: number;
+    pageSize?: number;
+    excludeBulk?: boolean;
+    sortBy?: string;
+    sortOrder?: 'ASC' | 'DESC';
+  }): Promise<{ items: Booking[]; total: number }> {
+    const page = options.page ?? 1;
+    const pageSize = options.pageSize ?? 20;
+    const statuses = Array.isArray(options.status) ? options.status : [options.status];
+
+    const qb = this.repository
+      .createQueryBuilder('booking')
+      .leftJoinAndSelect('booking.company', 'company')
+      .leftJoinAndSelect('booking.originYard', 'originYard')
+      .leftJoinAndSelect('booking.destinationYard', 'destinationYard')
+      .leftJoinAndSelect('booking.cargoType', 'cargo')
+      .leftJoinAndSelect('booking.serviceType', 'serviceType')
+      .leftJoinAndSelect('booking.approvalSteps', 'approvalSteps')
+      .where('booking.status IN (:...statuses)', { statuses });
+
+    if (options.excludeBulk) {
+      qb.andWhere("booking.freight_type = 'CONTAINER'");
+    }
+
+    const sortField =
+      options.sortBy === 'priorityScore'
+        ? 'booking.priorityScore'
+        : 'booking.createdAt';
+    qb.orderBy(sortField, options.sortOrder ?? 'DESC');
+
+    const [items, total] = await qb
+      .skip((page - 1) * pageSize)
+      .take(pageSize)
+      .getManyAndCount();
+
+    return { items, total };
+  }
+
+  /** Paginated list with optional multi-status filter (API tab queues). */
+  async findAllPaginated(options: BookingListFilterOptions & {
+    page: number;
+    pageSize: number;
+    sortBy?: string;
+    sortOrder?: 'ASC' | 'DESC';
+  }): Promise<{ items: Booking[]; total: number }> {
+    const page = options.page;
+    const pageSize = options.pageSize;
+
+    const qb = this.repository
+      .createQueryBuilder('booking')
+      .leftJoinAndSelect('booking.company', 'company')
+      .leftJoinAndSelect('booking.originYard', 'originYard')
+      .leftJoinAndSelect('booking.destinationYard', 'destinationYard')
+      .leftJoinAndSelect('booking.serviceType', 'serviceType')
+      .leftJoinAndSelect('booking.approvalSteps', 'approvalSteps')
+      .where('booking.deleted_at IS NULL');
+
+    this.applyListFilters(qb, options);
+
+    const sortField =
+      options.sortBy === 'priorityScore'
+        ? 'booking.priorityScore'
+        : 'booking.createdAt';
+    qb.orderBy(sortField, options.sortOrder ?? 'DESC');
+
+    const [items, total] = await qb
+      .skip((page - 1) * pageSize)
+      .take(pageSize)
+      .getManyAndCount();
+
+    return { items, total };
+  }
+
+  async getStatusCounts(): Promise<Record<string, number>> {
+    const rows = await this.repository
+      .createQueryBuilder('booking')
+      .select('booking.status', 'status')
+      .addSelect('COUNT(*)::int', 'count')
+      .where('booking.deleted_at IS NULL')
+      .groupBy('booking.status')
+      .getRawMany<{ status: string; count: string }>();
+
+    return Object.fromEntries(
+      rows.map((row) => [row.status, Number(row.count)]),
+    );
+  }
+
+  async getListSummaryMetrics(
+    options: BookingListFilterOptions & {
+      page: number;
+      pageSize: number;
+      needsActionStatuses: readonly string[];
+      urgentPriorityThreshold: number;
+    },
+  ): Promise<{
+    inQueue: number;
+    onThisPage: number;
+    needsAction: number;
+    urgent: number;
+  }> {
+    const baseQb = () => {
+      const qb = this.repository
+        .createQueryBuilder('booking')
+        .where('booking.deleted_at IS NULL');
+      this.applyListFilters(qb, options);
+      return qb;
+    };
+
+    const inQueue = await baseQb().getCount();
+
+    const needsAction = await baseQb()
+      .andWhere('booking.status IN (:...needsActionStatuses)', {
+        needsActionStatuses: [...options.needsActionStatuses],
+      })
+      .getCount();
+
+    const urgent = await baseQb()
+      .andWhere('booking.priority_score >= :urgentPriorityThreshold', {
+        urgentPriorityThreshold: options.urgentPriorityThreshold,
+      })
+      .getCount();
+
+    const offset = (options.page - 1) * options.pageSize;
+    const onThisPage = Math.min(
+      options.pageSize,
+      Math.max(0, inQueue - offset),
+    );
+
+    return { inQueue, onThisPage, needsAction, urgent };
+  }
+
+  private applyListFilters(
+    qb: SelectQueryBuilder<Booking>,
+    options: BookingListFilterOptions,
+  ): void {
+    if (options.statuses?.length) {
+      qb.andWhere('booking.status IN (:...statuses)', {
+        statuses: options.statuses,
+      });
+    } else if (options.status) {
+      qb.andWhere('booking.status = :status', { status: options.status });
+    }
+
+    if (options.companyId) {
+      qb.andWhere('booking.company_id = :companyId', {
+        companyId: options.companyId,
+      });
+    }
+    if (options.contractType) {
+      qb.andWhere('booking.contract_type = :contractType', {
+        contractType: options.contractType,
+      });
+    }
+    if (options.serviceTypeId) {
+      qb.andWhere('booking.service_type_id = :serviceTypeId', {
+        serviceTypeId: options.serviceTypeId,
+      });
+    }
+    if (options.cargoTypeId) {
+      qb.andWhere('booking.cargo_type_id = :cargoTypeId', {
+        cargoTypeId: options.cargoTypeId,
+      });
+    }
+    if (options.freightType) {
+      qb.andWhere('booking.freight_type = :freightType', {
+        freightType: options.freightType,
+      });
+    }
+    if (options.tradeDirection) {
+      qb.andWhere('booking.trade_direction = :tradeDirection', {
+        tradeDirection: options.tradeDirection,
+      });
+    }
+    if (options.paymentCurrency) {
+      qb.andWhere('booking.payment_currency = :paymentCurrency', {
+        paymentCurrency: options.paymentCurrency,
+      });
+    }
+    if (options.allowConsolidation !== undefined) {
+      qb.andWhere('booking.allow_consolidation = :allowConsolidation', {
+        allowConsolidation: options.allowConsolidation,
+      });
+    }
+    if (options.consolidationPaired === 'true') {
+      qb.andWhere('booking.consolidation_partner_id IS NOT NULL');
+    } else if (options.consolidationPaired === 'false') {
+      qb.andWhere('booking.consolidation_partner_id IS NULL');
+    }
+  }
+
+  async findAndCountFiltered(where: FindOptionsWhere<Booking>, options: {
+    skip: number;
+    take: number;
+    order: Record<string, 'ASC' | 'DESC'>;
+  }): Promise<[Booking[], number]> {
+    return this.repository.findAndCount({
+      where,
+      skip: options.skip,
+      take: options.take,
+      order: options.order,
+    });
+  }
+
+  findContractSignatures(bookingId: string): Promise<BookingContractSignature[]> {
+    return this.dataSource.getRepository(BookingContractSignature).find({
+      where: { bookingId },
+      relations: ['signatureFile'],
+      order: { signedAt: 'ASC' },
+    });
+  }
+
+  findContractSignature(
+    bookingId: string,
+    role: ContractSignerRole,
+  ): Promise<BookingContractSignature | null> {
+    return this.dataSource.getRepository(BookingContractSignature).findOne({
+      where: { bookingId, signerRole: role },
+      relations: ['signatureFile'],
+    });
+  }
+
+  async saveContractSignature(
+    data: Partial<BookingContractSignature>,
+  ): Promise<BookingContractSignature> {
+    const repo = this.dataSource.getRepository(BookingContractSignature);
+    const existing = await repo.findOne({
+      where: {
+        bookingId: data.bookingId!,
+        signerRole: data.signerRole!,
+      },
+    });
+    if (existing) {
+      Object.assign(existing, data);
+      return repo.save(existing);
+    }
+    return repo.save(repo.create(data));
+  }
 }
diff --git a/apps/edr-freight-api/src/modules/bookings/bookings.service.ts b/apps/edr-freight-api/src/modules/bookings/bookings.service.ts
index 3aaa12a70..87e9298ff 100644
--- a/apps/edr-freight-api/src/modules/bookings/bookings.service.ts
+++ b/apps/edr-freight-api/src/modules/bookings/bookings.service.ts
@@ -4,9 +4,8 @@ import {
   Injectable,
   NotFoundException,
 } from '@nestjs/common';
-import { IsNull, Not } from 'typeorm';
-
-import { CustomersService } from '../customers/customers.service';
+// import { CustomersService } from '../customers/customers.service';
+import { CompaniesService } from '../companies/companies.service';
 import { FilesService } from '../files/files.service';
 import { MinioService } from '../minio/minio.service';
 import { ContainerTypesService } from '../rule-engine/services/container-types.service';
@@ -16,20 +15,35 @@ import {
 } from '../rule-engine/rule-engine.service';
 import { BookingsRepository } from './bookings.repository';
 import { ConsolidationService } from './consolidation.service';
+import { assertFreightShape } from './booking-freight.util';
 import { CreateBookingContainerDto, CreateBookingDto } from './dto/create-booking.dto';
+import { mapStatusCountsToTabs } from './booking-list-tabs.config';
+import { BookingListSummaryDto } from './dto/booking-list-summary.dto';
 import { FilterBookingDto } from './dto/filter-booking.dto';
 import { UpdateBookingDto } from './dto/update-booking.dto';
-import { UpdateStatusDto } from './dto/update-status.dto';
+import {
+  BOOKING_STATUSES,
+  CUSTOMER_EDITABLE_STATUSES,
+  FreightType,
+} from './entities/booking.entity';
 import { Booking } from './entities/booking.entity';
 import { FileRecord } from '../files/entities/file.entity';
 
+const URGENT_PRIORITY_THRESHOLD = 1000;
+const NEEDS_ACTION_STATUSES = [
+  'SUBMITTED',
+  'PENDING_APPROVAL',
+  'APPROVED_PENDING_SIGNATURE',
+] as const;
+
 @Injectable()
 export class BookingsService {
   constructor(
     private readonly bookingsRepository: BookingsRepository,
     private readonly filesService: FilesService,
     private readonly minioService: MinioService,
-    private readonly customersService: CustomersService,
+    // private readonly customersService: CustomersService,
+    private readonly companiesService: CompaniesService,
     private readonly ruleEngineService: RuleEngineService,
     private readonly containerTypesService: ContainerTypesService,
     private readonly consolidationService: ConsolidationService,
@@ -42,22 +56,23 @@ export class BookingsService {
     return `BK-${year}-${String(count + 1).padStart(6, '0')}`;
   }
 
-  /** Build evaluation input from DTO containers. */
-  private async buildEvalInput(
-    dto: Pick<
-      CreateBookingDto,
-      | 'cargoTypeId'
-      | 'serviceTypeId'
-      | 'paymentCurrency'
-      | 'tradeDirection'
-      | 'isHazardous'
-      | 'allowConsolidation'
-      | 'shippingLineId'
-      | 'containers'
-    >,
-  ): Promise<BookingEvaluationInput> {
+  /** Build evaluation input from booking freight shape. */
+  private async buildEvalInput(dto: {
+    freightType: FreightType;
+    cargoTypeId?: string | null;
+    serviceTypeId: string;
+    paymentCurrency: string;
+    tradeDirection: string;
+    isHazardous?: boolean;
+    allowConsolidation?: boolean;
+    shippingLineId?: string | null;
+    containers: CreateBookingContainerDto[];
+  }): Promise<BookingEvaluationInput> {
+    const containerLines =
+      dto.freightType === 'CONTAINER' ? dto.containers : [];
+
     const containers = await Promise.all(
-      dto.containers.map(async (c) => {
+      containerLines.map(async (c) => {
         const ct = await this.containerTypesService.findById(c.containerTypeId);
         const totalVgmTons = c.quantity * c.vgmPerUnitTons;
         return {
@@ -69,13 +84,16 @@ export class BookingsService {
         };
       }),
     );
+
     return {
-      cargoTypeId: dto.cargoTypeId,
+      freightType: dto.freightType,
+      cargoTypeId: dto.cargoTypeId ?? null,
       serviceTypeId: dto.serviceTypeId,
       paymentCurrency: dto.paymentCurrency,
       tradeDirection: dto.tradeDirection,
       isHazardous: dto.isHazardous ?? false,
-      allowConsolidation: dto.allowConsolidation,
+      allowConsolidation:
+        dto.freightType === 'CONTAINER' ? dto.allowConsolidation : false,
       shippingLineId: dto.shippingLineId,
       containers,
     };
@@ -149,24 +167,52 @@ export class BookingsService {
   ): Promise<{ booking: Booking; warnings: string[] }> {
     const warnings: string[] = [];
 
-    let customerId = dto.customerId;
-    if (!customerId) {
+    // let customerId = dto.customerId;
+    // if (!customerId) {
+    //   if (!userId) {
+    //     throw new BadRequestException(
+    //       'customerId is required or must be resolvable from auth token',
+    //     );
+    //   }
+    //   const customer = await this.customersService.findByUserId(userId);
+    //   customerId = customer.id;
+    // }
+
+    let companyId = dto.companyId;
+    if (!companyId) {
       if (!userId) {
         throw new BadRequestException(
-          'customerId is required or must be resolvable from auth token',
+          'companyId is required or must be resolvable from auth token',
         );
       }
-      const customer = await this.customersService.findByUserId(userId);
-      customerId = customer.id;
+      const { company } = await this.companiesService.getCompanyInfoByUserId(userId);
+      companyId = company.id;
     }
 
     const reference = dto.reference || (await this.generateReference());
-    const allowConsolidation = await this.resolveConsolidation(
-      dto.containers,
-      dto.allowConsolidation,
-    );
+    const containers = dto.containers ?? [];
+    assertFreightShape({
+      freightType: dto.freightType,
+      cargoTypeId: dto.cargoTypeId,
+      containers,
+    });
 
-    const evalInput = await this.buildEvalInput({ ...dto, allowConsolidation });
+    const allowConsolidation =
+      dto.freightType === 'CONTAINER'
+        ? await this.resolveConsolidation(containers, dto.allowConsolidation)
+        : false;
+
+    const evalInput = await this.buildEvalInput({
+      freightType: dto.freightType as FreightType,
+      cargoTypeId: dto.freightType === 'BULK' ? dto.cargoTypeId : null,
+      serviceTypeId: dto.serviceTypeId,
+      paymentCurrency: dto.paymentCurrency,
+      tradeDirection: dto.tradeDirection,
+      isHazardous: dto.isHazardous,
+      allowConsolidation,
+      shippingLineId: dto.shippingLineId,
+      containers,
+    });
     const ruleResult = await this.ruleEngineService.evaluate(evalInput);
     this.ruleEngineService.assertNoHardBlocks(ruleResult);
 
@@ -174,7 +220,7 @@ export class BookingsService {
 
     const booking = await this.bookingsRepository.create({
       reference,
-      customerId,
+      companyId,
       trainId: dto.trainId,
       contractType: dto.contractType,
       previousContractId: dto.previousContractId,
@@ -185,7 +231,8 @@ export class BookingsService {
       originYardId: dto.originYardId,
       destinationYardId: dto.destinationYardId,
       tradeDirection: dto.tradeDirection,
-      cargoTypeId: dto.cargoTypeId,
+      freightType: dto.freightType,
+      cargoTypeId: dto.freightType === 'BULK' ? dto.cargoTypeId! : null,
       cargoFreeText: dto.cargoFreeText,
       shippingLineId: dto.shippingLineId,
       cargoTotalWeightVgm: dto.cargoTotalWeightVgm,
@@ -203,18 +250,19 @@ export class BookingsService {
       paymentStatus: 'PENDING',
     });
 
-    await this.bookingsRepository.createContainers(
-      booking.id,
-      dto.containers.map((c, i) => ({
-        containerTypeId: c.containerTypeId,
-        quantity: c.quantity,
-        vgmPerUnitTons: c.vgmPerUnitTons,
-        weightResult: ruleResult.containerWeightResults[i],
-      })),
-    );
-
-    const wagonCount = await this.bookingsRepository.calculateWagonCount(booking.id);
-    warnings.push(`Estimated wagons required: ${wagonCount}`);
+    if (dto.freightType === 'CONTAINER') {
+      await this.bookingsRepository.createContainers(
+        booking.id,
+        containers.map((c, i) => ({
+          containerTypeId: c.containerTypeId,
+          quantity: c.quantity,
+          vgmPerUnitTons: c.vgmPerUnitTons,
+          weightResult: ruleResult.containerWeightResults[i],
+        })),
+      );
+      const wagonCount = await this.bookingsRepository.calculateWagonCount(booking.id);
+      warnings.push(`Estimated wagons required: ${wagonCount}`);
+    }
 
     if (files.length > 0) {
       try {
@@ -242,24 +290,51 @@ export class BookingsService {
     files: Express.Multer.File[],
   ): Promise<{ booking: Booking; warnings: string[] }> {
     const existing = await this.findById(id);
-    if (existing.status !== 'DRAFT') {
-      throw new BadRequestException('Only DRAFT bookings can be updated');
+    if (!CUSTOMER_EDITABLE_STATUSES.includes(existing.status as never)) {
+      throw new BadRequestException(
+        'Only DRAFT or CHANGES_REQUESTED bookings can be updated',
+      );
     }
 
     const warnings: string[] = [];
-    const containers = dto.containers ?? existing.bookingContainers?.map((bc) => ({
-      containerTypeId: bc.containerTypeId,
-      quantity: bc.quantity,
-      vgmPerUnitTons: Number(bc.vgmPerUnitTons),
-    })) ?? [];
+    const freightType = (dto.freightType ?? existing.freightType) as FreightType;
+    let containers =
+      dto.containers ??
+      existing.bookingContainers?.map((bc) => ({
+        containerTypeId: bc.containerTypeId,
+        quantity: bc.quantity,
+        vgmPerUnitTons: Number(bc.vgmPerUnitTons),
+      })) ??
+      [];
 
-    const allowConsolidation = await this.resolveConsolidation(
-      containers,
-      dto.allowConsolidation ?? existing.allowConsolidation,
-    );
+    let cargoTypeId =
+      dto.cargoTypeId !== undefined ? dto.cargoTypeId : existing.cargoTypeId;
+
+    if (freightType === 'BULK') {
+      containers = [];
+      if (dto.containers !== undefined) {
+        await this.bookingsRepository.deleteContainers(id);
+      }
+    } else {
+      cargoTypeId = null;
+      if (dto.cargoTypeId !== undefined && dto.cargoTypeId !== null) {
+        throw new BadRequestException('cargoTypeId is not allowed for CONTAINER freight');
+      }
+    }
+
+    assertFreightShape({ freightType, cargoTypeId, containers });
+
+    const allowConsolidation =
+      freightType === 'CONTAINER'
+        ? await this.resolveConsolidation(
+            containers,
+            dto.allowConsolidation ?? existing.allowConsolidation,
+          )
+        : false;
 
     const evalInput = await this.buildEvalInput({
-      cargoTypeId: dto.cargoTypeId ?? existing.cargoTypeId,
+      freightType,
+      cargoTypeId,
       serviceTypeId: dto.serviceTypeId ?? existing.serviceTypeId,
       paymentCurrency: dto.paymentCurrency ?? existing.paymentCurrency,
       tradeDirection: dto.tradeDirection ?? existing.tradeDirection,
@@ -275,6 +350,8 @@ export class BookingsService {
 
     const updates: Record<string, unknown> = {
       ...dto,
+      freightType,
+      cargoTypeId: freightType === 'BULK' ? cargoTypeId : null,
       allowConsolidation,
       priorityScore: ruleResult.priorityScore,
     };
@@ -285,7 +362,7 @@ export class BookingsService {
 
     await this.bookingsRepository.update(id, updates);
 
-    if (dto.containers) {
+    if (freightType === 'CONTAINER' && dto.containers) {
       await this.bookingsRepository.deleteContainers(id);
       await this.bookingsRepository.createContainers(
         id,
@@ -313,40 +390,88 @@ export class BookingsService {
     return { booking, warnings };
   }
 
+  /** Parse comma-separated or repeated status query values. */
+  private parseStatusFilter(filter: FilterBookingDto): {
+    statuses?: string[];
+    status?: string;
+  } {
+    const allowed = new Set<string>(BOOKING_STATUSES);
+    const raw = filter.statuses;
+    const statusList = raw
+      ? raw
+          .split(',')
+          .map((s) => s.trim())
+          .filter((s) => allowed.has(s))
+      : [];
+
+    if (statusList.length > 0) {
+      return { statuses: statusList };
+    }
+    if (filter.status && allowed.has(filter.status)) {
+      return { status: filter.status };
+    }
+    return {};
+  }
+
   /** Return a paginated list of bookings matching the filter. */
   async findAll(
     filter: FilterBookingDto,
   ): Promise<{ items: Booking[]; total: number }> {
     const page = filter.page ?? 1;
     const pageSize = filter.pageSize ?? 20;
+    const statusFilter = this.parseStatusFilter(filter);
 
-    const where: Record<string, unknown> = {};
-    if (filter.status) where.status = filter.status;
-    if (filter.customerId) where.customerId = filter.customerId;
-    if (filter.contractType) where.contractType = filter.contractType;
-    if (filter.serviceTypeId) where.serviceTypeId = filter.serviceTypeId;
-    if (filter.cargoTypeId) where.cargoTypeId = filter.cargoTypeId;
-    if (filter.tradeDirection) where.tradeDirection = filter.tradeDirection;
-    if (filter.paymentCurrency) where.paymentCurrency = filter.paymentCurrency;
-    if (filter.allowConsolidation !== undefined) {
-      where.allowConsolidation = filter.allowConsolidation;
-    }
-    if (filter.consolidationPaired === 'true') {
-      where.consolidationPartnerId = Not(IsNull());
-    } else if (filter.consolidationPaired === 'false') {
-      where.consolidationPartnerId = IsNull();
-    }
-
-    const sortField = filter.sortBy ?? 'createdAt';
-    const sortDir = filter.sortOrder ?? 'DESC';
-
-    const [items, total] = await this.bookingsRepository.findAndCount({
-      where,
-      skip: (page - 1) * pageSize,
-      take: pageSize,
-      order: { [sortField]: sortDir },
+    return this.bookingsRepository.findAllPaginated({
+      page,
+      pageSize,
+      ...statusFilter,
+      companyId: filter.companyId,
+      contractType: filter.contractType,
+      serviceTypeId: filter.serviceTypeId,
+      cargoTypeId: filter.cargoTypeId,
+      freightType: filter.freightType,
+      tradeDirection: filter.tradeDirection,
+      paymentCurrency: filter.paymentCurrency,
+      allowConsolidation: filter.allowConsolidation,
+      consolidationPaired: filter.consolidationPaired,
+      sortBy: filter.sortBy,
+      sortOrder: filter.sortOrder,
     });
-    return { items, total };
+  }
+
+  /** Aggregate metrics and tab counts for the backoffice booking list. */
+  async getListSummary(filter: FilterBookingDto): Promise<BookingListSummaryDto> {
+    const page = filter.page ?? 1;
+    const pageSize = filter.pageSize ?? 20;
+    const statusFilter = this.parseStatusFilter(filter);
+    const listFilter = {
+      ...statusFilter,
+      companyId: filter.companyId,
+      contractType: filter.contractType,
+      serviceTypeId: filter.serviceTypeId,
+      cargoTypeId: filter.cargoTypeId,
+      freightType: filter.freightType,
+      tradeDirection: filter.tradeDirection,
+      paymentCurrency: filter.paymentCurrency,
+      allowConsolidation: filter.allowConsolidation,
+      consolidationPaired: filter.consolidationPaired,
+    };
+
+    const [statusCounts, metrics] = await Promise.all([
+      this.bookingsRepository.getStatusCounts(),
+      this.bookingsRepository.getListSummaryMetrics({
+        ...listFilter,
+        page,
+        pageSize,
+        needsActionStatuses: NEEDS_ACTION_STATUSES,
+        urgentPriorityThreshold: URGENT_PRIORITY_THRESHOLD,
+      }),
+    ]);
+
+    return {
+      metrics,
+      tabs: mapStatusCountsToTabs(statusCounts),
+    };
   }
 
   /** Get a single booking by ID with files. */
@@ -359,7 +484,7 @@ export class BookingsService {
     if (booking.files && booking.files.length > 0) {
       booking.files = await Promise.all(
         booking.files.map(async (file: FileRecord) => {
-          const objectName = this.extractObjectName(file.url);
+          const objectName = this.minioService.getObjectNameFromUrl(file.url);
           const signedUrl = await this.minioService.getSignedUrl(objectName, 300);
           return { ...file, signedUrl };
         }),
@@ -369,11 +494,6 @@ export class BookingsService {
     return booking;
   }
 
-  private extractObjectName(url: string): string {
-    const parts = url.split('/');
-    return parts.slice(4).join('/');
-  }
-
   async findByReference(reference: string): Promise<Booking> {
     const booking = await this.bookingsRepository.findByReferenceWithFiles(reference);
     if (!booking) {
@@ -382,6 +502,21 @@ export class BookingsService {
     return this.findById(booking.id);
   }
 
+  /** Upload documents for a DRAFT booking. */
+  async uploadDocuments(
+    id: string,
+    files: Express.Multer.File[],
+  ): Promise<Booking> {
+    const booking = await this.findById(id);
+    if (booking.status !== 'DRAFT') {
+      throw new BadRequestException(
+        'Documents can only be uploaded for DRAFT bookings',
+      );
+    }
+    await this.filesService.uploadMany(id, 'bookings', files);
+    return this.findById(id);
+  }
+
   async remove(id: string): Promise<void> {
     const booking = await this.findById(id);
     if (booking.status !== 'DRAFT') {
@@ -390,201 +525,33 @@ export class BookingsService {
     await this.bookingsRepository.softDelete(id);
   }
 
-  /** Unified status transition handler. */
-  async updateStatus(id: string, dto: UpdateStatusDto): Promise<Booking> {
-    const booking = await this.findById(id);
-    const { action, actorId, reason, requiredRole } = dto;
+  async findQueue(
+    queue: string,
+    filter: FilterBookingDto,
+    options?: { excludeBulk?: boolean },
+  ): Promise<{ items: Booking[]; total: number }> {
+    const statusMap: Record<string, string | string[]> = {
+      intake: 'SUBMITTED',
+      approval: ['PENDING_APPROVAL', 'APPROVED_PENDING_SIGNATURE'],
+      signatures: ['APPROVED_PENDING_SIGNATURE', 'PENDING_APPROVAL'],
+      contract: ['APPROVED', 'CONTRACT_READY', 'SIGNED_CUSTOMER', 'FULLY_EXECUTED'],
+      marketing: 'SIGNED_CUSTOMER',
+      finance: 'FULLY_EXECUTED',
+    };
 
-    switch (action) {
-      case 'SUBMIT':
-        return this.handleSubmit(booking);
-      case 'SEND_QUOTATION':
-        return this.handleSendQuotation(booking);
-      case 'APPROVE_QUOTATION':
-        return this.handleApproveQuotation(booking);
-      case 'REJECT_QUOTATION':
-        return this.handleRejectQuotation(booking, reason);
-      case 'APPROVE_STEP':
-        return this.handleApproveStep(booking, actorId, requiredRole);
-      case 'APPROVE':
-        return this.handleFullyApproved(booking);
-      case 'CUSTOMER_SIGN':
-        return this.handleCustomerSign(booking);
-      case 'MARK_FULLY_EXECUTED':
-        return this.handleFullyExecuted(booking);
-      case 'MARK_PAID':
-        return this.handleMarkPaid(booking);
-      case 'START_TRANSIT':
-        return this.handleStartTransit(booking);
-      case 'COMPLETE':
-        return this.handleComplete(booking);
-      case 'REJECT':
-        return this.handleReject(booking, actorId, reason);
-      case 'CANCEL':
-        return this.handleCancel(booking, reason);
-      default:
-        throw new BadRequestException(`Unknown action: ${action}`);
-    }
-  }
-
-  /** SUBMIT: DRAFT → RFQ_SUBMITTED → PENDING_APPROVAL with approval steps and rate snapshots. */
-  private async handleSubmit(booking: Booking): Promise<Booking> {
-    this.assertStatus(booking, ['DRAFT']);
-
-    await this.bookingsRepository.update(booking.id, { status: 'RFQ_SUBMITTED' } as never);
-    await this.ruleEngineService.snapshotLiveRates(booking.id);
-    await this.ruleEngineService.instantiateApprovalSteps(booking.id, booking.cargoTypeId);
-
-    const updated = await this.bookingsRepository.update(booking.id, {
-      status: 'PENDING_APPROVAL',
-    } as never);
-    return updated!;
-  }
-
-  private async handleSendQuotation(booking: Booking): Promise<Booking> {
-    this.assertStatus(booking, ['RFQ_SUBMITTED']);
-    const updated = await this.bookingsRepository.update(booking.id, {
-      status: 'QUOTATION_SENT',
-    } as never);
-    return updated!;
-  }
-
-  private async handleApproveQuotation(booking: Booking): Promise<Booking> {
-    this.assertStatus(booking, ['QUOTATION_SENT']);
-    const updated = await this.bookingsRepository.update(booking.id, {
-      status: 'QUOTATION_APPROVED',
-    } as never);
-    return updated!;
-  }
-
-  private async handleRejectQuotation(booking: Booking, reason?: string): Promise<Booking> {
-    this.assertStatus(booking, ['QUOTATION_SENT']);
-    if (!reason) throw new BadRequestException('reason is required for REJECT_QUOTATION');
-    const updated = await this.bookingsRepository.update(booking.id, {
-      status: 'QUOTATION_REJECTED',
-    } as never);
-    return updated!;
-  }
-
-  private async handleApproveStep(
-    booking: Booking,
-    actorId?: string,
-    requiredRole?: string,
-  ): Promise<Booking> {
-    this.assertStatus(booking, ['PENDING_APPROVAL', 'QUOTATION_APPROVED']);
-    if (!actorId || !requiredRole) {
-      throw new BadRequestException('actorId and requiredRole are required for APPROVE_STEP');
+    const status = statusMap[queue];
+    if (!status) {
+      throw new BadRequestException(`Unknown queue: ${queue}`);
     }
 
-    const step = await this.bookingsRepository.findPendingApprovalStep(
-      booking.id,
-      requiredRole,
-    );
-    if (!step) {
-      throw new BadRequestException(`No pending approval step for role ${requiredRole}`);
-    }
-
-    await this.bookingsRepository.completeApprovalStep(step.id, actorId, 'APPROVED');
-
-    const allDone = await this.bookingsRepository.allApprovalStepsComplete(booking.id);
-    if (allDone) {
-      const updated = await this.bookingsRepository.update(booking.id, {
-        status: 'APPROVED',
-      } as never);
-      return updated!;
-    }
-
-    return this.findById(booking.id);
-  }
-
-  private async handleFullyApproved(booking: Booking): Promise<Booking> {
-    this.assertStatus(booking, ['PENDING_APPROVAL', 'QUOTATION_APPROVED']);
-    const updated = await this.bookingsRepository.update(booking.id, {
-      status: 'APPROVED',
-    } as never);
-    return updated!;
-  }
-
-  private async handleCustomerSign(booking: Booking): Promise<Booking> {
-    this.assertStatus(booking, ['APPROVED']);
-    const updated = await this.bookingsRepository.update(booking.id, {
-      status: 'SIGNED_CUSTOMER',
-      customerSignedAt: new Date(),
-    } as never);
-    return updated!;
-  }
-
-  private async handleFullyExecuted(booking: Booking): Promise<Booking> {
-    this.assertStatus(booking, ['SIGNED_CUSTOMER']);
-    const updated = await this.bookingsRepository.update(booking.id, {
-      status: 'FULLY_EXECUTED',
-      fullyExecutedAt: new Date(),
-    } as never);
-    return updated!;
-  }
-
-  private async handleMarkPaid(booking: Booking): Promise<Booking> {
-    this.assertStatus(booking, ['FULLY_EXECUTED', 'APPROVED', 'SIGNED_CUSTOMER']);
-    const updated = await this.bookingsRepository.update(booking.id, {
-      status: 'PAID',
-      paymentStatus: 'PAID',
-    } as never);
-    return updated!;
-  }
-
-  private async handleStartTransit(booking: Booking): Promise<Booking> {
-    this.assertStatus(booking, ['PAID']);
-    const updated = await this.bookingsRepository.update(booking.id, {
-      status: 'IN_TRANSIT',
-    } as never);
-    return updated!;
-  }
-
-  private async handleComplete(booking: Booking): Promise<Booking> {
-    this.assertStatus(booking, ['IN_TRANSIT']);
-    const updated = await this.bookingsRepository.update(booking.id, {
-      status: 'COMPLETED',
-      endDate: new Date(),
-    } as never);
-    return updated!;
-  }
-
-  private async handleReject(
-    booking: Booking,
-    actorId?: string,
-    reason?: string,
-  ): Promise<Booking> {
-    this.assertStatus(booking, ['PENDING_APPROVAL', 'QUOTATION_APPROVED']);
-    if (!actorId || !reason) {
-      throw new BadRequestException('actorId and reason are required for REJECT');
-    }
-    const updated = await this.bookingsRepository.update(booking.id, {
-      status: 'CANCELLED',
-    } as never);
-    return updated!;
-  }
-
-  private async handleCancel(booking: Booking, reason?: string): Promise<Booking> {
-    this.assertStatus(booking, [
-      'DRAFT',
-      'RFQ_SUBMITTED',
-      'QUOTATION_SENT',
-      'QUOTATION_APPROVED',
-      'PENDING_APPROVAL',
-    ]);
-    if (!reason) throw new BadRequestException('reason is required for CANCEL');
-    const updated = await this.bookingsRepository.update(booking.id, {
-      status: 'CANCELLED',
-    } as never);
-    return updated!;
-  }
-
-  private assertStatus(booking: Booking, allowed: string[]): void {
-    if (!allowed.includes(booking.status)) {
-      throw new ConflictException(
-        `Cannot perform this action on status "${booking.status}". Allowed: ${allowed.join(', ')}`,
-      );
-    }
+    return this.bookingsRepository.findQueue({
+      status,
+      page: filter.page,
+      pageSize: filter.pageSize,
+      excludeBulk: options?.excludeBulk ?? queue === 'approval',
+      sortBy: filter.sortBy,
+      sortOrder: filter.sortOrder,
+    });
   }
 
   async requestConsolidation(id: string): Promise<{
diff --git a/apps/edr-freight-api/src/modules/bookings/dto/booking-list-summary.dto.ts b/apps/edr-freight-api/src/modules/bookings/dto/booking-list-summary.dto.ts
new file mode 100644
index 000000000..30ca4bdb7
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/bookings/dto/booking-list-summary.dto.ts
@@ -0,0 +1,34 @@
+import { ApiProperty } from '@nestjs/swagger';
+
+export class BookingListSummaryMetricsDto {
+  @ApiProperty({ example: 42 })
+  inQueue!: number;
+
+  @ApiProperty({ example: 10 })
+  onThisPage!: number;
+
+  @ApiProperty({ example: 8 })
+  needsAction!: number;
+
+  @ApiProperty({ example: 3 })
+  urgent!: number;
+}
+
+export class BookingListSummaryTabsDto {
+  @ApiProperty() all!: number;
+  @ApiProperty() intake!: number;
+  @ApiProperty() in_approval!: number;
+  @ApiProperty() approved_contract!: number;
+  @ApiProperty() payment!: number;
+  @ApiProperty() operations!: number;
+  @ApiProperty() completed!: number;
+  @ApiProperty() closed!: number;
+}
+
+export class BookingListSummaryDto {
+  @ApiProperty({ type: BookingListSummaryMetricsDto })
+  metrics!: BookingListSummaryMetricsDto;
+
+  @ApiProperty({ type: BookingListSummaryTabsDto })
+  tabs!: BookingListSummaryTabsDto;
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/dto/contract-view.dto.ts b/apps/edr-freight-api/src/modules/bookings/dto/contract-view.dto.ts
new file mode 100644
index 000000000..4af9e535d
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/bookings/dto/contract-view.dto.ts
@@ -0,0 +1,50 @@
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+
+export class ContractSignatureDto {
+  @ApiProperty({ enum: ['CUSTOMER', 'STAFF'] })
+  role!: string;
+
+  @ApiProperty()
+  signerDisplayName!: string;
+
+  @ApiProperty()
+  signedAt!: string;
+
+  @ApiPropertyOptional()
+  signatureImageUrl?: string | null;
+}
+
+export class ContractViewDto {
+  @ApiProperty()
+  bookingId!: string;
+
+  @ApiProperty()
+  reference!: string;
+
+  @ApiProperty()
+  status!: string;
+
+  @ApiProperty()
+  templateKey!: string;
+
+  @ApiProperty()
+  title!: string;
+
+  @ApiProperty({ description: 'Full HTML document for in-browser display' })
+  html!: string;
+
+  @ApiProperty()
+  canSignCustomer!: boolean;
+
+  @ApiProperty()
+  canSignStaff!: boolean;
+
+  @ApiProperty()
+  hasContractDocument!: boolean;
+
+  @ApiProperty({ type: [ContractSignatureDto] })
+  signatures!: ContractSignatureDto[];
+
+  @ApiPropertyOptional()
+  pricingSchedule?: Record<string, unknown>;
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/dto/create-booking.dto.ts b/apps/edr-freight-api/src/modules/bookings/dto/create-booking.dto.ts
index 0d61752f4..8089d0307 100644
--- a/apps/edr-freight-api/src/modules/bookings/dto/create-booking.dto.ts
+++ b/apps/edr-freight-api/src/modules/bookings/dto/create-booking.dto.ts
@@ -1,6 +1,7 @@
 import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
 import { Transform, Type } from 'class-transformer';
 import {
+  ArrayMinSize,
   IsArray,
   IsBoolean,
   IsDateString,
@@ -11,9 +12,12 @@ import {
   IsString,
   IsUUID,
   Min,
+  Validate,
+  ValidateIf,
   ValidateNested,
 } from 'class-validator';
-import { BOOKING_STATUSES } from '../entities/booking.entity';
+import { BOOKING_STATUSES, FREIGHT_TYPES } from '../entities/booking.entity';
+import { BookingFreightShapeConstraint } from './validators/booking-freight.validator';
 
 const CONTRACT_TYPES = ['NEW', 'RENEWAL'] as const;
 const EQUIPMENT_RETURNS = ['WITH_RETURN', 'WITHOUT_RETURN', 'NA'] as const;
@@ -24,6 +28,7 @@ export {
   BOOKING_STATUSES,
   CONTRACT_TYPES,
   EQUIPMENT_RETURNS,
+  FREIGHT_TYPES,
   TRADE_DIRECTIONS,
   PAYMENT_CURRENCIES,
 };
@@ -47,16 +52,24 @@ export class CreateBookingContainerDto {
 }
 
 export class CreateBookingDto {
+  /** Class-level freight shape check (not a request field). */
+  @Validate(BookingFreightShapeConstraint)
+  freightShapeValidation?: boolean;
   @ApiPropertyOptional({ description: 'Unique booking reference (auto-generated if omitted)' })
   @IsOptional()
   @IsString()
   @Transform(({ value }) => (typeof value === 'string' ? value.trim() : value))
   reference?: string;
 
-  @ApiPropertyOptional({ format: 'uuid', description: 'Admin only: target customer' })
+  // @ApiPropertyOptional({ format: 'uuid', description: 'Admin only: target customer (legacy)' })
+  // @IsOptional()
+  // @IsUUID()
+  // customerId?: string;
+
+  @ApiPropertyOptional({ format: 'uuid', description: 'Admin only: target company' })
   @IsOptional()
   @IsUUID()
-  customerId?: string;
+  companyId?: string;
 
   @ApiPropertyOptional({ format: 'uuid' })
   @IsOptional()
@@ -107,9 +120,17 @@ export class CreateBookingDto {
   @IsIn([...TRADE_DIRECTIONS])
   tradeDirection!: string;
 
-  @ApiProperty({ format: 'uuid', description: 'FK to cargo_types.id' })
+  @ApiProperty({ enum: FREIGHT_TYPES, description: 'CONTAINER or BULK (mutually exclusive cargo shape)' })
+  @IsIn([...FREIGHT_TYPES])
+  freightType!: string;
+
+  @ApiPropertyOptional({
+    format: 'uuid',
+    description: 'Required for BULK; must be omitted for CONTAINER',
+  })
+  @ValidateIf((o) => o.freightType === 'BULK')
   @IsUUID()
-  cargoTypeId!: string;
+  cargoTypeId?: string;
 
   @ApiPropertyOptional({ maxLength: 200 })
   @IsOptional()
@@ -157,11 +178,16 @@ export class CreateBookingDto {
   @IsString()
   financialTerms?: string;
 
-  @ApiProperty({ type: [CreateBookingContainerDto] })
+  @ApiPropertyOptional({
+    type: [CreateBookingContainerDto],
+    description: 'Required for CONTAINER (min 1 line); must be empty for BULK',
+  })
+  @ValidateIf((o) => o.freightType === 'CONTAINER')
   @IsArray()
+  @ArrayMinSize(1)
   @ValidateNested({ each: true })
   @Type(() => CreateBookingContainerDto)
-  containers!: CreateBookingContainerDto[];
+  containers?: CreateBookingContainerDto[];
 
   @ApiPropertyOptional({ default: false })
   @IsOptional()
diff --git a/apps/edr-freight-api/src/modules/bookings/dto/filter-booking.dto.ts b/apps/edr-freight-api/src/modules/bookings/dto/filter-booking.dto.ts
index 912064905..03fe73683 100644
--- a/apps/edr-freight-api/src/modules/bookings/dto/filter-booking.dto.ts
+++ b/apps/edr-freight-api/src/modules/bookings/dto/filter-booking.dto.ts
@@ -1,7 +1,12 @@
 import { ApiPropertyOptional } from '@nestjs/swagger';
 import { Transform } from 'class-transformer';
 import { IsIn, IsOptional, IsUUID } from 'class-validator';
-import { BOOKING_STATUSES, PAYMENT_CURRENCIES, TRADE_DIRECTIONS } from './create-booking.dto';
+import {
+  BOOKING_STATUSES,
+  FREIGHT_TYPES,
+  PAYMENT_CURRENCIES,
+  TRADE_DIRECTIONS,
+} from './create-booking.dto';
 
 export class FilterBookingDto {
   @ApiPropertyOptional({ enum: BOOKING_STATUSES })
@@ -9,10 +14,27 @@ export class FilterBookingDto {
   @IsIn([...BOOKING_STATUSES])
   status?: string;
 
+  @ApiPropertyOptional({
+    description:
+      'Filter by statuses: comma-separated (PENDING_APPROVAL,APPROVED) or repeated query params. Overrides status when set.',
+  })
+  @IsOptional()
+  @Transform(({ value }) => {
+    if (value === undefined || value === null || value === '') return undefined;
+    if (Array.isArray(value)) return value.map(String).join(',');
+    return String(value);
+  })
+  statuses?: string;
+
+  // @ApiPropertyOptional({ format: 'uuid' })
+  // @IsOptional()
+  // @IsUUID()
+  // customerId?: string;
+
   @ApiPropertyOptional({ format: 'uuid' })
   @IsOptional()
   @IsUUID()
-  customerId?: string;
+  companyId?: string;
 
   @ApiPropertyOptional()
   @IsOptional()
@@ -28,6 +50,11 @@ export class FilterBookingDto {
   @IsUUID()
   cargoTypeId?: string;
 
+  @ApiPropertyOptional({ enum: FREIGHT_TYPES })
+  @IsOptional()
+  @IsIn([...FREIGHT_TYPES])
+  freightType?: string;
+
   @ApiPropertyOptional({ enum: TRADE_DIRECTIONS })
   @IsOptional()
   @IsIn([...TRADE_DIRECTIONS])
diff --git a/apps/edr-freight-api/src/modules/bookings/dto/generate-price-response.dto.ts b/apps/edr-freight-api/src/modules/bookings/dto/generate-price-response.dto.ts
new file mode 100644
index 000000000..3474bec74
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/bookings/dto/generate-price-response.dto.ts
@@ -0,0 +1,32 @@
+import { ApiProperty } from '@nestjs/swagger';
+
+export class PriceLineItemDto {
+  @ApiProperty()
+  code!: string;
+
+  @ApiProperty()
+  description!: string;
+
+  @ApiProperty()
+  amount!: number;
+
+  @ApiProperty()
+  currency!: string;
+}
+
+export class GeneratePriceResponseDto {
+  @ApiProperty()
+  bookingId!: string;
+
+  @ApiProperty()
+  totalAmount!: number;
+
+  @ApiProperty()
+  currency!: string;
+
+  @ApiProperty({ type: [PriceLineItemDto] })
+  lineItems!: PriceLineItemDto[];
+
+  @ApiProperty({ type: [String] })
+  warnings!: string[];
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/dto/pay-booking.dto.ts b/apps/edr-freight-api/src/modules/bookings/dto/pay-booking.dto.ts
new file mode 100644
index 000000000..50db3864b
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/bookings/dto/pay-booking.dto.ts
@@ -0,0 +1,26 @@
+import { ApiProperty } from '@nestjs/swagger';
+
+export class InAppPaymentReceiptDto {
+  @ApiProperty({ example: true })
+  success!: boolean;
+
+  @ApiProperty({ example: 'TELEBIRR' })
+  provider!: string;
+
+  @ApiProperty({ example: 'TB-BK-2026-000123-1717584000000' })
+  providerRef!: string;
+
+  @ApiProperty({ example: 15000 })
+  amount!: number;
+
+  @ApiProperty({ example: 'ETB' })
+  currency!: string;
+
+  @ApiProperty({ example: '2026-06-05T12:00:00.000Z' })
+  paidAt!: string;
+}
+
+export class PayBookingResponseDto {
+  @ApiProperty({ type: InAppPaymentReceiptDto })
+  paymentReceipt!: InAppPaymentReceiptDto;
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/dto/request-changes.dto.ts b/apps/edr-freight-api/src/modules/bookings/dto/request-changes.dto.ts
new file mode 100644
index 000000000..99855d49f
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/bookings/dto/request-changes.dto.ts
@@ -0,0 +1,36 @@
+import { ApiProperty } from '@nestjs/swagger';
+import { IsString, MinLength } from 'class-validator';
+
+export class RequestChangesDto {
+  @ApiProperty({ description: 'Staff note explaining what the customer must fix' })
+  @IsString()
+  @MinLength(1)
+  note!: string;
+}
+
+export class StaffRejectDto {
+  @ApiProperty()
+  @IsString()
+  @MinLength(1)
+  reason!: string;
+}
+
+export class ApproveStepDto {
+  @ApiProperty({ description: 'LINE_STAFF | DIRECTOR | CEO' })
+  @IsString()
+  requiredRole!: string;
+}
+
+export class RejectStepDto {
+  @ApiProperty()
+  @IsString()
+  @MinLength(1)
+  reason!: string;
+}
+
+export class CancelBookingDto {
+  @ApiProperty()
+  @IsString()
+  @MinLength(1)
+  reason!: string;
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/dto/sign-contract.dto.ts b/apps/edr-freight-api/src/modules/bookings/dto/sign-contract.dto.ts
new file mode 100644
index 000000000..0b176ebd5
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/bookings/dto/sign-contract.dto.ts
@@ -0,0 +1,23 @@
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+import { IsIn, IsOptional, IsString, MinLength } from 'class-validator';
+
+export class SignContractDto {
+  @ApiProperty({ enum: ['CUSTOMER', 'STAFF'] })
+  @IsIn(['CUSTOMER', 'STAFF'])
+  role!: 'CUSTOMER' | 'STAFF';
+
+  @ApiProperty({ description: 'PNG signature image as base64 (with or without data URL prefix)' })
+  @IsString()
+  @MinLength(20)
+  signatureImageBase64!: string;
+
+  @ApiProperty()
+  @IsString()
+  @MinLength(1)
+  signerDisplayName!: string;
+
+  @ApiPropertyOptional()
+  @IsOptional()
+  @IsString()
+  consentText?: string;
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/dto/update-booking.dto.ts b/apps/edr-freight-api/src/modules/bookings/dto/update-booking.dto.ts
index 2b97debc6..328e71180 100644
--- a/apps/edr-freight-api/src/modules/bookings/dto/update-booking.dto.ts
+++ b/apps/edr-freight-api/src/modules/bookings/dto/update-booking.dto.ts
@@ -1,5 +1,10 @@
-import { PartialType } from "@nestjs/mapped-types";
+import { PartialType } from '@nestjs/mapped-types';
+import { Validate } from 'class-validator';
 
-import { CreateBookingDto } from "./create-booking.dto";
+import { CreateBookingDto } from './create-booking.dto';
+import { BookingFreightShapeConstraint } from './validators/booking-freight.validator';
 
-export class UpdateBookingDto extends PartialType(CreateBookingDto) {}
+export class UpdateBookingDto extends PartialType(CreateBookingDto) {
+  @Validate(BookingFreightShapeConstraint)
+  freightShapeValidation?: boolean;
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/dto/update-status.dto.ts b/apps/edr-freight-api/src/modules/bookings/dto/update-status.dto.ts
deleted file mode 100644
index a2d6c192d..000000000
--- a/apps/edr-freight-api/src/modules/bookings/dto/update-status.dto.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
-import { IsIn, IsOptional, IsString, IsUUID } from 'class-validator';
-
-const STATUS_ACTIONS = [
-  'SUBMIT',
-  'SEND_QUOTATION',
-  'APPROVE_QUOTATION',
-  'REJECT_QUOTATION',
-  'APPROVE_STEP',
-  'APPROVE',
-  'CUSTOMER_SIGN',
-  'MARK_FULLY_EXECUTED',
-  'MARK_PAID',
-  'START_TRANSIT',
-  'COMPLETE',
-  'REJECT',
-  'CANCEL',
-] as const;
-
-export { STATUS_ACTIONS };
-
-export class UpdateStatusDto {
-  @ApiProperty({ enum: STATUS_ACTIONS })
-  @IsIn([...STATUS_ACTIONS])
-  action!: string;
-
-  @ApiPropertyOptional({ format: 'uuid', description: 'Staff/director/CEO actor' })
-  @IsOptional()
-  @IsUUID()
-  actorId?: string;
-
-  @ApiPropertyOptional({ description: 'Required role for APPROVE_STEP (LINE_STAFF, DIRECTOR, CEO)' })
-  @IsOptional()
-  @IsString()
-  requiredRole?: string;
-
-  @ApiPropertyOptional({ description: 'Required for REJECT, REJECT_QUOTATION, CANCEL' })
-  @IsOptional()
-  @IsString()
-  reason?: string;
-}
diff --git a/apps/edr-freight-api/src/modules/bookings/dto/validators/booking-freight.validator.ts b/apps/edr-freight-api/src/modules/bookings/dto/validators/booking-freight.validator.ts
new file mode 100644
index 000000000..1365158b1
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/bookings/dto/validators/booking-freight.validator.ts
@@ -0,0 +1,60 @@
+import {
+  ValidationArguments,
+  ValidatorConstraint,
+  ValidatorConstraintInterface,
+} from 'class-validator';
+
+import { FREIGHT_TYPES, FreightType } from '../../entities/booking.entity';
+
+export interface BookingFreightShapeInput {
+  freightType?: string;
+  cargoTypeId?: string | null;
+  containers?: Array<{ containerTypeId?: string }> | null;
+}
+
+@ValidatorConstraint({ name: 'BookingFreightShape', async: false })
+export class BookingFreightShapeConstraint implements ValidatorConstraintInterface {
+  validate(_value: unknown, args: ValidationArguments): boolean {
+    const dto = args.object as BookingFreightShapeInput;
+    if (!dto.freightType || !FREIGHT_TYPES.includes(dto.freightType as FreightType)) {
+      return true;
+    }
+
+    const containers = dto.containers ?? [];
+    const hasContainers = containers.length > 0;
+    const hasCargoType =
+      dto.cargoTypeId !== undefined &&
+      dto.cargoTypeId !== null &&
+      String(dto.cargoTypeId).trim() !== '';
+
+    if (dto.freightType === 'BULK') {
+      if (hasContainers) return false;
+      if (!hasCargoType) return false;
+      return true;
+    }
+
+    if (dto.freightType === 'CONTAINER') {
+      if (hasCargoType) return false;
+      if (!hasContainers) return false;
+      return containers.every(
+        (c) =>
+          c.containerTypeId !== undefined &&
+          c.containerTypeId !== null &&
+          String(c.containerTypeId).trim() !== '',
+      );
+    }
+
+    return true;
+  }
+
+  defaultMessage(args: ValidationArguments): string {
+    const dto = args.object as BookingFreightShapeInput;
+    if (dto.freightType === 'BULK') {
+      return 'BULK freight requires cargoTypeId and must not include container lines';
+    }
+    if (dto.freightType === 'CONTAINER') {
+      return 'CONTAINER freight requires at least one container line with containerTypeId and must not include cargoTypeId';
+    }
+    return 'Invalid freight type shape';
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/entities/booking-approval-step.entity.ts b/apps/edr-freight-api/src/modules/bookings/entities/booking-approval-step.entity.ts
index 4f3032b73..68018e883 100644
--- a/apps/edr-freight-api/src/modules/bookings/entities/booking-approval-step.entity.ts
+++ b/apps/edr-freight-api/src/modules/bookings/entities/booking-approval-step.entity.ts
@@ -31,6 +31,9 @@ export class BookingApprovalStep extends BaseEntity {
   @Column({ name: 'required_role', type: 'varchar', length: 30 })
   requiredRole!: string;
 
+  @Column({ name: 'blocks_role', type: 'varchar', length: 30, nullable: true })
+  blocksRole?: string | null;
+
   @Column({ name: 'status', type: 'varchar', length: 20, default: 'PENDING' })
   status!: ApprovalStepStatus;
 
diff --git a/apps/edr-freight-api/src/modules/bookings/entities/booking-contract-signature.entity.ts b/apps/edr-freight-api/src/modules/bookings/entities/booking-contract-signature.entity.ts
new file mode 100644
index 000000000..6370c97c2
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/bookings/entities/booking-contract-signature.entity.ts
@@ -0,0 +1,44 @@
+import { BaseEntity } from '@edr/api-common';
+import { Column, Entity, Index, JoinColumn, ManyToOne, Unique } from 'typeorm';
+import { FileRecord } from '../../files/entities/file.entity';
+import { Booking } from './booking.entity';
+
+export const CONTRACT_SIGNER_ROLES = ['CUSTOMER', 'STAFF'] as const;
+export type ContractSignerRole = (typeof CONTRACT_SIGNER_ROLES)[number];
+
+@Entity({ schema: 'freight', name: 'booking_contract_signatures' })
+@Unique(['bookingId', 'signerRole'])
+@Index(['bookingId'])
+export class BookingContractSignature extends BaseEntity {
+  @Column({ name: 'booking_id', type: 'uuid' })
+  bookingId!: string;
+
+  @ManyToOne(() => Booking, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'booking_id' })
+  booking?: Booking;
+
+  @Column({ name: 'signer_role', type: 'varchar', length: 20 })
+  signerRole!: ContractSignerRole;
+
+  @Column({ name: 'signer_user_id', type: 'uuid', nullable: true })
+  signerUserId?: string | null;
+
+  @Column({ name: 'signer_display_name', type: 'varchar', length: 200 })
+  signerDisplayName!: string;
+
+  @Column({ name: 'signed_at', type: 'timestamptz' })
+  signedAt!: Date;
+
+  @Column({ name: 'signature_file_id', type: 'uuid', nullable: true })
+  signatureFileId?: string | null;
+
+  @ManyToOne(() => FileRecord, { nullable: true })
+  @JoinColumn({ name: 'signature_file_id' })
+  signatureFile?: FileRecord | null;
+
+  @Column({ name: 'consent_text', type: 'text', nullable: true })
+  consentText?: string | null;
+
+  @Column({ name: 'ip_address', type: 'varchar', length: 64, nullable: true })
+  ipAddress?: string | null;
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/entities/booking-review-note.entity.ts b/apps/edr-freight-api/src/modules/bookings/entities/booking-review-note.entity.ts
new file mode 100644
index 000000000..af39a469c
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/bookings/entities/booking-review-note.entity.ts
@@ -0,0 +1,26 @@
+import { BaseEntity } from '@edr/api-common';
+import { Column, Entity, Index, JoinColumn, ManyToOne } from 'typeorm';
+import { Booking } from './booking.entity';
+
+export const REVIEW_NOTE_TYPES = ['CHANGES_REQUESTED', 'REJECTION'] as const;
+export type ReviewNoteType = (typeof REVIEW_NOTE_TYPES)[number];
+
+@Entity({ schema: 'freight', name: 'booking_review_note' })
+@Index(['bookingId'])
+export class BookingReviewNote extends BaseEntity {
+  @Column({ name: 'booking_id', type: 'uuid' })
+  bookingId!: string;
+
+  @ManyToOne(() => Booking, (b) => b.reviewNotes, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'booking_id' })
+  booking?: Booking;
+
+  @Column({ name: 'author_id', type: 'uuid', nullable: true })
+  authorId?: string | null;
+
+  @Column({ name: 'note', type: 'text' })
+  note!: string;
+
+  @Column({ name: 'type', type: 'varchar', length: 30 })
+  type!: ReviewNoteType;
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/entities/booking.entity.ts b/apps/edr-freight-api/src/modules/bookings/entities/booking.entity.ts
index 7875babbf..fb3679a60 100644
--- a/apps/edr-freight-api/src/modules/bookings/entities/booking.entity.ts
+++ b/apps/edr-freight-api/src/modules/bookings/entities/booking.entity.ts
@@ -1,6 +1,7 @@
 import { BaseEntity } from '@edr/api-common';
 import { Column, Entity, JoinColumn, ManyToOne, OneToMany } from 'typeorm';
-import { Customer } from '../../customers/entities/customer.entity';
+// import { Customer } from '../../customers/entities/customer.entity';
+import { Company } from '../../companies/entities/company.entity';
 import { CargoType } from '../../rule-engine/entities/cargo-type.entity';
 import { ServiceType } from '../../rule-engine/entities/service-type.entity';
 import { ShippingLine } from '../../rule-engine/entities/shipping-line.entity';
@@ -11,36 +12,68 @@ import { BookingApprovalStep } from './booking-approval-step.entity';
 import { BookingCargoModifier } from './booking-cargo-modifier.entity';
 import { BookingContainer } from './booking-container.entity';
 import { BookingRateSnapshot } from './booking-rate-snapshot.entity';
+import { BookingReviewNote } from './booking-review-note.entity';
 
 export const BOOKING_STATUSES = [
   'DRAFT',
-  'RFQ_SUBMITTED',
-  'QUOTATION_SENT',
-  'QUOTATION_APPROVED',
-  'QUOTATION_REJECTED',
+  'SUBMITTED',
+  'CHANGES_REQUESTED',
   'PENDING_APPROVAL',
+  'APPROVED_PENDING_SIGNATURE',
   'APPROVED',
+  'CONTRACT_READY',
   'SIGNED_CUSTOMER',
   'FULLY_EXECUTED',
+  'PNR_GENERATED',
+  'PAYMENT_VERIFICATION_IN_PROGRESS',
   'PAID',
   'IN_TRANSIT',
   'COMPLETED',
+  'REJECTED',
   'CANCELLED',
   'PENDING_CONSOLIDATION',
   'CONSOLIDATED',
 ] as const;
 
+export type BookingStatus = (typeof BOOKING_STATUSES)[number];
+
+export const PAYMENT_STATUSES = [
+  'PENDING',
+  'PNR_GENERATED',
+  'VERIFICATION_IN_PROGRESS',
+  'PAID',
+  'FAILED',
+] as const;
+
+export type PaymentStatus = (typeof PAYMENT_STATUSES)[number];
+
+export const FREIGHT_TYPES = ['CONTAINER', 'BULK'] as const;
+export type FreightType = (typeof FREIGHT_TYPES)[number];
+
+/** Statuses where the customer may edit booking fields. */
+export const CUSTOMER_EDITABLE_STATUSES: BookingStatus[] = [
+  'DRAFT',
+  'CHANGES_REQUESTED',
+];
+
 @Entity({ schema: 'freight', name: 'bookings' })
 export class Booking extends BaseEntity {
   @Column({ name: 'reference', type: 'varchar', length: 64, unique: true })
   reference!: string;
 
-  @Column({ name: 'customer_id', type: 'uuid' })
-  customerId!: string;
+  // Legacy — superseded by companyId (column kept in DB)
+  // @Column({ name: 'customer_id', type: 'uuid' })
+  // customerId!: string;
+  // @ManyToOne(() => Customer)
+  // @JoinColumn({ name: 'customer_id' })
+  // customer?: Customer;
 
-  @ManyToOne(() => Customer)
-  @JoinColumn({ name: 'customer_id' })
-  customer?: Customer;
+  @Column({ name: 'company_id', type: 'uuid' })
+  companyId!: string;
+
+  @ManyToOne(() => Company)
+  @JoinColumn({ name: 'company_id' })
+  company?: Company;
 
   @Column({ name: 'train_id', type: 'uuid', nullable: true })
   trainId?: string | null;
@@ -104,8 +137,11 @@ export class Booking extends BaseEntity {
   @Column({ name: 'trade_direction', type: 'varchar', length: 10 })
   tradeDirection!: string;
 
-  @Column({ name: 'cargo_type_id', type: 'uuid' })
-  cargoTypeId!: string;
+  @Column({ name: 'freight_type', type: 'varchar', length: 20 })
+  freightType!: string;
+
+  @Column({ name: 'cargo_type_id', type: 'uuid', nullable: true })
+  cargoTypeId?: string | null;
 
   @ManyToOne(() => CargoType)
   @JoinColumn({ name: 'cargo_type_id' })
@@ -169,6 +205,27 @@ export class Booking extends BaseEntity {
   @Column({ name: 'fully_executed_at', type: 'timestamptz', nullable: true })
   fullyExecutedAt?: Date | null;
 
+  @Column({ name: 'marketing_approved_by_id', type: 'uuid', nullable: true })
+  marketingApprovedById?: string | null;
+
+  @Column({ name: 'marketing_approved_at', type: 'timestamptz', nullable: true })
+  marketingApprovedAt?: Date | null;
+
+  @Column({ name: 'contract_summary', type: 'text', nullable: true })
+  contractSummary?: string | null;
+
+  @Column({ name: 'contract_template_key', type: 'varchar', length: 80, nullable: true })
+  contractTemplateKey?: string | null;
+
+  @Column({ name: 'contract_generated_at', type: 'timestamptz', nullable: true })
+  contractGeneratedAt?: Date | null;
+
+  @Column({ name: 'pricing_breakdown', type: 'jsonb', nullable: true })
+  pricingBreakdown?: Record<string, unknown> | null;
+
+  @Column({ name: 'locked_at', type: 'timestamptz', nullable: true })
+  lockedAt?: Date | null;
+
   @Column({ name: 'priority_score', type: 'int', default: 0 })
   priorityScore!: number;
 
@@ -194,6 +251,9 @@ export class Booking extends BaseEntity {
   @OneToMany(() => BookingRateSnapshot, (s) => s.booking)
   rateSnapshots?: BookingRateSnapshot[];
 
+  @OneToMany(() => BookingReviewNote, (n) => n.booking)
+  reviewNotes?: BookingReviewNote[];
+
   @OneToMany(() => FileRecord, (file) => file.resourceId, {
     createForeignKeyConstraints: false,
   })
diff --git a/apps/edr-freight-api/src/modules/bookings/pay.controller.ts b/apps/edr-freight-api/src/modules/bookings/pay.controller.ts
new file mode 100644
index 000000000..de66afac5
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/bookings/pay.controller.ts
@@ -0,0 +1,34 @@
+import { Controller, Param, ParseUUIDPipe, Post } from '@nestjs/common';
+import { ApiBearerAuth, ApiOkResponse, ApiOperation, ApiTags } from '@nestjs/swagger';
+
+import { BookingPaymentService } from './booking-payment.service';
+import { BookingTransitionService } from './booking-transition.service';
+import { InAppPaymentReceiptDto } from './dto/pay-booking.dto';
+import { Booking } from './entities/booking.entity';
+import { BookingNextStep } from './booking-next-step.util';
+
+@ApiTags('payments')
+@ApiBearerAuth()
+@Controller('bookings')
+export class PayController {
+  constructor(
+    private readonly paymentService: BookingPaymentService,
+    private readonly transitionService: BookingTransitionService,
+  ) {}
+
+  @Post(':id/payment/pay')
+  @ApiOperation({ summary: 'Complete in-app payment (mock)' })
+  @ApiOkResponse({ description: 'Enriched booking with ephemeral payment receipt' })
+  async pay(@Param('id', ParseUUIDPipe) id: string): Promise<
+    Booking & {
+      latestChangeRequestNote?: string | null;
+      contractSummary?: string | null;
+      nextStep: BookingNextStep | null;
+      paymentReceipt: InAppPaymentReceiptDto;
+    }
+  > {
+    const { booking, receipt } = await this.paymentService.pay(id);
+    const abstract = await this.transitionService.enrichBookingResponse(booking);
+    return { ...abstract, paymentReceipt: receipt };
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/cargoes/cargoes.controller.ts b/apps/edr-freight-api/src/modules/cargoes/cargoes.controller.ts
new file mode 100644
index 000000000..5d86a579b
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/cargoes/cargoes.controller.ts
@@ -0,0 +1,70 @@
+import {
+  Body,
+  Controller,
+  Delete,
+  Get,
+  Param,
+  ParseUUIDPipe,
+  Patch,
+  Post,
+} from '@nestjs/common';
+import { ApiOperation, ApiTags } from '@nestjs/swagger';
+import { CreateCargoDto } from './dto/create-cargo.dto';
+import { UpdateCargoDto } from './dto/update-cargo.dto';
+import { LoadCargoDto } from './dto/load-cargo.dto';
+import { DeliverCargoDto } from './dto/deliver-cargo.dto';
+import { CargoesService } from './cargoes.service';
+
+@ApiTags('cargoes')
+@Controller('cargoes')
+export class CargoesController {
+  constructor(private readonly cargoesService: CargoesService) {}
+
+  @Post()
+  @ApiOperation({ summary: 'Create a new cargo' })
+  create(@Body() dto: CreateCargoDto) {
+    return this.cargoesService.create(dto);
+  }
+
+  @Get()
+  @ApiOperation({ summary: 'List all cargoes' })
+  findAll() {
+    return this.cargoesService.findAll();
+  }
+
+  @Get(':id')
+  @ApiOperation({ summary: 'Get a cargo by ID' })
+  findOne(@Param('id', ParseUUIDPipe) id: string) {
+    return this.cargoesService.findById(id);
+  }
+
+  @Patch(':id')
+  @ApiOperation({ summary: 'Update a cargo' })
+  update(@Param('id', ParseUUIDPipe) id: string, @Body() dto: UpdateCargoDto) {
+    return this.cargoesService.update(id, dto);
+  }
+
+  @Delete(':id')
+  @ApiOperation({ summary: 'Delete a cargo' })
+  remove(@Param('id', ParseUUIDPipe) id: string) {
+    return this.cargoesService.remove(id);
+  }
+
+  @Post(':id/load')
+  @ApiOperation({ summary: 'Load cargo into a container' })
+  load(@Param('id', ParseUUIDPipe) id: string, @Body() dto: LoadCargoDto) {
+    return this.cargoesService.loadCargo(id, dto);
+  }
+
+  @Post(':id/unload')
+  @ApiOperation({ summary: 'Unload cargo from container' })
+  unload(@Param('id', ParseUUIDPipe) id: string) {
+    return this.cargoesService.unloadCargo(id);
+  }
+
+  @Post(':id/deliver')
+  @ApiOperation({ summary: 'Mark cargo as delivered' })
+  deliver(@Param('id', ParseUUIDPipe) id: string, @Body() dto?: DeliverCargoDto) {
+    return this.cargoesService.deliverCargo(id, dto);
+  }
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/cargoes/cargoes.module.ts b/apps/edr-freight-api/src/modules/cargoes/cargoes.module.ts
new file mode 100644
index 000000000..8a60d2600
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/cargoes/cargoes.module.ts
@@ -0,0 +1,14 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { Cargo } from './entities/cargoes.entity';
+import { Container } from '../container-management/entities/container.entity';
+import { CargoesController } from './cargoes.controller';
+import { CargoesService } from './cargoes.service';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([Cargo, Container])],
+  controllers: [CargoesController],
+  providers: [CargoesService],
+  exports: [CargoesService],
+})
+export class CargoesModule {}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/cargoes/cargoes.repository.ts b/apps/edr-freight-api/src/modules/cargoes/cargoes.repository.ts
new file mode 100644
index 000000000..cedb217da
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/cargoes/cargoes.repository.ts
@@ -0,0 +1,15 @@
+import { BaseRepository } from '@edr/api-common';
+import { Injectable } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { Cargo } from './entities/cargoes.entity';
+
+@Injectable()
+export class CargoesRepository extends BaseRepository<Cargo> {
+  constructor(
+    @InjectRepository(Cargo)
+    repository: Repository<Cargo>,
+  ) {
+    super(repository);
+  }
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/cargoes/cargoes.service.ts b/apps/edr-freight-api/src/modules/cargoes/cargoes.service.ts
new file mode 100644
index 000000000..c1a6e213e
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/cargoes/cargoes.service.ts
@@ -0,0 +1,104 @@
+import { Injectable, NotFoundException, ConflictException } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { CreateCargoDto } from './dto/create-cargo.dto';
+import { UpdateCargoDto } from './dto/update-cargo.dto';
+import { LoadCargoDto } from './dto/load-cargo.dto';
+import { DeliverCargoDto } from './dto/deliver-cargo.dto';
+import { Cargo } from './entities/cargoes.entity';
+import { Container } from '../container-management/entities/container.entity';
+
+@Injectable()
+export class CargoesService {
+  constructor(
+    @InjectRepository(Cargo)
+    private readonly cargoRepo: Repository<Cargo>,
+    @InjectRepository(Container)
+    private readonly containerRepo: Repository<Container>,
+  ) {}
+
+  async create(dto: CreateCargoDto): Promise<Cargo> {
+    const cargo = this.cargoRepo.create(dto);
+    return this.cargoRepo.save(cargo);
+  }
+
+  async findAll(): Promise<Cargo[]> {
+    return this.cargoRepo.find({ order: { cargoReference: 'ASC' } });
+  }
+
+  async findById(id: string): Promise<Cargo> {
+    const cargo = await this.cargoRepo.findOne({ where: { id } });
+    if (!cargo) throw new NotFoundException(`Cargo ${id} not found`);
+    return cargo;
+  }
+
+  async update(id: string, dto: UpdateCargoDto): Promise<Cargo> {
+    const cargo = await this.findById(id);
+    Object.assign(cargo, dto);
+    return this.cargoRepo.save(cargo);
+  }
+
+  async remove(id: string): Promise<void> {
+    const cargo = await this.findById(id);
+    await this.cargoRepo.remove(cargo);
+  }
+
+  async loadCargo(id: string, dto: LoadCargoDto): Promise<Cargo> {
+    const cargo = await this.cargoRepo.findOne({
+      where: { id },
+      relations: { container: true }, // ✅ fixed
+    });
+    if (!cargo) throw new NotFoundException('Cargo not found');
+    if (cargo.status !== 'PENDING') {
+      throw new ConflictException('Cargo already loaded or delivered');
+    }
+
+    cargo.status = 'LOADED';
+    cargo.loadedAt = new Date();
+    cargo.quantity = dto.quantity;
+    cargo.weight = dto.weight;
+    cargo.volume = dto.volume ?? null;
+    if (dto.description) cargo.description = dto.description;
+
+    if (cargo.container) {
+      cargo.container.status = 'LOADED';
+      await this.containerRepo.save(cargo.container);
+    }
+
+    return this.cargoRepo.save(cargo);
+  }
+
+  async unloadCargo(id: string): Promise<Cargo> {
+    const cargo = await this.findById(id);
+    if (cargo.status !== 'LOADED') {
+      throw new ConflictException('Cargo is not loaded');
+    }
+    cargo.status = 'UNLOADED';
+    cargo.unloadedAt = new Date();
+    return this.cargoRepo.save(cargo);
+  }
+
+  async deliverCargo(id: string, dto?: DeliverCargoDto): Promise<Cargo> {
+    const cargo = await this.cargoRepo.findOne({
+      where: { id },
+      relations: { container: true }, // ✅ fixed
+    });
+    if (!cargo) throw new NotFoundException('Cargo not found');
+    if (cargo.status !== 'LOADED') {
+      throw new ConflictException('Only loaded cargo can be delivered');
+    }
+
+    cargo.status = 'DELIVERED';
+    if (dto?.deliveryRemarks) cargo.description = dto.deliveryRemarks;
+
+    const remaining = await this.cargoRepo.count({
+      where: { containerId: cargo.containerId, status: 'LOADED' },
+    });
+    if (remaining === 0 && cargo.container) {
+      cargo.container.status = 'AVAILABLE';
+      await this.containerRepo.save(cargo.container);
+    }
+
+    return this.cargoRepo.save(cargo);
+  }
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/cargoes/dto/create-cargo.dto.ts b/apps/edr-freight-api/src/modules/cargoes/dto/create-cargo.dto.ts
new file mode 100644
index 000000000..8373f5a4b
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/cargoes/dto/create-cargo.dto.ts
@@ -0,0 +1,45 @@
+import { IsString, IsUUID, IsOptional, IsNumber, Min, IsIn, IsDateString } from 'class-validator';
+
+export class CreateCargoDto {
+  @IsString()
+  cargoReference!: string;
+
+  @IsUUID()
+  shipmentId!: string;
+
+  @IsUUID()
+  containerId!: string;
+
+  @IsOptional()
+  @IsUUID()
+  cargoTypeId?: string;
+
+  @IsOptional()
+  @IsString()
+  description?: string;
+
+  @IsNumber()
+  @Min(0.001)
+  quantity!: number;
+
+  @IsNumber()
+  @Min(0)
+  weight!: number;
+
+  @IsOptional()
+  @IsNumber()
+  @Min(0)
+  volume?: number;
+
+  @IsOptional()
+  @IsIn(['PENDING', 'LOADED', 'IN_TRANSIT', 'DELIVERED', 'UNLOADED'])
+  status?: string;
+
+  @IsOptional()
+  @IsDateString()
+  loadedAt?: string;
+
+  @IsOptional()
+  @IsDateString()
+  unloadedAt?: string;
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/cargoes/dto/deliver-cargo.dto.ts b/apps/edr-freight-api/src/modules/cargoes/dto/deliver-cargo.dto.ts
new file mode 100644
index 000000000..020e4d630
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/cargoes/dto/deliver-cargo.dto.ts
@@ -0,0 +1,7 @@
+import { IsOptional, IsString } from 'class-validator';
+
+export class DeliverCargoDto {
+  @IsOptional()
+  @IsString()
+  deliveryRemarks?: string;
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/cargoes/dto/load-cargo.dto.ts b/apps/edr-freight-api/src/modules/cargoes/dto/load-cargo.dto.ts
new file mode 100644
index 000000000..9e8573751
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/cargoes/dto/load-cargo.dto.ts
@@ -0,0 +1,20 @@
+import { IsNumber, Min, IsOptional, IsString } from 'class-validator';
+
+export class LoadCargoDto {
+  @IsNumber()
+  @Min(0.001)
+  quantity!: number;
+
+  @IsNumber()
+  @Min(0)
+  weight!: number;
+
+  @IsOptional()
+  @IsNumber()
+  @Min(0)
+  volume?: number;
+
+  @IsOptional()
+  @IsString()
+  description?: string;
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/cargoes/dto/unload-cargo.dto.ts b/apps/edr-freight-api/src/modules/cargoes/dto/unload-cargo.dto.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/edr-freight-api/src/modules/cargoes/dto/update-cargo.dto.ts b/apps/edr-freight-api/src/modules/cargoes/dto/update-cargo.dto.ts
new file mode 100644
index 000000000..7596b7dbe
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/cargoes/dto/update-cargo.dto.ts
@@ -0,0 +1,4 @@
+import { PartialType } from '@nestjs/swagger';
+import { CreateCargoDto } from './create-cargo.dto';
+
+export class UpdateCargoDto extends PartialType(CreateCargoDto) {}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/cargoes/entities/cargoes.entity.ts b/apps/edr-freight-api/src/modules/cargoes/entities/cargoes.entity.ts
new file mode 100644
index 000000000..7c2f752e5
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/cargoes/entities/cargoes.entity.ts
@@ -0,0 +1,45 @@
+// apps/edr-freight-api/src/modules/cargoes/entities/cargo.entity.ts
+import { Entity, Column, ManyToOne, JoinColumn } from 'typeorm';
+import { BaseEntity } from '@edr/api-common';
+import { Container } from '../../container-management/entities/container.entity';
+
+@Entity({ name: 'cargoes', schema: 'freight' })
+export class Cargo extends BaseEntity {
+  @Column({ unique: true, name: 'cargo_reference' })
+  cargoReference!: string;
+
+  @Column({ name: 'shipment_id', type: 'uuid' })
+  shipmentId!: string;
+
+  @Column({ name: 'container_id', type: 'uuid' })
+  containerId!: string;
+
+  @Column({ name: 'cargo_type_id', type: 'uuid', nullable: true })
+  cargoTypeId!: string | null; // optional link to cargo_types table
+
+  @Column({ type: 'text', nullable: true })
+  description!: string | null;
+
+  @Column({ type: 'decimal', precision: 12, scale: 3 })
+  quantity!: number;
+
+  @Column({ type: 'decimal', precision: 10, scale: 2 })
+  weight!: number; // kg
+
+  @Column({ type: 'decimal', precision: 10, scale: 2, nullable: true })
+  volume!: number | null; // m³
+
+  @Column({ type: 'varchar', default: 'PENDING' })
+  status!: string; // PENDING, LOADED, IN_TRANSIT, DELIVERED, UNLOADED
+
+  @Column({ name: 'loaded_at', type: 'timestamp', nullable: true })
+  loadedAt!: Date | null;
+
+  @Column({ name: 'unloaded_at', type: 'timestamp', nullable: true })
+  unloadedAt!: Date | null;
+
+  // Relationship to Container
+  @ManyToOne(() => Container, (container) => container.cargoes, { onDelete: 'RESTRICT' })
+  @JoinColumn({ name: 'container_id' })
+  container!: Container;
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/companies/companies.controller.ts b/apps/edr-freight-api/src/modules/companies/companies.controller.ts
index 5c646279e..b1481d0d4 100644
--- a/apps/edr-freight-api/src/modules/companies/companies.controller.ts
+++ b/apps/edr-freight-api/src/modules/companies/companies.controller.ts
@@ -1,6 +1,8 @@
-import { Controller, Get, Post, Patch, Delete, Body, Param, Query, ParseUUIDPipe, HttpCode, HttpStatus } from '@nestjs/common';
-import { ApiOperation, ApiTags } from '@nestjs/swagger';
+import { Controller, Get, Post, Patch, Delete, Body, Param, Query, ParseUUIDPipe, HttpCode, HttpStatus, UseInterceptors, UploadedFiles } from '@nestjs/common';
+import { AnyFilesInterceptor } from '@nestjs/platform-express';
+import { ApiOperation, ApiTags, ApiConsumes } from '@nestjs/swagger';
 import { CurrentUser } from '@edr/api-common';
+import { FilesService } from '../files/files.service';
 import { CompaniesService } from './companies.service';
 import { CreateCompanyDto } from './dto/create-company.dto';
 import { UpdateCompanyDto } from './dto/update-company.dto';
@@ -11,6 +13,8 @@ import { ResponseCompanyDto } from './dto/response-company.dto';
 import { ResponseExternalProfileDto } from './dto/response-external-profile.dto';
 import { ResponseFFClientDto } from './dto/response-ff-client.dto';
 import { CompanyInfoResponseDto } from './dto/company-info-response.dto';
+import { UpdateProfileDto } from './dto/update-profile.dto';
+import { ProfileResponseDto } from './dto/profile-response.dto';
 
 interface CurrentIamUser {
   id: string;
@@ -22,7 +26,10 @@ interface CurrentIamUser {
 @ApiTags('Companies')
 @Controller('companies')
 export class CompaniesController {
-  constructor(private readonly companiesService: CompaniesService) {}
+  constructor(
+    private readonly companiesService: CompaniesService,
+    private readonly filesService: FilesService,
+  ) {}
 
   @Get('getInfo')
   @ApiOperation({ summary: 'Get company info for the current user' })
@@ -31,6 +38,22 @@ export class CompaniesController {
     return new CompanyInfoResponseDto(profile, company);
   }
 
+  @Get('profile')
+  @ApiOperation({ summary: 'Get flattened profile for the settings page' })
+  async getProfile(@CurrentUser() user: CurrentIamUser): Promise<ProfileResponseDto> {
+    const { profile, company } = await this.companiesService.getCompanyInfoByUserId(user.id);
+    return new ProfileResponseDto(profile, company);
+  }
+
+  @Patch('profile')
+  @ApiOperation({ summary: 'Update profile (flattened settings page)' })
+  async updateProfile(
+    @CurrentUser() user: CurrentIamUser,
+    @Body() dto: UpdateProfileDto,
+  ): Promise<ProfileResponseDto> {
+    return this.companiesService.updateProfile(user.id, dto);
+  }
+
   @Post('create')
   @ApiOperation({ summary: 'Create a company with its associated external profile (onboarding)' })
   async createWithProfile(
@@ -105,6 +128,17 @@ export class CompaniesController {
     await this.companiesService.deleteCompany(id);
   }
 
+  @Post(':companyId/documents')
+  @UseInterceptors(AnyFilesInterceptor())
+  @ApiConsumes('multipart/form-data')
+  @ApiOperation({ summary: 'Upload documents for a company (onboarding)' })
+  async uploadDocuments(
+    @Param('companyId', ParseUUIDPipe) companyId: string,
+    @UploadedFiles() files: Array<Express.Multer.File>,
+  ) {
+    return this.filesService.uploadMany(companyId, 'companies', files);
+  }
+
   @Post(':companyId/profiles')
   @ApiOperation({ summary: 'Add a profile (employee) to a company' })
   async createProfile(
diff --git a/apps/edr-freight-api/src/modules/companies/companies.module.ts b/apps/edr-freight-api/src/modules/companies/companies.module.ts
index 8fac2f901..d18573460 100644
--- a/apps/edr-freight-api/src/modules/companies/companies.module.ts
+++ b/apps/edr-freight-api/src/modules/companies/companies.module.ts
@@ -1,5 +1,6 @@
 import { Module } from '@nestjs/common';
 import { TypeOrmModule } from '@nestjs/typeorm';
+import { FilesModule } from '../files/files.module';
 import { CompaniesController } from './companies.controller';
 import { CompaniesService } from './companies.service';
 import { CompaniesRepository } from './companies.repository';
@@ -10,7 +11,7 @@ import { ExternalProfile } from './entities/external-profile.entity';
 import { FFClient } from './entities/ff-client.entity';
 
 @Module({
-  imports: [TypeOrmModule.forFeature([Company, ExternalProfile, FFClient])],
+  imports: [TypeOrmModule.forFeature([Company, ExternalProfile, FFClient]), FilesModule],
   controllers: [CompaniesController],
   providers: [CompaniesService, CompaniesRepository, ExternalProfileRepository, FFClientRepository],
   exports: [CompaniesService],
diff --git a/apps/edr-freight-api/src/modules/companies/companies.service.ts b/apps/edr-freight-api/src/modules/companies/companies.service.ts
index 03c104798..f383b9e55 100644
--- a/apps/edr-freight-api/src/modules/companies/companies.service.ts
+++ b/apps/edr-freight-api/src/modules/companies/companies.service.ts
@@ -7,6 +7,8 @@ import { UpdateCompanyDto } from './dto/update-company.dto';
 import { CreateExternalProfileDto } from './dto/create-external-profile.dto';
 import { CreateFFClientDto } from './dto/create-ff-client.dto';
 import { CreateCompanyWithProfileDto } from './dto/create-company-with-profile.dto';
+import { UpdateProfileDto } from './dto/update-profile.dto';
+import { ProfileResponseDto } from './dto/profile-response.dto';
 import { Company } from './entities/company.entity';
 import { ExternalProfile } from './entities/external-profile.entity';
 import { FFClient } from './entities/ff-client.entity';
@@ -103,6 +105,42 @@ export class CompaniesService {
     return updated;
   }
 
+  async updateProfile(userId: string, dto: UpdateProfileDto): Promise<ProfileResponseDto> {
+    const { profile, company } = await this.getCompanyInfoByUserId(userId);
+
+    const companyUpdates: Record<string, any> = {};
+    const attrUpdates: Record<string, any> = { ...(company.attributes ?? {}) };
+
+    if (dto.companyName !== undefined) companyUpdates.name = dto.companyName;
+    if (dto.companyEmail !== undefined) companyUpdates.email = dto.companyEmail;
+    if (dto.companyPhone !== undefined) companyUpdates.phone = dto.companyPhone;
+    if (dto.companyLocation !== undefined) companyUpdates.country = dto.companyLocation;
+    if (dto.companyAddress !== undefined) companyUpdates.address = dto.companyAddress;
+    if (dto.tin !== undefined) companyUpdates.tin = dto.tin;
+    if (dto.vatNumber !== undefined) companyUpdates.vatNumber = dto.vatNumber;
+    if (dto.fanNumber !== undefined) {
+      companyUpdates.businessLicense = dto.fanNumber;
+      companyUpdates.fanNumber = dto.fanNumber;
+    }
+
+    if (dto.contactPersonName !== undefined) attrUpdates.contactPersonName = dto.contactPersonName;
+    if (dto.contactPersonPhone !== undefined) attrUpdates.contactPersonPhone = dto.contactPersonPhone;
+    if (dto.generalManagerName !== undefined) attrUpdates.generalManagerName = dto.generalManagerName;
+    if (dto.generalManagerEmail !== undefined) attrUpdates.generalManagerEmail = dto.generalManagerEmail;
+    if (dto.generalManagerPhone !== undefined) attrUpdates.generalManagerPhone = dto.generalManagerPhone;
+    if (dto.poaName !== undefined) attrUpdates.poaName = dto.poaName;
+    if (dto.poaPhone !== undefined) attrUpdates.poaPhone = dto.poaPhone;
+    if (dto.poaEmail !== undefined) attrUpdates.poaEmail = dto.poaEmail;
+    if (dto.poaLocation !== undefined) attrUpdates.poaLocation = dto.poaLocation;
+    if (dto.poaAddress !== undefined) attrUpdates.poaAddress = dto.poaAddress;
+
+    companyUpdates.attributes = attrUpdates;
+
+    const updated = await this.companiesRepo.update(company.id, companyUpdates);
+    if (!updated) throw new NotFoundException(`Company ${company.id} not found`);
+    return new ProfileResponseDto(profile, updated);
+  }
+
   async deleteCompany(id: string): Promise<void> {
     await this.findCompanyById(id);
     await this.companiesRepo.softDelete(id);
diff --git a/apps/edr-freight-api/src/modules/companies/dto/profile-response.dto.ts b/apps/edr-freight-api/src/modules/companies/dto/profile-response.dto.ts
new file mode 100644
index 000000000..ee8ede34f
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/companies/dto/profile-response.dto.ts
@@ -0,0 +1,53 @@
+import { Company } from '../entities/company.entity';
+import { ExternalProfile } from '../entities/external-profile.entity';
+
+export class ProfileResponseDto {
+  companyId: string;
+  companyName: string;
+  companyEmail: string | null;
+  companyPhone: string | null;
+  companyLocation: string;
+  companyAddress: string | null;
+  tinNumber: string;
+  vatNumber: string | null;
+  fanNumber: string | null;
+
+  contactPersonName: string | null;
+  contactPersonPhone: string | null;
+  generalManagerName: string | null;
+  generalManagerEmail: string | null;
+  generalManagerPhone: string | null;
+
+  poaName: string | null;
+  poaPhone: string | null;
+  poaEmail: string | null;
+  poaLocation: string | null;
+  poaAddress: string | null;
+
+  profileId: string;
+
+  constructor(profile: ExternalProfile, company: Company) {
+    this.companyId = company.id;
+    this.companyName = company.name;
+    this.companyEmail = company.email ?? null;
+    this.companyPhone = company.phone ?? null;
+    this.companyLocation = company.country;
+    this.companyAddress = company.address ?? null;
+    this.tinNumber = company.tin;
+    this.vatNumber = company.vatNumber ?? null;
+    this.fanNumber = company.fanNumber ?? null;
+    this.profileId = profile.id;
+
+    const attrs = company.attributes ?? {};
+    this.contactPersonName = attrs.contactPersonName ?? null;
+    this.contactPersonPhone = attrs.contactPersonPhone ?? null;
+    this.generalManagerName = attrs.generalManagerName ?? null;
+    this.generalManagerEmail = attrs.generalManagerEmail ?? null;
+    this.generalManagerPhone = attrs.generalManagerPhone ?? null;
+    this.poaName = attrs.poaName ?? null;
+    this.poaPhone = attrs.poaPhone ?? null;
+    this.poaEmail = attrs.poaEmail ?? null;
+    this.poaLocation = attrs.poaLocation ?? null;
+    this.poaAddress = attrs.poaAddress ?? null;
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/companies/dto/update-profile.dto.ts b/apps/edr-freight-api/src/modules/companies/dto/update-profile.dto.ts
new file mode 100644
index 000000000..0acdf60a1
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/companies/dto/update-profile.dto.ts
@@ -0,0 +1,83 @@
+import { IsString, IsOptional, IsEmail, MaxLength, Length, Matches } from 'class-validator';
+
+export class UpdateProfileDto {
+  @IsOptional()
+  @IsString()
+  @MaxLength(200)
+  companyName?: string;
+
+  @IsOptional()
+  @IsEmail()
+  @MaxLength(150)
+  companyEmail?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(20)
+  companyPhone?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(32)
+  companyLocation?: string;
+
+  @IsOptional()
+  @IsString()
+  companyAddress?: string;
+
+  @IsOptional()
+  @IsString()
+  @Length(10, 10)
+  @Matches(/^\d+$/, { message: 'TIN must contain only digits' })
+  tin?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(50)
+  vatNumber?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(16)
+  fanNumber?: string;
+
+  @IsOptional()
+  @IsString()
+  contactPersonName?: string;
+
+  @IsOptional()
+  @IsString()
+  contactPersonPhone?: string;
+
+  @IsOptional()
+  @IsString()
+  generalManagerName?: string;
+
+  @IsOptional()
+  @IsEmail()
+  generalManagerEmail?: string;
+
+  @IsOptional()
+  @IsString()
+  generalManagerPhone?: string;
+
+  @IsOptional()
+  @IsString()
+  poaName?: string;
+
+  @IsOptional()
+  @IsString()
+  poaPhone?: string;
+
+  @IsOptional()
+  @IsEmail()
+  poaEmail?: string;
+
+  @IsOptional()
+  @IsString()
+  poaLocation?: string;
+
+  @IsOptional()
+  @IsString()
+  poaAddress?: string;
+}
diff --git a/apps/edr-freight-api/src/modules/container-management/containers.controller.ts b/apps/edr-freight-api/src/modules/container-management/containers.controller.ts
new file mode 100644
index 000000000..78759d9b4
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/container-management/containers.controller.ts
@@ -0,0 +1,63 @@
+import {
+  Body,
+  Controller,
+  Delete,
+  Get,
+  Param,
+  ParseUUIDPipe,
+  Patch,
+  Post,
+} from '@nestjs/common';
+import { ApiOperation, ApiTags } from '@nestjs/swagger';
+import { CreateContainerDto } from './dto/create-container.dto';
+import { UpdateContainerDto } from './dto/update-container.dto';
+import { AssignContainerToWagonDto } from './dto/assign-container-to-wagon.dto';
+import { ContainersService } from './containers.service';
+
+@ApiTags('containers')
+@Controller('containers')
+export class ContainersController {
+  constructor(private readonly containersService: ContainersService) {}
+
+  @Post()
+  @ApiOperation({ summary: 'Create a new container' })
+  create(@Body() dto: CreateContainerDto) {
+    return this.containersService.create(dto);
+  }
+
+  @Get()
+  @ApiOperation({ summary: 'List all containers' })
+  findAll() {
+    return this.containersService.findAll();
+  }
+
+  @Get(':id')
+  @ApiOperation({ summary: 'Get a container by ID' })
+  findOne(@Param('id', ParseUUIDPipe) id: string) {
+    return this.containersService.findById(id);
+  }
+
+  @Patch(':id')
+  @ApiOperation({ summary: 'Update a container' })
+  update(@Param('id', ParseUUIDPipe) id: string, @Body() dto: UpdateContainerDto) {
+    return this.containersService.update(id, dto);
+  }
+
+  @Delete(':id')
+  @ApiOperation({ summary: 'Delete a container' })
+  remove(@Param('id', ParseUUIDPipe) id: string) {
+    return this.containersService.remove(id);
+  }
+
+  @Post(':id/assign-wagon')
+  @ApiOperation({ summary: 'Assign container to a wagon' })
+  assignToWagon(@Param('id', ParseUUIDPipe) id: string, @Body() dto: AssignContainerToWagonDto) {
+    return this.containersService.assignToWagon(id, dto);
+  }
+
+  @Post(':id/unassign-wagon')
+  @ApiOperation({ summary: 'Unassign container from wagon' })
+  unassignFromWagon(@Param('id', ParseUUIDPipe) id: string) {
+    return this.containersService.unassignFromWagon(id);
+  }
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/container-management/containers.module.ts b/apps/edr-freight-api/src/modules/container-management/containers.module.ts
new file mode 100644
index 000000000..eea118187
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/container-management/containers.module.ts
@@ -0,0 +1,14 @@
+// apps/edr-freight-api/src/modules/container-management/containers.module.ts
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { Container } from './entities/container.entity';
+import { Wagon } from '../wagons/entities/wagon.entity';
+import { ContainersController } from './containers.controller';
+import { ContainersService } from './containers.service';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([Container, Wagon])],   // ✅ add Wagon
+  controllers: [ContainersController],
+  providers: [ContainersService],
+})
+export class ContainersModule {}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/container-management/containers.repository.ts b/apps/edr-freight-api/src/modules/container-management/containers.repository.ts
new file mode 100644
index 000000000..c6842cdea
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/container-management/containers.repository.ts
@@ -0,0 +1,15 @@
+import { BaseRepository } from '@edr/api-common';
+import { Injectable } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { Container } from './entities/container.entity';
+
+@Injectable()
+export class ContainersRepository extends BaseRepository<Container> {
+  constructor(
+    @InjectRepository(Container)
+    repository: Repository<Container>,
+  ) {
+    super(repository);
+  }
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/container-management/containers.service copy.ts b/apps/edr-freight-api/src/modules/container-management/containers.service copy.ts
new file mode 100644
index 000000000..f6094a497
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/container-management/containers.service copy.ts	
@@ -0,0 +1,86 @@
+import { Injectable, NotFoundException, ConflictException } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { CreateContainerDto } from './dto/create-container.dto';
+import { UpdateContainerDto } from './dto/update-container.dto';
+import { AssignContainerToWagonDto } from './dto/assign-container-to-wagon.dto';
+import { Container } from './entities/container.entity';
+//import { ContainersRepository } from './containers.repository';
+import { WagonsRepository } from '../wagons/wagons.repository';
+
+@Injectable()
+export class ContainersService {
+  constructor(
+    @InjectRepository(Container)
+    private readonly containerRepo: Repository<Container>,
+    private readonly wagonsRepository: WagonsRepository,
+  ) {}
+
+  async create(dto: CreateContainerDto): Promise<Container> {
+    const container = this.containerRepo.create(dto);
+    // Convert undefined to null for optional fields
+    if (dto.wagonId === undefined) container.wagonId = null;
+    if (dto.position === undefined) container.position = null;
+    return this.containerRepo.save(container);
+  }
+
+  async findAll(): Promise<Container[]> {
+    return this.containerRepo.find({ order: { containerNumber: 'ASC' } });
+  }
+
+  async findById(id: string): Promise<Container> {
+    const container = await this.containerRepo.findOne({ where: { id } });
+    if (!container) throw new NotFoundException(`Container ${id} not found`);
+    return container;
+  }
+
+  async update(id: string, dto: UpdateContainerDto): Promise<Container> {
+    const container = await this.findById(id);
+    Object.assign(container, dto);
+    // Convert undefined to null for nullable fields
+    if (dto.wagonId === undefined) container.wagonId = null;
+    if (dto.position === undefined) container.position = null;
+    return this.containerRepo.save(container);
+  }
+
+  async remove(id: string): Promise<void> {
+    const container = await this.findById(id);
+    await this.containerRepo.remove(container);
+  }
+
+  async assignToWagon(containerId: string, dto: AssignContainerToWagonDto): Promise<Container> {
+    const container = await this.findById(containerId);
+    if (container.status === 'LOADED') {
+      throw new ConflictException('Cannot reassign a loaded container');
+    }
+
+    const wagon = await this.wagonsRepository.findById(dto.wagonId);
+    if (!wagon) throw new NotFoundException('Wagon not found');
+
+    let position: number | null = dto.position ?? null; // convert undefined to null
+    if (position === null) {
+      const maxPos = await this.containerRepo
+        .createQueryBuilder('c')
+        .select('MAX(c.position)', 'max')
+        .where('c.wagonId = :wagonId', { wagonId: wagon.id })
+        .getRawOne();
+      position = (maxPos?.max ?? 0) + 1;
+    }
+
+    container.wagonId = wagon.id;
+    container.position = position; // now position is number | null, safe
+    container.status = 'AVAILABLE';
+    return this.containerRepo.save(container);
+  }
+
+  async unassignFromWagon(containerId: string): Promise<Container> {
+    const container = await this.findById(containerId);
+    if (container.status === 'LOADED') {
+      throw new ConflictException('Cannot unassign a loaded container');
+    }
+    container.wagonId = null;
+    container.position = null;
+    container.status = 'AVAILABLE';
+    return this.containerRepo.save(container);
+  }
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/container-management/containers.service.ts b/apps/edr-freight-api/src/modules/container-management/containers.service.ts
new file mode 100644
index 000000000..39f2d8274
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/container-management/containers.service.ts
@@ -0,0 +1,85 @@
+// apps/edr-freight-api/src/modules/container-management/containers.service.ts
+import { Injectable, NotFoundException, ConflictException } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { CreateContainerDto } from './dto/create-container.dto';
+import { UpdateContainerDto } from './dto/update-container.dto';
+import { AssignContainerToWagonDto } from './dto/assign-container-to-wagon.dto';
+import { Container } from './entities/container.entity';
+import { Wagon } from '../wagons/entities/wagon.entity';
+
+@Injectable()
+export class ContainersService {
+  constructor(
+    @InjectRepository(Container)
+    private readonly containerRepo: Repository<Container>,
+    @InjectRepository(Wagon)
+    private readonly wagonRepo: Repository<Wagon>,   // ✅ use raw repository
+  ) {}
+
+  async create(dto: CreateContainerDto): Promise<Container> {
+    const container = this.containerRepo.create(dto);
+    if (dto.wagonId === undefined) container.wagonId = null;
+    if (dto.position === undefined) container.position = null;
+    return this.containerRepo.save(container);
+  }
+
+  async findAll(): Promise<Container[]> {
+    return this.containerRepo.find({ order: { containerNumber: 'ASC' } });
+  }
+
+  async findById(id: string): Promise<Container> {
+    const container = await this.containerRepo.findOne({ where: { id } });
+    if (!container) throw new NotFoundException(`Container ${id} not found`);
+    return container;
+  }
+
+  async update(id: string, dto: UpdateContainerDto): Promise<Container> {
+    const container = await this.findById(id);
+    Object.assign(container, dto);
+    if (dto.wagonId === undefined) container.wagonId = null;
+    if (dto.position === undefined) container.position = null;
+    return this.containerRepo.save(container);
+  }
+
+  async remove(id: string): Promise<void> {
+    const container = await this.findById(id);
+    await this.containerRepo.remove(container);
+  }
+
+  async assignToWagon(containerId: string, dto: AssignContainerToWagonDto): Promise<Container> {
+    const container = await this.findById(containerId);
+    if (container.status === 'LOADED') {
+      throw new ConflictException('Cannot reassign a loaded container');
+    }
+
+    const wagon = await this.wagonRepo.findOne({ where: { id: dto.wagonId } });
+    if (!wagon) throw new NotFoundException(`Wagon ${dto.wagonId} not found`);
+
+    let position: number | null = dto.position ?? null;
+    if (position === null) {
+      const maxPos = await this.containerRepo
+        .createQueryBuilder('c')
+        .select('MAX(c.position)', 'max')
+        .where('c.wagonId = :wagonId', { wagonId: wagon.id })
+        .getRawOne();
+      position = (maxPos?.max ?? 0) + 1;
+    }
+
+    container.wagonId = wagon.id;
+    container.position = position;
+    container.status = 'AVAILABLE';
+    return this.containerRepo.save(container);
+  }
+
+  async unassignFromWagon(containerId: string): Promise<Container> {
+    const container = await this.findById(containerId);
+    if (container.status === 'LOADED') {
+      throw new ConflictException('Cannot unassign a loaded container');
+    }
+    container.wagonId = null;
+    container.position = null;
+    container.status = 'AVAILABLE';
+    return this.containerRepo.save(container);
+  }
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/container-management/dto/assign-container-to-wagon.dto.ts b/apps/edr-freight-api/src/modules/container-management/dto/assign-container-to-wagon.dto.ts
new file mode 100644
index 000000000..3b7be1d9e
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/container-management/dto/assign-container-to-wagon.dto.ts
@@ -0,0 +1,11 @@
+import { IsUUID, IsOptional, IsInt, Min } from 'class-validator';
+
+export class AssignContainerToWagonDto {
+  @IsUUID()
+  wagonId!: string;
+
+  @IsOptional()
+  @IsInt()
+  @Min(1)
+  position?: number;
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/container-management/dto/create-container.dto.ts b/apps/edr-freight-api/src/modules/container-management/dto/create-container.dto.ts
new file mode 100644
index 000000000..1efed1cc9
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/container-management/dto/create-container.dto.ts
@@ -0,0 +1,34 @@
+import { IsString, IsUUID, IsOptional, IsInt, Min, IsNumber, IsIn } from 'class-validator';
+
+export class CreateContainerDto {
+  @IsString()
+  containerNumber!: string;
+
+  @IsUUID()
+  containerTypeId!: string;
+
+  @IsOptional()
+  @IsUUID()
+  wagonId?: string;
+
+  @IsOptional()
+  @IsInt()
+  @Min(1)
+  position?: number;
+
+  @IsNumber()
+  @Min(0)
+  tareWeight!: number;
+
+  @IsNumber()
+  @Min(0)
+  maxGrossWeight!: number;
+
+  @IsOptional()
+  @IsString()
+  sealNumber?: string;
+
+  @IsOptional()
+  @IsIn(['AVAILABLE', 'LOADED', 'IN_TRANSIT', 'MAINTENANCE', 'DAMAGED'])
+  status?: string;
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/container-management/dto/update-container.dto.ts b/apps/edr-freight-api/src/modules/container-management/dto/update-container.dto.ts
new file mode 100644
index 000000000..7391bc642
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/container-management/dto/update-container.dto.ts
@@ -0,0 +1,4 @@
+import { PartialType } from '@nestjs/swagger';
+import { CreateContainerDto } from './create-container.dto';
+
+export class UpdateContainerDto extends PartialType(CreateContainerDto) {}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/container-management/entities/container.entity.ts b/apps/edr-freight-api/src/modules/container-management/entities/container.entity.ts
new file mode 100644
index 000000000..a5c7ee9c1
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/container-management/entities/container.entity.ts
@@ -0,0 +1,45 @@
+// apps/edr-freight-api/src/modules/container-management/entities/container.entity.ts
+import { Entity, Column, ManyToOne, OneToMany, JoinColumn } from 'typeorm';
+import { BaseEntity } from '@edr/api-common';
+import { Wagon } from '../../wagons/entities/wagon.entity';
+import { Cargo } from '../../cargoes/entities/cargoes.entity';
+
+@Entity({ name: 'containers', schema: 'freight' })
+export class Container extends BaseEntity {
+  @Column({ unique: true, name: 'container_number' })
+  containerNumber!: string;
+
+  @Column({ name: 'container_type_id', type: 'uuid' })
+  containerTypeId!: string;
+
+  @Column({ name: 'wagon_id', type: 'uuid', nullable: true })
+  wagonId!: string | null;
+
+  @Column({ type: 'int', nullable: true })
+  position!: number | null; // position on the wagon (1..N)
+
+  @Column({ name: 'tare_weight', type: 'decimal', precision: 10, scale: 2 })
+  tareWeight!: number;
+
+  @Column({ name: 'max_gross_weight', type: 'decimal', precision: 10, scale: 2 })
+  maxGrossWeight!: number;
+
+  @Column({
+  name: 'seal_number',
+  type: 'varchar',
+  nullable: true,
+})
+sealNumber!: string | null;
+
+  @Column({ type: 'varchar', default: 'AVAILABLE' })
+  status!: string; // AVAILABLE, LOADED, IN_TRANSIT, MAINTENANCE, DAMAGED
+
+  // Relationship to Wagon
+  @ManyToOne(() => Wagon, (wagon) => wagon.containers, { onDelete: 'SET NULL' })
+  @JoinColumn({ name: 'wagon_id' })
+  wagon!: Wagon | null;
+
+  // Relationship to Cargo
+  @OneToMany(() => Cargo, (cargo) => cargo.container)
+  cargoes!: Cargo[];
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/files/files.repository.ts b/apps/edr-freight-api/src/modules/files/files.repository.ts
index 2ec2b94a2..ea4bfd19e 100644
--- a/apps/edr-freight-api/src/modules/files/files.repository.ts
+++ b/apps/edr-freight-api/src/modules/files/files.repository.ts
@@ -25,4 +25,12 @@ export class FilesRepository extends BaseRepository<FileRecord> {
   ): Promise<FileRecord | null> {
     return this.repository.findOne({ where: { resourceId, resource, code } });
   }
+
+  async deleteByCode(
+    resourceId: string,
+    resource: string,
+    code: string,
+  ): Promise<void> {
+    await this.repository.delete({ resourceId, resource, code });
+  }
 }
diff --git a/apps/edr-freight-api/src/modules/files/files.service.ts b/apps/edr-freight-api/src/modules/files/files.service.ts
index e08fce72b..97a5e9e34 100644
--- a/apps/edr-freight-api/src/modules/files/files.service.ts
+++ b/apps/edr-freight-api/src/modules/files/files.service.ts
@@ -35,6 +35,13 @@ export class FilesService {
     });
   }
 
+  /** Replace existing file row for the same resource + code (e.g. contract PDF). */
+  async upsertByCode(input: CreateFileInput): Promise<FileRecord> {
+    const { resourceId, resource, code } = input;
+    await this.filesRepository.deleteByCode(resourceId, resource, code);
+    return this.upload(input);
+  }
+
   async uploadMany(
     resourceId: string,
     resource: string,
@@ -72,13 +79,8 @@ export class FilesService {
 
   async streamById(id: string): Promise<{ stream: Readable; record: FileRecord }> {
     const record = await this.findById(id);
-    const objectName = this.extractObjectName(record.url);
+    const objectName = this.minioService.getObjectNameFromUrl(record.url);
     const stream = await this.minioService.getFileStream(objectName);
     return { stream, record };
   }
-
-  private extractObjectName(url: string): string {
-    const parts = url.split("/");
-    return parts.slice(4).join("/");
-  }
 }
diff --git a/apps/edr-freight-api/src/modules/locomotives/dto/filter-locomotives.dto.ts b/apps/edr-freight-api/src/modules/locomotives/dto/filter-locomotives.dto.ts
new file mode 100644
index 000000000..3ee26beb9
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/locomotives/dto/filter-locomotives.dto.ts
@@ -0,0 +1,11 @@
+import { ApiPropertyOptional } from '@nestjs/swagger';
+import { IsIn, IsOptional } from 'class-validator';
+
+import { LOCOMOTIVE_STATUSES } from '../entities/locomotive.entity';
+
+export class FilterLocomotivesDto {
+  @ApiPropertyOptional({ enum: LOCOMOTIVE_STATUSES })
+  @IsOptional()
+  @IsIn([...LOCOMOTIVE_STATUSES])
+  status?: string;
+}
diff --git a/apps/edr-freight-api/src/modules/locomotives/entities/locomotive.entity.ts b/apps/edr-freight-api/src/modules/locomotives/entities/locomotive.entity.ts
new file mode 100644
index 000000000..1676674b1
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/locomotives/entities/locomotive.entity.ts
@@ -0,0 +1,36 @@
+import { BaseEntity } from '@edr/api-common';
+import { Column, Entity, Index, OneToMany } from 'typeorm';
+
+import { TrainSet } from '../../train-sets/entities/train-set.entity';
+
+export const LOCOMOTIVE_STATUSES = [
+  'AVAILABLE',
+  'ASSIGNED',
+  'MAINTENANCE',
+  'INACTIVE',
+] as const;
+
+export type LocomotiveStatus = (typeof LOCOMOTIVE_STATUSES)[number];
+
+@Entity({ schema: 'freight', name: 'locomotives' })
+@Index(['code'])
+@Index(['status'])
+export class Locomotive extends BaseEntity {
+  @Column({ name: 'code', type: 'varchar', length: 32, unique: true })
+  code!: string;
+
+  @Column({ name: 'name', type: 'varchar', length: 100, nullable: true })
+  name?: string | null;
+
+  @Column({ name: 'max_pull_weight_tons', type: 'numeric', precision: 10, scale: 3 })
+  maxPullWeightTons!: number;
+
+  @Column({ name: 'status', type: 'varchar', length: 20, default: 'AVAILABLE' })
+  status!: LocomotiveStatus;
+
+  @Column({ name: 'available_from', type: 'timestamptz', nullable: true })
+  availableFrom?: Date | null;
+
+  @OneToMany(() => TrainSet, (trainSet) => trainSet.locomotive)
+  trainSets?: TrainSet[];
+}
diff --git a/apps/edr-freight-api/src/modules/locomotives/locomotives.controller.ts b/apps/edr-freight-api/src/modules/locomotives/locomotives.controller.ts
new file mode 100644
index 000000000..9e64c1e2b
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/locomotives/locomotives.controller.ts
@@ -0,0 +1,18 @@
+import { Controller, Get, Query } from '@nestjs/common';
+import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
+
+import { FilterLocomotivesDto } from './dto/filter-locomotives.dto';
+import { LocomotivesService } from './locomotives.service';
+
+@ApiTags('locomotives')
+@ApiBearerAuth()
+@Controller('locomotives')
+export class LocomotivesController {
+  constructor(private readonly locomotivesService: LocomotivesService) {}
+
+  @Get()
+  @ApiOperation({ summary: 'List locomotives' })
+  findAll(@Query() filter: FilterLocomotivesDto) {
+    return this.locomotivesService.findAll(filter);
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/locomotives/locomotives.module.ts b/apps/edr-freight-api/src/modules/locomotives/locomotives.module.ts
new file mode 100644
index 000000000..264b9cb44
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/locomotives/locomotives.module.ts
@@ -0,0 +1,15 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+
+import { LocomotivesController } from './locomotives.controller';
+import { Locomotive } from './entities/locomotive.entity';
+import { LocomotivesRepository } from './locomotives.repository';
+import { LocomotivesService } from './locomotives.service';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([Locomotive])],
+  controllers: [LocomotivesController],
+  providers: [LocomotivesRepository, LocomotivesService],
+  exports: [LocomotivesRepository, LocomotivesService],
+})
+export class LocomotivesModule {}
diff --git a/apps/edr-freight-api/src/modules/locomotives/locomotives.repository.ts b/apps/edr-freight-api/src/modules/locomotives/locomotives.repository.ts
new file mode 100644
index 000000000..af2a40f50
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/locomotives/locomotives.repository.ts
@@ -0,0 +1,16 @@
+import { BaseRepository } from '@edr/api-common';
+import { Injectable } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+
+import { Locomotive } from './entities/locomotive.entity';
+
+@Injectable()
+export class LocomotivesRepository extends BaseRepository<Locomotive> {
+  constructor(
+    @InjectRepository(Locomotive)
+    repository: Repository<Locomotive>,
+  ) {
+    super(repository);
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/locomotives/locomotives.service.ts b/apps/edr-freight-api/src/modules/locomotives/locomotives.service.ts
new file mode 100644
index 000000000..946a77d48
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/locomotives/locomotives.service.ts
@@ -0,0 +1,29 @@
+import { Injectable, NotFoundException } from '@nestjs/common';
+
+import { FilterLocomotivesDto } from './dto/filter-locomotives.dto';
+import { Locomotive, type LocomotiveStatus } from './entities/locomotive.entity';
+import { LocomotivesRepository } from './locomotives.repository';
+
+@Injectable()
+export class LocomotivesService {
+  constructor(private readonly locomotivesRepository: LocomotivesRepository) {}
+
+  findAll(filter: FilterLocomotivesDto): Promise<Locomotive[]> {
+    return this.locomotivesRepository.findAll({
+      where: filter.status
+        ? { status: filter.status as LocomotiveStatus }
+        : undefined,
+      order: { code: 'ASC' },
+    });
+  }
+
+  async findById(id: string): Promise<Locomotive> {
+    const locomotive = await this.locomotivesRepository.findById(id);
+
+    if (!locomotive) {
+      throw new NotFoundException(`Locomotive ${id} not found`);
+    }
+
+    return locomotive;
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/minio/minio.service.ts b/apps/edr-freight-api/src/modules/minio/minio.service.ts
index 4dba9c66e..9f7a5e65d 100644
--- a/apps/edr-freight-api/src/modules/minio/minio.service.ts
+++ b/apps/edr-freight-api/src/modules/minio/minio.service.ts
@@ -1,4 +1,4 @@
-import { Inject, Injectable, Logger } from "@nestjs/common";
+import { Inject, Injectable, Logger, NotFoundException } from "@nestjs/common";
 import { ConfigType } from "@nestjs/config";
 import { Client } from "minio";
 import { Readable } from "stream";
@@ -54,6 +54,30 @@ export class MinioService {
     return `${protocol}://${this.config.endPoint}:${this.config.port}/${this.bucket}/${objectName}`;
   }
 
+  getObjectNameFromUrl(value: string): string {
+    const trimmed = value.trim();
+    if (!trimmed) {
+      throw new NotFoundException("File object path is empty");
+    }
+
+    if (!/^https?:\/\//i.test(trimmed)) {
+      return trimmed.replace(/^\/+/, "");
+    }
+
+    const url = new URL(trimmed);
+    const parts = url.pathname.split("/").filter(Boolean);
+    if (parts[0] === this.bucket) {
+      parts.shift();
+    }
+
+    const objectName = parts.join("/");
+    if (!objectName) {
+      throw new NotFoundException("File object path is empty");
+    }
+
+    return objectName;
+  }
+
   async deleteFile(objectName: string): Promise<void> {
     try {
       await this.client.removeObject(this.bucket, objectName);
diff --git a/apps/edr-freight-api/src/modules/rule-engine/approval-rules.defaults.ts b/apps/edr-freight-api/src/modules/rule-engine/approval-rules.defaults.ts
new file mode 100644
index 000000000..19fd8c267
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/rule-engine/approval-rules.defaults.ts
@@ -0,0 +1,31 @@
+/** ITMLS US-06 default approval chains — seeded automatically when missing. */
+export const DEFAULT_APPROVAL_RULE_ROWS = [
+  {
+    requiresDirectorApproval: false,
+    stepOrder: 1,
+    requiredRole: 'LINE_STAFF',
+    actionLabel: 'Review & Approve',
+    blocksRole: null as string | null,
+  },
+  {
+    requiresDirectorApproval: false,
+    stepOrder: 2,
+    requiredRole: 'DIRECTOR',
+    actionLabel: 'Final Signature',
+    blocksRole: 'LINE_STAFF',
+  },
+  {
+    requiresDirectorApproval: true,
+    stepOrder: 1,
+    requiredRole: 'DIRECTOR',
+    actionLabel: 'Review & Approve',
+    blocksRole: 'LINE_STAFF',
+  },
+  {
+    requiresDirectorApproval: true,
+    stepOrder: 2,
+    requiredRole: 'CEO',
+    actionLabel: 'Final Signature',
+    blocksRole: null as string | null,
+  },
+] as const;
diff --git a/apps/edr-freight-api/src/modules/rule-engine/controllers/approval-rules.controller.ts b/apps/edr-freight-api/src/modules/rule-engine/controllers/approval-rules.controller.ts
index 3c34cc71b..72e35b296 100644
--- a/apps/edr-freight-api/src/modules/rule-engine/controllers/approval-rules.controller.ts
+++ b/apps/edr-freight-api/src/modules/rule-engine/controllers/approval-rules.controller.ts
@@ -2,6 +2,7 @@ import {
   Body, Controller, Delete, Get, HttpCode, HttpStatus,
   Param, ParseUUIDPipe, Patch, Post, Query,
 } from '@nestjs/common';
+import { RuleEngineManage, RuleEngineView } from '../../../common/rule-engine-guards';
 import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
 import { CreateApprovalRuleDto } from '../dto/create-approval-rule.dto';
 import { UpdateApprovalRuleDto } from '../dto/update-approval-rule.dto';
@@ -9,12 +10,12 @@ import { ApprovalRulesService } from '../services/approval-rules.service';
 
 @ApiTags('approval-rules')
 @Controller('approval-rules')
-// @UseGuards(JwtAuthGuard) — TODO: add when auth package integrated
 @ApiBearerAuth()
 export class ApprovalRulesController {
   constructor(private readonly service: ApprovalRulesService) {}
 
   @Get()
+  @RuleEngineView('approval-rules')
   @ApiOperation({ summary: 'List approval rules' })
   findAll(@Query() query: Record<string, string>) {
     return this.service.findAll({
@@ -28,30 +29,35 @@ export class ApprovalRulesController {
   }
 
   @Get('chain')
+  @RuleEngineView('approval-rules')
   @ApiOperation({ summary: 'Get approval chain for cargo routing flag' })
   findChain(@Query('requiresDirectorApproval') flag: string) {
     return this.service.findChain(flag === 'true');
   }
 
   @Get(':id')
+  @RuleEngineView('approval-rules')
   @ApiOperation({ summary: 'Get an approval rule by ID' })
   findOne(@Param('id', ParseUUIDPipe) id: string) {
     return this.service.findById(id);
   }
 
   @Post()
+  @RuleEngineManage('approval-rules')
   @ApiOperation({ summary: 'Create an approval rule step' })
   create(@Body() dto: CreateApprovalRuleDto) {
     return this.service.create(dto);
   }
 
   @Patch(':id')
+  @RuleEngineManage('approval-rules')
   @ApiOperation({ summary: 'Update an approval rule' })
   update(@Param('id', ParseUUIDPipe) id: string, @Body() dto: UpdateApprovalRuleDto) {
     return this.service.update(id, dto);
   }
 
   @Delete(':id')
+  @RuleEngineManage('approval-rules')
   @HttpCode(HttpStatus.NO_CONTENT)
   @ApiOperation({ summary: 'Soft-delete an approval rule' })
   remove(@Param('id', ParseUUIDPipe) id: string) {
diff --git a/apps/edr-freight-api/src/modules/rule-engine/controllers/cargo-types.controller.ts b/apps/edr-freight-api/src/modules/rule-engine/controllers/cargo-types.controller.ts
index de855c7ef..4941a5ebb 100644
--- a/apps/edr-freight-api/src/modules/rule-engine/controllers/cargo-types.controller.ts
+++ b/apps/edr-freight-api/src/modules/rule-engine/controllers/cargo-types.controller.ts
@@ -3,18 +3,19 @@ import {
   Param, ParseUUIDPipe, Patch, Post, Query,
 } from '@nestjs/common';
 import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
+import { RuleEngineManage, RuleEngineView } from '../../../common/rule-engine-guards';
 import { CreateCargoTypeDto } from '../dto/create-cargo-type.dto';
 import { UpdateCargoTypeDto } from '../dto/update-cargo-type.dto';
 import { CargoTypesService } from '../services/cargo-types.service';
 
 @ApiTags('cargo-types')
 @Controller('cargo-types')
-// @UseGuards(JwtAuthGuard) — TODO: add when auth package integrated
 @ApiBearerAuth()
 export class CargoTypesController {
   constructor(private readonly service: CargoTypesService) {}
 
   @Get()
+  @RuleEngineView('cargo-types')
   @ApiOperation({ summary: 'List cargo types' })
   findAll(@Query() query: Record<string, string>) {
     return this.service.findAll({
@@ -32,24 +33,28 @@ export class CargoTypesController {
   }
 
   @Get(':id')
+  @RuleEngineView('cargo-types')
   @ApiOperation({ summary: 'Get a cargo type by ID' })
   findOne(@Param('id', ParseUUIDPipe) id: string) {
     return this.service.findById(id);
   }
 
   @Post()
+  @RuleEngineManage('cargo-types')
   @ApiOperation({ summary: 'Create a cargo type' })
   create(@Body() dto: CreateCargoTypeDto) {
     return this.service.create(dto);
   }
 
   @Patch(':id')
+  @RuleEngineManage('cargo-types')
   @ApiOperation({ summary: 'Update a cargo type' })
   update(@Param('id', ParseUUIDPipe) id: string, @Body() dto: UpdateCargoTypeDto) {
     return this.service.update(id, dto);
   }
 
   @Delete(':id')
+  @RuleEngineManage('cargo-types')
   @HttpCode(HttpStatus.NO_CONTENT)
   @ApiOperation({ summary: 'Soft-delete a cargo type' })
   remove(@Param('id', ParseUUIDPipe) id: string) {
diff --git a/apps/edr-freight-api/src/modules/rule-engine/controllers/container-types.controller.ts b/apps/edr-freight-api/src/modules/rule-engine/controllers/container-types.controller.ts
index 380688309..43dfcec33 100644
--- a/apps/edr-freight-api/src/modules/rule-engine/controllers/container-types.controller.ts
+++ b/apps/edr-freight-api/src/modules/rule-engine/controllers/container-types.controller.ts
@@ -3,18 +3,19 @@ import {
   Param, ParseUUIDPipe, Patch, Post, Query,
 } from '@nestjs/common';
 import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
+import { RuleEngineManage, RuleEngineView } from '../../../common/rule-engine-guards';
 import { CreateContainerTypeDto } from '../dto/create-container-type.dto';
 import { UpdateContainerTypeDto } from '../dto/update-container-type.dto';
 import { ContainerTypesService } from '../services/container-types.service';
 
 @ApiTags('container-types')
 @Controller('container-types')
-// @UseGuards(JwtAuthGuard) — TODO: add when auth package integrated
 @ApiBearerAuth()
 export class ContainerTypesController {
   constructor(private readonly service: ContainerTypesService) {}
 
   @Get()
+  @RuleEngineView('container-types')
   @ApiOperation({ summary: 'List container types' })
   findAll(@Query() query: Record<string, string>) {
     return this.service.findAll({
@@ -25,24 +26,28 @@ export class ContainerTypesController {
   }
 
   @Get(':id')
+  @RuleEngineView('container-types')
   @ApiOperation({ summary: 'Get a container type by ID' })
   findOne(@Param('id', ParseUUIDPipe) id: string) {
     return this.service.findById(id);
   }
 
   @Post()
+  @RuleEngineManage('container-types')
   @ApiOperation({ summary: 'Create a container type' })
   create(@Body() dto: CreateContainerTypeDto) {
     return this.service.create(dto);
   }
 
   @Patch(':id')
+  @RuleEngineManage('container-types')
   @ApiOperation({ summary: 'Update a container type' })
   update(@Param('id', ParseUUIDPipe) id: string, @Body() dto: UpdateContainerTypeDto) {
     return this.service.update(id, dto);
   }
 
   @Delete(':id')
+  @RuleEngineManage('container-types')
   @HttpCode(HttpStatus.NO_CONTENT)
   @ApiOperation({ summary: 'Soft-delete a container type' })
   remove(@Param('id', ParseUUIDPipe) id: string) {
diff --git a/apps/edr-freight-api/src/modules/rule-engine/controllers/priority-rules.controller.ts b/apps/edr-freight-api/src/modules/rule-engine/controllers/priority-rules.controller.ts
index d268fc577..bee5cf85b 100644
--- a/apps/edr-freight-api/src/modules/rule-engine/controllers/priority-rules.controller.ts
+++ b/apps/edr-freight-api/src/modules/rule-engine/controllers/priority-rules.controller.ts
@@ -2,6 +2,7 @@ import {
   Body, Controller, Delete, Get, HttpCode, HttpStatus,
   Param, ParseUUIDPipe, Patch, Post, Query,
 } from '@nestjs/common';
+import { RuleEngineManage, RuleEngineView } from '../../../common/rule-engine-guards';
 import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
 import { CreatePriorityRuleDto } from '../dto/create-priority-rule.dto';
 import { UpdatePriorityRuleDto } from '../dto/update-priority-rule.dto';
@@ -9,12 +10,12 @@ import { PriorityRulesService } from '../services/priority-rules.service';
 
 @ApiTags('priority-rules')
 @Controller('priority-rules')
-// @UseGuards(JwtAuthGuard) — TODO: add when auth package integrated
 @ApiBearerAuth()
 export class PriorityRulesController {
   constructor(private readonly service: PriorityRulesService) {}
 
   @Get()
+  @RuleEngineView('priority-rules')
   @ApiOperation({ summary: 'List priority rules' })
   findAll(@Query() query: Record<string, string>) {
     return this.service.findAll({
@@ -25,24 +26,28 @@ export class PriorityRulesController {
   }
 
   @Get(':id')
+  @RuleEngineView('priority-rules')
   @ApiOperation({ summary: 'Get a priority rule by ID' })
   findOne(@Param('id', ParseUUIDPipe) id: string) {
     return this.service.findById(id);
   }
 
   @Post()
+  @RuleEngineManage('priority-rules')
   @ApiOperation({ summary: 'Create a priority rule' })
   create(@Body() dto: CreatePriorityRuleDto) {
     return this.service.create(dto);
   }
 
   @Patch(':id')
+  @RuleEngineManage('priority-rules')
   @ApiOperation({ summary: 'Update a priority rule' })
   update(@Param('id', ParseUUIDPipe) id: string, @Body() dto: UpdatePriorityRuleDto) {
     return this.service.update(id, dto);
   }
 
   @Delete(':id')
+  @RuleEngineManage('priority-rules')
   @HttpCode(HttpStatus.NO_CONTENT)
   @ApiOperation({ summary: 'Soft-delete a priority rule' })
   remove(@Param('id', ParseUUIDPipe) id: string) {
diff --git a/apps/edr-freight-api/src/modules/rule-engine/controllers/rates.controller.ts b/apps/edr-freight-api/src/modules/rule-engine/controllers/rates.controller.ts
index 02408e53d..3c7776a27 100644
--- a/apps/edr-freight-api/src/modules/rule-engine/controllers/rates.controller.ts
+++ b/apps/edr-freight-api/src/modules/rule-engine/controllers/rates.controller.ts
@@ -3,18 +3,24 @@ import {
   Param, ParseUUIDPipe, Patch, Post, Query,
 } from '@nestjs/common';
 import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
-import { ApproveRateDto, CreateRateDto } from '../dto/create-rate.dto';
+import { CurrentUser } from '@edr/api-common';
+import { RuleEngineManage, RuleEngineView } from '../../../common/rule-engine-guards';
+import { CreateRateDto } from '../dto/create-rate.dto';
+import {
+  type AuthUserPayload,
+  resolveAuthUserId,
+} from '../../../common/resolve-auth-user-id';
 import { UpdateRateDto } from '../dto/update-rate.dto';
 import { RatesService } from '../services/rates.service';
 
 @ApiTags('rates')
 @Controller('rates')
-// @UseGuards(JwtAuthGuard) — TODO: add when auth package integrated
 @ApiBearerAuth()
 export class RatesController {
   constructor(private readonly service: RatesService) {}
 
   @Get()
+  @RuleEngineView('rates')
   @ApiOperation({ summary: 'List rates' })
   findAll(@Query() query: Record<string, string>) {
     return this.service.findAll({
@@ -26,42 +32,55 @@ export class RatesController {
   }
 
   @Get('live')
+  @RuleEngineView('rates')
   @ApiOperation({ summary: 'List all LIVE rates effective now' })
   findLive() {
     return this.service.findLiveRates();
   }
 
   @Get(':id')
+  @RuleEngineView('rates')
   @ApiOperation({ summary: 'Get a rate by ID' })
   findOne(@Param('id', ParseUUIDPipe) id: string) {
     return this.service.findById(id);
   }
 
   @Post()
+  @RuleEngineManage('rates')
   @ApiOperation({ summary: 'Create a rate (DRAFT)' })
-  create(@Body() dto: CreateRateDto) {
-    return this.service.create(dto);
+  create(
+    @Body() dto: CreateRateDto,
+    @CurrentUser() user: AuthUserPayload,
+  ) {
+    return this.service.create(dto, resolveAuthUserId(user));
   }
 
   @Patch(':id')
+  @RuleEngineManage('rates')
   @ApiOperation({ summary: 'Update a DRAFT rate' })
   update(@Param('id', ParseUUIDPipe) id: string, @Body() dto: UpdateRateDto) {
     return this.service.update(id, dto);
   }
 
   @Post(':id/submit')
+  @RuleEngineManage('rates')
   @ApiOperation({ summary: 'Submit rate for CEO approval' })
   submit(@Param('id', ParseUUIDPipe) id: string) {
     return this.service.submitForApproval(id);
   }
 
   @Post(':id/approve')
+  @RuleEngineManage('rates')
   @ApiOperation({ summary: 'CEO approves a rate' })
-  approve(@Param('id', ParseUUIDPipe) id: string, @Body() dto: ApproveRateDto) {
-    return this.service.approve(id, dto);
+  approve(
+    @Param('id', ParseUUIDPipe) id: string,
+    @CurrentUser() user: AuthUserPayload,
+  ) {
+    return this.service.approve(id, resolveAuthUserId(user));
   }
 
   @Delete(':id')
+  @RuleEngineManage('rates')
   @HttpCode(HttpStatus.NO_CONTENT)
   @ApiOperation({ summary: 'Soft-delete a rate' })
   remove(@Param('id', ParseUUIDPipe) id: string) {
diff --git a/apps/edr-freight-api/src/modules/rule-engine/controllers/service-types.controller.ts b/apps/edr-freight-api/src/modules/rule-engine/controllers/service-types.controller.ts
index 263178a92..3044515fb 100644
--- a/apps/edr-freight-api/src/modules/rule-engine/controllers/service-types.controller.ts
+++ b/apps/edr-freight-api/src/modules/rule-engine/controllers/service-types.controller.ts
@@ -2,6 +2,7 @@ import {
   Body, Controller, Delete, Get, HttpCode, HttpStatus,
   Param, ParseUUIDPipe, Patch, Post, Query,
 } from '@nestjs/common';
+import { RuleEngineManage, RuleEngineView } from '../../../common/rule-engine-guards';
 import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
 import { CreateServiceTypeDto } from '../dto/create-service-type.dto';
 import { UpdateServiceTypeDto } from '../dto/update-service-type.dto';
@@ -9,12 +10,12 @@ import { ServiceTypesService } from '../services/service-types.service';
 
 @ApiTags('service-types')
 @Controller('service-types')
-// @UseGuards(JwtAuthGuard) — TODO: add when auth package integrated
 @ApiBearerAuth()
 export class ServiceTypesController {
   constructor(private readonly service: ServiceTypesService) {}
 
   @Get()
+  @RuleEngineView('service-types')
   @ApiOperation({ summary: 'List service types' })
   findAll(@Query() query: Record<string, string>) {
     return this.service.findAll({
@@ -29,24 +30,28 @@ export class ServiceTypesController {
   }
 
   @Get(':id')
+  @RuleEngineView('service-types')
   @ApiOperation({ summary: 'Get a service type by ID' })
   findOne(@Param('id', ParseUUIDPipe) id: string) {
     return this.service.findById(id);
   }
 
   @Post()
+  @RuleEngineManage('service-types')
   @ApiOperation({ summary: 'Create a service type' })
   create(@Body() dto: CreateServiceTypeDto) {
     return this.service.create(dto);
   }
 
   @Patch(':id')
+  @RuleEngineManage('service-types')
   @ApiOperation({ summary: 'Update a service type' })
   update(@Param('id', ParseUUIDPipe) id: string, @Body() dto: UpdateServiceTypeDto) {
     return this.service.update(id, dto);
   }
 
   @Delete(':id')
+  @RuleEngineManage('service-types')
   @HttpCode(HttpStatus.NO_CONTENT)
   @ApiOperation({ summary: 'Soft-delete a service type' })
   remove(@Param('id', ParseUUIDPipe) id: string) {
diff --git a/apps/edr-freight-api/src/modules/rule-engine/controllers/shipping-lines.controller.ts b/apps/edr-freight-api/src/modules/rule-engine/controllers/shipping-lines.controller.ts
index fc022725c..40a67c7f5 100644
--- a/apps/edr-freight-api/src/modules/rule-engine/controllers/shipping-lines.controller.ts
+++ b/apps/edr-freight-api/src/modules/rule-engine/controllers/shipping-lines.controller.ts
@@ -2,6 +2,7 @@ import {
   Body, Controller, Delete, Get, HttpCode, HttpStatus,
   Param, ParseUUIDPipe, Patch, Post, Query,
 } from '@nestjs/common';
+import { RuleEngineManage, RuleEngineView } from '../../../common/rule-engine-guards';
 import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
 import { CreateShippingLineDto } from '../dto/create-shipping-line.dto';
 import { UpdateShippingLineDto } from '../dto/update-shipping-line.dto';
@@ -9,12 +10,12 @@ import { ShippingLinesService } from '../services/shipping-lines.service';
 
 @ApiTags('shipping-lines')
 @Controller('shipping-lines')
-// @UseGuards(JwtAuthGuard) — TODO: add when auth package integrated
 @ApiBearerAuth()
 export class ShippingLinesController {
   constructor(private readonly service: ShippingLinesService) {}
 
   @Get()
+  @RuleEngineView('shipping-lines')
   @ApiOperation({ summary: 'List shipping lines' })
   findAll(@Query() query: Record<string, string>) {
     return this.service.findAll({
@@ -25,24 +26,28 @@ export class ShippingLinesController {
   }
 
   @Get(':id')
+  @RuleEngineView('shipping-lines')
   @ApiOperation({ summary: 'Get a shipping line by ID' })
   findOne(@Param('id', ParseUUIDPipe) id: string) {
     return this.service.findById(id);
   }
 
   @Post()
+  @RuleEngineManage('shipping-lines')
   @ApiOperation({ summary: 'Create a shipping line' })
   create(@Body() dto: CreateShippingLineDto) {
     return this.service.create(dto);
   }
 
   @Patch(':id')
+  @RuleEngineManage('shipping-lines')
   @ApiOperation({ summary: 'Update a shipping line' })
   update(@Param('id', ParseUUIDPipe) id: string, @Body() dto: UpdateShippingLineDto) {
     return this.service.update(id, dto);
   }
 
   @Delete(':id')
+  @RuleEngineManage('shipping-lines')
   @HttpCode(HttpStatus.NO_CONTENT)
   @ApiOperation({ summary: 'Soft-delete a shipping line' })
   remove(@Param('id', ParseUUIDPipe) id: string) {
diff --git a/apps/edr-freight-api/src/modules/rule-engine/controllers/surcharge-types.controller.ts b/apps/edr-freight-api/src/modules/rule-engine/controllers/surcharge-types.controller.ts
index 24213a28f..be4c3011a 100644
--- a/apps/edr-freight-api/src/modules/rule-engine/controllers/surcharge-types.controller.ts
+++ b/apps/edr-freight-api/src/modules/rule-engine/controllers/surcharge-types.controller.ts
@@ -2,6 +2,7 @@ import {
   Body, Controller, Delete, Get, HttpCode, HttpStatus,
   Param, ParseUUIDPipe, Patch, Post, Query,
 } from '@nestjs/common';
+import { RuleEngineManage, RuleEngineView } from '../../../common/rule-engine-guards';
 import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
 import { CreateSurchargeTypeDto } from '../dto/create-surcharge-type.dto';
 import { UpdateSurchargeTypeDto } from '../dto/update-surcharge-type.dto';
@@ -9,12 +10,12 @@ import { SurchargeTypesService } from '../services/surcharge-types.service';
 
 @ApiTags('surcharge-types')
 @Controller('surcharge-types')
-// @UseGuards(JwtAuthGuard) — TODO: add when auth package integrated
 @ApiBearerAuth()
 export class SurchargeTypesController {
   constructor(private readonly service: SurchargeTypesService) {}
 
   @Get()
+  @RuleEngineView('surcharge-types')
   @ApiOperation({ summary: 'List surcharge types' })
   findAll(@Query() query: Record<string, string>) {
     return this.service.findAll({
@@ -25,24 +26,28 @@ export class SurchargeTypesController {
   }
 
   @Get(':id')
+  @RuleEngineView('surcharge-types')
   @ApiOperation({ summary: 'Get a surcharge type by ID' })
   findOne(@Param('id', ParseUUIDPipe) id: string) {
     return this.service.findById(id);
   }
 
   @Post()
+  @RuleEngineManage('surcharge-types')
   @ApiOperation({ summary: 'Create a surcharge type' })
   create(@Body() dto: CreateSurchargeTypeDto) {
     return this.service.create(dto);
   }
 
   @Patch(':id')
+  @RuleEngineManage('surcharge-types')
   @ApiOperation({ summary: 'Update a surcharge type' })
   update(@Param('id', ParseUUIDPipe) id: string, @Body() dto: UpdateSurchargeTypeDto) {
     return this.service.update(id, dto);
   }
 
   @Delete(':id')
+  @RuleEngineManage('surcharge-types')
   @HttpCode(HttpStatus.NO_CONTENT)
   @ApiOperation({ summary: 'Soft-delete a surcharge type' })
   remove(@Param('id', ParseUUIDPipe) id: string) {
diff --git a/apps/edr-freight-api/src/modules/rule-engine/controllers/weight-limit-rules.controller.ts b/apps/edr-freight-api/src/modules/rule-engine/controllers/weight-limit-rules.controller.ts
index 2d4372a76..c3f0c1472 100644
--- a/apps/edr-freight-api/src/modules/rule-engine/controllers/weight-limit-rules.controller.ts
+++ b/apps/edr-freight-api/src/modules/rule-engine/controllers/weight-limit-rules.controller.ts
@@ -2,6 +2,7 @@ import {
   Body, Controller, Delete, Get, HttpCode, HttpStatus,
   Param, ParseUUIDPipe, Patch, Post, Query,
 } from '@nestjs/common';
+import { RuleEngineManage, RuleEngineView } from '../../../common/rule-engine-guards';
 import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
 import { CreateWeightLimitRuleDto } from '../dto/create-weight-limit-rule.dto';
 import { UpdateWeightLimitRuleDto } from '../dto/update-weight-limit-rule.dto';
@@ -9,12 +10,12 @@ import { WeightLimitRulesService } from '../services/weight-limit-rules.service'
 
 @ApiTags('weight-limit-rules')
 @Controller('weight-limit-rules')
-// @UseGuards(JwtAuthGuard) — TODO: add when auth package integrated
 @ApiBearerAuth()
 export class WeightLimitRulesController {
   constructor(private readonly service: WeightLimitRulesService) {}
 
   @Get()
+  @RuleEngineView('weight-limit-rules')
   @ApiOperation({ summary: 'List weight limit rules' })
   findAll(@Query() query: Record<string, string>) {
     return this.service.findAll({
@@ -26,24 +27,28 @@ export class WeightLimitRulesController {
   }
 
   @Get(':id')
+  @RuleEngineView('weight-limit-rules')
   @ApiOperation({ summary: 'Get a weight limit rule by ID' })
   findOne(@Param('id', ParseUUIDPipe) id: string) {
     return this.service.findById(id);
   }
 
   @Post()
+  @RuleEngineManage('weight-limit-rules')
   @ApiOperation({ summary: 'Create a weight limit rule' })
   create(@Body() dto: CreateWeightLimitRuleDto) {
     return this.service.create(dto);
   }
 
   @Patch(':id')
+  @RuleEngineManage('weight-limit-rules')
   @ApiOperation({ summary: 'Update a weight limit rule' })
   update(@Param('id', ParseUUIDPipe) id: string, @Body() dto: UpdateWeightLimitRuleDto) {
     return this.service.update(id, dto);
   }
 
   @Delete(':id')
+  @RuleEngineManage('weight-limit-rules')
   @HttpCode(HttpStatus.NO_CONTENT)
   @ApiOperation({ summary: 'Soft-delete a weight limit rule' })
   remove(@Param('id', ParseUUIDPipe) id: string) {
diff --git a/apps/edr-freight-api/src/modules/rule-engine/controllers/yards.controller.ts b/apps/edr-freight-api/src/modules/rule-engine/controllers/yards.controller.ts
index 89fa002a5..88523967e 100644
--- a/apps/edr-freight-api/src/modules/rule-engine/controllers/yards.controller.ts
+++ b/apps/edr-freight-api/src/modules/rule-engine/controllers/yards.controller.ts
@@ -2,6 +2,7 @@ import {
   Body, Controller, Delete, Get, HttpCode, HttpStatus,
   Param, ParseUUIDPipe, Patch, Post, Query,
 } from '@nestjs/common';
+import { RuleEngineManage, RuleEngineView } from '../../../common/rule-engine-guards';
 import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
 import { CreateYardDto } from '../dto/create-yard.dto';
 import { UpdateYardDto } from '../dto/update-yard.dto';
@@ -9,12 +10,12 @@ import { YardsService } from '../services/yards.service';
 
 @ApiTags('yards')
 @Controller('yards')
-// @UseGuards(JwtAuthGuard) — TODO: add when auth package integrated
 @ApiBearerAuth()
 export class YardsController {
   constructor(private readonly service: YardsService) {}
 
   @Get()
+  @RuleEngineView('yards')
   @ApiOperation({ summary: 'List yards' })
   findAll(@Query() query: Record<string, string>) {
     return this.service.findAll({
@@ -26,24 +27,28 @@ export class YardsController {
   }
 
   @Get(':id')
+  @RuleEngineView('yards')
   @ApiOperation({ summary: 'Get a yard by ID' })
   findOne(@Param('id', ParseUUIDPipe) id: string) {
     return this.service.findById(id);
   }
 
   @Post()
+  @RuleEngineManage('yards')
   @ApiOperation({ summary: 'Create a yard' })
   create(@Body() dto: CreateYardDto) {
     return this.service.create(dto);
   }
 
   @Patch(':id')
+  @RuleEngineManage('yards')
   @ApiOperation({ summary: 'Update a yard' })
   update(@Param('id', ParseUUIDPipe) id: string, @Body() dto: UpdateYardDto) {
     return this.service.update(id, dto);
   }
 
   @Delete(':id')
+  @RuleEngineManage('yards')
   @HttpCode(HttpStatus.NO_CONTENT)
   @ApiOperation({ summary: 'Soft-delete a yard' })
   remove(@Param('id', ParseUUIDPipe) id: string) {
diff --git a/apps/edr-freight-api/src/modules/rule-engine/dto/create-rate.dto.ts b/apps/edr-freight-api/src/modules/rule-engine/dto/create-rate.dto.ts
index fe9084395..2f73780d9 100644
--- a/apps/edr-freight-api/src/modules/rule-engine/dto/create-rate.dto.ts
+++ b/apps/edr-freight-api/src/modules/rule-engine/dto/create-rate.dto.ts
@@ -35,10 +35,6 @@ export class CreateRateDto {
   @IsIn([...RATE_UNITS])
   rateUnit!: string;
 
-  @ApiProperty({ description: 'ID of the staff member (Director) proposing this rate' })
-  @IsUUID()
-  proposedByStaffId!: string;
-
   @ApiProperty({ description: 'Date from which this rate is effective (ISO date)', example: '2025-01-01' })
   @IsDateString()
   effectiveFrom!: string;
@@ -49,12 +45,6 @@ export class CreateRateDto {
   effectiveTo?: string;
 }
 
-export class ApproveRateDto {
-  @ApiProperty({ description: 'ID of the CEO approving this rate' })
-  @IsUUID()
-  approvedByCeoId!: string;
-}
-
 export class SubmitRateForApprovalDto {
   @ApiPropertyOptional({ description: 'Optional note for the approval request', maxLength: 500 })
   @IsOptional()
diff --git a/apps/edr-freight-api/src/modules/rule-engine/rule-engine.service.ts b/apps/edr-freight-api/src/modules/rule-engine/rule-engine.service.ts
index 5fc27ecbd..98aeaffbf 100644
--- a/apps/edr-freight-api/src/modules/rule-engine/rule-engine.service.ts
+++ b/apps/edr-freight-api/src/modules/rule-engine/rule-engine.service.ts
@@ -35,6 +35,7 @@ import {
   IShippingLinesRepository,
   SHIPPING_LINES_REPOSITORY,
 } from './interfaces/shipping-lines.repository.interface';
+import { DEFAULT_APPROVAL_RULE_ROWS } from './approval-rules.defaults';
 
 export interface BookingContainerEvalInput {
   containerTypeId: string;
@@ -47,7 +48,8 @@ export interface BookingContainerEvalInput {
 }
 
 export interface BookingEvaluationInput {
-  cargoTypeId: string;
+  cargoTypeId?: string | null;
+  freightType?: 'CONTAINER' | 'BULK';
   serviceTypeId: string;
   paymentCurrency: string;
   tradeDirection: string;
@@ -115,13 +117,19 @@ export class RuleEngineService {
     let priorityScore = 0;
     let requiresDirectorApproval = false;
 
-    const cargoType = await this.cargoTypesRepo.findById(input.cargoTypeId);
-    if (!cargoType) {
-      hardBlocked.push(`Cargo type ${input.cargoTypeId} not found`);
-    } else if (cargoType.requiresDirectorApproval) {
+    if (input.freightType === 'BULK') {
       requiresDirectorApproval = true;
     }
 
+    if (input.cargoTypeId) {
+      const cargoType = await this.cargoTypesRepo.findById(input.cargoTypeId);
+      if (!cargoType) {
+        hardBlocked.push(`Cargo type ${input.cargoTypeId} not found`);
+      } else if (cargoType.requiresDirectorApproval) {
+        requiresDirectorApproval = true;
+      }
+    }
+
     for (const container of input.containers) {
       const rules = await this.weightLimitRulesRepo.findActiveByContainerTypeId(
         container.containerTypeId,
@@ -232,18 +240,62 @@ export class RuleEngineService {
   }
 
   /**
-   * Instantiate booking_approval_step rows from approval_rules for a cargo type.
+   * Ensure ITMLS default approval chains exist (container + bulk). Idempotent.
    */
-  async instantiateApprovalSteps(bookingId: string, cargoTypeId: string): Promise<BookingApprovalStep[]> {
-    const cargoType = await this.cargoTypesRepo.findById(cargoTypeId);
-    if (!cargoType) {
-      throw new BadRequestException(`Cargo type ${cargoTypeId} not found`);
+  async ensureDefaultApprovalRules(): Promise<void> {
+    for (const flag of [false, true] as const) {
+      const existing = await this.approvalRulesRepo.findChainForCargo(flag);
+      if (existing.length > 0) continue;
+
+      const rows = DEFAULT_APPROVAL_RULE_ROWS.filter(
+        (r) => r.requiresDirectorApproval === flag,
+      );
+      for (const row of rows) {
+        await this.approvalRulesRepo.create({
+          requiresDirectorApproval: row.requiresDirectorApproval,
+          stepOrder: row.stepOrder,
+          requiredRole: row.requiredRole,
+          actionLabel: row.actionLabel,
+          blocksRole: row.blocksRole,
+        });
+      }
+    }
+  }
+
+  /**
+   * Instantiate booking_approval_step rows from approval_rules by freight type.
+   */
+  async instantiateApprovalSteps(
+    bookingId: string,
+    options: {
+      freightType: 'CONTAINER' | 'BULK';
+      cargoTypeId?: string | null;
+    },
+  ): Promise<BookingApprovalStep[]> {
+    await this.ensureDefaultApprovalRules();
+
+    let requiresDirectorApproval = options.freightType === 'BULK';
+
+    if (options.cargoTypeId) {
+      const cargoType = await this.cargoTypesRepo.findById(options.cargoTypeId);
+      if (!cargoType) {
+        throw new BadRequestException(`Cargo type ${options.cargoTypeId} not found`);
+      }
+      if (cargoType.requiresDirectorApproval) {
+        requiresDirectorApproval = true;
+      }
     }
 
     const chain = await this.approvalRulesRepo.findChainForCargo(
-      cargoType.requiresDirectorApproval,
+      requiresDirectorApproval,
     );
 
+    if (chain.length === 0) {
+      throw new BadRequestException(
+        `Approval chain could not be loaded for requiresDirectorApproval=${requiresDirectorApproval}.`,
+      );
+    }
+
     const stepRepo = this.dataSource.getRepository(BookingApprovalStep);
     const steps: BookingApprovalStep[] = [];
 
@@ -253,6 +305,7 @@ export class RuleEngineService {
         approvalRuleId: rule.id,
         stepOrder: rule.stepOrder,
         requiredRole: rule.requiredRole,
+        blocksRole: rule.blocksRole ?? null,
         status: 'PENDING',
       });
       steps.push(await stepRepo.save(step));
diff --git a/apps/edr-freight-api/src/modules/rule-engine/services/rates.service.ts b/apps/edr-freight-api/src/modules/rule-engine/services/rates.service.ts
index 656802e3f..0202ef44a 100644
--- a/apps/edr-freight-api/src/modules/rule-engine/services/rates.service.ts
+++ b/apps/edr-freight-api/src/modules/rule-engine/services/rates.service.ts
@@ -1,5 +1,5 @@
 import { BadRequestException, Inject, Injectable, NotFoundException } from '@nestjs/common';
-import { ApproveRateDto, CreateRateDto } from '../dto/create-rate.dto';
+import { CreateRateDto } from '../dto/create-rate.dto';
 import { UpdateRateDto } from '../dto/update-rate.dto';
 import { Rate } from '../entities/rate.entity';
 import { IRatesRepository, RATES_REPOSITORY } from '../interfaces/rates.repository.interface';
@@ -46,7 +46,7 @@ export class RatesService {
   }
 
   /** Create a rate in DRAFT status. */
-  async create(dto: CreateRateDto): Promise<Rate> {
+  async create(dto: CreateRateDto, proposedByStaffId: string): Promise<Rate> {
     return this.repository.create({
       rateType: dto.rateType as Rate['rateType'],
       containerTypeId: dto.containerTypeId,
@@ -55,7 +55,7 @@ export class RatesService {
       rateValue: dto.rateValue,
       rateUnit: dto.rateUnit as Rate['rateUnit'],
       status: 'DRAFT',
-      proposedByStaffId: dto.proposedByStaffId,
+      proposedByStaffId,
       effectiveFrom: new Date(dto.effectiveFrom),
       effectiveTo: dto.effectiveTo ? new Date(dto.effectiveTo) : undefined,
     });
@@ -74,7 +74,6 @@ export class RatesService {
     if (dto.currency) updates.currency = dto.currency;
     if (dto.rateValue !== undefined) updates.rateValue = dto.rateValue;
     if (dto.rateUnit) updates.rateUnit = dto.rateUnit as Rate['rateUnit'];
-    if (dto.proposedByStaffId) updates.proposedByStaffId = dto.proposedByStaffId;
     if (dto.effectiveFrom) updates.effectiveFrom = new Date(dto.effectiveFrom);
     if (dto.effectiveTo) updates.effectiveTo = new Date(dto.effectiveTo);
     const updated = await this.repository.update(id, updates);
@@ -93,14 +92,14 @@ export class RatesService {
   }
 
   /** CEO approves a rate — moves to LIVE. */
-  async approve(id: string, dto: ApproveRateDto): Promise<Rate> {
+  async approve(id: string, approverUserId: string): Promise<Rate> {
     const rate = await this.findById(id);
     if (rate.status !== 'PENDING_APPROVAL') {
       throw new BadRequestException('Only PENDING_APPROVAL rates can be approved');
     }
     const updated = await this.repository.update(id, {
       status: 'LIVE',
-      approvedByCeoId: dto.approvedByCeoId,
+      approvedByCeoId: approverUserId,
       approvedAt: new Date(),
     });
     return updated!;
diff --git a/apps/edr-freight-api/src/modules/rule-engine/services/surcharge-types.service.ts b/apps/edr-freight-api/src/modules/rule-engine/services/surcharge-types.service.ts
index 98e5b1642..387e26ba9 100644
--- a/apps/edr-freight-api/src/modules/rule-engine/services/surcharge-types.service.ts
+++ b/apps/edr-freight-api/src/modules/rule-engine/services/surcharge-types.service.ts
@@ -28,6 +28,7 @@ export class SurchargeTypesService {
 
     const [data, total] = await this.repository.findAndCount({
       where,
+      relations: { rate: true },
       order: { label: 'ASC' },
       skip: (page - 1) * pageSize,
       take: pageSize,
diff --git a/apps/edr-freight-api/src/modules/train-schedules/entities/train-schedule-booking.entity.ts b/apps/edr-freight-api/src/modules/train-schedules/entities/train-schedule-booking.entity.ts
new file mode 100644
index 000000000..4ffecea26
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-schedules/entities/train-schedule-booking.entity.ts
@@ -0,0 +1,26 @@
+import { BaseEntity } from '@edr/api-common';
+import { Entity, Index, JoinColumn, ManyToOne, Column } from 'typeorm';
+
+import { Booking } from '../../bookings/entities/booking.entity';
+import { TrainSchedule } from './train-schedule.entity';
+
+@Entity({ schema: 'freight', name: 'train_schedule_bookings' })
+@Index(['trainScheduleId', 'bookingId'], { unique: true })
+@Index(['bookingId'], { unique: true })
+export class TrainScheduleBooking extends BaseEntity {
+  @Column({ name: 'train_schedule_id', type: 'uuid' })
+  trainScheduleId!: string;
+
+  @ManyToOne(() => TrainSchedule, (trainSchedule) => trainSchedule.scheduleBookings, {
+    onDelete: 'CASCADE',
+  })
+  @JoinColumn({ name: 'train_schedule_id' })
+  trainSchedule?: TrainSchedule;
+
+  @Column({ name: 'booking_id', type: 'uuid' })
+  bookingId!: string;
+
+  @ManyToOne(() => Booking)
+  @JoinColumn({ name: 'booking_id' })
+  booking?: Booking;
+}
diff --git a/apps/edr-freight-api/src/modules/train-schedules/entities/train-schedule.entity.ts b/apps/edr-freight-api/src/modules/train-schedules/entities/train-schedule.entity.ts
new file mode 100644
index 000000000..965723f6c
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-schedules/entities/train-schedule.entity.ts
@@ -0,0 +1,54 @@
+import { BaseEntity } from '@edr/api-common';
+import { Column, Entity, Index, JoinColumn, ManyToOne, OneToMany, OneToOne } from 'typeorm';
+
+import { Yard } from '../../rule-engine/entities/yard.entity';
+import { TrainSet } from '../../train-sets/entities/train-set.entity';
+import { TrainScheduleBooking } from './train-schedule-booking.entity';
+
+export const TRAIN_SCHEDULE_STATUSES = [
+  'DRAFT',
+  'SCHEDULED',
+  'DISPATCHED',
+  'ARRIVED',
+  'CANCELLED',
+] as const;
+
+export type TrainScheduleStatus = (typeof TRAIN_SCHEDULE_STATUSES)[number];
+
+@Entity({ schema: 'freight', name: 'train_schedules' })
+@Index(['scheduledDepartureDate'])
+@Index(['status'])
+export class TrainSchedule extends BaseEntity {
+  @Column({ name: 'train_set_id', type: 'uuid', unique: true })
+  trainSetId!: string;
+
+  @OneToOne(() => TrainSet, (trainSet) => trainSet.trainSchedule)
+  @JoinColumn({ name: 'train_set_id' })
+  trainSet?: TrainSet;
+
+  @Column({ name: 'origin_station_id', type: 'uuid' })
+  originStationId!: string;
+
+  @ManyToOne(() => Yard)
+  @JoinColumn({ name: 'origin_station_id' })
+  originStation?: Yard;
+
+  @Column({ name: 'destination_station_id', type: 'uuid' })
+  destinationStationId!: string;
+
+  @ManyToOne(() => Yard)
+  @JoinColumn({ name: 'destination_station_id' })
+  destinationStation?: Yard;
+
+  @Column({ name: 'scheduled_departure_date', type: 'timestamptz' })
+  scheduledDepartureDate!: Date;
+
+  @Column({ name: 'scheduled_arrival_date', type: 'timestamptz', nullable: true })
+  scheduledArrivalDate?: Date | null;
+
+  @Column({ name: 'status', type: 'varchar', length: 20, default: 'DRAFT' })
+  status!: TrainScheduleStatus;
+
+  @OneToMany(() => TrainScheduleBooking, (scheduleBooking) => scheduleBooking.trainSchedule)
+  scheduleBookings?: TrainScheduleBooking[];
+}
diff --git a/apps/edr-freight-api/src/modules/train-schedules/entities/wagon-booking-allocation.entity.ts b/apps/edr-freight-api/src/modules/train-schedules/entities/wagon-booking-allocation.entity.ts
new file mode 100644
index 000000000..4c78256fe
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-schedules/entities/wagon-booking-allocation.entity.ts
@@ -0,0 +1,26 @@
+import { BaseEntity } from '@edr/api-common';
+import { Column, Entity, Index, JoinColumn, ManyToOne } from 'typeorm';
+
+import { Booking } from '../../bookings/entities/booking.entity';
+import { TrainSetWagon } from '../../train-sets/entities/train-set-wagon.entity';
+
+@Entity({ schema: 'freight', name: 'wagon_booking_allocations' })
+@Index(['trainSetWagonId', 'bookingId'])
+export class WagonBookingAllocation extends BaseEntity {
+  @Column({ name: 'train_set_wagon_id', type: 'uuid' })
+  trainSetWagonId!: string;
+
+  @ManyToOne(() => TrainSetWagon, (wagon) => wagon.allocations, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'train_set_wagon_id' })
+  trainSetWagon?: TrainSetWagon;
+
+  @Column({ name: 'booking_id', type: 'uuid' })
+  bookingId!: string;
+
+  @ManyToOne(() => Booking)
+  @JoinColumn({ name: 'booking_id' })
+  booking?: Booking;
+
+  @Column({ name: 'allocated_weight_tons', type: 'numeric', precision: 10, scale: 3 })
+  allocatedWeightTons!: number;
+}
diff --git a/apps/edr-freight-api/src/modules/train-schedules/train-schedule-bookings.repository.ts b/apps/edr-freight-api/src/modules/train-schedules/train-schedule-bookings.repository.ts
new file mode 100644
index 000000000..d7360226f
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-schedules/train-schedule-bookings.repository.ts
@@ -0,0 +1,16 @@
+import { BaseRepository } from '@edr/api-common';
+import { Injectable } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+
+import { TrainScheduleBooking } from './entities/train-schedule-booking.entity';
+
+@Injectable()
+export class TrainScheduleBookingsRepository extends BaseRepository<TrainScheduleBooking> {
+  constructor(
+    @InjectRepository(TrainScheduleBooking)
+    repository: Repository<TrainScheduleBooking>,
+  ) {
+    super(repository);
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/train-schedules/train-schedules.module.ts b/apps/edr-freight-api/src/modules/train-schedules/train-schedules.module.ts
new file mode 100644
index 000000000..9fa40897a
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-schedules/train-schedules.module.ts
@@ -0,0 +1,24 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+
+import { TrainScheduleBooking } from './entities/train-schedule-booking.entity';
+import { TrainSchedule } from './entities/train-schedule.entity';
+import { WagonBookingAllocation } from './entities/wagon-booking-allocation.entity';
+import { TrainScheduleBookingsRepository } from './train-schedule-bookings.repository';
+import { TrainSchedulesRepository } from './train-schedules.repository';
+import { WagonBookingAllocationsRepository } from './wagon-booking-allocations.repository';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([TrainSchedule, TrainScheduleBooking, WagonBookingAllocation])],
+  providers: [
+    TrainSchedulesRepository,
+    TrainScheduleBookingsRepository,
+    WagonBookingAllocationsRepository,
+  ],
+  exports: [
+    TrainSchedulesRepository,
+    TrainScheduleBookingsRepository,
+    WagonBookingAllocationsRepository,
+  ],
+})
+export class TrainSchedulesModule {}
diff --git a/apps/edr-freight-api/src/modules/train-schedules/train-schedules.repository.ts b/apps/edr-freight-api/src/modules/train-schedules/train-schedules.repository.ts
new file mode 100644
index 000000000..b6f18eaf2
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-schedules/train-schedules.repository.ts
@@ -0,0 +1,16 @@
+import { BaseRepository } from '@edr/api-common';
+import { Injectable } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+
+import { TrainSchedule } from './entities/train-schedule.entity';
+
+@Injectable()
+export class TrainSchedulesRepository extends BaseRepository<TrainSchedule> {
+  constructor(
+    @InjectRepository(TrainSchedule)
+    repository: Repository<TrainSchedule>,
+  ) {
+    super(repository);
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/train-schedules/wagon-booking-allocations.repository.ts b/apps/edr-freight-api/src/modules/train-schedules/wagon-booking-allocations.repository.ts
new file mode 100644
index 000000000..067dddaf7
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-schedules/wagon-booking-allocations.repository.ts
@@ -0,0 +1,16 @@
+import { BaseRepository } from '@edr/api-common';
+import { Injectable } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+
+import { WagonBookingAllocation } from './entities/wagon-booking-allocation.entity';
+
+@Injectable()
+export class WagonBookingAllocationsRepository extends BaseRepository<WagonBookingAllocation> {
+  constructor(
+    @InjectRepository(WagonBookingAllocation)
+    repository: Repository<WagonBookingAllocation>,
+  ) {
+    super(repository);
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/dto/create-container-train-schedule.dto.ts b/apps/edr-freight-api/src/modules/train-scheduling/dto/create-container-train-schedule.dto.ts
new file mode 100644
index 000000000..173b0a6b3
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-scheduling/dto/create-container-train-schedule.dto.ts
@@ -0,0 +1,10 @@
+import { ApiProperty } from '@nestjs/swagger';
+import { IsUUID } from 'class-validator';
+
+import { PreviewContainerTrainScheduleDto } from './preview-container-train-schedule.dto';
+
+export class CreateContainerTrainScheduleDto extends PreviewContainerTrainScheduleDto {
+  @ApiProperty({ format: 'uuid' })
+  @IsUUID()
+  locomotiveId!: string;
+}
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/dto/get-eligible-container-bookings.dto.ts b/apps/edr-freight-api/src/modules/train-scheduling/dto/get-eligible-container-bookings.dto.ts
new file mode 100644
index 000000000..8712b2a1d
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-scheduling/dto/get-eligible-container-bookings.dto.ts
@@ -0,0 +1,23 @@
+import { ApiPropertyOptional } from '@nestjs/swagger';
+import { IsDateString, IsOptional, IsUUID } from 'class-validator';
+
+export class GetEligibleContainerBookingsDto {
+  @ApiPropertyOptional({ format: 'uuid' })
+  @IsOptional()
+  @IsUUID()
+  originStationId?: string;
+
+  @ApiPropertyOptional({ format: 'uuid' })
+  @IsOptional()
+  @IsUUID()
+  destinationStationId?: string;
+
+  @ApiPropertyOptional({ example: '2026-06-20T08:00:00.000Z' })
+  @IsOptional()
+  @IsDateString()
+  scheduleDate?: string;
+
+  @ApiPropertyOptional()
+  @IsOptional()
+  status?: string;
+}
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/dto/preview-container-train-schedule.dto.ts b/apps/edr-freight-api/src/modules/train-scheduling/dto/preview-container-train-schedule.dto.ts
new file mode 100644
index 000000000..e3e142a61
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-scheduling/dto/preview-container-train-schedule.dto.ts
@@ -0,0 +1,22 @@
+import { ApiProperty } from '@nestjs/swagger';
+import { ArrayMinSize, IsArray, IsDateString, IsUUID } from 'class-validator';
+
+export class PreviewContainerTrainScheduleDto {
+  @ApiProperty({ type: [String] })
+  @IsArray()
+  @ArrayMinSize(1)
+  @IsUUID('4', { each: true })
+  bookingIds!: string[];
+
+  @ApiProperty({ example: '2026-06-20T08:00:00.000Z' })
+  @IsDateString()
+  scheduleDate!: string;
+
+  @ApiProperty({ format: 'uuid' })
+  @IsUUID()
+  originStationId!: string;
+
+  @ApiProperty({ format: 'uuid' })
+  @IsUUID()
+  destinationStationId!: string;
+}
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.controller.ts b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.controller.ts
new file mode 100644
index 000000000..1dd01ffba
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.controller.ts
@@ -0,0 +1,58 @@
+import {
+  Body,
+  Controller,
+  Get,
+  Param,
+  ParseUUIDPipe,
+  Post,
+  Query,
+} from '@nestjs/common';
+import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
+
+import { CreateContainerTrainScheduleDto } from './dto/create-container-train-schedule.dto';
+import { GetEligibleContainerBookingsDto } from './dto/get-eligible-container-bookings.dto';
+import { PreviewContainerTrainScheduleDto } from './dto/preview-container-train-schedule.dto';
+import { TrainSchedulingService } from './train-scheduling.service';
+
+@ApiTags('train-scheduling')
+@ApiBearerAuth()
+@Controller('train-scheduling')
+export class TrainSchedulingController {
+  constructor(private readonly trainSchedulingService: TrainSchedulingService) {}
+
+  @Get('container/eligible-bookings')
+  @ApiOperation({ summary: 'List eligible container bookings' })
+  getEligibleContainerBookings(@Query() query: GetEligibleContainerBookingsDto) {
+    return this.trainSchedulingService.getEligibleContainerBookings(query);
+  }
+
+  @Post('container/preview')
+  @ApiOperation({ summary: 'Preview a container train schedule' })
+  previewContainerTrainSchedule(@Body() dto: PreviewContainerTrainScheduleDto) {
+    return this.trainSchedulingService.previewContainerTrainSchedule(dto);
+  }
+
+  @Post('container/schedules')
+  @ApiOperation({ summary: 'Create a container train schedule' })
+  createContainerTrainSchedule(@Body() dto: CreateContainerTrainScheduleDto) {
+    return this.trainSchedulingService.createContainerTrainSchedule(dto);
+  }
+
+  @Get('container/schedules')
+  @ApiOperation({ summary: 'List container train schedules' })
+  getContainerTrainSchedules() {
+    return this.trainSchedulingService.getContainerTrainSchedules();
+  }
+
+  @Get('container/schedules/:id')
+  @ApiOperation({ summary: 'Get container train schedule detail' })
+  getContainerTrainScheduleById(@Param('id', ParseUUIDPipe) id: string) {
+    return this.trainSchedulingService.getContainerTrainScheduleById(id);
+  }
+
+  @Post('container/schedules/:id/cancel')
+  @ApiOperation({ summary: 'Cancel container train schedule' })
+  cancelTrainSchedule(@Param('id', ParseUUIDPipe) id: string) {
+    return this.trainSchedulingService.cancelTrainSchedule(id);
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.module.ts b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.module.ts
new file mode 100644
index 000000000..dbf79e403
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.module.ts
@@ -0,0 +1,46 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+
+import { BookingsModule } from '../bookings/bookings.module';
+import { Booking } from '../bookings/entities/booking.entity';
+import { BookingContainer } from '../bookings/entities/booking-container.entity';
+import { LocomotivesModule } from '../locomotives/locomotives.module';
+import { Locomotive } from '../locomotives/entities/locomotive.entity';
+import { WagonType } from '../wagon-types/entities/wagon-type.entity';
+import { WagonTypesModule } from '../wagon-types/wagon-types.module';
+import { TrainSet } from '../train-sets/entities/train-set.entity';
+import { TrainSetWagon } from '../train-sets/entities/train-set-wagon.entity';
+import { TrainSetsModule } from '../train-sets/train-sets.module';
+import { TrainScheduleBooking } from '../train-schedules/entities/train-schedule-booking.entity';
+import { TrainSchedule } from '../train-schedules/entities/train-schedule.entity';
+import { WagonBookingAllocation } from '../train-schedules/entities/wagon-booking-allocation.entity';
+import { TrainSchedulesModule } from '../train-schedules/train-schedules.module';
+import { Yard } from '../rule-engine/entities/yard.entity';
+import { TrainSchedulingController } from './train-scheduling.controller';
+import { TrainSchedulingService } from './train-scheduling.service';
+
+@Module({
+  imports: [
+    TypeOrmModule.forFeature([
+      Booking,
+      BookingContainer,
+      Locomotive,
+      WagonType,
+      TrainSet,
+      TrainSetWagon,
+      TrainSchedule,
+      TrainScheduleBooking,
+      WagonBookingAllocation,
+      Yard,
+    ]),
+    BookingsModule,
+    LocomotivesModule,
+    WagonTypesModule,
+    TrainSetsModule,
+    TrainSchedulesModule,
+  ],
+  controllers: [TrainSchedulingController],
+  providers: [TrainSchedulingService],
+  exports: [TrainSchedulingService],
+})
+export class TrainSchedulingModule {}
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.spec.ts b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.spec.ts
new file mode 100644
index 000000000..659a4d6eb
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.spec.ts
@@ -0,0 +1,328 @@
+import { ConflictException } from '@nestjs/common';
+
+import { TrainSchedulingService } from './train-scheduling.service';
+
+const nw5 = {
+  id: 'wagon-type-1',
+  code: 'NW5',
+  name: 'Flat Wagon',
+  capacityTons: 70,
+  lengthMeters: 14,
+  maxWagonsPerTrain: 53,
+  supportedLoadTypes: ['CONTAINER'],
+  isActive: true,
+};
+
+const locomotive = {
+  id: 'loc-1',
+  code: 'LOC-001',
+  maxPullWeightTons: 3500,
+  status: 'AVAILABLE',
+};
+
+const makeBooking = (
+  id: string,
+  reference: string,
+  weight: number,
+  quantity: number,
+  containerCode: string,
+  scheduledDate = '2026-06-20T08:00:00.000Z',
+  originYardId = 'yard-origin',
+  destinationYardId = 'yard-destination',
+) => ({
+  id,
+  reference,
+  freightType: 'CONTAINER',
+  cargoTotalWeightVgm: weight,
+  scheduledDate: new Date(scheduledDate),
+  originYardId,
+  destinationYardId,
+  status: 'APPROVED',
+  customer: { companyName: 'Demo Customer' },
+  originYard: { label: 'Djibouti', code: 'DJIBOUTI' },
+  destinationYard: { label: 'Addis Ababa', code: 'ADDIS_ABABA' },
+  bookingContainers: [
+    {
+      quantity,
+      containerType: { code: containerCode, label: containerCode },
+    },
+  ],
+});
+
+describe('TrainSchedulingService', () => {
+  let service: TrainSchedulingService;
+  let dataSource: {
+    getRepository: jest.Mock;
+    transaction: jest.Mock;
+  };
+  let locomotivesRepository: {
+    findById: jest.Mock;
+  };
+  let wagonTypesRepository: {
+    findAll: jest.Mock;
+  };
+
+  beforeEach(() => {
+    dataSource = {
+      getRepository: jest.fn(),
+      transaction: jest.fn(),
+    };
+    locomotivesRepository = {
+      findById: jest.fn(),
+    };
+    wagonTypesRepository = {
+      findAll: jest.fn(),
+    };
+
+    service = new TrainSchedulingService(
+      dataSource as never,
+      locomotivesRepository as never,
+      wagonTypesRepository as never,
+    );
+  });
+
+  it('computes the expected valid preview for Group A', async () => {
+    const bookings = [
+      makeBooking('b1', 'BKG-CONT-001', 500, 20, '40FT'),
+      makeBooking('b2', 'BKG-CONT-002', 300, 10, '20FT'),
+      makeBooking('b3', 'BKG-CONT-003', 450, 15, '40FT'),
+    ];
+
+    wagonTypesRepository.findAll.mockResolvedValue([nw5]);
+    dataSource.getRepository.mockImplementation((entity: { name?: string }) => {
+      if (entity?.name === 'Booking') {
+        return { find: jest.fn().mockResolvedValue(bookings) };
+      }
+      if (entity?.name === 'TrainScheduleBooking') {
+        return { find: jest.fn().mockResolvedValue([]) };
+      }
+      if (entity?.name === 'Locomotive') {
+        return {
+          count: jest.fn().mockResolvedValue(2),
+          find: jest.fn().mockResolvedValue([locomotive]),
+        };
+      }
+      throw new Error(`Unexpected repository ${entity?.name}`);
+    });
+
+    const result = await service.previewContainerTrainSchedule({
+      bookingIds: bookings.map((booking) => booking.id),
+      scheduleDate: '2026-06-20T08:00:00.000Z',
+      originStationId: 'yard-origin',
+      destinationStationId: 'yard-destination',
+    });
+
+    expect(result.valid).toBe(true);
+    expect(result.violations).toEqual([]);
+    expect(result.summary).toEqual({
+      totalBookings: 3,
+      totalWeightTons: 1250,
+      wagonType: 'NW5',
+      wagonsNeeded: 18,
+      totalLengthMeters: 252,
+    });
+    expect(result.wagonPlan).toHaveLength(18);
+    expect(result.wagonPlan[0]?.allocations[0]).toEqual({
+      bookingId: 'b1',
+      bookingReference: 'BKG-CONT-001',
+      allocatedWeightTons: 70,
+    });
+  });
+
+  it('flags the overweight booking as invalid', async () => {
+    const bookings = [makeBooking('b6', 'BKG-CONT-006', 3600, 80, '40FT')];
+
+    wagonTypesRepository.findAll.mockResolvedValue([nw5]);
+    dataSource.getRepository.mockImplementation((entity: { name?: string }) => {
+      if (entity?.name === 'Booking') {
+        return { find: jest.fn().mockResolvedValue(bookings) };
+      }
+      if (entity?.name === 'TrainScheduleBooking') {
+        return { find: jest.fn().mockResolvedValue([]) };
+      }
+      if (entity?.name === 'Locomotive') {
+        return {
+          count: jest.fn().mockResolvedValue(1),
+          find: jest.fn().mockResolvedValue([locomotive]),
+        };
+      }
+      throw new Error(`Unexpected repository ${entity?.name}`);
+    });
+
+    const result = await service.previewContainerTrainSchedule({
+      bookingIds: ['b6'],
+      scheduleDate: '2026-06-20T08:00:00.000Z',
+      originStationId: 'yard-origin',
+      destinationStationId: 'yard-destination',
+    });
+
+    expect(result.valid).toBe(false);
+    expect(result.summary.totalWeightTons).toBe(3600);
+    expect(result.violations).toContain(
+      'Total booking weight 3600T exceeds max train weight 3500T',
+    );
+  });
+
+  it('creates a schedule transactionally when validation passes', async () => {
+    const bookings = [makeBooking('b1', 'BKG-CONT-001', 140, 2, '40FT')];
+    const validation = {
+      valid: true,
+      violations: [],
+      bookings,
+      wagonType: nw5,
+      summary: {
+        totalBookings: 1,
+        totalWeightTons: 140,
+        wagonType: 'NW5',
+        wagonsNeeded: 2,
+        totalLengthMeters: 28,
+      },
+      wagonPlan: [
+        {
+          sequenceNo: 1,
+          capacityTons: 70,
+          lengthMeters: 14,
+          assignedWeightTons: 70,
+          allocations: [
+            {
+              bookingId: 'b1',
+              bookingReference: 'BKG-CONT-001',
+              allocatedWeightTons: 70,
+            },
+          ],
+        },
+        {
+          sequenceNo: 2,
+          capacityTons: 70,
+          lengthMeters: 14,
+          assignedWeightTons: 70,
+          allocations: [
+            {
+              bookingId: 'b1',
+              bookingReference: 'BKG-CONT-001',
+              allocatedWeightTons: 70,
+            },
+          ],
+        },
+      ],
+    };
+
+    const lockedLocomotiveRepo = {
+      findOne: jest.fn().mockResolvedValue(locomotive),
+      update: jest.fn().mockResolvedValue(undefined),
+    };
+    const trainScheduleRepo = {
+      create: jest.fn().mockImplementation((value) => value),
+      save: jest.fn().mockResolvedValue({ id: 'schedule-1' }),
+    };
+    const trainScheduleBookingRepo = {
+      count: jest.fn().mockResolvedValue(0),
+      create: jest.fn().mockImplementation((value) => value),
+      save: jest.fn().mockResolvedValue(undefined),
+    };
+    const trainSetWagonRepo = {
+      create: jest.fn().mockImplementation((value) => value),
+      save: jest.fn().mockResolvedValue(undefined),
+      find: jest.fn().mockResolvedValue([
+        { id: 'wagon-1', sequenceNo: 1 },
+        { id: 'wagon-2', sequenceNo: 2 },
+      ]),
+    };
+    const wagonAllocRepo = {
+      create: jest.fn().mockImplementation((value) => value),
+      save: jest.fn().mockResolvedValue(undefined),
+    };
+    const trainSetRepo = {
+      create: jest.fn().mockImplementation((value) => value),
+      save: jest.fn().mockResolvedValue({ id: 'train-set-1' }),
+    };
+    const manager = {
+      getRepository: jest.fn((entity: { name?: string }) => {
+        switch (entity?.name) {
+          case 'Locomotive':
+            return lockedLocomotiveRepo;
+          case 'TrainSchedule':
+            return trainScheduleRepo;
+          case 'TrainScheduleBooking':
+            return trainScheduleBookingRepo;
+          case 'TrainSetWagon':
+            return trainSetWagonRepo;
+          case 'WagonBookingAllocation':
+            return wagonAllocRepo;
+          case 'TrainSet':
+            return trainSetRepo;
+          default:
+            throw new Error(`Unexpected transaction repository ${entity?.name}`);
+        }
+      }),
+    };
+
+    jest.spyOn(service, 'validateContainerBookingsForScheduling').mockResolvedValue(validation as never);
+    jest.spyOn(service, 'selectOrValidateLocomotive').mockResolvedValue(locomotive as never);
+    jest.spyOn(service, 'getContainerTrainScheduleById').mockResolvedValue({ id: 'schedule-1' } as never);
+    dataSource.transaction.mockImplementation(async (callback: (tx: typeof manager) => Promise<string>) =>
+      callback(manager),
+    );
+
+    const result = await service.createContainerTrainSchedule({
+      bookingIds: ['b1'],
+      scheduleDate: '2026-06-20T08:00:00.000Z',
+      originStationId: 'yard-origin',
+      destinationStationId: 'yard-destination',
+      locomotiveId: 'loc-1',
+    });
+
+    expect(trainSetRepo.save).toHaveBeenCalled();
+    expect(trainScheduleRepo.save).toHaveBeenCalled();
+    expect(trainSetWagonRepo.save).toHaveBeenCalled();
+    expect(wagonAllocRepo.save).toHaveBeenCalled();
+    expect(lockedLocomotiveRepo.update).toHaveBeenCalledWith('loc-1', { status: 'ASSIGNED' });
+    expect(result).toEqual({ id: 'schedule-1' });
+  });
+
+  it('rejects create when the locked locomotive is no longer available', async () => {
+    const validation = {
+      valid: true,
+      violations: [],
+      bookings: [makeBooking('b1', 'BKG-CONT-001', 70, 1, '40FT')],
+      wagonType: nw5,
+      summary: {
+        totalBookings: 1,
+        totalWeightTons: 70,
+        wagonType: 'NW5',
+        wagonsNeeded: 1,
+        totalLengthMeters: 14,
+      },
+      wagonPlan: [
+        {
+          sequenceNo: 1,
+          capacityTons: 70,
+          lengthMeters: 14,
+          assignedWeightTons: 70,
+          allocations: [],
+        },
+      ],
+    };
+    const manager = {
+      getRepository: jest.fn(() => ({
+        findOne: jest.fn().mockResolvedValue({ ...locomotive, status: 'ASSIGNED' }),
+      })),
+    };
+
+    jest.spyOn(service, 'validateContainerBookingsForScheduling').mockResolvedValue(validation as never);
+    jest.spyOn(service, 'selectOrValidateLocomotive').mockResolvedValue(locomotive as never);
+    dataSource.transaction.mockImplementation(async (callback: (tx: typeof manager) => Promise<string>) =>
+      callback(manager),
+    );
+
+    await expect(
+      service.createContainerTrainSchedule({
+        bookingIds: ['b1'],
+        scheduleDate: '2026-06-20T08:00:00.000Z',
+        originStationId: 'yard-origin',
+        destinationStationId: 'yard-destination',
+        locomotiveId: 'loc-1',
+      }),
+    ).rejects.toBeInstanceOf(ConflictException);
+  });
+});
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.ts b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.ts
new file mode 100644
index 000000000..34c4a7843
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.ts
@@ -0,0 +1,814 @@
+import {
+  BadRequestException,
+  ConflictException,
+  Injectable,
+  NotFoundException,
+} from "@nestjs/common";
+import { InjectDataSource } from "@nestjs/typeorm";
+import { DataSource, EntityManager, In } from "typeorm";
+
+import { Booking } from "../bookings/entities/booking.entity";
+import {
+  Locomotive,
+  type LocomotiveStatus,
+} from "../locomotives/entities/locomotive.entity";
+import { LocomotivesRepository } from "../locomotives/locomotives.repository";
+import { TrainSetWagon } from "../train-sets/entities/train-set-wagon.entity";
+import { TrainSet } from "../train-sets/entities/train-set.entity";
+import { TrainScheduleBooking } from "../train-schedules/entities/train-schedule-booking.entity";
+import { TrainSchedule } from "../train-schedules/entities/train-schedule.entity";
+import { WagonBookingAllocation } from "../train-schedules/entities/wagon-booking-allocation.entity";
+import { WagonType } from "../wagon-types/entities/wagon-type.entity";
+import { WagonTypesRepository } from "../wagon-types/wagon-types.repository";
+import { CreateContainerTrainScheduleDto } from "./dto/create-container-train-schedule.dto";
+import { GetEligibleContainerBookingsDto } from "./dto/get-eligible-container-bookings.dto";
+import { PreviewContainerTrainScheduleDto } from "./dto/preview-container-train-schedule.dto";
+
+const DEFAULT_WAGON_TYPE_CODE = "NW5";
+const MAX_TRAIN_WEIGHT_TONS = 3500;
+const MAX_TRAIN_LENGTH_METERS = 760;
+
+type EligibleBookingItem = {
+  id: string;
+  reference: string;
+  customer: string;
+  containerType: string;
+  quantity: number;
+  weightTons: number;
+  origin: string;
+  destination: string;
+  preferredDepartureDate: string;
+  status: string;
+};
+
+type WagonAllocationRecord = {
+  bookingId: string;
+  bookingReference: string;
+  allocatedWeightTons: number;
+};
+
+type WagonPlanRecord = {
+  sequenceNo: number;
+  capacityTons: number;
+  lengthMeters: number;
+  assignedWeightTons: number;
+  allocations: WagonAllocationRecord[];
+};
+
+type ValidationResult = {
+  valid: boolean;
+  violations: string[];
+  bookings: Booking[];
+  wagonType: WagonType;
+  summary: {
+    totalBookings: number;
+    totalWeightTons: number;
+    wagonType: string;
+    wagonsNeeded: number;
+    totalLengthMeters: number;
+  };
+  wagonPlan: WagonPlanRecord[];
+};
+
+@Injectable()
+export class TrainSchedulingService {
+  constructor(
+    @InjectDataSource()
+    private readonly dataSource: DataSource,
+    private readonly locomotivesRepository: LocomotivesRepository,
+    private readonly wagonTypesRepository: WagonTypesRepository,
+  ) { }
+
+  async getEligibleContainerBookings(query: GetEligibleContainerBookingsDto) {
+    const bookingRepository = this.dataSource.getRepository(Booking);
+    const queryBuilder = bookingRepository
+      .createQueryBuilder("booking")
+      .leftJoinAndSelect("booking.customer", "customer")
+      .leftJoinAndSelect("booking.originYard", "originYard")
+      .leftJoinAndSelect("booking.destinationYard", "destinationYard")
+      .leftJoinAndSelect("booking.bookingContainers", "bookingContainer")
+      .leftJoinAndSelect("bookingContainer.containerType", "containerType")
+      .leftJoin(
+        TrainScheduleBooking,
+        "scheduleBooking",
+        "scheduleBooking.booking_id = booking.id",
+      )
+      .where("booking.freightType = :freightType", { freightType: "CONTAINER" })
+      .andWhere("scheduleBooking.id IS NULL");
+
+    if (query.originStationId) {
+      queryBuilder.andWhere("booking.originYardId = :originStationId", {
+        originStationId: query.originStationId,
+      });
+    }
+
+    if (query.destinationStationId) {
+      queryBuilder.andWhere(
+        "booking.destinationYardId = :destinationStationId",
+        {
+          destinationStationId: query.destinationStationId,
+        },
+      );
+    }
+
+    if (query.scheduleDate) {
+      queryBuilder.andWhere(
+        `DATE(booking.scheduled_date AT TIME ZONE 'UTC') = :scheduleDate`,
+        { scheduleDate: this.toUtcDateKey(query.scheduleDate) },
+      );
+    }
+
+    if (query.status) {
+      queryBuilder.andWhere("booking.status = :status", {
+        status: query.status,
+      });
+    }
+
+    const bookings = await queryBuilder
+      .orderBy("booking.scheduled_date", "ASC")
+      .addOrderBy("booking.created_at", "ASC")
+      .getMany();
+
+    const items: EligibleBookingItem[] = bookings.map((booking) => ({
+      id: booking.id,
+      reference: booking.reference,
+      customer:
+        booking.company?.name ?? booking.company?.email ?? "Unknown customer",
+      containerType:
+        booking.bookingContainers
+          ?.map(
+            (container) =>
+              container.containerType?.label ??
+              container.containerType?.code ??
+              "Container",
+          )
+          .join(", ") ?? "Container",
+      quantity:
+        booking.bookingContainers?.reduce(
+          (sum, container) => sum + Number(container.quantity ?? 0),
+          0,
+        ) ?? 0,
+      weightTons: this.roundTons(booking.cargoTotalWeightVgm),
+      origin:
+        booking.originYard?.label ??
+        booking.originYard?.code ??
+        "Unknown origin",
+      destination:
+        booking.destinationYard?.label ??
+        booking.destinationYard?.code ??
+        "Unknown destination",
+      preferredDepartureDate: booking.scheduledDate.toISOString(),
+      status: booking.status,
+    }));
+
+    return {
+      count: items.length,
+      items,
+    };
+  }
+
+  async previewContainerTrainSchedule(dto: PreviewContainerTrainScheduleDto) {
+    const validation = await this.validateContainerBookingsForScheduling(dto);
+
+    return {
+      valid: validation.valid,
+      violations: validation.violations,
+      summary: validation.summary,
+      bookingIds: validation.bookings.map((booking) => booking.id),
+      wagonPlan: validation.wagonPlan,
+    };
+  }
+
+  async createContainerTrainSchedule(dto: CreateContainerTrainScheduleDto) {
+    const validation = await this.validateContainerBookingsForScheduling(dto);
+
+    if (!validation.valid) {
+      throw new BadRequestException({
+        message: "train_schedule_invalid",
+        violations: validation.violations,
+      });
+    }
+
+    const locomotive = await this.selectOrValidateLocomotive(
+      dto.locomotiveId,
+      validation.summary.totalWeightTons,
+    );
+
+    const createdSchedule = await this.dataSource.transaction(
+      async (manager) => {
+        const locomotiveRepository = manager.getRepository(Locomotive);
+        const lockedLocomotive = await locomotiveRepository.findOne({
+          where: { id: locomotive.id },
+          lock: { mode: "pessimistic_write" },
+        });
+
+        if (!lockedLocomotive) {
+          throw new NotFoundException(`Locomotive ${locomotive.id} not found`);
+        }
+
+        if (lockedLocomotive.status !== "AVAILABLE") {
+          throw new ConflictException(
+            `Locomotive ${lockedLocomotive.code} is not available`,
+          );
+        }
+
+        if (
+          Number(lockedLocomotive.maxPullWeightTons) <
+          validation.summary.totalWeightTons
+        ) {
+          throw new BadRequestException(
+            `Locomotive ${lockedLocomotive.code} cannot pull ${validation.summary.totalWeightTons}T`,
+          );
+        }
+
+        const existingScheduleCount = await manager
+          .getRepository(TrainScheduleBooking)
+          .count({
+            where: {
+              bookingId: In(validation.bookings.map((booking) => booking.id)),
+            },
+          });
+
+        if (existingScheduleCount > 0) {
+          throw new BadRequestException(
+            "One or more bookings are already scheduled",
+          );
+        }
+
+        const trainSet = await this.buildTrainSet(
+          manager,
+          lockedLocomotive,
+          validation.wagonType,
+          validation.summary.totalWeightTons,
+          validation.summary.totalLengthMeters,
+          validation.wagonPlan,
+        );
+
+        const schedule = manager.getRepository(TrainSchedule).create({
+          trainSetId: trainSet.id,
+          originStationId: dto.originStationId,
+          destinationStationId: dto.destinationStationId,
+          scheduledDepartureDate: new Date(dto.scheduleDate),
+          status: "SCHEDULED",
+        });
+
+        const savedSchedule = await manager
+          .getRepository(TrainSchedule)
+          .save(schedule);
+
+        const scheduleBookings = validation.bookings.map((booking) =>
+          manager.getRepository(TrainScheduleBooking).create({
+            trainScheduleId: savedSchedule.id,
+            bookingId: booking.id,
+          }),
+        );
+        await manager
+          .getRepository(TrainScheduleBooking)
+          .save(scheduleBookings);
+
+        const savedWagons = await manager.getRepository(TrainSetWagon).find({
+          where: { trainSetId: trainSet.id },
+          order: { sequenceNo: "ASC" },
+        });
+
+        const wagonBySequence = new Map(
+          savedWagons.map((wagon) => [wagon.sequenceNo, wagon]),
+        );
+        const allocationRows = validation.wagonPlan.flatMap((wagonPlan) => {
+          const wagon = wagonBySequence.get(wagonPlan.sequenceNo);
+
+          if (!wagon) {
+            throw new BadRequestException(
+              `Missing wagon sequence ${wagonPlan.sequenceNo}`,
+            );
+          }
+
+          return wagonPlan.allocations.map((allocation) =>
+            manager.getRepository(WagonBookingAllocation).create({
+              trainSetWagonId: wagon.id,
+              bookingId: allocation.bookingId,
+              allocatedWeightTons: allocation.allocatedWeightTons,
+            }),
+          );
+        });
+
+        await manager
+          .getRepository(WagonBookingAllocation)
+          .save(allocationRows);
+
+        await locomotiveRepository.update(lockedLocomotive.id, {
+          status: "ASSIGNED",
+        });
+
+        return savedSchedule.id;
+      },
+    );
+
+    return this.getContainerTrainScheduleById(createdSchedule);
+  }
+
+  async validateContainerBookingsForScheduling(
+    dto: PreviewContainerTrainScheduleDto,
+  ): Promise<ValidationResult> {
+    const bookingIds = [...new Set(dto.bookingIds)];
+
+    if (!bookingIds.length) {
+      throw new BadRequestException("At least one booking is required");
+    }
+
+    const [wagonType] = await this.wagonTypesRepository.findAll({
+      where: { code: DEFAULT_WAGON_TYPE_CODE, isActive: true },
+    });
+
+    if (!wagonType) {
+      throw new NotFoundException(
+        `Wagon type ${DEFAULT_WAGON_TYPE_CODE} not found`,
+      );
+    }
+
+    const bookings = await this.loadBookingsForScheduling(bookingIds);
+    const violations: string[] = [];
+
+    if (bookings.length !== bookingIds.length) {
+      const foundIds = new Set(bookings.map((booking) => booking.id));
+      const missing = bookingIds.filter((id) => !foundIds.has(id));
+      violations.push(`Bookings not found: ${missing.join(", ")}`);
+    }
+
+    const scheduledLinks = await this.dataSource
+      .getRepository(TrainScheduleBooking)
+      .find({
+        where: { bookingId: In(bookingIds) },
+        select: { bookingId: true },
+      });
+
+    if (scheduledLinks.length > 0) {
+      violations.push(
+        "One or more selected bookings are already assigned to a train schedule",
+      );
+    }
+
+    const nonContainerBookings = bookings.filter(
+      (booking) => booking.freightType !== "CONTAINER",
+    );
+    if (nonContainerBookings.length > 0) {
+      violations.push(
+        "Only CONTAINER bookings are supported for train scheduling",
+      );
+    }
+
+    const scheduleDateKey = this.toUtcDateKey(dto.scheduleDate);
+    const routeMismatch = bookings.some(
+      (booking) =>
+        booking.originYardId !== dto.originStationId ||
+        booking.destinationYardId !== dto.destinationStationId,
+    );
+    if (routeMismatch) {
+      violations.push(
+        "Selected bookings must share the same origin and destination as the schedule",
+      );
+    }
+
+    const dateMismatch = bookings.some(
+      (booking) => this.toUtcDateKey(booking.scheduledDate) !== scheduleDateKey,
+    );
+    if (dateMismatch) {
+      violations.push("Selected bookings must share the same schedule date");
+    }
+
+    const uniqueOriginCount = new Set(
+      bookings.map((booking) => booking.originYardId),
+    ).size;
+    if (uniqueOriginCount > 1) {
+      violations.push("Selected bookings must share the same origin station");
+    }
+
+    const uniqueDestinationCount = new Set(
+      bookings.map((booking) => booking.destinationYardId),
+    ).size;
+    if (uniqueDestinationCount > 1) {
+      violations.push(
+        "Selected bookings must share the same destination station",
+      );
+    }
+
+    const uniqueDateCount = new Set(
+      bookings.map((booking) => this.toUtcDateKey(booking.scheduledDate)),
+    ).size;
+    if (uniqueDateCount > 1) {
+      violations.push(
+        "Selected bookings must share the same preferred departure date",
+      );
+    }
+
+    const totalWeightTons = this.roundTons(
+      bookings.reduce(
+        (sum, booking) => sum + Number(booking.cargoTotalWeightVgm ?? 0),
+        0,
+      ),
+    );
+
+    const wagonPlan = this.allocateBookingsToWagons(
+      bookings,
+      this.calculateNW5WagonPlan(totalWeightTons, wagonType),
+    );
+    const totalLengthMeters = this.roundTons(
+      wagonPlan.reduce((sum, wagon) => sum + wagon.lengthMeters, 0),
+    );
+
+    if (totalWeightTons > MAX_TRAIN_WEIGHT_TONS) {
+      violations.push(
+        `Total booking weight ${totalWeightTons}T exceeds max train weight ${MAX_TRAIN_WEIGHT_TONS}T`,
+      );
+    }
+
+    if (totalLengthMeters > MAX_TRAIN_LENGTH_METERS) {
+      violations.push(
+        `Total wagon length ${totalLengthMeters}m exceeds max train length ${MAX_TRAIN_LENGTH_METERS}m`,
+      );
+    }
+
+    if (
+      wagonType.maxWagonsPerTrain != null &&
+      wagonPlan.length > Number(wagonType.maxWagonsPerTrain)
+    ) {
+      violations.push(
+        `Wagon count ${wagonPlan.length} exceeds wagon marshalling limit ${wagonType.maxWagonsPerTrain}`,
+      );
+    }
+
+    const availableLocomotiveCount = await this.dataSource
+      .getRepository(Locomotive)
+      .count({
+        where: { status: "AVAILABLE" as LocomotiveStatus },
+      });
+
+    if (availableLocomotiveCount === 0) {
+      violations.push("No available locomotive exists for scheduling");
+    } else {
+      const capableLocomotives = await this.dataSource
+        .getRepository(Locomotive)
+        .find({
+          where: { status: "AVAILABLE" },
+        });
+      const canPull = capableLocomotives.some(
+        (locomotive) => Number(locomotive.maxPullWeightTons) >= totalWeightTons,
+      );
+      if (!canPull) {
+        violations.push("No available locomotive can pull the total weight");
+      }
+    }
+
+    return {
+      valid: violations.length === 0,
+      violations,
+      bookings,
+      wagonType,
+      summary: {
+        totalBookings: bookings.length,
+        totalWeightTons,
+        wagonType: wagonType.code,
+        wagonsNeeded: wagonPlan.length,
+        totalLengthMeters,
+      },
+      wagonPlan,
+    };
+  }
+
+  calculateNW5WagonPlan(
+    totalBookingWeightTons: number,
+    wagonType: WagonType,
+  ): WagonPlanRecord[] {
+    const wagonCapacityTons = Number(wagonType.capacityTons);
+    const wagonsNeeded = Math.ceil(totalBookingWeightTons / wagonCapacityTons);
+    let remainingWeight = this.roundTons(totalBookingWeightTons);
+
+    return Array.from({ length: wagonsNeeded }, (_, index) => {
+      const assignedWeightTons = this.roundTons(
+        Math.min(wagonCapacityTons, remainingWeight),
+      );
+      remainingWeight = this.roundTons(
+        Math.max(0, remainingWeight - assignedWeightTons),
+      );
+
+      return {
+        sequenceNo: index + 1,
+        capacityTons: wagonCapacityTons,
+        lengthMeters: this.roundTons(Number(wagonType.lengthMeters)),
+        assignedWeightTons,
+        allocations: [],
+      };
+    });
+  }
+
+  async selectOrValidateLocomotive(
+    locomotiveId: string,
+    totalWeightTons: number,
+  ) {
+    const locomotive = await this.locomotivesRepository.findById(locomotiveId);
+
+    if (!locomotive) {
+      throw new NotFoundException(`Locomotive ${locomotiveId} not found`);
+    }
+
+    if (locomotive.status !== "AVAILABLE") {
+      throw new BadRequestException(
+        `Locomotive ${locomotive.code} is not available`,
+      );
+    }
+
+    if (Number(locomotive.maxPullWeightTons) < totalWeightTons) {
+      throw new BadRequestException(
+        `Locomotive ${locomotive.code} cannot pull ${totalWeightTons}T`,
+      );
+    }
+
+    return locomotive;
+  }
+
+  async buildTrainSet(
+    manager: EntityManager,
+    locomotive: Locomotive,
+    wagonType: WagonType,
+    totalWeightTons: number,
+    totalLengthMeters: number,
+    wagonPlan: WagonPlanRecord[],
+  ) {
+    const trainSet = manager.getRepository(TrainSet).create({
+      locomotiveId: locomotive.id,
+      totalWeightTons,
+      totalLengthMeters,
+      wagonCount: wagonPlan.length,
+      status: "ASSIGNED",
+    });
+    const savedTrainSet = await manager.getRepository(TrainSet).save(trainSet);
+
+    const wagons = wagonPlan.map((wagon) =>
+      manager.getRepository(TrainSetWagon).create({
+        trainSetId: savedTrainSet.id,
+        wagonTypeId: wagonType.id,
+        sequenceNo: wagon.sequenceNo,
+        capacityTons: wagon.capacityTons,
+        lengthMeters: wagon.lengthMeters,
+        assignedWeightTons: wagon.assignedWeightTons,
+      }),
+    );
+
+    await manager.getRepository(TrainSetWagon).save(wagons);
+
+    return savedTrainSet;
+  }
+
+  allocateBookingsToWagons(
+    bookings: Booking[],
+    baseWagonPlan: WagonPlanRecord[],
+  ): WagonPlanRecord[] {
+    const remaining = bookings.map((booking) => ({
+      bookingId: booking.id,
+      bookingReference: booking.reference,
+      remainingWeightTons: this.roundTons(
+        Number(booking.cargoTotalWeightVgm ?? 0),
+      ),
+    }));
+    let bookingIndex = 0;
+
+    return baseWagonPlan.map((wagon) => {
+      let wagonRemaining = this.roundTons(wagon.capacityTons);
+      const allocations: WagonAllocationRecord[] = [];
+      let assignedWeightTons = 0;
+
+      while (wagonRemaining > 0 && bookingIndex < remaining.length) {
+        const booking = remaining[bookingIndex];
+        const allocatedWeightTons = this.roundTons(
+          Math.min(wagonRemaining, booking.remainingWeightTons),
+        );
+
+        if (allocatedWeightTons <= 0) {
+          bookingIndex += 1;
+          continue;
+        }
+
+        allocations.push({
+          bookingId: booking.bookingId,
+          bookingReference: booking.bookingReference,
+          allocatedWeightTons,
+        });
+        booking.remainingWeightTons = this.roundTons(
+          booking.remainingWeightTons - allocatedWeightTons,
+        );
+        wagonRemaining = this.roundTons(wagonRemaining - allocatedWeightTons);
+        assignedWeightTons = this.roundTons(
+          assignedWeightTons + allocatedWeightTons,
+        );
+
+        if (booking.remainingWeightTons <= 0) {
+          bookingIndex += 1;
+        }
+      }
+
+      return {
+        ...wagon,
+        assignedWeightTons,
+        allocations,
+      };
+    });
+  }
+
+  async getContainerTrainSchedules() {
+    const schedules = await this.dataSource.getRepository(TrainSchedule).find({
+      relations: {
+        trainSet: { locomotive: true },
+        originStation: true,
+        destinationStation: true,
+        scheduleBookings: true,
+      },
+      order: { scheduledDepartureDate: "DESC", createdAt: "DESC" },
+    });
+
+    return schedules.map((schedule) => ({
+      id: schedule.id,
+      scheduleDate: schedule.scheduledDepartureDate,
+      origin:
+        schedule.originStation?.label ?? schedule.originStation?.code ?? null,
+      destination:
+        schedule.destinationStation?.label ??
+        schedule.destinationStation?.code ??
+        null,
+      locomotive: schedule.trainSet?.locomotive
+        ? {
+          id: schedule.trainSet.locomotive.id,
+          code: schedule.trainSet.locomotive.code,
+          name: schedule.trainSet.locomotive.name ?? null,
+        }
+        : null,
+      wagonCount: schedule.trainSet?.wagonCount ?? 0,
+      totalWeightTons: this.roundTons(
+        Number(schedule.trainSet?.totalWeightTons ?? 0),
+      ),
+      totalLengthMeters: this.roundTons(
+        Number(schedule.trainSet?.totalLengthMeters ?? 0),
+      ),
+      bookingsCount: schedule.scheduleBookings?.length ?? 0,
+      status: schedule.status,
+    }));
+  }
+
+  async getContainerTrainScheduleById(id: string) {
+    const schedule = await this.dataSource
+      .getRepository(TrainSchedule)
+      .findOne({
+        where: { id },
+        relations: {
+          trainSet: {
+            locomotive: true,
+            wagons: { wagonType: true, allocations: { booking: true } },
+          },
+          originStation: true,
+          destinationStation: true,
+          scheduleBookings: {
+            booking: { company: true, originYard: true, destinationYard: true },
+          },
+        },
+      });
+
+    if (!schedule) {
+      throw new NotFoundException(`Train schedule ${id} not found`);
+    }
+
+    return {
+      id: schedule.id,
+      status: schedule.status,
+      scheduledDepartureDate: schedule.scheduledDepartureDate,
+      scheduledArrivalDate: schedule.scheduledArrivalDate,
+      originStation: schedule.originStation,
+      destinationStation: schedule.destinationStation,
+      trainSet: schedule.trainSet
+        ? {
+          id: schedule.trainSet.id,
+          status: schedule.trainSet.status,
+          wagonCount: schedule.trainSet.wagonCount,
+          totalWeightTons: this.roundTons(
+            Number(schedule.trainSet.totalWeightTons),
+          ),
+          totalLengthMeters: this.roundTons(
+            Number(schedule.trainSet.totalLengthMeters),
+          ),
+          locomotive: schedule.trainSet.locomotive
+            ? {
+              id: schedule.trainSet.locomotive.id,
+              code: schedule.trainSet.locomotive.code,
+              name: schedule.trainSet.locomotive.name,
+              status: schedule.trainSet.locomotive.status,
+              maxPullWeightTons: this.roundTons(
+                Number(schedule.trainSet.locomotive.maxPullWeightTons),
+              ),
+            }
+            : null,
+          wagons: [...(schedule.trainSet.wagons ?? [])]
+            .sort((left, right) => left.sequenceNo - right.sequenceNo)
+            .map((wagon) => ({
+              id: wagon.id,
+              sequenceNo: wagon.sequenceNo,
+              capacityTons: this.roundTons(Number(wagon.capacityTons)),
+              lengthMeters: this.roundTons(Number(wagon.lengthMeters)),
+              assignedWeightTons: this.roundTons(
+                Number(wagon.assignedWeightTons),
+              ),
+              wagonType: wagon.wagonType
+                ? {
+                  id: wagon.wagonType.id,
+                  code: wagon.wagonType.code,
+                  name: wagon.wagonType.name,
+                }
+                : null,
+              allocations:
+                wagon.allocations?.map((allocation) => ({
+                  id: allocation.id,
+                  bookingId: allocation.bookingId,
+                  bookingReference: allocation.booking?.reference ?? null,
+                  allocatedWeightTons: this.roundTons(
+                    Number(allocation.allocatedWeightTons),
+                  ),
+                })) ?? [],
+            })),
+        }
+        : null,
+      bookings:
+        schedule.scheduleBookings?.map((scheduleBooking) => ({
+          id: scheduleBooking.booking?.id ?? scheduleBooking.bookingId,
+          reference: scheduleBooking.booking?.reference ?? null,
+          customer:
+            scheduleBooking.booking?.company?.name ??
+            scheduleBooking.booking?.company?.email ??
+            null,
+          weightTons: this.roundTons(
+            Number(scheduleBooking.booking?.cargoTotalWeightVgm ?? 0),
+          ),
+          status: scheduleBooking.booking?.status ?? null,
+        })) ?? [],
+    };
+  }
+
+  async cancelTrainSchedule(id: string) {
+    const schedule = await this.dataSource
+      .getRepository(TrainSchedule)
+      .findOne({
+        where: { id },
+        relations: { trainSet: { locomotive: true } },
+      });
+
+    if (!schedule) {
+      throw new NotFoundException(`Train schedule ${id} not found`);
+    }
+
+    await this.dataSource.transaction(async (manager) => {
+      await manager.getRepository(TrainSchedule).update(schedule.id, {
+        status: "CANCELLED",
+      });
+
+      if (schedule.trainSetId) {
+        await manager.getRepository(TrainSet).update(schedule.trainSetId, {
+          status: "CANCELLED",
+        });
+      }
+
+      if (schedule.trainSet?.locomotiveId) {
+        await manager
+          .getRepository(Locomotive)
+          .update(schedule.trainSet.locomotiveId, {
+            status: "AVAILABLE",
+          });
+      }
+    });
+
+    return this.getContainerTrainScheduleById(id);
+  }
+
+  private async loadBookingsForScheduling(bookingIds: string[]) {
+    return this.dataSource.getRepository(Booking).find({
+      where: { id: In(bookingIds) },
+      relations: {
+        company: true,
+        originYard: true,
+        destinationYard: true,
+        bookingContainers: { containerType: true },
+      },
+      order: { createdAt: "ASC" },
+    });
+  }
+
+  private toUtcDateKey(value: Date | string) {
+    const date = value instanceof Date ? value : new Date(value);
+    return date.toISOString().slice(0, 10);
+  }
+
+  private roundTons(value: number | string | null | undefined) {
+    const numericValue = typeof value === "number" ? value : Number(value ?? 0);
+
+    if (!Number.isFinite(numericValue)) {
+      return 0;
+    }
+
+    return Number(numericValue.toFixed(3));
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/train-sets/entities/train-set-wagon.entity.ts b/apps/edr-freight-api/src/modules/train-sets/entities/train-set-wagon.entity.ts
new file mode 100644
index 000000000..780bc1977
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-sets/entities/train-set-wagon.entity.ts
@@ -0,0 +1,39 @@
+import { BaseEntity } from '@edr/api-common';
+import { Column, Entity, Index, JoinColumn, ManyToOne, OneToMany } from 'typeorm';
+
+import { WagonBookingAllocation } from '../../train-schedules/entities/wagon-booking-allocation.entity';
+import { WagonType } from '../../wagon-types/entities/wagon-type.entity';
+import { TrainSet } from './train-set.entity';
+
+@Entity({ schema: 'freight', name: 'train_set_wagons' })
+@Index(['trainSetId', 'sequenceNo'], { unique: true })
+export class TrainSetWagon extends BaseEntity {
+  @Column({ name: 'train_set_id', type: 'uuid' })
+  trainSetId!: string;
+
+  @ManyToOne(() => TrainSet, (trainSet) => trainSet.wagons, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'train_set_id' })
+  trainSet?: TrainSet;
+
+  @Column({ name: 'wagon_type_id', type: 'uuid' })
+  wagonTypeId!: string;
+
+  @ManyToOne(() => WagonType, (wagonType) => wagonType.trainSetWagons)
+  @JoinColumn({ name: 'wagon_type_id' })
+  wagonType?: WagonType;
+
+  @Column({ name: 'sequence_no', type: 'int' })
+  sequenceNo!: number;
+
+  @Column({ name: 'capacity_tons', type: 'numeric', precision: 10, scale: 3 })
+  capacityTons!: number;
+
+  @Column({ name: 'length_meters', type: 'numeric', precision: 10, scale: 3 })
+  lengthMeters!: number;
+
+  @Column({ name: 'assigned_weight_tons', type: 'numeric', precision: 10, scale: 3, default: 0 })
+  assignedWeightTons!: number;
+
+  @OneToMany(() => WagonBookingAllocation, (allocation) => allocation.trainSetWagon)
+  allocations?: WagonBookingAllocation[];
+}
diff --git a/apps/edr-freight-api/src/modules/train-sets/entities/train-set.entity.ts b/apps/edr-freight-api/src/modules/train-sets/entities/train-set.entity.ts
new file mode 100644
index 000000000..9099824d5
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-sets/entities/train-set.entity.ts
@@ -0,0 +1,46 @@
+import { BaseEntity } from '@edr/api-common';
+import { Column, Entity, Index, JoinColumn, ManyToOne, OneToMany, OneToOne } from 'typeorm';
+
+import { Locomotive } from '../../locomotives/entities/locomotive.entity';
+import { TrainSchedule } from '../../train-schedules/entities/train-schedule.entity';
+import { TrainSetWagon } from './train-set-wagon.entity';
+
+export const TRAIN_SET_STATUSES = [
+  'DRAFT',
+  'ASSIGNED',
+  'DISPATCHED',
+  'COMPLETED',
+  'CANCELLED',
+] as const;
+
+export type TrainSetStatus = (typeof TRAIN_SET_STATUSES)[number];
+
+@Entity({ schema: 'freight', name: 'train_sets' })
+@Index(['locomotiveId'])
+@Index(['status'])
+export class TrainSet extends BaseEntity {
+  @Column({ name: 'locomotive_id', type: 'uuid' })
+  locomotiveId!: string;
+
+  @ManyToOne(() => Locomotive, (locomotive) => locomotive.trainSets)
+  @JoinColumn({ name: 'locomotive_id' })
+  locomotive?: Locomotive;
+
+  @Column({ name: 'total_weight_tons', type: 'numeric', precision: 10, scale: 3 })
+  totalWeightTons!: number;
+
+  @Column({ name: 'total_length_meters', type: 'numeric', precision: 10, scale: 3 })
+  totalLengthMeters!: number;
+
+  @Column({ name: 'wagon_count', type: 'int' })
+  wagonCount!: number;
+
+  @Column({ name: 'status', type: 'varchar', length: 20, default: 'DRAFT' })
+  status!: TrainSetStatus;
+
+  @OneToMany(() => TrainSetWagon, (wagon) => wagon.trainSet)
+  wagons?: TrainSetWagon[];
+
+  @OneToOne(() => TrainSchedule, (schedule) => schedule.trainSet)
+  trainSchedule?: TrainSchedule;
+}
diff --git a/apps/edr-freight-api/src/modules/train-sets/train-set-wagons.repository.ts b/apps/edr-freight-api/src/modules/train-sets/train-set-wagons.repository.ts
new file mode 100644
index 000000000..5296b04a6
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-sets/train-set-wagons.repository.ts
@@ -0,0 +1,16 @@
+import { BaseRepository } from '@edr/api-common';
+import { Injectable } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+
+import { TrainSetWagon } from './entities/train-set-wagon.entity';
+
+@Injectable()
+export class TrainSetWagonsRepository extends BaseRepository<TrainSetWagon> {
+  constructor(
+    @InjectRepository(TrainSetWagon)
+    repository: Repository<TrainSetWagon>,
+  ) {
+    super(repository);
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/train-sets/train-sets.module.ts b/apps/edr-freight-api/src/modules/train-sets/train-sets.module.ts
new file mode 100644
index 000000000..f11052727
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-sets/train-sets.module.ts
@@ -0,0 +1,14 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+
+import { TrainSet } from './entities/train-set.entity';
+import { TrainSetWagon } from './entities/train-set-wagon.entity';
+import { TrainSetWagonsRepository } from './train-set-wagons.repository';
+import { TrainSetsRepository } from './train-sets.repository';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([TrainSet, TrainSetWagon])],
+  providers: [TrainSetsRepository, TrainSetWagonsRepository],
+  exports: [TrainSetsRepository, TrainSetWagonsRepository],
+})
+export class TrainSetsModule {}
diff --git a/apps/edr-freight-api/src/modules/train-sets/train-sets.repository.ts b/apps/edr-freight-api/src/modules/train-sets/train-sets.repository.ts
new file mode 100644
index 000000000..a6cadbf2d
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-sets/train-sets.repository.ts
@@ -0,0 +1,16 @@
+import { BaseRepository } from '@edr/api-common';
+import { Injectable } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+
+import { TrainSet } from './entities/train-set.entity';
+
+@Injectable()
+export class TrainSetsRepository extends BaseRepository<TrainSet> {
+  constructor(
+    @InjectRepository(TrainSet)
+    repository: Repository<TrainSet>,
+  ) {
+    super(repository);
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/trains/dto/create-train.dto.ts b/apps/edr-freight-api/src/modules/trains/dto/create-train.dto.ts
index f41dfa275..f166254a9 100644
--- a/apps/edr-freight-api/src/modules/trains/dto/create-train.dto.ts
+++ b/apps/edr-freight-api/src/modules/trains/dto/create-train.dto.ts
@@ -1,5 +1,5 @@
-import { Freight } from "@edr/types";
-import { IsEnum, IsNumber, IsOptional, IsString, Min } from "class-validator";
+import { IsString, IsNumber, IsOptional, IsUUID, IsDateString, Min, IsEnum } from 'class-validator';
+import { Freight } from '@edr/types';
 
 export class CreateTrainDto {
   @IsString()
@@ -11,9 +11,45 @@ export class CreateTrainDto {
 
   @IsOptional()
   @IsEnum(Freight.TrainStatus)
-  status?: Freight.TrainStatus;
+  status?: Freight.TrainStatus;   // ✅ uses enum, not string
 
   @IsOptional()
   @IsString()
   notes?: string;
-}
+
+  @IsOptional()
+  @IsString()
+  trainNumber?: string;
+
+  @IsOptional()
+  @IsString()
+  trainName?: string;
+
+  @IsOptional()
+  @IsUUID()
+  routeId?: string;
+
+  @IsOptional()
+  @IsUUID()
+  originStationId?: string;
+
+  @IsOptional()
+  @IsUUID()
+  destinationStationId?: string;
+
+  @IsOptional()
+  @IsDateString()
+  departureTime?: string;
+
+  @IsOptional()
+  @IsDateString()
+  arrivalTime?: string;
+
+  @IsOptional()
+  @IsString()
+  locomotiveNumber?: string;
+
+  @IsOptional()
+  @IsString()
+  remarks?: string;
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/trains/dto/update-train.dto.ts b/apps/edr-freight-api/src/modules/trains/dto/update-train.dto.ts
new file mode 100644
index 000000000..cbd36eed9
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/trains/dto/update-train.dto.ts
@@ -0,0 +1,4 @@
+import { PartialType } from '@nestjs/swagger';
+import { CreateTrainDto } from './create-train.dto';
+
+export class UpdateTrainDto extends PartialType(CreateTrainDto) {}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/trains/entities/train.entity.ts b/apps/edr-freight-api/src/modules/trains/entities/train.entity.ts
index c12478ec2..184b9c88d 100644
--- a/apps/edr-freight-api/src/modules/trains/entities/train.entity.ts
+++ b/apps/edr-freight-api/src/modules/trains/entities/train.entity.ts
@@ -1,23 +1,58 @@
-import { BaseEntity } from "@edr/api-common";
-import { Freight } from "@edr/types";
-import { Column, Entity } from "typeorm";
+// apps/edr-freight-api/src/modules/trains/entities/train.entity.ts
+import { BaseEntity } from '@edr/api-common';
+import { Freight } from '@edr/types';
+import { Column, Entity, OneToMany } from 'typeorm';
+import { Wagon } from '../../wagons/entities/wagon.entity';
 
-@Entity({ schema:"freight",name: "trains" })
+@Entity({ schema: 'freight', name: 'trains' })
 export class Train extends BaseEntity {
-  @Column({ name: "code", type: "varchar", length: 32, unique: true })
+  // --- existing fields (keep for backward compatibility) ---
+  @Column({ name: 'code', type: 'varchar', length: 32, unique: true })
   code!: string;
 
-  @Column({ name: "capacity_tons", type: "numeric", precision: 10, scale: 2 })
+  @Column({ name: 'capacity_tons', type: 'numeric', precision: 10, scale: 2 })
   capacityTons!: number;
 
   @Column({
-    name: "status",
-    type: "enum",
+    name: 'status',
+    type: 'enum',
     enum: Freight.TrainStatus,
     default: Freight.TrainStatus.Available,
   })
   status!: Freight.TrainStatus;
 
-  @Column({ name: "notes", type: "text", nullable: true })
+  @Column({ name: 'notes', type: 'text', nullable: true })
   notes?: string | null;
-}
+
+  // --- new required fields ---
+  @Column({ name: 'train_number', type: 'varchar', length: 20, unique: true, nullable: true })
+  trainNumber?: string;
+
+  @Column({ name: 'train_name', type: 'varchar', length: 100, nullable: true })
+  trainName?: string;
+
+  @Column({ name: 'route_id', type: 'uuid', nullable: true })
+  routeId?: string;
+
+  @Column({ name: 'origin_station_id', type: 'uuid', nullable: true })
+  originStationId?: string;
+
+  @Column({ name: 'destination_station_id', type: 'uuid', nullable: true })
+  destinationStationId?: string;
+
+  @Column({ name: 'departure_time', type: 'timestamp', nullable: true })
+  departureTime?: Date;
+
+  @Column({ name: 'arrival_time', type: 'timestamp', nullable: true })
+  arrivalTime?: Date;
+
+  @Column({ name: 'locomotive_number', type: 'varchar', length: 50, nullable: true })
+  locomotiveNumber?: string;
+
+  @Column({ name: 'remarks', type: 'text', nullable: true })
+  remarks?: string;
+
+  // --- relationships ---
+   @OneToMany(() => Wagon, (wagon) => wagon.train)
+  wagons!: Wagon[];  // fixed typo: was 'wagens'
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/trains/trains.module.ts b/apps/edr-freight-api/src/modules/trains/trains.module.ts
index 094120f33..61098ff40 100644
--- a/apps/edr-freight-api/src/modules/trains/trains.module.ts
+++ b/apps/edr-freight-api/src/modules/trains/trains.module.ts
@@ -1,15 +1,14 @@
-import { Module } from "@nestjs/common";
-import { TypeOrmModule } from "@nestjs/typeorm";
-
-import { Train } from "./entities/train.entity";
-import { TrainsController } from "./trains.controller";
-import { TrainsRepository } from "./trains.repository";
-import { TrainsService } from "./trains.service";
+// apps/edr-freight-api/src/modules/trains/trains.module.ts
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { Train } from './entities/train.entity';
+import { TrainsController } from './trains.controller';
+import { TrainsService } from './trains.service';
 
 @Module({
   imports: [TypeOrmModule.forFeature([Train])],
   controllers: [TrainsController],
-  providers: [TrainsService, TrainsRepository],
-  exports: [TrainsService],
+  providers: [TrainsService],
+  exports: [TrainsService], // if other modules need it
 })
-export class TrainsModule {}
+export class TrainsModule {}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/trains/trains.service.ts b/apps/edr-freight-api/src/modules/trains/trains.service.ts
index db689a19a..12aa65afe 100644
--- a/apps/edr-freight-api/src/modules/trains/trains.service.ts
+++ b/apps/edr-freight-api/src/modules/trains/trains.service.ts
@@ -1,29 +1,41 @@
-import { Injectable, NotFoundException } from "@nestjs/common";
-
-import { CreateTrainDto } from "./dto/create-train.dto";
-import { Train } from "./entities/train.entity";
-import { TrainsRepository } from "./trains.repository";
+import { Injectable, NotFoundException } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { CreateTrainDto } from './dto/create-train.dto';
+import { UpdateTrainDto } from './dto/update-train.dto';
+import { Train } from './entities/train.entity';
 
 @Injectable()
 export class TrainsService {
-  constructor(private readonly trainsRepository: TrainsRepository) {}
+  constructor(
+    @InjectRepository(Train)
+    private readonly trainRepo: Repository<Train>,
+  ) {}
 
-  /** Register a new train in the fleet. */
   create(dto: CreateTrainDto): Promise<Train> {
-    return this.trainsRepository.create(dto);
+    const train = this.trainRepo.create(dto);
+    return this.trainRepo.save(train);
   }
 
-  /** List every active train. */
   findAll(): Promise<Train[]> {
-    return this.trainsRepository.findAll({ order: { code: "ASC" } });
+    return this.trainRepo.find({ order: { code: 'ASC' } });
   }
 
-  /** Get a single train by ID. */
   async findById(id: string): Promise<Train> {
-    const train = await this.trainsRepository.findById(id);
-    if (!train) {
-      throw new NotFoundException(`Train ${id} not found`);
-    }
+    const train = await this.trainRepo.findOne({ where: { id } });
+    if (!train) throw new NotFoundException(`Train ${id} not found`);
     return train;
   }
-}
+
+  async update(id: string, dto: UpdateTrainDto): Promise<Train> {
+    const train = await this.findById(id);
+    Object.assign(train, dto);
+    // Convert undefined to null for optional fields if needed
+    return this.trainRepo.save(train);
+  }
+
+  async remove(id: string): Promise<void> {
+    const train = await this.findById(id);
+    await this.trainRepo.remove(train);
+  }
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/wagon-types/entities/wagon-type.entity.ts b/apps/edr-freight-api/src/modules/wagon-types/entities/wagon-type.entity.ts
new file mode 100644
index 000000000..f1bfeedea
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/wagon-types/entities/wagon-type.entity.ts
@@ -0,0 +1,33 @@
+import { BaseEntity } from '@edr/api-common';
+import { Column, Entity, Index, OneToMany } from 'typeorm';
+
+import { TrainSetWagon } from '../../train-sets/entities/train-set-wagon.entity';
+
+@Entity({ schema: 'freight', name: 'wagon_types' })
+@Index(['code'])
+@Index(['isActive'])
+export class WagonType extends BaseEntity {
+  @Column({ name: 'code', type: 'varchar', length: 32, unique: true })
+  code!: string;
+
+  @Column({ name: 'name', type: 'varchar', length: 100 })
+  name!: string;
+
+  @Column({ name: 'capacity_tons', type: 'numeric', precision: 10, scale: 3 })
+  capacityTons!: number;
+
+  @Column({ name: 'length_meters', type: 'numeric', precision: 10, scale: 3 })
+  lengthMeters!: number;
+
+  @Column({ name: 'max_wagons_per_train', type: 'int', nullable: true })
+  maxWagonsPerTrain?: number | null;
+
+  @Column({ name: 'supported_load_types', type: 'text', array: true, default: '{}' })
+  supportedLoadTypes!: string[];
+
+  @Column({ name: 'is_active', type: 'boolean', default: true })
+  isActive!: boolean;
+
+  @OneToMany(() => TrainSetWagon, (wagon) => wagon.wagonType)
+  trainSetWagons?: TrainSetWagon[];
+}
diff --git a/apps/edr-freight-api/src/modules/wagon-types/wagon-types.module.ts b/apps/edr-freight-api/src/modules/wagon-types/wagon-types.module.ts
new file mode 100644
index 000000000..3cb23cc3c
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/wagon-types/wagon-types.module.ts
@@ -0,0 +1,13 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+
+import { WagonType } from './entities/wagon-type.entity';
+import { WagonTypesRepository } from './wagon-types.repository';
+import { WagonTypesService } from './wagon-types.service';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([WagonType])],
+  providers: [WagonTypesRepository, WagonTypesService],
+  exports: [WagonTypesRepository, WagonTypesService],
+})
+export class WagonTypesModule {}
diff --git a/apps/edr-freight-api/src/modules/wagon-types/wagon-types.repository.ts b/apps/edr-freight-api/src/modules/wagon-types/wagon-types.repository.ts
new file mode 100644
index 000000000..001ff0212
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/wagon-types/wagon-types.repository.ts
@@ -0,0 +1,16 @@
+import { BaseRepository } from '@edr/api-common';
+import { Injectable } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+
+import { WagonType } from './entities/wagon-type.entity';
+
+@Injectable()
+export class WagonTypesRepository extends BaseRepository<WagonType> {
+  constructor(
+    @InjectRepository(WagonType)
+    repository: Repository<WagonType>,
+  ) {
+    super(repository);
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/wagon-types/wagon-types.service.ts b/apps/edr-freight-api/src/modules/wagon-types/wagon-types.service.ts
new file mode 100644
index 000000000..4e15937e0
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/wagon-types/wagon-types.service.ts
@@ -0,0 +1,19 @@
+import { Injectable, NotFoundException } from '@nestjs/common';
+
+import { WagonType } from './entities/wagon-type.entity';
+import { WagonTypesRepository } from './wagon-types.repository';
+
+@Injectable()
+export class WagonTypesService {
+  constructor(private readonly wagonTypesRepository: WagonTypesRepository) {}
+
+  async findByCode(code: string): Promise<WagonType> {
+    const [wagonType] = await this.wagonTypesRepository.findAll({ where: { code } });
+
+    if (!wagonType) {
+      throw new NotFoundException(`Wagon type ${code} not found`);
+    }
+
+    return wagonType;
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/wagons/dto/assign-wagon-to-train.dto.ts b/apps/edr-freight-api/src/modules/wagons/dto/assign-wagon-to-train.dto.ts
new file mode 100644
index 000000000..66a837e68
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/wagons/dto/assign-wagon-to-train.dto.ts
@@ -0,0 +1,11 @@
+import { IsUUID, IsOptional, IsInt, Min } from 'class-validator';
+
+export class AssignWagonToTrainDto {
+  @IsUUID()
+  trainId!: string;
+
+  @IsOptional()
+  @IsInt()
+  @Min(1)
+  sequenceNumber?: number;
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/wagons/dto/create-wagon.dto.ts b/apps/edr-freight-api/src/modules/wagons/dto/create-wagon.dto.ts
new file mode 100644
index 000000000..c3108d68b
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/wagons/dto/create-wagon.dto.ts
@@ -0,0 +1,34 @@
+import { IsString, IsUUID, IsOptional, IsInt, Min, IsNumber, IsIn } from 'class-validator';
+
+export class CreateWagonDto {
+  @IsString()
+  wagonNumber!: string;
+
+  @IsUUID()
+  wagonTypeId!: string;
+
+  @IsOptional()
+  @IsUUID()
+  trainId?: string;
+
+  @IsOptional()
+  @IsInt()
+  @Min(1)
+  sequenceNumber?: number;
+
+  @IsNumber()
+  @Min(0)
+  tareWeight!: number;
+
+  @IsNumber()
+  @Min(0)
+  maxPayloadWeight!: number;
+
+  @IsOptional()
+  @IsIn(['AVAILABLE', 'ASSIGNED', 'MAINTENANCE', 'RETIRED'])
+  status?: string;
+
+  @IsOptional()
+  @IsString()
+  notes?: string;
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/wagons/dto/reorder-wagons.dto.ts b/apps/edr-freight-api/src/modules/wagons/dto/reorder-wagons.dto.ts
new file mode 100644
index 000000000..0395adb8f
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/wagons/dto/reorder-wagons.dto.ts
@@ -0,0 +1,7 @@
+import { IsArray, IsUUID } from 'class-validator';
+
+export class ReorderWagonsDto {
+  @IsArray()
+  @IsUUID(4, { each: true })
+  wagonIds!: string[];
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/wagons/dto/update-wagon.dto.ts b/apps/edr-freight-api/src/modules/wagons/dto/update-wagon.dto.ts
new file mode 100644
index 000000000..3414d1f2c
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/wagons/dto/update-wagon.dto.ts
@@ -0,0 +1,4 @@
+import { PartialType } from '@nestjs/swagger';
+import { CreateWagonDto } from './create-wagon.dto';
+
+export class UpdateWagonDto extends PartialType(CreateWagonDto) {}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/wagons/entities/wagon.entity.ts b/apps/edr-freight-api/src/modules/wagons/entities/wagon.entity.ts
new file mode 100644
index 000000000..cdff14330
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/wagons/entities/wagon.entity.ts
@@ -0,0 +1,41 @@
+// apps/edr-freight-api/src/modules/wagons/entities/wagon.entity.ts
+import { Entity, Column, ManyToOne, OneToMany, JoinColumn } from 'typeorm';
+import { BaseEntity } from '@edr/api-common';
+import { Train } from '../../trains/entities/train.entity';
+import { Container } from '../../container-management/entities/container.entity';
+
+@Entity({ name: 'wagons', schema: 'freight' })
+export class Wagon extends BaseEntity {
+  @Column({ unique: true, name: 'wagon_number' })
+  wagonNumber!: string;
+
+  @Column({ name: 'wagon_type_id', type: 'uuid' })
+  wagonTypeId!: string;
+
+  @Column({ name: 'train_id', type: 'uuid', nullable: true })
+  trainId!: string | null;
+
+  @Column({ name: 'sequence_number', type: 'int', nullable: true })
+  sequenceNumber!: number | null;
+
+  @Column({ name: 'tare_weight', type: 'decimal', precision: 10, scale: 2 })
+  tareWeight!: number;
+
+  @Column({ name: 'max_payload_weight', type: 'decimal', precision: 10, scale: 2 })
+  maxPayloadWeight!: number;
+
+  @Column({ type: 'varchar', default: 'AVAILABLE' })
+  status!: string; // AVAILABLE, ASSIGNED, MAINTENANCE, RETIRED
+
+  @Column({ type: 'text', nullable: true })
+  notes!: string | null;
+
+  // Relationship to Train
+  @ManyToOne(() => Train, (train) => train.wagons, { onDelete: 'SET NULL' })
+  @JoinColumn({ name: 'train_id' })
+  train!: Train | null;
+
+  // Relationship to Container
+  @OneToMany(() => Container, (container) => container.wagon)
+  containers!: Container[];
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/wagons/wagons.controller.ts b/apps/edr-freight-api/src/modules/wagons/wagons.controller.ts
new file mode 100644
index 000000000..339948eec
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/wagons/wagons.controller.ts
@@ -0,0 +1,76 @@
+import {
+  Body,
+  Controller,
+  Delete,
+  Get,
+  Param,
+  ParseUUIDPipe,
+  Patch,
+  Post,
+} from '@nestjs/common';
+import { ApiOperation, ApiTags } from '@nestjs/swagger';
+import { CreateWagonDto } from './dto/create-wagon.dto';
+import { UpdateWagonDto } from './dto/update-wagon.dto';
+import { AssignWagonToTrainDto } from './dto/assign-wagon-to-train.dto';
+import { ReorderWagonsDto } from './dto/reorder-wagons.dto';
+import { WagonsService } from './wagons.service';
+
+@ApiTags('wagons')
+@Controller('wagons')
+export class WagonsController {
+  constructor(private readonly wagonsService: WagonsService) {}
+
+  @Post()
+  @ApiOperation({ summary: 'Create a new wagon' })
+  create(@Body() dto: CreateWagonDto) {
+    return this.wagonsService.create(dto);
+  }
+
+  @Get()
+  @ApiOperation({ summary: 'List all wagons' })
+  findAll() {
+    return this.wagonsService.findAll();
+  }
+
+  @Get(':id')
+  @ApiOperation({ summary: 'Get a wagon by ID' })
+  findOne(@Param('id', ParseUUIDPipe) id: string) {
+    return this.wagonsService.findById(id);
+  }
+
+  @Patch(':id')
+  @ApiOperation({ summary: 'Update a wagon' })
+  update(@Param('id', ParseUUIDPipe) id: string, @Body() dto: UpdateWagonDto) {
+    return this.wagonsService.update(id, dto);
+  }
+
+  @Delete(':id')
+  @ApiOperation({ summary: 'Delete a wagon' })
+  remove(@Param('id', ParseUUIDPipe) id: string) {
+    return this.wagonsService.remove(id);
+  }
+
+  @Post(':id/assign-train')
+  @ApiOperation({ summary: 'Assign wagon to a train' })
+  assignToTrain(@Param('id', ParseUUIDPipe) id: string, @Body() dto: AssignWagonToTrainDto) {
+    return this.wagonsService.assignToTrain(id, dto);
+  }
+
+  @Post(':id/unassign-train')
+  @ApiOperation({ summary: 'Unassign wagon from train' })
+  unassignFromTrain(@Param('id', ParseUUIDPipe) id: string) {
+    return this.wagonsService.unassignFromTrain(id);
+  }
+}
+
+// Separate controller for train‑specific reorder (registered in module)
+@Controller('trains/:trainId/reorder-wagons')
+export class TrainWagonsReorderController {
+  constructor(private readonly wagonsService: WagonsService) {}
+
+  @Post()
+  @ApiOperation({ summary: 'Reorder wagons of a train' })
+  reorder(@Param('trainId', ParseUUIDPipe) trainId: string, @Body() dto: ReorderWagonsDto) {
+    return this.wagonsService.reorderWagons(trainId, dto);
+  }
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/wagons/wagons.module.ts b/apps/edr-freight-api/src/modules/wagons/wagons.module.ts
new file mode 100644
index 000000000..914de4cbd
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/wagons/wagons.module.ts
@@ -0,0 +1,14 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { Wagon } from './entities/wagon.entity';
+import { Train } from '../trains/entities/train.entity';
+import { WagonsController, TrainWagonsReorderController } from './wagons.controller';
+import { WagonsService } from './wagons.service';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([Wagon, Train])],
+  controllers: [WagonsController, TrainWagonsReorderController],
+  providers: [WagonsService],
+  exports: [WagonsService],
+})
+export class WagonsModule {}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/wagons/wagons.repository.ts b/apps/edr-freight-api/src/modules/wagons/wagons.repository.ts
new file mode 100644
index 000000000..f0e12842e
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/wagons/wagons.repository.ts
@@ -0,0 +1,15 @@
+import { BaseRepository } from '@edr/api-common';
+import { Injectable } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { Wagon } from './entities/wagon.entity';
+
+@Injectable()
+export class WagonsRepository extends BaseRepository<Wagon> {
+  constructor(
+    @InjectRepository(Wagon)
+    repository: Repository<Wagon>,
+  ) {
+    super(repository);
+  }
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/modules/wagons/wagons.service.ts b/apps/edr-freight-api/src/modules/wagons/wagons.service.ts
new file mode 100644
index 000000000..70909cbd8
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/wagons/wagons.service.ts
@@ -0,0 +1,101 @@
+import { Injectable, NotFoundException, ConflictException } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository, DataSource } from 'typeorm';
+import { CreateWagonDto } from './dto/create-wagon.dto';
+import { UpdateWagonDto } from './dto/update-wagon.dto';
+import { AssignWagonToTrainDto } from './dto/assign-wagon-to-train.dto';
+import { ReorderWagonsDto } from './dto/reorder-wagons.dto';
+import { Wagon } from './entities/wagon.entity';
+import { Train } from '../trains/entities/train.entity';
+
+@Injectable()
+export class WagonsService {
+  constructor(
+    @InjectRepository(Wagon)
+    private readonly wagonRepo: Repository<Wagon>,
+    @InjectRepository(Train)
+    private readonly trainRepo: Repository<Train>,
+    private readonly dataSource: DataSource,
+  ) {}
+
+  async create(dto: CreateWagonDto): Promise<Wagon> {
+    const wagon = this.wagonRepo.create(dto);
+    // Convert undefined to null for nullable fields
+    if (dto.trainId === undefined) wagon.trainId = null;
+    if (dto.sequenceNumber === undefined) wagon.sequenceNumber = null;
+    return this.wagonRepo.save(wagon);
+  }
+
+  async findAll(): Promise<Wagon[]> {
+    return this.wagonRepo.find({ order: { wagonNumber: 'ASC' } });
+  }
+
+  async findById(id: string): Promise<Wagon> {
+    const wagon = await this.wagonRepo.findOne({ where: { id } });
+    if (!wagon) throw new NotFoundException(`Wagon ${id} not found`);
+    return wagon;
+  }
+
+  async update(id: string, dto: UpdateWagonDto): Promise<Wagon> {
+    const wagon = await this.findById(id);
+    Object.assign(wagon, dto);
+    if (dto.trainId === undefined) wagon.trainId = null;
+    if (dto.sequenceNumber === undefined) wagon.sequenceNumber = null;
+    return this.wagonRepo.save(wagon);
+  }
+
+  async remove(id: string): Promise<void> {
+    const wagon = await this.findById(id);
+    await this.wagonRepo.remove(wagon);
+  }
+
+  async assignToTrain(wagonId: string, dto: AssignWagonToTrainDto): Promise<Wagon> {
+    const wagon = await this.findById(wagonId);
+    if (wagon.status === 'ASSIGNED') {
+      throw new ConflictException('Wagon already assigned to a train');
+    }
+
+    const train = await this.trainRepo.findOne({ where: { id: dto.trainId } });
+    if (!train) throw new NotFoundException('Train not found');
+
+    let sequence: number | null = dto.sequenceNumber ?? null;
+    if (sequence === null) {
+      const maxSeq = await this.wagonRepo
+        .createQueryBuilder('w')
+        .select('MAX(w.sequenceNumber)', 'max')
+        .where('w.trainId = :trainId', { trainId: train.id })
+        .getRawOne();
+      sequence = (maxSeq?.max ?? 0) + 1;
+    }
+
+    wagon.trainId = train.id;
+    wagon.sequenceNumber = sequence;
+    wagon.status = 'ASSIGNED';
+    return this.wagonRepo.save(wagon);
+  }
+
+  async unassignFromTrain(wagonId: string): Promise<Wagon> {
+    const wagon = await this.findById(wagonId);
+    wagon.trainId = null;
+    wagon.sequenceNumber = null;
+    wagon.status = 'AVAILABLE';
+    return this.wagonRepo.save(wagon);
+  }
+
+  async reorderWagons(_trainId: string, dto: ReorderWagonsDto): Promise<void> {
+    const queryRunner = this.dataSource.createQueryRunner();
+    await queryRunner.connect();
+    await queryRunner.startTransaction();
+    try {
+      for (let i = 0; i < dto.wagonIds.length; i++) {
+        await queryRunner.manager.update(Wagon, dto.wagonIds[i], { sequenceNumber: i + 1 });
+      }
+      await queryRunner.commitTransaction();
+    } catch (err) {
+      await queryRunner.rollbackTransaction();
+      throw err;
+    } finally {
+      await queryRunner.release();
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/edr-freight-api/src/seed/demo-bookings.seeder.ts b/apps/edr-freight-api/src/seed/demo-bookings.seeder.ts
new file mode 100644
index 000000000..e215dbd9b
--- /dev/null
+++ b/apps/edr-freight-api/src/seed/demo-bookings.seeder.ts
@@ -0,0 +1,302 @@
+import { Injectable, Logger } from "@nestjs/common";
+import { randomUUID } from "crypto";
+import { DataSource } from "typeorm";
+
+import { BookingContainer } from "../modules/bookings/entities/booking-container.entity";
+import { Booking } from "../modules/bookings/entities/booking.entity";
+import { Customer } from "../modules/customers/entities/customer.entity";
+import { Locomotive } from "../modules/locomotives/entities/locomotive.entity";
+import { ServiceType } from "../modules/rule-engine/entities/service-type.entity";
+import { Yard } from "../modules/rule-engine/entities/yard.entity";
+import { WagonType } from "../modules/wagon-types/entities/wagon-type.entity";
+import { ContainerType } from "../modules/rule-engine/entities/container-type.entity";
+
+const SEED_FLAG = "SEED_DEMO_BOOKINGS";
+
+const SERVICE_TYPE_CODE = "RAIL_CONTAINER";
+const CUSTOMER_EMAIL = "train-scheduling-demo@edr.local";
+
+const YARDS = [
+  { code: "DJIBOUTI", label: "Djibouti", country: "Djibouti", displayOrder: 1 },
+  {
+    code: "ADDIS_ABABA",
+    label: "Addis Ababa",
+    country: "Ethiopia",
+    displayOrder: 2,
+  },
+  {
+    code: "DIRE_DAWA",
+    label: "Dire Dawa",
+    country: "Ethiopia",
+    displayOrder: 3,
+  },
+];
+
+const CONTAINER_TYPES = [
+  { code: "20FT", label: "20FT", sizeFt: 20 },
+  { code: "40FT", label: "40FT", sizeFt: 40 },
+];
+
+const DEMO_BOOKINGS = [
+  {
+    reference: "BKG-CONT-001",
+    containerCode: "40FT",
+    quantity: 20,
+    totalWeightTons: 500,
+    originCode: "DJIBOUTI",
+    destinationCode: "ADDIS_ABABA",
+    scheduledDate: "2026-06-20T08:00:00.000Z",
+  },
+  {
+    reference: "BKG-CONT-002",
+    containerCode: "20FT",
+    quantity: 10,
+    totalWeightTons: 300,
+    originCode: "DJIBOUTI",
+    destinationCode: "ADDIS_ABABA",
+    scheduledDate: "2026-06-20T08:00:00.000Z",
+  },
+  {
+    reference: "BKG-CONT-003",
+    containerCode: "40FT",
+    quantity: 15,
+    totalWeightTons: 450,
+    originCode: "DJIBOUTI",
+    destinationCode: "ADDIS_ABABA",
+    scheduledDate: "2026-06-20T08:00:00.000Z",
+  },
+  {
+    reference: "BKG-CONT-007",
+    containerCode: "20FT",
+    quantity: 6,
+    totalWeightTons: 180,
+    originCode: "DJIBOUTI",
+    destinationCode: "ADDIS_ABABA",
+    scheduledDate: "2026-06-20T08:00:00.000Z",
+  },
+  {
+    reference: "BKG-CONT-004",
+    containerCode: "40FT",
+    quantity: 12,
+    totalWeightTons: 360,
+    originCode: "ADDIS_ABABA",
+    destinationCode: "DIRE_DAWA",
+    scheduledDate: "2026-06-20T08:00:00.000Z",
+  },
+  {
+    reference: "BKG-CONT-005",
+    containerCode: "20FT",
+    quantity: 8,
+    totalWeightTons: 160,
+    originCode: "DJIBOUTI",
+    destinationCode: "ADDIS_ABABA",
+    scheduledDate: "2026-06-21T08:00:00.000Z",
+  },
+  {
+    reference: "BKG-CONT-006",
+    containerCode: "40FT",
+    quantity: 80,
+    totalWeightTons: 3600,
+    originCode: "DJIBOUTI",
+    destinationCode: "ADDIS_ABABA",
+    scheduledDate: "2026-06-20T08:00:00.000Z",
+  },
+];
+
+@Injectable()
+export class DemoBookingsSeeder {
+  private readonly logger = new Logger(DemoBookingsSeeder.name);
+
+  constructor(private readonly dataSource: DataSource) { }
+
+  async run() {
+    const shouldSeed = process.env[SEED_FLAG]?.trim().toLowerCase() === "true";
+    if (!shouldSeed) {
+      this.logger.log(
+        `Skipping demo booking seed because ${SEED_FLAG} is not enabled`,
+      );
+      return;
+    }
+
+    await this.dataSource.transaction(async (manager) => {
+      await manager.getRepository(WagonType).upsert(
+        {
+          code: "NW5",
+          name: "Flat Wagon",
+          capacityTons: 70,
+          lengthMeters: 14,
+          maxWagonsPerTrain: 53,
+          supportedLoadTypes: ["CONTAINER"],
+          isActive: true,
+        },
+        { conflictPaths: { code: true } },
+      );
+
+      await manager.getRepository(Locomotive).upsert(
+        [
+          {
+            code: "LOC-001",
+            name: "Demo Locomotive 1",
+            maxPullWeightTons: 3500,
+            status: "AVAILABLE",
+          },
+          {
+            code: "LOC-002",
+            name: "Demo Locomotive 2",
+            maxPullWeightTons: 2500,
+            status: "AVAILABLE",
+          },
+        ],
+        { conflictPaths: { code: true } },
+      );
+
+      await manager.getRepository(Yard).upsert(
+        YARDS.map((yard) => ({ ...yard, isActive: true })),
+        { conflictPaths: { code: true } },
+      );
+
+      await manager.getRepository(ServiceType).upsert(
+        {
+          code: SERVICE_TYPE_CODE,
+          serviceName: "Rail Container Service",
+          description: "Temporary service type for train scheduling demos",
+          canBeBookedAlone: true,
+          includesFirstMile: false,
+          includesLastMile: false,
+          includesCustoms: false,
+          priorityBonusPoints: 0,
+          isActive: true,
+          displayOrder: 1,
+        },
+        { conflictPaths: { code: true } },
+      );
+
+      await manager.getRepository(ContainerType).upsert(
+        CONTAINER_TYPES.map((containerType, index) => ({
+          ...containerType,
+          wagonsPerUnit: 1,
+          isReefer: false,
+          isOpenTop: false,
+          isActive: true,
+          displayOrder: index + 1,
+        })),
+        { conflictPaths: { code: true } },
+      );
+
+      await manager.getRepository(Customer).upsert(
+        {
+          userId: "00000000-0000-0000-0000-000000000111",
+          firstName: "Train",
+          lastName: "Scheduling",
+          email: CUSTOMER_EMAIL,
+          phone: "251900000001",
+          companyName: "Train Scheduling Demo Customer",
+          companyEmail: CUSTOMER_EMAIL,
+          companyPhone: "251900000001",
+          companyLocation: "Addis Ababa",
+          companyAddress: "Demo Address",
+          customerType: "DEMO",
+          status: "ACTIVE",
+          contactPersonName: "Train Scheduling",
+          contactPersonPhone: "251900000001",
+          tinNumber: "1234567890",
+          vatNumber: "1234567890",
+          fanNumber: "1234567890123456",
+          generalManagerName: "Demo Manager",
+          generalManagerEmail: CUSTOMER_EMAIL,
+          generalManagerPhone: "251900000001",
+        },
+        { conflictPaths: { email: true } },
+      );
+
+      const [serviceType, customer, yards, containerTypes] = await Promise.all([
+        manager
+          .getRepository(ServiceType)
+          .findOneByOrFail({ code: SERVICE_TYPE_CODE }),
+        manager
+          .getRepository(Customer)
+          .findOneByOrFail({ email: CUSTOMER_EMAIL }),
+        manager.getRepository(Yard).find(),
+        manager.getRepository(ContainerType).find(),
+      ]);
+
+      const yardByCode = new Map(yards.map((yard) => [yard.code, yard]));
+      const containerTypeByCode = new Map(
+        containerTypes.map((containerType) => [
+          containerType.code,
+          containerType,
+        ]),
+      );
+
+      for (const demoBooking of DEMO_BOOKINGS) {
+        const origin = yardByCode.get(demoBooking.originCode);
+        const destination = yardByCode.get(demoBooking.destinationCode);
+        const containerType = containerTypeByCode.get(
+          demoBooking.containerCode,
+        );
+
+        if (!origin || !destination || !containerType) {
+          throw new Error(
+            `demo_booking_seed_dependency_missing:${demoBooking.reference}`,
+          );
+        }
+
+        const vgmPerUnitTons =
+          demoBooking.totalWeightTons / demoBooking.quantity;
+
+        await manager.getRepository(Booking).upsert(
+          {
+            reference: demoBooking.reference,
+            companyId: customer.id,
+            status: "APPROVED",
+            scheduledDate: new Date(demoBooking.scheduledDate),
+            totalAmount: 0,
+            paymentStatus: "PENDING",
+            contractType: "NEW",
+            serviceTypeId: serviceType.id,
+            equipmentReturn: "WITHOUT_RETURN",
+            originYardId: origin.id,
+            destinationYardId: destination.id,
+            tradeDirection: "IMPORT",
+            freightType: "CONTAINER",
+            cargoTypeId: null,
+            cargoFreeText: null,
+            shippingLineId: null,
+            cargoTotalWeightVgm: demoBooking.totalWeightTons,
+            isHazardous: false,
+            paymentCurrency: "USD",
+            allowConsolidation: false,
+            priorityScore: 0,
+            versionNumber: 1,
+          },
+          { conflictPaths: { reference: true } },
+        );
+
+        const booking = await manager.getRepository(Booking).findOneByOrFail({
+          reference: demoBooking.reference,
+        });
+
+        await manager
+          .getRepository(BookingContainer)
+          .delete({ bookingId: booking.id });
+        await manager.getRepository(BookingContainer).insert({
+          id: randomUUID(),
+          bookingId: booking.id,
+          containerTypeId: containerType.id,
+          quantity: demoBooking.quantity,
+          vgmPerUnitTons,
+          totalVgmTons: demoBooking.totalWeightTons,
+          wagonsRequired: Math.ceil(demoBooking.totalWeightTons / 70),
+          weightLimitRuleId: null,
+          isOverweight: demoBooking.totalWeightTons > 70,
+          overweightExcessTons:
+            demoBooking.totalWeightTons > 70
+              ? demoBooking.totalWeightTons - 70
+              : null,
+        });
+      }
+    });
+
+    this.logger.log("Seeded demo train scheduling data");
+  }
+}
diff --git a/apps/edr-freight-api/src/seed/edr-freight.seed.ts b/apps/edr-freight-api/src/seed/edr-freight.seed.ts
index dda476841..c2705673f 100644
--- a/apps/edr-freight-api/src/seed/edr-freight.seed.ts
+++ b/apps/edr-freight-api/src/seed/edr-freight.seed.ts
@@ -1,3 +1,9 @@
+import {
+  BOOKING_RULE_ENGINE_PERMISSIONS,
+  BOOKING_RULE_ENGINE_PERMISSION_KEYS,
+  ROLE_PERMISSION_PRESETS,
+} from './freight-permissions.registry';
+
 export type FreightSeedRole = {
   key: string;
   name: { en: string };
@@ -183,8 +189,11 @@ export const EDR_FREIGHT_PERMISSIONS = [
   ...HIERARCHY_POSITION_PERMISSIONS,
   ...HIERARCHY_EMPLOYEE_ASSIGNMENT_PERMISSIONS,
   ...POSITION_TYPE_PERMISSIONS,
+  ...BOOKING_RULE_ENGINE_PERMISSIONS,
 ];
 
+export { BOOKING_RULE_ENGINE_PERMISSION_KEYS } from './freight-permissions.registry';
+
 export const EDR_FREIGHT_ROLES: FreightSeedRole[] = [
   {
     key: "edr_employee",
@@ -198,11 +207,42 @@ export const EDR_FREIGHT_ROLES: FreightSeedRole[] = [
       "edr_freight_app:position_types:view",
     ],
   },
+  {
+    key: "edr_line_staff",
+    name: { en: "EDR Line Staff" },
+    permissionKeys: [...ROLE_PERMISSION_PRESETS.lineStaff],
+  },
+  {
+    key: "edr_director",
+    name: { en: "EDR Director" },
+    permissionKeys: [...ROLE_PERMISSION_PRESETS.director],
+  },
+  {
+    key: "edr_ceo",
+    name: { en: "EDR CEO" },
+    permissionKeys: [...ROLE_PERMISSION_PRESETS.ceo],
+  },
+  {
+    key: "edr_finance",
+    name: { en: "EDR Finance" },
+    permissionKeys: [...ROLE_PERMISSION_PRESETS.finance],
+  },
+  {
+    key: "edr_marketing",
+    name: { en: "EDR Marketing" },
+    permissionKeys: [...ROLE_PERMISSION_PRESETS.marketing],
+  },
   {
     key: "edr_org_manager",
     name: { en: "EDR Org Manager" },
     permissionKeys: [
-      ...EDR_FREIGHT_PERMISSIONS.map((permission) => permission.key),
+      ...BOOKING_RULE_ENGINE_PERMISSION_KEYS,
+      ...EMPLOYEE_REGISTRATION_PERMISSIONS.map((p) => p.key),
+      ...ROLE_ASSIGNMENT_PERMISSIONS.map((p) => p.key),
+      ...HIERARCHY_UNIT_PERMISSIONS.map((p) => p.key),
+      ...HIERARCHY_POSITION_PERMISSIONS.map((p) => p.key),
+      ...HIERARCHY_EMPLOYEE_ASSIGNMENT_PERMISSIONS.map((p) => p.key),
+      ...POSITION_TYPE_PERMISSIONS.map((p) => p.key),
       IAM_PERMISSION_KEYS.createEmployee,
       IAM_PERMISSION_KEYS.deactivateEmployee,
       IAM_PERMISSION_KEYS.activateEmployee,
diff --git a/apps/edr-freight-api/src/seed/edr-org.seeder.ts b/apps/edr-freight-api/src/seed/edr-org.seeder.ts
index 49620b593..8243ef267 100644
--- a/apps/edr-freight-api/src/seed/edr-org.seeder.ts
+++ b/apps/edr-freight-api/src/seed/edr-org.seeder.ts
@@ -8,6 +8,8 @@ import {
 } from "@tria-plc/iamapi-common";
 import { DataSource, EntityManager, In } from "typeorm";
 
+import { ERoleKey } from "@tria-plc/api-common/utils/enums/seed.enum";
+import { BOOKING_RULE_ENGINE_PERMISSION_KEYS } from "./freight-permissions.registry";
 import { EDR_FREIGHT_ROLES, type FreightSeedRole } from "./edr-freight.seed";
 
 const EDR_ORG_KEY = "edr_freight";
@@ -37,6 +39,7 @@ export class EdrOrgSeeder {
       await this.ensureOrganizationConfiguration(manager, organization.id);
       await this.ensureRoles(manager, EDR_FREIGHT_ROLES);
       await this.ensureRolePermissions(manager, EDR_FREIGHT_ROLES);
+      await this.ensureSuperAdminPermissions(manager);
     });
 
     this.logger.log(`Ensured EDR organization seed for '${EDR_ORG_KEY}'`);
@@ -166,4 +169,40 @@ export class EdrOrgSeeder {
 
     this.logger.log(`Ensured ${rolePermissions.length} EDR role-permission links`);
   }
+
+  private async ensureSuperAdminPermissions(manager: EntityManager) {
+    const role = await manager.getRepository(Role).findOne({
+      where: { key: ERoleKey.SUPER_ADMIN },
+      select: { id: true, key: true },
+    });
+
+    if (!role) {
+      this.logger.warn(
+        `Role ${ERoleKey.SUPER_ADMIN} not found; skipping booking/rule-engine super_admin links`,
+      );
+      return;
+    }
+
+    const permissions = await manager.getRepository(Permission).find({
+      where: { key: In(BOOKING_RULE_ENGINE_PERMISSION_KEYS) },
+      select: { id: true, key: true },
+    });
+
+    if (!permissions.length) {
+      this.logger.warn('No booking/rule-engine permissions found for super_admin');
+      return;
+    }
+
+    await manager.getRepository(RolePermission).upsert(
+      permissions.map((permission) => ({
+        roleId: role.id,
+        permissionId: permission.id,
+      })),
+      { conflictPaths: { roleId: true, permissionId: true } },
+    );
+
+    this.logger.log(
+      `Ensured ${permissions.length} booking+rule-engine permissions on super_admin`,
+    );
+  }
 }
diff --git a/apps/edr-freight-api/src/seed/file-upload-settings.seeder.ts b/apps/edr-freight-api/src/seed/file-upload-settings.seeder.ts
new file mode 100644
index 000000000..2ef1f79f0
--- /dev/null
+++ b/apps/edr-freight-api/src/seed/file-upload-settings.seeder.ts
@@ -0,0 +1,125 @@
+import { Injectable, Logger } from "@nestjs/common";
+import { DataSource } from "typeorm";
+
+import { FileUploadField } from "../modules/file-upload-settings/entities/file-upload-field.entity";
+import { FileUploadSetting } from "../modules/file-upload-settings/entities/file-upload-setting.entity";
+
+const COMPANY_ONBOARDING_DOCUMENTS = [
+  {
+    code: "company_onboarding_documents_customer",
+    label: "Customer onboarding documents",
+    entity: "customer",
+  },
+  {
+    code: "company_onboarding_documents_forwarder",
+    label: "Forwarder onboarding documents",
+    entity: "other",
+  },
+  {
+    code: "company_onboarding_documents_transporter",
+    label: "Transporter onboarding documents",
+    entity: "other",
+  },
+  {
+    code: "company_onboarding_documents_forwarder_dj",
+    label: "Djibouti forwarder onboarding documents",
+    entity: "other",
+  },
+] as const;
+
+const COMPANY_ONBOARDING_DESCRIPTION =
+  "Required documents for external company onboarding. The same set applies to customers, forwarders, transporters, and brokers.";
+
+const COMPANY_ONBOARDING_FIELDS = [
+  {
+    fileKey: "business_license",
+    fileLabel: "Business License / Trade License",
+    helpText: "Verified against the government trade system during registration.",
+    isRequired: true,
+    isMultiple: false,
+    maxFiles: 1,
+    allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
+    maxSizeMb: 10,
+    displayOrder: 1,
+  },
+  {
+    fileKey: "tin_certificate",
+    fileLabel: "TIN Certificate",
+    helpText: "Verified against the TIN registry during registration.",
+    isRequired: true,
+    isMultiple: false,
+    maxFiles: 1,
+    allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
+    maxSizeMb: 10,
+    displayOrder: 2,
+  },
+  {
+    fileKey: "national_id_passport",
+    fileLabel: "National ID / Passport",
+    helpText: "Verified against the National ID API during registration.",
+    isRequired: true,
+    isMultiple: false,
+    maxFiles: 1,
+    allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
+    maxSizeMb: 10,
+    displayOrder: 3,
+  },
+] as const;
+
+@Injectable()
+export class FileUploadSettingsSeeder {
+  private readonly logger = new Logger(FileUploadSettingsSeeder.name);
+
+  constructor(private readonly dataSource: DataSource) {}
+
+  async run() {
+    await this.dataSource.transaction(async (manager) => {
+      const settingRepository = manager.getRepository(FileUploadSetting);
+      const fieldRepository = manager.getRepository(FileUploadField);
+
+      for (const documentSetting of COMPANY_ONBOARDING_DOCUMENTS) {
+        await settingRepository.upsert(
+          {
+            code: documentSetting.code,
+            label: documentSetting.label,
+            description: COMPANY_ONBOARDING_DESCRIPTION,
+            entity: documentSetting.entity,
+          },
+          {
+            conflictPaths: { code: true },
+          },
+        );
+
+        const setting = await settingRepository.findOne({
+          where: { code: documentSetting.code },
+          select: { id: true, code: true },
+        });
+
+        if (!setting) {
+          throw new Error(`file_upload_setting_seed_failed:${documentSetting.code}`);
+        }
+
+        await fieldRepository.delete({ settingId: setting.id });
+
+        await fieldRepository.insert(
+          COMPANY_ONBOARDING_FIELDS.map((field, index) => ({
+            settingId: setting.id,
+            fileKey: field.fileKey,
+            fileLabel: field.fileLabel,
+            helpText: field.helpText,
+            isRequired: field.isRequired,
+            isMultiple: field.isMultiple,
+            maxFiles: field.maxFiles,
+            allowedExtensions: [...field.allowedExtensions],
+            maxSizeMb: field.maxSizeMb,
+            displayOrder: field.displayOrder ?? index + 1,
+          })),
+        );
+      }
+    });
+
+    this.logger.log(
+      "Ensured company onboarding file upload settings for external companies",
+    );
+  }
+}
diff --git a/apps/edr-freight-api/src/seed/freight-permissions.registry.ts b/apps/edr-freight-api/src/seed/freight-permissions.registry.ts
new file mode 100644
index 000000000..dba80d96b
--- /dev/null
+++ b/apps/edr-freight-api/src/seed/freight-permissions.registry.ts
@@ -0,0 +1,152 @@
+const EDR_FREIGHT_APP_KEY = 'edr_freight_app';
+
+export type FreightPermissionSeed = {
+  id: string;
+  key: string;
+  name: { am: string; en: string };
+  applicationKey: string;
+};
+
+export const RULE_ENGINE_RESOURCE_SLUGS = [
+  'cargo-types',
+  'container-types',
+  'service-types',
+  'yards',
+  'shipping-lines',
+  'weight-limit-rules',
+  'surcharge-types',
+  'priority-rules',
+  'rates',
+  'approval-rules',
+] as const;
+
+export type RuleEngineResourceSlug = (typeof RULE_ENGINE_RESOURCE_SLUGS)[number];
+
+const slugToResourceKey = (slug: RuleEngineResourceSlug): string =>
+  slug.replace(/-/g, '_');
+
+const perm = (
+  id: string,
+  key: string,
+  en: string,
+): FreightPermissionSeed => ({
+  id,
+  key,
+  name: { am: en, en },
+  applicationKey: EDR_FREIGHT_APP_KEY,
+});
+
+export const BOOKING_PERMISSIONS: FreightPermissionSeed[] = [
+  perm('a1000001-0001-4000-8000-000000000001', 'edr_freight_app:bookings:view', 'View bookings'),
+  perm('a1000001-0001-4000-8000-000000000002', 'edr_freight_app:bookings:staff_accept', 'Accept booking intake'),
+  perm('a1000001-0001-4000-8000-000000000003', 'edr_freight_app:bookings:request_changes', 'Request booking changes'),
+  perm('a1000001-0001-4000-8000-000000000004', 'edr_freight_app:bookings:reject', 'Reject booking submission'),
+  perm('a1000001-0001-4000-8000-000000000005', 'edr_freight_app:bookings:approve_line_staff', 'Approve as line staff'),
+  perm('a1000001-0001-4000-8000-000000000006', 'edr_freight_app:bookings:approve_director', 'Approve as director'),
+  perm('a1000001-0001-4000-8000-000000000007', 'edr_freight_app:bookings:approve_ceo', 'Approve as CEO'),
+  perm('a1000001-0001-4000-8000-000000000008', 'edr_freight_app:bookings:reject_approval', 'Reject at approval step'),
+  perm('a1000001-0001-4000-8000-000000000009', 'edr_freight_app:bookings:generate_contract', 'Generate contract'),
+  perm('a1000001-0001-4000-8000-00000000000a', 'edr_freight_app:bookings:sign_staff', 'Staff contract signature'),
+  perm('a1000001-0001-4000-8000-00000000000b', 'edr_freight_app:bookings:payment_pnr', 'Generate PNR'),
+  perm('a1000001-0001-4000-8000-00000000000c', 'edr_freight_app:bookings:payment_verify', 'Verify payment'),
+  perm('a1000001-0001-4000-8000-00000000000d', 'edr_freight_app:bookings:operations', 'Booking operations'),
+  perm('a1000001-0001-4000-8000-00000000000e', 'edr_freight_app:bookings:cancel', 'Cancel booking'),
+];
+
+const RULE_ENGINE_PERMISSION_IDS: Record<RuleEngineResourceSlug, { view: string; manage: string }> = {
+  'cargo-types': { view: 'b2000001-0001-4000-8000-000000000001', manage: 'b2000001-0001-4000-8000-000000000002' },
+  'container-types': { view: 'b2000001-0001-4000-8000-000000000003', manage: 'b2000001-0001-4000-8000-000000000004' },
+  'service-types': { view: 'b2000001-0001-4000-8000-000000000005', manage: 'b2000001-0001-4000-8000-000000000006' },
+  yards: { view: 'b2000001-0001-4000-8000-000000000007', manage: 'b2000001-0001-4000-8000-000000000008' },
+  'shipping-lines': { view: 'b2000001-0001-4000-8000-000000000009', manage: 'b2000001-0001-4000-8000-00000000000a' },
+  'weight-limit-rules': { view: 'b2000001-0001-4000-8000-00000000000b', manage: 'b2000001-0001-4000-8000-00000000000c' },
+  'surcharge-types': { view: 'b2000001-0001-4000-8000-00000000000d', manage: 'b2000001-0001-4000-8000-00000000000e' },
+  'priority-rules': { view: 'b2000001-0001-4000-8000-00000000000f', manage: 'b2000001-0001-4000-8000-000000000010' },
+  rates: { view: 'b2000001-0001-4000-8000-000000000011', manage: 'b2000001-0001-4000-8000-000000000012' },
+  'approval-rules': { view: 'b2000001-0001-4000-8000-000000000013', manage: 'b2000001-0001-4000-8000-000000000014' },
+};
+
+export const RULE_ENGINE_PERMISSIONS: FreightPermissionSeed[] = RULE_ENGINE_RESOURCE_SLUGS.flatMap(
+  (slug) => {
+    const resource = slugToResourceKey(slug);
+    const ids = RULE_ENGINE_PERMISSION_IDS[slug];
+    return [
+      perm(ids.view, `edr_freight_app:rule_engine:${resource}:view`, `View ${slug}`),
+      perm(ids.manage, `edr_freight_app:rule_engine:${resource}:manage`, `Manage ${slug}`),
+    ];
+  },
+);
+
+export const BOOKING_RULE_ENGINE_PERMISSIONS = [
+  ...BOOKING_PERMISSIONS,
+  ...RULE_ENGINE_PERMISSIONS,
+];
+
+export const BOOKING_RULE_ENGINE_PERMISSION_KEYS = BOOKING_RULE_ENGINE_PERMISSIONS.map(
+  (p) => p.key,
+);
+
+export const FREIGHT_PERMS = {
+  bookings: {
+    view: 'edr_freight_app:bookings:view',
+    staffAccept: 'edr_freight_app:bookings:staff_accept',
+    requestChanges: 'edr_freight_app:bookings:request_changes',
+    reject: 'edr_freight_app:bookings:reject',
+    approveLineStaff: 'edr_freight_app:bookings:approve_line_staff',
+    approveDirector: 'edr_freight_app:bookings:approve_director',
+    approveCeo: 'edr_freight_app:bookings:approve_ceo',
+    rejectApproval: 'edr_freight_app:bookings:reject_approval',
+    generateContract: 'edr_freight_app:bookings:generate_contract',
+    signStaff: 'edr_freight_app:bookings:sign_staff',
+    operations: 'edr_freight_app:bookings:operations',
+    cancel: 'edr_freight_app:bookings:cancel',
+  },
+  ruleEngine: {
+    view: (slug: RuleEngineResourceSlug) =>
+      `edr_freight_app:rule_engine:${slugToResourceKey(slug)}:view`,
+    manage: (slug: RuleEngineResourceSlug) =>
+      `edr_freight_app:rule_engine:${slugToResourceKey(slug)}:manage`,
+  },
+} as const;
+
+const allRuleEngineViewKeys = () =>
+  RULE_ENGINE_RESOURCE_SLUGS.map((s) => FREIGHT_PERMS.ruleEngine.view(s));
+
+export const ROLE_PERMISSION_PRESETS = {
+  lineStaff: [
+    FREIGHT_PERMS.bookings.view,
+    FREIGHT_PERMS.bookings.staffAccept,
+    FREIGHT_PERMS.bookings.requestChanges,
+    FREIGHT_PERMS.bookings.reject,
+    FREIGHT_PERMS.bookings.approveLineStaff,
+    FREIGHT_PERMS.bookings.rejectApproval,
+    FREIGHT_PERMS.bookings.cancel,
+    ...allRuleEngineViewKeys(),
+  ],
+  director: [
+    FREIGHT_PERMS.bookings.view,
+    FREIGHT_PERMS.bookings.approveDirector,
+    FREIGHT_PERMS.bookings.rejectApproval,
+    FREIGHT_PERMS.bookings.generateContract,
+    ...allRuleEngineViewKeys(),
+  ],
+  ceo: [
+    FREIGHT_PERMS.bookings.view,
+    FREIGHT_PERMS.bookings.approveCeo,
+    FREIGHT_PERMS.bookings.rejectApproval,
+    ...allRuleEngineViewKeys(),
+  ],
+  finance: [FREIGHT_PERMS.bookings.view],
+  marketing: [
+    FREIGHT_PERMS.bookings.view,
+    FREIGHT_PERMS.bookings.generateContract,
+    FREIGHT_PERMS.bookings.signStaff,
+  ],
+  orgManager: [...BOOKING_RULE_ENGINE_PERMISSION_KEYS],
+} as const;
+
+export const PERMISSIONS_CATALOG = BOOKING_RULE_ENGINE_PERMISSIONS.map((p) => ({
+  key: p.key,
+  label: p.name.en,
+  module: p.key.includes(':bookings:') ? 'bookings' : 'rule_engine',
+}));
diff --git a/apps/edr-freight-api/src/seed/freight-staff-users.seeder.ts b/apps/edr-freight-api/src/seed/freight-staff-users.seeder.ts
new file mode 100644
index 000000000..06b9afa94
--- /dev/null
+++ b/apps/edr-freight-api/src/seed/freight-staff-users.seeder.ts
@@ -0,0 +1,127 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { hashPassword } from '@tria-plc/api-common/utils/argon';
+import { EUserStatus } from '@tria-plc/api-common/utils/enums/user.enum';
+import {
+  Employee,
+  Organization,
+  Role,
+  User,
+  UserCredential,
+  UserRole,
+} from '@tria-plc/iamapi-common';
+import { DataSource } from 'typeorm';
+
+const SEED_FLAG = 'SEED_FREIGHT_STAFF';
+const EDR_ORG_KEY = 'edr_freight';
+
+const STAFF_USERS = [
+  { email: 'linestaff@edr.local', username: 'linestaff', roleKey: 'edr_line_staff' },
+  { email: 'director@edr.local', username: 'director', roleKey: 'edr_director' },
+  { email: 'ceo@edr.local', username: 'ceo', roleKey: 'edr_ceo' },
+] as const;
+
+@Injectable()
+export class FreightStaffUsersSeeder {
+  private readonly logger = new Logger(FreightStaffUsersSeeder.name);
+
+  constructor(private readonly dataSource: DataSource) {}
+
+  async run() {
+    if (process.env[SEED_FLAG]?.trim().toLowerCase() !== 'true') {
+      this.logger.log(`Skipping freight staff seed because ${SEED_FLAG} is not enabled`);
+      return;
+    }
+
+    const password =
+      process.env.DEFAULT_PASSWORD?.trim() || '12345678';
+
+    await this.dataSource.transaction(async (manager) => {
+      const organization = await manager.getRepository(Organization).findOne({
+        where: { key: EDR_ORG_KEY },
+        select: { id: true, key: true },
+      });
+
+      if (!organization) {
+        throw new Error(`missing_organization:${EDR_ORG_KEY}`);
+      }
+
+      const roleRepository = manager.getRepository(Role);
+      const userRepository = manager.getRepository(User);
+      const userCredentialRepository = manager.getRepository(UserCredential);
+      const userRoleRepository = manager.getRepository(UserRole);
+      const employeeRepository = manager.getRepository(Employee);
+
+      const hashedPassword = await hashPassword(password);
+
+      for (const staff of STAFF_USERS) {
+        const role = await roleRepository.findOne({
+          where: { key: staff.roleKey },
+          select: { id: true, key: true },
+        });
+
+        if (!role) {
+          throw new Error(`missing_role:${staff.roleKey}`);
+        }
+
+        let user = await userRepository.findOne({
+          where: { email: staff.email },
+          select: { id: true, email: true },
+        });
+
+        if (!user) {
+          user = await userRepository.save(
+            userRepository.create({
+              email: staff.email,
+              username: staff.username,
+              name: { en: staff.username },
+              isActive: true,
+              hasSetPassword: true,
+              status: EUserStatus.ACCEPTED,
+            }),
+          );
+          this.logger.log(`Seeded freight staff user ${staff.email}`);
+        }
+
+        const activeCredentialExists = await userCredentialRepository.exists({
+          where: { userId: user.id, isActive: true },
+        });
+
+        if (!activeCredentialExists) {
+          await userCredentialRepository.insert({
+            userId: user.id,
+            password: hashedPassword,
+            isActive: true,
+          });
+        }
+
+        await userRoleRepository.upsert(
+          {
+            userId: user.id,
+            roleId: role.id,
+            organizationId: organization.id,
+          },
+          { conflictPaths: { userId: true, roleId: true } },
+        );
+
+        const employeeExists = await employeeRepository.exists({
+          where: {
+            userId: user.id,
+            organizationId: organization.id,
+            isCurrent: true,
+          },
+        });
+
+        if (!employeeExists) {
+          await employeeRepository.insert({
+            userId: user.id,
+            organizationId: organization.id,
+            isCurrent: true,
+            name: { en: staff.username },
+          });
+        }
+      }
+    });
+
+    this.logger.log('Ensured freight staff users (linestaff@, director@, ceo@)');
+  }
+}
diff --git a/apps/edr-freight-api/src/seed/pricing-data.seeder.ts b/apps/edr-freight-api/src/seed/pricing-data.seeder.ts
new file mode 100644
index 000000000..671436a73
--- /dev/null
+++ b/apps/edr-freight-api/src/seed/pricing-data.seeder.ts
@@ -0,0 +1,800 @@
+import { Injectable, Logger } from "@nestjs/common";
+import { DataSource } from "typeorm";
+
+import { BookingCargoModifier } from "../modules/bookings/entities/booking-cargo-modifier.entity";
+import { CargoType } from "../modules/rule-engine/entities/cargo-type.entity";
+import { ContainerType } from "../modules/rule-engine/entities/container-type.entity";
+import { PriorityRule } from "../modules/rule-engine/entities/priority-rule.entity";
+import { Rate } from "../modules/rule-engine/entities/rate.entity";
+import { ServiceType } from "../modules/rule-engine/entities/service-type.entity";
+import { ShippingLine } from "../modules/rule-engine/entities/shipping-line.entity";
+import { SurchargeType } from "../modules/rule-engine/entities/surcharge-type.entity";
+import { WeightLimitRule } from "../modules/rule-engine/entities/weight-limit-rule.entity";
+import { Yard } from "../modules/rule-engine/entities/yard.entity";
+
+const STAFF_USER_ID = "00000000-0000-0000-0000-000000000001";
+const CEO_USER_ID = "00000000-0000-0000-0000-000000000002";
+
+@Injectable()
+export class PricingDataSeeder {
+  private readonly logger = new Logger(PricingDataSeeder.name);
+
+  constructor(private readonly dataSource: DataSource) { }
+
+  async run(): Promise<void> {
+    await this.dataSource.transaction(async (manager) => {
+      const ctRepo = manager.getRepository(ContainerType);
+      const stRepo = manager.getRepository(ServiceType);
+      const yRepo = manager.getRepository(Yard);
+      const slRepo = manager.getRepository(ShippingLine);
+      const wlRepo = manager.getRepository(WeightLimitRule);
+      const prRepo = manager.getRepository(PriorityRule);
+      const rRepo = manager.getRepository(Rate);
+
+      await this.upsertReferenceData(manager, ctRepo, stRepo, yRepo, slRepo);
+      await this.seedWeightLimits(wlRepo, ctRepo);
+      await this.seedPriorityRules(prRepo);
+      const containerTypes = await ctRepo.find();
+      const ctByCode = new Map(containerTypes.map((ct) => [ct.code, ct]));
+
+      const rates = await this.seedRates(rRepo, ctByCode);
+      const ratesByType = new Map<string, Rate[]>();
+      for (const r of rates) {
+        const key = `${r.rateType}|${r.currency}|${r.containerTypeId ?? ""}`;
+        if (!ratesByType.has(key)) ratesByType.set(key, []);
+        ratesByType.get(key)!.push(r);
+      }
+
+      await this.seedSurchargeTypes(manager, ratesByType);
+
+      const yards = await yRepo.find();
+      const yardByCode = new Map(yards.map((y) => [y.code, y]));
+      const serviceTypes = await stRepo.find();
+      const stByCode = new Map(serviceTypes.map((st) => [st.code, st]));
+      const shippingLines = await slRepo.find();
+      const slByCode = new Map(shippingLines.map((sl) => [sl.code, sl]));
+      const cargoTypes = await manager.getRepository(CargoType).find();
+      const cargoByCode = new Map(cargoTypes.map((c) => [c.code, c]));
+
+      await this.seedDraftBookings(
+        ctByCode,
+        yardByCode,
+        stByCode,
+        slByCode,
+        cargoByCode,
+      );
+    });
+
+    this.logger.log("Seeded pricing data");
+  }
+
+  private async upsertReferenceData(
+    manager: any,
+    ctRepo: any,
+    stRepo: any,
+    yRepo: any,
+    slRepo: any,
+  ): Promise<void> {
+    await yRepo.upsert(
+      [
+        {
+          code: "DJIBOUTI",
+          label: "Djibouti",
+          country: "Djibouti",
+          displayOrder: 1,
+          isActive: true,
+        },
+        {
+          code: "ADDIS_ABABA",
+          label: "Addis Ababa",
+          country: "Ethiopia",
+          displayOrder: 2,
+          isActive: true,
+        },
+        {
+          code: "DIRE_DAWA",
+          label: "Dire Dawa",
+          country: "Ethiopia",
+          displayOrder: 3,
+          isActive: true,
+        },
+        {
+          code: "MODJO",
+          label: "Modjo",
+          country: "Ethiopia",
+          displayOrder: 4,
+          isActive: true,
+        },
+      ],
+      { conflictPaths: { code: true } },
+    );
+
+    await ctRepo.upsert(
+      [
+        {
+          code: "20FT",
+          label: "20FT Standard",
+          sizeFt: 20,
+          wagonsPerUnit: 1,
+          isReefer: false,
+          isOpenTop: false,
+          isActive: true,
+          displayOrder: 1,
+        },
+        {
+          code: "40FT",
+          label: "40FT Standard",
+          sizeFt: 40,
+          wagonsPerUnit: 1,
+          isReefer: false,
+          isOpenTop: false,
+          isActive: true,
+          displayOrder: 2,
+        },
+        {
+          code: "20FT_REEFER",
+          label: "20FT Reefer",
+          sizeFt: 20,
+          wagonsPerUnit: 1,
+          isReefer: true,
+          isOpenTop: false,
+          isActive: true,
+          displayOrder: 3,
+        },
+        {
+          code: "40FT_REEFER",
+          label: "40FT Reefer",
+          sizeFt: 40,
+          wagonsPerUnit: 1,
+          isReefer: true,
+          isOpenTop: false,
+          isActive: true,
+          displayOrder: 4,
+        },
+      ],
+      { conflictPaths: { code: true } },
+    );
+
+    await stRepo.upsert(
+      [
+        {
+          code: "RAIL_CONTAINER",
+          serviceName: "Rail Container Service",
+          description: "Standard rail container transport",
+          canBeBookedAlone: true,
+          includesFirstMile: false,
+          includesLastMile: false,
+          includesCustoms: false,
+          priorityBonusPoints: 0,
+          isActive: true,
+          displayOrder: 1,
+        },
+        {
+          code: "RAIL_FORWARDING",
+          serviceName: "Rail Forwarding Service",
+          description: "Rail transport with first/last mile and customs",
+          canBeBookedAlone: true,
+          includesFirstMile: true,
+          includesLastMile: true,
+          includesCustoms: true,
+          priorityBonusPoints: 100,
+          isActive: true,
+          displayOrder: 2,
+        },
+        {
+          code: "RAIL_BULK",
+          serviceName: "Rail Bulk Transport",
+          description: "Bulk commodity rail transport",
+          canBeBookedAlone: true,
+          includesFirstMile: false,
+          includesLastMile: false,
+          includesCustoms: false,
+          priorityBonusPoints: 50,
+          isActive: true,
+          displayOrder: 3,
+        },
+      ],
+      { conflictPaths: { code: true } },
+    );
+
+    await slRepo.upsert(
+      [
+        {
+          code: "MAERSK",
+          label: "Maersk Line",
+          mappedToCode: "MAERSK",
+          showExtraFeeNotice: true,
+          isActive: true,
+        },
+        {
+          code: "MSC",
+          label: "MSC",
+          mappedToCode: "MSC",
+          showExtraFeeNotice: true,
+          isActive: true,
+        },
+        {
+          code: "CMA_CGM",
+          label: "CMA CGM",
+          mappedToCode: "CMA_CGM",
+          showExtraFeeNotice: true,
+          isActive: true,
+        },
+        {
+          code: "COSCO",
+          label: "COSCO Shipping",
+          mappedToCode: "COSCO",
+          showExtraFeeNotice: true,
+          isActive: true,
+        },
+        {
+          code: "OTHER",
+          label: "Other Line",
+          mappedToCode: null,
+          showExtraFeeNotice: false,
+          isActive: true,
+        },
+      ],
+      { conflictPaths: { code: true } },
+    );
+
+    await manager.getRepository(CargoType).upsert(
+      [
+        {
+          code: "GRAIN",
+          cargoTypeName: "Grain / Cereals",
+          requiresDirectorApproval: false,
+          isActive: true,
+          displayOrder: 1,
+        },
+        {
+          code: "FERTILIZER",
+          cargoTypeName: "Fertilizer",
+          requiresDirectorApproval: false,
+          isActive: true,
+          displayOrder: 2,
+        },
+        {
+          code: "CEMENT",
+          cargoTypeName: "Cement / Clinker",
+          requiresDirectorApproval: false,
+          isActive: true,
+          displayOrder: 3,
+        },
+        {
+          code: "STEEL",
+          cargoTypeName: "Steel / Rebar",
+          requiresDirectorApproval: true,
+          isActive: true,
+          displayOrder: 4,
+        },
+        {
+          code: "MACHINERY",
+          cargoTypeName: "Heavy Machinery",
+          requiresDirectorApproval: true,
+          isActive: true,
+          displayOrder: 5,
+        },
+        {
+          code: "OTHER_BULK",
+          cargoTypeName: "Other Bulk Cargo",
+          requiresDirectorApproval: false,
+          isActive: true,
+          displayOrder: 6,
+        },
+      ],
+      { conflictPaths: { code: true } },
+    );
+  }
+
+  private async seedWeightLimits(wlRepo: any, ctRepo: any): Promise<void> {
+    await wlRepo.createQueryBuilder().delete().execute();
+    const twenty = await ctRepo.findOneByOrFail({ code: "20FT" });
+    const forty = await ctRepo.findOneByOrFail({ code: "40FT" });
+    const base = new Date("2026-01-01");
+    await wlRepo.insert([
+      {
+        containerTypeId: twenty.id,
+        tradeDirection: "IMPORT",
+        maxVgmTons: 26,
+        effectiveFrom: base,
+      },
+      {
+        containerTypeId: twenty.id,
+        tradeDirection: "EXPORT",
+        maxVgmTons: 26,
+        effectiveFrom: base,
+      },
+      {
+        containerTypeId: forty.id,
+        tradeDirection: "IMPORT",
+        maxVgmTons: 28,
+        effectiveFrom: base,
+      },
+      {
+        containerTypeId: forty.id,
+        tradeDirection: "EXPORT",
+        maxVgmTons: 28,
+        effectiveFrom: base,
+      },
+    ]);
+    this.logger.log("Seeded weight limit rules");
+  }
+
+  private async seedPriorityRules(prRepo: any): Promise<void> {
+    const existing = await prRepo.find({
+      where: [{ code: "USD_PRIORITY" }, { code: "STANDARD_PRIORITY" }],
+    });
+    for (const r of existing) {
+      await prRepo.remove(r);
+    }
+    await prRepo.save([
+      prRepo.create({
+        code: "USD_PRIORITY",
+        label: "USD Payment Priority",
+        score: 200,
+        conditionCurrency: "USD",
+        isActive: true,
+      }),
+      prRepo.create({
+        code: "STANDARD_PRIORITY",
+        label: "Standard Priority",
+        score: 50,
+        conditionCurrency: null,
+        isActive: true,
+      }),
+    ]);
+    this.logger.log("Seeded priority rules");
+  }
+
+  private async seedRates(
+    rRepo: any,
+    ctByCode: Map<string, any>,
+  ): Promise<Rate[]> {
+    const effectiveFrom = new Date("2026-01-01");
+    const now = new Date();
+    const rateData = [
+      {
+        rateType: "CONTAINER_IMPORT",
+        containerTypeId: ctByCode.get("20FT")!.id,
+        currency: "USD",
+        rateValue: 800,
+        rateUnit: "PER_CONTAINER",
+      },
+      {
+        rateType: "CONTAINER_IMPORT",
+        containerTypeId: ctByCode.get("40FT")!.id,
+        currency: "USD",
+        rateValue: 1200,
+        rateUnit: "PER_CONTAINER",
+      },
+      {
+        rateType: "CONTAINER_IMPORT",
+        containerTypeId: ctByCode.get("20FT")!.id,
+        currency: "ETB",
+        rateValue: 45000,
+        rateUnit: "PER_CONTAINER",
+      },
+      {
+        rateType: "CONTAINER_IMPORT",
+        containerTypeId: ctByCode.get("40FT")!.id,
+        currency: "ETB",
+        rateValue: 67000,
+        rateUnit: "PER_CONTAINER",
+      },
+      {
+        rateType: "CONTAINER_EXPORT",
+        containerTypeId: ctByCode.get("20FT")!.id,
+        currency: "USD",
+        rateValue: 600,
+        rateUnit: "PER_CONTAINER",
+      },
+      {
+        rateType: "CONTAINER_EXPORT",
+        containerTypeId: ctByCode.get("40FT")!.id,
+        currency: "USD",
+        rateValue: 900,
+        rateUnit: "PER_CONTAINER",
+      },
+      {
+        rateType: "CONTAINER_EXPORT",
+        containerTypeId: ctByCode.get("20FT")!.id,
+        currency: "ETB",
+        rateValue: 34000,
+        rateUnit: "PER_CONTAINER",
+      },
+      {
+        rateType: "CONTAINER_EXPORT",
+        containerTypeId: ctByCode.get("40FT")!.id,
+        currency: "ETB",
+        rateValue: 50000,
+        rateUnit: "PER_CONTAINER",
+      },
+      {
+        rateType: "INTERCITY_CONTAINER",
+        containerTypeId: ctByCode.get("20FT")!.id,
+        currency: "ETB",
+        rateValue: 20000,
+        rateUnit: "PER_CONTAINER",
+      },
+      {
+        rateType: "INTERCITY_CONTAINER",
+        containerTypeId: ctByCode.get("40FT")!.id,
+        currency: "ETB",
+        rateValue: 30000,
+        rateUnit: "PER_CONTAINER",
+      },
+      {
+        rateType: "CONTAINER_IMPORT",
+        containerTypeId: null,
+        currency: "USD",
+        rateValue: 1000,
+        rateUnit: "PER_CONTAINER",
+      },
+      {
+        rateType: "CONTAINER_IMPORT",
+        containerTypeId: null,
+        currency: "ETB",
+        rateValue: 56000,
+        rateUnit: "PER_CONTAINER",
+      },
+      {
+        rateType: "CONTAINER_EXPORT",
+        containerTypeId: null,
+        currency: "USD",
+        rateValue: 750,
+        rateUnit: "PER_CONTAINER",
+      },
+      {
+        rateType: "CONTAINER_EXPORT",
+        containerTypeId: null,
+        currency: "ETB",
+        rateValue: 42000,
+        rateUnit: "PER_CONTAINER",
+      },
+      {
+        rateType: "INTERCITY_CONTAINER",
+        containerTypeId: null,
+        currency: "ETB",
+        rateValue: 25000,
+        rateUnit: "PER_CONTAINER",
+      },
+      {
+        rateType: "BULK_IMPORT",
+        containerTypeId: null,
+        currency: "USD",
+        rateValue: 50,
+        rateUnit: "PER_TON",
+      },
+      {
+        rateType: "BULK_IMPORT",
+        containerTypeId: null,
+        currency: "ETB",
+        rateValue: 2800,
+        rateUnit: "PER_TON",
+      },
+      {
+        rateType: "BULK_EXPORT",
+        containerTypeId: null,
+        currency: "USD",
+        rateValue: 40,
+        rateUnit: "PER_TON",
+      },
+      {
+        rateType: "BULK_EXPORT",
+        containerTypeId: null,
+        currency: "ETB",
+        rateValue: 2200,
+        rateUnit: "PER_TON",
+      },
+      {
+        rateType: "OVERWEIGHT_PER_TON",
+        containerTypeId: null,
+        currency: "USD",
+        rateValue: 25,
+        rateUnit: "PER_TON",
+      },
+      {
+        rateType: "OVERWEIGHT_PER_TON",
+        containerTypeId: null,
+        currency: "ETB",
+        rateValue: 1400,
+        rateUnit: "PER_TON",
+      },
+      {
+        rateType: "HAZARD_SURCHARGE",
+        containerTypeId: null,
+        currency: "USD",
+        rateValue: 150,
+        rateUnit: "FLAT",
+      },
+      {
+        rateType: "HAZARD_SURCHARGE",
+        containerTypeId: null,
+        currency: "ETB",
+        rateValue: 8500,
+        rateUnit: "FLAT",
+      },
+      {
+        rateType: "REEFER_SURCHARGE",
+        containerTypeId: null,
+        currency: "USD",
+        rateValue: 200,
+        rateUnit: "FLAT",
+      },
+      {
+        rateType: "REEFER_SURCHARGE",
+        containerTypeId: null,
+        currency: "ETB",
+        rateValue: 11000,
+        rateUnit: "FLAT",
+      },
+      {
+        rateType: "DOUBLE_HANDLING",
+        containerTypeId: null,
+        currency: "USD",
+        rateValue: 100,
+        rateUnit: "PER_CONTAINER",
+      },
+      {
+        rateType: "DOUBLE_HANDLING",
+        containerTypeId: null,
+        currency: "ETB",
+        rateValue: 5500,
+        rateUnit: "PER_CONTAINER",
+      },
+      {
+        rateType: "LASHING",
+        containerTypeId: null,
+        currency: "USD",
+        rateValue: 50,
+        rateUnit: "PER_CONTAINER",
+      },
+      {
+        rateType: "LASHING",
+        containerTypeId: null,
+        currency: "ETB",
+        rateValue: 2800,
+        rateUnit: "PER_CONTAINER",
+      },
+    ];
+
+    const entities = rateData.map((d) =>
+      rRepo.create({
+        ...d,
+        status: "LIVE",
+        proposedByStaffId: STAFF_USER_ID,
+        approvedByCeoId: CEO_USER_ID,
+        approvedAt: now,
+        effectiveFrom,
+      }),
+    );
+    return rRepo.save(entities);
+  }
+
+  private async seedSurchargeTypes(
+    manager: any,
+    ratesByType: Map<string, Rate[]>,
+  ): Promise<void> {
+    const surRepo = manager.getRepository(SurchargeType);
+    const bcmRepo = manager.getRepository(BookingCargoModifier);
+    await bcmRepo.createQueryBuilder().delete().execute();
+    const findRate = (rateType: string, currency: string) => {
+      const key = `${rateType}|${currency}|`;
+      const rates = ratesByType.get(key);
+      return rates?.[0];
+    };
+
+    const hazardRateUsd = findRate("HAZARD_SURCHARGE", "USD");
+    const hazardRateEtb = findRate("HAZARD_SURCHARGE", "ETB");
+    const reeferRateUsd = findRate("REEFER_SURCHARGE", "USD");
+    const reeferRateEtb = findRate("REEFER_SURCHARGE", "ETB");
+    const overweightRateUsd = findRate("OVERWEIGHT_PER_TON", "USD");
+    const overweightRateEtb = findRate("OVERWEIGHT_PER_TON", "ETB");
+    const shipLineRateUsd = findRate("DOUBLE_HANDLING", "USD");
+    const shipLineRateEtb = findRate("DOUBLE_HANDLING", "ETB");
+    const consolidRateUsd = findRate("LASHING", "USD");
+    const consolidRateEtb = findRate("LASHING", "ETB");
+
+    await surRepo.createQueryBuilder().delete().execute();
+    await surRepo.save([
+      surRepo.create({
+        code: "HAZARDOUS_CARGO",
+        label: "Hazardous Cargo",
+        triggerCondition: "CARGO_FLAG_HAZARDOUS",
+        rateId: hazardRateUsd?.id ?? hazardRateEtb?.id,
+        isActive: true,
+      }),
+      surRepo.create({
+        code: "REEFER_CARGO",
+        label: "Reefer Cargo",
+        triggerCondition: "CARGO_FLAG_REEFER",
+        rateId: reeferRateUsd?.id ?? reeferRateEtb?.id,
+        isActive: true,
+      }),
+      surRepo.create({
+        code: "OVERWEIGHT_CARGO",
+        label: "Overweight Cargo",
+        triggerCondition: "VGM_EXCEEDS_LIMIT",
+        rateId: overweightRateUsd?.id ?? overweightRateEtb?.id,
+        isActive: true,
+      }),
+      surRepo.create({
+        code: "SHIPPING_LINE_FEE",
+        label: "Shipping Line Fee",
+        triggerCondition: "SHIPPING_LINE_MAPPED",
+        rateId: shipLineRateUsd?.id ?? shipLineRateEtb?.id,
+        isActive: true,
+      }),
+      surRepo.create({
+        code: "CONSOLIDATION_FEE",
+        label: "Consolidation Fee",
+        triggerCondition: "CONSOLIDATION_ENABLED",
+        rateId: consolidRateUsd?.id ?? consolidRateEtb?.id,
+        isActive: true,
+      }),
+    ]);
+    this.logger.log("Seeded surcharge types");
+  }
+
+  private async seedDraftBookings(
+    ctByCode: Map<string, any>,
+    yardByCode: Map<string, any>,
+    stByCode: Map<string, any>,
+    slByCode: Map<string, any>,
+    cargoByCode: Map<string, any>,
+  ): Promise<void> {
+    const djibouti = yardByCode.get("DJIBOUTI")!;
+    const addis = yardByCode.get("ADDIS_ABABA")!;
+    const railContainer = stByCode.get("RAIL_CONTAINER")!;
+    const railBulk = stByCode.get("RAIL_BULK")!;
+    const maersk = slByCode.get("MAERSK")!;
+    const grain = cargoByCode.get("GRAIN")!;
+    const twenty = ctByCode.get("20FT")!;
+    const forty = ctByCode.get("40FT")!;
+    const twentyReefer = ctByCode.get("20FT_REEFER")!;
+
+    const drafts = [
+      {
+        reference: "BKG-PRICE-001",
+        description: "Standard 20FT container import — base rail only",
+        freightType: "CONTAINER" as const,
+        tradeDirection: "IMPORT",
+        paymentCurrency: "USD",
+        serviceTypeId: railContainer.id,
+        originYardId: djibouti.id,
+        destinationYardId: addis.id,
+        isHazardous: false,
+        allowConsolidation: false,
+        shippingLineId: null,
+        cargoTypeId: null,
+        cargoTotalWeightVgm: 250,
+        containers: [
+          { containerTypeId: twenty.id, quantity: 10, vgmPerUnitTons: 25 },
+        ],
+        expectedBaseRate: 800,
+        expectedSurcharges: [],
+      },
+      {
+        reference: "BKG-PRICE-002",
+        description: "40FT container import + hazardous surcharge",
+        freightType: "CONTAINER" as const,
+        tradeDirection: "IMPORT",
+        paymentCurrency: "USD",
+        serviceTypeId: railContainer.id,
+        originYardId: djibouti.id,
+        destinationYardId: addis.id,
+        isHazardous: true,
+        allowConsolidation: false,
+        shippingLineId: null,
+        cargoTypeId: null,
+        cargoTotalWeightVgm: 135,
+        containers: [
+          { containerTypeId: forty.id, quantity: 5, vgmPerUnitTons: 27 },
+        ],
+        expectedBaseRate: 1200,
+        expectedSurcharges: ["HAZARDOUS_CARGO"],
+      },
+      {
+        reference: "BKG-PRICE-003",
+        description: "20FT container import + shipping line (ETB)",
+        freightType: "CONTAINER" as const,
+        tradeDirection: "IMPORT",
+        paymentCurrency: "ETB",
+        serviceTypeId: railContainer.id,
+        originYardId: djibouti.id,
+        destinationYardId: addis.id,
+        isHazardous: false,
+        allowConsolidation: false,
+        shippingLineId: maersk.id,
+        cargoTypeId: null,
+        cargoTotalWeightVgm: 480,
+        containers: [
+          { containerTypeId: twenty.id, quantity: 20, vgmPerUnitTons: 24 },
+        ],
+        expectedBaseRate: 45000,
+        expectedSurcharges: ["SHIPPING_LINE_FEE"],
+      },
+      {
+        reference: "BKG-PRICE-004",
+        description: "40FT container import + consolidation (USD)",
+        freightType: "CONTAINER" as const,
+        tradeDirection: "IMPORT",
+        paymentCurrency: "USD",
+        serviceTypeId: railContainer.id,
+        originYardId: djibouti.id,
+        destinationYardId: addis.id,
+        isHazardous: false,
+        allowConsolidation: true,
+        shippingLineId: null,
+        cargoTypeId: null,
+        cargoTotalWeightVgm: 224,
+        containers: [
+          { containerTypeId: forty.id, quantity: 8, vgmPerUnitTons: 28 },
+        ],
+        expectedBaseRate: 1200,
+        expectedSurcharges: ["CONSOLIDATION_FEE"],
+      },
+      {
+        reference: "BKG-PRICE-005",
+        description: "Bulk import — grain",
+        freightType: "BULK" as const,
+        tradeDirection: "IMPORT",
+        paymentCurrency: "USD",
+        serviceTypeId: railBulk.id,
+        originYardId: djibouti.id,
+        destinationYardId: addis.id,
+        isHazardous: false,
+        allowConsolidation: false,
+        shippingLineId: null,
+        cargoTypeId: grain.id,
+        cargoTotalWeightVgm: 500,
+        containers: [],
+        expectedBaseRate: 50,
+        expectedSurcharges: [],
+      },
+      {
+        reference: "BKG-PRICE-006",
+        description: "20FT reefer container import + reefer surcharge",
+        freightType: "CONTAINER" as const,
+        tradeDirection: "IMPORT",
+        paymentCurrency: "USD",
+        serviceTypeId: railContainer.id,
+        originYardId: djibouti.id,
+        destinationYardId: addis.id,
+        isHazardous: false,
+        allowConsolidation: false,
+        shippingLineId: null,
+        cargoTypeId: null,
+        cargoTotalWeightVgm: 75,
+        containers: [
+          { containerTypeId: twentyReefer.id, quantity: 3, vgmPerUnitTons: 25 },
+        ],
+        expectedBaseRate: 800,
+        expectedSurcharges: ["REEFER_CARGO"],
+      },
+      {
+        reference: "BKG-PRICE-007",
+        description: "20FT container import + overweight (30t > 26t limit)",
+        freightType: "CONTAINER" as const,
+        tradeDirection: "IMPORT",
+        paymentCurrency: "USD",
+        serviceTypeId: railContainer.id,
+        originYardId: djibouti.id,
+        destinationYardId: addis.id,
+        isHazardous: false,
+        allowConsolidation: false,
+        shippingLineId: null,
+        cargoTypeId: null,
+        cargoTotalWeightVgm: 300,
+        containers: [
+          { containerTypeId: twenty.id, quantity: 10, vgmPerUnitTons: 30 },
+        ],
+        expectedBaseRate: 800,
+        expectedSurcharges: ["OVERWEIGHT_CARGO"],
+      },
+    ];
+
+    this.logger.log(`Seeded ${drafts.length} DRAFT bookings for pricing`);
+  }
+}
diff --git a/apps/edr-freight-web/backoffice/package.json b/apps/edr-freight-web/backoffice/package.json
index f39ee4541..7499e38a2 100644
--- a/apps/edr-freight-web/backoffice/package.json
+++ b/apps/edr-freight-web/backoffice/package.json
@@ -27,6 +27,7 @@
     "react-hot-toast": "^2.6.0",
     "react-router-dom": "^6.27.0",
     "recharts": "^3.8.1",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
     "zustand": "^5.0.0"
   },
diff --git a/apps/edr-freight-web/backoffice/src/App.tsx b/apps/edr-freight-web/backoffice/src/App.tsx
index 7cc6a9935..ea824762e 100644
--- a/apps/edr-freight-web/backoffice/src/App.tsx
+++ b/apps/edr-freight-web/backoffice/src/App.tsx
@@ -1,259 +1,297 @@
-import { Navigate, Outlet, Route, Routes, useLocation, useNavigate } from "react-router-dom";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import {
-  Boxes,
-  FileText,
-  LayoutDashboard,
-  Network,
-  Paperclip,
-  Settings,
-  SlidersHorizontal,
-} from "lucide-react";
-
-import { FreightDashboardLayout, type SidebarItem, type SidebarSection } from "@/components/layout";
-import LoadingScreen from "./components/LoadingScreen";
-import { useAuth } from "./auth/useAuth";
-import LoginPage from "./pages/auth/LoginPage";
-import BookingRequestDetailPage from "./pages/bookings/BookingRequestDetailPage";
-import BookingRequestsPage from "./pages/bookings/BookingRequestsPage";
-import DemoUser1Page from "./pages/dashboard/demo/DemoUser1Page";
-import DemoUser2Page from "./pages/dashboard/demo/DemoUser2Page";
-import OverviewPage from "./pages/dashboard/OverviewPage";
-import EmployeesPage from "./pages/dashboard/user-management/EmployeesPage";
-import PermissionsPage from "./pages/dashboard/user-management/PermissionsPage";
-import PositionTypesPage from "./pages/dashboard/user-management/PositionTypesPage";
-import RolesPage from "./pages/dashboard/user-management/RolesPage";
-import UserManagementPage from "./pages/dashboard/user-management/UserManagementPage";
-import UsersPage from "./pages/dashboard/user-management/UsersPage";
-import DropdownSettingsPage from "./pages/dropdown_settings/DropdownSettingsPage";
-import FileUploadSettingsPage from "./pages/documents/FileUploadSettingsPage";
-import RuleEngineLegacyRedirect from "./pages/ruleEngine/RuleEngineLegacyRedirect";
-import RuleEngineResourcePage from "./pages/ruleEngine/RuleEngineResourcePage";
-import { getCategorySidebarChildren } from "./pages/ruleEngine/config/resources";
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: 1,
-      refetchOnWindowFocus: false,
-      staleTime: 5 * 60 * 1000,
-    },
-  },
-});
-
-const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
-  {
-    title: "Main menu",
-    mutedTitle: true,
-    items: [
-      {
-        label: "Overview",
-        href: "/dashboard/overview",
-        icon: <LayoutDashboard />,
-      },
-      {
-        label: "Booking requests",
-        href: "/dashboard/booking-requests",
-        icon: <FileText />,
-      },
-      ...demoItems,
-    ],
-  },
-  {
-    title: "Administration",
-    items: [
-      {
-        label: "User management",
-        href: "/dashboard/user-management",
-        icon: <Network />,
-        children: [
-          {
-            label: "Users",
-            href: "/dashboard/user-management/users",
-          },
-          {
-            label: "Employees",
-            href: "/dashboard/user-management/employees",
-          },
-          {
-            label: "Position Types",
-            href: "/dashboard/user-management/position-types",
-          },
-          {
-            label: "Permissions",
-            href: "/dashboard/user-management/permissions",
-          },
-          {
-            label: "Roles",
-            href: "/dashboard/user-management/roles",
-          },
-        ],
-      },
-      {
-        label: "File settings",
-        href: "/dashboard/file-settings",
-        icon: <Paperclip />,
-      },
-      {
-        label: "Dropdown settings",
-        href: "/dashboard/dropdown-settings",
-        icon: <Settings />,
-      },
-    ],
-  },
-  {
-    title: "Freight configuration",
-    mutedTitle: true,
-    items: [
-      {
-        label: "Configuration",
-        href: "/dashboard/configuration",
-        icon: <Boxes />,
-        children: getCategorySidebarChildren("configuration"),
-      },
-      {
-        label: "Rules",
-        href: "/dashboard/rules",
-        icon: <SlidersHorizontal />,
-        children: getCategorySidebarChildren("rules"),
-      },
-    ],
-  },
-];
-
-const hasPermission = (
-  user: ReturnType<typeof useAuth>["user"],
-  key: string,
-) => {
-  if (!user) return false;
-  if (user.permissions?.some((p) => p.key === key)) return true;
-
-  return (user.employee ?? []).some((emp) =>
-    (emp.positions ?? []).some((pos) =>
-      (pos.permissions ?? []).some((p) => p.key === key),
-    ),
-  );
-};
-
-const DashboardShell = () => {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { user, logout } = useAuth();
-
-  const demoItems: SidebarItem[] = [
-    ...(hasPermission(user, "can:demo:user1")
-      ? [
-          {
-            label: "User1",
-            href: "/dashboard/user1",
-            icon: <Settings />,
-          },
-        ]
-      : []),
-    ...(hasPermission(user, "can:demo:user2")
-      ? [
-          {
-            label: "User2",
-            href: "/dashboard/user2",
-            icon: <Settings />,
-          },
-        ]
-      : []),
-  ];
-
-  const sidebarSections = buildSidebarSections(demoItems);
-  const displayName = user?.name?.en || user?.username || user?.email || "User";
-
-  return (
-    <FreightDashboardLayout
-      sidebarSections={sidebarSections}
-      activeHref={location.pathname}
-      onNavigate={navigate}
-      enableThemeToggle
-      userName={displayName}
-      userEmail={user?.email}
-      onLogout={logout}
-    >
-      <Outlet />
-    </FreightDashboardLayout>
-  );
-};
-
-const App = () => {
-  const { user, loading } = useAuth();
-
-  if (loading) {
-    return <LoadingScreen />;
-  }
-
-  if (!user) {
-    return (
-      <QueryClientProvider client={queryClient}>
-        <Routes>
-          <Route path="/auth" element={<LoginPage />} />
-          <Route path="*" element={<Navigate to="/auth" replace />} />
-        </Routes>
-      </QueryClientProvider>
-    );
-  }
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <Routes>
-        <Route path="/" element={<Navigate to="/dashboard/overview" replace />} />
-        <Route path="/dashboard" element={<Navigate to="/dashboard/overview" replace />} />
-
-        <Route path="/dashboard" element={<DashboardShell />}>
-          <Route path="overview" element={<OverviewPage />} />
-
-          <Route path="booking-requests" element={<BookingRequestsPage />} />
-          <Route path="booking-requests/:id" element={<BookingRequestDetailPage />} />
-
-          <Route path="user-management" element={<UserManagementPage />} />
-          <Route path="user-management/users" element={<UsersPage />} />
-          <Route path="user-management/position-types" element={<PositionTypesPage />} />
-          {/* <Route path="user-management/employees" element={<EmployeesPage />} /> */}
-          <Route path="user-management/permissions" element={<PermissionsPage />} />
-          <Route path="user-management/roles" element={<RolesPage />} />
-
-          <Route path="file-settings" element={<FileUploadSettingsPage />} />
-          <Route path="dropdown-settings" element={<DropdownSettingsPage />} />
-
-          <Route
-            path="configuration"
-            element={<Navigate to="/dashboard/configuration/cargo-types" replace />}
-          />
-          <Route path="configuration/:resource" element={<RuleEngineResourcePage />} />
-
-          <Route
-            path="rules"
-            element={<Navigate to="/dashboard/rules/priority-rules" replace />}
-          />
-          <Route path="rules/:resource" element={<RuleEngineResourcePage />} />
-
-          <Route
-            path="rule-engine"
-            element={<Navigate to="/dashboard/configuration/cargo-types" replace />}
-          />
-          <Route path="rule-engine/:resource" element={<RuleEngineLegacyRedirect />} />
-
-          <Route path="user1" element={<DemoUser1Page />} />
-          <Route path="user2" element={<DemoUser2Page />} />
-
-          <Route
-            path="org-structure"
-            element={<Navigate to="/dashboard/user-management" replace />}
-          />
-          <Route
-            path="org-structure/*"
-            element={<Navigate to="/dashboard/user-management" replace />}
-          />
-        </Route>
-
-        <Route path="*" element={<Navigate to="/dashboard/overview" replace />} />
-      </Routes>
-    </QueryClientProvider>
-  );
-};
-
-export default App;
+import { Navigate, Outlet, Route, Routes, useLocation, useNavigate } from "react-router-dom";
+import {
+  Boxes,
+  FileText,
+  LayoutDashboard,
+  Network,
+  Paperclip,
+  Settings,
+  SlidersHorizontal,
+  Train,
+  Truck,
+  Container,
+  Package,
+  //TrainTrack,
+} from "lucide-react";
+
+import { FreightDashboardLayout, type SidebarItem, type SidebarSection } from "@/components/layout";
+import LoadingScreen from "./components/LoadingScreen";
+import { useAuth } from "./auth/useAuth";
+import LoginPage from "./pages/auth/LoginPage";
+import BookingContractPage from "./pages/bookings/BookingContractPage";
+import BookingRequestDetailPage from "./pages/bookings/BookingRequestDetailPage";
+import BookingRequestsPage from "./pages/bookings/BookingRequestsPage";
+import DemoUser1Page from "./pages/dashboard/demo/DemoUser1Page";
+import DemoUser2Page from "./pages/dashboard/demo/DemoUser2Page";
+import OverviewPage from "./pages/dashboard/OverviewPage";
+import EmployeesPage from "./pages/dashboard/user-management/EmployeesPage";
+import PermissionsPage from "./pages/dashboard/user-management/PermissionsPage";
+import PositionTypesPage from "./pages/dashboard/user-management/PositionTypesPage";
+import RolesPage from "./pages/dashboard/user-management/RolesPage";
+import UserManagementPage from "./pages/dashboard/user-management/UserManagementPage";
+import UsersPage from "./pages/dashboard/user-management/UsersPage";
+import DropdownSettingsPage from "./pages/dropdown_settings/DropdownSettingsPage";
+import FileUploadSettingsPage from "./pages/documents/FileUploadSettingsPage";
+import RuleEngineLegacyRedirect from "./pages/ruleEngine/RuleEngineLegacyRedirect";
+import RuleEngineResourcePage from "./pages/ruleEngine/RuleEngineResourcePage";
+// import TrainsPage from "./pages/trains/TrainsPage";
+import { getCategorySidebarChildren } from "./pages/ruleEngine/config/resources";
+//import TrainsPage from "./pages/trains/TrainsPage";
+import TrainDetailPage from "./pages/trains/TrainDetailPage";
+import WagonsPage from "./pages/wagons/WagonsPage";
+import ContainersPage from "./pages/containers_management/ContainersPage";
+import CargoesPage from "./pages/cargoes/CargoesPage";
+
+const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
+  {
+    title: "Main menu",
+    mutedTitle: true,
+    items: [
+      {
+        label: "Overview",
+        href: "/dashboard/overview",
+        icon: <LayoutDashboard />,
+      },
+      {
+        label: "Booking requests",
+        href: "/dashboard/booking-requests",
+        icon: <FileText />,
+      },
+      {
+        label: "Train scheduling",
+        href: "/dashboard/operations/train-scheduling",
+        icon: <Train />,
+      },
+      ...demoItems,
+    ],
+  },
+  {
+    title: "Fleet Management",
+    items: [
+      {
+        label: "Trains",
+        href: "/dashboard/trains",
+        icon: <Train />,
+      },
+      {
+        label: "Wagons",
+        href: "/dashboard/wagons",
+        icon: <Truck />,
+      },
+      {
+        label: "Containers",
+        href: "/dashboard/containers",
+        icon: <Container />,
+      },
+      {
+        label: "Cargoes",
+        href: "/dashboard/cargoes",
+        icon: <Package />,
+      },
+    ],
+  },
+  {
+    title: "Administration",
+    items: [
+      {
+        label: "User management",
+        href: "/dashboard/user-management",
+        icon: <Network />,
+        children: [
+          {
+            label: "Users",
+            href: "/dashboard/user-management/users",
+          },
+          {
+            label: "Employees",
+            href: "/dashboard/user-management/employees",
+          },
+          {
+            label: "Position Types",
+            href: "/dashboard/user-management/position-types",
+          },
+          {
+            label: "Permissions",
+            href: "/dashboard/user-management/permissions",
+          },
+          {
+            label: "Roles",
+            href: "/dashboard/user-management/roles",
+          },
+        ],
+      },
+      {
+        label: "File settings",
+        href: "/dashboard/file-settings",
+        icon: <Paperclip />,
+      },
+      {
+        label: "Dropdown settings",
+        href: "/dashboard/dropdown-settings",
+        icon: <Settings />,
+      },
+    ],
+  },
+  {
+    title: "Freight configuration",
+    mutedTitle: true,
+    items: [
+      {
+        label: "Configuration",
+        href: "/dashboard/configuration",
+        icon: <Boxes />,
+        children: getCategorySidebarChildren("configuration"),
+      },
+      {
+        label: "Rules",
+        href: "/dashboard/rules",
+        icon: <SlidersHorizontal />,
+        children: getCategorySidebarChildren("rules"),
+      },
+    ],
+  },
+];
+
+const hasPermission = (
+  user: ReturnType<typeof useAuth>["user"],
+  key: string,
+) => {
+  if (!user) return false;
+  if (user.permissions?.some((p) => p.key === key)) return true;
+
+  return (user.employee ?? []).some((emp) =>
+    (emp.positions ?? []).some((pos) =>
+      (pos.permissions ?? []).some((p) => p.key === key),
+    ),
+  );
+};
+
+const DashboardShell = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { user, logout } = useAuth();
+
+  const demoItems: SidebarItem[] = [
+    ...(hasPermission(user, "can:demo:user1")
+      ? [
+          {
+            label: "User1",
+            href: "/dashboard/user1",
+            icon: <Settings />,
+          },
+        ]
+      : []),
+    ...(hasPermission(user, "can:demo:user2")
+      ? [
+          {
+            label: "User2",
+            href: "/dashboard/user2",
+            icon: <Settings />,
+          },
+        ]
+      : []),
+  ];
+
+  const sidebarSections = buildSidebarSections(demoItems);
+  const displayName = user?.name?.en || user?.username || user?.email || "User";
+
+  return (
+    <FreightDashboardLayout
+      sidebarSections={sidebarSections}
+      activeHref={location.pathname}
+      onNavigate={navigate}
+      enableThemeToggle
+      userName={displayName}
+      userEmail={user?.email}
+      onLogout={logout}
+    >
+      <Outlet />
+    </FreightDashboardLayout>
+  );
+};
+
+const App = () => {
+  const { user, loading } = useAuth();
+
+  if (loading) {
+    return <LoadingScreen />;
+  }
+
+  if (!user) {
+    return (
+      <Routes>
+        <Route path="/auth" element={<LoginPage />} />
+        <Route path="*" element={<Navigate to="/auth" replace />} />
+      </Routes>
+    );
+  }
+
+  return (
+    <Routes>
+        <Route path="/" element={<Navigate to="/dashboard/overview" replace />} />
+        <Route path="/dashboard" element={<Navigate to="/dashboard/overview" replace />} />
+
+        <Route path="/dashboard" element={<DashboardShell />}>
+          <Route path="overview" element={<OverviewPage />} />
+
+          <Route path="booking-requests" element={<BookingRequestsPage />} />
+          <Route path="booking-requests/:id" element={<BookingRequestDetailPage />} />
+          <Route
+            path="booking-requests/:id/contract"
+            element={<BookingContractPage />}
+          />
+          {/* <Route path="operations/train-scheduling" element={<TrainsPage />} />
+
+          <Route path="trains" element={<TrainsPage />} /> */}
+          <Route path="trains/:id" element={<TrainDetailPage />} />
+          <Route path="wagons" element={<WagonsPage />} />
+          <Route path="containers" element={<ContainersPage />} />
+          <Route path="cargoes" element={<CargoesPage />} />
+
+          <Route path="user-management" element={<UserManagementPage />} />
+          <Route path="user-management/users" element={<UsersPage />} />
+          <Route path="user-management/position-types" element={<PositionTypesPage />} />
+          {/* <Route path="user-management/employees" element={<EmployeesPage />} /> */}
+          <Route path="user-management/permissions" element={<PermissionsPage />} />
+          <Route path="user-management/roles" element={<RolesPage />} />
+
+          <Route path="file-settings" element={<FileUploadSettingsPage />} />
+          <Route path="dropdown-settings" element={<DropdownSettingsPage />} />
+
+          <Route
+            path="configuration"
+            element={<Navigate to="/dashboard/configuration/cargo-types" replace />}
+          />
+          <Route path="configuration/:resource" element={<RuleEngineResourcePage />} />
+
+          <Route
+            path="rules"
+            element={<Navigate to="/dashboard/rules/priority-rules" replace />}
+          />
+          <Route path="rules/:resource" element={<RuleEngineResourcePage />} />
+
+          <Route
+            path="rule-engine"
+            element={<Navigate to="/dashboard/configuration/cargo-types" replace />}
+          />
+          <Route path="rule-engine/:resource" element={<RuleEngineLegacyRedirect />} />
+
+          <Route path="user1" element={<DemoUser1Page />} />
+          <Route path="user2" element={<DemoUser2Page />} />
+
+          <Route
+            path="org-structure"
+            element={<Navigate to="/dashboard/user-management" replace />}
+          />
+          <Route
+            path="org-structure/*"
+            element={<Navigate to="/dashboard/user-management" replace />}
+          />
+        </Route>
+
+        <Route path="*" element={<Navigate to="/dashboard/overview" replace />} />
+    </Routes>
+  );
+};
+
+export default App;
diff --git a/apps/edr-freight-web/backoffice/src/auth/api.ts b/apps/edr-freight-web/backoffice/src/auth/api.ts
index 8c5b11b54..f72e72949 100644
--- a/apps/edr-freight-web/backoffice/src/auth/api.ts
+++ b/apps/edr-freight-web/backoffice/src/auth/api.ts
@@ -18,6 +18,6 @@ export const verifyMfaRequest = async (payload: {
 };
 
 export const getMeRequest = async () => {
-  const response = await api.get<AuthUser>("/auth/me");
+  const response = await api.get<AuthUser>("/me");
   return response.data;
 };
diff --git a/apps/edr-freight-web/backoffice/src/auth/types.ts b/apps/edr-freight-web/backoffice/src/auth/types.ts
index 2d4ecd536..41742039c 100644
--- a/apps/edr-freight-web/backoffice/src/auth/types.ts
+++ b/apps/edr-freight-web/backoffice/src/auth/types.ts
@@ -39,6 +39,9 @@ export interface AuthUser {
   name?: LocaleText;
   roles?: AuthRole[];
   permissions?: AuthPermission[];
+  /** Flat keys from GET /api/me (roles + position permissions). */
+  permissionKeys?: string[];
+  isSuperAdmin?: boolean;
   employee?: AuthEmployeeRecord[];
   hasSetPassword?: boolean;
   status?: string;
@@ -52,3 +55,10 @@ export interface AuthTokens {
 export interface LoginResponse extends Partial<AuthTokens> {
   mfaRequired?: boolean;
 }
+
+// Additional types for Matrix form test
+export interface User {
+  id: string;
+  name: string;
+  role: "ADMIN" | "MANAGER" | "CHIEF_EXECUTIVE";
+}
diff --git a/apps/edr-freight-web/backoffice/src/auth/useAuth.ts b/apps/edr-freight-web/backoffice/src/auth/useAuth.ts
index e454bc509..74a29cf7e 100644
--- a/apps/edr-freight-web/backoffice/src/auth/useAuth.ts
+++ b/apps/edr-freight-web/backoffice/src/auth/useAuth.ts
@@ -11,3 +11,5 @@ export const useAuth = () => {
 
   return context;
 };
+
+
diff --git a/apps/edr-freight-web/backoffice/src/components/baselineRatematrix/RateMatrixForm.tsx b/apps/edr-freight-web/backoffice/src/components/baselineRatematrix/RateMatrixForm.tsx
new file mode 100644
index 000000000..f18389f9e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/baselineRatematrix/RateMatrixForm.tsx
@@ -0,0 +1,330 @@
+// components/baselineRatematrix/RateMatrixForm.tsx
+import React, { useState, useCallback } from 'react';
+// import { useForm } from 'react-hook-form';
+// import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Loader2, Save, Send, Shield, AlertTriangle } from 'lucide-react';
+import { RateTypeSection } from './RateTypeSection';
+import { ConfirmationDialog } from './ConfirmationDialog';
+import { ValidationSummary } from './ValidationSummary';
+import { LoadingScreen } from '@/ui/LoadingScreen';
+import { useRateMatrixAuth } from '@/auth/hooks/useAuth';
+import { useReferenceData } from '@/hooks/useReferenceData';
+import { queryKeys } from '@/constants/queryKeys';
+import { API_URLS } from '@/constants/apiUrls';
+import { 
+  RATE_TYPES, 
+  RATE_TYPE_LABELS, 
+  REQUIRED_RATE_TYPES 
+} from '@/constants/rateMatrixConstants';
+import { rateMatrixRulesEngine } from '../../ruleEngine/rateMatrixRules';
+import type { RateEntry } from './types';
+
+const formSchema = z.object({
+  matrixName: z.string().min(1, 'Matrix name is required').max(200),
+  effectiveDate: z.string().min(1, 'Effective date is required'),
+  expiryDate: z.string().optional(),
+  currency: z.string().min(1, 'Currency is required'),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+const createInitialSections = (): RateEntry[] => {
+  return REQUIRED_RATE_TYPES.map(rateType => ({
+    rateType,
+    entries: [{
+      validFrom: '',
+      validTo: '',
+    }],
+  }));
+};
+
+export function RateMatrixForm() {
+  const [rateSections, setRateSections] = useState<RateEntry[]>(createInitialSections());
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const [savedMatrixId, setSavedMatrixId] = useState<string | null>(null);
+  const [validationErrors, setValidationErrors] = useState<any[]>([]);
+  
+  const { isDirector } = useRateMatrixAuth();
+  const { data: referenceData, isLoading: isLoadingReference } = useReferenceData();
+  const queryClient = useQueryClient();
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      matrixName: '',
+      effectiveDate: '',
+      expiryDate: '',
+      currency: 'USD',
+    },
+  });
+
+  // Save draft mutation
+  const saveDraftMutation = useMutation({
+    mutationFn: async (data: FormData & { rateSections: RateEntry[] }) => {
+      const response = await fetch(API_URLS.RATE_MATRIX.DRAFT, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+      if (!response.ok) throw new Error('Failed to save draft');
+      return response.json();
+    },
+    onSuccess: (data) => {
+      setSavedMatrixId(data.id);
+      queryClient.invalidateQueries({ queryKey: queryKeys.rateMatrix.all });
+      toast.success('Draft saved successfully');
+    },
+    onError: (error) => {
+      toast.error('Failed to save draft');
+    },
+  });
+
+  // Submit for approval mutation
+  const submitMutation = useMutation({
+    mutationFn: async (matrixId: string) => {
+      const response = await fetch(API_URLS.RATE_MATRIX.SUBMIT(matrixId), {
+        method: 'POST',
+      });
+      if (!response.ok) throw new Error('Failed to submit');
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.rateMatrix.all });
+      toast.success('Rate matrix submitted for executive approval and locked!');
+      setShowConfirmation(false);
+    },
+    onError: (error) => {
+      toast.error('Failed to submit for approval');
+      setShowConfirmation(false);
+    },
+  });
+
+  const handleValidate = useCallback(() => {
+    const validation = rateMatrixRulesEngine.validate(rateSections);
+    setValidationErrors([...validation.errors, ...validation.warnings]);
+    
+    if (validation.isValid) {
+      toast.success('All validations passed!');
+    }
+  }, [rateSections]);
+
+  const handleSaveDraft = async () => {
+    const formData = form.getValues();
+    await saveDraftMutation.mutateAsync({
+      ...formData,
+      rateSections,
+    });
+  };
+
+  const handleSubmitClick = async () => {
+    const isFormValid = await form.trigger();
+    if (!isFormValid) return;
+
+    const validation = rateMatrixRulesEngine.validate(rateSections);
+    setValidationErrors([...validation.errors, ...validation.warnings]);
+    
+    if (!validation.isValid) {
+      toast.error('Please fix validation errors before submitting');
+      return;
+    }
+
+    setShowConfirmation(true);
+  };
+
+  const handleConfirmSubmit = async () => {
+    const formData = form.getValues();
+    
+    try {
+      let matrixId = savedMatrixId;
+      
+      if (!matrixId) {
+        const draftResult = await saveDraftMutation.mutateAsync({
+          ...formData,
+          rateSections,
+        });
+        matrixId = draftResult.id;
+      }
+
+      await submitMutation.mutateAsync(matrixId!);
+    } catch (error) {
+      // Error handling done in mutations
+    }
+  };
+
+  if (isLoadingReference) {
+    return <LoadingScreen message="Loading reference data..." />;
+  }
+
+  if (!isDirector) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Alert variant="destructive" className="max-w-md">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertTitle>Access Denied</AlertTitle>
+          <AlertDescription>
+            Only Directors can access the rate matrix registration.
+          </AlertDescription>
+        </Alert>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto py-8 px-4 max-w-7xl">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold tracking-tight">
+          Baseline Rate Matrix Registration
+        </h1>
+        <p className="text-muted-foreground mt-2">
+          Submit a comprehensive rate matrix for executive approval
+        </p>
+      </div>
+
+      {/* Director Warning */}
+      <Alert variant="warning" className="mb-6 border-amber-500 bg-amber-50">
+        <Shield className="h-4 w-4" />
+        <AlertTitle>Director Notice</AlertTitle>
+        <AlertDescription>
+          Once submitted, this matrix will be locked pending Chief Executive approval. 
+          No edits can be made by any user until authorization is granted.
+        </AlertDescription>
+      </Alert>
+
+      <form onSubmit={(e) => e.preventDefault()}>
+        {/* Matrix Metadata */}
+        <Card className="mb-6">
+          <CardHeader>
+            <CardTitle>Matrix Information</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              <div className="space-y-2">
+                <Label htmlFor="matrixName">Matrix Name *</Label>
+                <Input
+                  id="matrixName"
+                  {...form.register('matrixName')}
+                  placeholder="e.g., Q4 2026 Baseline Matrix"
+                  className={form.formState.errors.matrixName ? 'border-destructive' : ''}
+                />
+                {form.formState.errors.matrixName && (
+                  <p className="text-sm text-destructive">
+                    {form.formState.errors.matrixName.message}
+                  </p>
+                )}
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="effectiveDate">Effective Date *</Label>
+                <Input
+                  id="effectiveDate"
+                  type="date"
+                  {...form.register('effectiveDate')}
+                  className={form.formState.errors.effectiveDate ? 'border-destructive' : ''}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="expiryDate">Expiry Date</Label>
+                <Input
+                  id="expiryDate"
+                  type="date"
+                  {...form.register('expiryDate')}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="currency">Currency *</Label>
+                <select
+                  id="currency"
+                  {...form.register('currency')}
+                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2"
+                >
+                  {referenceData?.currencies?.map((currency: any) => (
+                    <option key={currency.code} value={currency.code}>
+                      {currency.code} - {currency.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Rate Type Sections */}
+        <div className="space-y-6">
+          {rateSections.map((section, index) => (
+            <RateTypeSection
+              key={section.rateType}
+              section={section}
+              sectionIndex={index}
+              onUpdate={(updatedSection) => {
+                const newSections = [...rateSections];
+                newSections[index] = updatedSection;
+                setRateSections(newSections);
+              }}
+              referenceData={referenceData}
+            />
+          ))}
+        </div>
+
+        {/* Validation Errors */}
+        {validationErrors.length > 0 && (
+          <div className="mt-6">
+            <ValidationSummary errors={validationErrors} />
+          </div>
+        )}
+
+        {/* Form Actions */}
+        <div className="sticky bottom-6 mt-8 p-6 bg-background border rounded-lg shadow-lg flex gap-4 justify-end">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleSaveDraft}
+            disabled={saveDraftMutation.isPending}
+          >
+            {saveDraftMutation.isPending ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <Save className="mr-2 h-4 w-4" />
+            )}
+            Save as Draft
+          </Button>
+          
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={handleValidate}
+          >
+            Validate All Rates
+          </Button>
+          
+          <Button
+            type="button"
+            onClick={handleSubmitClick}
+            disabled={submitMutation.isPending}
+          >
+            <Send className="mr-2 h-4 w-4" />
+            Submit for Executive Approval
+          </Button>
+        </div>
+      </form>
+
+      {/* Confirmation Dialog */}
+      <ConfirmationDialog
+        open={showConfirmation}
+        onOpenChange={setShowConfirmation}
+        onConfirm={handleConfirmSubmit}
+        isLoading={submitMutation.isPending}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/ApprovalStepsCard.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/ApprovalStepsCard.tsx
new file mode 100644
index 000000000..293c17e2a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/ApprovalStepsCard.tsx
@@ -0,0 +1,207 @@
+import { useMemo, useState } from "react";
+import { Check, ShieldCheck } from "lucide-react";
+
+import { BookingConfirmDialog } from "./BookingConfirmDialog";
+import { useAuth } from "@/auth/useAuth";
+import { formatApprovalProgress } from "@/features/bookings/approval-progress";
+import {
+  buildApproveActionForStep,
+  canActOnApprovalStep,
+  getNextPendingApprovalStep,
+} from "@/features/bookings/booking-actions.config";
+import type { useBookingMutations } from "@/hooks/bookings/useBookings";
+import type { BookingApprovalStep, BookingDetail } from "@/types/booking";
+import { bookingGlass, bookingSurface } from "./booking-ui.styles";
+import { Badge, Button } from "@edr/ui-common";
+import { cn } from "@/lib/utils";
+
+type Mutations = ReturnType<typeof useBookingMutations>;
+
+interface ApprovalStepsCardProps {
+  booking: BookingDetail;
+  mutations: Mutations;
+}
+
+/** Approval chain with inline approve on the current pending step. */
+export function ApprovalStepsCard({ booking, mutations }: ApprovalStepsCardProps) {
+  const { user } = useAuth();
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [pendingStep, setPendingStep] = useState<BookingApprovalStep | null>(
+    null,
+  );
+
+  const steps = useMemo(
+    () =>
+      [...(booking.approvalSteps ?? [])].sort(
+        (a, b) => a.stepOrder - b.stepOrder,
+      ),
+    [booking.approvalSteps],
+  );
+
+  const nextPending = getNextPendingApprovalStep(steps);
+  const summary = formatApprovalProgress(booking.status, steps);
+  const pendingAction = pendingStep
+    ? buildApproveActionForStep(pendingStep)
+    : null;
+
+  const openApprove = (step: BookingApprovalStep) => {
+    setPendingStep(step);
+    setConfirmOpen(true);
+  };
+
+  const closeApprove = () => {
+    setConfirmOpen(false);
+    setPendingStep(null);
+  };
+
+  const runApprove = () => {
+    if (!pendingStep) return;
+    mutations.approveStep.mutate(
+      { stepId: pendingStep.id, requiredRole: pendingStep.requiredRole },
+      { onSuccess: () => closeApprove() },
+    );
+  };
+
+  return (
+    <>
+      <div className={cn(bookingSurface.sectionCard, bookingGlass.activeTab)}>
+        <div className={bookingSurface.sectionHeader}>
+          <div className={bookingSurface.sectionIcon}>
+            <ShieldCheck className="size-4" strokeWidth={1.75} />
+          </div>
+          <div>
+            <h2 className="text-sm font-semibold text-foreground">
+              Approval chain
+            </h2>
+            <p className="text-xs text-muted-foreground">
+              {summary.detail ||
+                (nextPending
+                  ? `Next: ${nextPending.requiredRole} · step ${nextPending.stepOrder}`
+                  : steps.length
+                    ? "All steps complete"
+                    : "Accept submission to begin")}
+            </p>
+          </div>
+        </div>
+
+        <div className="px-5 py-5">
+          {steps.length === 0 ? (
+            <p className="rounded-lg border border-dashed border-border/60 bg-muted/10 px-4 py-6 text-center text-sm text-muted-foreground backdrop-blur-sm">
+              Use{" "}
+              <strong className="font-semibold text-foreground">
+                Accept for approval
+              </strong>{" "}
+              in staff actions to instantiate steps.
+            </p>
+          ) : (
+            <ul className="space-y-2">
+              {steps.map((step) => (
+                <StepRow
+                  key={step.id}
+                  step={step}
+                  steps={steps}
+                  user={user}
+                  isNext={nextPending?.id === step.id}
+                  isPending={mutations.approveStep.isPending}
+                  onApprove={openApprove}
+                />
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+
+      <BookingConfirmDialog
+        open={confirmOpen}
+        onOpenChange={(open) => {
+          if (!open) closeApprove();
+          else setConfirmOpen(true);
+        }}
+        action={pendingAction}
+        reference={booking.reference}
+        inputValue=""
+        onInputChange={() => {}}
+        onConfirm={runApprove}
+        isPending={mutations.approveStep.isPending}
+      />
+    </>
+  );
+}
+
+function StepRow({
+  step,
+  steps,
+  user,
+  isNext,
+  isPending,
+  onApprove,
+}: {
+  step: BookingApprovalStep;
+  steps: BookingApprovalStep[];
+  user: ReturnType<typeof useAuth>["user"];
+  isNext: boolean;
+  isPending: boolean;
+  onApprove: (step: BookingApprovalStep) => void;
+}) {
+  const canApprove = canActOnApprovalStep(user, step, steps);
+  const statusStyles =
+    step.status === "APPROVED"
+      ? "border-emerald-500/25 bg-emerald-500/10 text-black"
+      : step.status === "REJECTED"
+        ? "bg-red-500/10 text-red-800 dark:text-red-300"
+        : isNext
+          ? "border-emerald-500/25 bg-emerald-500/10 text-black"
+          : "bg-muted/40 text-muted-foreground";
+
+  return (
+    <li
+      className={cn(
+        "flex items-center justify-between gap-3 rounded-lg border px-4 py-3 transition-colors backdrop-blur-sm",
+        isNext ? bookingGlass.activeTab : "border-border/50 bg-card/60",
+      )}
+    >
+      <div className="flex min-w-0 items-center gap-3">
+        <span
+          className={cn(
+            "flex size-8 shrink-0 items-center justify-center rounded-lg text-xs font-bold",
+            isNext
+              ? cn(bookingGlass.iconWellGreen, "text-black")
+              : "bg-muted/40 text-muted-foreground",
+          )}
+        >
+          {step.stepOrder}
+        </span>
+        <div className="min-w-0">
+          <p className="text-sm font-semibold text-foreground">
+            {step.requiredRole}
+          </p>
+          {step.remarks && (
+            <p className="truncate text-xs text-muted-foreground">
+              {step.remarks}
+            </p>
+          )}
+        </div>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        {canApprove && (
+          <Button
+            type="button"
+            size="sm"
+            className="h-8 gap-1.5 shadow-sm"
+            disabled={isPending}
+            onClick={() => onApprove(step)}
+          >
+            <Check className="size-3.5" />
+            Approve
+          </Button>
+        )}
+        <Badge
+          variant="outline"
+          className={cn("shrink-0 border text-[9px] uppercase", statusStyles)}
+        >
+          {step.status}
+        </Badge>
+      </div>
+    </li>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/BookingActionsMenu.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/BookingActionsMenu.tsx
new file mode 100644
index 000000000..e4e1d8db9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingActionsMenu.tsx
@@ -0,0 +1,240 @@
+import { useNavigate } from "react-router-dom";
+import {
+  ChevronRight,
+  ExternalLink,
+  Loader2,
+  MoreHorizontal,
+} from "lucide-react";
+
+import { BookingConfirmDialog } from "./BookingConfirmDialog";
+import { useBookingActionDialog } from "./useBookingActionDialog";
+import { useAuth } from "@/auth/useAuth";
+import {
+  getNextPendingApprovalStep,
+  isContractNavAction,
+  listRowHasActions,
+  type BookingActionContext,
+} from "@/features/bookings/booking-actions.config";
+import type { BookingListRow } from "@/types/booking";
+import { cn } from "@/lib/utils";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@edr/ui-common";
+
+interface BookingActionsMenuProps {
+  row: BookingListRow;
+  /** Compact table cell vs. larger detail toolbar */
+  variant?: "table" | "toolbar";
+  className?: string;
+  /** Suppresses table row navigation after menu/dialog close (click-through). */
+  onSuppressRowClick?: () => void;
+}
+
+export function BookingActionsMenu({
+  row,
+  variant = "table",
+  className,
+  onSuppressRowClick,
+}: BookingActionsMenuProps) {
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const context: BookingActionContext = {
+    status: row.status,
+    paymentCurrency: row.paymentCurrency,
+    reference: row.reference,
+    approvalSteps: row.approvalSteps,
+  };
+
+  const flow = useBookingActionDialog(row.id, context);
+  const { actions, pendingAction, mutations } = flow;
+
+  const goToContract = () =>
+    navigate(`/dashboard/booking-requests/${row.id}/contract`);
+
+  const hasMenu = listRowHasActions(row, user);
+
+  const primary = actions.find((a) => a.primary) ?? actions[0];
+
+  if (!hasMenu && variant === "table") {
+    return (
+      <Button
+        variant="ghost"
+        size="icon"
+        className="size-8 text-muted-foreground hover:text-primary"
+        onClick={() => navigate(`/dashboard/booking-requests/${row.id}`)}
+        aria-label="View booking"
+      >
+        <ChevronRight className="size-4" />
+      </Button>
+    );
+  }
+
+  return (
+    <>
+      <div
+        data-stop-row-click
+        className={cn(
+          "flex w-full min-h-[2.5rem] items-center justify-end gap-1",
+          variant === "table" && "opacity-80 transition-opacity group-hover/tr:opacity-100",
+          className,
+        )}
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => e.stopPropagation()}
+      >
+        {variant === "table" && primary && (
+          <Button
+            size="sm"
+            className="hidden h-8 gap-1.5 px-2.5 shadow-sm lg:inline-flex"
+            disabled={mutations.isPending}
+            onClick={() =>
+              isContractNavAction(primary.id)
+                ? goToContract()
+                : flow.openAction(primary)
+            }
+          >
+            <primary.icon className="size-3.5" />
+            {primary.shortLabel}
+          </Button>
+        )}
+
+        {variant === "toolbar" && actions.length > 0 ? (
+          <div className="flex w-full flex-wrap gap-2">
+            {actions.map((action) => {
+              const Icon = action.icon;
+              return (
+                <Button
+                  key={action.id}
+                  size="sm"
+                  variant={
+                    action.variant === "destructive"
+                      ? "outline"
+                      : action.primary
+                        ? "default"
+                        : "outline"
+                  }
+                  className={cn(
+                    "gap-2 shadow-sm",
+                    action.variant === "destructive" &&
+                      "border-red-200 text-red-700 hover:bg-red-50 dark:hover:bg-red-950/30",
+                  )}
+                  disabled={mutations.isPending}
+                  onClick={() =>
+                    isContractNavAction(action.id)
+                      ? goToContract()
+                      : flow.openAction(action)
+                  }
+                >
+                  <Icon className="size-4" />
+                  {action.label}
+                </Button>
+              );
+            })}
+          </div>
+        ) : (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant={variant === "table" ? "ghost" : "outline"}
+              size={variant === "table" ? "icon" : "sm"}
+              className={cn(
+                variant === "table" ? "size-8" : "gap-2",
+                "shrink-0",
+              )}
+              disabled={mutations.isPending}
+              aria-label="Booking actions"
+            >
+              {mutations.isPending ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : (
+                <MoreHorizontal className="size-4" />
+              )}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuLabel className="font-mono text-xs text-muted-foreground">
+              {row.reference}
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {actions.map((action) => {
+              const Icon = action.icon;
+              return (
+                <DropdownMenuItem
+                  key={action.id}
+                  className={cn(
+                    "gap-2 cursor-pointer",
+                    action.variant === "destructive" && "text-red-700 focus:text-red-700",
+                  )}
+                  onSelect={(event) => {
+                    event.preventDefault();
+                    onSuppressRowClick?.();
+                    if (isContractNavAction(action.id)) {
+                      goToContract();
+                    } else {
+                      flow.openAction(action);
+                    }
+                  }}
+                >
+                  <Icon className="size-4 opacity-70" />
+                  <span>{action.label}</span>
+                </DropdownMenuItem>
+              );
+            })}
+            {actions.length > 0 && <DropdownMenuSeparator />}
+            <DropdownMenuItem
+              className="gap-2 cursor-pointer"
+              onSelect={(event) => {
+                event.preventDefault();
+                onSuppressRowClick?.();
+                navigate(`/dashboard/booking-requests/${row.id}`);
+              }}
+            >
+              <ExternalLink className="size-4 opacity-70" />
+              Open full details
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        )}
+      </div>
+
+      <BookingConfirmDialog
+        open={flow.dialogOpen}
+        onOpenChange={(open) => {
+          if (!open) onSuppressRowClick?.();
+          flow.setDialogOpen(open);
+        }}
+        action={pendingAction}
+        reference={flow.mergedContext.reference}
+        inputValue={flow.inputValue}
+        onInputChange={flow.setInputValue}
+        selectedFile={flow.selectedFile}
+        onFileChange={flow.setSelectedFile}
+        onConfirm={() => {
+          onSuppressRowClick?.();
+          flow.runAction();
+        }}
+        isPending={mutations.isPending || flow.detailLoading}
+        confirmDisabled={flow.confirmDisabled}
+        extra={
+          flow.detailLoading ? (
+            <p className="flex items-center gap-2 text-sm text-muted-foreground">
+              <Loader2 className="size-4 animate-spin" />
+              Loading approval steps…
+            </p>
+          ) : pendingAction?.id === "approve" &&
+            !getNextPendingApprovalStep(flow.mergedContext.approvalSteps) ? (
+            <p className="rounded-lg border border-amber-200/80 bg-amber-50/50 px-3 py-2 text-sm text-amber-900 dark:bg-amber-950/30 dark:text-amber-200">
+              No pending approval step. Refresh the page after staff accept, or
+              reject the booking.
+            </p>
+          ) : null
+        }
+      />
+    </>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/BookingActionsToolbar.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/BookingActionsToolbar.tsx
new file mode 100644
index 000000000..006c57e11
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingActionsToolbar.tsx
@@ -0,0 +1,121 @@
+import { Download, Zap } from "lucide-react";
+
+import type { BookingDetail } from "@/types/booking";
+import { BookingActionsMenu } from "./BookingActionsMenu";
+import { bookingSurface } from "./booking-ui.styles";
+import { toBookingListRow } from "@/features/bookings/mapBookingListRow";
+import type { useBookingMutations } from "@/hooks/bookings/useBookings";
+import { Button } from "@edr/ui-common";
+import { cn } from "@/lib/utils";
+
+type Mutations = ReturnType<typeof useBookingMutations>;
+
+interface BookingActionsToolbarProps {
+  booking: BookingDetail;
+  mutations: Mutations;
+}
+
+/** Detail-page actions: primary toolbar + downloads. */
+export function BookingActionsToolbar({
+  booking,
+  mutations,
+}: BookingActionsToolbarProps) {
+  const row = toBookingListRow(booking);
+  const { status } = booking;
+
+  const downloadBlob = async (fn: () => Promise<Blob>, filename: string) => {
+    const blob = await fn();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  if (
+    status === "REJECTED" ||
+    status === "CANCELLED" ||
+    status === "COMPLETED"
+  ) {
+    return null;
+  }
+
+  if (status === "CHANGES_REQUESTED") {
+    return (
+      <PanelShell title="Awaiting customer" description="No staff actions until resubmit.">
+        {booking.latestChangeRequestNote && (
+          <p className="rounded-lg border border-border/50 bg-muted/15 p-3 text-sm leading-relaxed backdrop-blur-sm">
+            {booking.latestChangeRequestNote}
+          </p>
+        )}
+      </PanelShell>
+    );
+  }
+
+  if (["DRAFT", "PENDING_CONSOLIDATION", "CONSOLIDATED"].includes(status)) {
+    return (
+      <PanelShell
+        title="No staff actions"
+        description="Monitor until the customer or system advances status."
+        muted
+      />
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <PanelShell
+        title="Staff actions"
+        description="Confirm each step before it is applied."
+      >
+        <BookingActionsMenu row={row} variant="toolbar" />
+      </PanelShell>
+
+      {status === "CONTRACT_READY" && (
+        <PanelShell title="Documents" description="Download generated contract.">
+          <Button
+            variant="outline"
+            className="gap-2 border-border/60 bg-background/60 backdrop-blur-sm hover:bg-background/80"
+            onClick={() =>
+              downloadBlob(
+                () => mutations.downloadContract(),
+                `contract-${booking.reference}.txt`,
+              )
+            }
+          >
+            <Download className="size-4" />
+            Download contract
+          </Button>
+        </PanelShell>
+      )}
+    </div>
+  );
+}
+
+function PanelShell({
+  title,
+  description,
+  children,
+  muted,
+}: {
+  title: string;
+  description: string;
+  children: React.ReactNode;
+  muted?: boolean;
+}) {
+  return (
+    <div className={cn(bookingSurface.sectionCard, !muted && "ring-0")}>
+      <div className={bookingSurface.sectionHeader}>
+        <div className={bookingSurface.sectionIcon}>
+          <Zap className="size-4" strokeWidth={1.75} />
+        </div>
+        <div>
+          <h2 className="text-sm font-semibold text-foreground">{title}</h2>
+          <p className="text-xs text-muted-foreground">{description}</p>
+        </div>
+      </div>
+      <div className="flex flex-col gap-3 px-5 py-5">{children}</div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/BookingApprovalProgressCell.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/BookingApprovalProgressCell.tsx
new file mode 100644
index 000000000..69d01692b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingApprovalProgressCell.tsx
@@ -0,0 +1,29 @@
+import { formatApprovalProgress } from "@/features/bookings/approval-progress";
+import type { BookingListRow } from "@/types/booking";
+import { cn } from "@/lib/utils";
+
+interface BookingApprovalProgressCellProps {
+  row: BookingListRow;
+}
+
+export function BookingApprovalProgressCell({ row }: BookingApprovalProgressCellProps) {
+  const summary = formatApprovalProgress(row.status, row.approvalSteps);
+
+  return (
+    <div className="min-w-[8.5rem] py-1">
+      <p
+        className={cn(
+          "text-sm font-semibold",
+          summary.complete ? "text-emerald-700 dark:text-emerald-400" : "text-foreground",
+        )}
+      >
+        {summary.label}
+      </p>
+      {summary.detail ? (
+        <p className="mt-0.5 line-clamp-2 text-[11px] leading-snug text-muted-foreground">
+          {summary.detail}
+        </p>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/BookingConfirmDialog.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/BookingConfirmDialog.tsx
new file mode 100644
index 000000000..190fe4475
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingConfirmDialog.tsx
@@ -0,0 +1,173 @@
+import { Loader2 } from "lucide-react";
+
+import type { BookingActionDef } from "@/features/bookings/booking-actions.config";
+import { cn } from "@/lib/utils";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Textarea,
+} from "@edr/ui-common";
+
+interface BookingConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  action: BookingActionDef | null;
+  reference?: string;
+  inputValue: string;
+  onInputChange: (value: string) => void;
+  selectedFile?: File | null;
+  onFileChange?: (file: File | null) => void;
+  onConfirm: () => void;
+  isPending: boolean;
+  confirmDisabled?: boolean;
+  extra?: React.ReactNode;
+}
+
+export function BookingConfirmDialog({
+  open,
+  onOpenChange,
+  action,
+  reference,
+  inputValue,
+  onInputChange,
+  selectedFile = null,
+  onFileChange,
+  onConfirm,
+  isPending,
+  confirmDisabled = false,
+  extra,
+}: BookingConfirmDialogProps) {
+  if (!action || !action.confirmTitle) return null;
+
+  const Icon = action.icon;
+  const needsTextInput =
+    action.input === "note" || action.input === "reason";
+  const needsFileInput = action.input === "file";
+  const inputMissing =
+    (needsTextInput && !inputValue.trim()) ||
+    (needsFileInput && !selectedFile);
+  const isDestructive = action.variant === "destructive";
+
+  const preventClickThrough = (event: React.MouseEvent) => {
+    event.preventDefault();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="gap-0 overflow-hidden p-0 sm:max-w-md"
+        showCloseButton={false}
+        onCloseAutoFocus={(event) => event.preventDefault()}
+      >
+        <div
+          className={cn(
+            "border-b px-6 py-5",
+            isDestructive
+              ? "bg-gradient-to-br from-red-500/10 via-background to-background"
+              : "bg-gradient-to-br from-primary/8 via-background to-background",
+          )}
+        >
+          <DialogHeader className="gap-3 text-left">
+            <div className="flex items-start gap-3">
+              <div
+                className={cn(
+                  "flex size-11 shrink-0 items-center justify-center rounded-xl shadow-sm",
+                  isDestructive
+                    ? "bg-red-500/15 text-red-700 dark:text-red-300"
+                    : "bg-primary/15 text-primary",
+                )}
+              >
+                <Icon className="size-5" />
+              </div>
+              <div className="min-w-0 space-y-1 pt-0.5">
+                <DialogTitle className="text-base leading-snug">
+                  {action.confirmTitle}
+                </DialogTitle>
+                {reference && (
+                  <p className="font-mono text-xs font-semibold text-muted-foreground">
+                    {reference}
+                  </p>
+                )}
+              </div>
+            </div>
+            <DialogDescription className="text-left text-sm leading-relaxed">
+              {action.confirmDescription}
+            </DialogDescription>
+          </DialogHeader>
+        </div>
+
+        <div className="space-y-4 px-6 py-5">
+          {needsTextInput && (
+            <div className="space-y-2">
+              <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                {action.inputLabel}
+                <span className="text-red-600"> *</span>
+              </label>
+              <Textarea
+                value={inputValue}
+                onChange={(e) => onInputChange(e.target.value)}
+                placeholder={action.inputPlaceholder}
+                rows={4}
+                className="min-h-[100px] resize-y"
+              />
+            </div>
+          )}
+          {needsFileInput && (
+            <div className="space-y-2">
+              <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                {action.inputLabel ?? "Bank slip file"}
+                <span className="text-red-600"> *</span>
+              </label>
+              <input
+                type="file"
+                accept=".pdf,.png,.jpg,.jpeg"
+                className="block w-full text-sm text-muted-foreground file:mr-3 file:rounded-md file:border-0 file:bg-primary file:px-3 file:py-2 file:text-xs file:font-semibold file:text-primary-foreground"
+                onChange={(e) =>
+                  onFileChange?.(e.target.files?.[0] ?? null)
+                }
+              />
+              {selectedFile && (
+                <p className="text-xs text-muted-foreground">
+                  Selected: {selectedFile.name}
+                </p>
+              )}
+            </div>
+          )}
+          {extra}
+        </div>
+
+        <DialogFooter className="gap-2 border-t bg-muted/20 px-6 py-4 sm:justify-end">
+          <Button
+            type="button"
+            variant="outline"
+            disabled={isPending}
+            onMouseDown={preventClickThrough}
+            onClick={() => onOpenChange(false)}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            variant={isDestructive ? "destructive" : "default"}
+            disabled={isPending || inputMissing || confirmDisabled}
+            className="min-w-[7rem] gap-2"
+            onMouseDown={preventClickThrough}
+            onClick={onConfirm}
+          >
+            {isPending ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              <Icon className="size-4" />
+            )}
+            {action.shortLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/BookingPricingSummary.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/BookingPricingSummary.tsx
new file mode 100644
index 000000000..ea6042d5a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingPricingSummary.tsx
@@ -0,0 +1,86 @@
+import { Banknote, Receipt } from "lucide-react";
+
+import type { BookingDetail } from "@/types/booking";
+import { Separator } from "@edr/ui-common";
+import { bookingGlass, bookingSurface } from "./booking-ui.styles";
+
+export function BookingPricingSummary({ booking }: { booking: BookingDetail }) {
+  const amount = Number(booking.totalAmount);
+  const modifiers = booking.cargoModifiers ?? [];
+
+  return (
+    <div className={bookingSurface.sectionCard}>
+      <div className={bookingSurface.sectionHeader}>
+        <div className={bookingSurface.sectionIcon}>
+          <Banknote className="size-4" strokeWidth={1.75} />
+        </div>
+        <div>
+          <h2 className="text-sm font-semibold text-foreground">
+            Pricing & payment
+          </h2>
+          <p className="text-xs text-muted-foreground">Commercial terms</p>
+        </div>
+      </div>
+      <div className="space-y-4 px-5 py-5">
+        <div className={bookingSurface.valueCard}>
+          <p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+            Total amount
+          </p>
+          <p className="mt-1 font-mono text-2xl font-semibold tabular-nums tracking-tight text-foreground">
+            {booking.paymentCurrency}{" "}
+            {amount.toLocaleString(undefined, { minimumFractionDigits: 2 })}
+          </p>
+        </div>
+        <Row label="Payment status" value={booking.paymentStatus} />
+        {booking.pnrCode && <Row label="PNR code" value={booking.pnrCode} mono />}
+        {modifiers.length > 0 && (
+          <>
+            <Separator className="opacity-50" />
+            <p className="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+              <Receipt className="size-3" />
+              Surcharges applied
+            </p>
+            <ul className="space-y-2">
+              {modifiers.map((m) => (
+                <li
+                  key={m.id}
+                  className="flex justify-between rounded-lg border border-border/50 bg-muted/15 px-3 py-2 text-sm backdrop-blur-sm"
+                >
+                  <span className="text-muted-foreground">Modifier</span>
+                  <span className="font-mono font-semibold tabular-nums">
+                    {Number(m.calculatedAmount).toLocaleString()}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Row({
+  label,
+  value,
+  mono,
+}: {
+  label: string;
+  value: string;
+  mono?: boolean;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-2 rounded-lg border border-border/40 bg-muted/10 px-3 py-2.5 text-sm backdrop-blur-sm">
+      <span className="text-muted-foreground">{label}</span>
+      <span
+        className={
+          mono
+            ? "font-mono text-xs font-semibold text-foreground"
+            : "font-medium text-foreground"
+        }
+      >
+        {value}
+      </span>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/BookingPriorityBadge.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/BookingPriorityBadge.tsx
new file mode 100644
index 000000000..9202977c6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingPriorityBadge.tsx
@@ -0,0 +1,21 @@
+export function BookingPriorityBadge({ score }: { score: number }) {
+  if (score >= 1000) {
+    return (
+      <span className="rounded-full bg-red-50 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-red-700">
+        Urgent
+      </span>
+    );
+  }
+  if (score >= 500) {
+    return (
+      <span className="rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-amber-700">
+        High
+      </span>
+    );
+  }
+  return (
+    <span className="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-slate-600">
+      Normal
+    </span>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatGrid.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatGrid.tsx
new file mode 100644
index 000000000..a216e927d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatGrid.tsx
@@ -0,0 +1,63 @@
+import type { LucideIcon } from "lucide-react";
+import { bookingGlass } from "./booking-ui.styles";
+import { cn } from "@/lib/utils";
+
+export interface StatItem {
+  label: string;
+  value: number | string;
+  hint?: string;
+  icon: LucideIcon;
+  accent?: "default" | "amber" | "emerald" | "rose";
+}
+
+const iconAccentStyles = {
+  default: "text-foreground/70",
+  amber: "text-amber-600 dark:text-amber-400",
+  emerald: "text-emerald-600 dark:text-emerald-400",
+  rose: "text-rose-600 dark:text-rose-400",
+};
+
+export function BookingStatGrid({ items }: { items: StatItem[] }) {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+      {items.map((item) => {
+        const Icon = item.icon;
+        const accent = item.accent ?? "default";
+        return (
+          <div
+            key={item.label}
+            className={cn(
+              "group relative overflow-hidden rounded-xl p-5 transition-all duration-200 hover:shadow-md",
+              bookingGlass.card,
+            )}
+          >
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0 flex-1">
+                <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+                  {item.label}
+                </p>
+                <p className="mt-2 text-3xl font-semibold tabular-nums tracking-tight text-foreground">
+                  {item.value}
+                </p>
+                {item.hint && (
+                  <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+                    {item.hint}
+                  </p>
+                )}
+              </div>
+              <div
+                className={cn(
+                  "flex size-10 shrink-0 items-center justify-center rounded-xl transition-transform duration-200 group-hover:scale-[1.02]",
+                  bookingGlass.iconWellGreen,
+                  iconAccentStyles[accent],
+                )}
+              >
+                <Icon className="size-[18px]" strokeWidth={1.75} />
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusBadge.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusBadge.tsx
new file mode 100644
index 000000000..25c3363c3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusBadge.tsx
@@ -0,0 +1,21 @@
+import { Badge } from "@edr/ui-common";
+import { cn } from "@/lib/utils";
+import { BOOKING_STATUS_STYLES } from "@/features/bookings/booking-status.config";
+
+export function BookingStatusBadge({ status }: { status: string }) {
+  const style = BOOKING_STATUS_STYLES[status] ?? {
+    label: status,
+    color: "bg-muted text-muted-foreground border-border",
+  };
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        "px-2 py-0.5 text-[9px] font-bold uppercase tracking-wider",
+        style.color,
+      )}
+    >
+      {style.label}
+    </Badge>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusTabs.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusTabs.tsx
new file mode 100644
index 000000000..bbbf373bc
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusTabs.tsx
@@ -0,0 +1,107 @@
+import {
+  CheckCircle,
+  ClipboardCheck,
+  FileSignature,
+  Inbox,
+  LayoutGrid,
+  Train,
+  Wallet,
+  XCircle,
+} from "lucide-react";
+
+import {
+  BOOKING_LIST_TABS,
+  type BookingStatusTabKey,
+} from "@/features/bookings/booking-status.config";
+import { bookingGlass } from "./booking-ui.styles";
+import { cn } from "@/lib/utils";
+
+const TAB_ICONS: Record<BookingStatusTabKey, React.ReactNode> = {
+  all: <LayoutGrid className="size-3.5" strokeWidth={1.75} />,
+  intake: <Inbox className="size-3.5" strokeWidth={1.75} />,
+  in_approval: <ClipboardCheck className="size-3.5" strokeWidth={1.75} />,
+  approved_contract: <FileSignature className="size-3.5" strokeWidth={1.75} />,
+  payment: <Wallet className="size-3.5" strokeWidth={1.75} />,
+  operations: <Train className="size-3.5" strokeWidth={1.75} />,
+  completed: <CheckCircle className="size-3.5" strokeWidth={1.75} />,
+  closed: <XCircle className="size-3.5" strokeWidth={1.75} />,
+};
+
+const activeTabText = "text-black";
+
+interface BookingStatusTabsProps {
+  active: BookingStatusTabKey;
+  onChange: (tab: BookingStatusTabKey) => void;
+  counts?: Partial<Record<BookingStatusTabKey, number>>;
+}
+
+export function BookingStatusTabs({
+  active,
+  onChange,
+  counts,
+}: BookingStatusTabsProps) {
+  return (
+    <div className={bookingGlass.tabRail}>
+      <div
+        className="flex flex-nowrap gap-1.5 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
+        role="tablist"
+        aria-label="Booking status filters"
+      >
+        {BOOKING_LIST_TABS.map((tab) => {
+          const isActive = active === tab.key;
+          const count = counts?.[tab.key];
+          return (
+            <button
+              key={tab.key}
+              type="button"
+              role="tab"
+              aria-selected={isActive}
+              onClick={() => onChange(tab.key)}
+              className={cn(
+                "flex min-w-[8rem] shrink-0 flex-col items-start gap-0.5 rounded-lg px-3 py-2.5 text-left transition-all duration-200",
+                isActive
+                  ? bookingGlass.activeTab
+                  : "text-muted-foreground hover:bg-emerald-500/5 hover:text-foreground",
+              )}
+            >
+              <span className="flex w-full items-center justify-between gap-2">
+                <span
+                  className={cn(
+                    "flex items-center gap-2 text-sm font-medium",
+                    isActive ? activeTabText : "text-muted-foreground",
+                  )}
+                >
+                  <span
+                    className={cn(
+                      "flex size-7 shrink-0 items-center justify-center rounded-md",
+                      isActive
+                        ? cn(bookingGlass.iconWellGreen, "text-black")
+                        : "border border-transparent bg-muted/30",
+                    )}
+                  >
+                    {TAB_ICONS[tab.key]}
+                  </span>
+                  <span className="whitespace-nowrap">{tab.label}</span>
+                </span>
+                {count !== undefined && count > 0 && (
+                  <span
+                    className={cn(
+                      "rounded-full px-2 py-0.5 text-[10px] font-semibold tabular-nums",
+                      isActive
+                        ? cn("bg-emerald-500/15", activeTabText)
+                        : "bg-muted/50 text-muted-foreground",
+                    )}
+                  >
+                    {count}
+                  </span>
+                )}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export type { BookingStatusTabKey };
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/BookingTableEmpty.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/BookingTableEmpty.tsx
new file mode 100644
index 000000000..383871176
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingTableEmpty.tsx
@@ -0,0 +1,50 @@
+import { Package, Search } from "lucide-react";
+import { Button } from "@edr/ui-common";
+import { bookingGlass, bookingSurface } from "./booking-ui.styles";
+import { cn } from "@/lib/utils";
+
+interface BookingTableEmptyProps {
+  isError?: boolean;
+  hasSearch?: boolean;
+  onRetry?: () => void;
+}
+
+export function BookingTableEmpty({
+  isError,
+  hasSearch,
+  onRetry,
+}: BookingTableEmptyProps) {
+  return (
+    <div className={bookingSurface.emptyState}>
+      <div
+        className={cn(
+          "flex size-14 items-center justify-center rounded-2xl text-muted-foreground",
+          bookingGlass.iconWellGreen,
+        )}
+      >
+        {hasSearch ? <Search className="size-6" /> : <Package className="size-6" />}
+      </div>
+      <div className="max-w-sm space-y-1">
+        <h3 className="text-base font-semibold text-foreground">
+          {isError
+            ? "Could not load bookings"
+            : hasSearch
+              ? "No matches on this page"
+              : "No bookings with this status"}
+        </h3>
+        <p className="text-sm text-muted-foreground">
+          {isError
+            ? "Check your connection and try again."
+            : hasSearch
+              ? "Try a different reference or customer name."
+              : "New customer submissions will appear when status is Submitted."}
+        </p>
+      </div>
+      {isError && onRetry && (
+        <Button variant="outline" size="sm" onClick={onRetry}>
+          Retry
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/BookingWorkflowStepper.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/BookingWorkflowStepper.tsx
new file mode 100644
index 000000000..77a4cf659
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingWorkflowStepper.tsx
@@ -0,0 +1,130 @@
+import {
+  Check,
+  CheckCircle2,
+  FileSignature,
+  FileText,
+  Train,
+  Wallet,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import {
+  getWorkflowStageIndex,
+  WORKFLOW_STAGES,
+} from "@/features/bookings/booking-status.config";
+import { bookingGlass, bookingSurface } from "./booking-ui.styles";
+
+const STAGE_ICONS = [FileText, FileSignature, FileSignature, Wallet, Train, Check];
+
+interface BookingWorkflowStepperProps {
+  status: string;
+  title: string;
+  description: string;
+  titleColor: string;
+}
+
+export function BookingWorkflowStepper({
+  status,
+  title,
+  description,
+  titleColor,
+}: BookingWorkflowStepperProps) {
+  const currentStage = getWorkflowStageIndex(status);
+  const isTerminal = currentStage < 0;
+
+  return (
+    <div className={bookingSurface.sectionCard}>
+      <div className={bookingSurface.sectionHeader}>
+        <div className={bookingSurface.sectionIcon}>
+          <Train className="size-4" strokeWidth={1.75} />
+        </div>
+        <div>
+          <h2 className="text-sm font-semibold text-foreground">
+            Workflow progress
+          </h2>
+          <p className="text-xs text-muted-foreground">
+            Customer submission through completion
+          </p>
+        </div>
+      </div>
+      <div className="space-y-8 px-5 py-6">
+        <div className="relative px-2">
+          <div className="absolute left-4 right-4 top-5 h-px bg-border/60" />
+          <div
+            className="absolute left-4 top-5 h-px bg-emerald-500/40 transition-all duration-700 ease-out"
+            style={{
+              width:
+                !isTerminal && currentStage >= 0
+                  ? `calc(${(currentStage / (WORKFLOW_STAGES.length - 1)) * 100}% - 2rem)`
+                  : "0%",
+            }}
+          />
+          <div className="relative flex justify-between">
+            {WORKFLOW_STAGES.map((stage, idx) => {
+              const Icon = STAGE_ICONS[idx] ?? FileText;
+              const isCompleted = !isTerminal && idx < currentStage;
+              const isActive = !isTerminal && idx === currentStage;
+              return (
+                <div
+                  key={stage.label}
+                  className="flex max-w-[4.5rem] flex-col items-center gap-2.5 sm:max-w-none"
+                >
+                  <div
+                    className={cn(
+                      "flex size-10 items-center justify-center rounded-full border-2 bg-card/80 backdrop-blur-sm transition-all duration-300",
+                      isCompleted &&
+                        cn(bookingGlass.iconWellGreen, "border-emerald-500/30 text-black"),
+                      isActive &&
+                        cn(
+                          bookingGlass.activeTab,
+                          "scale-105 border-emerald-500/30 text-black shadow-sm",
+                        ),
+                      !isCompleted &&
+                        !isActive &&
+                        "border-border/60 text-muted-foreground",
+                    )}
+                  >
+                    {isCompleted ? (
+                      <CheckCircle2 className="size-4" />
+                    ) : (
+                      <Icon className="size-4" />
+                    )}
+                  </div>
+                  <span
+                    className={cn(
+                      "text-center text-[10px] font-semibold uppercase leading-tight tracking-wide",
+                      isActive ? "text-black" : "text-muted-foreground",
+                    )}
+                  >
+                    {stage.label}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        <div
+          className={cn(
+            "rounded-xl border px-5 py-4 backdrop-blur-sm",
+            isTerminal
+              ? "border-destructive/20 bg-destructive/5"
+              : bookingGlass.activeTab,
+          )}
+        >
+          <h4
+            className={cn(
+              "text-sm font-semibold tracking-tight",
+              isTerminal ? titleColor : "text-black",
+            )}
+          >
+            {title}
+          </h4>
+          <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">
+            {description}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/ContractSignaturePad.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/ContractSignaturePad.tsx
new file mode 100644
index 000000000..03dda6e32
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/ContractSignaturePad.tsx
@@ -0,0 +1,107 @@
+import { useEffect, useRef, useState } from "react";
+import { Eraser } from "lucide-react";
+
+import { Button } from "@edr/ui-common";
+import { cn } from "@/lib/utils";
+
+interface ContractSignaturePadProps {
+  onChange: (dataUrl: string | null) => void;
+  className?: string;
+}
+
+export function ContractSignaturePad({
+  onChange,
+  className,
+}: ContractSignaturePadProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const drawing = useRef(false);
+  const [empty, setEmpty] = useState(true);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const dpr = window.devicePixelRatio || 1;
+    const w = canvas.offsetWidth;
+    const h = canvas.offsetHeight;
+    canvas.width = w * dpr;
+    canvas.height = h * dpr;
+    ctx.scale(dpr, dpr);
+    ctx.strokeStyle = "#111";
+    ctx.lineWidth = 2;
+    ctx.lineCap = "round";
+  }, []);
+
+  const getPos = (e: React.MouseEvent | React.TouchEvent) => {
+    const canvas = canvasRef.current!;
+    const rect = canvas.getBoundingClientRect();
+    if ("touches" in e) {
+      const t = e.touches[0];
+      return { x: t.clientX - rect.left, y: t.clientY - rect.top };
+    }
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+  };
+
+  const start = (e: React.MouseEvent | React.TouchEvent) => {
+    drawing.current = true;
+    const ctx = canvasRef.current?.getContext("2d");
+    const { x, y } = getPos(e);
+    ctx?.beginPath();
+    ctx?.moveTo(x, y);
+  };
+
+  const move = (e: React.MouseEvent | React.TouchEvent) => {
+    if (!drawing.current) return;
+    const ctx = canvasRef.current?.getContext("2d");
+    const { x, y } = getPos(e);
+    ctx?.lineTo(x, y);
+    ctx?.stroke();
+    setEmpty(false);
+    onChange(canvasRef.current?.toDataURL("image/png") ?? null);
+  };
+
+  const end = () => {
+    drawing.current = false;
+  };
+
+  const clear = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    setEmpty(true);
+    onChange(null);
+  };
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      <div className="overflow-hidden rounded-lg border-2 border-dashed border-border bg-white">
+        <canvas
+          ref={canvasRef}
+          className="h-36 w-full touch-none cursor-crosshair"
+          onMouseDown={start}
+          onMouseMove={move}
+          onMouseUp={end}
+          onMouseLeave={end}
+          onTouchStart={start}
+          onTouchMove={move}
+          onTouchEnd={end}
+        />
+      </div>
+      <div className="flex items-center justify-between">
+        <p className="text-xs text-muted-foreground">
+          Draw your signature above
+        </p>
+        <Button type="button" variant="ghost" size="sm" className="gap-1" onClick={clear}>
+          <Eraser className="size-3.5" />
+          Clear
+        </Button>
+      </div>
+      {empty && (
+        <p className="text-xs text-amber-700">Signature is required before confirming.</p>
+      )}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/NextStepBanner.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/NextStepBanner.tsx
new file mode 100644
index 000000000..b06412d4c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/NextStepBanner.tsx
@@ -0,0 +1,32 @@
+import { ArrowRight } from "lucide-react";
+
+import type { BookingNextStep } from "@/types/booking";
+import { bookingGlass } from "./booking-ui.styles";
+import { cn } from "@/lib/utils";
+
+interface NextStepBannerProps {
+  nextStep: BookingNextStep;
+  className?: string;
+}
+
+export function NextStepBanner({ nextStep, className }: NextStepBannerProps) {
+  return (
+    <div
+      className={cn(
+        "flex items-start gap-3 rounded-xl px-4 py-3 text-sm",
+        bookingGlass.activeTab,
+        className,
+      )}
+      role="status"
+    >
+      <ArrowRight className="mt-0.5 size-4 shrink-0 text-black" aria-hidden />
+      <div className="min-w-0 space-y-0.5">
+        <p className="font-semibold text-black">
+          Next: {nextStep.action.replace(/_/g, " ")}
+          {nextStep.requiredRole ? ` (${nextStep.requiredRole})` : ""}
+        </p>
+        <p className="text-muted-foreground">{nextStep.description}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/booking-ui.styles.ts b/apps/edr-freight-web/backoffice/src/components/bookings/booking-ui.styles.ts
new file mode 100644
index 000000000..c2330977e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/booking-ui.styles.ts
@@ -0,0 +1,63 @@
+/** Shared surfaces for booking list & detail — frosted glass, neutral accents. */
+
+export const bookingGlass = {
+  card:
+    "border border-border/50 bg-card/75 shadow-sm backdrop-blur-md supports-[backdrop-filter]:bg-card/60",
+  panel:
+    "border border-border/50 bg-card/80 shadow-sm backdrop-blur-md supports-[backdrop-filter]:bg-card/65",
+  rail:
+    "border border-border/40 bg-muted/20 backdrop-blur-sm supports-[backdrop-filter]:bg-muted/15",
+  iconWell:
+    "border border-border/50 bg-background/70 text-foreground/75 shadow-sm backdrop-blur-sm supports-[backdrop-filter]:bg-background/50",
+  iconWellHero:
+    "border border-border/50 bg-background/60 text-foreground shadow-sm ring-1 ring-border/30 backdrop-blur-md supports-[backdrop-filter]:bg-background/45",
+  activeTab:
+    "border border-emerald-500/20 bg-emerald-500/10 shadow-sm backdrop-blur-md ring-1 ring-emerald-500/10 supports-[backdrop-filter]:bg-emerald-500/[0.08]",
+  iconWellGreen:
+    "border border-emerald-500/20 bg-emerald-500/15 text-emerald-700 shadow-sm backdrop-blur-sm supports-[backdrop-filter]:bg-emerald-500/10 dark:text-emerald-400",
+  tabRail:
+    "rounded-xl border border-border/60 bg-muted/10 p-2 backdrop-blur-sm supports-[backdrop-filter]:bg-muted/5",
+  tableHeader:
+    "bg-muted/30 backdrop-blur-sm supports-[backdrop-filter]:bg-muted/20",
+} as const;
+
+export const bookingSurface = {
+  page:
+    "min-h-screen bg-gradient-to-b from-muted/30 via-background to-background",
+  pageInner: "mx-auto max-w-[1600px] space-y-5 p-6 lg:p-8",
+  hero: `relative overflow-hidden rounded-2xl ${bookingGlass.card}`,
+  heroGlow:
+    "pointer-events-none absolute -right-24 -top-24 size-72 rounded-full bg-muted/40 blur-3xl",
+  heroSheen:
+    "pointer-events-none absolute inset-0 bg-gradient-to-br from-background/40 via-transparent to-muted/20",
+  panel: `overflow-hidden rounded-xl ${bookingGlass.panel}`,
+  panelToolbar: `flex flex-wrap items-center justify-between gap-3 border-b border-border/50 px-4 py-3.5 sm:px-5 ${bookingGlass.rail}`,
+  tableWrap: "px-0",
+  sectionCard: `overflow-hidden rounded-xl transition-shadow duration-200 hover:shadow-md ${bookingGlass.card}`,
+  sectionHeader:
+    "flex items-center gap-3 border-b border-border/50 bg-muted/15 px-5 py-4 backdrop-blur-sm",
+  sectionBody: "px-5 py-5",
+  detailHero: `relative overflow-hidden rounded-2xl ${bookingGlass.card}`,
+  sectionIcon: `flex size-9 shrink-0 items-center justify-center rounded-lg ${bookingGlass.iconWellGreen}`,
+  sectionIconLg: `flex size-11 shrink-0 items-center justify-center rounded-xl ${bookingGlass.iconWellGreen}`,
+  valueCard:
+    "rounded-xl border border-emerald-500/20 bg-emerald-500/10 p-4 shadow-sm backdrop-blur-md supports-[backdrop-filter]:bg-emerald-500/[0.08]",
+  stickySidebar: "lg:sticky lg:top-6 lg:self-start",
+  metricTile:
+    "rounded-lg border border-border/50 bg-background/70 px-4 py-3 shadow-xs backdrop-blur-sm",
+  emptyState:
+    "flex flex-col items-center justify-center gap-3 px-6 py-16 text-center",
+} as const;
+
+export const bookingInput = {
+  search:
+    "h-10 w-full rounded-lg border border-border/60 bg-background/80 pl-10 text-sm shadow-xs backdrop-blur-sm transition-[box-shadow,border-color] placeholder:text-muted-foreground focus-visible:border-ring/60 focus-visible:ring-[3px] focus-visible:ring-ring/20 sm:max-w-xs",
+} as const;
+
+export const bookingTable = {
+  headerCell:
+    "h-11 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground",
+  rowHover:
+    "transition-colors hover:bg-muted/25 data-[state=selected]:bg-muted/30",
+  rowIcon: `flex size-10 shrink-0 items-center justify-center rounded-xl ${bookingGlass.iconWellGreen}`,
+} as const;
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/useBookingActionDialog.ts b/apps/edr-freight-web/backoffice/src/components/bookings/useBookingActionDialog.ts
new file mode 100644
index 000000000..de734ca34
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/useBookingActionDialog.ts
@@ -0,0 +1,147 @@
+import { useCallback, useState } from "react";
+
+import {
+  getBookingActions,
+  getNextPendingApprovalStep,
+  type BookingActionContext,
+  type BookingActionDef,
+} from "@/features/bookings/booking-actions.config";
+import { useAuth } from "@/auth/useAuth";
+import { useBookingDetail, useBookingMutations } from "@/hooks/bookings/useBookings";
+
+export function useBookingActionDialog(
+  bookingId: string,
+  context: BookingActionContext,
+) {
+  const [pendingAction, setPendingAction] = useState<BookingActionDef | null>(null);
+  const [inputValue, setInputValue] = useState("");
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  const needsApprovalSteps =
+    pendingAction?.id === "approve" || pendingAction?.id === "rejectApproval";
+
+  const needsApprovalContext =
+    context.status === "PENDING_APPROVAL" ||
+    context.status === "APPROVED_PENDING_SIGNATURE";
+
+  const { data: detail, isLoading: detailLoading } = useBookingDetail(
+    needsApprovalSteps || needsApprovalContext ? bookingId : undefined,
+  );
+
+  const mergedContext: BookingActionContext = {
+    ...context,
+    approvalSteps: detail?.approvalSteps ?? context.approvalSteps,
+    reference: detail?.reference ?? context.reference,
+  };
+
+  const { user } = useAuth();
+  const mutations = useBookingMutations(bookingId);
+  const actions = getBookingActions(mergedContext, user);
+
+  const openAction = useCallback((action: BookingActionDef) => {
+    setPendingAction(action);
+    setInputValue("");
+    setSelectedFile(null);
+    setDialogOpen(true);
+  }, []);
+
+  const closeDialog = useCallback(() => {
+    setDialogOpen(false);
+    setPendingAction(null);
+    setInputValue("");
+    setSelectedFile(null);
+  }, []);
+
+  const runAction = useCallback(() => {
+    if (!pendingAction) return;
+
+    const onSuccess = () => closeDialog();
+
+    switch (pendingAction.id) {
+      case "accept":
+        mutations.staffAccept.mutate(undefined, { onSuccess });
+        break;
+      case "requestChanges":
+        mutations.requestChanges.mutate(inputValue.trim(), { onSuccess });
+        break;
+      case "reject":
+        mutations.staffReject.mutate(inputValue.trim(), { onSuccess });
+        break;
+      case "approve": {
+        const step = getNextPendingApprovalStep(mergedContext.approvalSteps);
+        if (!step) return;
+        mutations.approveStep.mutate(
+          { stepId: step.id, requiredRole: step.requiredRole },
+          { onSuccess },
+        );
+        break;
+      }
+      case "rejectApproval": {
+        const step = getNextPendingApprovalStep(mergedContext.approvalSteps);
+        if (!step) return;
+        mutations.rejectStep.mutate(
+          { stepId: step.id, reason: inputValue.trim() },
+          { onSuccess },
+        );
+        break;
+      }
+      case "generateContract":
+        mutations.generateContract.mutate(undefined, { onSuccess });
+        break;
+      case "viewContract":
+        break;
+      case "payBooking":
+        mutations.payBooking.mutate(undefined, { onSuccess });
+        break;
+      case "startTransit":
+        mutations.startTransit.mutate(undefined, { onSuccess });
+        break;
+      case "complete":
+        mutations.complete.mutate(undefined, { onSuccess });
+        break;
+      case "cancel":
+        mutations.cancel.mutate(inputValue.trim(), { onSuccess });
+        break;
+      default:
+        break;
+    }
+  }, [
+    pendingAction,
+    inputValue,
+    selectedFile,
+    mergedContext.approvalSteps,
+    mutations,
+    closeDialog,
+  ]);
+
+  const confirmDisabled =
+    mutations.isPending ||
+    (needsApprovalSteps && detailLoading) ||
+    (pendingAction?.id === "approve" &&
+      !getNextPendingApprovalStep(mergedContext.approvalSteps)) ||
+    (pendingAction?.input === "file" && !selectedFile) ||
+    (pendingAction?.input === "reason" && !inputValue.trim()) ||
+    (pendingAction?.input === "note" && !inputValue.trim());
+
+  return {
+    actions,
+    pendingAction,
+    inputValue,
+    setInputValue,
+    selectedFile,
+    setSelectedFile,
+    dialogOpen,
+    setDialogOpen: (open: boolean) => {
+      if (!open) closeDialog();
+      else setDialogOpen(true);
+    },
+    openAction,
+    closeDialog,
+    runAction,
+    mutations,
+    confirmDisabled,
+    detailLoading,
+    mergedContext,
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/components/cargoes/CargoesTable.tsx b/apps/edr-freight-web/backoffice/src/components/cargoes/CargoesTable.tsx
new file mode 100644
index 000000000..736af3fd5
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/cargoes/CargoesTable.tsx
@@ -0,0 +1,46 @@
+import { useCargoesByContainer, useDeliverCargo, useUnloadCargo } from '@/hooks/useCargoes';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { LoadCargoDialog } from './LoadCargoDialog';
+import type { Cargo } from '@/services/cargoService';
+
+export function CargoesTable({ containerId }: { containerId: string }) {
+  const { data: cargoes, refetch } = useCargoesByContainer(containerId);
+  const deliver = useDeliverCargo();
+  const unload = useUnloadCargo();
+
+  if (!cargoes?.length) return <div className="text-muted-foreground">No cargoes for this container.</div>;
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Reference</TableHead>
+          <TableHead>Description</TableHead>
+          <TableHead>Quantity</TableHead>
+          <TableHead>Weight (kg)</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Actions</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {cargoes.map((cargo: Cargo) => (
+          <TableRow key={cargo.id}>
+            <TableCell>{cargo.cargoReference}</TableCell>
+            <TableCell>{cargo.description || '-'}</TableCell>
+            <TableCell>{cargo.quantity}</TableCell>
+            <TableCell>{cargo.weight}</TableCell>
+            <TableCell><Badge variant="outline">{cargo.status}</Badge></TableCell>
+            <TableCell className="space-x-2">
+              {cargo.status === 'PENDING' && <LoadCargoDialog cargoId={cargo.id} onSuccess={() => refetch()} />}
+              {cargo.status === 'LOADED' && <Button size="sm" onClick={() => deliver.mutateAsync(cargo.id).then(() => refetch())}>Deliver</Button>}
+              {cargo.status === 'LOADED' && <Button size="sm" variant="outline" onClick={() => unload.mutateAsync(cargo.id).then(() => refetch())}>Unload</Button>}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
diff --git a/apps/edr-freight-web/backoffice/src/components/cargoes/LoadCargoDialog.tsx b/apps/edr-freight-web/backoffice/src/components/cargoes/LoadCargoDialog.tsx
new file mode 100644
index 000000000..188726352
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/cargoes/LoadCargoDialog.tsx
@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useLoadCargo } from '@/hooks/useCargoes';
+import { useToast } from '@/hooks/use-toast';
+
+export function LoadCargoDialog({ cargoId, onSuccess }: { cargoId: string; onSuccess?: () => void }) {
+  const [open, setOpen] = useState(false);
+  const [quantity, setQuantity] = useState(0);
+  const [weight, setWeight] = useState(0);
+  const [volume, setVolume] = useState<number>();
+  const load = useLoadCargo();
+  const { toast } = useToast();
+
+  const handleLoad = async () => {
+    await load.mutateAsync({ id: cargoId, quantity, weight, volume });
+    toast({ title: 'Loaded', description: 'Cargo loaded into container.' });
+    setOpen(false);
+    onSuccess?.();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild><Button size="sm">Load Cargo</Button></DialogTrigger>
+      <DialogContent>
+        <DialogHeader><DialogTitle>Load Cargo</DialogTitle></DialogHeader>
+        <div className="space-y-4">
+          <div><Label>Quantity*</Label><Input type="number" required value={quantity} onChange={e => setQuantity(parseFloat(e.target.value))} /></div>
+          <div><Label>Weight (kg)*</Label><Input type="number" required value={weight} onChange={e => setWeight(parseFloat(e.target.value))} /></div>
+          <div><Label>Volume (m³)</Label><Input type="number" value={volume ?? ''} onChange={e => setVolume(parseFloat(e.target.value) || undefined)} /></div>
+          <Button onClick={handleLoad} disabled={load.isPending}>Confirm Load</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/components/container_management/AssignContainerDialog.tsx b/apps/edr-freight-web/backoffice/src/components/container_management/AssignContainerDialog.tsx
new file mode 100644
index 000000000..d10955933
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/AssignContainerDialog.tsx
@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useContainers, useAssignContainerToWagon } from '@/hooks/useContainers';
+import { useToast } from '@/hooks/use-toast';
+import { Plus } from 'lucide-react';
+
+export function AssignContainerDialog({ wagonId }: { wagonId: string }) {
+  const [open, setOpen] = useState(false);
+  const [containerId, setContainerId] = useState('');
+  const [position, setPosition] = useState<number>();
+  const { data: containers } = useContainers();
+  const assign = useAssignContainerToWagon();
+  const { toast } = useToast();
+
+  const available = containers?.filter(c => c.status === 'AVAILABLE' && !c.wagonId);
+
+  const handleAssign = async () => {
+    if (!containerId) return;
+    await assign.mutateAsync({ containerId, wagonId, position });
+    toast({ title: 'Assigned', description: 'Container placed on wagon.' });
+    setOpen(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild><Button size="sm"><Plus className="mr-2 h-4 w-4" />Assign Container</Button></DialogTrigger>
+      <DialogContent>
+        <DialogHeader><DialogTitle>Assign Container to Wagon</DialogTitle></DialogHeader>
+        <div className="space-y-4">
+          <div><Label>Container</Label><Select value={containerId} onValueChange={setContainerId}><SelectTrigger><SelectValue placeholder="Select container" /></SelectTrigger><SelectContent>{available?.map(c => <SelectItem key={c.id} value={c.id}>{c.containerNumber}</SelectItem>)}</SelectContent></Select></div>
+          <div><Label>Position (optional)</Label><Input type="number" value={position ?? ''} onChange={e => setPosition(parseInt(e.target.value) || undefined)} /></div>
+          <Button onClick={handleAssign} disabled={assign.isPending}>Assign</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/components/container_management/ContainersTable.tsx b/apps/edr-freight-web/backoffice/src/components/container_management/ContainersTable.tsx
new file mode 100644
index 000000000..183a6a628
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/ContainersTable.tsx
@@ -0,0 +1,44 @@
+import { useContainersByWagon, useUnassignContainer } from '@/hooks/useContainers';
+import { Button } from '@/components/ui/button';
+import { Trash2 } from 'lucide-react';
+import type { Container } from '@/services/containerService';
+
+export function ContainersTable({ wagonId }: { wagonId: string }) {
+  const { data: containers, refetch } = useContainersByWagon(wagonId);
+  const unassign = useUnassignContainer();
+
+  if (!containers?.length) return <div className="text-muted-foreground">No containers assigned.</div>;
+
+  return (
+    <table className="w-full table-fixed">
+      <thead>
+        <tr>
+          <th className="text-left">Number</th>
+          <th className="text-left">Type</th>
+          <th className="text-left">Position</th>
+          <th className="text-left">Status</th>
+          <th className="text-left">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {containers.map((container: Container) => (
+          <tr key={container.id}>
+            <td className="py-2">{container.containerNumber}</td>
+            <td className="py-2">{container.containerTypeId}</td>
+            <td className="py-2">{container.position}</td>
+            <td className="py-2">{container.status}</td>
+            <td className="py-2">
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => unassign.mutateAsync(container.id).then(() => refetch())}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/components/ruleEngine/ContractType copy.tsx b/apps/edr-freight-web/backoffice/src/components/ruleEngine/ContractType copy.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineCardGrid.tsx b/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineCardGrid.tsx
index 3b53f0665..e57a48ff4 100644
--- a/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineCardGrid.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineCardGrid.tsx
@@ -21,8 +21,9 @@ export interface RuleEngineCardGridProps {
     pageCount: number;
     totalCount: number;
   };
-  onEdit: (record: RuleEngineRecord) => void;
-  onDelete: (record: RuleEngineRecord) => void;
+  onEdit?: (record: RuleEngineRecord) => void;
+  onDelete?: (record: RuleEngineRecord) => void;
+  readOnly?: boolean;
   onViewChain?: () => void;
   onSubmitRate?: (id: string) => void;
   onApproveRate?: (record: RuleEngineRecord) => void;
@@ -41,6 +42,7 @@ const RuleEngineCardGrid = ({
   onViewChain,
   onSubmitRate,
   onApproveRate,
+  readOnly = false,
 }: RuleEngineCardGridProps) => {
   const presentation = resolveCardPresentation(config);
 
@@ -153,8 +155,9 @@ const RuleEngineCardGrid = ({
                   record={record}
                   config={config}
                   layout="compact"
-                  onEdit={onEdit}
-                  onDelete={onDelete}
+                  readOnly={readOnly}
+                  onEdit={onEdit ?? (() => {})}
+                  onDelete={onDelete ?? (() => {})}
                   onViewChain={onViewChain}
                   onSubmitRate={onSubmitRate}
                   onApproveRate={onApproveRate}
diff --git a/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineRecordActions.tsx b/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineRecordActions.tsx
index 7abdb0bc4..cc27cf514 100644
--- a/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineRecordActions.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineRecordActions.tsx
@@ -26,6 +26,7 @@ export interface RuleEngineRecordActionsProps {
   onSubmitRate?: (id: string) => void;
   onApproveRate?: (record: RuleEngineRecord) => void;
   layout?: "row" | "compact";
+  readOnly?: boolean;
 }
 
 const RuleEngineRecordActions = ({
@@ -37,6 +38,7 @@ const RuleEngineRecordActions = ({
   onSubmitRate,
   onApproveRate,
   layout = "row",
+  readOnly = false,
 }: RuleEngineRecordActionsProps) => {
   const status = String(record.status ?? "");
   const hasRateActions =
@@ -47,6 +49,21 @@ const RuleEngineRecordActions = ({
       ? "h-8 w-8 rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
       : "h-8 w-8 rounded-md text-muted-foreground hover:bg-muted hover:text-foreground";
 
+  if (readOnly) {
+    return onViewChain ? (
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className={iconBtnClass}
+        onClick={onViewChain}
+        aria-label="View chain"
+      >
+        <Eye className="h-4 w-4" />
+      </Button>
+    ) : null;
+  }
+
   return (
     <div className="flex items-center justify-end gap-0.5">
       <Button
diff --git a/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineToolbar.tsx b/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineToolbar.tsx
index 5c333dda9..53ae2d319 100644
--- a/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineToolbar.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineToolbar.tsx
@@ -10,7 +10,7 @@ export interface RuleEngineToolbarProps {
   search: string;
   onSearchChange: (value: string) => void;
   searchPlaceholder: string;
-  onAdd: () => void;
+  onAdd?: () => void;
   addLabel?: string;
   viewMode: RuleEngineViewMode;
   onViewModeChange: (mode: RuleEngineViewMode) => void;
@@ -81,10 +81,12 @@ const RuleEngineToolbar = ({
         <Filter className="h-4 w-4" />
         Filter
       </Button>
-      <Button type="button" className={ruleEngineToolbar.primaryBtn} onClick={onAdd}>
-        <Plus className="h-4 w-4" />
-        {addLabel}
-      </Button>
+      {onAdd ? (
+        <Button type="button" className={ruleEngineToolbar.primaryBtn} onClick={onAdd}>
+          <Plus className="h-4 w-4" />
+          {addLabel}
+        </Button>
+      ) : null}
     </div>
   </div>
 );
diff --git a/apps/edr-freight-web/backoffice/src/components/ruleEngine/rateMatrixRules.ts b/apps/edr-freight-web/backoffice/src/components/ruleEngine/rateMatrixRules.ts
new file mode 100644
index 000000000..f0080c5a3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/ruleEngine/rateMatrixRules.ts
@@ -0,0 +1,173 @@
+// ruleEngine/rateMatrixRules.ts
+import { RATE_TYPES, REQUIRED_RATE_TYPES, MATRIX_STATUS } from '@/constants/rateMatrixConstants';
+
+interface RateEntry {
+  rateType: string;
+  entries: Array<Record<string, any>>;
+}
+
+interface ValidationRule {
+  id: string;
+  description: string;
+  severity: 'error' | 'warning';
+  validate: (data: any) => boolean;
+  message: string;
+}
+
+export class RateMatrixRulesEngine {
+  private rules: ValidationRule[] = [];
+
+  constructor() {
+    this.initializeRules();
+  }
+
+  private initializeRules() {
+    // Rule 1: All rate types must be present
+    this.rules.push({
+      id: 'ALL_TYPES_REQUIRED',
+      description: 'Verify all 13 rate types are included',
+      severity: 'error',
+      validate: (rateSections: RateEntry[]) => {
+        const submittedTypes = rateSections.map(s => s.rateType);
+        return REQUIRED_RATE_TYPES.every(type => submittedTypes.includes(type));
+      },
+      message: 'All 13 rate types must be included in the submission',
+    });
+
+    // Rule 2: Each rate type must have at least one entry
+    this.rules.push({
+      id: 'MINIMUM_ENTRIES',
+      description: 'Each rate type requires at least one rate entry',
+      severity: 'error',
+      validate: (rateSections: RateEntry[]) => {
+        return rateSections.every(section => section.entries.length > 0);
+      },
+      message: 'Each rate type must have at least one rate entry',
+    });
+
+    // Rule 3: Dates must be valid
+    this.rules.push({
+      id: 'VALID_DATES',
+      description: 'Rate entries must have valid date ranges',
+      severity: 'error',
+      validate: (rateSections: RateEntry[]) => {
+        return rateSections.every(section =>
+          section.entries.every(entry => {
+            if (!entry.validFrom) return false;
+            if (entry.validTo && new Date(entry.validTo) <= new Date(entry.validFrom)) {
+              return false;
+            }
+            return true;
+          })
+        );
+      },
+      message: 'All rate entries must have valid dates (Valid To must be after Valid From)',
+    });
+
+    // Rule 4: Rates must be non-negative
+    this.rules.push({
+      id: 'NON_NEGATIVE_RATES',
+      description: 'All rate values must be non-negative',
+      severity: 'error',
+      validate: (rateSections: RateEntry[]) => {
+        const numericFields = ['baseRate', 'ratePerMetricTon', 'ratePerKm', 
+                               'ratePerTrip', 'ratePerDay', 'ratePerUnit'];
+        
+        return rateSections.every(section =>
+          section.entries.every(entry => {
+            return numericFields.every(field => {
+              const value = entry[field];
+              return value === undefined || value === '' || Number(value) >= 0;
+            });
+          })
+        );
+      },
+      message: 'Rate values cannot be negative',
+    });
+
+    // Rule 5: Business rule - Demurrage free days should be reasonable
+    this.rules.push({
+      id: 'DEMURRAGE_FREE_DAYS',
+      description: 'Demurrage free days should be between 0 and 30',
+      severity: 'warning',
+      validate: (rateSections: RateEntry[]) => {
+        const demurrageSection = rateSections.find(
+          s => s.rateType === RATE_TYPES.DEMURRAGE
+        );
+        if (!demurrageSection) return true;
+        
+        return demurrageSection.entries.every(entry => {
+          const freeDays = Number(entry.freeDays);
+          return !freeDays || (freeDays >= 0 && freeDays <= 30);
+        });
+      },
+      message: 'Demurrage free days typically range from 0 to 30 days',
+    });
+
+    // Rule 6: Cancellation fee percentage should be 0-100
+    this.rules.push({
+      id: 'CANCELLATION_FEE_RANGE',
+      description: 'Cancellation fee percentage must be between 0 and 100',
+      severity: 'error',
+      validate: (rateSections: RateEntry[]) => {
+        const cancellationSection = rateSections.find(
+          s => s.rateType === RATE_TYPES.CANCELLATION_FEE
+        );
+        if (!cancellationSection) return true;
+        
+        return cancellationSection.entries.every(entry => {
+          const percentage = Number(entry.cancellationFeePercentage);
+          return !percentage || (percentage >= 0 && percentage <= 100);
+        });
+      },
+      message: 'Cancellation fee percentage must be between 0 and 100',
+    });
+  }
+
+  validate(data: RateEntry[]) {
+    const errors: Array<{ ruleId: string; message: string; severity: string }> = [];
+    const warnings: Array<{ ruleId: string; message: string; severity: string }> = [];
+
+    this.rules.forEach(rule => {
+      if (!rule.validate(data)) {
+        const issue = {
+          ruleId: rule.id,
+          message: rule.message,
+          severity: rule.severity,
+        };
+        
+        if (rule.severity === 'error') {
+          errors.push(issue);
+        } else {
+          warnings.push(issue);
+        }
+      }
+    });
+
+    return {
+      isValid: errors.length === 0,
+      errors,
+      warnings,
+    };
+  }
+
+  // Check if matrix can transition to a new status
+  canTransition(fromStatus: string, toStatus: string, userRole: string): boolean {
+    const transitions: Record<string, Array<{ to: string; allowedRoles: string[] }>> = {
+      [MATRIX_STATUS.DRAFT]: [
+        { to: MATRIX_STATUS.PENDING_APPROVAL, allowedRoles: ['Director'] },
+      ],
+      [MATRIX_STATUS.PENDING_APPROVAL]: [
+        { to: MATRIX_STATUS.ACTIVE, allowedRoles: ['Chief Executive'] },
+        { to: MATRIX_STATUS.REJECTED, allowedRoles: ['Chief Executive'] },
+      ],
+    };
+
+    const allowedTransitions = transitions[fromStatus] || [];
+    const transition = allowedTransitions.find(t => t.to === toStatus);
+    
+    return transition ? transition.allowedRoles.includes(userRole) : false;
+  }
+}
+
+export const rateMatrixRulesEngine = new RateMatrixRulesEngine();
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/components/ruleEngine/ruleEngineFormat.tsx b/apps/edr-freight-web/backoffice/src/components/ruleEngine/ruleEngineFormat.tsx
index 079bb2727..966ba8ba1 100644
--- a/apps/edr-freight-web/backoffice/src/components/ruleEngine/ruleEngineFormat.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/ruleEngine/ruleEngineFormat.tsx
@@ -61,5 +61,45 @@ export const formatCell = (value: unknown, format?: ColumnFormat): ReactNode =>
     return Number.isNaN(d.getTime()) ? String(value) : d.toLocaleDateString();
   }
 
+  if (format === "entityLabel" && value && typeof value === "object") {
+    const entity = value as { label?: string; code?: string; cargoTypeName?: string };
+    const label =
+      entity.label?.trim() ||
+      entity.cargoTypeName?.trim() ||
+      entity.code?.trim();
+    return label ? (
+      <span>{label}</span>
+    ) : (
+      <span className="text-muted-foreground">—</span>
+    );
+  }
+
+  if (format === "rateLabel") {
+    if (!value || typeof value !== "object") {
+      return value ? (
+        <span className="font-mono text-xs text-muted-foreground">{String(value)}</span>
+      ) : (
+        <span className="text-muted-foreground">—</span>
+      );
+    }
+    const rate = value as {
+      rateType?: string;
+      currency?: string;
+      rateValue?: number;
+      rateUnit?: string;
+    };
+    const parts = [
+      rate.rateType?.replace(/_/g, " "),
+      rate.currency,
+      rate.rateValue != null ? String(rate.rateValue) : "",
+      rate.rateUnit?.replace(/_/g, " "),
+    ].filter(Boolean);
+    return parts.length > 0 ? (
+      <span>{parts.join(" · ")}</span>
+    ) : (
+      <span className="text-muted-foreground">—</span>
+    );
+  }
+
   return String(value);
 };
diff --git a/apps/edr-freight-web/backoffice/src/components/trains/TrainDetailCard.tsx b/apps/edr-freight-web/backoffice/src/components/trains/TrainDetailCard.tsx
new file mode 100644
index 000000000..1d533a942
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/trains/TrainDetailCard.tsx
@@ -0,0 +1,19 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Train } from '@/services/trainService';
+
+export function TrainDetailCard({ train }: { train: Train }) {
+  return (
+    <Card>
+      <CardHeader><CardTitle>{train.trainNumber || train.code} - {train.trainName || 'Unnamed'}</CardTitle></CardHeader>
+      <CardContent className="grid md:grid-cols-2 gap-4">
+        <div><span className="font-medium">Status:</span> {train.status}</div>
+        <div><span className="font-medium">Capacity:</span> {train.capacityTons} tons</div>
+        <div><span className="font-medium">Origin:</span> {train.originStationId || '-'}</div>
+        <div><span className="font-medium">Destination:</span> {train.destinationStationId || '-'}</div>
+        <div><span className="font-medium">Departure:</span> {train.departureTime ? new Date(train.departureTime).toLocaleString() : '-'}</div>
+        <div><span className="font-medium">Arrival:</span> {train.arrivalTime ? new Date(train.arrivalTime).toLocaleString() : '-'}</div>
+        {train.remarks && <div className="col-span-2"><span className="font-medium">Remarks:</span> {train.remarks}</div>}
+      </CardContent>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/components/trains/TrainFormDialog.tsx b/apps/edr-freight-web/backoffice/src/components/trains/TrainFormDialog.tsx
new file mode 100644
index 000000000..a73876e7d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/trains/TrainFormDialog.tsx
@@ -0,0 +1,59 @@
+import { useState, useEffect } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useCreateTrain, useUpdateTrain } from '@/hooks/useTrains';
+import { useToast } from '@/hooks/use-toast';
+
+interface TrainFormDialogProps {
+  trigger?: React.ReactNode;
+  train?: any;
+  onSuccess?: () => void;
+}
+
+export function TrainFormDialog({ trigger, train, onSuccess }: TrainFormDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [form, setForm] = useState({ code: '', capacityTons: 0, trainNumber: '', trainName: '' });
+  const createTrain = useCreateTrain();
+  const updateTrain = useUpdateTrain();
+  const { toast } = useToast();
+
+  useEffect(() => {
+    if (train) setForm({
+      code: train.code,
+      capacityTons: train.capacityTons,
+      trainNumber: train.trainNumber || '',
+      trainName: train.trainName || '',
+    });
+  }, [train]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      if (train) await updateTrain.mutateAsync({ id: train.id, data: form });
+      else await createTrain.mutateAsync(form);
+      toast({ title: train ? 'Train updated' : 'Train created', description: `${form.code} saved.` });
+      setOpen(false);
+      onSuccess?.();
+    } catch {
+      toast({ title: 'Error', description: `Failed to ${train ? 'update' : 'create'} train.`, variant: 'destructive' });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{trigger || <Button>New Train</Button>}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader><DialogTitle>{train ? 'Edit Train' : 'Create Train'}</DialogTitle></DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div><Label>Code*</Label><Input required value={form.code} onChange={e => setForm({...form, code: e.target.value})} /></div>
+          <div><Label>Capacity (tons)*</Label><Input type="number" required value={form.capacityTons} onChange={e => setForm({...form, capacityTons: parseFloat(e.target.value)})} /></div>
+          <div><Label>Train Number</Label><Input value={form.trainNumber} onChange={e => setForm({...form, trainNumber: e.target.value})} /></div>
+          <div><Label>Train Name</Label><Input value={form.trainName} onChange={e => setForm({...form, trainName: e.target.value})} /></div>
+          <Button type="submit" disabled={createTrain.isPending || updateTrain.isPending}>Save</Button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/components/trains/TrainsTable.tsx b/apps/edr-freight-web/backoffice/src/components/trains/TrainsTable.tsx
new file mode 100644
index 000000000..2751fbe39
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/trains/TrainsTable.tsx
@@ -0,0 +1,45 @@
+import { useTrains, useDeleteTrain } from '@/hooks/useTrains';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Eye, Trash2 } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+export function TrainsTable() {
+  const { data: trains, isLoading } = useTrains();
+  const deleteTrain = useDeleteTrain();
+
+  if (isLoading) return <div>Loading trains...</div>;
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Number</TableHead>
+          <TableHead>Name</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Capacity (tons)</TableHead>
+          <TableHead>Actions</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {trains?.map(train => (
+          <TableRow key={train.id}>
+            <TableCell>{train.trainNumber || train.code}</TableCell>
+            <TableCell>{train.trainName || '-'}</TableCell>
+            <TableCell><Badge variant="outline">{train.status}</Badge></TableCell>
+            <TableCell>{train.capacityTons}</TableCell>
+            <TableCell className="flex space-x-2">
+              <Link to={`/trains/${train.id}`}>
+                <Button variant="ghost" size="icon"><Eye className="h-4 w-4" /></Button>
+              </Link>
+              <Button variant="ghost" size="icon" onClick={() => deleteTrain.mutate(train.id)}>
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/components/ui/badge.tsx b/apps/edr-freight-web/backoffice/src/components/ui/badge.tsx
new file mode 100644
index 000000000..0512e9936
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/ui/badge.tsx
@@ -0,0 +1,47 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/apps/edr-freight-web/backoffice/src/components/ui/index.ts b/apps/edr-freight-web/backoffice/src/components/ui/index.ts
new file mode 100644
index 000000000..21dcac6e4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/ui/index.ts
@@ -0,0 +1,8 @@
+export * from './table';
+export * from './badge';
+export * from './button';
+export * from './dialog';
+export * from './input';
+export * from './label';
+export * from './textarea';
+export * from './Breadcrumbs';
diff --git a/apps/edr-freight-web/backoffice/src/components/ui/table.tsx b/apps/edr-freight-web/backoffice/src/components/ui/table.tsx
new file mode 100644
index 000000000..128912911
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/ui/table.tsx
@@ -0,0 +1,114 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b outline-ring/50", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors bg-background hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 bg-muted first-of-type:pl-4 last-of-type:pr-4 first-of-type: p-2 py-4 text-left align-middle font-medium whitespace-nowrap text-secondary-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle first-of-type:pl-4 last-of-type:pr-4 whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
diff --git a/apps/edr-freight-web/backoffice/src/components/wagons/AssignWagonDialog.tsx b/apps/edr-freight-web/backoffice/src/components/wagons/AssignWagonDialog.tsx
new file mode 100644
index 000000000..25877ac4e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/wagons/AssignWagonDialog.tsx
@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+// import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useWagons, useAssignWagonToTrain } from '@/hooks/useWagons';
+import { useToast } from '@/hooks/use-toast';
+import { Plus } from 'lucide-react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@edr/ui-common';
+
+export function AssignWagonDialog({ trainId }: { trainId: string }) {
+  const [open, setOpen] = useState(false);
+  const [wagonId, setWagonId] = useState('');
+  const [sequence, setSequence] = useState<number>();
+  const { data: wagons } = useWagons();
+  const assign = useAssignWagonToTrain();
+  const { toast } = useToast();
+
+  const available = wagons?.filter((w:any) => w.status === 'AVAILABLE' || !w.trainId);
+
+  const handleAssign = async () => {
+    if (!wagonId) return;
+    await assign.mutateAsync({ wagonId, trainId, sequenceNumber: sequence });
+    toast({ title: 'Assigned', description: 'Wagon attached to train.' });
+    setOpen(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild><Button size="sm"><Plus className="mr-2 h-4 w-4" />Assign Wagon</Button></DialogTrigger>
+      <DialogContent>
+        <DialogHeader><DialogTitle>Assign Wagon to Train</DialogTitle></DialogHeader>
+        <div className="space-y-4">
+          <div>
+            <Label>Wagon</Label>
+            <Select value={wagonId} onValueChange={setWagonId}>
+              <SelectTrigger><SelectValue placeholder="Select wagon" /></SelectTrigger>
+              <SelectContent>
+                {available?.map((w:any) => <SelectItem key={w.id} value={w.id}>{w.wagonNumber}</SelectItem>)}
+              </SelectContent>
+            </Select>
+          </div>
+          <div>
+            <Label>Sequence (optional)</Label>
+            <Input type="number" value={sequence ?? ''} onChange={e => setSequence(parseInt(e.target.value) || undefined)} />
+          </div>
+          <Button onClick={handleAssign} disabled={assign.isPending}>Assign</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/components/wagons/WagonFormDialog.tsx b/apps/edr-freight-web/backoffice/src/components/wagons/WagonFormDialog.tsx
new file mode 100644
index 000000000..2fb36cd73
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/wagons/WagonFormDialog.tsx
@@ -0,0 +1,71 @@
+// src/components/wagons/WagonFormDialog.tsx
+import { useState, useEffect } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useCreateWagon, useUpdateWagon } from '@/hooks/useWagons';
+import { useToast } from '@/hooks/use-toast';
+
+interface WagonFormDialogProps {
+  trigger?: React.ReactNode;
+  wagon?: any;
+  onSuccess?: () => void;
+}
+
+export function WagonFormDialog({ trigger, wagon, onSuccess }: WagonFormDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [form, setForm] = useState({
+    wagonNumber: '',
+    wagonTypeId: '',
+    tareWeight: 0,
+    maxPayloadWeight: 0,
+    status: 'AVAILABLE',
+    notes: ''
+  });
+  const createWagon = useCreateWagon();
+  const updateWagon = useUpdateWagon();
+  const { toast } = useToast();
+
+  useEffect(() => {
+    if (wagon) setForm({
+      wagonNumber: wagon.wagonNumber,
+      wagonTypeId: wagon.wagonTypeId,
+      tareWeight: wagon.tareWeight,
+      maxPayloadWeight: wagon.maxPayloadWeight,
+      status: wagon.status,
+      notes: wagon.notes || ''
+    });
+  }, [wagon]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      if (wagon) await updateWagon.mutateAsync({ id: wagon.id, data: form });
+      else await createWagon.mutateAsync(form);
+      toast({ title: wagon ? 'Wagon updated' : 'Wagon created', description: `${form.wagonNumber} saved.` });
+      setOpen(false);
+      onSuccess?.();
+    } catch {
+      toast({ title: 'Error', description: `Failed to ${wagon ? 'update' : 'create'} wagon.`, variant: 'destructive' });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{trigger || <Button>New Wagon</Button>}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader><DialogTitle>{wagon ? 'Edit Wagon' : 'Create Wagon'}</DialogTitle></DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div><Label>Wagon Number*</Label><Input required value={form.wagonNumber} onChange={e => setForm({...form, wagonNumber: e.target.value})} /></div>
+          <div><Label>Wagon Type ID*</Label><Input required value={form.wagonTypeId} onChange={e => setForm({...form, wagonTypeId: e.target.value})} /></div>
+          <div><Label>Tare Weight (kg)*</Label><Input type="number" required value={form.tareWeight} onChange={e => setForm({...form, tareWeight: parseFloat(e.target.value)})} /></div>
+          <div><Label>Max Payload (kg)*</Label><Input type="number" required value={form.maxPayloadWeight} onChange={e => setForm({...form, maxPayloadWeight: parseFloat(e.target.value)})} /></div>
+          <div><Label>Status</Label><Input value={form.status} onChange={e => setForm({...form, status: e.target.value})} /></div>
+          <div><Label>Notes</Label><Input value={form.notes} onChange={e => setForm({...form, notes: e.target.value})} /></div>
+          <Button type="submit" disabled={createWagon.isPending || updateWagon.isPending}>Save</Button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/components/wagons/WagonsTable.tsx b/apps/edr-freight-web/backoffice/src/components/wagons/WagonsTable.tsx
new file mode 100644
index 000000000..145f643c4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/wagons/WagonsTable.tsx
@@ -0,0 +1,64 @@
+import { useWagonsByTrain, useUnassignWagon, useReorderWagons } from '@/hooks/useWagons';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import { Trash2, GripVertical } from 'lucide-react';
+// import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
+
+export function WagonsTable({ trainId }: { trainId: string }) {
+  const { data: wagons, refetch } = useWagonsByTrain(trainId);
+  const unassign = useUnassignWagon();
+  const reorder = useReorderWagons();
+
+  const onDragEnd = (result: any) => {
+    if (!result.destination) return;
+    const items = Array.from(wagons || []);
+    const [removed] = items.splice(result.source.index, 1);
+    items.splice(result.destination.index, 0, removed);
+    reorder.mutate({ trainId, wagonIds: items.map((w:any) => w.id) });
+  };
+
+  if (!wagons?.length) return <div className="text-muted-foreground">No wagons assigned.</div>;
+
+  return (
+    <div></div>
+    // <DragDropContext onDragEnd={onDragEnd}>
+    //   <Droppable droppableId="wagons">
+    //     {(provided) => (
+    //       <Table {...provided.droppableProps} ref={provided.innerRef}>
+    //         <TableHeader>
+    //           <TableRow>
+    //             <TableHead className="w-10"></TableHead>
+    //             <TableHead>Number</TableHead>
+    //             <TableHead>Type</TableHead>
+    //             <TableHead>Sequence</TableHead>
+    //             <TableHead>Status</TableHead>
+    //             <TableHead>Actions</TableHead>
+    //           </TableRow>
+    //         </TableHeader>
+    //         <TableBody>
+    //           {wagons.map((wagon, idx) => (
+    //             <Draggable key={wagon.id} draggableId={wagon.id} index={idx}>
+    //               {(provided) => (
+    //                 <TableRow ref={provided.innerRef} {...provided.draggableProps}>
+    //                   <TableCell {...provided.dragHandleProps}><GripVertical className="h-4 w-4 cursor-grab" /></TableCell>
+    //                   <TableCell>{wagon.wagonNumber}</TableCell>
+    //                   <TableCell>{wagon.wagonTypeId}</TableCell>
+    //                   <TableCell>{wagon.sequenceNumber}</TableCell>
+    //                   <TableCell>{wagon.status}</TableCell>
+    //                   <TableCell>
+    //                     <Button variant="ghost" size="icon" onClick={() => unassign.mutateAsync(wagon.id).then(() => refetch())}>
+    //                       <Trash2 className="h-4 w-4" />
+    //                     </Button>
+    //                   </TableCell>
+    //                 </TableRow>
+    //               )}
+    //             </Draggable>
+    //           ))}
+    //           {provided.placeholder}
+    //         </TableBody>
+    //       </Table>
+    //     )}
+    //   </Droppable>
+    // </DragDropContext>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/constants/QUERY_KEYS.ts b/apps/edr-freight-web/backoffice/src/constants/QUERY_KEYS.ts
new file mode 100644
index 000000000..051b2aec1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/constants/QUERY_KEYS.ts
@@ -0,0 +1,63 @@
+import type { BookingListFilter } from "@/services/bookings.service";
+import type { RuleEngineListParams } from "@/services/ruleEngine/ruleEngine.service";
+import type { TrainScheduleFilters } from "@/types/trainScheduling";
+import type { RuleEngineResourceSlug } from "@/types/rule-engine";
+
+export const QUERY_KEYS = {
+  USERS: {
+    ROOT: ["users"] as const,
+    ADD: ["users", "add"] as const,
+  },
+
+  FILES: {
+    ROOT: ["file-upload-settings"] as const,
+    list: () => ["file-upload-settings", "list"] as const,
+    byId: (id: string) => ["file-upload-settings", "detail", id] as const,
+    byCode: (code: string) => ["file-upload-settings", "by-code", code] as const,
+  },
+
+  DROPDOWN_SETTINGS: {
+    ROOT: ["dropdown-settings"] as const,
+    list: () => ["dropdown-settings", "list"] as const,
+    byId: (id: string) => ["dropdown-settings", "detail", id] as const,
+    byCode: (code: string) => ["dropdown-settings", "by-code", code] as const,
+  },
+
+  CUSTOMERS: {
+    ROOT: ["customers"] as const,
+    list: () => ["customers", "list"] as const,
+    byId: (id: string) => ["customers", "detail", id] as const,
+  },
+
+  BOOKINGS: {
+    ROOT: ["bookings"] as const,
+    list: (filter?: BookingListFilter) =>
+      ["bookings", "list", filter ?? {}] as const,
+    listSummary: (filter?: BookingListFilter) =>
+      ["bookings", "list-summary", filter ?? {}] as const,
+    byId: (id: string) => ["bookings", "detail", id] as const,
+  },
+
+  TRAIN_SCHEDULING: {
+    ROOT: ["train-scheduling"] as const,
+    eligible: (filters?: TrainScheduleFilters) =>
+      ["train-scheduling", "eligible-bookings", filters ?? {}] as const,
+    locomotives: () => ["train-scheduling", "locomotives"] as const,
+    stations: () => ["train-scheduling", "stations"] as const,
+    schedules: () => ["train-scheduling", "schedules"] as const,
+    scheduleById: (id: string) => ["train-scheduling", "schedule", id] as const,
+  },
+
+  RULE_ENGINE: {
+    ROOT: ["rule-engine"] as const,
+    list: (resource: RuleEngineResourceSlug | string, params?: RuleEngineListParams) =>
+      ["rule-engine", "list", resource, params ?? {}] as const,
+    detail: (resource: RuleEngineResourceSlug | string, id: string) =>
+      ["rule-engine", "detail", resource, id] as const,
+    chain: ["rule-engine", "approval-rules", "chain"] as const,
+    selectOptions: (
+      resource: RuleEngineResourceSlug | string,
+      params?: Record<string, unknown>,
+    ) => ["rule-engine", "select-options", resource, params ?? {}] as const,
+  },
+} as const;
diff --git a/apps/edr-freight-web/backoffice/src/constants/TANSTACK_QUEY_KEY.ts b/apps/edr-freight-web/backoffice/src/constants/TANSTACK_QUEY_KEY.ts
deleted file mode 100644
index fca149d58..000000000
--- a/apps/edr-freight-web/backoffice/src/constants/TANSTACK_QUEY_KEY.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export const QUERY_KEYS = {
-    USERS: "users",
-    ADD_USER: "add_user",
-    CUSTOMER: "Customers",
-    FILES: {
-        FILE_UPLOAD_SETTINGS: "file-upload-settings",
-        BY_CODE: "by-code"
-    },
-    DROPDOWN_SETTINGS: {
-        ROOT: "dropdown-settings",
-        LIST: "list",
-        BY_ID: "by-id",
-        BY_CODE: "by-code"
-    },
-    CUSTOMERS: {
-        ROOT: "customers",
-        LIST: "list",
-        BY_ID: "by-id"
-    },
-    RULE_ENGINE: {
-        ROOT: "rule-engine",
-        list: (resource: string) => ["rule-engine", resource, "list"] as const,
-        chain: ["rule-engine", "approval-rules", "chain"] as const,
-    },
-}
diff --git a/apps/edr-freight-web/backoffice/src/constants/URLS.ts b/apps/edr-freight-web/backoffice/src/constants/URLS.ts
index f5c75395e..87338ba72 100644
--- a/apps/edr-freight-web/backoffice/src/constants/URLS.ts
+++ b/apps/edr-freight-web/backoffice/src/constants/URLS.ts
@@ -77,9 +77,30 @@ export const URL_CONSTANTS = {
 
   BOOKINGS: {
     BASE: "/bookings",
-    BY_ID: (id: string | number) => `/bookings/${id}`,
-    CANCEL: (id: string | number) => `/bookings/${id}/cancel`,
-    CONFIRM: (id: string | number) => `/bookings/${id}/confirm`,
+    LIST_SUMMARY: "/bookings/list-summary",
+    BY_ID: (id: string) => `/bookings/${id}`,
+    QUEUE: (queue: string) => `/bookings/queues/${queue}`,
+    STAFF_ACCEPT: (id: string) => `/bookings/${id}/staff/accept`,
+    STAFF_REQUEST_CHANGES: (id: string) =>
+      `/bookings/${id}/staff/request-changes`,
+    STAFF_REJECT: (id: string) => `/bookings/${id}/staff/reject`,
+    APPROVE_STEP: (id: string, stepId: string) =>
+      `/bookings/${id}/approval-steps/${stepId}/approve`,
+    REJECT_STEP: (id: string, stepId: string) =>
+      `/bookings/${id}/approval-steps/${stepId}/reject`,
+    CONTRACT_GENERATE: (id: string) => `/bookings/${id}/contract/generate`,
+    CONTRACT_VIEW: (id: string) => `/bookings/${id}/contract/view`,
+    CONTRACT_DOCUMENT: (id: string) => `/bookings/${id}/contract/document`,
+    CONTRACT_SIGN: (id: string) => `/bookings/${id}/contract/sign`,
+    CONTRACT_DOWNLOAD: (id: string) => `/bookings/${id}/contract`,
+    SUMMARY: (id: string) => `/bookings/${id}/summary`,
+    CUSTOMER_SIGN: (id: string) => `/bookings/${id}/customer/sign`,
+    MARKETING_APPROVE: (id: string) => `/bookings/${id}/marketing/approve`,
+    PAYMENT_PAY: (id: string) => `/bookings/${id}/payment/pay`,
+    START_TRANSIT: (id: string) => `/bookings/${id}/operations/start-transit`,
+    COMPLETE: (id: string) => `/bookings/${id}/operations/complete`,
+    CANCEL: (id: string) => `/bookings/${id}/cancel`,
+    CONSOLIDATION: (id: string) => `/bookings/${id}/consolidation`,
   },
 
   OTP: {
@@ -87,6 +108,19 @@ export const URL_CONSTANTS = {
     VERIFY: "/api/otp/verify",
   },
 
+  LOCOMOTIVES: {
+    BASE: "/locomotives",
+  },
+
+  TRAIN_SCHEDULING: {
+    ELIGIBLE_BOOKINGS: "/train-scheduling/container/eligible-bookings",
+    PREVIEW: "/train-scheduling/container/preview",
+    SCHEDULES: "/train-scheduling/container/schedules",
+    SCHEDULE_BY_ID: (id: string) => `/train-scheduling/container/schedules/${id}`,
+    CANCEL_SCHEDULE: (id: string) =>
+      `/train-scheduling/container/schedules/${id}/cancel`,
+  },
+
   RULE_ENGINE: {
     CARGO_TYPES: "/cargo-types",
     CARGO_TYPE_BY_ID: (id: string) => `/cargo-types/${id}`,
@@ -122,4 +156,18 @@ export const URL_CONSTANTS = {
     APPROVAL_RULE_BY_ID: (id: string) => `/approval-rules/${id}`,
     APPROVAL_RULES_CHAIN: "/approval-rules/chain",
   },
+   RATE_MATRIX: {
+    BASE: '/api/rate-matrices',
+    DRAFT: '/api/rate-matrices/draft',
+    SUBMIT: (id: string) => `/api/rate-matrices/${id}/submit`,
+    AUTHORIZE: (id: string) => `/api/rate-matrices/${id}/authorize`,
+    LIST: '/api/rate-matrices',
+    DETAIL: (id: string) => `/api/rate-matrices/${id}`,
+  },
+  REFERENCE: {
+    PORTS: '/api/reference/ports',
+    CITIES: '/api/reference/cities',
+    CONTAINER_TYPES: '/api/reference/container-types',
+    CURRENCIES: '/api/reference/currencies',
+  },
 };
diff --git a/apps/edr-freight-web/backoffice/src/constants/rateMatrixConstants.ts b/apps/edr-freight-web/backoffice/src/constants/rateMatrixConstants.ts
new file mode 100644
index 000000000..ff8d3bb80
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/constants/rateMatrixConstants.ts
@@ -0,0 +1,60 @@
+// constants/rateMatrixConstants.ts
+export const RATE_TYPES = {
+  CONTAINER_IMPORT: 'container_import',
+  CONTAINER_EXPORT: 'container_export',
+  BULK_IMPORT: 'bulk_import',
+  BULK_EXPORT: 'bulk_export',
+  INTER_CITY_BULK: 'inter_city_bulk',
+  INTER_CITY_CONTAINER: 'inter_city_container',
+  FIRST_MILE: 'first_mile',
+  LAST_MILE: 'last_mile',
+  DEMURRAGE: 'demurrage',
+  LASHING: 'lashing',
+  DOUBLE_HANDLING: 'double_handling',
+  CONTAINER_WITH_RETURN: 'container_with_return',
+  CANCELLATION_FEE: 'cancellation_fee',
+} as const;
+
+export const RATE_TYPE_LABELS = {
+  [RATE_TYPES.CONTAINER_IMPORT]: 'Container Import Rates',
+  [RATE_TYPES.CONTAINER_EXPORT]: 'Container Export Rates',
+  [RATE_TYPES.BULK_IMPORT]: 'Bulk Import Rates',
+  [RATE_TYPES.BULK_EXPORT]: 'Bulk Export Rates',
+  [RATE_TYPES.INTER_CITY_BULK]: 'Inter City Bulk Rates',
+  [RATE_TYPES.INTER_CITY_CONTAINER]: 'Inter City Container Rates',
+  [RATE_TYPES.FIRST_MILE]: 'First Mile Cost Rates',
+  [RATE_TYPES.LAST_MILE]: 'Last Mile Cost Rates',
+  [RATE_TYPES.DEMURRAGE]: 'Demurrage Cost Rates',
+  [RATE_TYPES.LASHING]: 'Lashing Cost Rates',
+  [RATE_TYPES.DOUBLE_HANDLING]: 'Double Handling Cost Rates',
+  [RATE_TYPES.CONTAINER_WITH_RETURN]: 'Container With Return Cost Rates',
+  [RATE_TYPES.CANCELLATION_FEE]: 'Cancellation Fee Cost Rates',
+} as const;
+
+export const REQUIRED_RATE_TYPES = Object.values(RATE_TYPES);
+
+export const RATE_FIELDS_CONFIG = {
+  [RATE_TYPES.CONTAINER_IMPORT]: [
+    { name: 'portOfLoading', label: 'Port of Loading', type: 'text', required: true },
+    { name: 'portOfDischarge', label: 'Port of Discharge', type: 'text', required: true },
+    { name: 'containerType', label: 'Container Type', type: 'select', required: true },
+    { name: 'baseRate', label: 'Base Rate', type: 'number', required: true, min: 0, step: '0.01' },
+    { name: 'baf', label: 'Bunker Adjustment Factor', type: 'number', required: false, min: 0 },
+    { name: 'caf', label: 'Currency Adjustment Factor', type: 'number', required: false, min: 0 },
+  ],
+  [RATE_TYPES.DEMURRAGE]: [
+    { name: 'containerType', label: 'Container Type', type: 'select', required: true },
+    { name: 'freeDays', label: 'Free Days', type: 'number', required: true, min: 0 },
+    { name: 'ratePerDay', label: 'Rate per Day', type: 'number', required: true, min: 0 },
+    { name: 'maximumDays', label: 'Maximum Days', type: 'number', required: false, min: 1 },
+  ],
+  // ... define for all 13 rate types
+} as const;
+
+export const MATRIX_STATUS = {
+  DRAFT: 'draft',
+  PENDING_APPROVAL: 'pending_approval',
+  ACTIVE: 'active',
+  REJECTED: 'rejected',
+  EXPIRED: 'expired',
+} as const;
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/features/bookings/approval-progress.ts b/apps/edr-freight-web/backoffice/src/features/bookings/approval-progress.ts
new file mode 100644
index 000000000..6ada30634
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/features/bookings/approval-progress.ts
@@ -0,0 +1,79 @@
+import type { BookingApprovalStep, BookingStatus } from "@/types/booking";
+import { getNextPendingApprovalStep } from "@/features/bookings/booking-actions.config";
+
+export interface ApprovalProgressSummary {
+  label: string;
+  detail: string;
+  complete: boolean;
+}
+
+/** Compact approval chain summary for list rows and badges. */
+export function formatApprovalProgress(
+  status: BookingStatus | string,
+  steps?: BookingApprovalStep[] | null,
+): ApprovalProgressSummary {
+  const sorted = [...(steps ?? [])].sort((a, b) => a.stepOrder - b.stepOrder);
+
+  if (sorted.length === 0) {
+    if (status === "SUBMITTED") {
+      return {
+        label: "Awaiting accept",
+        detail: "Staff must accept intake",
+        complete: false,
+      };
+    }
+    if (
+      status === "PENDING_APPROVAL" ||
+      status === "APPROVED_PENDING_SIGNATURE"
+    ) {
+      return {
+        label: "No steps",
+        detail: "Approval chain not started",
+        complete: false,
+      };
+    }
+    if (
+      [
+        "APPROVED",
+        "CONTRACT_READY",
+        "SIGNED_CUSTOMER",
+        "FULLY_EXECUTED",
+        "PAID",
+        "COMPLETED",
+      ].includes(status)
+    ) {
+      return {
+        label: "Approved",
+        detail: "Internal approval complete",
+        complete: true,
+      };
+    }
+    return { label: "—", detail: "", complete: false };
+  }
+
+  const approved = sorted.filter((s) => s.status === "APPROVED").length;
+  const total = sorted.length;
+  const next = getNextPendingApprovalStep(sorted);
+
+  if (!next && approved === total) {
+    return {
+      label: `${approved}/${total} done`,
+      detail: sorted.map((s) => `${s.requiredRole} ✓`).join(" · "),
+      complete: true,
+    };
+  }
+
+  if (next) {
+    return {
+      label: `${approved}/${total}`,
+      detail: `Next: ${next.requiredRole} (step ${next.stepOrder})`,
+      complete: false,
+    };
+  }
+
+  return {
+    label: `${approved}/${total}`,
+    detail: sorted.map((s) => `${s.requiredRole}: ${s.status}`).join(" · "),
+    complete: approved === total,
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/features/bookings/booking-actions.config.ts b/apps/edr-freight-web/backoffice/src/features/bookings/booking-actions.config.ts
new file mode 100644
index 000000000..652988a39
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/features/bookings/booking-actions.config.ts
@@ -0,0 +1,373 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  Ban,
+  Check,
+  FileSignature,
+  FileText,
+  MessageSquareWarning,
+  Play,
+  ShieldCheck,
+  Truck,
+  Wallet,
+  XCircle,
+} from "lucide-react";
+
+import type { AuthUser } from "@/auth/types";
+import {
+  FREIGHT_PERMS,
+  hasPermission,
+  isFreightApprovalAdmin,
+} from "@/lib/permissions";
+import type {
+  BookingApprovalStep,
+  BookingDetail,
+  BookingStatus,
+} from "@/types/booking";
+
+export type BookingActionId =
+  | "accept"
+  | "requestChanges"
+  | "reject"
+  | "approve"
+  | "rejectApproval"
+  | "generateContract"
+  | "viewContract"
+  | "signContractStaff"
+  | "payBooking"
+  | "startTransit"
+  | "complete"
+  | "cancel";
+
+export type BookingActionInputKind = "note" | "reason" | "file";
+
+export interface BookingActionDef {
+  id: BookingActionId;
+  label: string;
+  shortLabel: string;
+  description: string;
+  confirmTitle: string;
+  confirmDescription: string;
+  variant: "default" | "destructive" | "outline";
+  icon: LucideIcon;
+  input?: BookingActionInputKind;
+  inputLabel?: string;
+  inputPlaceholder?: string;
+  primary?: boolean;
+}
+
+export type BookingActionContext = Pick<
+  BookingDetail,
+  "status" | "paymentCurrency" | "approvalSteps" | "reference"
+>;
+
+export function getNextPendingApprovalStep(
+  steps?: BookingApprovalStep[] | null,
+): BookingApprovalStep | undefined {
+  if (!steps?.length) return undefined;
+  return [...steps]
+    .sort((a, b) => a.stepOrder - b.stepOrder)
+    .find((s) => s.status === "PENDING");
+}
+
+function approvalActions(
+  steps?: BookingApprovalStep[] | null,
+): BookingActionDef[] {
+  const next = getNextPendingApprovalStep(steps);
+  if (!next) return [];
+  return [
+    buildApproveActionForStep(next),
+    {
+      id: "rejectApproval",
+      label: "Reject approval",
+      shortLabel: "Reject",
+      description: "Reject at the current approval step",
+      confirmTitle: "Reject at approval step?",
+      confirmDescription:
+        "The booking will be marked rejected. This action cannot be undone from the UI.",
+      variant: "destructive",
+      icon: XCircle,
+      input: "reason",
+      inputLabel: "Rejection reason",
+      inputPlaceholder: "Explain why this booking is rejected…",
+    },
+  ];
+}
+
+const SUBMITTED_ACTIONS: BookingActionDef[] = [
+  {
+    id: "accept",
+    label: "Accept for approval",
+    shortLabel: "Accept",
+    description: "Start the formal approval chain",
+    confirmTitle: "Accept submission?",
+    confirmDescription:
+      "The booking moves to pending approval and approval steps are created from the rule engine.",
+    variant: "default",
+    icon: ShieldCheck,
+    primary: true,
+  },
+  {
+    id: "requestChanges",
+    label: "Request changes",
+    shortLabel: "Changes",
+    description: "Ask the customer to update and resubmit",
+    confirmTitle: "Request changes from customer?",
+    confirmDescription:
+      "The customer will see your note and can edit the booking before resubmitting.",
+    variant: "outline",
+    icon: MessageSquareWarning,
+    input: "note",
+    inputLabel: "Message to customer",
+    inputPlaceholder: "Describe what needs to be corrected or added…",
+  },
+  {
+    id: "reject",
+    label: "Reject booking",
+    shortLabel: "Reject",
+    description: "Reject this submission",
+    confirmTitle: "Reject booking?",
+    confirmDescription:
+      "The booking will be marked rejected and removed from active queues.",
+    variant: "destructive",
+    icon: Ban,
+    input: "reason",
+    inputLabel: "Rejection reason",
+    inputPlaceholder: "Reason for rejection…",
+  },
+];
+
+const CANCEL_ACTION: BookingActionDef = {
+  id: "cancel",
+  label: "Cancel booking",
+  shortLabel: "Cancel",
+  description: "Cancel this booking",
+  confirmTitle: "Cancel booking?",
+  confirmDescription:
+    "The booking will be marked cancelled. Provide a reason for the audit trail.",
+  variant: "destructive",
+  icon: Ban,
+  input: "reason",
+  inputLabel: "Cancellation reason",
+  inputPlaceholder: "Reason for cancellation…",
+};
+
+const VIEW_CONTRACT_ACTION: BookingActionDef = {
+  id: "viewContract",
+  label: "View contract",
+  shortLabel: "Contract",
+  description: "Open contract document and signatures",
+  confirmTitle: "",
+  confirmDescription: "",
+  variant: "outline",
+  icon: FileSignature,
+};
+
+const SIGN_CONTRACT_STAFF_ACTION: BookingActionDef = {
+  id: "signContractStaff",
+  label: "Sign contract",
+  shortLabel: "Sign",
+  description: "Open contract page and apply staff counter-signature",
+  confirmTitle: "",
+  confirmDescription: "",
+  variant: "default",
+  icon: FileSignature,
+  primary: true,
+};
+
+const PAY_BOOKING_ACTION: BookingActionDef = {
+  id: "payBooking",
+  label: "Pay",
+  shortLabel: "Pay",
+  description: "Complete in-app payment",
+  confirmTitle: "Complete payment?",
+  confirmDescription:
+    "This simulates an in-app payment (Telebirr for ETB, card for USD) and marks the booking as paid.",
+  variant: "default",
+  icon: Wallet,
+  primary: true,
+};
+
+function withCancel(actions: BookingActionDef[]): BookingActionDef[] {
+  return [...actions, CANCEL_ACTION];
+}
+
+const ACTION_PERMISSION: Partial<Record<BookingActionId, string>> = {
+  accept: FREIGHT_PERMS.bookings.staffAccept,
+  requestChanges: FREIGHT_PERMS.bookings.requestChanges,
+  reject: FREIGHT_PERMS.bookings.reject,
+  rejectApproval: FREIGHT_PERMS.bookings.rejectApproval,
+  generateContract: FREIGHT_PERMS.bookings.generateContract,
+  viewContract: FREIGHT_PERMS.bookings.view,
+  signContractStaff: FREIGHT_PERMS.bookings.signStaff,
+  payBooking: FREIGHT_PERMS.bookings.view,
+  startTransit: FREIGHT_PERMS.bookings.operations,
+  complete: FREIGHT_PERMS.bookings.operations,
+  cancel: FREIGHT_PERMS.bookings.cancel,
+};
+
+const approvePermissionForRole = (role: string): string | undefined => {
+  if (role === "LINE_STAFF") return FREIGHT_PERMS.bookings.approveLineStaff;
+  if (role === "DIRECTOR") return FREIGHT_PERMS.bookings.approveDirector;
+  if (role === "CEO") return FREIGHT_PERMS.bookings.approveCeo;
+  return undefined;
+};
+
+/** True when this step is the current pending step and the user may approve it. */
+export function canActOnApprovalStep(
+  user: AuthUser | null | undefined,
+  step: BookingApprovalStep,
+  steps?: BookingApprovalStep[] | null,
+): boolean {
+  if (step.status !== "PENDING") return false;
+  const next = getNextPendingApprovalStep(steps);
+  if (!next || next.id !== step.id) return false;
+  if (isFreightApprovalAdmin(user)) return true;
+  const perm = approvePermissionForRole(step.requiredRole);
+  return perm ? hasPermission(user, perm) : false;
+}
+
+export function buildApproveActionForStep(
+  step: BookingApprovalStep,
+): BookingActionDef {
+  return {
+    id: "approve",
+    label: `Approve (${step.requiredRole})`,
+    shortLabel: "Approve",
+    description: `Complete step ${step.stepOrder} as ${step.requiredRole}`,
+    confirmTitle: `Approve as ${step.requiredRole}?`,
+    confirmDescription:
+      "This records your approval and advances the booking to the next step in the chain.",
+    variant: "default",
+    icon: Check,
+    primary: true,
+  };
+}
+
+function filterActionsByUser(
+  actions: BookingActionDef[],
+  user: AuthUser | null | undefined,
+  approvalSteps?: BookingApprovalStep[] | null,
+): BookingActionDef[] {
+  if (!user) return [];
+  const next = getNextPendingApprovalStep(approvalSteps);
+  return actions.filter((action) => {
+    if (action.id === "approve" && next) {
+      return canActOnApprovalStep(user, next, approvalSteps);
+    }
+    const perm = ACTION_PERMISSION[action.id];
+    return perm ? hasPermission(user, perm) : true;
+  });
+}
+
+/** Actions available for the current booking status (detail or list). */
+export function getBookingActions(
+  ctx: BookingActionContext,
+  user?: AuthUser | null,
+): BookingActionDef[] {
+  const { status, approvalSteps } = ctx;
+
+  let actions: BookingActionDef[];
+
+  switch (status) {
+    case "SUBMITTED":
+      actions = withCancel(SUBMITTED_ACTIONS);
+      break;
+    case "PENDING_APPROVAL":
+    case "APPROVED_PENDING_SIGNATURE":
+      actions = withCancel(approvalActions(approvalSteps));
+      break;
+    case "APPROVED":
+      actions = [
+        {
+          id: "generateContract",
+          label: "Generate contract",
+          shortLabel: "Contract",
+          description: "Create contract document",
+          confirmTitle: "Generate contract?",
+          confirmDescription:
+            "A contract will be generated and the booking moves to contract ready.",
+          variant: "default",
+          icon: FileText,
+          primary: true,
+        },
+        CANCEL_ACTION,
+      ];
+      break;
+    case "CONTRACT_READY":
+      actions = [{ ...VIEW_CONTRACT_ACTION, primary: true }];
+      break;
+    case "SIGNED_CUSTOMER":
+      actions = [SIGN_CONTRACT_STAFF_ACTION, VIEW_CONTRACT_ACTION];
+      break;
+    case "FULLY_EXECUTED":
+      actions = [
+        PAY_BOOKING_ACTION,
+        { ...VIEW_CONTRACT_ACTION, label: "View executed contract" },
+      ];
+      break;
+    case "PAID":
+      actions = [
+        {
+          id: "startTransit",
+          label: "Start transit",
+          shortLabel: "Transit",
+          description: "Begin rail movement",
+          confirmTitle: "Start transit?",
+          confirmDescription: "The booking will move to in transit status.",
+          variant: "default",
+          icon: Truck,
+          primary: true,
+        },
+      ];
+      break;
+    case "IN_TRANSIT":
+      actions = [
+        {
+          id: "complete",
+          label: "Complete booking",
+          shortLabel: "Complete",
+          description: "Mark journey finished",
+          confirmTitle: "Complete booking?",
+          confirmDescription:
+            "Marks the booking as completed. No further staff transitions apply.",
+          variant: "default",
+          icon: Play,
+          primary: true,
+        },
+      ];
+      break;
+    case "CHANGES_REQUESTED":
+      actions = [CANCEL_ACTION];
+      break;
+    default:
+      actions = [];
+  }
+
+  if (user === undefined) return actions;
+  return filterActionsByUser(actions, user, approvalSteps);
+}
+
+/** Opens contract page without confirmation dialog. */
+export function isContractNavAction(id: BookingActionId): boolean {
+  return id === "viewContract" || id === "signContractStaff";
+}
+
+export function listRowHasActions(
+  row: {
+    status: BookingStatus;
+    paymentCurrency: string;
+    approvalSteps?: BookingApprovalStep[] | null;
+  },
+  user?: AuthUser | null,
+): boolean {
+  const actions = getBookingActions(
+    {
+      status: row.status,
+      paymentCurrency: row.paymentCurrency,
+      reference: "",
+      approvalSteps: row.approvalSteps,
+    },
+    user,
+  );
+  return actions.length > 0;
+}
diff --git a/apps/edr-freight-web/backoffice/src/features/bookings/booking-status.config.ts b/apps/edr-freight-web/backoffice/src/features/bookings/booking-status.config.ts
new file mode 100644
index 000000000..b3312f3d3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/features/bookings/booking-status.config.ts
@@ -0,0 +1,267 @@
+import type { BookingStatus } from "@/types/booking";
+
+export interface StatusStyle {
+  label: string;
+  color: string;
+}
+
+export const BOOKING_STATUS_STYLES: Record<string, StatusStyle> = {
+  DRAFT: {
+    label: "Draft",
+    color: "bg-slate-100 text-slate-700 border-slate-300",
+  },
+  SUBMITTED: {
+    label: "Submitted",
+    color: "bg-amber-50 text-amber-700 border-amber-200",
+  },
+  CHANGES_REQUESTED: {
+    label: "Changes Requested",
+    color: "bg-orange-50 text-orange-700 border-orange-200",
+  },
+  PENDING_APPROVAL: {
+    label: "Pending Approval",
+    color: "bg-amber-50 text-amber-700 border-amber-200",
+  },
+  APPROVED_PENDING_SIGNATURE: {
+    label: "Pending Signature",
+    color: "bg-sky-50 text-sky-700 border-sky-200",
+  },
+  APPROVED: {
+    label: "Approved",
+    color: "bg-emerald-50 text-emerald-700 border-emerald-200",
+  },
+  CONTRACT_READY: {
+    label: "Contract Ready",
+    color: "bg-indigo-50 text-indigo-700 border-indigo-200",
+  },
+  SIGNED_CUSTOMER: {
+    label: "Customer Signed",
+    color: "bg-sky-50 text-sky-700 border-sky-200",
+  },
+  FULLY_EXECUTED: {
+    label: "Fully Executed",
+    color: "bg-indigo-50 text-indigo-700 border-indigo-200",
+  },
+  PNR_GENERATED: {
+    label: "PNR Generated",
+    color: "bg-violet-50 text-violet-700 border-violet-200",
+  },
+  PAYMENT_VERIFICATION_IN_PROGRESS: {
+    label: "Payment Verification",
+    color: "bg-amber-50 text-amber-800 border-amber-200",
+  },
+  PAID: {
+    label: "Paid",
+    color: "bg-emerald-50 text-emerald-700 border-emerald-200",
+  },
+  IN_TRANSIT: {
+    label: "In Transit",
+    color: "bg-sky-50 text-sky-700 border-sky-200",
+  },
+  COMPLETED: {
+    label: "Completed",
+    color: "bg-indigo-50 text-indigo-700 border-indigo-200",
+  },
+  REJECTED: {
+    label: "Rejected",
+    color: "bg-red-50 text-red-700 border-red-200",
+  },
+  CANCELLED: {
+    label: "Cancelled",
+    color: "bg-red-50 text-red-700 border-red-200",
+  },
+  PENDING_CONSOLIDATION: {
+    label: "Pending Consolidation",
+    color: "bg-amber-50 text-amber-700 border-amber-200",
+  },
+  CONSOLIDATED: {
+    label: "Consolidated",
+    color: "bg-indigo-50 text-indigo-700 border-indigo-200",
+  },
+};
+
+export interface StatusMeta {
+  title: string;
+  description: string;
+  color: string;
+  stage: number;
+}
+
+export const BOOKING_STATUS_META: Record<string, StatusMeta> = {
+  DRAFT: {
+    title: "Draft",
+    description: "Booking is being prepared by the customer.",
+    color: "text-slate-500",
+    stage: 0,
+  },
+  SUBMITTED: {
+    title: "Submitted",
+    description: "Awaiting staff review.",
+    color: "text-amber-600",
+    stage: 0,
+  },
+  CHANGES_REQUESTED: {
+    title: "Changes Requested",
+    description: "Returned to customer for updates.",
+    color: "text-orange-600",
+    stage: 0,
+  },
+  PENDING_APPROVAL: {
+    title: "Pending Approval",
+    description: "Moving through internal approval chain.",
+    color: "text-amber-600",
+    stage: 1,
+  },
+  APPROVED_PENDING_SIGNATURE: {
+    title: "Pending Signature",
+    description: "Awaiting director or CEO signature steps.",
+    color: "text-sky-600",
+    stage: 1,
+  },
+  APPROVED: {
+    title: "Approved",
+    description: "Ready to generate contract.",
+    color: "text-emerald-600",
+    stage: 2,
+  },
+  CONTRACT_READY: {
+    title: "Contract Ready",
+    description: "Contract generated; awaiting customer signature.",
+    color: "text-indigo-600",
+    stage: 2,
+  },
+  SIGNED_CUSTOMER: {
+    title: "Customer Signed",
+    description: "Awaiting contract execution.",
+    color: "text-sky-600",
+    stage: 2,
+  },
+  FULLY_EXECUTED: {
+    title: "Fully Executed",
+    description: "Contract locked; proceed to payment.",
+    color: "text-indigo-600",
+    stage: 3,
+  },
+  PNR_GENERATED: {
+    title: "PNR Generated",
+    description: "ETB payment reference issued.",
+    color: "text-violet-600",
+    stage: 3,
+  },
+  PAYMENT_VERIFICATION_IN_PROGRESS: {
+    title: "Payment Verification",
+    description: "USD payment proof under review.",
+    color: "text-amber-700",
+    stage: 3,
+  },
+  PAID: {
+    title: "Paid",
+    description: "Payment confirmed; ready for operations.",
+    color: "text-emerald-600",
+    stage: 4,
+  },
+  IN_TRANSIT: {
+    title: "In Transit",
+    description: "Shipment is on the railway network.",
+    color: "text-sky-600",
+    stage: 4,
+  },
+  COMPLETED: {
+    title: "Completed",
+    description: "Booking fulfilled.",
+    color: "text-indigo-600",
+    stage: 5,
+  },
+  REJECTED: {
+    title: "Rejected",
+    description: "Booking was rejected.",
+    color: "text-red-600",
+    stage: -1,
+  },
+  CANCELLED: {
+    title: "Cancelled",
+    description: "Booking was cancelled.",
+    color: "text-red-600",
+    stage: -1,
+  },
+  PENDING_CONSOLIDATION: {
+    title: "Pending Consolidation",
+    description: "Waiting for consolidation partner.",
+    color: "text-amber-600",
+    stage: 4,
+  },
+  CONSOLIDATED: {
+    title: "Consolidated",
+    description: "Paired with another booking.",
+    color: "text-indigo-600",
+    stage: 4,
+  },
+};
+
+export const BOOKING_LIST_TABS = [
+  { key: "all", label: "All bookings", statuses: null as string[] | null },
+  { key: "intake", label: "Submitted", statuses: ["SUBMITTED"] },
+  {
+    key: "in_approval",
+    label: "In approval",
+    statuses: ["PENDING_APPROVAL", "APPROVED_PENDING_SIGNATURE"],
+  },
+  {
+    key: "approved_contract",
+    label: "Approved & contract",
+    statuses: [
+      "APPROVED",
+      "CONTRACT_READY",
+      "SIGNED_CUSTOMER",
+      "FULLY_EXECUTED",
+    ],
+  },
+  {
+    key: "payment",
+    label: "Payment",
+    statuses: ["FULLY_EXECUTED", "PAID"],
+  },
+  { key: "operations", label: "Operations", statuses: ["IN_TRANSIT", "PENDING_CONSOLIDATION", "CONSOLIDATED"] },
+  { key: "completed", label: "Completed", statuses: ["COMPLETED"] },
+  { key: "closed", label: "Closed", statuses: ["REJECTED", "CANCELLED"] },
+] as const;
+
+export type BookingStatusTabKey = (typeof BOOKING_LIST_TABS)[number]["key"];
+
+export const WORKFLOW_STAGES = [
+  { label: "Submission", statuses: ["DRAFT", "SUBMITTED", "CHANGES_REQUESTED"] },
+  {
+    label: "Approval",
+    statuses: ["PENDING_APPROVAL", "APPROVED_PENDING_SIGNATURE"],
+  },
+  {
+    label: "Contract",
+    statuses: ["APPROVED", "CONTRACT_READY", "SIGNED_CUSTOMER", "FULLY_EXECUTED"],
+  },
+  {
+    label: "Payment",
+    statuses: ["FULLY_EXECUTED", "PAID"],
+  },
+  {
+    label: "Operations",
+    statuses: ["IN_TRANSIT", "PENDING_CONSOLIDATION", "CONSOLIDATED"],
+  },
+  { label: "Done", statuses: ["COMPLETED"] },
+] as const;
+
+export function getStatusMeta(status: BookingStatus | string): StatusMeta {
+  return (
+    BOOKING_STATUS_META[status] ?? {
+      title: status,
+      description: "",
+      color: "text-muted-foreground",
+      stage: 0,
+    }
+  );
+}
+
+export function getWorkflowStageIndex(status: BookingStatus | string): number {
+  const meta = getStatusMeta(status);
+  if (meta.stage < 0) return -1;
+  return meta.stage;
+}
diff --git a/apps/edr-freight-web/backoffice/src/features/bookings/mapBookingListRow.ts b/apps/edr-freight-web/backoffice/src/features/bookings/mapBookingListRow.ts
new file mode 100644
index 000000000..6b32cbf30
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/features/bookings/mapBookingListRow.ts
@@ -0,0 +1,36 @@
+import type { BookingDetail, BookingListRow } from "@/types/booking";
+
+function labelFromRef(
+  ref?: { name?: string; label?: string; code?: string; companyName?: string },
+  fallback = "—",
+): string {
+  if (!ref) return fallback;
+  return (
+    ref.companyName ??
+    ref.label ??
+    ref.name ??
+    ref.code ??
+    fallback
+  );
+}
+
+export function toBookingListRow(booking: BookingDetail): BookingListRow {
+  return {
+    id: booking.id,
+    reference: booking.reference,
+    approvalSteps: booking.approvalSteps,
+    customerLabel: labelFromRef(booking.company, booking.companyId),
+    // customerLabel: labelFromRef(booking.customer, booking.customerId),
+    status: booking.status,
+    scheduledDate: booking.scheduledDate,
+    totalAmount: Number(booking.totalAmount),
+    paymentCurrency: booking.paymentCurrency,
+    paymentStatus: booking.paymentStatus,
+    tradeDirection: booking.tradeDirection,
+    freightType: booking.freightType,
+    originLabel: labelFromRef(booking.originYard),
+    destinationLabel: labelFromRef(booking.destinationYard),
+    priorityScore: booking.priorityScore ?? 0,
+    createdAt: booking.createdAt,
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/hooks/bookings/useBookings.ts b/apps/edr-freight-web/backoffice/src/hooks/bookings/useBookings.ts
new file mode 100644
index 000000000..d68535f78
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/hooks/bookings/useBookings.ts
@@ -0,0 +1,167 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+
+import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
+import { api } from "@/services/api";
+import {
+  bookingsService,
+  type BookingListFilter,
+} from "@/services/bookings.service";
+import { invalidateBookingDetail } from "@/utils/queryInvalidation";
+
+export function useBookingList(filter?: BookingListFilter, enabled = true) {
+  return useQuery({
+    queryKey: QUERY_KEYS.BOOKINGS.list(filter),
+    queryFn: () => bookingsService.list(filter),
+    enabled,
+  });
+}
+
+export function useBookingListSummary(filter?: BookingListFilter, enabled = true) {
+  return useQuery({
+    queryKey: QUERY_KEYS.BOOKINGS.listSummary(filter),
+    queryFn: () => bookingsService.getListSummary(filter),
+    enabled,
+  });
+}
+
+export function useBookingDetail(id: string | undefined) {
+  return useQuery({
+    queryKey: QUERY_KEYS.BOOKINGS.byId(id ?? ""),
+    queryFn: () => bookingsService.getById(id!),
+    enabled: Boolean(id),
+  });
+}
+
+export function useBookingMutations(bookingId: string) {
+  const qc = useQueryClient();
+  const onSuccess = (data: { id: string }, message: string) => {
+    toast.success(message);
+    void invalidateBookingDetail(qc, data.id);
+  };
+
+  const staffAccept = useMutation({
+    mutationFn: () => api.bookings.staffAccept.call({ id: bookingId }),
+    onSuccess: (data) => onSuccess(data, "Booking accepted for approval"),
+    onError: () => toast.error("Failed to accept booking"),
+  });
+
+  const requestChanges = useMutation({
+    mutationFn: (note: string) =>
+      api.bookings.requestChanges.call({ id: bookingId, note }),
+    onSuccess: (data) => onSuccess(data, "Changes requested from customer"),
+    onError: () => toast.error("Failed to request changes"),
+  });
+
+  const staffReject = useMutation({
+    mutationFn: (reason: string) =>
+      api.bookings.staffReject.call({ id: bookingId, reason }),
+    onSuccess: (data) => onSuccess(data, "Booking rejected"),
+    onError: () => toast.error("Failed to reject booking"),
+  });
+
+  const approveStep = useMutation({
+    mutationFn: ({
+      stepId,
+      requiredRole,
+    }: {
+      stepId: string;
+      requiredRole: string;
+    }) =>
+      api.bookings.approveStep.call({
+        id: bookingId,
+        stepId,
+        requiredRole,
+      }),
+    onSuccess: (data) => onSuccess(data, "Approval step completed"),
+    onError: () => toast.error("Failed to approve step"),
+  });
+
+  const rejectStep = useMutation({
+    mutationFn: ({
+      stepId,
+      reason,
+    }: {
+      stepId: string;
+      reason: string;
+    }) =>
+      api.bookings.rejectStep.call({
+        id: bookingId,
+        stepId,
+        reason,
+      }),
+    onSuccess: (data) => onSuccess(data, "Booking rejected at approval step"),
+    onError: () => toast.error("Failed to reject step"),
+  });
+
+  const generateContract = useMutation({
+    mutationFn: () => api.bookings.generateContract.call({ id: bookingId }),
+    onSuccess: (data) => onSuccess(data, "Contract generated"),
+    onError: () => toast.error("Failed to generate contract"),
+  });
+
+  const signContract = useMutation({
+    mutationFn: (payload: {
+      role: "CUSTOMER" | "STAFF";
+      signatureImageBase64: string;
+      signerDisplayName: string;
+      consentText?: string;
+    }) => bookingsService.signContract(bookingId, payload),
+    onSuccess: (data) => onSuccess(data, "Contract signed"),
+    onError: () => toast.error("Failed to sign contract"),
+  });
+
+  const payBooking = useMutation({
+    mutationFn: () => api.bookings.payBooking.call({ id: bookingId }),
+    onSuccess: (data) => onSuccess(data, "Payment completed"),
+    onError: () => toast.error("Failed to complete payment"),
+  });
+
+  const startTransit = useMutation({
+    mutationFn: () => api.bookings.startTransit.call({ id: bookingId }),
+    onSuccess: (data) => onSuccess(data, "Marked in transit"),
+    onError: () => toast.error("Failed to start transit"),
+  });
+
+  const complete = useMutation({
+    mutationFn: () => api.bookings.complete.call({ id: bookingId }),
+    onSuccess: (data) => onSuccess(data, "Booking completed"),
+    onError: () => toast.error("Failed to complete booking"),
+  });
+
+  const cancel = useMutation({
+    mutationFn: (reason: string) =>
+      api.bookings.cancel.call({ id: bookingId, reason }),
+    onSuccess: (data) => onSuccess(data, "Booking cancelled"),
+    onError: () => toast.error("Failed to cancel booking"),
+  });
+
+  const isPending =
+    staffAccept.isPending ||
+    requestChanges.isPending ||
+    staffReject.isPending ||
+    approveStep.isPending ||
+    rejectStep.isPending ||
+    generateContract.isPending ||
+    signContract.isPending ||
+    payBooking.isPending ||
+    startTransit.isPending ||
+    complete.isPending ||
+    cancel.isPending;
+
+  return {
+    staffAccept,
+    requestChanges,
+    staffReject,
+    approveStep,
+    rejectStep,
+    generateContract,
+    signContract,
+    payBooking,
+    startTransit,
+    complete,
+    cancel,
+    isPending,
+    downloadContract: () => bookingsService.downloadContract(bookingId),
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/hooks/rule-engine/useRuleEngine.ts b/apps/edr-freight-web/backoffice/src/hooks/rule-engine/useRuleEngine.ts
index 6342d66fb..85dff0cc2 100644
--- a/apps/edr-freight-web/backoffice/src/hooks/rule-engine/useRuleEngine.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/rule-engine/useRuleEngine.ts
@@ -1,42 +1,38 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import toast from "react-hot-toast";
 
+import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
 import { api } from "@/services/api";
-import type { RuleEngineListParams } from "@/services/ruleEngine/ruleEngine.service";
+import { ruleEngineService, type RuleEngineListParams } from "@/services/ruleEngine/ruleEngine.service";
 import { RULE_ENGINE_SELECT_NONE } from "@/pages/ruleEngine/config/resources";
 import type {
-  ApproveRatePayload,
   RuleEngineRecord,
   RuleEngineResourceSlug,
 } from "@/types/rule-engine";
-import { QUERY_KEYS } from "@/constants/TANSTACK_QUEY_KEY";
+import {
+  invalidateRuleEngineList,
+  patchRuleEngineListRecord,
+} from "@/utils/queryInvalidation";
 
 const CARGO_TYPE_PARENT_PAGE_SIZE = 500;
 const CONTAINER_TYPE_OPTIONS_PAGE_SIZE = 500;
 
-const listKey = (resource: RuleEngineResourceSlug) =>
-  ["rule-engine", resource] as const;
-
 export const useRuleEngineList = (
   resource: RuleEngineResourceSlug,
   params: RuleEngineListParams,
 ) =>
-  useQuery(
-    api.ruleEngine.list.queryOptions({
-      input: { resource, params },
-    }),
-  );
+  useQuery({
+    queryKey: QUERY_KEYS.RULE_ENGINE.list(resource, params),
+    queryFn: () => ruleEngineService.list(resource, params),
+  });
 
 export const useCargoTypeParentOptions = (excludeId?: string, enabled = true) =>
   useQuery({
-    queryKey: api.ruleEngine.list.queryKey({
-      resource: "cargo-types",
-      params: { page: 1, pageSize: CARGO_TYPE_PARENT_PAGE_SIZE },
-    }),
+    queryKey: QUERY_KEYS.RULE_ENGINE.selectOptions("cargo-types"),
     queryFn: () =>
-      api.ruleEngine.list.call({
-        resource: "cargo-types",
-        params: { page: 1, pageSize: CARGO_TYPE_PARENT_PAGE_SIZE },
+      ruleEngineService.list<RuleEngineRecord>("cargo-types", {
+        page: 1,
+        pageSize: CARGO_TYPE_PARENT_PAGE_SIZE,
       }),
     enabled,
     select: (result) => {
@@ -54,12 +50,37 @@ export const useCargoTypeParentOptions = (excludeId?: string, enabled = true) =>
     },
   });
 
-export const useContainerTypeOptions = (enabled = true) =>
+export function buildContainerTypeSelectOptions(
+  rows: RuleEngineRecord[],
+  includeNone: boolean,
+): { label: string; value: string }[] {
+  const options = rows
+    .filter((row) => row.id)
+    .map((row) => {
+      const label = String(row.label ?? "").trim();
+      const code = String(row.code ?? "").trim();
+      const size = row.sizeFt ? `${String(row.sizeFt)}ft` : "";
+      const parts = [label || code || String(row.id), size].filter(Boolean);
+      return {
+        label: parts.join(" - "),
+        value: String(row.id),
+      };
+    });
+
+  if (!includeNone) return options;
+  return [{ label: "None", value: RULE_ENGINE_SELECT_NONE }, ...options];
+}
+
+export const useContainerTypeOptions = (
+  includeNone = true,
+  enabled = true,
+) =>
   useQuery({
-    queryKey: [
-      ...QUERY_KEYS.RULE_ENGINE.list("container-types"),
-      "select-options",
-    ],
+    queryKey: QUERY_KEYS.RULE_ENGINE.selectOptions('container-types', {
+      page: 1,
+      pageSize: CONTAINER_TYPE_OPTIONS_PAGE_SIZE,
+      includeNone,
+    }),
     queryFn: () =>
       api.ruleEngine.list.call({
         resource: "container-types",
@@ -69,42 +90,55 @@ export const useContainerTypeOptions = (enabled = true) =>
         },
       }),
     enabled,
-    select: (result) => {
-      const noneOption = { label: "None", value: RULE_ENGINE_SELECT_NONE };
-      const options = (result.data ?? []).map((row) => {
-        const label = String(row.label ?? "").trim();
-        const code = String(row.code ?? "").trim();
-        const size = row.sizeFt ? `${String(row.sizeFt)}ft` : "";
-        const parts = [label || code || String(row.id), size].filter(Boolean);
+    select: (result) =>
+      buildContainerTypeSelectOptions(result.data ?? [], includeNone),
+  });
 
-        return {
-          label: parts.join(" - "),
-          value: String(row.id),
-        };
-      });
+const LIVE_RATE_PAGE_SIZE = 500;
 
-      return [noneOption, ...options];
-    },
+export const useLiveRateOptions = (enabled = true) =>
+  useQuery({
+    queryKey: QUERY_KEYS.RULE_ENGINE.selectOptions("rates", { status: "LIVE" }),
+    queryFn: () =>
+      ruleEngineService.list<RuleEngineRecord>("rates", {
+        page: 1,
+        pageSize: LIVE_RATE_PAGE_SIZE,
+        status: "LIVE",
+      }),
+    enabled,
+    select: (result) =>
+      (result.data ?? [])
+        .filter((row) => row.id)
+        .map((row) => {
+          const rateType = String(row.rateType ?? "").replace(/_/g, " ");
+          const currency = String(row.currency ?? "");
+          const value = row.rateValue != null ? String(row.rateValue) : "";
+          const unit = row.rateUnit ? String(row.rateUnit).replace(/_/g, " ") : "";
+          const parts = [rateType, currency, value, unit].filter(Boolean);
+          return {
+            label: parts.join(" · "),
+            value: String(row.id),
+          };
+        }),
   });
 
 export const useApprovalChain = (enabled: boolean) =>
-  useQuery(
-    api.ruleEngine.getApprovalChain.queryOptions({
-      enabled,
-    }),
-  );
+  useQuery({
+    queryKey: QUERY_KEYS.RULE_ENGINE.chain,
+    queryFn: () => ruleEngineService.getApprovalChain(),
+    enabled,
+  });
 
 export const useRuleEngineMutations = (resource: RuleEngineResourceSlug) => {
   const qc = useQueryClient();
-  const invalidate = () =>
-    qc.invalidateQueries({ queryKey: listKey(resource) });
 
   const create = useMutation({
     mutationFn: (payload: Record<string, unknown>) =>
       api.ruleEngine.create.call({ resource, payload }),
-    onSuccess: () => {
+    onSuccess: async (created) => {
       toast.success("Created successfully");
-      invalidate();
+      patchRuleEngineListRecord(qc, resource, created);
+      await invalidateRuleEngineList(qc, resource);
     },
     onError: () => toast.error("Failed to create record"),
   });
@@ -117,18 +151,20 @@ export const useRuleEngineMutations = (resource: RuleEngineResourceSlug) => {
       id: string;
       payload: Record<string, unknown>;
     }) => api.ruleEngine.update.call({ resource, id, payload }),
-    onSuccess: () => {
+    onSuccess: async (updated) => {
       toast.success("Updated successfully");
-      invalidate();
+      patchRuleEngineListRecord(qc, resource, updated);
+      await invalidateRuleEngineList(qc, resource);
     },
     onError: () => toast.error("Failed to update record"),
   });
 
   const remove = useMutation({
-    mutationFn: (id: string) => api.ruleEngine.remove.call({ resource, id }),
-    onSuccess: () => {
+    mutationFn: (id: string) =>
+      api.ruleEngine.remove.call({ resource, id }),
+    onSuccess: async () => {
       toast.success("Deleted successfully");
-      invalidate();
+      await invalidateRuleEngineList(qc, resource);
     },
     onError: () => toast.error("Failed to delete record"),
   });
@@ -138,28 +174,23 @@ export const useRuleEngineMutations = (resource: RuleEngineResourceSlug) => {
 
 export const useRateWorkflow = () => {
   const qc = useQueryClient();
-  const invalidate = () => qc.invalidateQueries({ queryKey: listKey("rates") });
 
   const submit = useMutation({
     mutationFn: (id: string) => api.ruleEngine.submitRate.call({ id }),
-    onSuccess: () => {
+    onSuccess: async (updated) => {
       toast.success("Rate submitted for approval");
-      invalidate();
+      patchRuleEngineListRecord(qc, "rates", updated);
+      await invalidateRuleEngineList(qc, "rates");
     },
     onError: () => toast.error("Failed to submit rate"),
   });
 
   const approve = useMutation({
-    mutationFn: ({
-      id,
-      payload,
-    }: {
-      id: string;
-      payload: ApproveRatePayload;
-    }) => api.ruleEngine.approveRate.call({ id, payload }),
-    onSuccess: () => {
+    mutationFn: (id: string) => api.ruleEngine.approveRate.call({ id }),
+    onSuccess: async (updated) => {
       toast.success("Rate approved");
-      invalidate();
+      patchRuleEngineListRecord(qc, "rates", updated);
+      await invalidateRuleEngineList(qc, "rates");
     },
     onError: () => toast.error("Failed to approve rate"),
   });
diff --git a/apps/edr-freight-web/backoffice/src/hooks/use-toast.ts b/apps/edr-freight-web/backoffice/src/hooks/use-toast.ts
new file mode 100644
index 000000000..7b15a028d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/hooks/use-toast.ts
@@ -0,0 +1,24 @@
+import toast from 'react-hot-toast';
+
+interface ToastOptions {
+  title?: string;
+  description?: string;
+  variant?: 'default' | 'destructive';
+  duration?: number;
+}
+
+export function useToast() {
+  const showToast = (options: ToastOptions) => {
+    const { title, description, variant = 'default', duration = 3000 } = options;
+
+    const message = title ? `${title}${description ? ': ' + description : ''}` : description || '';
+
+    if (variant === 'destructive') {
+      toast.error(message, { duration });
+    } else {
+      toast.success(message, { duration });
+    }
+  };
+
+  return { toast: showToast };
+}
diff --git a/apps/edr-freight-web/backoffice/src/hooks/useBookings.ts b/apps/edr-freight-web/backoffice/src/hooks/useBookings.ts
index 5ee2e5749..81e7bbc83 100644
--- a/apps/edr-freight-web/backoffice/src/hooks/useBookings.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/useBookings.ts
@@ -1,48 +1,5 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-
-import { api } from "@/services/api";
-import type { BookingListFilter } from "@/services/bookings.service";
-
-export const useBookingList = (filter?: BookingListFilter) => {
-  const input = { filter };
-  return {
-    queryKey: api.bookings.list.queryKey(input),
-    queryFn: () => api.bookings.list.call(input),
-  };
-};
-
-export const useBooking = (id: string) => ({
-  queryKey: api.bookings.getById.queryKey({ id }),
-  queryFn: () => api.bookings.getById.call({ id }),
-  enabled: Boolean(id),
-});
-
-export const useUpdateBookingStatus = () => {
-  const qc = useQueryClient();
-  return useMutation({
-    mutationFn: ({
-      id,
-      action,
-      reason,
-    }: {
-      id: string;
-      action: string;
-      reason?: string;
-    }) => api.bookings.updateStatus.call({ id, action, reason }),
-    onSuccess: (_data, { id }) => {
-      qc.invalidateQueries({ queryKey: api.bookings.list.queryKey() });
-      qc.invalidateQueries({
-        queryKey: api.bookings.getById.queryKey({ id }),
-      });
-    },
-  });
-};
-
-export const useDeleteBooking = () => {
-  const qc = useQueryClient();
-  return useMutation({
-    mutationFn: (id: string) => api.bookings.remove.call({ id }),
-    onSuccess: () =>
-      qc.invalidateQueries({ queryKey: api.bookings.list.queryKey() }),
-  });
-};
+export {
+  useBookingList,
+  useBookingDetail,
+  useBookingMutations,
+} from "./bookings/useBookings";
diff --git a/apps/edr-freight-web/backoffice/src/hooks/useCargoes.ts b/apps/edr-freight-web/backoffice/src/hooks/useCargoes.ts
new file mode 100644
index 000000000..4873e1dba
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/hooks/useCargoes.ts
@@ -0,0 +1,39 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { cargoService } from '@/services/cargoService';
+
+export const cargoKeys = {
+  all: ['cargoes'] as const,
+  byContainer: (containerId: string) => [...cargoKeys.all, 'container', containerId] as const,
+};
+
+export function useCargoes() {
+  return useQuery({ queryKey: cargoKeys.all, queryFn: () => cargoService.getAll().then(res => res.data) });
+}
+
+export function useCargoesByContainer(containerId: string) {
+  return useQuery({ queryKey: cargoKeys.byContainer(containerId), queryFn: () => cargoService.getByContainer(containerId).then(res => res.data), enabled: !!containerId });
+}
+
+export function useLoadCargo() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, quantity, weight, volume }: any) => cargoService.load(id, quantity, weight, volume),
+    onSuccess: (_, { id }) => qc.invalidateQueries({ queryKey: cargoKeys.all })
+  });
+}
+
+export function useDeliverCargo() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => cargoService.deliver(id),
+    onSuccess: () => qc.invalidateQueries({ queryKey: cargoKeys.all })
+  });
+}
+
+export function useUnloadCargo() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => cargoService.unload(id),
+    onSuccess: () => qc.invalidateQueries({ queryKey: cargoKeys.all })
+  });
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/hooks/useContainers.ts b/apps/edr-freight-web/backoffice/src/hooks/useContainers.ts
new file mode 100644
index 000000000..6eac8fdcf
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/hooks/useContainers.ts
@@ -0,0 +1,31 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { containerService } from '@/services/containerService';
+
+export const containerKeys = {
+  all: ['containers'] as const,
+  byWagon: (wagonId: string) => [...containerKeys.all, 'wagon', wagonId] as const,
+};
+
+export function useContainers() {
+  return useQuery({ queryKey: containerKeys.all, queryFn: () => containerService.getAll().then(res => res.data) });
+}
+
+export function useContainersByWagon(wagonId: string) {
+  return useQuery({ queryKey: containerKeys.byWagon(wagonId), queryFn: () => containerService.getByWagon(wagonId).then(res => res.data), enabled: !!wagonId });
+}
+
+export function useAssignContainerToWagon() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ containerId, wagonId, position }: any) => containerService.assignToWagon(containerId, wagonId, position),
+    onSuccess: (_, { wagonId }) => qc.invalidateQueries({ queryKey: containerKeys.byWagon(wagonId) })
+  });
+}
+
+export function useUnassignContainer() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: containerService.unassign,
+    onSuccess: () => qc.invalidateQueries({ queryKey: containerKeys.all })
+  });
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/hooks/useTrains.ts b/apps/edr-freight-web/backoffice/src/hooks/useTrains.ts
new file mode 100644
index 000000000..c763e279d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/hooks/useTrains.ts
@@ -0,0 +1,35 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { trainService } from '@/services/trains.service';
+
+export const trainKeys = {
+  all: ['trains'] as const,
+  lists: () => [...trainKeys.all, 'list'] as const,
+  details: () => [...trainKeys.all, 'detail'] as const,
+  detail: (id: string) => [...trainKeys.details(), id] as const,
+};
+
+export function useTrains() {
+  return useQuery({ queryKey: trainKeys.lists(), queryFn: () => trainService.getAll().then(res => res.data) });
+}
+
+export function useTrain(id: string) {
+  return useQuery({ queryKey: trainKeys.detail(id), queryFn: () => trainService.getById(id).then(res => res.data), enabled: !!id });
+}
+
+export function useCreateTrain() {
+  const qc = useQueryClient();
+  return useMutation({ mutationFn: trainService.create, onSuccess: () => qc.invalidateQueries({ queryKey: trainKeys.lists() }) });
+}
+
+export function useUpdateTrain() {
+  const qc = useQueryClient();
+  return useMutation({ mutationFn: ({ id, data }: any) => trainService.update(id, data), onSuccess: (_, { id }) => {
+    qc.invalidateQueries({ queryKey: trainKeys.lists() });
+    qc.invalidateQueries({ queryKey: trainKeys.detail(id) });
+  } });
+}
+
+export function useDeleteTrain() {
+  const qc = useQueryClient();
+  return useMutation({ mutationFn: trainService.delete, onSuccess: () => qc.invalidateQueries({ queryKey: trainKeys.lists() }) });
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/hooks/useWagons.ts b/apps/edr-freight-web/backoffice/src/hooks/useWagons.ts
new file mode 100644
index 000000000..0e2bd5e25
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/hooks/useWagons.ts
@@ -0,0 +1,41 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { wagonService } from '@/services/wagon.service';
+
+export const wagonKeys = {
+  all: ['wagons'] as const,
+  byTrain: (trainId: string) => [...wagonKeys.all, 'train', trainId] as const,
+  details: () => [...wagonKeys.all, 'detail'] as const,
+};
+
+export function useWagons() {
+  return useQuery({ queryKey: wagonKeys.all, queryFn: () => wagonService.getAll().then(res => res.data) });
+}
+
+export function useWagonsByTrain(trainId: string) {
+  return useQuery({ queryKey: wagonKeys.byTrain(trainId), queryFn: () => wagonService.getByTrain(trainId).then(res => res.data), enabled: !!trainId });
+}
+
+export function useAssignWagonToTrain() {
+  const qc = useQueryClient();
+  return useMutation({ mutationFn: ({ wagonId, trainId, sequenceNumber }: any) => wagonService.assignToTrain(wagonId, trainId, sequenceNumber), onSuccess: (_, { trainId }) => qc.invalidateQueries({ queryKey: wagonKeys.byTrain(trainId) }) });
+}
+
+export function useUnassignWagon() {
+  const qc = useQueryClient();
+  return useMutation({ mutationFn: wagonService.unassign, onSuccess: () => qc.invalidateQueries({ queryKey: wagonKeys.all }) });
+}
+
+export function useReorderWagons() {
+  const qc = useQueryClient();
+  return useMutation({ mutationFn: ({ trainId, wagonIds }: any) => wagonService.reorder(trainId, wagonIds), onSuccess: (_, { trainId }) => qc.invalidateQueries({ queryKey: wagonKeys.byTrain(trainId) }) });
+}
+
+export function useCreateWagon() {
+  const qc = useQueryClient();
+  return useMutation({ mutationFn: wagonService.create, onSuccess: () => qc.invalidateQueries({ queryKey: wagonKeys.all }) });
+}
+
+export function useUpdateWagon() {
+  const qc = useQueryClient();
+  return useMutation({ mutationFn: ({ id, data }: any) => wagonService.update(id, data), onSuccess: () => qc.invalidateQueries({ queryKey: wagonKeys.all }) });
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/lib/permissions.ts b/apps/edr-freight-web/backoffice/src/lib/permissions.ts
new file mode 100644
index 000000000..cadaaea03
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/lib/permissions.ts
@@ -0,0 +1,95 @@
+import type { AuthUser } from "@/auth/types";
+import type { RuleEngineResourceSlug } from "@/types/rule-engine";
+
+export const FREIGHT_PERMS = {
+  bookings: {
+    view: "edr_freight_app:bookings:view",
+    staffAccept: "edr_freight_app:bookings:staff_accept",
+    requestChanges: "edr_freight_app:bookings:request_changes",
+    reject: "edr_freight_app:bookings:reject",
+    approveLineStaff: "edr_freight_app:bookings:approve_line_staff",
+    approveDirector: "edr_freight_app:bookings:approve_director",
+    approveCeo: "edr_freight_app:bookings:approve_ceo",
+    rejectApproval: "edr_freight_app:bookings:reject_approval",
+    generateContract: "edr_freight_app:bookings:generate_contract",
+    signStaff: "edr_freight_app:bookings:sign_staff",
+    operations: "edr_freight_app:bookings:operations",
+    cancel: "edr_freight_app:bookings:cancel",
+  },
+} as const;
+
+const slugToResourceKey = (slug: RuleEngineResourceSlug): string =>
+  slug.replace(/-/g, "_");
+
+export function getPermissionKeys(user: AuthUser | null | undefined): string[] {
+  if (!user) return [];
+  if (user.permissionKeys?.length) return user.permissionKeys;
+
+  const keys = new Set<string>();
+  for (const p of user.permissions ?? []) {
+    if (p.key) keys.add(p.key);
+  }
+  for (const emp of user.employee ?? []) {
+    for (const pos of emp.positions ?? []) {
+      for (const p of pos.permissions ?? []) {
+        if (p.key) keys.add(p.key);
+      }
+    }
+  }
+  return [...keys];
+}
+
+export function isSuperAdmin(user: AuthUser | null | undefined): boolean {
+  if (user?.isSuperAdmin) return true;
+  return Boolean(user?.roles?.some((r) => r.key === "super_admin"));
+}
+
+/** Org-level admins may act on any approval step in the chain. */
+export function isOrganizationAdmin(
+  user: AuthUser | null | undefined,
+): boolean {
+  return Boolean(user?.roles?.some((r) => r.key === "organization_admin"));
+}
+
+export function isFreightApprovalAdmin(
+  user: AuthUser | null | undefined,
+): boolean {
+  return isSuperAdmin(user) || isOrganizationAdmin(user);
+}
+
+export function hasPermission(
+  user: AuthUser | null | undefined,
+  key: string,
+): boolean {
+  if (!user) return false;
+  if (isSuperAdmin(user)) return true;
+  return getPermissionKeys(user).includes(key);
+}
+
+export function canAccessBookings(user: AuthUser | null | undefined): boolean {
+  return hasPermission(user, FREIGHT_PERMS.bookings.view);
+}
+
+export function ruleEngineViewKey(slug: RuleEngineResourceSlug): string {
+  return `edr_freight_app:rule_engine:${slugToResourceKey(slug)}:view`;
+}
+
+export function ruleEngineManageKey(slug: RuleEngineResourceSlug): string {
+  return `edr_freight_app:rule_engine:${slugToResourceKey(slug)}:manage`;
+}
+
+export function canAccessRuleEngineResource(
+  user: AuthUser | null | undefined,
+  slug: RuleEngineResourceSlug,
+  mode: "view" | "manage",
+): boolean {
+  const key = mode === "manage" ? ruleEngineManageKey(slug) : ruleEngineViewKey(slug);
+  return hasPermission(user, key);
+}
+
+export function canAccessAnyRuleEngineView(
+  user: AuthUser | null | undefined,
+  slugs: RuleEngineResourceSlug[],
+): boolean {
+  return slugs.some((slug) => canAccessRuleEngineResource(user, slug, "view"));
+}
diff --git a/apps/edr-freight-web/backoffice/src/lib/queryClient.ts b/apps/edr-freight-web/backoffice/src/lib/queryClient.ts
new file mode 100644
index 000000000..9ac8402d8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/lib/queryClient.ts
@@ -0,0 +1,12 @@
+import { QueryClient } from "@tanstack/react-query";
+
+/** Single app-wide React Query client (do not nest additional providers). */
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+      staleTime: 30_000,
+    },
+  },
+});
diff --git a/apps/edr-freight-web/backoffice/src/main.tsx b/apps/edr-freight-web/backoffice/src/main.tsx
index f2418ba0b..7ab0fcbf8 100644
--- a/apps/edr-freight-web/backoffice/src/main.tsx
+++ b/apps/edr-freight-web/backoffice/src/main.tsx
@@ -9,7 +9,8 @@ import { Toaster } from "react-hot-toast";
 
 import App from "./App";
 import { AuthProvider } from "./auth/AuthProvider";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { queryClient } from "./lib/queryClient";
 
 const THEME_STORAGE_KEY = "edr-theme";
 
@@ -38,8 +39,6 @@ if (!rootElement) {
   throw new Error("Root element not found");
 }
 
-const queryClient = new QueryClient();
-
 createRoot(rootElement).render(
   <QueryClientProvider client={queryClient}>
 
diff --git a/apps/edr-freight-web/backoffice/src/pages/admin/rateMatrix/RateMatrixApproval.tsx b/apps/edr-freight-web/backoffice/src/pages/admin/rateMatrix/RateMatrixApproval.tsx
new file mode 100644
index 000000000..723821936
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/admin/rateMatrix/RateMatrixApproval.tsx
@@ -0,0 +1,117 @@
+// pages/admin/rateMatrix/RateMatrixApproval.tsx
+import React from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { LoadingScreen } from '@/ui/LoadingScreen';
+import { useRateMatrixAuth } from '@/auth/hooks/useAuth';
+import { queryKeys } from '../../../constants/QUERY_KEYS';
+import { API_URLS } from '@/constants/URL_CONSTANTS';
+//import { MATRIX_STATUS } from '@/constants/rateMatrixConstants';
+import { toast } from 'sonner';
+import { Navigate } from 'react-router-dom';
+
+export default function RateMatrixApprovalPage() {
+  const { isChiefExecutive } = useRateMatrixAuth();
+  const queryClient = useQueryClient();
+  const pendingMatricesQueryKey = [...queryKeys.rateMatrix.all, 'pending-approval'];
+
+  const { data: pendingMatrices, isLoading } = useQuery({
+    queryKey: pendingMatricesQueryKey,
+    queryFn: async () => {
+      const response = await fetch(`${API_URLS.RATE_MATRIX.LIST}?status=pending_approval`);
+      return response.json();
+    },
+  });
+
+  const authorizeMutation = useMutation({
+    mutationFn: async ({ matrixId, signature }: { matrixId: string; signature: string }) => {
+      const response = await fetch(API_URLS.RATE_MATRIX.AUTHORIZE(matrixId), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ digitalSignature: signature }),
+      });
+      if (!response.ok) throw new Error('Authorization failed');
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: pendingMatricesQueryKey });
+      toast.success('Rate matrix authorized successfully!');
+    },
+    onError: () => {
+      toast.error('Failed to authorize rate matrix');
+    },
+  });
+
+  if (!isChiefExecutive) {
+    return <Navigate to="/unauthorized" replace />;
+  }
+
+  if (isLoading) return <LoadingScreen />;
+
+  return (
+    <div className="container mx-auto py-8">
+      <h1 className="text-3xl font-bold mb-8">Pending Rate Matrix Approvals</h1>
+      
+      <div className="space-y-6">
+        {pendingMatrices?.map((matrix: any) => (
+          <Card key={matrix.id}>
+            <CardHeader>
+              <CardTitle className="flex items-center justify-between">
+                <span>{matrix.matrixName}</span>
+                <Badge variant="secondary">{matrix.status}</Badge>
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <p className="text-sm font-semibold">Effective Date</p>
+                    <p>{matrix.effectiveDate}</p>
+                  </div>
+                  <div>
+                    <p className="text-sm font-semibold">Submitted By</p>
+                    <p>{matrix.createdBy}</p>
+                  </div>
+                </div>
+                
+                <div>
+                  <p className="text-sm font-semibold mb-2">Rate Types Included:</p>
+                  <div className="flex flex-wrap gap-2">
+                    {matrix.rateEntries?.map((entry: any) => (
+                      <Badge key={entry.id} variant="outline">
+                        {entry.rateType}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="flex gap-4">
+                  <Button
+                    onClick={() => {
+                      // Implement digital signature collection
+                      const signature = prompt('Enter digital signature:');
+                      if (signature) {
+                        authorizeMutation.mutate({ 
+                          matrixId: matrix.id, 
+                          signature 
+                        });
+                      }
+                    }}
+                    disabled={authorizeMutation.isPending}
+                  >
+                    Authorize & Release
+                  </Button>
+                  <Button variant="outline">
+                    Request Changes
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/pages/admin/rateMatrix/RateMatrixRegistration.tsx b/apps/edr-freight-web/backoffice/src/pages/admin/rateMatrix/RateMatrixRegistration.tsx
new file mode 100644
index 000000000..6f151f992
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/admin/rateMatrix/RateMatrixRegistration.tsx
@@ -0,0 +1,25 @@
+// pages/admin/rateMatrix/RateMatrixRegistration.tsx
+import React from 'react';
+import { RateMatrixForm } from '@/components/baselineRatematrix/RateMatrixForm';
+import { useRateMatrixAuth } from '@/auth/useAuth';
+import { Navigate } from 'react-router-dom';
+// Local lightweight fallback for LoadingScreen to avoid import errors
+const LoadingScreen: React.FC<{ message?: string }> = ({ message = 'Loading...' }) => (
+  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+    <div>{message}</div>
+  </div>
+);
+
+export default function RateMatrixRegistrationPage() {
+  const { isDirector, isLoading } = useRateMatrixAuth();
+
+  if (isLoading) {
+    return <LoadingScreen message="Checking permissions..." />;
+  }
+
+  if (!isDirector) {
+    return <Navigate to="/unauthorized" replace />;
+  }
+
+  return <RateMatrixForm />;
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingContractPage.tsx b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingContractPage.tsx
new file mode 100644
index 000000000..7c22f9d45
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingContractPage.tsx
@@ -0,0 +1,225 @@
+import { useCallback, useRef, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  ArrowLeft,
+  Download,
+  FileSignature,
+  Loader2,
+  Printer,
+} from "lucide-react";
+import toast from "react-hot-toast";
+
+import Breadcrumbs from "@/components/ui/Breadcrumbs";
+import { ContractSignaturePad } from "@/components/bookings/ContractSignaturePad";
+import { bookingSurface } from "@/components/bookings/booking-ui.styles";
+import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
+import { invalidateBookingDetail } from "@/utils/queryInvalidation";
+import {
+  bookingsService,
+  type SignContractPayload,
+} from "@/services/bookings.service";
+import { cn } from "@/lib/utils";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+} from "@edr/ui-common";
+
+export default function BookingContractPage() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const qc = useQueryClient();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [signOpen, setSignOpen] = useState(false);
+  const [signerName, setSignerName] = useState("");
+  const [signatureData, setSignatureData] = useState<string | null>(null);
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: [...QUERY_KEYS.BOOKINGS.byId(id ?? ""), "contract-view"],
+    queryFn: () => bookingsService.getContractView(id!),
+    enabled: Boolean(id),
+  });
+
+  const signRole: "CUSTOMER" | "STAFF" | null = data?.canSignCustomer
+    ? "CUSTOMER"
+    : data?.canSignStaff
+      ? "STAFF"
+      : null;
+
+  const signMutation = useMutation({
+    mutationFn: (payload: SignContractPayload) =>
+      bookingsService.signContract(id!, payload),
+    onSuccess: async () => {
+      toast.success("Signature recorded");
+      setSignOpen(false);
+      await invalidateBookingDetail(qc, id!);
+      qc.invalidateQueries({
+        queryKey: [...QUERY_KEYS.BOOKINGS.byId(id ?? ""), "contract-view"],
+      });
+    },
+    onError: () => toast.error("Failed to sign contract"),
+  });
+
+  const downloadPdf = useCallback(async () => {
+    if (!id) return;
+    try {
+      const blob = await bookingsService.downloadContractDocument(id);
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `contract-${data?.reference ?? id}.pdf`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch {
+      toast.error("Contract PDF not available. Ask staff to generate it first.");
+    }
+  }, [id, data?.reference]);
+
+  const handlePrint = () => {
+    iframeRef.current?.contentWindow?.focus();
+    iframeRef.current?.contentWindow?.print();
+  };
+
+  const openSign = () => {
+    setSignerName("");
+    setSignatureData(null);
+    setSignOpen(true);
+  };
+
+  const confirmSign = () => {
+    if (!signRole || !signatureData || !signerName.trim()) return;
+    signMutation.mutate({
+      role: signRole,
+      signatureImageBase64: signatureData,
+      signerDisplayName: signerName.trim(),
+      consentText: "I agree to the terms of this contract.",
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-[40vh] items-center justify-center">
+        <Loader2 className="size-8 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  if (isError || !data) {
+    return (
+      <div className={bookingSurface.pageInner}>
+        <p className="text-muted-foreground">Could not load contract.</p>
+        <Button variant="outline" className="mt-4" onClick={() => navigate(-1)}>
+          Go back
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={bookingSurface.page}>
+      <div className={cn(bookingSurface.pageInner, "print:p-0")}>
+        <div className="print:hidden">
+          <Breadcrumbs
+            items={[
+              { label: "Booking requests", href: "/dashboard/booking-requests" },
+              {
+                label: data.reference,
+                href: `/dashboard/booking-requests/${id}`,
+              },
+              { label: "Contract" },
+            ]}
+          />
+        </div>
+
+        <div style={{boxShadow:"3px 3px 20px 1px lightgrey"}} className="sticky top-0 z-10 mb-6 flex flex-wrap items-center justify-between gap-3 rounded-xl border bg-background/95 p-4 shadow-sm backdrop-blur print:hidden">
+          <Button variant="ghost" size="sm" className="gap-2" onClick={() => navigate(-1)}>
+            <ArrowLeft className="size-4" />
+            Back
+          </Button>
+          <div className="flex flex-wrap gap-2">
+            <Button variant="outline" size="sm" className="gap-2" onClick={handlePrint}>
+              <Printer className="size-4" />
+              Print
+            </Button>
+            <Button variant="outline" size="sm" className="gap-2" onClick={downloadPdf}>
+              <Download className="size-4" />
+              Download PDF
+            </Button>
+            {signRole && (
+              <Button size="sm" className="gap-2" onClick={openSign}>
+                <FileSignature className="size-4" />
+                Sign as {signRole === "CUSTOMER" ? "Customer" : "Staff"}
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {!data.hasContractDocument && (
+          <div className="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 print:hidden">
+            A PDF has not been stored yet. Download will generate the latest
+            contract document automatically.
+          </div>
+        )}
+
+        <iframe
+          ref={iframeRef}
+          title={`Contract ${data.reference}`}
+          srcDoc={data.html}
+          sandbox="allow-same-origin"
+          className="mx-auto block min-h-[297mm] w-full max-w-[210mm] rounded-xl border bg-white shadow-sm print:h-[297mm] print:border-0 print:shadow-none"
+        />
+
+        <Dialog open={signOpen} onOpenChange={setSignOpen}>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+              <DialogTitle>
+                {signRole === "CUSTOMER" ? "Customer signature" : "Staff signature"}
+              </DialogTitle>
+              <DialogDescription>
+                Sign to execute the contract for {data.reference}.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="signerName">Full name</Label>
+                <Input
+                  id="signerName"
+                  value={signerName}
+                  onChange={(e) => setSignerName(e.target.value)}
+                  placeholder="As shown on the contract"
+                />
+              </div>
+              <ContractSignaturePad onChange={setSignatureData} />
+            </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setSignOpen(false)}>
+                Cancel
+              </Button>
+              <Button
+                disabled={
+                  signMutation.isPending ||
+                  !signatureData ||
+                  !signerName.trim()
+                }
+                onClick={confirmSign}
+              >
+                {signMutation.isPending ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  "Confirm signature"
+                )}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx
index 3bb75b6bf..a57edc5ea 100644
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx
@@ -1,642 +1,264 @@
 import { useNavigate, useParams } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
 import {
-  AlertCircle,
-  AlertTriangle,
   Anchor,
   ArrowLeft,
   ArrowRight,
+  Building2,
   Calendar,
-  Check,
-  CheckCircle2,
   Clock,
-  FileSignature,
-  FileText,
-  History,
-  Info,
+  Loader2,
   MapPin,
   Package,
-  ShieldCheck,
-  Ship,
-  StickyNote,
+  FileSignature,
+  RefreshCw,
   Train,
   Truck,
-  Weight,
-  X,
 } from "lucide-react";
 
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
+import { ApprovalStepsCard } from "@/components/bookings/ApprovalStepsCard";
+import { NextStepBanner } from "@/components/bookings/NextStepBanner";
+import { BookingActionsToolbar } from "@/components/bookings/BookingActionsToolbar";
+import { BookingPricingSummary } from "@/components/bookings/BookingPricingSummary";
+import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
+import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
+import { BookingWorkflowStepper } from "@/components/bookings/BookingWorkflowStepper";
+import {
+  bookingGlass,
+  bookingSurface,
+} from "@/components/bookings/booking-ui.styles";
+import { getStatusMeta } from "@/features/bookings/booking-status.config";
+import { toBookingListRow } from "@/features/bookings/mapBookingListRow";
+import {
+  useBookingDetail,
+  useBookingMutations,
+} from "@/hooks/bookings/useBookings";
+import type { BookingDetail } from "@/types/booking";
 import { cn } from "@/lib/utils";
-import { api } from "@/services/api";
-import { useUpdateBookingStatus } from "@/hooks/useBookings";
-import { mapBookingToRequest, BOOKING_STATUSES } from "./booking-requests.mock";
 import {
   Badge,
   Button,
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
   Separator,
 } from "@edr/ui-common";
 
-const STATUS_STYLES: Record<string, { label: string; color: string }> = {
-  DRAFT: {
-    label: "Draft",
-    color: "bg-slate-100 text-slate-700 border-slate-300",
-  },
-  RFQ_SUBMITTED: {
-    label: "RFQ Submitted",
-    color: "bg-amber-50 text-amber-700 border-amber-200",
-  },
-  QUOTATION_SENT: {
-    label: "Quotation Sent",
-    color: "bg-sky-50 text-sky-700 border-sky-200",
-  },
-  QUOTATION_APPROVED: {
-    label: "Quotation Approved",
-    color: "bg-emerald-50 text-emerald-700 border-emerald-200",
-  },
-  QUOTATION_REJECTED: {
-    label: "Quotation Rejected",
-    color: "bg-red-50 text-red-700 border-red-200",
-  },
-  PENDING_APPROVAL: {
-    label: "Pending Approval",
-    color: "bg-amber-50 text-amber-700 border-amber-200",
-  },
-  APPROVED: {
-    label: "Approved",
-    color: "bg-emerald-50 text-emerald-700 border-emerald-200",
-  },
-  SIGNED_CUSTOMER: {
-    label: "Customer Signed",
-    color: "bg-sky-50 text-sky-700 border-sky-200",
-  },
-  FULLY_EXECUTED: {
-    label: "Fully Executed",
-    color: "bg-indigo-50 text-indigo-700 border-indigo-200",
-  },
-  PAID: {
-    label: "Paid",
-    color: "bg-emerald-50 text-emerald-700 border-emerald-200",
-  },
-  IN_TRANSIT: {
-    label: "In Transit",
-    color: "bg-sky-50 text-sky-700 border-sky-200",
-  },
-  COMPLETED: {
-    label: "Completed",
-    color: "bg-indigo-50 text-indigo-700 border-indigo-200",
-  },
-  CANCELLED: {
-    label: "Cancelled",
-    color: "bg-red-50 text-red-700 border-red-200",
-  },
-  PENDING_CONSOLIDATION: {
-    label: "Pending Consolidation",
-    color: "bg-amber-50 text-amber-700 border-amber-200",
-  },
-  CONSOLIDATED: {
-    label: "Consolidated",
-    color: "bg-indigo-50 text-indigo-700 border-indigo-200",
-  },
-};
-
-const PROGRESS_STAGES = [
-  { label: "Request", icon: FileText, statuses: ["DRAFT", "RFQ_SUBMITTED"] },
-  {
-    label: "Quotation",
-    icon: ShieldCheck,
-    statuses: ["QUOTATION_SENT", "QUOTATION_APPROVED", "QUOTATION_REJECTED"],
-  },
-  {
-    label: "Approval",
-    icon: FileSignature,
-    statuses: ["PENDING_APPROVAL", "APPROVED"],
-  },
-  {
-    label: "Execution",
-    icon: CheckCircle2,
-    statuses: ["SIGNED_CUSTOMER", "FULLY_EXECUTED", "PAID"],
-  },
-  {
-    label: "In Transit",
-    icon: Train,
-    statuses: ["IN_TRANSIT", "PENDING_CONSOLIDATION", "CONSOLIDATED"],
-  },
-  { label: "Complete", icon: Check, statuses: ["COMPLETED"] },
-];
-
-const STATUS_CONFIG: Record<
-  string,
-  { title: string; description: string; color: string; stage: number }
-> = {
-  DRAFT: {
-    title: "Draft",
-    description: "Booking is being prepared.",
-    color: "text-slate-500",
-    stage: 0,
-  },
-  RFQ_SUBMITTED: {
-    title: "RFQ Submitted",
-    description: "Customer has submitted a request for quotation.",
-    color: "text-amber-600",
-    stage: 0,
-  },
-  QUOTATION_SENT: {
-    title: "Quotation Sent",
-    description: "A formal quotation has been sent to the customer.",
-    color: "text-sky-600",
-    stage: 1,
-  },
-  QUOTATION_APPROVED: {
-    title: "Quotation Approved",
-    description: "Customer approved the quotation.",
-    color: "text-emerald-600",
-    stage: 1,
-  },
-  QUOTATION_REJECTED: {
-    title: "Quotation Rejected",
-    description: "Customer rejected the quotation.",
-    color: "text-red-600",
-    stage: 1,
-  },
-  PENDING_APPROVAL: {
-    title: "Pending Approval",
-    description: "Booking requires your approval to proceed.",
-    color: "text-amber-600",
-    stage: 2,
-  },
-  APPROVED: {
-    title: "Approved",
-    description: "Booking has been approved by all parties.",
-    color: "text-emerald-600",
-    stage: 2,
-  },
-  SIGNED_CUSTOMER: {
-    title: "Customer Signed",
-    description: "Customer has signed the contract.",
-    color: "text-sky-600",
-    stage: 3,
-  },
-  FULLY_EXECUTED: {
-    title: "Fully Executed",
-    description: "All parties have signed.",
-    color: "text-indigo-600",
-    stage: 3,
-  },
-  PAID: {
-    title: "Paid",
-    description: "Payment received.",
-    color: "text-emerald-600",
-    stage: 3,
-  },
-  IN_TRANSIT: {
-    title: "In Transit",
-    description: "Cargo is moving through the rail network.",
-    color: "text-sky-600",
-    stage: 4,
-  },
-  PENDING_CONSOLIDATION: {
-    title: "Pending Consolidation",
-    description: "Cargo awaiting consolidation.",
-    color: "text-amber-500",
-    stage: 4,
-  },
-  CONSOLIDATED: {
-    title: "Consolidated",
-    description: "Cargo merged into larger shipment.",
-    color: "text-indigo-500",
-    stage: 4,
-  },
-  COMPLETED: {
-    title: "Completed",
-    description: "Service completed successfully.",
-    color: "text-emerald-600",
-    stage: 5,
-  },
-  CANCELLED: {
-    title: "Cancelled",
-    description: "Booking terminated.",
-    color: "text-red-600",
-    stage: -1,
-  },
-};
-
 export default function BookingRequestDetailPage() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
+  const { data: booking, isLoading, isError, refetch, isFetching } =
+    useBookingDetail(id);
+  const mutations = useBookingMutations(id ?? "");
 
-  const { data: bookingData } = useQuery(
-    api.bookings.getById.queryOptions({
-      input: { id: id ?? "" },
-      enabled: Boolean(id),
-    }),
-  );
-  const updateStatus = useUpdateBookingStatus();
-
-  const booking = bookingData ? mapBookingToRequest(bookingData) : undefined;
-
-  if (!booking) {
+  if (isLoading) {
     return (
-      <div className="p-6">
-        <Card className="flex flex-col items-center p-12 text-center">
-          <div className="flex size-16 items-center justify-center rounded-full bg-slate-100 text-slate-400">
-            <Package className="size-8" />
-          </div>
-          <h1 className="mt-4 text-2xl font-bold text-slate-900">
-            Booking not found
-          </h1>
-          <Button
-            className="mt-4"
-            variant="outline"
-            onClick={() => navigate("/dashboard/booking-requests")}
-          >
-            <ArrowLeft />
-            Back to Booking Requests
-          </Button>
-        </Card>
+      <div className={bookingSurface.page}>
+        <div className="flex min-h-[50vh] flex-col items-center justify-center gap-4 p-8">
+          <Loader2 className="size-10 animate-spin text-muted-foreground" />
+          <p className="text-sm font-medium text-muted-foreground">
+            Loading booking…
+          </p>
+        </div>
       </div>
     );
   }
 
-  const statusConfig = STATUS_CONFIG[booking.status] ?? STATUS_CONFIG.DRAFT;
-  const currentStage = statusConfig.stage;
-
-  const canApprove = ["PENDING_APPROVAL", "RFQ_SUBMITTED"].includes(
-    booking.status,
-  );
-  const canReject = !["COMPLETED", "CANCELLED", "QUOTATION_REJECTED"].includes(
-    booking.status,
-  );
-
-  const isPending = updateStatus.isPending;
-
-  function handleApprove() {
-    if (!booking) return;
-    const action =
-      booking.status === "RFQ_SUBMITTED"
-        ? "SEND_QUOTATION"
-        : "APPROVE";
-    updateStatus.mutate({ id: booking.id, action });
+  if (isError || !booking) {
+    return (
+      <div className={bookingSurface.page}>
+        <div className={bookingSurface.pageInner}>
+          <div
+            className={cn(
+              bookingSurface.sectionCard,
+              "mx-auto max-w-md p-12 text-center",
+            )}
+          >
+            <div
+              className={cn(
+                "mx-auto flex size-16 items-center justify-center rounded-2xl",
+                bookingGlass.iconWellGreen,
+              )}
+            >
+              <Package className="size-8" />
+            </div>
+            <h1 className="mt-6 text-xl font-bold text-foreground">
+              Booking not found
+            </h1>
+            <p className="mt-2 text-sm text-muted-foreground">
+              This request may have been removed or the link is invalid.
+            </p>
+            <Button
+              className="mt-6 gap-2"
+              variant="outline"
+              onClick={() => navigate("/dashboard/booking-requests")}
+            >
+              <ArrowLeft className="size-4" />
+              Back to booking requests
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
   }
 
-  function handleReject() {
-    if (!booking) return;
-    updateStatus.mutate({ id: booking.id, action: "CANCEL", reason: "Cancelled by backoffice" });
-  }
+  const row = toBookingListRow(booking);
+  const statusMeta = getStatusMeta(booking.status);
+  const amount = Number(booking.totalAmount);
 
   return (
-    <div className="p-6">
-      <div className="space-y-6">
+    <div className={bookingSurface.page}>
+      <div className={bookingSurface.pageInner}>
         <Breadcrumbs
           items={[
-            { label: "Booking Requests", href: "/dashboard/booking-requests" },
+            { label: "Booking requests", href: "/dashboard/booking-requests" },
             { label: booking.reference },
           ]}
         />
 
-        <div className="flex items-start justify-between gap-4">
-          <Card className="flex-1">
-            <CardHeader>
-              <div className="flex items-center gap-6">
-                <div className="flex size-14 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
-                  <Package className="size-6" />
+        <div className={bookingSurface.detailHero}>
+          <div className={bookingSurface.heroGlow} />
+          <div className={bookingSurface.heroSheen} />
+          <div className="relative p-6 sm:p-8">
+            <div className="mb-4">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="-ml-2 gap-2 text-muted-foreground hover:text-foreground"
+                onClick={() => navigate("/dashboard/booking-requests")}
+              >
+                <ArrowLeft className="size-4" />
+                Back to list
+              </Button>
+            </div>
+            <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
+              <div className="flex gap-4">
+                <div
+                  className={cn(
+                    "flex size-16 shrink-0 items-center justify-center rounded-2xl",
+                    bookingGlass.iconWellGreen,
+                  )}
+                >
+                  <Package className="size-7" strokeWidth={1.75} />
                 </div>
-                <div className="flex flex-col gap-1">
-                  <div className="flex items-center gap-3">
-                    <h1 className="text-2xl font-black tracking-tight text-foreground">
+                <div className="min-w-0 space-y-3">
+                  <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+                    Booking reference
+                  </p>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <h1 className="text-2xl font-semibold tracking-tight text-foreground sm:text-[1.75rem]">
                       {booking.reference}
                     </h1>
-                    <StatusBadge status={booking.status} />
-                    <PriorityBadge score={booking.priorityScore} />
+                    <BookingStatusBadge status={booking.status} />
+                    <BookingPriorityBadge score={booking.priorityScore} />
                   </div>
-                  <div className="flex items-center gap-3 text-xs text-muted-foreground">
-                    <span className="font-semibold">{booking.customer}</span>
-                    <Separator orientation="vertical" className="h-3" />
-                    <span className="flex items-center gap-1">
-                      <Calendar className="size-3" />
-                      Requested {booking.scheduledDate}
+                  {booking.nextStep && (
+                    <NextStepBanner nextStep={booking.nextStep} className="max-w-xl" />
+                  )}
+                  <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground">
+                    <span className="inline-flex items-center gap-1.5 font-medium text-foreground">
+                      <Building2 className="size-4 opacity-70" />
+                      {row.customerLabel}
                     </span>
-                    <Separator orientation="vertical" className="h-3" />
-                    <span className="flex items-center gap-1">
-                      <Clock className="size-3" />
-                      {new Date(booking.createdAt).toLocaleDateString()}
+                    <span className="inline-flex items-center gap-1.5">
+                      <Calendar className="size-4 opacity-70" />
+                      Scheduled {booking.scheduledDate}
+                    </span>
+                    <span className="inline-flex items-center gap-1.5">
+                      <Clock className="size-4 opacity-70" />
+                      Created{" "}
+                      {new Date(booking.createdAt).toLocaleDateString(undefined, {
+                        dateStyle: "medium",
+                      })}
                     </span>
                   </div>
                 </div>
               </div>
-            </CardHeader>
-          </Card>
 
-          <div className="flex shrink-0 items-start gap-2">
-            {canReject && (
-              <Button
-                variant="outline"
-                className="border-red-200 text-red-700 hover:bg-red-50"
-                onClick={handleReject}
-              >
-                <X />
-                Reject
-              </Button>
-            )}
-            {canApprove && (
-              <Button onClick={handleApprove}>
-                <ShieldCheck />
-                {booking.status === "RFQ_SUBMITTED"
-                  ? "Send Quotation"
-                  : "Approve"}
-              </Button>
-            )}
+              <div className="flex flex-col items-stretch gap-3 sm:items-end">
+                <div className={cn(bookingSurface.valueCard, "min-w-[12rem] text-right")}>
+                  <p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+                    Total value
+                  </p>
+                  <p className="mt-1 font-mono text-2xl font-semibold tabular-nums text-foreground">
+                    {booking.paymentCurrency}{" "}
+                    {amount.toLocaleString(undefined, {
+                      minimumFractionDigits: 2,
+                    })}
+                  </p>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    {booking.paymentStatus}
+                  </p>
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="gap-2 self-end border-border/60 bg-background/60 backdrop-blur-sm hover:bg-background/80"
+                  disabled={isFetching}
+                  onClick={() => refetch()}
+                >
+                  <RefreshCw
+                    className={cn("size-4", isFetching && "animate-spin")}
+                  />
+                  Refresh
+                </Button>
+              </div>
+            </div>
           </div>
         </div>
 
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2 text-base">
-              <History className="size-4 text-primary" />
-              Status Lifecycle
-            </CardTitle>
-            <CardDescription>
-              Track the booking from request to completion
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="flex flex-col gap-8">
-            <div className="relative flex w-full justify-between px-2">
-              <div className="absolute left-0 top-4 h-0.5 w-full bg-muted">
-                <div
-                  className="h-full bg-primary transition-all duration-500"
-                  style={{
-                    width:
-                      currentStage >= 0
-                        ? `${(currentStage / (PROGRESS_STAGES.length - 1)) * 100}%`
-                        : "0%",
-                  }}
-                />
-              </div>
-              {PROGRESS_STAGES.map((stage, idx) => {
-                const isCompleted = idx < currentStage;
-                const isActive = idx === currentStage;
-                return (
-                  <div
-                    key={stage.label}
-                    className="relative z-10 flex flex-col items-center gap-2"
-                  >
-                    <div
-                      className={cn(
-                        "flex size-8 items-center justify-center rounded-full border-2 bg-background transition-all duration-300",
-                        isCompleted
-                          ? "border-primary text-primary"
-                          : isActive
-                            ? "scale-110 border-primary text-primary shadow-[0_0_10px_rgba(16,185,129,0.3)]"
-                            : "border-muted text-muted-foreground",
-                      )}
-                    >
-                      {isCompleted ? (
-                        <CheckCircle2 className="size-4" />
-                      ) : (
-                        <stage.icon className="size-4" />
-                      )}
-                    </div>
-                    <span
-                      className={cn(
-                        "text-[9px] font-bold uppercase tracking-widest",
-                        isActive ? "text-primary" : "text-muted-foreground",
-                      )}
-                    >
-                      {stage.label}
-                    </span>
-                  </div>
-                );
-              })}
-            </div>
+        <BookingWorkflowStepper
+          status={booking.status}
+          title={statusMeta.title}
+          description={statusMeta.description}
+          titleColor={statusMeta.color}
+        />
 
-            <div className="flex flex-col gap-4 rounded-xl border border-border/50 bg-muted/20 p-5 md:flex-row md:items-center">
-              <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-background shadow-sm">
-                {booking.status === "CANCELLED" ? (
-                  <AlertTriangle className="size-5 text-red-500" />
-                ) : (
-                  <Info className="size-5 text-primary" />
-                )}
-              </div>
-              <div className="flex flex-col gap-0.5">
-                <h4
-                  className={cn(
-                    "text-sm font-black uppercase tracking-tight",
-                    statusConfig.color,
-                  )}
-                >
-                  {statusConfig.title}
-                </h4>
-                <p className="text-xs font-medium text-muted-foreground">
-                  {statusConfig.description}
-                </p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
-          <div className="flex flex-col gap-8 lg:col-span-2">
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-base">
-                  <Anchor className="size-4 text-primary" />
-                  Route & Service
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="flex flex-col gap-6">
-                <div className="flex flex-col items-center justify-between gap-4 rounded-xl border bg-muted/30 p-4 md:flex-row">
-                  <RouteEndpoint
-                    label="Origin Yard"
-                    station={booking.originYard}
-                    icon={<MapPin />}
-                  />
-                  <div className="flex flex-col items-center gap-1 text-primary">
-                    <div className="flex items-center gap-2">
-                      <Train className="size-5" />
-                      <ArrowRight className="size-4" />
-                    </div>
-                    <Badge
-                      variant="outline"
-                      className="border-primary/20 bg-primary/5 text-[9px] font-bold uppercase"
-                    >
-                      {booking.serviceType.replace(/_/g, " ")}
-                    </Badge>
-                  </div>
-                  <RouteEndpoint
-                    label="Destination Yard"
-                    station={booking.destinationYard}
-                    icon={<MapPin />}
-                  />
-                </div>
-
-                <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-                  <InfoItem
-                    icon={<Ship />}
-                    label="Trade Direction"
-                    value={booking.tradeDirection}
-                  />
-                  <InfoItem
-                    icon={<ShieldCheck />}
-                    label="Return"
-                    value={
-                      booking.serviceType === "RAIL_AND_FORWARDING"
-                        ? "With Return"
-                        : "Without Return"
-                    }
-                  />
-                  {booking.shippingLine && (
-                    <InfoItem
-                      icon={<Ship />}
-                      label="Shipping Line"
-                      value={booking.shippingLine}
-                    />
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-
-            {(booking.firstMilePickupAddress ||
-              booking.lastMileDeliveryAddress) && (
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="flex items-center gap-2 text-base">
-                      <Truck className="size-4 text-primary" />
-                      Mile Services
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent className="grid grid-cols-1 gap-6 md:grid-cols-2">
-                    {booking.firstMilePickupAddress && (
-                      <div className="flex flex-col gap-3">
-                        <h3 className="border-l-4 border-primary pl-3 text-xs font-bold uppercase tracking-wide text-foreground">
-                          First Mile
-                        </h3>
-                        <InfoItem
-                          label="Pickup"
-                          value={booking.firstMilePickupAddress}
-                        />
-                      </div>
-                    )}
-                    {booking.lastMileDeliveryAddress && (
-                      <div className="flex flex-col gap-3">
-                        <h3 className="border-l-4 border-primary pl-3 text-xs font-bold uppercase tracking-wide text-foreground">
-                          Last Mile
-                        </h3>
-                        <InfoItem
-                          label="Delivery"
-                          value={booking.lastMileDeliveryAddress}
-                        />
-                      </div>
-                    )}
-                  </CardContent>
-                </Card>
-              )}
-
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-base">
-                  <Package className="size-4 text-primary" />
-                  Cargo Specifications
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="flex flex-col gap-6">
-                <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-                  <InfoItem
-                    icon={<Package />}
-                    label="Type"
-                    value={booking.cargoType}
-                  />
-                  <InfoItem
-                    icon={<Weight />}
-                    label="Total Weight"
-                    value={`${booking.cargoTotalWeightVgm} Tons`}
-                  />
-                  {booking.shippingLine && (
-                    <InfoItem
-                      icon={<Ship />}
-                      label="Shipping Line"
-                      value={booking.shippingLine}
-                    />
-                  )}
-                </div>
-                <Separator />
-                <div className="flex flex-wrap gap-2">
-                  <Badge variant="outline" className="bg-background text-[9px]">
-                    Hazardous: {booking.isHazardous ? "Yes" : "No"}
-                  </Badge>
-                  {booking.pnrCode && (
-                    <Badge
-                      variant="outline"
-                      className="bg-background text-[9px]"
-                    >
-                      PNR: {booking.pnrCode}
-                    </Badge>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
+        <div className="grid grid-cols-1 gap-6 xl:grid-cols-12 xl:gap-8">
+          <div className="flex flex-col gap-6 xl:col-span-8">
+            <RouteCard booking={booking} row={row} />
+            <MileCard booking={booking} />
+            <CargoCard booking={booking} />
+            {booking.contractSummary && (
+              <SectionShell
+                icon={<Anchor className="size-4" />}
+                title="Contract summary"
+                subtitle="Generated terms"
+              >
+                <pre className="max-h-64 overflow-auto whitespace-pre-wrap rounded-lg border border-border/50 bg-muted/10 p-4 font-mono text-xs leading-relaxed text-muted-foreground backdrop-blur-sm">
+                  {booking.contractSummary}
+                </pre>
+              </SectionShell>
+            )}
           </div>
 
-          <div className="flex flex-col gap-8">
-            <Card className="border-primary/20 bg-primary/[0.02]">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-base">
-                  <FileText className="size-4 text-primary" />
-                  Contract Info
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="flex flex-col gap-4">
-                <InfoItem label="Type" value={booking.contractType} />
-                <InfoItem label="Currency" value={booking.paymentCurrency} />
-                <InfoItem
-                  label="Amount"
-                  value={`${booking.paymentCurrency} ${booking.totalAmount.toLocaleString()}`}
-                />
-                <InfoItem label="Payment" value={booking.paymentStatus} />
-                <Separator />
-                <InfoItem label="Created By" value={booking.createdBy} />
-                <InfoItem
-                  label="Created"
-                  value={new Date(booking.createdAt).toLocaleDateString()}
-                />
-                <InfoItem
-                  label="Last Updated"
-                  value={new Date(booking.updatedAt).toLocaleDateString()}
-                />
-              </CardContent>
-            </Card>
-
-            {canApprove && (
-              <Card className="border-amber-200 bg-amber-50/30">
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2 text-base text-amber-800">
-                    <AlertCircle className="size-4" />
-                    Approval Required
-                  </CardTitle>
-                  <CardDescription className="text-amber-700">
-                    This booking is waiting for your review.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="flex flex-col gap-3">
-                  <Button onClick={handleApprove}>
-                    <ShieldCheck />
-                    {booking.status === "RFQ_SUBMITTED"
-                      ? "Send Quotation"
-                      : "Approve Booking"}
-                  </Button>
+          <div
+            className={cn(
+              "flex flex-col gap-6",
+              bookingSurface.stickySidebar,
+              "xl:col-span-4",
+            )}
+          >
+            <BookingPricingSummary booking={booking} />
+            <BookingActionsToolbar booking={booking} mutations={mutations} />
+            {["CONTRACT_READY", "SIGNED_CUSTOMER", "FULLY_EXECUTED"].includes(
+              booking.status,
+            ) && (
+              <div className={bookingSurface.sectionCard}>
+                <div className="px-5 py-4">
                   <Button
-                    variant="outline"
-                    className="border-red-200 text-red-700 hover:bg-red-50"
-                    onClick={handleReject}
+                    className="w-full gap-2 shadow-sm"
+                    variant="default"
+                    onClick={() =>
+                      navigate(`/dashboard/booking-requests/${booking.id}/contract`)
+                    }
                   >
-                    <X />
-                    Reject
+                    <FileSignature className="size-4" />
+                    View &amp; sign contract
                   </Button>
-                </CardContent>
-              </Card>
+                </div>
+              </div>
+            )}
+            {(booking.status === "PENDING_APPROVAL" ||
+              booking.status === "APPROVED_PENDING_SIGNATURE") && (
+              <ApprovalStepsCard booking={booking} mutations={mutations} />
             )}
           </div>
         </div>
@@ -645,92 +267,227 @@ export default function BookingRequestDetailPage() {
   );
 }
 
-function StatusBadge({ status }: { status: string }) {
-  const style = STATUS_STYLES[status] ?? {
-    label: status,
-    color: "bg-muted text-muted-foreground border-border",
-  };
+function SectionShell({
+  icon,
+  title,
+  subtitle,
+  children,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+}) {
   return (
-    <Badge
-      variant="outline"
-      className={cn(
-        "px-2 py-0.5 font-bold uppercase tracking-wider text-[9px]",
-        style.color,
-      )}
-    >
-      {style.label}
-    </Badge>
+    <div className={bookingSurface.sectionCard}>
+      <div className={bookingSurface.sectionHeader}>
+        <div className={bookingSurface.sectionIcon}>{icon}</div>
+        <div>
+          <h2 className="text-sm font-semibold text-foreground">{title}</h2>
+          {subtitle && (
+            <p className="text-xs text-muted-foreground">{subtitle}</p>
+          )}
+        </div>
+      </div>
+      <div className={bookingSurface.sectionBody}>{children}</div>
+    </div>
   );
 }
 
-function PriorityBadge({ score }: { score: number }) {
-  if (score >= 3) {
-    return (
-      <span className="rounded-full bg-red-50 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-red-700">
-        Urgent
-      </span>
-    );
-  }
-  if (score === 2) {
-    return (
-      <span className="rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-amber-700">
-        High
-      </span>
-    );
+function RouteCard({
+  booking,
+  row,
+}: {
+  booking: BookingDetail;
+  row: ReturnType<typeof toBookingListRow>;
+}) {
+  return (
+    <SectionShell
+      icon={<Train className="size-4" />}
+      title="Route & service"
+      subtitle="Corridor and service level"
+    >
+      <div
+        className={cn(
+          "flex flex-col items-stretch gap-6 rounded-xl border border-dashed border-emerald-500/20 p-5 backdrop-blur-sm md:flex-row md:items-center md:justify-between",
+          bookingGlass.activeTab,
+        )}
+      >
+        <RouteEndpoint label="Origin" station={row.originLabel} />
+        <div className="flex flex-col items-center gap-2 px-4">
+          <div className={cn("flex size-10 items-center justify-center rounded-full", bookingGlass.iconWellGreen)}>
+            <Train className="size-5 text-black" strokeWidth={1.75} />
+          </div>
+          <ArrowRight className="size-5 rotate-90 text-muted-foreground md:rotate-0" />
+          <Badge
+            variant="outline"
+            className="border-border/50 bg-background/50 text-[10px] font-medium uppercase backdrop-blur-sm"
+          >
+            {booking.serviceType?.label ??
+              booking.serviceType?.code ??
+              "Rail service"}
+          </Badge>
+        </div>
+        <RouteEndpoint label="Destination" station={row.destinationLabel} />
+      </div>
+      <div className="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        <MetricTile label="Trade direction" value={booking.tradeDirection} />
+        <MetricTile label="Freight type" value={booking.freightType} />
+        <MetricTile
+          label="Equipment return"
+          value={booking.equipmentReturn ?? "—"}
+        />
+        {booking.shippingLine && (
+          <MetricTile
+            label="Shipping line"
+            value={
+              booking.shippingLine.label ??
+              booking.shippingLine.name ??
+              booking.shippingLine.code ??
+              "—"
+            }
+          />
+        )}
+      </div>
+    </SectionShell>
+  );
+}
+
+function MileCard({ booking }: { booking: BookingDetail }) {
+  if (!booking.firstMilePickupAddress && !booking.lastMileDeliveryAddress) {
+    return null;
   }
   return (
-    <span className="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-slate-600">
-      Normal
-    </span>
+    <SectionShell
+      icon={<Truck className="size-4" />}
+      title="Mile services"
+      subtitle="First and last mile"
+    >
+      <div className="grid gap-4 md:grid-cols-2">
+        {booking.firstMilePickupAddress && (
+          <MetricTile
+            label="First mile pickup"
+            value={booking.firstMilePickupAddress}
+          />
+        )}
+        {booking.lastMileDeliveryAddress && (
+          <MetricTile
+            label="Last mile delivery"
+            value={booking.lastMileDeliveryAddress}
+          />
+        )}
+      </div>
+    </SectionShell>
+  );
+}
+
+function CargoCard({ booking }: { booking: BookingDetail }) {
+  const containers = booking.bookingContainers ?? [];
+  return (
+    <SectionShell
+      icon={<Package className="size-4" />}
+      title="Cargo specifications"
+      subtitle="Freight and containers"
+    >
+      <div className="grid gap-3 sm:grid-cols-3">
+        <MetricTile
+          label="Cargo type"
+          value={booking.cargoType?.label ?? booking.freightType}
+        />
+        <MetricTile
+          label="Total VGM"
+          value={`${booking.cargoTotalWeightVgm} tons`}
+        />
+        <MetricTile
+          label="Hazardous"
+          value={booking.isHazardous ? "Yes" : "No"}
+          highlight={booking.isHazardous}
+        />
+      </div>
+      {containers.length > 0 && (
+        <>
+          <Separator className="my-5" />
+          <div className="overflow-hidden rounded-lg border border-border/50 backdrop-blur-sm">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-border/50 bg-muted/20 text-left text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+                  <th className="px-4 py-3">Container type</th>
+                  <th className="px-4 py-3">Qty</th>
+                  <th className="px-4 py-3">VGM / unit</th>
+                </tr>
+              </thead>
+              <tbody>
+                {containers.map((c) => (
+                  <tr
+                    key={c.id}
+                    className="border-b border-border/60 last:border-0"
+                  >
+                    <td className="px-4 py-3 font-medium text-foreground">
+                      {c.containerType?.label ??
+                        c.containerType?.code ??
+                        c.containerTypeId}
+                    </td>
+                    <td className="px-4 py-3 tabular-nums text-muted-foreground">
+                      {c.quantity}
+                    </td>
+                    <td className="px-4 py-3 tabular-nums text-muted-foreground">
+                      {c.vgmPerUnitTons} t
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </>
+      )}
+    </SectionShell>
   );
 }
 
 function RouteEndpoint({
   label,
   station,
-  icon,
 }: {
   label: string;
   station: string;
-  icon: React.ReactNode;
 }) {
   return (
-    <div className="flex items-center gap-3">
-      <div className="flex size-10 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-sm">
-        <div className="[&_svg]:size-5">{icon}</div>
+    <div className="flex min-w-0 items-center gap-3 md:max-w-[14rem]">
+      <div className={bookingSurface.sectionIconLg}>
+        <MapPin className="size-5" strokeWidth={1.75} />
       </div>
-      <div className="flex flex-col">
-        <p className="text-[9px] font-bold uppercase tracking-wide text-muted-foreground">
+      <div className="min-w-0">
+        <p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
           {label}
         </p>
-        <p className="text-sm font-black text-foreground">{station}</p>
+        <p className="truncate text-sm font-semibold text-foreground">{station}</p>
       </div>
     </div>
   );
 }
 
-function InfoItem({
-  icon,
+function MetricTile({
   label,
   value,
+  highlight,
 }: {
-  icon?: React.ReactNode;
   label: string;
-  value?: string | number | null;
+  value: string;
+  highlight?: boolean;
 }) {
   return (
-    <div className="flex items-start gap-2">
-      {icon && (
-        <div className="mt-0.5 text-muted-foreground [&_svg]:size-3.5">
-          {icon}
-        </div>
+    <div
+      className={cn(
+        bookingSurface.metricTile,
+        highlight && "border-amber-300/50 bg-amber-50/50 dark:bg-amber-950/20",
       )}
-      <div className="flex flex-col">
-        <p className="text-[9px] font-bold uppercase tracking-tight text-muted-foreground">
-          {label}
-        </p>
-        <p className="text-xs font-bold text-foreground">{value ?? "—"}</p>
-      </div>
+    >
+      <p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+        {label}
+      </p>
+      <p className="mt-1.5 text-sm font-medium leading-snug text-foreground">
+        {value}
+      </p>
     </div>
   );
 }
diff --git a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
index 643257bbd..efe9eed72 100644
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
@@ -1,30 +1,43 @@
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
 import {
   AlertCircle,
   ArrowRight,
   Calendar,
   Clock,
-  Eye,
   FileText,
-  Filter,
-  MoreHorizontal,
+  Inbox,
+  LayoutList,
   Package,
+  RefreshCw,
   Search,
-  ShieldCheck,
-  Train,
   User,
+  X,
 } from "lucide-react";
 
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
-import { cn } from "@/lib/utils";
-import { api } from "@/services/api";
+import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
 import {
-  BOOKING_STATUSES,
-  type BookingRequest,
-  mapBookingToRequest,
-} from "./booking-requests.mock";
+  BookingStatusTabs,
+  type BookingStatusTabKey,
+} from "@/components/bookings/BookingStatusTabs";
+import { BookingStatGrid } from "@/components/bookings/BookingStatGrid";
+import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
+import { BookingApprovalProgressCell } from "@/components/bookings/BookingApprovalProgressCell";
+import { BookingActionsMenu } from "@/components/bookings/BookingActionsMenu";
+import { BookingTableEmpty } from "@/components/bookings/BookingTableEmpty";
+import {
+  bookingGlass,
+  bookingInput,
+  bookingSurface,
+  bookingTable,
+} from "@/components/bookings/booking-ui.styles";
+import { BOOKING_LIST_TABS } from "@/features/bookings/booking-status.config";
+import { toBookingListRow } from "@/features/bookings/mapBookingListRow";
+import { useBookingList, useBookingListSummary } from "@/hooks/bookings/useBookings";
+import type { BookingListFilter } from "@/services/bookings.service";
+import type { BookingListRow } from "@/types/booking";
+import { cn } from "@/lib/utils";
 import {
   DataTable,
   DataTableFooter,
@@ -32,190 +45,99 @@ import {
   usePagination,
   Badge,
   Button,
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
   Input,
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  Separator,
 } from "@edr/ui-common";
 
-const STATUS_STYLES: Record<string, { label: string; color: string }> = {
-  DRAFT: {
-    label: "Draft",
-    color: "bg-slate-100 text-slate-700 border-slate-300",
-  },
-  RFQ_SUBMITTED: {
-    label: "RFQ Submitted",
-    color: "bg-amber-50 text-amber-700 border-amber-200",
-  },
-  QUOTATION_SENT: {
-    label: "Quotation Sent",
-    color: "bg-sky-50 text-sky-700 border-sky-200",
-  },
-  QUOTATION_APPROVED: {
-    label: "Quotation Approved",
-    color: "bg-emerald-50 text-emerald-700 border-emerald-200",
-  },
-  QUOTATION_REJECTED: {
-    label: "Quotation Rejected",
-    color: "bg-red-50 text-red-700 border-red-200",
-  },
-  PENDING_APPROVAL: {
-    label: "Pending Approval",
-    color: "bg-amber-50 text-amber-700 border-amber-200",
-  },
-  APPROVED: {
-    label: "Approved",
-    color: "bg-emerald-50 text-emerald-700 border-emerald-200",
-  },
-  SIGNED_CUSTOMER: {
-    label: "Customer Signed",
-    color: "bg-sky-50 text-sky-700 border-sky-200",
-  },
-  FULLY_EXECUTED: {
-    label: "Fully Executed",
-    color: "bg-indigo-50 text-indigo-700 border-indigo-200",
-  },
-  PAID: {
-    label: "Paid",
-    color: "bg-emerald-50 text-emerald-700 border-emerald-200",
-  },
-  IN_TRANSIT: {
-    label: "In Transit",
-    color: "bg-sky-50 text-sky-700 border-sky-200",
-  },
-  COMPLETED: {
-    label: "Completed",
-    color: "bg-indigo-50 text-indigo-700 border-indigo-200",
-  },
-  CANCELLED: {
-    label: "Cancelled",
-    color: "bg-red-50 text-red-700 border-red-200",
-  },
-  PENDING_CONSOLIDATION: {
-    label: "Pending Consolidation",
-    color: "bg-amber-50 text-amber-700 border-amber-200",
-  },
-  CONSOLIDATED: {
-    label: "Consolidated",
-    color: "bg-indigo-50 text-indigo-700 border-indigo-200",
-  },
-};
-
-function StatusBadge({ status }: { status: string }) {
-  const style = STATUS_STYLES[status] ?? {
-    label: status,
-    color: "bg-muted text-muted-foreground border-border",
-  };
-  return (
-    <Badge
-      variant="outline"
-      className={cn(
-        "px-2 py-0.5 font-bold uppercase tracking-wider text-[9px]",
-        style.color,
-      )}
-    >
-      {style.label}
-    </Badge>
-  );
-}
-
-function PriorityBadge({ score }: { score: number }) {
-  if (score >= 3) {
-    return (
-      <span className="rounded-full bg-red-50 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-red-700">
-        Urgent
-      </span>
-    );
-  }
-  if (score === 2) {
-    return (
-      <span className="rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-amber-700">
-        High
-      </span>
-    );
-  }
-  return (
-    <span className="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-slate-600">
-      Normal
-    </span>
-  );
+function getStatusesForTab(tab: BookingStatusTabKey): string | undefined {
+  const match = BOOKING_LIST_TABS.find((t) => t.key === tab);
+  if (!match?.statuses?.length) return undefined;
+  return match.statuses.join(",");
 }
 
 export default function BookingRequestsPage() {
   const navigate = useNavigate();
   const { pagination, setPagination } = usePagination({ pageSize: 10 });
   const [query, setQuery] = useState("");
-  const [statusFilter, setStatusFilter] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<BookingStatusTabKey>("in_approval");
+  const suppressRowClickRef = useRef(false);
+  const suppressRowClick = useCallback(() => {
+    suppressRowClickRef.current = true;
+    window.setTimeout(() => {
+      suppressRowClickRef.current = false;
+    }, 400);
+  }, []);
 
-  const { data: bookingData } = useQuery(
-    api.bookings.list.queryOptions({ input: { filter: { page: pagination.pageIndex + 1, pageSize: pagination.pageSize } } }),
-  );
-  const bookingRequests = useMemo(
-    () => (bookingData?.items ?? []).map(mapBookingToRequest),
-    [bookingData],
+  const tabStatuses = getStatusesForTab(activeTab);
+
+  const filter: BookingListFilter = useMemo(
+    () => ({
+      page: pagination.pageIndex + 1,
+      pageSize: pagination.pageSize,
+      sortBy: "createdAt",
+      sortOrder: "DESC",
+      tab: activeTab,
+      ...(tabStatuses ? { statuses: tabStatuses } : {}),
+    }),
+    [pagination.pageIndex, pagination.pageSize, activeTab, tabStatuses],
   );
 
-  const filtered = useMemo(() => {
+  const { data, isLoading, isError, refetch, isFetching } = useBookingList(filter);
+  const {
+    data: summary,
+    isLoading: summaryLoading,
+    refetch: refetchSummary,
+  } = useBookingListSummary(filter);
+
+  const rows = useMemo(() => {
+    const items = (data?.items ?? []).map(toBookingListRow);
     const q = query.trim().toLowerCase();
-    return bookingRequests.filter((b) => {
-      if (
-        q &&
-        !b.reference.toLowerCase().includes(q) &&
-        !b.customer.toLowerCase().includes(q)
-      ) {
-        return false;
-      }
-      if (statusFilter && b.status !== statusFilter) {
-        return false;
-      }
-      return true;
-    });
-  }, [bookingRequests, query, statusFilter]);
+    if (!q) return items;
+    return items.filter(
+      (b) =>
+        b.reference.toLowerCase().includes(q) ||
+        b.customerLabel.toLowerCase().includes(q),
+    );
+  }, [data?.items, query]);
 
-  const total = filtered.length;
+  const total = data?.total ?? 0;
   const pageCount = Math.max(1, Math.ceil(total / pagination.pageSize));
-  const start = pagination.pageIndex * pagination.pageSize;
-  const end = Math.min(start + pagination.pageSize, total);
+  const hasSearch = query.trim().length > 0;
+  const showEmpty = !isLoading && !isError && rows.length === 0;
 
-  const paginatedData = useMemo(
-    () => filtered.slice(start, end),
-    [start, end, filtered],
+  const metrics = summary?.metrics;
+  const tabCounts = summary?.tabs;
+  const statValue = (value: number | undefined) =>
+    summaryLoading ? "—" : (value ?? 0);
+
+  const handleRefresh = useCallback(() => {
+    void refetch();
+    void refetchSummary();
+  }, [refetch, refetchSummary]);
+
+  const handleRowClick = useCallback(
+    (row: BookingListRow) => {
+      if (suppressRowClickRef.current) return;
+      navigate(`/dashboard/booking-requests/${row.id}`);
+    },
+    [navigate],
   );
 
-  const pendingCount = bookingRequests.filter(
-    (b) => b.status === "PENDING_APPROVAL" || b.status === "RFQ_SUBMITTED",
-  ).length;
-  const activeCount = bookingRequests.filter(
-    (b) => !["COMPLETED", "CANCELLED"].includes(b.status),
-  ).length;
-  const urgentCount = bookingRequests.filter(
-    (b) => b.priorityScore >= 3,
-  ).length;
-
-  const columns: ColumnDef<BookingRequest>[] = [
+  const columns: ColumnDef<BookingListRow>[] = [
     {
       id: "booking",
-      header: "Booking",
+      header: () => <span className={bookingTable.headerCell}>Booking</span>,
       cell: ({ row }) => {
         const b = row.original;
         return (
-          <div className="flex items-center gap-3">
-            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground">
-              <Package className="h-5 w-5" />
+          <div className="flex items-center gap-3 py-1.5">
+            <div className={bookingTable.rowIcon}>
+              <Package className="size-4" strokeWidth={1.75} />
             </div>
-            <div>
-              <p className="font-medium text-slate-900">{b.reference}</p>
-              <p className="flex items-center gap-1 text-xs text-slate-500">
-                <User className="h-3 w-3" />
-                {b.customer}
+            <div className="min-w-0">
+              <p className="truncate font-medium text-foreground">{b.reference}</p>
+              <p className="mt-0.5 flex items-center gap-1 truncate text-xs text-muted-foreground">
+                <User className="size-3 shrink-0 opacity-70" />
+                {b.customerLabel}
               </p>
             </div>
           </div>
@@ -224,264 +146,259 @@ export default function BookingRequestsPage() {
     },
     {
       id: "route",
-      header: "Route",
+      header: () => <span className={bookingTable.headerCell}>Route</span>,
       cell: ({ row }) => {
         const b = row.original;
         return (
-          <div className="flex flex-col gap-0.5">
-            <div className="flex items-center gap-1 text-xs font-medium text-slate-700">
-              <span>{b.originYard}</span>
-              <ArrowRight className="h-3 w-3 text-slate-400" />
-              <span>{b.destinationYard}</span>
+          <div className="space-y-1 py-1">
+            <div className="flex items-center gap-1.5 text-sm font-medium text-foreground">
+              <span className="max-w-[8rem] truncate">{b.originLabel}</span>
+              <ArrowRight className="size-3.5 shrink-0 text-muted-foreground" />
+              <span className="max-w-[8rem] truncate">{b.destinationLabel}</span>
+            </div>
+            <div className="flex gap-1.5">
+              <Badge
+                variant="outline"
+                className="h-5 border-border/50 bg-background/50 px-1.5 text-[10px] font-medium uppercase backdrop-blur-sm"
+              >
+                {b.tradeDirection}
+              </Badge>
+              <Badge
+                variant="secondary"
+                className="h-5 bg-muted/40 px-1.5 text-[10px] font-medium"
+              >
+                {b.freightType}
+              </Badge>
             </div>
-            <span className="text-[10px] uppercase tracking-wide text-slate-500">
-              {b.tradeDirection}
-            </span>
           </div>
         );
       },
     },
     {
       id: "status",
-      header: "Status",
-      cell: ({ row }) => <StatusBadge status={row.original.status} />,
+      header: () => <span className={bookingTable.headerCell}>Status</span>,
+      cell: ({ row }) => <BookingStatusBadge status={row.original.status} />,
     },
     {
-      id: "service",
-      header: "Service",
-      cell: ({ row }) => {
-        const b = row.original;
-        return (
-          <div className="flex flex-col gap-0.5">
-            <span className="text-xs font-medium text-slate-700">
-              {b.serviceType.replace(/_/g, " ")}
-            </span>
-            <span className="flex items-center gap-1 text-[10px] text-slate-500">
-              <Calendar className="h-3 w-3" />
-              {b.scheduledDate}
-            </span>
-          </div>
-        );
-      },
+      id: "approval",
+      header: () => (
+        <span className={bookingTable.headerCell}>Approval</span>
+      ),
+      cell: ({ row }) => <BookingApprovalProgressCell row={row.original} />,
     },
     {
-      id: "cargo",
-      header: "Cargo",
-      cell: ({ row }) => {
-        const b = row.original;
-        return (
-          <div className="flex flex-col gap-0.5">
-            <span className="text-xs font-medium text-slate-700">
-              {b.cargoType}
-            </span>
-            <span className="text-[10px] text-slate-500">
-              {b.cargoTotalWeightVgm}T
-            </span>
-          </div>
-        );
-      },
+      id: "scheduled",
+      header: () => <span className={bookingTable.headerCell}>Scheduled</span>,
+      cell: ({ row }) => (
+        <span className="inline-flex items-center gap-1.5 text-sm text-muted-foreground">
+          <Calendar className="size-3.5" />
+          {row.original.scheduledDate}
+        </span>
+      ),
     },
     {
       id: "priority",
-      header: "Priority",
-      cell: ({ row }) => <PriorityBadge score={row.original.priorityScore} />,
+      header: () => <span className={bookingTable.headerCell}>Priority</span>,
+      cell: ({ row }) => (
+        <BookingPriorityBadge score={row.original.priorityScore} />
+      ),
     },
     {
       id: "amount",
-      header: "Amount",
+      header: () => (
+        <span className={bookingTable.headerCell}>Amount</span>
+      ),
       cell: ({ row }) => {
         const b = row.original;
         return (
-          <span className="font-mono text-xs font-semibold text-slate-900">
-            {b.paymentCurrency} {b.totalAmount.toLocaleString()}
+          <span className="font-mono text-sm font-semibold tabular-nums text-foreground">
+            {b.paymentCurrency}{" "}
+            {b.totalAmount.toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+            })}
           </span>
         );
       },
     },
     {
       id: "actions",
-      size: 40,
-      cell: ({ row }) => {
-        const b = row.original;
-        return (
-          <div
-            className="flex justify-end"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <DropdownMenu modal={false}>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="icon">
-                  <MoreHorizontal />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem
-                  onSelect={() =>
-                    navigate(`/dashboard/booking-requests/${b.id}`)
-                  }
-                >
-                  <Eye />
-                  View Details
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  variant="destructive"
-                  onSelect={() =>
-                    navigate(`/dashboard/booking-requests/${b.id}`)
-                  }
-                >
-                  <AlertCircle />
-                  Review
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        );
-      },
+      size: 140,
+      header: () => (
+        <span className={bookingTable.headerCell}>Actions</span>
+      ),
+      cell: ({ row }) => (
+        <BookingActionsMenu
+          row={row.original}
+          variant="table"
+          onSuppressRowClick={suppressRowClick}
+        />
+      ),
     },
   ];
 
   return (
-    <div className="min-h-screen p-6">
-      <div className="space-y-6">
-        <Breadcrumbs items={[{ label: "Booking Requests" }]} />
+    <div className={bookingSurface.page}>
+      <div className={bookingSurface.pageInner}>
+        <Breadcrumbs items={[{ label: "Operations" }, { label: "Booking requests" }]} />
 
-        <Card className="flex-row justify-between p-6">
-          <div>
-            <h1 className="text-3xl font-bold tracking-tight text-slate-900">
-              Booking Requests
-            </h1>
-            <p className="mt-1 text-sm text-secondary-foreground">
-              Review, approve, or reject customer booking requests across the
-              freight network.
-            </p>
+        <div className={bookingSurface.hero}>
+          <div className={bookingSurface.heroGlow} />
+          <div className={bookingSurface.heroSheen} />
+          <div className="relative flex flex-col gap-6 p-6 sm:flex-row sm:items-center sm:justify-between sm:p-8">
+            <div className="flex items-start gap-4">
+              <div
+                className={cn(
+                  "flex size-14 shrink-0 items-center justify-center rounded-2xl",
+                  bookingGlass.iconWellGreen,
+                )}
+              >
+                <Inbox className="size-6" strokeWidth={1.75} />
+              </div>
+              <div>
+                <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+                  Operations
+                </p>
+                <h1 className="mt-1 text-2xl font-semibold tracking-tight text-foreground sm:text-[1.75rem]">
+                  Booking requests
+                </h1>
+                <p className="mt-1.5 max-w-xl text-sm leading-relaxed text-muted-foreground">
+                  Track bookings from submission through payment and operations.
+                </p>
+              </div>
+            </div>
+            <div className="flex shrink-0 items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                className="gap-2 border-border/60 bg-background/60 backdrop-blur-sm hover:bg-background/80"
+                disabled={isFetching}
+                onClick={handleRefresh}
+              >
+                <RefreshCw
+                  className={cn("size-4", isFetching && "animate-spin")}
+                />
+                Refresh
+              </Button>
+            </div>
           </div>
+        </div>
 
-          <div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
-            <div className="relative w-full sm:w-72">
-              <Search className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+        <BookingStatGrid
+          items={[
+            {
+              label: "In queue",
+              value: statValue(metrics?.inQueue),
+              hint: "Total matching filter",
+              icon: LayoutList,
+            },
+            {
+              label: "On this page",
+              value: statValue(metrics?.onThisPage),
+              hint: "Current page",
+              icon: FileText,
+            },
+            {
+              label: "Needs action",
+              value: statValue(metrics?.needsAction),
+              hint: "Submitted or pending approval",
+              icon: Clock,
+              accent:
+                !summaryLoading && (metrics?.needsAction ?? 0) > 0
+                  ? "amber"
+                  : "default",
+            },
+            {
+              label: "Urgent",
+              value: statValue(metrics?.urgent),
+              hint: "High priority score",
+              icon: AlertCircle,
+              accent:
+                !summaryLoading && (metrics?.urgent ?? 0) > 0 ? "rose" : "default",
+            },
+          ]}
+        />
+
+        <BookingStatusTabs
+          active={activeTab}
+          onChange={(tab) => {
+            setActiveTab(tab);
+            setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+          }}
+          counts={tabCounts}
+        />
+
+        <div className={bookingSurface.panel}>
+          <div className={bookingSurface.panelToolbar}>
+            <div className="relative min-w-[12rem] flex-1 sm:max-w-sm">
+              <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
               <Input
                 type="search"
                 value={query}
-                onChange={(e) => {
-                  setQuery(e.target.value);
-                  setPagination({
-                    pageIndex: 0,
-                    pageSize: pagination.pageSize,
-                  });
-                }}
-                placeholder="Search reference or customer..."
-                className="pl-8!"
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search reference or customer…"
+                className={bookingInput.search}
               />
+              {query && (
+                <button
+                  type="button"
+                  className="absolute right-2 top-1/2 -translate-y-1/2 rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+                  onClick={() => setQuery("")}
+                  aria-label="Clear search"
+                >
+                  <X className="size-3.5" />
+                </button>
+              )}
+            </div>
+
+            <div className="flex flex-wrap items-center gap-2">
+              <span
+                className={cn(
+                  "hidden rounded-md border border-border/50 bg-background/50 px-2.5 py-1 text-xs text-muted-foreground backdrop-blur-sm sm:inline",
+                )}
+              >
+                {total} record{total !== 1 ? "s" : ""}
+              </span>
             </div>
           </div>
-        </Card>
 
-        <div className="grid gap-4 md:grid-cols-4">
-          <StatCard
-            label="Total Requests"
-            value={bookingRequests.length}
-            icon={<FileText />}
-          />
-          <StatCard
-            label="Pending Action"
-            value={pendingCount}
-            icon={<Clock />}
-          />
-          <StatCard label="Active" value={activeCount} icon={<Train />} />
-          <StatCard label="Urgent" value={urgentCount} icon={<AlertCircle />} />
-        </div>
-
-        <Card className="gap-0">
-          <CardHeader className="flex flex-row items-center justify-between border-b">
-            <div>
-              <CardTitle>All Booking Requests</CardTitle>
-              <CardDescription>
-                {total} request{total !== 1 ? "s" : ""} found
-              </CardDescription>
-            </div>
-
-            <div className="flex items-center gap-2">
-              {statusFilter && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setStatusFilter(null)}
-                >
-                  Clear filter
-                </Button>
-              )}
-              <DropdownMenu modal={false}>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="secondary" size="sm">
-                    <Filter />
-                    {statusFilter
-                      ? (STATUS_STYLES[statusFilter]?.label ?? "Filter")
-                      : "Filter"}
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                  {BOOKING_STATUSES.map((s) => (
-                    <DropdownMenuItem
-                      key={s}
-                      onSelect={() => setStatusFilter(s)}
-                    >
-                      {STATUS_STYLES[s]?.label ?? s}
-                    </DropdownMenuItem>
-                  ))}
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-          </CardHeader>
-
-          <CardContent className="px-0">
-            <DataTable
-              columns={columns}
-              data={paginatedData}
-              status="success"
-              onRowClick={(row) =>
-                navigate(`/dashboard/booking-requests/${row.id}`)
-              }
-              pagination={{
-                pageIndex: pagination.pageIndex,
-                pageSize: pagination.pageSize,
-                pageCount,
-                totalCount: total,
-              }}
-              tableOptions={{
-                state: { pagination },
-                onPaginationChange: setPagination,
-              }}
-              containerClassName="border-b shadow-none"
-              footer={DataTableFooter}
+          {showEmpty ? (
+            <BookingTableEmpty
+              isError={isError}
+              hasSearch={hasSearch}
+              onRetry={handleRefresh}
             />
-          </CardContent>
-        </Card>
+          ) : (
+            <div className={bookingSurface.tableWrap}>
+              <DataTable
+                columns={columns}
+                data={rows}
+                status={isLoading ? "loading" : isError ? "error" : "success"}
+                onRowClick={handleRowClick}
+                pagination={{
+                  pageIndex: pagination.pageIndex,
+                  pageSize: pagination.pageSize,
+                  pageCount,
+                  totalCount: total,
+                }}
+                tableOptions={{
+                  state: { pagination },
+                  onPaginationChange: setPagination,
+                  manualPagination: true,
+                  pageCount,
+                }}
+                containerClassName={cn(
+                  "border-0 shadow-none",
+                  "[&_thead_tr]:border-b [&_thead_tr]:border-border/50",
+                  "[&_thead_th]:bg-muted/20 [&_thead_th]:backdrop-blur-sm",
+                  "[&_tbody_tr]:group/tr [&_tbody_tr]:cursor-pointer [&_tbody_tr]:border-b [&_tbody_tr]:border-border/30",
+                  "[&_tbody_tr]:transition-colors [&_tbody_tr:hover]:bg-muted/20",
+                )}
+                footer={DataTableFooter}
+              />
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );
 }
-
-function StatCard({
-  label,
-  value,
-  icon,
-}: {
-  label: string;
-  value: number;
-  icon: React.ReactNode;
-}) {
-  return (
-    <Card>
-      <CardContent className="flex items-center justify-between">
-        <div>
-          <p className="text-sm text-slate-500">{label}</p>
-          <h3 className="mt-2 text-3xl font-bold text-slate-900">{value}</h3>
-        </div>
-        <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
-          {icon}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/edr-freight-web/backoffice/src/pages/bookings/booking-requests.mock.ts b/apps/edr-freight-web/backoffice/src/pages/bookings/booking-requests.mock.ts
index 9adb8eb33..8b738bc5b 100644
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/booking-requests.mock.ts
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/booking-requests.mock.ts
@@ -1,180 +1,2 @@
-import type { Freight } from "@edr/types";
-
-export interface BookingRequest {
-  id: string;
-  reference: string;
-  customer: string;
-  status: (typeof BOOKING_STATUSES)[number];
-  scheduledDate: string;
-  totalAmount: number;
-  paymentStatus: string;
-  contractType: string;
-  serviceType: string;
-  tradeDirection: string;
-  originYard: string;
-  destinationYard: string;
-  cargoType: string;
-  cargoTotalWeightVgm: number;
-  isHazardous: boolean;
-  paymentCurrency: string;
-  priorityScore: number;
-  firstMilePickupAddress: string | null;
-  lastMileDeliveryAddress: string | null;
-  shippingLine: string | null;
-  pnrCode: string | null;
-  createdBy: string;
-  createdAt: string;
-  updatedAt: string;
-}
-
-export const BOOKING_STATUSES = [
-  "DRAFT",
-  "RFQ_SUBMITTED",
-  "QUOTATION_SENT",
-  "QUOTATION_APPROVED",
-  "QUOTATION_REJECTED",
-  "PENDING_APPROVAL",
-  "APPROVED",
-  "SIGNED_CUSTOMER",
-  "FULLY_EXECUTED",
-  "PAID",
-  "IN_TRANSIT",
-  "COMPLETED",
-  "CANCELLED",
-  "PENDING_CONSOLIDATION",
-  "CONSOLIDATED",
-] as const;
-
-const customers = [
-  "Ethio Cargo Logistics",
-  "Djibouti Shipping PLC",
-  "Horn of Africa Traders",
-  "Addis Freight Forwarders",
-  "Red Sea Maritime Services",
-  "Dire Dawa Imports Ltd",
-  "Awash Agro Industry",
-  "Mieso Mineral Exports",
-];
-
-const yards = [
-  "Addis Ababa Dry Port",
-  "Mojo Inland Container Depot",
-  "Dire Dawa Freight Station",
-  "Djibouti Port Terminal",
-  "Adama Logistics Hub",
-  "Awash Cargo Center",
-];
-
-const serviceTypes = ["RAIL", "RAIL_AND_FORWARDING"];
-const tradeDirections = ["EXPORT", "IMPORT", "DOMESTIC"];
-const cargoTypes = ["Containerized", "Bulk", "Liquid", "Refrigerated", "Hazardous"];
-const shippingLines = ["MSC", "CMA CGM", "Maersk", "COSCO", "Hapag-Lloyd", null];
-
-function pick<T>(arr: T[], index: number): T {
-  return arr[index % arr.length];
-}
-
-function randDate(daysAgo: number): string {
-  const d = new Date(2026, 4, 28 - daysAgo);
-  return d.toISOString();
-}
-
-const now = Date.now();
-
-const INITIAL_REQUESTS: BookingRequest[] = Array.from({ length: 25 }, (_, i) => {
-  const statusIndex = i % BOOKING_STATUSES.length;
-  const status = BOOKING_STATUSES[statusIndex];
-  const customer = pick(customers, i);
-
-  return {
-    id: String(i + 1),
-    reference: `EDR-BK-${String(2026001 + i).slice(-6)}`,
-    customer,
-    status,
-    scheduledDate: new Date(2026, 5, 1 + (i % 28)).toISOString().slice(0, 10),
-    totalAmount: 1500 + i * 320 + (i % 7) * 100,
-    paymentStatus: status === "PAID" || status === "COMPLETED" ? "PAID" : status === "CANCELLED" ? "REFUNDED" : "PENDING",
-    contractType: i % 5 === 0 ? "RENEWAL" : "NEW",
-    serviceType: pick(serviceTypes, i),
-    tradeDirection: pick(tradeDirections, i),
-    originYard: pick(yards, i),
-    destinationYard: pick(yards, i + 3),
-    cargoType: pick(cargoTypes, i),
-    cargoTotalWeightVgm: 10 + ((i * 7) % 90),
-    isHazardous: i % 7 === 0,
-    paymentCurrency: "USD",
-    priorityScore: i % 4 === 0 ? 3 : i % 3 === 0 ? 2 : 1,
-    firstMilePickupAddress: i % 3 === 0 ? "Bole Industrial Zone, Addis Ababa" : null,
-    lastMileDeliveryAddress: i % 4 === 0 ? "Port Boulevard, Djibouti City" : null,
-    shippingLine: pick(shippingLines, i),
-    pnrCode: i % 6 === 0 ? `PNR-${202600 + i}` : null,
-    createdBy: customer,
-    createdAt: randDate(30 - i),
-    updatedAt: randDate(2),
-  };
-});
-
-export function saveBookingRequestsToStorage(data: BookingRequest[]) {
-  if (typeof window !== "undefined" && window.localStorage) {
-    localStorage.setItem("edr_backoffice_booking_requests", JSON.stringify(data));
-  }
-}
-
-export function getBookingRequestById(id: string): BookingRequest | undefined {
-  const requests = getBookingRequests();
-  return requests.find((r) => r.id === id);
-}
-
-export function updateBookingRequestStatus(id: string, newStatus: (typeof BOOKING_STATUSES)[number]) {
-  const requests = getBookingRequests();
-  const idx = requests.findIndex((r) => r.id === id);
-  if (idx === -1) return;
-  requests[idx] = { ...requests[idx], status: newStatus, updatedAt: new Date().toISOString() };
-  saveBookingRequestsToStorage(requests);
-}
-
-export function mapBookingToRequest(booking: Freight.IBooking): BookingRequest {
-  return {
-    id: booking.id,
-    reference: booking.reference,
-    customer: booking.customerId,
-    status: booking.status as BookingRequest["status"],
-    scheduledDate: booking.scheduledDate,
-    totalAmount: booking.totalAmount,
-    paymentStatus: booking.paymentStatus,
-    contractType: booking.contractType,
-    serviceType:
-      booking.serviceType === "RAIL_ONLY" ? "RAIL" : (booking.serviceType as string),
-    tradeDirection: booking.tradeDirection as string,
-    originYard: booking.originStation,
-    destinationYard: booking.destinationStation,
-    cargoType: booking.freightType ?? booking.freightSubtype ?? "",
-    cargoTotalWeightVgm: booking.cargoTotalWeightVgm,
-    isHazardous: booking.isHazardous,
-    paymentCurrency: booking.paymentCurrency,
-    priorityScore: booking.priorityScore,
-    firstMilePickupAddress: booking.firstMilePickupAddress ?? null,
-    lastMileDeliveryAddress: booking.lastMileDeliveryAddress ?? null,
-    shippingLine: null,
-    pnrCode: null,
-    createdBy: booking.customerId,
-    createdAt: booking.createdAt,
-    updatedAt: booking.updatedAt,
-  };
-}
-
-export function getBookingRequests(): BookingRequest[] {
-  if (typeof window === "undefined" || !window.localStorage) {
-    return INITIAL_REQUESTS;
-  }
-  const data = localStorage.getItem("edr_backoffice_booking_requests");
-  if (!data) {
-    localStorage.setItem("edr_backoffice_booking_requests", JSON.stringify(INITIAL_REQUESTS));
-    return INITIAL_REQUESTS;
-  }
-  try {
-    return JSON.parse(data);
-  } catch {
-    return INITIAL_REQUESTS;
-  }
-}
+/** @deprecated Use BookingDetail from @/types/booking — kept for gradual migration */
+export type { BookingListRow as BookingRequest } from "@/types/booking";
diff --git a/apps/edr-freight-web/backoffice/src/pages/bookings/bookings.mock.ts b/apps/edr-freight-web/backoffice/src/pages/bookings/bookings.mock.ts
new file mode 100644
index 000000000..633c7cb32
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/bookings.mock.ts
@@ -0,0 +1,9 @@
+/** Demo portal mock data — booking requests use the live API instead. */
+export interface Booking {
+  id: number | string;
+  customerId: number | string;
+  reference?: string;
+  status?: string;
+}
+
+export const bookings: Booking[] = [];
diff --git a/apps/edr-freight-web/backoffice/src/pages/cargoes/CargoesPage.tsx b/apps/edr-freight-web/backoffice/src/pages/cargoes/CargoesPage.tsx
new file mode 100644
index 000000000..bb4555771
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/cargoes/CargoesPage.tsx
@@ -0,0 +1,35 @@
+import { useCargoes } from '@/hooks/useCargoes';
+// import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+import { LoadCargoDialog } from '@/components/cargoes/LoadCargoDialog';
+import { Card, CardContent, CardHeader, CardTitle } from '@edr/ui-common';
+
+export default function CargoesPage() {
+  const { data: cargoes, refetch, isLoading } = useCargoes();
+  if (isLoading) return <div>Loading cargoes...</div>;
+  return (
+    <Card>
+      <CardHeader><CardTitle>All Cargoes</CardTitle></CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader><TableRow><TableHead>Reference</TableHead><TableHead>Description</TableHead><TableHead>Quantity</TableHead><TableHead>Weight</TableHead><TableHead>Status</TableHead><TableHead>Actions</TableHead></TableRow></TableHeader>
+          <TableBody>
+            {cargoes?.map((c:any) => (
+              <TableRow key={c.id}>
+                <TableCell>{c.cargoReference}</TableCell>
+                <TableCell>{c.description || '-'}</TableCell>
+                <TableCell>{c.quantity}</TableCell>
+                <TableCell>{c.weight} kg</TableCell>
+                <TableCell><Badge variant="outline">{c.status}</Badge></TableCell>
+                <TableCell>
+                  {c.status === 'PENDING' && <LoadCargoDialog cargoId={c.id} onSuccess={() => refetch()} />}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/pages/containers_management/ContainersPage.tsx b/apps/edr-freight-web/backoffice/src/pages/containers_management/ContainersPage.tsx
new file mode 100644
index 000000000..6aea46a4a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/containers_management/ContainersPage.tsx
@@ -0,0 +1,30 @@
+import { useContainers } from '@/hooks/useContainers';
+// import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@edr/ui-common';
+
+export default function ContainersPage() {
+  const { data: containers, isLoading } = useContainers();
+  if (isLoading) return <div>Loading containers...</div>;
+  return (
+    <Card>
+      <CardHeader><CardTitle>All Containers</CardTitle></CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader><TableRow><TableHead>Number</TableHead><TableHead>Type</TableHead><TableHead>Wagon</TableHead><TableHead>Status</TableHead></TableRow></TableHeader>
+          <TableBody>
+            {containers?.map((c:any) => (
+              <TableRow key={c.id}>
+                <TableCell>{c.containerNumber}</TableCell>
+                <TableCell>{c.containerTypeId}</TableCell>
+                <TableCell>{c.wagonId || 'Unassigned'}</TableCell>
+                <TableCell><Badge variant="outline">{c.status}</Badge></TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/RuleEngineResourcePage.tsx b/apps/edr-freight-web/backoffice/src/pages/ruleEngine/RuleEngineResourcePage.tsx
index 7f8f6cfa4..9a56a67e6 100644
--- a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/RuleEngineResourcePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/ruleEngine/RuleEngineResourcePage.tsx
@@ -1,5 +1,7 @@
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Navigate, useLocation, useParams } from "react-router-dom";
+import { useAuth } from "@/auth/useAuth";
+import { canAccessRuleEngineResource } from "@/lib/permissions";
 import type { ColumnDef } from "@tanstack/react-table";
 import { Loader2 } from "lucide-react";
 
@@ -9,7 +11,6 @@ import RuleEngineRecordActions from "@/components/ruleEngine/RuleEngineRecordAct
 import RuleEngineToolbar from "@/components/ruleEngine/RuleEngineToolbar";
 import { formatCell } from "@/components/ruleEngine/ruleEngineFormat";
 import {
-  ruleEngineField,
   ruleEngineSurface,
   ruleEngineTable,
 } from "@/components/ruleEngine/ruleEngineStyles";
@@ -26,6 +27,7 @@ import {
   useApprovalChain,
   useCargoTypeParentOptions,
   useContainerTypeOptions,
+  useLiveRateOptions,
   useRateWorkflow,
   useRuleEngineList,
   useRuleEngineMutations,
@@ -41,8 +43,6 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  Input,
-  Label,
   getCoreRowModel,
   usePagination,
   useReactTable,
@@ -56,6 +56,7 @@ const pathCategory = (pathname: string): RuleEngineNavCategory | undefined => {
 };
 
 const RuleEngineResourcePage = () => {
+  const { user } = useAuth();
   const { resource: resourceSlug } = useParams<{ resource: string }>();
   const location = useLocation();
   const category = pathCategory(location.pathname);
@@ -73,13 +74,17 @@ const RuleEngineResourcePage = () => {
   const [editing, setEditing] = useState<RuleEngineRecord | null>(null);
   const [deleteTarget, setDeleteTarget] = useState<RuleEngineRecord | null>(null);
   const [chainOpen, setChainOpen] = useState(false);
-  const [approveTarget, setApproveTarget] = useState<RuleEngineRecord | null>(null);
-  const [ceoId, setCeoId] = useState("");
-
   const { viewMode, setViewMode } = useRuleEngineViewMode(
     config?.slug ?? DEFAULT_CONFIGURATION_SLUG,
   );
 
+  const canView = Boolean(
+    config && canAccessRuleEngineResource(user, config.slug, "view"),
+  );
+  const canManage = Boolean(
+    config && canAccessRuleEngineResource(user, config.slug, "manage"),
+  );
+
   const listParams = useMemo(
     () => ({
       search: config?.supportsSearch ? search.trim() || undefined : undefined,
@@ -103,33 +108,52 @@ const RuleEngineResourcePage = () => {
   );
 
   const editingId = editing?.id ? String(editing.id) : undefined;
+  const usesContainerTypeField = Boolean(
+    config?.formFields.some((f) => f.name === "containerTypeId"),
+  );
+  const usesLiveRateField = Boolean(
+    config?.formFields.some((f) => f.name === "rateId"),
+  );
+
   const { data: cargoParentOptions, isLoading: cargoParentOptionsLoading } =
     useCargoTypeParentOptions(editingId, config?.slug === "cargo-types");
   const { data: containerTypeOptions, isLoading: containerTypeOptionsLoading } =
-    useContainerTypeOptions(config?.slug === "rates");
+    useContainerTypeOptions(
+      config?.slug === "rates",
+      usesContainerTypeField,
+    );
+  const { data: liveRateOptions, isLoading: liveRateOptionsLoading } =
+    useLiveRateOptions(usesLiveRateField);
 
   const formFields = useMemo(() => {
     if (!config) return [];
-    return config.formFields.map((field) =>
-      config.slug === "cargo-types" && field.name === "parentGroupId"
-        ? {
-            ...field,
-            options:
-              cargoParentOptions ?? [
-                { label: "None", value: RULE_ENGINE_SELECT_NONE },
-              ],
-          }
-        : config.slug === "rates" && field.name === "containerTypeId"
-          ? {
-              ...field,
-              options:
-                containerTypeOptions ?? [
-                  { label: "None", value: RULE_ENGINE_SELECT_NONE },
-                ],
-            }
-          : field,
-    );
-  }, [config, cargoParentOptions, containerTypeOptions]);
+    return config.formFields.map((field) => {
+      if (config.slug === "cargo-types" && field.name === "parentGroupId") {
+        return {
+          ...field,
+          options:
+            cargoParentOptions ?? [
+              { label: "None", value: RULE_ENGINE_SELECT_NONE },
+            ],
+        };
+      }
+      if (field.name === "containerTypeId") {
+        return {
+          ...field,
+          type: "select" as const,
+          options: containerTypeOptions ?? [],
+        };
+      }
+      if (field.name === "rateId") {
+        return {
+          ...field,
+          type: "select" as const,
+          options: liveRateOptions ?? [],
+        };
+      }
+      return field;
+    });
+  }, [config, cargoParentOptions, containerTypeOptions, liveRateOptions]);
 
   const rows = data?.data ?? [];
   const meta = data?.meta;
@@ -163,6 +187,13 @@ const RuleEngineResourcePage = () => {
     onPaginationChange: setPagination,
   });
 
+  const handleApproveRate = useCallback(
+    (record: RuleEngineRecord) => {
+      approve.mutate(String(record.id));
+    },
+    [approve],
+  );
+
   const columns = useMemo((): ColumnDef<RuleEngineRecord>[] => {
     if (!config) return [];
 
@@ -186,6 +217,7 @@ const RuleEngineResourcePage = () => {
           <RuleEngineRecordActions
             record={row.original}
             config={config}
+            readOnly={!canManage}
             onEdit={(record) => {
               setEditing(record);
               setFormOpen(true);
@@ -194,15 +226,15 @@ const RuleEngineResourcePage = () => {
             onViewChain={
               config.slug === "approval-rules" ? () => setChainOpen(true) : undefined
             }
-            onSubmitRate={(id) => submit.mutate(id)}
-            onApproveRate={setApproveTarget}
+            onSubmitRate={canManage ? (id) => submit.mutate(id) : undefined}
+            onApproveRate={canManage ? handleApproveRate : undefined}
           />
         </div>
       ),
     });
 
     return base;
-  }, [config, submit]);
+  }, [canManage, config, submit, handleApproveRate]);
 
   const tableStatus = isLoading ? "loading" : isError ? "error" : "success";
 
@@ -214,6 +246,10 @@ const RuleEngineResourcePage = () => {
     return <Navigate to={defaultPath} replace />;
   }
 
+  if (!canView) {
+    return <Navigate to="/dashboard/overview" replace />;
+  }
+
   const openCreate = () => {
     setEditing(null);
     setFormOpen(true);
@@ -258,7 +294,7 @@ const RuleEngineResourcePage = () => {
               setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
             }}
             searchPlaceholder={config.searchPlaceholder}
-            onAdd={openCreate}
+            onAdd={canManage ? openCreate : undefined}
             addLabel={`Add ${config.label.replace(/s$/, "")}`}
             viewMode={viewMode}
             onViewModeChange={setViewMode}
@@ -312,13 +348,14 @@ const RuleEngineResourcePage = () => {
             itemLabel={itemLabel}
             table={cardTable}
             pagination={paginationState}
-            onEdit={openEdit}
-            onDelete={setDeleteTarget}
+            readOnly={!canManage}
+            onEdit={canManage ? openEdit : undefined}
+            onDelete={canManage ? setDeleteTarget : undefined}
             onViewChain={
               config.slug === "approval-rules" ? () => setChainOpen(true) : undefined
             }
-            onSubmitRate={(id) => submit.mutate(id)}
-            onApproveRate={setApproveTarget}
+            onSubmitRate={canManage ? (id) => submit.mutate(id) : undefined}
+            onApproveRate={canManage ? handleApproveRate : undefined}
           />
         )}
       </Card>
@@ -337,7 +374,8 @@ const RuleEngineResourcePage = () => {
         isSubmitting={create.isPending || update.isPending}
         selectOptionsLoading={
           (config.slug === "cargo-types" && cargoParentOptionsLoading) ||
-          (config.slug === "rates" && containerTypeOptionsLoading)
+          (usesContainerTypeField && containerTypeOptionsLoading) ||
+          (usesLiveRateField && liveRateOptionsLoading)
         }
         onSubmit={handleFormSubmit}
       />
@@ -370,51 +408,6 @@ const RuleEngineResourcePage = () => {
         </DialogContent>
       </Dialog>
 
-      <Dialog open={Boolean(approveTarget)} onOpenChange={(o) => !o && setApproveTarget(null)}>
-        <DialogContent className={ruleEngineSurface.dialogSm}>
-          <DialogHeader>
-            <DialogTitle>Approve rate</DialogTitle>
-            <DialogDescription>Enter the CEO staff ID to approve this rate.</DialogDescription>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div className="space-y-1.5">
-              <Label htmlFor="ceoId" className={ruleEngineField.label}>
-                CEO staff ID
-              </Label>
-              <Input
-                id="ceoId"
-                value={ceoId}
-                onChange={(e) => setCeoId(e.target.value)}
-                placeholder="UUID"
-                className={ruleEngineField.input}
-              />
-            </div>
-            <div className="flex justify-end gap-2">
-              <Button variant="outline" onClick={() => setApproveTarget(null)}>
-                Cancel
-              </Button>
-              <Button
-                disabled={!ceoId.trim() || approve.isPending}
-                onClick={() => {
-                  if (!approveTarget) return;
-                  approve.mutate(
-                    { id: approveTarget.id, payload: { approvedByCeoId: ceoId.trim() } },
-                    {
-                      onSuccess: () => {
-                        setApproveTarget(null);
-                        setCeoId("");
-                      },
-                    },
-                  );
-                }}
-              >
-                {approve.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : "Approve"}
-              </Button>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-
       <Dialog open={chainOpen} onOpenChange={setChainOpen}>
         <DialogContent className={ruleEngineSurface.dialog}>
           <DialogHeader>
diff --git a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts b/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts
index 3fe1b59cb..3ac0286d3 100644
--- a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts
+++ b/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts
@@ -3,7 +3,16 @@ import type { RuleEngineResourceSlug } from "@/types/rule-engine";
 
 export type RuleEngineNavCategory = "configuration" | "rules";
 
-export type ColumnFormat = "text" | "code" | "boolean" | "activeBadge" | "rateStatus" | "date" | "number";
+export type ColumnFormat =
+  | "text"
+  | "code"
+  | "boolean"
+  | "activeBadge"
+  | "rateStatus"
+  | "date"
+  | "number"
+  | "entityLabel"
+  | "rateLabel";
 
 export type FormFieldType = "text" | "number" | "boolean" | "date" | "select" | "textarea";
 
@@ -187,7 +196,14 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
     formFields: [
       { name: "label", label: "Label", type: "text", required: true },
       { name: "score", label: "Score", type: "number", required: true },
-      { name: "conditionCurrency", label: "Condition currency", type: "text", placeholder: "USD (optional)" },
+      {
+        name: "conditionCurrency",
+        label: "Condition currency",
+        type: "select",
+        optional: true,
+        options: [{ label: "Any", value: RULE_ENGINE_SELECT_NONE }, ...CURRENCIES],
+        placeholder: "Any currency (optional)",
+      },
       { name: "isActive", label: "Active", type: "boolean" },
     ],
   },
@@ -226,7 +242,7 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
       codeColumn("code"),
       { id: "label", header: "Label", accessorKey: "label" },
       { id: "triggerCondition", header: "Trigger", accessorKey: "triggerCondition" },
-      { id: "rateId", header: "Rate ID", accessorKey: "rateId" },
+      { id: "rateId", header: "Rate", accessorKey: "rate", format: "rateLabel" },
       activeColumn,
     ],
     formFields: [
@@ -238,7 +254,13 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
         required: true,
         options: SURCHARGE_TRIGGERS,
       },
-      { name: "rateId", label: "Rate ID", type: "text", required: true, placeholder: "UUID of LIVE rate" },
+      {
+        name: "rateId",
+        label: "Live rate",
+        type: "select",
+        required: true,
+        placeholder: "Select a LIVE rate",
+      },
       { name: "isActive", label: "Active", type: "boolean" },
     ],
   },
@@ -249,14 +271,25 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
     subtitle: "VGM limits by container and trade direction",
     searchPlaceholder: "Search weight limit rules...",
     columns: [
-      { id: "containerTypeId", header: "Container", accessorKey: "containerTypeId" },
+      {
+        id: "containerType",
+        header: "Container",
+        accessorKey: "containerType",
+        format: "entityLabel",
+      },
       { id: "tradeDirection", header: "Direction", accessorKey: "tradeDirection" },
       { id: "maxVgmTons", header: "Max VGM (t)", accessorKey: "maxVgmTons", format: "number" },
       { id: "effectiveFrom", header: "From", accessorKey: "effectiveFrom", format: "date" },
       { id: "effectiveTo", header: "To", accessorKey: "effectiveTo", format: "date" },
     ],
     formFields: [
-      { name: "containerTypeId", label: "Container type ID", type: "text", required: true },
+      {
+        name: "containerTypeId",
+        label: "Container type",
+        type: "select",
+        required: true,
+        placeholder: "Select container type",
+      },
       {
         name: "tradeDirection",
         label: "Trade direction",
@@ -349,7 +382,6 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
       { name: "currency", label: "Currency", type: "select", required: true, options: CURRENCIES },
       { name: "rateValue", label: "Rate value", type: "number", required: true },
       { name: "rateUnit", label: "Rate unit", type: "select", required: true, options: RATE_UNITS },
-      { name: "proposedByStaffId", label: "Proposed by (staff ID)", type: "text", required: true },
       { name: "effectiveFrom", label: "Effective from", type: "date", required: true },
       { name: "effectiveTo", label: "Effective to", type: "date" },
     ],
diff --git a/apps/edr-freight-web/backoffice/src/pages/trains/TrainDetailPage.tsx b/apps/edr-freight-web/backoffice/src/pages/trains/TrainDetailPage.tsx
new file mode 100644
index 000000000..75cf8c047
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/trains/TrainDetailPage.tsx
@@ -0,0 +1,36 @@
+import { useParams } from 'react-router-dom';
+import { useTrain } from '@/hooks/useTrains';
+// import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+// import { Skeleton } from '@/components/ui/skeleton';
+// import { AssignWagonDialog } from '@/components/AssignWagonDialog';
+// import { WagonsTable } from '@/components/WagonsTable';
+import { Card, CardContent, CardHeader, CardTitle, Skeleton } from '@edr/ui-common';
+import { AssignWagonDialog } from '@/components/wagons/AssignWagonDialog';
+import { WagonsTable } from '@/components/wagons/WagonsTable';
+
+export default function TrainDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const { data: train, isLoading } = useTrain(id!);
+
+  if (isLoading) return <Skeleton className="h-96 w-full" />;
+  if (!train) return <div>Train not found</div>;
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader><CardTitle>{train.trainNumber || train.code} - {train.trainName || 'Unnamed'}</CardTitle></CardHeader>
+        <CardContent className="grid md:grid-cols-2 gap-4">
+          <div><span className="font-medium">Status:</span> {train.status}</div>
+          <div><span className="font-medium">Capacity:</span> {train.capacityTons} tons</div>
+          <div><span className="font-medium">Origin Station:</span> {train.originStationId || '-'}</div>
+          <div><span className="font-medium">Destination:</span> {train.destinationStationId || '-'}</div>
+        </CardContent>
+      </Card>
+      <div className="flex justify-between items-center">
+        <h2 className="text-xl font-semibold">Wagons</h2>
+        <AssignWagonDialog trainId={train.id} />
+      </div>
+      <WagonsTable trainId={train.id} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/pages/trains/TrainsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/trains/TrainsPage.tsx
index a9d12eb6a..51de6226a 100644
--- a/apps/edr-freight-web/backoffice/src/pages/trains/TrainsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trains/TrainsPage.tsx
@@ -1,12 +1,798 @@
-import FeaturePlaceholder from "@/components/FeaturePlaceholder";
+import { useMemo, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { isAxiosError } from 'axios';
+import toast from 'react-hot-toast';
+import { Calendar, RefreshCw, TrainTrack } from 'lucide-react';
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@edr/ui-common';
+
+import Breadcrumbs from '@/components/ui/Breadcrumbs';
+import { QUERY_KEYS } from '@/constants/QUERY_KEYS';
+import { trainSchedulingService } from '@/services/trainScheduling.service';
+import type {
+  EligibleContainerBooking,
+  TrainScheduleFilters,
+  TrainSchedulePreviewResponse,
+  YardOption,
+} from '@/types/trainScheduling';
+
+const inputClassName =
+  'w-full rounded-xl border border-border bg-background px-3 py-2.5 text-sm text-foreground outline-none transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 dark:focus:ring-emerald-950';
+
+const formatDate = (value?: string | null) => {
+  if (!value) return '-';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '-';
+  return new Intl.DateTimeFormat('en', {
+    year: 'numeric',
+    month: 'short',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date);
+};
+
+const formatDayInput = (value?: string | null) => {
+  if (!value) return '';
+  return value.slice(0, 10);
+};
+
+const parseError = (error: unknown, fallback: string) => {
+  if (isAxiosError(error)) {
+    const message = error.response?.data?.message;
+    if (Array.isArray(message)) return message.join(', ');
+    if (typeof message === 'string') return message;
+    const violations = error.response?.data?.violations;
+    if (Array.isArray(violations)) return violations.join(', ');
+  }
+  return fallback;
+};
+
+const deriveFromBooking = (
+  booking: EligibleContainerBooking | undefined,
+  stations: YardOption[],
+) => {
+  if (!booking) {
+    return { originStationId: '', destinationStationId: '', scheduleDate: '' };
+  }
+
+  const originStationId = stations.find((station) => station.name === booking.origin)?.id ?? '';
+  const destinationStationId =
+    stations.find((station) => station.name === booking.destination)?.id ?? '';
+
+  return {
+    originStationId,
+    destinationStationId,
+    scheduleDate: formatDayInput(booking.preferredDepartureDate),
+  };
+};
 
 const TrainsPage = () => {
+  const qc = useQueryClient();
+  const [filters, setFilters] = useState<TrainScheduleFilters>({});
+  const [selectedBookingIds, setSelectedBookingIds] = useState<string[]>([]);
+  const [preview, setPreview] = useState<TrainSchedulePreviewResponse | null>(null);
+  const [selectedLocomotiveId, setSelectedLocomotiveId] = useState('');
+  const [detailId, setDetailId] = useState<string | null>(null);
+  const [scheduleSearch, setScheduleSearch] = useState('');
+  const [scheduleStatusFilter, setScheduleStatusFilter] = useState('ALL');
+
+  const stationsQuery = useQuery({
+    queryKey: QUERY_KEYS.TRAIN_SCHEDULING.stations(),
+    queryFn: () => trainSchedulingService.getStations(),
+  });
+
+  const eligibleQuery = useQuery({
+    queryKey: QUERY_KEYS.TRAIN_SCHEDULING.eligible(filters),
+    queryFn: () => trainSchedulingService.getEligibleBookings(filters),
+  });
+
+  const locomotivesQuery = useQuery({
+    queryKey: QUERY_KEYS.TRAIN_SCHEDULING.locomotives(),
+    queryFn: () => trainSchedulingService.getAvailableLocomotives(),
+  });
+
+  const schedulesQuery = useQuery({
+    queryKey: QUERY_KEYS.TRAIN_SCHEDULING.schedules(),
+    queryFn: () => trainSchedulingService.listSchedules(),
+  });
+
+  const detailQuery = useQuery({
+    queryKey: QUERY_KEYS.TRAIN_SCHEDULING.scheduleById(detailId ?? ''),
+    queryFn: () => trainSchedulingService.getScheduleById(detailId!),
+    enabled: Boolean(detailId),
+  });
+
+  const eligibleItems = eligibleQuery.data?.items ?? [];
+  const filteredSchedules = useMemo(() => {
+    const query = scheduleSearch.trim().toLowerCase();
+
+    return (schedulesQuery.data ?? []).filter((schedule) => {
+      const matchesStatus =
+        scheduleStatusFilter === 'ALL' || schedule.status === scheduleStatusFilter;
+
+      if (!matchesStatus) {
+        return false;
+      }
+
+      if (!query) {
+        return true;
+      }
+
+      const haystack = [
+        schedule.id,
+        schedule.origin ?? '',
+        schedule.destination ?? '',
+        schedule.locomotive?.code ?? '',
+        schedule.status,
+      ]
+        .join(' ')
+        .toLowerCase();
+
+      return haystack.includes(query);
+    });
+  }, [scheduleSearch, scheduleStatusFilter, schedulesQuery.data]);
+  const selectedBookings = useMemo(
+    () => eligibleItems.filter((booking) => selectedBookingIds.includes(booking.id)),
+    [eligibleItems, selectedBookingIds],
+  );
+
+  const summary = useMemo(() => {
+    const totalWeightTons = selectedBookings.reduce((sum, booking) => sum + booking.weightTons, 0);
+    const wagonsNeeded = Math.ceil(totalWeightTons / 70);
+    const totalLengthMeters = wagonsNeeded * 14;
+    const routeSet = new Set(selectedBookings.map((booking) => `${booking.origin} -> ${booking.destination}`));
+    const dateSet = new Set(selectedBookings.map((booking) => formatDayInput(booking.preferredDepartureDate)));
+
+    return {
+      count: selectedBookings.length,
+      totalWeightTons,
+      wagonsNeeded: Number.isFinite(wagonsNeeded) ? wagonsNeeded : 0,
+      totalLengthMeters: Number.isFinite(totalLengthMeters) ? totalLengthMeters : 0,
+      route: routeSet.size === 1 ? [...routeSet][0] : selectedBookings.length ? 'Mixed route' : '-',
+      scheduleDate: dateSet.size === 1 ? [...dateSet][0] : selectedBookings.length ? 'Mixed date' : '-',
+    };
+  }, [selectedBookings]);
+
+  const previewMutation = useMutation({
+    mutationFn: () => {
+      if (!filters.originStationId || !filters.destinationStationId || !filters.scheduleDate) {
+        throw new Error('Please select origin, destination, and schedule date');
+      }
+      return trainSchedulingService.preview({
+        bookingIds: selectedBookingIds,
+        scheduleDate: new Date(`${filters.scheduleDate}T08:00:00.000Z`).toISOString(),
+        originStationId: filters.originStationId,
+        destinationStationId: filters.destinationStationId,
+      });
+    },
+    onSuccess: (data) => {
+      setPreview(data);
+      toast.success(data.valid ? 'Preview generated' : 'Preview has validation issues');
+    },
+    onError: (error) => {
+      toast.error(parseError(error, 'Failed to preview train schedule'));
+    },
+  });
+
+  const createMutation = useMutation({
+    mutationFn: () => {
+      if (!selectedLocomotiveId) {
+        throw new Error('Please select a locomotive');
+      }
+      if (!filters.originStationId || !filters.destinationStationId || !filters.scheduleDate) {
+        throw new Error('Please select origin, destination, and schedule date');
+      }
+      return trainSchedulingService.createSchedule({
+        bookingIds: selectedBookingIds,
+        scheduleDate: new Date(`${filters.scheduleDate}T08:00:00.000Z`).toISOString(),
+        originStationId: filters.originStationId,
+        destinationStationId: filters.destinationStationId,
+        locomotiveId: selectedLocomotiveId,
+      });
+    },
+    onSuccess: (data) => {
+      toast.success('Train schedule created');
+      setSelectedBookingIds([]);
+      setSelectedLocomotiveId('');
+      setPreview(null);
+      void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.ROOT });
+      void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.schedules() });
+      void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.locomotives() });
+      setDetailId(data.id);
+    },
+    onError: (error) => {
+      toast.error(parseError(error, 'Failed to create train schedule'));
+    },
+  });
+
+  const cancelMutation = useMutation({
+    mutationFn: (id: string) => trainSchedulingService.cancelSchedule(id),
+    onSuccess: (data) => {
+      toast.success('Train schedule cancelled');
+      void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.schedules() });
+      void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.locomotives() });
+      void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.ROOT });
+      void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.scheduleById(data.id) });
+      setDetailId(data.id);
+    },
+    onError: (error) => {
+      toast.error(parseError(error, 'Failed to cancel train schedule'));
+    },
+  });
+
+  const toggleBooking = (booking: EligibleContainerBooking, checked: boolean) => {
+    setSelectedBookingIds((current) => {
+      if (checked) {
+        const next = [...new Set([...current, booking.id])];
+        if (next.length === 1) {
+          const defaults = deriveFromBooking(booking, stationsQuery.data ?? []);
+          setFilters((prev) => ({
+            ...prev,
+            originStationId: prev.originStationId || defaults.originStationId,
+            destinationStationId: prev.destinationStationId || defaults.destinationStationId,
+            scheduleDate: prev.scheduleDate || defaults.scheduleDate,
+          }));
+        }
+        return next;
+      }
+      return current.filter((id) => id !== booking.id);
+    });
+    setPreview(null);
+  };
+
+  const detail = detailQuery.data;
+  const isBusy = previewMutation.isPending || createMutation.isPending;
+
   return (
-    <FeaturePlaceholder
-      title="Trains"
-      description="Coordinate train assignments, scheduling visibility, and operational readiness."
-    />
+    <div className="space-y-6 p-6">
+      <Breadcrumbs items={[{ label: 'Operations' }, { label: 'Train scheduling' }]} />
+
+      <section className="overflow-hidden rounded-3xl border border-border bg-card shadow-sm">
+        <div className="flex flex-col gap-5 border-b border-border px-6 py-6 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex items-start gap-4">
+            <div className="flex size-14 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
+              <TrainTrack className="size-7" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold tracking-tight">Train Scheduling</h1>
+              <p className="mt-1 text-sm text-muted-foreground">
+                Build container train schedules from compatible bookings, preview wagon plans, and assign locomotives.
+              </p>
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            className="gap-2"
+            onClick={() => {
+              void eligibleQuery.refetch();
+              void schedulesQuery.refetch();
+              void locomotivesQuery.refetch();
+            }}
+          >
+            <RefreshCw className="size-4" />
+            Refresh
+          </Button>
+        </div>
+
+        <div className="grid gap-6 p-6 xl:grid-cols-[1.8fr,1fr]">
+          <div className="space-y-6">
+            <section className="rounded-2xl border border-border bg-background/60 p-5">
+              <div className="mb-4 flex items-center gap-2">
+                <Calendar className="size-4 text-muted-foreground" />
+                <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+                  Filters
+                </h2>
+              </div>
+              <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Origin station</label>
+                  <Select
+                    value={filters.originStationId ?? ''}
+                    onValueChange={(value) =>
+                      setFilters((current) => ({
+                        ...current,
+                        originStationId: value === '__all__' ? undefined : value,
+                      }))
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="All origins" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="__all__">All origins</SelectItem>
+                      {(stationsQuery.data ?? []).map((station) => (
+                        <SelectItem key={station.id} value={station.id}>
+                          {station.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Destination station</label>
+                  <Select
+                    value={filters.destinationStationId ?? ''}
+                    onValueChange={(value) =>
+                      setFilters((current) => ({
+                        ...current,
+                        destinationStationId: value === '__all__' ? undefined : value,
+                      }))
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="All destinations" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="__all__">All destinations</SelectItem>
+                      {(stationsQuery.data ?? []).map((station) => (
+                        <SelectItem key={station.id} value={station.id}>
+                          {station.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Schedule date</label>
+                  <input
+                    className={inputClassName}
+                    type="date"
+                    value={filters.scheduleDate ?? ''}
+                    onChange={(event) =>
+                      setFilters((current) => ({
+                        ...current,
+                        scheduleDate: event.target.value || undefined,
+                      }))
+                    }
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Booking status</label>
+                  <input
+                    className={inputClassName}
+                    placeholder="APPROVED"
+                    value={filters.status ?? ''}
+                    onChange={(event) =>
+                      setFilters((current) => ({
+                        ...current,
+                        status: event.target.value || undefined,
+                      }))
+                    }
+                  />
+                </div>
+              </div>
+            </section>
+
+            <section className="rounded-2xl border border-border bg-background/60 p-5">
+              <div className="mb-4 flex items-center justify-between">
+                <div>
+                  <h2 className="text-lg font-semibold">Eligible container bookings</h2>
+                  <p className="text-sm text-muted-foreground">
+                    Only container bookings not already assigned to a schedule appear here.
+                  </p>
+                </div>
+                <span className="rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground">
+                  {eligibleQuery.data?.count ?? 0} bookings
+                </span>
+              </div>
+
+              <div className="overflow-x-auto rounded-2xl border border-border">
+                <table className="min-w-full divide-y divide-border text-sm">
+                  <thead className="bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground">
+                    <tr>
+                      <th className="px-3 py-3">Select</th>
+                      <th className="px-3 py-3">Booking</th>
+                      <th className="px-3 py-3">Customer</th>
+                      <th className="px-3 py-3">Container</th>
+                      <th className="px-3 py-3">Qty</th>
+                      <th className="px-3 py-3">Weight</th>
+                      <th className="px-3 py-3">Origin</th>
+                      <th className="px-3 py-3">Destination</th>
+                      <th className="px-3 py-3">Departure</th>
+                      <th className="px-3 py-3">Status</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-border bg-card">
+                    {eligibleItems.map((booking) => (
+                      <tr key={booking.id} className="hover:bg-muted/20">
+                        <td className="px-3 py-3">
+                          <input
+                            type="checkbox"
+                            checked={selectedBookingIds.includes(booking.id)}
+                            onChange={(event) => toggleBooking(booking, event.target.checked)}
+                          />
+                        </td>
+                        <td className="px-3 py-3 font-medium">{booking.reference}</td>
+                        <td className="px-3 py-3">{booking.customer}</td>
+                        <td className="px-3 py-3">{booking.containerType}</td>
+                        <td className="px-3 py-3">{booking.quantity}</td>
+                        <td className="px-3 py-3">{booking.weightTons.toLocaleString()} T</td>
+                        <td className="px-3 py-3">{booking.origin}</td>
+                        <td className="px-3 py-3">{booking.destination}</td>
+                        <td className="px-3 py-3">{formatDate(booking.preferredDepartureDate)}</td>
+                        <td className="px-3 py-3">{booking.status}</td>
+                      </tr>
+                    ))}
+                    {!eligibleQuery.isLoading && eligibleItems.length === 0 ? (
+                      <tr>
+                        <td className="px-3 py-8 text-center text-sm text-muted-foreground" colSpan={10}>
+                          No eligible container bookings matched the current filters.
+                        </td>
+                      </tr>
+                    ) : null}
+                  </tbody>
+                </table>
+              </div>
+            </section>
+          </div>
+
+          <div className="space-y-6">
+            <section className="rounded-2xl border border-border bg-background/60 p-5">
+              <h2 className="text-lg font-semibold">Schedule builder</h2>
+              <div className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
+                <div className="rounded-xl border border-border bg-card p-4">
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Selected bookings</p>
+                  <p className="mt-2 text-2xl font-semibold">{summary.count}</p>
+                </div>
+                <div className="rounded-xl border border-border bg-card p-4">
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Total weight</p>
+                  <p className="mt-2 text-2xl font-semibold">{summary.totalWeightTons.toLocaleString()} T</p>
+                </div>
+                <div className="rounded-xl border border-border bg-card p-4">
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Route</p>
+                  <p className="mt-2 text-sm font-medium">{summary.route}</p>
+                </div>
+                <div className="rounded-xl border border-border bg-card p-4">
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Schedule date</p>
+                  <p className="mt-2 text-sm font-medium">{summary.scheduleDate}</p>
+                </div>
+                <div className="rounded-xl border border-border bg-card p-4">
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Estimated wagon type</p>
+                  <p className="mt-2 text-sm font-medium">NW5</p>
+                </div>
+                <div className="rounded-xl border border-border bg-card p-4">
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Estimated wagons / length</p>
+                  <p className="mt-2 text-sm font-medium">
+                    {summary.wagonsNeeded} wagons / {summary.totalLengthMeters} m
+                  </p>
+                </div>
+              </div>
+
+              <div className="mt-5 flex flex-col gap-3">
+                <Button
+                  className="w-full"
+                  disabled={!selectedBookingIds.length || isBusy}
+                  onClick={() => previewMutation.mutate()}
+                >
+                  Preview schedule
+                </Button>
+
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Locomotive</label>
+                  <Select value={selectedLocomotiveId} onValueChange={setSelectedLocomotiveId}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select available locomotive" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {(locomotivesQuery.data ?? []).map((locomotive) => (
+                        <SelectItem key={locomotive.id} value={locomotive.id}>
+                          {locomotive.code} - {locomotive.maxPullWeightTons}T
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <Button
+                  className="w-full"
+                  disabled={!preview?.valid || !selectedLocomotiveId || isBusy}
+                  onClick={() => createMutation.mutate()}
+                >
+                  Create schedule
+                </Button>
+              </div>
+
+              {preview ? (
+                <div className="mt-5 space-y-4 rounded-2xl border border-border bg-card p-4">
+                  <div className="flex items-center justify-between">
+                    <h3 className="font-semibold">Preview result</h3>
+                    <span
+                      className={`rounded-full px-3 py-1 text-xs font-medium ${
+                        preview.valid
+                          ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300'
+                          : 'bg-rose-100 text-rose-700 dark:bg-rose-950 dark:text-rose-300'
+                      }`}
+                    >
+                      {preview.valid ? 'Valid' : 'Invalid'}
+                    </span>
+                  </div>
+
+                  <div className="grid gap-3 sm:grid-cols-3">
+                    <div className="rounded-xl border border-border p-3">
+                      <p className="text-xs uppercase tracking-wide text-muted-foreground">Wagons</p>
+                      <p className="mt-1 font-semibold">{preview.summary.wagonsNeeded}</p>
+                    </div>
+                    <div className="rounded-xl border border-border p-3">
+                      <p className="text-xs uppercase tracking-wide text-muted-foreground">Weight</p>
+                      <p className="mt-1 font-semibold">{preview.summary.totalWeightTons} T</p>
+                    </div>
+                    <div className="rounded-xl border border-border p-3">
+                      <p className="text-xs uppercase tracking-wide text-muted-foreground">Length</p>
+                      <p className="mt-1 font-semibold">{preview.summary.totalLengthMeters} m</p>
+                    </div>
+                  </div>
+
+                  {preview.violations.length > 0 ? (
+                    <div className="rounded-xl border border-rose-200 bg-rose-50 p-3 text-sm text-rose-700 dark:border-rose-950 dark:bg-rose-950/30 dark:text-rose-300">
+                      <ul className="list-disc space-y-1 pl-5">
+                        {preview.violations.map((violation) => (
+                          <li key={violation}>{violation}</li>
+                        ))}
+                      </ul>
+                    </div>
+                  ) : null}
+                </div>
+              ) : null}
+            </section>
+
+            <section className="rounded-2xl border border-border bg-background/60 p-5">
+              <div className="mb-4 flex items-center justify-between">
+                <div>
+                  <h2 className="text-lg font-semibold">Created schedules</h2>
+                  <p className="text-sm text-muted-foreground">Open a schedule to inspect wagons and allocations.</p>
+                </div>
+                <span className="rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground">
+                  {filteredSchedules.length} schedules
+                </span>
+              </div>
+
+              <div className="mb-4 grid gap-3 md:grid-cols-[1fr,220px]">
+                <input
+                  className={inputClassName}
+                  placeholder="Search by schedule, route, locomotive, or status"
+                  value={scheduleSearch}
+                  onChange={(event) => setScheduleSearch(event.target.value)}
+                />
+                <Select value={scheduleStatusFilter} onValueChange={setScheduleStatusFilter}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="All statuses" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="ALL">All statuses</SelectItem>
+                    <SelectItem value="DRAFT">DRAFT</SelectItem>
+                    <SelectItem value="SCHEDULED">SCHEDULED</SelectItem>
+                    <SelectItem value="DISPATCHED">DISPATCHED</SelectItem>
+                    <SelectItem value="ARRIVED">ARRIVED</SelectItem>
+                    <SelectItem value="CANCELLED">CANCELLED</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="overflow-x-auto rounded-2xl border border-border">
+                <table className="min-w-full divide-y divide-border text-sm">
+                  <thead className="bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground">
+                    <tr>
+                      <th className="px-3 py-3">Schedule</th>
+                      <th className="px-3 py-3">Departure</th>
+                      <th className="px-3 py-3">Route</th>
+                      <th className="px-3 py-3">Locomotive</th>
+                      <th className="px-3 py-3">Bookings</th>
+                      <th className="px-3 py-3">Wagons</th>
+                      <th className="px-3 py-3">Weight</th>
+                      <th className="px-3 py-3">Length</th>
+                      <th className="px-3 py-3">Status</th>
+                      <th className="px-3 py-3">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-border bg-card">
+                    {filteredSchedules.map((schedule) => (
+                      <tr key={schedule.id} className="hover:bg-muted/20">
+                        <td className="px-3 py-3 font-mono text-xs">{schedule.id}</td>
+                        <td className="px-3 py-3">{formatDate(schedule.scheduleDate)}</td>
+                        <td className="px-3 py-3">
+                          {schedule.origin} to {schedule.destination}
+                        </td>
+                        <td className="px-3 py-3">{schedule.locomotive?.code ?? '-'}</td>
+                        <td className="px-3 py-3">{schedule.bookingsCount}</td>
+                        <td className="px-3 py-3">{schedule.wagonCount}</td>
+                        <td className="px-3 py-3">{schedule.totalWeightTons} T</td>
+                        <td className="px-3 py-3">{schedule.totalLengthMeters} m</td>
+                        <td className="px-3 py-3">{schedule.status}</td>
+                        <td className="px-3 py-3">
+                          <div className="flex gap-2">
+                            <Button variant="outline" size="sm" onClick={() => setDetailId(schedule.id)}>
+                              View
+                            </Button>
+                            {schedule.status !== 'CANCELLED' ? (
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => cancelMutation.mutate(schedule.id)}
+                              >
+                                Cancel
+                              </Button>
+                            ) : null}
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                    {!schedulesQuery.isLoading && filteredSchedules.length === 0 ? (
+                      <tr>
+                        <td className="px-3 py-8 text-center text-sm text-muted-foreground" colSpan={10}>
+                          No train schedules matched the current filters.
+                        </td>
+                      </tr>
+                    ) : null}
+                  </tbody>
+                </table>
+              </div>
+            </section>
+          </div>
+        </div>
+      </section>
+
+      <Dialog open={Boolean(detailId)} onOpenChange={(open) => (!open ? setDetailId(null) : null)}>
+        <DialogContent className="max-h-[90vh] max-w-5xl overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Train schedule detail</DialogTitle>
+            <DialogDescription>
+              Inspect the selected schedule, locomotive, wagons, and booking allocations.
+            </DialogDescription>
+          </DialogHeader>
+
+          {detail ? (
+            <div className="space-y-6">
+              <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+                <div className="rounded-xl border border-border p-4">
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Schedule</p>
+                  <p className="mt-2 break-all font-mono text-xs">{detail.id}</p>
+                </div>
+                <div className="rounded-xl border border-border p-4">
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Departure</p>
+                  <p className="mt-2 text-sm font-medium">{formatDate(detail.scheduledDepartureDate)}</p>
+                </div>
+                <div className="rounded-xl border border-border p-4">
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Route</p>
+                  <p className="mt-2 text-sm font-medium">
+                    {detail.originStation?.label ?? detail.originStation?.code ?? '-'} to{' '}
+                    {detail.destinationStation?.label ?? detail.destinationStation?.code ?? '-'}
+                  </p>
+                </div>
+                <div className="rounded-xl border border-border p-4">
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Status</p>
+                  <p className="mt-2 text-sm font-medium">{detail.status}</p>
+                </div>
+              </div>
+
+              <div className="rounded-2xl border border-border p-4">
+                <h3 className="text-lg font-semibold">Locomotive</h3>
+                <p className="mt-2 text-sm text-muted-foreground">
+                  {detail.trainSet?.locomotive
+                    ? `${detail.trainSet.locomotive.code} (${detail.trainSet.locomotive.maxPullWeightTons}T pull capacity)`
+                    : 'No locomotive attached'}
+                </p>
+              </div>
+
+              <div className="rounded-2xl border border-border p-4">
+                <h3 className="text-lg font-semibold">Wagons and allocations</h3>
+                <div className="mt-4 space-y-4">
+                  {(detail.trainSet?.wagons ?? []).map((wagon) => (
+                    <div key={wagon.id} className="rounded-xl border border-border p-4">
+                      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                        <div>
+                          <p className="font-semibold">
+                            Wagon {wagon.sequenceNo} - {wagon.wagonType?.code ?? 'NW5'}
+                          </p>
+                          <p className="text-sm text-muted-foreground">
+                            {wagon.assignedWeightTons}T assigned / {wagon.capacityTons}T capacity / {wagon.lengthMeters}m
+                          </p>
+                        </div>
+                      </div>
+                      <div className="mt-3 overflow-x-auto rounded-xl border border-border">
+                        <table className="min-w-full divide-y divide-border text-sm">
+                          <thead className="bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground">
+                            <tr>
+                              <th className="px-3 py-2">Booking</th>
+                              <th className="px-3 py-2">Allocated weight</th>
+                            </tr>
+                          </thead>
+                          <tbody className="divide-y divide-border bg-card">
+                            {wagon.allocations.map((allocation) => (
+                              <tr key={allocation.id}>
+                                <td className="px-3 py-2">{allocation.bookingReference ?? allocation.bookingId}</td>
+                                <td className="px-3 py-2">{allocation.allocatedWeightTons} T</td>
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="rounded-2xl border border-border p-4">
+                <h3 className="text-lg font-semibold">Bookings in schedule</h3>
+                <div className="mt-4 overflow-x-auto rounded-xl border border-border">
+                  <table className="min-w-full divide-y divide-border text-sm">
+                    <thead className="bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground">
+                      <tr>
+                        <th className="px-3 py-2">Reference</th>
+                        <th className="px-3 py-2">Customer</th>
+                        <th className="px-3 py-2">Weight</th>
+                        <th className="px-3 py-2">Status</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-border bg-card">
+                      {detail.bookings.map((booking) => (
+                        <tr key={booking.id}>
+                          <td className="px-3 py-2">{booking.reference ?? booking.id}</td>
+                          <td className="px-3 py-2">{booking.customer ?? '-'}</td>
+                          <td className="px-3 py-2">{booking.weightTons} T</td>
+                          <td className="px-3 py-2">{booking.status ?? '-'}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <p className="text-sm text-muted-foreground">Loading schedule detail...</p>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
   );
 };
 
-export default TrainsPage;
+// export default function TrainsPage() {
+//   const { data: trains, isLoading } = useTrains();
+//   const deleteTrain = useDeleteTrain();
+//   const [open, setOpen] = useState(false);
+
+//   if (isLoading) return <div className="p-8">Loading trains...</div>;
+
+//   return (
+//     <Card>
+//       <CardHeader className="flex flex-row items-center justify-between">
+//         <CardTitle>Trains</CardTitle>
+//         <Dialog open={open} onOpenChange={setOpen}>
+//           <DialogTrigger asChild><Button size="sm"><Plus className="mr-2 h-4 w-4" />New Train</Button></DialogTrigger>
+//           <DialogContent><DialogHeader><DialogTitle>Create Train</DialogTitle></DialogHeader><CreateTrainForm onSuccess={() => setOpen(false)} /></DialogContent>
+//         </Dialog>
+//       </CardHeader>
+//       <CardContent>
+//         <Table>
+//           <TableHeader><TableRow><TableHead>Number</TableHead><TableHead>Name</TableHead><TableHead>Status</TableHead><TableHead>Capacity</TableHead><TableHead>Actions</TableHead></TableRow></TableHeader>
+//           <TableBody>
+//             {trains?.map(train => (
+//               <TableRow key={train.id}>
+//                 <TableCell>{train.trainNumber || train.code}</TableCell>
+//                 <TableCell>{train.trainName || '-'}</TableCell>
+//                 <TableCell><Badge variant="outline">{train.status}</Badge></TableCell>
+//                 <TableCell>{train.capacityTons} t</TableCell>
+//                 <TableCell className="flex space-x-2">
+//                   <Link to={`/trains/${train.id}`}><Button variant="ghost" size="icon"><Eye className="h-4 w-4" /></Button></Link>
+//                   <Button variant="ghost" size="icon" onClick={() => deleteTrain.mutate(train.id)}><Trash2 className="h-4 w-4" /></Button>
+//                 </TableCell>
+//               </TableRow>
+//             ))}
+//           </TableBody>
+//         </Table>
+//       </CardContent>
+//     </Card>
+//   );
+// }
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/pages/wagons/WagonsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/wagons/WagonsPage.tsx
new file mode 100644
index 000000000..6d9c3fcd3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/wagons/WagonsPage.tsx
@@ -0,0 +1,31 @@
+import { useWagons } from '@/hooks/useWagons';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+// import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@edr/ui-common';
+
+
+export default function WagonsPage() {
+  const { data: wagons, isLoading } = useWagons();
+  if (isLoading) return <div>Loading wagons...</div>;
+  return (
+    <Card>
+      <CardHeader><CardTitle>All Wagons</CardTitle></CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader><TableRow><TableHead>Number</TableHead><TableHead>Type</TableHead><TableHead>Train</TableHead><TableHead>Status</TableHead></TableRow></TableHeader>
+          <TableBody>
+            {wagons?.map((w:any) => (
+              <TableRow key={w.id}>
+                <TableCell>{w.wagonNumber}</TableCell>
+                <TableCell>{w.wagonTypeId}</TableCell>
+                <TableCell>{w.trainId || 'Unassigned'}</TableCell>
+                <TableCell><Badge variant="outline">{w.status}</Badge></TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/services/api.ts b/apps/edr-freight-web/backoffice/src/services/api.ts
index f0d585859..4aab4bd98 100644
--- a/apps/edr-freight-web/backoffice/src/services/api.ts
+++ b/apps/edr-freight-web/backoffice/src/services/api.ts
@@ -1,3 +1,4 @@
+import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
 import { endpoint } from "@/utils/endpoint";
 import type {
   CreateFileUploadFieldDto,
@@ -16,7 +17,6 @@ import {
   UpdateDropdownSettingDto,
 } from "@/types/dropdownSettings";
 import {
-  ApproveRatePayload,
   RuleEngineListResult,
   RuleEngineRecord,
   RuleEngineResourceSlug,
@@ -27,8 +27,14 @@ import {
   ruleEngineService,
   RuleEngineListParams,
 } from "./ruleEngine/ruleEngine.service";
-import { bookingsService, BookingListFilter } from "./bookings.service";
-import type { Freight, PaginatedResponse } from "@edr/types";
+import {
+  bookingsService,
+  BookingListFilter,
+  type ApproveStepPayload,
+  type PaginatedBookings,
+  type RejectStepPayload,
+} from "./bookings.service";
+import type { BookingDetail } from "@/types/booking";
 
 export const api = {
   fileUploadSettings: {
@@ -167,15 +173,21 @@ export const api = {
     list: endpoint<
       { resource: RuleEngineResourceSlug; params?: RuleEngineListParams },
       RuleEngineListResult<RuleEngineRecord>
-    >("rule-engine", "list", ({ resource, params }) =>
-      ruleEngineService.list(resource, params),
+    >(
+      "rule-engine",
+      "list",
+      ({ resource, params }) => ruleEngineService.list(resource, params),
+      ({ resource, params }) => QUERY_KEYS.RULE_ENGINE.list(resource, params),
     ),
 
     getById: endpoint<
       { resource: RuleEngineResourceSlug; id: string },
       RuleEngineRecord
-    >("rule-engine", "getById", ({ resource, id }) =>
-      ruleEngineService.getById(resource, id),
+    >(
+      "rule-engine",
+      "getById",
+      ({ resource, id }) => ruleEngineService.getById(resource, id),
+      ({ resource, id }) => QUERY_KEYS.RULE_ENGINE.detail(resource, id),
     ),
 
     create: endpoint<
@@ -209,37 +221,33 @@ export const api = {
       ({ id }) => ruleEngineService.submitRate(id),
     ),
 
-    approveRate: endpoint<
-      { id: string; payload: ApproveRatePayload },
-      RuleEngineRecord
-    >("rule-engine", "approveRate", ({ id, payload }) =>
-      ruleEngineService.approveRate(id, payload),
+    approveRate: endpoint<{ id: string }, RuleEngineRecord>(
+      "rule-engine",
+      "approveRate",
+      ({ id }) => ruleEngineService.approveRate(id),
     ),
 
     getApprovalChain: endpoint<void, RuleEngineRecord[]>(
       "rule-engine",
       "getApprovalChain",
       () => ruleEngineService.getApprovalChain(),
+      () => QUERY_KEYS.RULE_ENGINE.chain,
     ),
   },
 
   bookings: {
-    list: endpoint<
-      { filter?: BookingListFilter },
-      PaginatedResponse<Freight.IBooking>
-    >("bookings", "list", ({ filter }) => bookingsService.list(filter)),
+    list: endpoint<{ filter?: BookingListFilter }, PaginatedBookings>(
+      "bookings",
+      "list",
+      ({ filter }) => bookingsService.list(filter),
+      ({ filter }) => QUERY_KEYS.BOOKINGS.list(filter),
+    ),
 
-    getById: endpoint<{ id: string }, Freight.IBooking>(
+    getById: endpoint<{ id: string }, BookingDetail>(
       "bookings",
       "getById",
       ({ id }) => bookingsService.getById(id),
-    ),
-
-    updateStatus: endpoint<
-      { id: string; action: string; reason?: string },
-      Freight.IBooking
-    >("bookings", "updateStatus", ({ id, action, reason }) =>
-      bookingsService.updateStatus(id, { action, reason }),
+      ({ id }) => QUERY_KEYS.BOOKINGS.byId(id),
     ),
 
     remove: endpoint<{ id: string }, void>(
@@ -247,5 +255,78 @@ export const api = {
       "remove",
       ({ id }) => bookingsService.remove(id),
     ),
+
+    staffAccept: endpoint<{ id: string }, BookingDetail>(
+      "bookings",
+      "staffAccept",
+      ({ id }) => bookingsService.staffAccept(id),
+    ),
+
+    requestChanges: endpoint<{ id: string; note: string }, BookingDetail>(
+      "bookings",
+      "requestChanges",
+      ({ id, note }) => bookingsService.requestChanges(id, note),
+    ),
+
+    staffReject: endpoint<{ id: string; reason: string }, BookingDetail>(
+      "bookings",
+      "staffReject",
+      ({ id, reason }) => bookingsService.staffReject(id, reason),
+    ),
+
+    approveStep: endpoint<ApproveStepPayload, BookingDetail>(
+      "bookings",
+      "approveStep",
+      (payload) => bookingsService.approveStep(payload),
+    ),
+
+    rejectStep: endpoint<RejectStepPayload, BookingDetail>(
+      "bookings",
+      "rejectStep",
+      (payload) => bookingsService.rejectStep(payload),
+    ),
+
+    generateContract: endpoint<{ id: string }, BookingDetail>(
+      "bookings",
+      "generateContract",
+      ({ id }) => bookingsService.generateContract(id),
+    ),
+
+    getContractView: endpoint<{ id: string }, import("./bookings.service").ContractView>(
+      "bookings",
+      "getContractView",
+      ({ id }) => bookingsService.getContractView(id),
+    ),
+
+    signContract: endpoint<
+      { id: string } & import("./bookings.service").SignContractPayload,
+      BookingDetail
+    >("bookings", "signContract", ({ id, ...payload }) =>
+      bookingsService.signContract(id, payload),
+    ),
+
+    payBooking: endpoint<{ id: string }, BookingDetail>(
+      "bookings",
+      "payBooking",
+      ({ id }) => bookingsService.payBooking(id),
+    ),
+
+    startTransit: endpoint<{ id: string }, BookingDetail>(
+      "bookings",
+      "startTransit",
+      ({ id }) => bookingsService.startTransit(id),
+    ),
+
+    complete: endpoint<{ id: string }, BookingDetail>(
+      "bookings",
+      "complete",
+      ({ id }) => bookingsService.complete(id),
+    ),
+
+    cancel: endpoint<{ id: string; reason: string }, BookingDetail>(
+      "bookings",
+      "cancel",
+      ({ id, reason }) => bookingsService.cancel(id, reason),
+    ),
   },
 };
diff --git a/apps/edr-freight-web/backoffice/src/services/bookings.service.ts b/apps/edr-freight-web/backoffice/src/services/bookings.service.ts
index e823b2146..8c9bbe371 100644
--- a/apps/edr-freight-web/backoffice/src/services/bookings.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/bookings.service.ts
@@ -1,51 +1,221 @@
-import type { Freight, PaginatedResponse } from "@edr/types";
-
 import { api as client } from "../auth/http";
 import { unwrap } from "@/utils/endpoint";
 import { URL_CONSTANTS } from "@/constants/URLS";
+import type { BookingDetail } from "@/types/booking";
 
-const BASE = URL_CONSTANTS.BOOKINGS.BASE;
+const B = URL_CONSTANTS.BOOKINGS;
 
 export interface BookingListFilter {
   status?: string;
-  customerId?: string;
-  search?: string;
+  /** Comma-separated statuses for grouped tabs */
+  statuses?: string;
+  /** Tab key for React Query cache (not sent to API) */
+  tab?: string;
+  // customerId?: string;
+  companyId?: string;
+  freightType?: string;
+  tradeDirection?: string;
+  paymentCurrency?: string;
   page?: number;
   pageSize?: number;
   sortBy?: string;
   sortOrder?: "ASC" | "DESC";
 }
 
+export interface PaginatedBookings {
+  items: BookingDetail[];
+  total: number;
+}
+
+export interface BookingListSummaryMetrics {
+  inQueue: number;
+  onThisPage: number;
+  needsAction: number;
+  urgent: number;
+}
+
+export interface BookingListSummaryTabs {
+  all: number;
+  intake: number;
+  in_approval: number;
+  approved_contract: number;
+  payment: number;
+  operations: number;
+  completed: number;
+  closed: number;
+}
+
+export interface BookingListSummary {
+  metrics: BookingListSummaryMetrics;
+  tabs: BookingListSummaryTabs;
+}
+
+export interface ApproveStepPayload {
+  id: string;
+  stepId: string;
+  requiredRole: string;
+}
+
+export interface RejectStepPayload {
+  id: string;
+  stepId: string;
+  reason: string;
+}
+
+export interface ContractView {
+  bookingId: string;
+  reference: string;
+  status: string;
+  templateKey: string;
+  title: string;
+  html: string;
+  canSignCustomer: boolean;
+  canSignStaff: boolean;
+  hasContractDocument: boolean;
+  signatures: Array<{
+    role: string;
+    signerDisplayName: string;
+    signedAt: string;
+    signatureImageUrl?: string | null;
+  }>;
+}
+
+export interface SignContractPayload {
+  role: "CUSTOMER" | "STAFF";
+  signatureImageBase64: string;
+  signerDisplayName: string;
+  consentText?: string;
+}
+
+async function postBooking<T>(url: string, body?: unknown): Promise<T> {
+  const response = await client.post<T>(url, body ?? {});
+  return unwrap(response.data);
+}
+
 export const bookingsService = {
-  list: async (
-    filter?: BookingListFilter,
-  ): Promise<PaginatedResponse<Freight.IBooking>> => {
-    const response = await client.get<PaginatedResponse<Freight.IBooking>>(
-      BASE,
-      { params: filter },
-    );
-    return unwrap(response.data);
+  getListSummary: async (filter?: BookingListFilter): Promise<BookingListSummary> => {
+    const params: Record<string, string | number | boolean | undefined> = {};
+    if (filter) {
+      if (filter.statuses) params.statuses = filter.statuses;
+      else if (filter.status) params.status = filter.status;
+      if (filter.page != null) params.page = filter.page;
+      if (filter.pageSize != null) params.pageSize = filter.pageSize;
+      if (filter.companyId) params.companyId = filter.companyId;
+      if (filter.freightType) params.freightType = filter.freightType;
+      if (filter.tradeDirection) params.tradeDirection = filter.tradeDirection;
+      if (filter.paymentCurrency) params.paymentCurrency = filter.paymentCurrency;
+    }
+    const response = await client.get<BookingListSummary>(B.LIST_SUMMARY, {
+      params,
+    });
+    return unwrap(response.data) as BookingListSummary;
   },
 
-  getById: async (id: string): Promise<Freight.IBooking> => {
-    const response = await client.get<Freight.IBooking>(
-      URL_CONSTANTS.BOOKINGS.BY_ID(id),
-    );
-    return unwrap(response.data);
+  list: async (filter?: BookingListFilter): Promise<PaginatedBookings> => {
+    const params: Record<string, string | number | boolean | undefined> = {};
+    if (filter) {
+      if (filter.statuses) params.statuses = filter.statuses;
+      else if (filter.status) params.status = filter.status;
+      // filter.tab is intentionally omitted from API params
+      if (filter.page != null) params.page = filter.page;
+      if (filter.pageSize != null) params.pageSize = filter.pageSize;
+      if (filter.sortBy) params.sortBy = filter.sortBy;
+      if (filter.sortOrder) params.sortOrder = filter.sortOrder;
+      if (filter.companyId) params.companyId = filter.companyId;
+      if (filter.freightType) params.freightType = filter.freightType;
+      if (filter.tradeDirection) params.tradeDirection = filter.tradeDirection;
+      if (filter.paymentCurrency) params.paymentCurrency = filter.paymentCurrency;
+    }
+    const response = await client.get<PaginatedBookings>(B.BASE, {
+      params,
+    });
+    const data = unwrap(response.data);
+    return {
+      items: (data.items ?? []) as BookingDetail[],
+      total: data.total ?? 0,
+    };
   },
 
-  updateStatus: async (
-    id: string,
-    payload: { action: string; reason?: string },
-  ): Promise<Freight.IBooking> => {
-    const response = await client.patch<Freight.IBooking>(
-      `${URL_CONSTANTS.BOOKINGS.BY_ID(id)}/status`,
-      payload,
-    );
-    return unwrap(response.data);
+  getById: async (id: string): Promise<BookingDetail> => {
+    const response = await client.get<BookingDetail>(B.BY_ID(id));
+    return unwrap(response.data) as BookingDetail;
   },
 
   remove: async (id: string): Promise<void> => {
-    await client.delete(URL_CONSTANTS.BOOKINGS.BY_ID(id));
+    await client.delete(B.BY_ID(id));
   },
+
+  staffAccept: (id: string) => postBooking<BookingDetail>(B.STAFF_ACCEPT(id)),
+
+  requestChanges: (id: string, note: string) =>
+    postBooking<BookingDetail>(B.STAFF_REQUEST_CHANGES(id), { note }),
+
+  staffReject: (id: string, reason: string) =>
+    postBooking<BookingDetail>(B.STAFF_REJECT(id), { reason }),
+
+  approveStep: ({ id, stepId, requiredRole }: ApproveStepPayload) =>
+    postBooking<BookingDetail>(B.APPROVE_STEP(id, stepId), { requiredRole }),
+
+  rejectStep: ({ id, stepId, reason }: RejectStepPayload) =>
+    postBooking<BookingDetail>(B.REJECT_STEP(id, stepId), { reason }),
+
+  generateContract: (id: string) =>
+    postBooking<BookingDetail>(B.CONTRACT_GENERATE(id)),
+
+  getContractView: async (id: string): Promise<ContractView> => {
+    const response = await client.get<ContractView>(B.CONTRACT_VIEW(id));
+    return unwrap(response.data) as ContractView;
+  },
+
+  downloadContract: async (id: string): Promise<Blob> => {
+    const response = await client.get(B.CONTRACT_DOWNLOAD(id), {
+      responseType: "blob",
+    });
+    return ensurePdfBlob(response.data as Blob);
+  },
+
+  downloadContractDocument: async (id: string): Promise<Blob> => {
+    const response = await client.get(B.CONTRACT_DOCUMENT(id), {
+      responseType: "blob",
+    });
+    return ensurePdfBlob(response.data as Blob);
+  },
+
+  signContract: (id: string, payload: SignContractPayload) =>
+    postBooking<BookingDetail>(B.CONTRACT_SIGN(id), payload),
+
+  getSummary: async (id: string): Promise<{ summary: string }> => {
+    const response = await client.get<{ summary: string }>(B.SUMMARY(id));
+    return unwrap(response.data);
+  },
+
+  customerSign: (id: string, payload: SignContractPayload) =>
+    postBooking<BookingDetail>(B.CUSTOMER_SIGN(id), {
+      ...payload,
+      role: "CUSTOMER",
+    }),
+
+  marketingApprove: (id: string, payload: SignContractPayload) =>
+    postBooking<BookingDetail>(B.MARKETING_APPROVE(id), {
+      ...payload,
+      role: "STAFF",
+    }),
+
+  payBooking: (id: string) => postBooking<BookingDetail>(B.PAYMENT_PAY(id)),
+
+  startTransit: (id: string) =>
+    postBooking<BookingDetail>(B.START_TRANSIT(id)),
+
+  complete: (id: string) => postBooking<BookingDetail>(B.COMPLETE(id)),
+
+  cancel: (id: string, reason: string) =>
+    postBooking<BookingDetail>(B.CANCEL(id), { reason }),
 };
+
+async function ensurePdfBlob(blob: Blob): Promise<Blob> {
+  if (blob.type.includes("application/json")) {
+    const body = JSON.parse(await blob.text()) as { message?: string };
+    throw new Error(body.message ?? "Contract PDF download failed");
+  }
+  return blob;
+}
diff --git a/apps/edr-freight-web/backoffice/src/services/cargoService.ts b/apps/edr-freight-web/backoffice/src/services/cargoService.ts
new file mode 100644
index 000000000..432f7073e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/services/cargoService.ts
@@ -0,0 +1,28 @@
+// import { apiClient } from '@/lib/axios';
+import { api as apiClient } from "../auth/http";
+
+
+export interface Cargo {
+  id: string;
+  cargoReference: string;
+  shipmentId: string;
+  containerId: string;
+  cargoTypeId?: string;
+  description?: string;
+  quantity: number;
+  weight: number;
+  volume?: number;
+  status: 'PENDING' | 'LOADED' | 'IN_TRANSIT' | 'DELIVERED' | 'UNLOADED';
+  loadedAt?: string;
+  unloadedAt?: string;
+}
+
+export const cargoService = {
+  getAll: () => apiClient.get<Cargo[]>('/cargoes'),
+  getByContainer: (containerId: string) => apiClient.get<Cargo[]>(`/cargoes?containerId=${containerId}`),
+  create: (data: any) => apiClient.post('/cargoes', data),
+  load: (cargoId: string, quantity: number, weight: number, volume?: number) =>
+    apiClient.post(`/cargoes/${cargoId}/load`, { quantity, weight, volume }),
+  deliver: (cargoId: string) => apiClient.post(`/cargoes/${cargoId}/deliver`),
+  unload: (cargoId: string) => apiClient.post(`/cargoes/${cargoId}/unload`),
+};
diff --git a/apps/edr-freight-web/backoffice/src/services/containerService.ts b/apps/edr-freight-web/backoffice/src/services/containerService.ts
new file mode 100644
index 000000000..791da39f8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/services/containerService.ts
@@ -0,0 +1,23 @@
+// import { apiClient } from '@/lib/axios';
+import { api as apiClient } from "../auth/http";
+
+
+export interface Container {
+  id: string;
+  containerNumber: string;
+  containerTypeId: string;
+  wagonId: string | null;
+  position: number | null;
+  tareWeight: number;
+  maxGrossWeight: number;
+  sealNumber?: string;
+  status: string;
+}
+
+export const containerService = {
+  getAll: () => apiClient.get<Container[]>('/containers'),
+  getByWagon: (wagonId: string) => apiClient.get<Container[]>(`/containers?wagonId=${wagonId}`),
+  assignToWagon: (containerId: string, wagonId: string, position?: number) =>
+    apiClient.post(`/containers/${containerId}/assign-wagon`, { wagonId, position }),
+  unassign: (containerId: string) => apiClient.post(`/containers/${containerId}/unassign-wagon`),
+};
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/services/ruleEngine/ruleEngine.service.ts b/apps/edr-freight-web/backoffice/src/services/ruleEngine/ruleEngine.service.ts
index 65d9476e8..6c5c7f47d 100644
--- a/apps/edr-freight-web/backoffice/src/services/ruleEngine/ruleEngine.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/ruleEngine/ruleEngine.service.ts
@@ -1,7 +1,6 @@
 import { api as client } from "@/auth/http";
 import { URL_CONSTANTS } from "@/constants/URLS";
 import type {
-  ApproveRatePayload,
   RuleEngineListMeta,
   RuleEngineListResult,
   RuleEngineRecord,
@@ -143,11 +142,8 @@ export const ruleEngineService = {
     return normalizeEntity<T>(response.data);
   },
 
-  approveRate: async <T extends RuleEngineRecord>(
-    id: string,
-    payload: ApproveRatePayload,
-  ): Promise<T> => {
-    const response = await client.post(URL_CONSTANTS.RULE_ENGINE.RATE_APPROVE(id), payload);
+  approveRate: async <T extends RuleEngineRecord>(id: string): Promise<T> => {
+    const response = await client.post(URL_CONSTANTS.RULE_ENGINE.RATE_APPROVE(id));
     return normalizeEntity<T>(response.data);
   },
 
diff --git a/apps/edr-freight-web/backoffice/src/services/trainScheduling.service.ts b/apps/edr-freight-web/backoffice/src/services/trainScheduling.service.ts
new file mode 100644
index 000000000..e696b7e8b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/services/trainScheduling.service.ts
@@ -0,0 +1,87 @@
+import { api as client } from '../auth/http';
+import { unwrap } from '@/utils/endpoint';
+import { URL_CONSTANTS } from '@/constants/URLS';
+import type {
+  CreateTrainSchedulePayload,
+  EligibleContainerBookingsResponse,
+  LocomotiveRecord,
+  TrainScheduleDetail,
+  TrainScheduleFilters,
+  TrainScheduleListItem,
+  TrainSchedulePreviewPayload,
+  TrainSchedulePreviewResponse,
+  YardOption,
+} from '@/types/trainScheduling';
+
+interface BookingReferenceDataResponse {
+  yard?: YardOption[];
+}
+
+export const trainSchedulingService = {
+  getEligibleBookings: async (
+    filters?: TrainScheduleFilters,
+  ): Promise<EligibleContainerBookingsResponse> => {
+    const response = await client.get<EligibleContainerBookingsResponse>(
+      URL_CONSTANTS.TRAIN_SCHEDULING.ELIGIBLE_BOOKINGS,
+      { params: filters },
+    );
+    return unwrap(response.data);
+  },
+
+  preview: async (
+    payload: TrainSchedulePreviewPayload,
+  ): Promise<TrainSchedulePreviewResponse> => {
+    const response = await client.post<TrainSchedulePreviewResponse>(
+      URL_CONSTANTS.TRAIN_SCHEDULING.PREVIEW,
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
+  createSchedule: async (
+    payload: CreateTrainSchedulePayload,
+  ): Promise<TrainScheduleDetail> => {
+    const response = await client.post<TrainScheduleDetail>(
+      URL_CONSTANTS.TRAIN_SCHEDULING.SCHEDULES,
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
+  listSchedules: async (): Promise<TrainScheduleListItem[]> => {
+    const response = await client.get<TrainScheduleListItem[]>(
+      URL_CONSTANTS.TRAIN_SCHEDULING.SCHEDULES,
+    );
+    return unwrap(response.data);
+  },
+
+  getScheduleById: async (id: string): Promise<TrainScheduleDetail> => {
+    const response = await client.get<TrainScheduleDetail>(
+      URL_CONSTANTS.TRAIN_SCHEDULING.SCHEDULE_BY_ID(id),
+    );
+    return unwrap(response.data);
+  },
+
+  cancelSchedule: async (id: string): Promise<TrainScheduleDetail> => {
+    const response = await client.post<TrainScheduleDetail>(
+      URL_CONSTANTS.TRAIN_SCHEDULING.CANCEL_SCHEDULE(id),
+      {},
+    );
+    return unwrap(response.data);
+  },
+
+  getAvailableLocomotives: async (): Promise<LocomotiveRecord[]> => {
+    const response = await client.get<LocomotiveRecord[]>(URL_CONSTANTS.LOCOMOTIVES.BASE, {
+      params: { status: 'AVAILABLE' },
+    });
+    return unwrap(response.data);
+  },
+
+  getStations: async (): Promise<YardOption[]> => {
+    const response = await client.get<BookingReferenceDataResponse>(
+      URL_CONSTANTS.BOOKINGS.REFERENCE_DATA,
+    );
+    const data = unwrap(response.data);
+    return data.yard ?? [];
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/services/trains.service.ts b/apps/edr-freight-web/backoffice/src/services/trains.service.ts
new file mode 100644
index 000000000..c45d84887
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/services/trains.service.ts
@@ -0,0 +1,28 @@
+// import { apiClient } from '@/lib/axios';
+ import { api as apiClient } from "../auth/http";
+
+
+export interface Train {
+  id: string;
+  code: string;
+  capacityTons: number;
+  trainNumber?: string;
+  trainName?: string;
+  routeId?: string;
+  originStationId?: string;
+  destinationStationId?: string;
+  departureTime?: string;
+  arrivalTime?: string;
+  locomotiveNumber?: string;
+  status: string;
+  remarks?: string;
+}
+
+export const trainService = {
+  getAll: () => apiClient.get<Train[]>('/trains'),
+  getById: (id: string) => apiClient.get<Train>(`/trains/${id}`),
+  create: (data: Partial<Train>) => apiClient.post('/trains', data),
+  update: (id: string, data: Partial<Train>) => apiClient.patch(`/trains/${id}`, data),
+  delete: (id: string) => apiClient.delete(`/trains/${id}`),
+  getDetails: (id: string) => apiClient.get(`/trains/${id}/details`),
+};
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/services/wagon.service.ts b/apps/edr-freight-web/backoffice/src/services/wagon.service.ts
new file mode 100644
index 000000000..29125ced1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/services/wagon.service.ts
@@ -0,0 +1,26 @@
+import { api as apiClient } from "../auth/http";
+
+export interface Wagon {
+  id: string;
+  wagonNumber: string;
+  wagonTypeId: string;
+  trainId: string | null;
+  sequenceNumber: number | null;
+  tareWeight: number;
+  maxPayloadWeight: number;
+  status: string;
+  notes?: string;
+}
+
+export const wagonService = {
+  getAll: () => apiClient.get<Wagon[]>('/wagons'),
+  getByTrain: (trainId: string) => apiClient.get<Wagon[]>(`/wagons?trainId=${trainId}`),
+  assignToTrain: (wagonId: string, trainId: string, sequenceNumber?: number) =>
+    apiClient.post(`/wagons/${wagonId}/assign-train`, { trainId, sequenceNumber }),
+  unassign: (wagonId: string) => apiClient.post(`/wagons/${wagonId}/unassign-train`),
+  reorder: (trainId: string, wagonIds: string[]) =>
+    apiClient.post(`/trains/${trainId}/reorder-wagons`, { wagonIds }),
+    create: (data: Partial<Wagon>) => apiClient.post('/wagons', data),
+    update: (id: string, data: Partial<Wagon>) => apiClient.patch(`/wagons/${id}`, data),
+
+};
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/types/booking.ts b/apps/edr-freight-web/backoffice/src/types/booking.ts
new file mode 100644
index 000000000..0fea62c19
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/types/booking.ts
@@ -0,0 +1,147 @@
+/** Mirrors API BOOKING_STATUSES from edr-freight-api booking.entity */
+export const BOOKING_STATUSES = [
+  "DRAFT",
+  "SUBMITTED",
+  "CHANGES_REQUESTED",
+  "PENDING_APPROVAL",
+  "APPROVED_PENDING_SIGNATURE",
+  "APPROVED",
+  "CONTRACT_READY",
+  "SIGNED_CUSTOMER",
+  "FULLY_EXECUTED",
+  "PNR_GENERATED",
+  "PAYMENT_VERIFICATION_IN_PROGRESS",
+  "PAID",
+  "IN_TRANSIT",
+  "COMPLETED",
+  "REJECTED",
+  "CANCELLED",
+  "PENDING_CONSOLIDATION",
+  "CONSOLIDATED",
+] as const;
+
+export type BookingStatus = (typeof BOOKING_STATUSES)[number];
+
+export interface BookingNamedRef {
+  id: string;
+  name?: string;
+  code?: string;
+  label?: string;
+  companyName?: string;
+}
+
+export interface BookingContainerLine {
+  id: string;
+  containerTypeId: string;
+  quantity: number;
+  vgmPerUnitTons: number;
+  containerType?: {
+    id: string;
+    code?: string;
+    label?: string;
+    sizeFt?: number;
+    isReefer?: boolean;
+  };
+}
+
+export interface BookingApprovalStep {
+  id: string;
+  stepOrder: number;
+  requiredRole: string;
+  blocksRole?: string | null;
+  status: "PENDING" | "APPROVED" | "REJECTED" | "SKIPPED";
+  actionedAt?: string | null;
+  remarks?: string | null;
+}
+
+export interface BookingNextStep {
+  action: string;
+  description: string;
+  requiredRole?: string;
+}
+
+export interface InAppPaymentReceipt {
+  success: boolean;
+  provider: string;
+  providerRef: string;
+  amount: number;
+  currency: string;
+  paidAt: string;
+}
+
+export interface BookingReviewNote {
+  id: string;
+  note: string;
+  type: string;
+  createdAt: string;
+}
+
+export interface BookingFile {
+  id: string;
+  name: string;
+  mimeType?: string;
+  code?: string;
+}
+
+export interface BookingDetail {
+  id: string;
+  reference: string;
+  // customerId: string;
+  companyId: string;
+  status: BookingStatus;
+  scheduledDate: string;
+  totalAmount: number;
+  paymentStatus: string;
+  paymentCurrency: string;
+  contractType: string;
+  freightType: "CONTAINER" | "BULK";
+  tradeDirection: string;
+  cargoTotalWeightVgm: number;
+  isHazardous: boolean;
+  allowConsolidation: boolean;
+  priorityScore: number;
+  pnrCode?: string | null;
+  firstMilePickupAddress?: string | null;
+  lastMileDeliveryAddress?: string | null;
+  equipmentReturn?: string;
+  contractSummary?: string | null;
+  latestChangeRequestNote?: string | null;
+  nextStep?: BookingNextStep | null;
+  paymentReceipt?: InAppPaymentReceipt;
+  createdAt: string;
+  updatedAt: string;
+  // customer?: BookingNamedRef & { companyName?: string };
+  company?: BookingNamedRef;
+  originYard?: BookingNamedRef;
+  destinationYard?: BookingNamedRef;
+  serviceType?: BookingNamedRef & { code?: string };
+  cargoType?: BookingNamedRef;
+  shippingLine?: BookingNamedRef;
+  bookingContainers?: BookingContainerLine[];
+  approvalSteps?: BookingApprovalStep[];
+  reviewNotes?: BookingReviewNote[];
+  files?: BookingFile[];
+  cargoModifiers?: Array<{
+    id: string;
+    calculatedAmount: number;
+    triggerValue?: number | null;
+  }>;
+}
+
+export interface BookingListRow {
+  id: string;
+  reference: string;
+  customerLabel: string;
+  approvalSteps?: BookingApprovalStep[];
+  status: BookingStatus;
+  scheduledDate: string;
+  totalAmount: number;
+  paymentCurrency: string;
+  paymentStatus: string;
+  tradeDirection: string;
+  freightType: string;
+  originLabel: string;
+  destinationLabel: string;
+  priorityScore: number;
+  createdAt: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/types/rule-engine/index.ts b/apps/edr-freight-web/backoffice/src/types/rule-engine/index.ts
index 362b21a63..ceede6873 100644
--- a/apps/edr-freight-web/backoffice/src/types/rule-engine/index.ts
+++ b/apps/edr-freight-web/backoffice/src/types/rule-engine/index.ts
@@ -23,7 +23,3 @@ export interface RuleEngineListResult<T> {
 }
 
 export type RuleEngineRecord = Record<string, unknown> & { id: string };
-
-export interface ApproveRatePayload {
-  approvedByCeoId: string;
-}
diff --git a/apps/edr-freight-web/backoffice/src/types/trainScheduling.ts b/apps/edr-freight-web/backoffice/src/types/trainScheduling.ts
new file mode 100644
index 000000000..171500a93
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/types/trainScheduling.ts
@@ -0,0 +1,154 @@
+export interface YardOption {
+  id: string;
+  name: string;
+  code: string;
+  country?: string;
+}
+
+export interface EligibleContainerBooking {
+  id: string;
+  reference: string;
+  customer: string;
+  containerType: string;
+  quantity: number;
+  weightTons: number;
+  origin: string;
+  destination: string;
+  preferredDepartureDate: string;
+  status: string;
+}
+
+export interface EligibleContainerBookingsResponse {
+  count: number;
+  items: EligibleContainerBooking[];
+}
+
+export interface WagonPlanAllocation {
+  bookingId: string;
+  bookingReference: string;
+  allocatedWeightTons: number;
+}
+
+export interface WagonPlanRow {
+  sequenceNo: number;
+  capacityTons: number;
+  lengthMeters: number;
+  assignedWeightTons: number;
+  allocations: WagonPlanAllocation[];
+}
+
+export interface TrainSchedulePreviewResponse {
+  valid: boolean;
+  violations: string[];
+  summary: {
+    totalBookings: number;
+    totalWeightTons: number;
+    wagonType: string;
+    wagonsNeeded: number;
+    totalLengthMeters: number;
+  };
+  bookingIds: string[];
+  wagonPlan: WagonPlanRow[];
+}
+
+export interface LocomotiveRecord {
+  id: string;
+  code: string;
+  name?: string | null;
+  maxPullWeightTons: number;
+  status: 'AVAILABLE' | 'ASSIGNED' | 'MAINTENANCE' | 'INACTIVE';
+  availableFrom?: string | null;
+}
+
+export interface TrainScheduleListItem {
+  id: string;
+  scheduleDate: string;
+  origin: string | null;
+  destination: string | null;
+  locomotive:
+    | {
+        id: string;
+        code: string;
+        name?: string | null;
+      }
+    | null;
+  wagonCount: number;
+  totalWeightTons: number;
+  totalLengthMeters: number;
+  bookingsCount: number;
+  status: string;
+}
+
+export interface TrainScheduleDetail {
+  id: string;
+  status: string;
+  scheduledDepartureDate: string;
+  scheduledArrivalDate?: string | null;
+  originStation?: {
+    id: string;
+    label?: string;
+    code?: string;
+  } | null;
+  destinationStation?: {
+    id: string;
+    label?: string;
+    code?: string;
+  } | null;
+  trainSet?: {
+    id: string;
+    status: string;
+    wagonCount: number;
+    totalWeightTons: number;
+    totalLengthMeters: number;
+    locomotive?: {
+      id: string;
+      code: string;
+      name?: string | null;
+      status: string;
+      maxPullWeightTons: number;
+    } | null;
+    wagons: Array<{
+      id: string;
+      sequenceNo: number;
+      capacityTons: number;
+      lengthMeters: number;
+      assignedWeightTons: number;
+      wagonType?: {
+        id: string;
+        code: string;
+        name: string;
+      } | null;
+      allocations: Array<{
+        id: string;
+        bookingId: string;
+        bookingReference: string | null;
+        allocatedWeightTons: number;
+      }>;
+    }>;
+  } | null;
+  bookings: Array<{
+    id: string;
+    reference: string | null;
+    customer: string | null;
+    weightTons: number;
+    status: string | null;
+  }>;
+}
+
+export interface TrainScheduleFilters {
+  originStationId?: string;
+  destinationStationId?: string;
+  scheduleDate?: string;
+  status?: string;
+}
+
+export interface TrainSchedulePreviewPayload {
+  bookingIds: string[];
+  scheduleDate: string;
+  originStationId: string;
+  destinationStationId: string;
+}
+
+export interface CreateTrainSchedulePayload extends TrainSchedulePreviewPayload {
+  locomotiveId: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/utils/endpoint.ts b/apps/edr-freight-web/backoffice/src/utils/endpoint.ts
index 0ed1848d7..4a4af69d6 100644
--- a/apps/edr-freight-web/backoffice/src/utils/endpoint.ts
+++ b/apps/edr-freight-web/backoffice/src/utils/endpoint.ts
@@ -44,11 +44,16 @@ export function endpoint<TInput, TResponse>(
   service: string,
   action: string,
   execute: (input: TInput) => Promise<TResponse>,
+  queryKeyBuilder?: (input: TInput) => readonly unknown[],
 ) {
-  const buildKey = (input?: TInput): readonly unknown[] =>
-    input === undefined
+  const buildKey = (input?: TInput): readonly unknown[] => {
+    if (queryKeyBuilder && input !== undefined) {
+      return queryKeyBuilder(input as TInput);
+    }
+    return input === undefined
       ? [service, action]
       : [service, action, input];
+  };
 
   const call = (input: TInput) => execute(input);
 
@@ -116,4 +121,4 @@ export function unwrap<T>(response: { data: T } | T): T {
   }
 
   return response as T;
-}
\ No newline at end of file
+}
diff --git a/apps/edr-freight-web/backoffice/src/utils/queryInvalidation.ts b/apps/edr-freight-web/backoffice/src/utils/queryInvalidation.ts
new file mode 100644
index 000000000..bead8a8a0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/utils/queryInvalidation.ts
@@ -0,0 +1,56 @@
+import type { QueryClient } from "@tanstack/react-query";
+
+import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
+import type {
+  RuleEngineListResult,
+  RuleEngineRecord,
+  RuleEngineResourceSlug,
+} from "@/types/rule-engine";
+
+export function invalidateBookings(qc: QueryClient): Promise<void> {
+  return qc.invalidateQueries({ queryKey: QUERY_KEYS.BOOKINGS.ROOT });
+}
+
+export function invalidateBookingDetail(
+  qc: QueryClient,
+  id: string,
+): Promise<void> {
+  return Promise.all([
+    qc.invalidateQueries({ queryKey: QUERY_KEYS.BOOKINGS.byId(id) }),
+    invalidateBookings(qc),
+  ]).then(() => undefined);
+}
+
+/** Update a single row in all cached list queries for a rule-engine resource. */
+export function patchRuleEngineListRecord(
+  qc: QueryClient,
+  resource: RuleEngineResourceSlug | string,
+  updated: RuleEngineRecord,
+): void {
+  const updatedId = String(updated.id);
+  qc.setQueriesData<RuleEngineListResult<RuleEngineRecord>>(
+    { queryKey: ["rule-engine", "list", resource] },
+    (old) => {
+      if (!old?.data?.length) return old;
+      const index = old.data.findIndex((row) => String(row.id) === updatedId);
+      if (index === -1) return old;
+      const data = old.data.slice();
+      data[index] = { ...data[index], ...updated };
+      return { ...old, data };
+    },
+  );
+}
+
+/** Invalidate and refetch active rule-engine list queries for a resource. */
+export async function invalidateRuleEngineList(
+  qc: QueryClient,
+  resource: RuleEngineResourceSlug | string,
+): Promise<void> {
+  const queryKey = ["rule-engine", "list", resource] as const;
+  await qc.invalidateQueries({ queryKey });
+  await qc.refetchQueries({ queryKey, type: "active" });
+}
+
+export function invalidateRuleEngineRoot(qc: QueryClient): Promise<void> {
+  return qc.invalidateQueries({ queryKey: QUERY_KEYS.RULE_ENGINE.ROOT });
+}
diff --git a/apps/edr-freight-web/portal/package.json b/apps/edr-freight-web/portal/package.json
index 9afc896f7..b9b33d35d 100644
--- a/apps/edr-freight-web/portal/package.json
+++ b/apps/edr-freight-web/portal/package.json
@@ -20,11 +20,13 @@
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
     "lucide-react": "^1.14.0",
     "radix-ui": "^1.4.3",
     "react": "19.2.6",
     "react-dom": "19.2.6",
     "react-hook-form": "^7.76.0",
+    "react-hot-toast": "^2.6.0",
     "react-router-dom": "^6.27.0",
     "recharts": "^3.8.1",
     "tailwind-merge": "^3.6.0",
diff --git a/apps/edr-freight-web/portal/src/App.tsx b/apps/edr-freight-web/portal/src/App.tsx
index 1187422f8..147668d91 100644
--- a/apps/edr-freight-web/portal/src/App.tsx
+++ b/apps/edr-freight-web/portal/src/App.tsx
@@ -14,11 +14,13 @@ import {
   Home,
   Loader2,
   User,
+  Settings,
 } from "lucide-react";
 
 import useAuth from "./hooks/useAuth";
 
 import ProfilePage from "./pages/ProfilePage";
+import SettingsPage from "./pages/SettingsPage";
 import MyPortalPage from "./pages/MyPortalPage";
 import EDRFreightLandingPage from "./pages/EDRFreightLandingPage";
 import SignupPage from "./pages/accounts/SignupPage";
@@ -27,6 +29,7 @@ import VerificationOtpPage from "./pages/accounts/VerificationOtpPage";
 import SetPasswordPage from "./pages/accounts/SetPasswordPage";
 import LoginPage from "./pages/accounts/LoginPage";
 import MyBookings from "./pages/bookings/MyBookings";
+import BookingContractPage from "./pages/bookings/BookingContractPage";
 import BookingDetailPage from "./pages/bookings/BookingDetailPage";
 import NewBookingPage from "./pages/bookings/NewBookingPage";
 import TrackingPage from "./pages/tracking/TrackingPage";
@@ -39,12 +42,14 @@ const sidebarItems: SidebarItem[] = [
   { label: "Tracking", href: "/tracking", icon: <MapPin /> },
   { label: "Billing", href: "/billing", icon: <Receipt /> },
   { label: "Profile", href: "/profile", icon: <User /> },
+  { label: "Settings", href: "/settings", icon: <Settings /> },
 ];
 
 const App = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { user, isPending, logout, customer, customerQuery } = useAuth();
+
   useEffect(() => {
     if (isPending) return;
     const isInProtectedRoutes = sidebarItems.find((item) =>
@@ -102,9 +107,11 @@ const App = () => {
         <Route path="/bookings" element={<MyBookings />} />
         <Route path="/bookings/new" element={<NewBookingPage />} />
         <Route path="/bookings/:id" element={<BookingDetailPage />} />
+        <Route path="/bookings/:id/contract" element={<BookingContractPage />} />
         <Route path="/tracking" element={<TrackingPage />} />
         <Route path="/billing" element={<BillingPage />} />
         <Route path="/profile" element={<ProfilePage />} />
+        <Route path="/settings" element={<SettingsPage />} />
       </Route>
       <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
diff --git a/apps/edr-freight-web/portal/src/components/bookings/ContractSignaturePad.tsx b/apps/edr-freight-web/portal/src/components/bookings/ContractSignaturePad.tsx
new file mode 100644
index 000000000..aacf47858
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/components/bookings/ContractSignaturePad.tsx
@@ -0,0 +1,105 @@
+import { useEffect, useRef, useState } from "react";
+import { Eraser } from "lucide-react";
+
+import { Button } from "@edr/ui-common";
+import { cn } from "@/lib/utils";
+
+interface ContractSignaturePadProps {
+  onChange: (dataUrl: string | null) => void;
+  className?: string;
+}
+
+export function ContractSignaturePad({
+  onChange,
+  className,
+}: ContractSignaturePadProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const drawing = useRef(false);
+  const [empty, setEmpty] = useState(true);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const dpr = window.devicePixelRatio || 1;
+    const w = canvas.offsetWidth;
+    const h = canvas.offsetHeight;
+    canvas.width = w * dpr;
+    canvas.height = h * dpr;
+    ctx.scale(dpr, dpr);
+    ctx.strokeStyle = "#111";
+    ctx.lineWidth = 2;
+    ctx.lineCap = "round";
+  }, []);
+
+  const getPos = (e: React.MouseEvent | React.TouchEvent) => {
+    const canvas = canvasRef.current!;
+    const rect = canvas.getBoundingClientRect();
+    if ("touches" in e) {
+      const t = e.touches[0];
+      return { x: t.clientX - rect.left, y: t.clientY - rect.top };
+    }
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+  };
+
+  const start = (e: React.MouseEvent | React.TouchEvent) => {
+    drawing.current = true;
+    const ctx = canvasRef.current?.getContext("2d");
+    const { x, y } = getPos(e);
+    ctx?.beginPath();
+    ctx?.moveTo(x, y);
+  };
+
+  const move = (e: React.MouseEvent | React.TouchEvent) => {
+    if (!drawing.current) return;
+    const ctx = canvasRef.current?.getContext("2d");
+    const { x, y } = getPos(e);
+    ctx?.lineTo(x, y);
+    ctx?.stroke();
+    setEmpty(false);
+    onChange(canvasRef.current?.toDataURL("image/png") ?? null);
+  };
+
+  const end = () => {
+    drawing.current = false;
+  };
+
+  const clear = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    setEmpty(true);
+    onChange(null);
+  };
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      <div className="overflow-hidden rounded-lg border-2 border-dashed border-border bg-white">
+        <canvas
+          ref={canvasRef}
+          className="h-36 w-full touch-none cursor-crosshair"
+          onMouseDown={start}
+          onMouseMove={move}
+          onMouseUp={end}
+          onMouseLeave={end}
+          onTouchStart={start}
+          onTouchMove={move}
+          onTouchEnd={end}
+        />
+      </div>
+      <div className="flex items-center justify-between">
+        <p className="text-xs text-muted-foreground">Draw your signature above</p>
+        <Button type="button" variant="ghost" size="sm" className="gap-1" onClick={clear}>
+          <Eraser className="size-3.5" />
+          Clear
+        </Button>
+      </div>
+      {empty && (
+        <p className="text-xs text-amber-700">Signature is required before confirming.</p>
+      )}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/portal/src/components/ui/badge.tsx b/apps/edr-freight-web/portal/src/components/ui/badge.tsx
new file mode 100644
index 000000000..0512e9936
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/components/ui/badge.tsx
@@ -0,0 +1,47 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/apps/edr-freight-web/portal/src/components/ui/index.ts b/apps/edr-freight-web/portal/src/components/ui/index.ts
new file mode 100644
index 000000000..21dcac6e4
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/components/ui/index.ts
@@ -0,0 +1,8 @@
+export * from './table';
+export * from './badge';
+export * from './button';
+export * from './dialog';
+export * from './input';
+export * from './label';
+export * from './textarea';
+export * from './Breadcrumbs';
diff --git a/apps/edr-freight-web/portal/src/components/ui/table.tsx b/apps/edr-freight-web/portal/src/components/ui/table.tsx
new file mode 100644
index 000000000..128912911
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/components/ui/table.tsx
@@ -0,0 +1,114 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b outline-ring/50", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors bg-background hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 bg-muted first-of-type:pl-4 last-of-type:pr-4 first-of-type: p-2 py-4 text-left align-middle font-medium whitespace-nowrap text-secondary-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle first-of-type:pl-4 last-of-type:pr-4 whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
diff --git a/apps/edr-freight-web/portal/src/constants/URLS.ts b/apps/edr-freight-web/portal/src/constants/URLS.ts
index a9ce8fc00..b2dd0f254 100644
--- a/apps/edr-freight-web/portal/src/constants/URLS.ts
+++ b/apps/edr-freight-web/portal/src/constants/URLS.ts
@@ -82,11 +82,17 @@ export const URL_CONSTANTS = {
   COMPANIES_API: {
     GET_INFO: "/api/companies/getInfo",
     CREATE: "/api/companies/create",
+    PROFILE: "/api/companies/profile",
+    DOCUMENTS: (id: string) => `/api/companies/${id}/documents`,
   },
 
   BOOKINGS: {
     BASE: "/bookings",
     BY_ID: (id: string | number) => `/bookings/${id}`,
+    CONTRACT_VIEW: (id: string) => `/bookings/${id}/contract/view`,
+    CONTRACT_DOCUMENT: (id: string) => `/bookings/${id}/contract/document`,
+    CONTRACT_SIGN: (id: string) => `/bookings/${id}/contract/sign`,
+    CONTRACT_DOWNLOAD: (id: string) => `/bookings/${id}/contract`,
     CANCEL: (id: string | number) => `/bookings/${id}/cancel`,
     CONFIRM: (id: string | number) => `/bookings/${id}/confirm`,
   },
diff --git a/apps/edr-freight-web/portal/src/hooks/useAuth.ts b/apps/edr-freight-web/portal/src/hooks/useAuth.ts
index 8d58d3ada..7f4c02585 100644
--- a/apps/edr-freight-web/portal/src/hooks/useAuth.ts
+++ b/apps/edr-freight-web/portal/src/hooks/useAuth.ts
@@ -29,7 +29,6 @@ const useAuth = () => {
 
   const authQuery = useQuery(
     api.auth.getMyInfo.queryOptions({
-      enabled: !!getCookie("auth-token"),
       retry: false,
       staleTime: 10 * 60 * 1000,
     }),
diff --git a/apps/edr-freight-web/portal/src/pages/MyPortalPage.tsx b/apps/edr-freight-web/portal/src/pages/MyPortalPage.tsx
index 440617f3e..b6b17e71f 100644
--- a/apps/edr-freight-web/portal/src/pages/MyPortalPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/MyPortalPage.tsx
@@ -1,5 +1,7 @@
-import { useMemo } from "react";
-import { Link } from "react-router-dom";
+import { useMemo, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { format } from "date-fns";
+import { useQuery } from "@tanstack/react-query";
 import {
   ArrowRight,
   Building2,
@@ -7,6 +9,7 @@ import {
   Clock,
   DollarSign,
   Eye,
+  LoaderCircle,
   Mail,
   MapPin,
   Package,
@@ -14,18 +17,18 @@ import {
   Plus,
   Receipt,
   Truck,
+  UploadCloud,
+  X,
 } from "lucide-react";
 
 import {
   getCurrentCustomer,
-  getMyBookings,
   getMyInvoices,
   getMyShipments,
 } from "@/lib/currentCustomer";
 import { formatCurrency } from "@/pages/billing/invoices.mock";
 import type { ShipmentStatus } from "@/pages/tracking/shipments.mock";
 import type { InvoiceStatus } from "@/pages/billing/invoices.mock";
-import type { BookingStatus } from "@/pages/bookings/bookings.mock";
 import {
   Button,
   Card,
@@ -34,20 +37,41 @@ import {
   CardTitle,
   CardDescription,
 } from "@edr/ui-common";
+import { api } from "@/services/api";
+
+const ACTIVE_STATUSES = [
+  "DRAFT",
+  "SUBMITTED",
+  "PENDING_APPROVAL",
+  "IN_TRANSIT",
+];
 
 export default function MyPortalPage() {
   const me = useMemo(() => getCurrentCustomer(), []);
-  const myBookings = useMemo(() => getMyBookings(), []);
   const myShipments = useMemo(() => getMyShipments(), []);
   const myInvoices = useMemo(() => getMyInvoices(), []);
 
-  const activeBookings = myBookings.filter(
-    (b) => b.status === "Confirmed" || b.status === "In Transit",
+  const navigate = useNavigate();
+
+  const bookingsQuery = useQuery(
+    api.bookings.list.queryOptions({
+      input: { sortBy: "createdAt", sortOrder: "DESC" },
+    }),
   );
+
+  const myBookings = useMemo(
+    () =>
+      (bookingsQuery.data?.items ?? []).filter((b) =>
+        ACTIVE_STATUSES.includes(b.status),
+      ),
+    [bookingsQuery.data],
+  );
+
   const activeShipments = myShipments.filter((s) => s.status === "In Transit");
   const outstandingInvoices = myInvoices.filter(
     (inv) => inv.status === "Sent" || inv.status === "Overdue",
   );
+  const [dismissed, setDismissed] = useState(false);
   const totalOutstanding = outstandingInvoices
     .filter((inv) => inv.currency === "USD")
     .reduce((sum, inv) => sum + inv.amount, 0);
@@ -55,12 +79,40 @@ export default function MyPortalPage() {
     .filter((inv) => inv.status === "Paid" && inv.currency === "USD")
     .reduce((sum, inv) => sum + inv.amount, 0);
 
-  const recentBookings = [...myBookings].slice(0, 5);
+  const recentBookings = myBookings.slice(0, 5);
   const recentInvoices = [...myInvoices].slice(0, 4);
 
   return (
     <div className="min-h-screen bg-background p-6">
       <div className="mx-auto max-w-7xl space-y-6">
+        {/* Documents banner */}
+        {!me.documentsComplete && !dismissed && (
+          <div className="flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">
+            <UploadCloud className="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
+            <div className="flex-1">
+              <p className="font-semibold">Upload your documents</p>
+              <p className="mt-0.5 text-amber-700">
+                To enable all account features, please upload your Business
+                License, TIN Certificate, and National ID / Passport.
+              </p>
+              <Link
+                to="/settings?tab=documents"
+                className="mt-2 inline-flex items-center gap-1 font-medium text-amber-900 underline underline-offset-2 transition hover:text-amber-700"
+              >
+                Upload now
+              </Link>
+            </div>
+            <button
+              type="button"
+              onClick={() => setDismissed(true)}
+              className="shrink-0 rounded-lg p-1 text-amber-400 transition hover:bg-amber-100 hover:text-amber-600"
+              aria-label="Dismiss"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+        )}
+
         {/* Welcome banner */}
         <div className="overflow-hidden rounded-3xl bg-gradient-to-r from-[#059669] to-[#10B981] p-6 text-white shadow-sm">
           <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
@@ -86,7 +138,7 @@ export default function MyPortalPage() {
               <Link to="/bookings/new">
                 <Button
                   variant="secondary"
-                  className="bg-white text-[#10B981] hover:bg-slate-100"
+                  className="bg-white text-[#10B981] hover:bg-muted"
                 >
                   <Plus className="h-4 w-4" />
                   New Booking
@@ -125,7 +177,7 @@ export default function MyPortalPage() {
 
           <CardContent>
             {activeShipments.length === 0 ? (
-              <p className="rounded-2xl border border-dashed border-slate-200 p-8 text-center text-sm text-slate-500">
+              <p className="rounded-2xl border border-dashed border-border p-8 text-center text-sm text-muted-foreground">
                 No shipments currently in transit.
               </p>
             ) : (
@@ -133,27 +185,27 @@ export default function MyPortalPage() {
                 {activeShipments.slice(0, 4).map((shipment) => (
                   <div
                     key={shipment.id}
-                    className="rounded-2xl border border-slate-100 p-4 transition hover:border-primary/20 hover:bg-primary/5"
+                    className="rounded-2xl border border-border p-4 transition hover:border-primary/20 hover:bg-primary/5"
                   >
                     <div className="flex items-center justify-between">
-                      <span className="font-semibold text-slate-900">
+                      <span className="font-semibold text-foreground">
                         {shipment.reference}
                       </span>
                       <ShipmentBadge status={shipment.status} />
                     </div>
-                    <p className="mt-1 text-sm text-slate-700">
+                    <p className="mt-1 text-sm text-muted-foreground">
                       {shipment.originStation}
                       <ArrowRight className="mx-2 inline h-3 w-3 text-slate-400" />
                       {shipment.destinationStation}
                     </p>
-                    <div className="mt-3 flex items-center justify-between text-xs text-slate-500">
+                    <div className="mt-3 flex items-center justify-between text-xs text-muted-foreground">
                       <span className="flex items-center gap-1">
                         <MapPin className="h-3 w-3 text-primary" />
                         {shipment.currentLocation}
                       </span>
                       <span>ETA {shipment.eta}</span>
                     </div>
-                    <div className="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
+                    <div className="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-muted">
                       <div
                         className="h-full rounded-full bg-primary transition-all"
                         style={{ width: `${shipment.progress}%` }}
@@ -184,50 +236,43 @@ export default function MyPortalPage() {
 
           <CardContent className="px-0">
             {recentBookings.length === 0 ? (
-              <p className="rounded-2xl border border-dashed border-slate-200 p-8 text-center text-sm text-slate-500">
+              <p className="rounded-2xl border border-dashed border-border p-8 text-center text-sm text-muted-foreground">
                 You haven't booked any freight yet.
               </p>
             ) : (
               <div className="overflow-x-auto">
                 <table className="w-full min-w-[600px] whitespace-nowrap text-left text-sm">
-                  <thead className="text-xs text-slate-500">
+                  <thead className="text-xs text-muted-foreground">
                     <tr>
                       <th className="px-6 py-2 font-medium">Reference</th>
                       <th className="py-2 font-medium">Route</th>
                       <th className="py-2 font-medium">Cargo</th>
+                      <th className="py-2 font-medium">Date</th>
                       <th className="py-2 font-medium">Status</th>
-                      <th className="px-6 py-2 text-right font-medium">
-                        Action
-                      </th>
                     </tr>
                   </thead>
                   <tbody>
                     {recentBookings.map((booking) => (
                       <tr
                         key={booking.id}
-                        className="border-t border-slate-100 transition hover:bg-primary/5"
+                        className="border-t border-border transition hover:bg-primary/5 cursor-pointer"
+                        onClick={() => navigate(`/bookings/${booking.id}`)}
                       >
-                        <td className="px-6 py-3 font-medium text-slate-900">
+                        <td className="px-6 py-3 font-medium text-foreground">
                           {booking.reference}
                         </td>
-                        <td className="py-3 text-slate-700">
-                          {booking.originStation} → {booking.destinationStation}
+                        <td className="py-3 text-muted-foreground">
+                          {booking.originYard?.label ?? booking.originYard?.code ?? "—"} → {booking.destinationYard?.label ?? booking.destinationYard?.code ?? "—"}
                         </td>
-                        <td className="py-3 text-slate-700">
-                          {booking.cargoType}
+                        <td className="py-3 text-muted-foreground">
+                          {booking.freightType === "CONTAINER" ? "Container" : booking.freightType}
+                        </td>
+                        <td className="py-3 text-muted-foreground">
+                          {format(new Date(booking.createdAt), "MMM d, yyyy HH:mm")}
                         </td>
                         <td className="py-3">
                           <BookingBadge status={booking.status} />
                         </td>
-                        <td className="px-6 py-3 text-right">
-                          <Link
-                            to={`/bookings/${booking.id}`}
-                            aria-label="View booking"
-                            className="inline-flex h-7 w-7 items-center justify-center rounded-lg text-slate-500 transition hover:bg-primary/10 hover:text-primary"
-                          >
-                            <Eye className="h-4 w-4" />
-                          </Link>
-                        </td>
                       </tr>
                     ))}
                   </tbody>
@@ -258,7 +303,7 @@ export default function MyPortalPage() {
 
           <CardContent>
             {recentInvoices.length === 0 ? (
-              <p className="rounded-2xl border border-dashed border-slate-200 p-8 text-center text-sm text-slate-500">
+              <p className="rounded-2xl border border-dashed border-border p-8 text-center text-sm text-muted-foreground">
                 No invoices yet.
               </p>
             ) : (
@@ -266,16 +311,16 @@ export default function MyPortalPage() {
                 {recentInvoices.map((invoice) => (
                   <div
                     key={invoice.id}
-                    className="rounded-2xl border border-slate-100 p-4 transition hover:border-primary/20 hover:bg-primary/5"
+                    className="rounded-2xl border border-border p-4 transition hover:border-primary/20 hover:bg-primary/5"
                   >
                     <div className="flex items-center justify-between">
                       <Receipt className="h-4 w-4 text-primary" />
                       <InvoiceBadge status={invoice.status} />
                     </div>
-                    <p className="mt-0.5 pt-2 text-lg font-bold text-slate-900">
+                    <p className="mt-0.5 pt-2 text-lg font-bold text-foreground">
                       {formatCurrency(invoice.amount, invoice.currency)}
                     </p>
-                    <p className="mt-1 flex items-center gap-1 text-xs text-slate-500">
+                    <p className="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
                       <Clock className="h-3 w-3" />
                       Due {invoice.dueDate}
                     </p>
@@ -303,8 +348,8 @@ function ProfileRow({
     <div className="flex items-start gap-3">
       <div className="mt-0.5 text-primary">{icon}</div>
       <div className="flex-1">
-        <p className="text-xs font-medium text-slate-500">{label}</p>
-        <p className="mt-0.5 text-sm text-slate-900">{value}</p>
+        <p className="text-xs font-medium text-muted-foreground">{label}</p>
+        <p className="mt-0.5 text-sm text-foreground">{value}</p>
       </div>
     </div>
   );
@@ -312,9 +357,9 @@ function ProfileRow({
 
 function ShipmentBadge({ status }: { status: ShipmentStatus }) {
   const styles: Record<ShipmentStatus, string> = {
-    "In Transit": "bg-indigo-100 text-indigo-700",
-    Delivered: "bg-emerald-100 text-emerald-700",
-    Delayed: "bg-red-100 text-red-700",
+    "In Transit": "bg-muted text-foreground",
+    Delivered: "bg-primary/10 text-primary",
+    Delayed: "bg-destructive/10 text-destructive",
   };
   return (
     <span
@@ -325,29 +370,31 @@ function ShipmentBadge({ status }: { status: ShipmentStatus }) {
   );
 }
 
-function BookingBadge({ status }: { status: BookingStatus }) {
-  const styles: Record<BookingStatus, string> = {
-    Pending: "bg-amber-100 text-amber-700",
-    Confirmed: "bg-sky-100 text-sky-700",
-    "In Transit": "bg-indigo-100 text-indigo-700",
-    Delivered: "bg-emerald-100 text-emerald-700",
-    Cancelled: "bg-red-100 text-red-700",
+function BookingBadge({ status }: { status: string }) {
+  const styles: Record<string, string> = {
+    DRAFT: "bg-amber-100 text-amber-700",
+    SUBMITTED: "bg-primary/10 text-primary",
+    PENDING_APPROVAL: "bg-muted text-foreground",
+    IN_TRANSIT: "bg-muted text-foreground",
+    COMPLETED: "bg-primary/10 text-primary",
+    CANCELLED: "bg-destructive/10 text-destructive",
+    REJECTED: "bg-destructive/10 text-destructive",
   };
   return (
     <span
-      className={`inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium ${styles[status]}`}
+      className={`inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium ${styles[status] || "bg-muted text-muted-foreground"}`}
     >
-      {status}
+      {status.replace(/_/g, " ")}
     </span>
   );
 }
 
 function InvoiceBadge({ status }: { status: InvoiceStatus }) {
   const styles: Record<InvoiceStatus, string> = {
-    Draft: "bg-slate-100 text-slate-600",
-    Sent: "bg-sky-100 text-sky-700",
-    Paid: "bg-emerald-100 text-emerald-700",
-    Overdue: "bg-red-100 text-red-700",
+    Draft: "bg-muted text-muted-foreground",
+    Sent: "bg-primary/10 text-primary",
+    Paid: "bg-primary/10 text-primary",
+    Overdue: "bg-destructive/10 text-destructive",
     Cancelled: "bg-amber-100 text-amber-700",
   };
   return (
diff --git a/apps/edr-freight-web/portal/src/pages/ProfilePage.tsx b/apps/edr-freight-web/portal/src/pages/ProfilePage.tsx
index e0d364bc1..9c4354723 100644
--- a/apps/edr-freight-web/portal/src/pages/ProfilePage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/ProfilePage.tsx
@@ -1,135 +1,46 @@
-import { useMemo } from "react";
-import {
-  User,
-  Building2,
-  Phone,
-  Mail,
-  MapPin,
-  ShieldCheck,
-  Briefcase,
-  UserCheck,
-  Building,
-  Globe,
-  Fingerprint,
-  FileCheck,
-  Settings2,
-  ExternalLink,
-} from "lucide-react";
-import useAuth from "@/hooks/useAuth";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardAction,
-  Badge,
-  Separator,
-  SmartFileInput,
-  Button,
-} from "@edr/ui-common";
-import type { IFileUploadSetting } from "@edr/types/freight";
-import { cn } from "@/lib/utils";
+import { User, Building2, Phone, Mail, MapPin, ShieldCheck, Briefcase, UserCheck, Fingerprint, FileCheck, Globe, Building } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "@/services/api";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, Badge, Separator } from "@edr/ui-common";
+
+function InfoItem({ icon, label, value }: { icon?: React.ReactNode; label: string; value?: string | null }) {
+  return (
+    <div className="flex items-start gap-3">
+      {icon && <div className="mt-1 text-muted-foreground [&_svg]:size-4">{icon}</div>}
+      <div className="flex flex-col gap-0.5">
+        <p className="text-[10px] font-bold uppercase tracking-tight text-muted-foreground">{label}</p>
+        <p className="text-sm font-bold text-foreground">{value || "—"}</p>
+      </div>
+    </div>
+  );
+}
 
 export default function ProfilePage() {
-  const { user, customer, isPending } = useAuth();
-
-  const documentSettings = useMemo<IFileUploadSetting>(() => ({
-    id: "profile-docs",
-    code: "customer_documents",
-    label: "Customer Documents",
-    entity: "customer",
-    createdAt: new Date(),
-    updatedAt: new Date(),
-    fields: [
-      {
-        id: "doc-tin",
-        settingId: "profile-docs",
-        fileKey: "tin_certificate",
-        fileLabel: "TIN Certificate",
-        isRequired: true,
-        isMultiple: false,
-        maxFiles: 1,
-        allowedExtensions: [".pdf", ".jpg", ".jpeg", ".png"],
-        maxSizeMb: 5,
-        order: 1,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      },
-      {
-        id: "doc-license",
-        settingId: "profile-docs",
-        fileKey: "business_license",
-        fileLabel: "Business/Investment License",
-        isRequired: true,
-        isMultiple: false,
-        maxFiles: 1,
-        allowedExtensions: [".pdf", ".jpg", ".jpeg", ".png"],
-        maxSizeMb: 5,
-        order: 2,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      },
-      {
-        id: "doc-reg",
-        settingId: "profile-docs",
-        fileKey: "registration_certificate",
-        fileLabel: "Business Registration Certificate",
-        isRequired: true,
-        isMultiple: false,
-        maxFiles: 1,
-        allowedExtensions: [".pdf", ".jpg", ".jpeg", ".png"],
-        maxSizeMb: 5,
-        order: 3,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      },
-      {
-        id: "doc-id",
-        settingId: "profile-docs",
-        fileKey: "national_id",
-        fileLabel: "National ID",
-        isRequired: true,
-        isMultiple: false,
-        maxFiles: 1,
-        allowedExtensions: [".pdf", ".jpg", ".jpeg", ".png"],
-        maxSizeMb: 5,
-        order: 4,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      },
-      {
-        id: "doc-poa",
-        settingId: "profile-docs",
-        fileKey: "power_of_attorney",
-        fileLabel: "Power of Attorney",
-        isRequired: false,
-        isMultiple: false,
-        maxFiles: 1,
-        allowedExtensions: [".pdf", ".jpg", ".jpeg", ".png"],
-        maxSizeMb: 5,
-        order: 5,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      },
-    ],
-  }), []);
+  const { data: profile, isPending } = useQuery(
+    api.companies.getProfile.queryOptions(),
+  );
 
   if (isPending) {
     return (
       <div className="flex h-full items-center justify-center">
-        <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-primary"></div>
+        <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-primary" />
       </div>
     );
   }
 
-  const displayName = user?.name?.en || user?.username || user?.email || "User";
+  if (!profile) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-muted-foreground">No company profile found.</p>
+      </div>
+    );
+  }
 
   return (
-    <div className="container mx-auto max-w-7xl px-4 py-8">
-      <div className="flex flex-col gap-8">
-        {/* Header Section */}
-        <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+    <div className="px-4 py-8">
+      <div className="mx-auto max-w-7xl">
+        <div className="flex flex-col gap-8">
+          {/* Header */}
           <div className="flex items-center gap-6">
             <div className="flex size-24 items-center justify-center rounded-2xl bg-primary/10 text-primary shadow-inner">
               <User className="size-12" />
@@ -137,7 +48,7 @@ export default function ProfilePage() {
             <div className="flex flex-col gap-1">
               <div className="flex items-center gap-3">
                 <h1 className="text-3xl font-black tracking-tight text-foreground">
-                  {displayName}
+                  {profile.companyName}
                 </h1>
                 <Badge variant="secondary" className="font-bold uppercase tracking-wider">
                   Verified
@@ -145,182 +56,129 @@ export default function ProfilePage() {
               </div>
               <p className="flex items-center gap-2 font-medium text-muted-foreground">
                 <Building className="size-4" />
-                {customer?.companyName || "No Company Linked"}
+                {profile.companyName}
               </p>
             </div>
           </div>
-          <div className="flex items-center gap-3">
-             <Button variant="outline">
-               <Settings2 data-icon="inline-start" />
-               Account Settings
-             </Button>
-          </div>
-        </div>
 
-        <Separator />
+          <Separator />
 
-        <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
-          {/* Left Column - Personal & Company Info */}
-          <div className="flex flex-col gap-8 lg:col-span-2">
-            <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-              {/* Personal Details Card */}
+          <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+            {/* Left Column */}
+            <div className="flex flex-col gap-8 lg:col-span-2">
+              <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+                {/* Company Details */}
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      <Building2 className="size-5 text-primary" />
+                      Company Details
+                    </CardTitle>
+                    <CardDescription>Business registration information</CardDescription>
+                  </CardHeader>
+                  <CardContent className="flex flex-col gap-4">
+                    <InfoItem icon={<Globe />} label="Location" value={profile.companyLocation} />
+                    <InfoItem icon={<MapPin />} label="Address" value={profile.companyAddress} />
+                    <InfoItem icon={<FileCheck />} label="TIN Number" value={profile.tinNumber} />
+                    <InfoItem icon={<ShieldCheck />} label="FAN Number" value={profile.fanNumber} />
+                    <InfoItem icon={<Mail />} label="Email" value={profile.companyEmail} />
+                    <InfoItem icon={<Phone />} label="Phone" value={profile.companyPhone} />
+                  </CardContent>
+                </Card>
+
+                {/* Personal Details (from ExternalProfile) */}
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      <Fingerprint className="size-5 text-primary" />
+                      Profile Details
+                    </CardTitle>
+                    <CardDescription>Your linked user profile</CardDescription>
+                  </CardHeader>
+                  <CardContent className="flex flex-col gap-4">
+                    <InfoItem icon={<User />} label="Profile" value="Primary Contact" />
+                  </CardContent>
+                </Card>
+              </div>
+
+              {/* Personnel Card */}
               <Card>
                 <CardHeader>
                   <CardTitle className="flex items-center gap-2">
-                    <Fingerprint className="size-5 text-primary" />
-                    Personal Details
+                    <Briefcase className="size-5 text-primary" />
+                    Key Personnel
                   </CardTitle>
-                  <CardDescription>Your account contact information</CardDescription>
-                  <CardAction>
-                    <Button variant="ghost" size="icon">
-                      <ExternalLink />
-                    </Button>
-                  </CardAction>
+                  <CardDescription>Management and contact persons</CardDescription>
                 </CardHeader>
-                <CardContent className="flex flex-col gap-4">
-                  <InfoItem icon={<Mail />} label="Email Address" value={user?.email} />
-                  <InfoItem icon={<Phone />} label="Phone Number" value={user?.phoneNumber} />
-                  <InfoItem icon={<UserCheck />} label="Username" value={user?.username} />
+                <CardContent className="grid grid-cols-1 gap-8 md:grid-cols-2">
+                  <div className="flex flex-col gap-4">
+                    <h3 className="border-l-4 border-primary pl-3 text-sm font-bold uppercase tracking-wide text-foreground">
+                      Contact Person
+                    </h3>
+                    <div className="flex flex-col gap-3 pl-4">
+                      <InfoItem label="Name" value={profile.contactPersonName} />
+                      <InfoItem label="Phone" value={profile.contactPersonPhone} />
+                    </div>
+                  </div>
+                  <div className="flex flex-col gap-4">
+                    <h3 className="border-l-4 border-accent pl-3 text-sm font-bold uppercase tracking-wide text-foreground">
+                      General Manager
+                    </h3>
+                    <div className="flex flex-col gap-3 pl-4">
+                      <InfoItem label="Name" value={profile.generalManagerName} />
+                      <InfoItem label="Email" value={profile.generalManagerEmail} />
+                      <InfoItem label="Phone" value={profile.generalManagerPhone} />
+                    </div>
+                  </div>
                 </CardContent>
               </Card>
 
-              {/* Company Details Card */}
-              <Card>
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2">
-                    <Building2 className="size-5 text-primary" />
-                    Company Details
-                  </CardTitle>
-                  <CardDescription>Business registration information</CardDescription>
-                </CardHeader>
-                <CardContent className="flex flex-col gap-4">
-                  <InfoItem icon={<Globe />} label="Location" value={customer?.companyLocation} />
-                  <InfoItem icon={<MapPin />} label="Address" value={customer?.companyAddress} />
-                  <InfoItem icon={<FileCheck />} label="TIN Number" value={customer?.tinNumber} />
-                  <InfoItem icon={<ShieldCheck />} label="FAN Number" value={customer?.fanNumber} />
+              {/* Power of Attorney */}
+              {profile.poaName && (
+                <Card className="border-dashed">
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      <UserCheck className="size-5 text-accent" />
+                      Power of Attorney
+                    </CardTitle>
+                    <CardDescription>Authorized representative details</CardDescription>
+                  </CardHeader>
+                  <CardContent className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                    <InfoItem label="PoA Name" value={profile.poaName} />
+                    <InfoItem label="PoA Email" value={profile.poaEmail} />
+                    <InfoItem label="PoA Phone" value={profile.poaPhone} />
+                    <InfoItem label="PoA Location" value={profile.poaLocation} />
+                  </CardContent>
+                </Card>
+              )}
+            </div>
+
+            {/* Right Column */}
+            <div className="flex flex-col gap-8">
+              <Card className="relative overflow-hidden border-none bg-foreground text-background shadow-xl">
+                <div className="absolute right-0 top-0 p-4 opacity-10">
+                  <ShieldCheck className="size-32" />
+                </div>
+                <CardContent className="relative z-10 flex flex-col gap-4 px-6 py-8">
+                  <h3 className="text-xl font-black">Secure Account</h3>
+                  <p className="text-sm leading-relaxed text-muted-foreground/80">
+                    Your information is protected by enterprise-grade security.
+                    Contact support for verified information updates.
+                  </p>
+                  <div className="pt-2">
+                    <a
+                      href="/settings"
+                      className="inline-flex h-9 items-center justify-center rounded-md bg-background px-4 text-sm font-medium text-foreground hover:bg-background/90"
+                    >
+                      Edit Settings
+                    </a>
+                  </div>
                 </CardContent>
               </Card>
             </div>
-
-            {/* Personnel Card */}
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <Briefcase className="size-5 text-primary" />
-                  Key Personnel
-                </CardTitle>
-                <CardDescription>Management and contact persons</CardDescription>
-              </CardHeader>
-              <CardContent className="grid grid-cols-1 gap-8 md:grid-cols-2">
-                <div className="flex flex-col gap-4">
-                  <h3 className="border-l-4 border-primary pl-3 text-sm font-bold uppercase tracking-wide text-foreground">
-                    Contact Person
-                  </h3>
-                  <div className="flex flex-col gap-3 pl-4">
-                    <InfoItem label="Name" value={customer?.contactPersonName} />
-                    <InfoItem label="Phone" value={customer?.contactPersonPhone} />
-                  </div>
-                </div>
-                <div className="flex flex-col gap-4">
-                  <h3 className="border-l-4 border-accent pl-3 text-sm font-bold uppercase tracking-wide text-foreground">
-                    General Manager
-                  </h3>
-                  <div className="flex flex-col gap-3 pl-4">
-                    <InfoItem label="Name" value={customer?.generalManagerName} />
-                    <InfoItem label="Email" value={customer?.generalManagerEmail} />
-                    <InfoItem label="Phone" value={customer?.generalManagerPhone} />
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Power of Attorney Section (Conditional) */}
-            {customer?.poaName && (
-              <Card className="border-dashed">
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2">
-                    <UserCheck className="size-5 text-accent" />
-                    Power of Attorney
-                  </CardTitle>
-                  <CardDescription>Authorized representative details</CardDescription>
-                </CardHeader>
-                <CardContent className="grid grid-cols-1 gap-4 md:grid-cols-2">
-                  <InfoItem label="PoA Name" value={customer.poaName} />
-                  <InfoItem label="PoA Email" value={customer.poaEmail} />
-                  <InfoItem label="PoA Phone" value={customer.poaPhone} />
-                  <InfoItem label="PoA Location" value={customer.poaLocation} />
-                </CardContent>
-              </Card>
-            )}
-          </div>
-
-          {/* Right Column - Documents */}
-          <div className="flex flex-col gap-8">
-            <Card className="border-primary/20 bg-primary/[0.02] shadow-md">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <FileCheck className="size-6 text-primary" />
-                  Documents
-                </CardTitle>
-                <CardDescription>Manage required business documents</CardDescription>
-              </CardHeader>
-              <CardContent className="px-6 pb-6 pt-0">
-                <SmartFileInput
-                  file={documentSettings}
-                  variant="minimal"
-                  className="flex flex-col gap-4"
-                />
-              </CardContent>
-            </Card>
-
-            <Card className="relative overflow-hidden border-none bg-foreground text-background shadow-xl">
-              <div className="absolute right-0 top-0 p-4 opacity-10">
-                <ShieldCheck className="size-32" />
-              </div>
-              <CardContent className="relative z-10 flex flex-col gap-4 px-6 py-8">
-                <h3 className="text-xl font-black">Secure Account</h3>
-                <p className="text-sm leading-relaxed text-muted-foreground/80">
-                  Your information is protected by enterprise-grade security. 
-                  Contact support for verified information updates.
-                </p>
-                <div className="pt-2">
-                  <Button variant="secondary" size="sm">
-                    Contact Support
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
           </div>
         </div>
       </div>
     </div>
   );
 }
-
-function InfoItem({
-  icon,
-  label,
-  value,
-}: {
-  icon?: React.ReactNode;
-  label: string;
-  value?: string | null;
-}) {
-  return (
-    <div className="flex items-start gap-3">
-      {icon && (
-        <div className="mt-1 text-muted-foreground [&_svg]:size-4">
-          {icon}
-        </div>
-      )}
-      <div className="flex flex-col gap-0.5">
-        <p className="text-[10px] font-bold uppercase tracking-tight text-muted-foreground">
-          {label}
-        </p>
-        <p className="text-sm font-bold text-foreground">
-          {value || "—"}
-        </p>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/edr-freight-web/portal/src/pages/SettingsPage.tsx b/apps/edr-freight-web/portal/src/pages/SettingsPage.tsx
new file mode 100644
index 000000000..faec1b5b2
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/SettingsPage.tsx
@@ -0,0 +1,617 @@
+import { useState, useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import {
+  Building2,
+  User,
+  Briefcase,
+  UserCheck,
+  FileCheck,
+  Loader2,
+  Save,
+  UploadCloud,
+  CheckCircle2,
+  XCircle,
+} from "lucide-react";
+import { api } from "@/services/api";
+import { companiesService } from "@/services/companies.service";
+import PhoneInput from "@/components/auth/PhoneInput";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Button,
+  Input,
+  Field,
+  FieldLabel,
+  FieldError,
+  FieldGroup,
+  SmartFileInput,
+  Badge,
+} from "@edr/ui-common";
+import { cn } from "@/lib/utils";
+
+type SettingsTab =
+  | "company"
+  | "contact"
+  | "gm"
+  | "poa"
+  | "documents";
+
+const settingsSchema = z.object({
+  companyName: z.string().min(1, "Company name is required"),
+  companyEmail: z.string().email("Invalid email address"),
+  companyPhone: z.string().min(1, "Company phone is required"),
+  companyPhoneCountryCode: z.string().min(1, "Country code is required"),
+  companyLocation: z.string().min(1, "Location is required"),
+  companyAddress: z.string().min(1, "Address is required"),
+  tinNumber: z.string().length(10, "TIN must be exactly 10 digits"),
+  fanNumber: z.string().length(16, "FAN must be exactly 16 digits"),
+  contactPersonName: z.string().min(1, "Contact person name is required"),
+  contactPersonPhone: z.string().min(1, "Contact person phone is required"),
+  contactPersonPhoneCountryCode: z.string().min(1, "Country code is required"),
+  generalManagerName: z.string().min(1, "GM name is required"),
+  generalManagerEmail: z.string().email("Invalid GM email"),
+  generalManagerPhone: z.string().min(1, "GM phone is required"),
+  generalManagerPhoneCountryCode: z.string().min(1, "Country code is required"),
+  poaName: z.string().optional(),
+  poaEmail: z.string().optional(),
+  poaPhone: z.string().optional(),
+  poaPhoneCountryCode: z.string().optional(),
+  poaLocation: z.string().optional(),
+  poaAddress: z.string().optional(),
+});
+
+type FormData = z.infer<typeof settingsSchema>;
+
+const TABS: { id: SettingsTab; label: string; icon: React.ReactNode }[] = [
+  { id: "company", label: "Company Profile", icon: <Building2 className="size-4" /> },
+  { id: "contact", label: "Contact Person", icon: <User className="size-4" /> },
+  { id: "gm", label: "General Manager", icon: <Briefcase className="size-4" /> },
+  { id: "poa", label: "Power of Attorney", icon: <UserCheck className="size-4" /> },
+  { id: "documents", label: "Documents", icon: <FileCheck className="size-4" /> },
+];
+
+function splitPhone(fullPhone?: string | null): { code: string; number: string } {
+  if (!fullPhone) return { code: "+251", number: "" };
+  const match = fullPhone.match(/^(\+\d{1,3})(.*)$/);
+  if (match) return { code: match[1], number: match[2] };
+  return { code: "+251", number: fullPhone };
+}
+
+export default function SettingsPage() {
+  const queryClient = useQueryClient();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const tab = (searchParams.get("tab") as SettingsTab) || "company";
+  const setTab = (t: SettingsTab) => {
+    setSearchParams((prev) => {
+      const next = new URLSearchParams(prev);
+      next.set("tab", t);
+      return next;
+    }, { replace: true });
+  };
+  const [documentFiles, setDocumentFiles] = useState<
+    Record<string, File | File[] | null>
+  >({});
+
+  const profileQuery = useQuery(
+    api.companies.getProfile.queryOptions(),
+  );
+
+  const docSettingQuery = useQuery(
+    api.fileUploadSettings.getByCode.queryOptions({
+      input: { code: "customer_documents" },
+      enabled: tab === "documents",
+    }),
+  );
+
+  const profile = profileQuery.data;
+
+  const defaultValues = useMemo((): FormData => {
+    if (!profile) {
+      return {
+        companyName: "",
+        companyEmail: "",
+        companyPhone: "",
+        companyPhoneCountryCode: "+251",
+        companyLocation: "",
+        companyAddress: "",
+        tinNumber: "",
+        fanNumber: "",
+        contactPersonName: "",
+        contactPersonPhone: "",
+        contactPersonPhoneCountryCode: "+251",
+        generalManagerName: "",
+        generalManagerEmail: "",
+        generalManagerPhone: "",
+        generalManagerPhoneCountryCode: "+251",
+        poaName: "",
+        poaEmail: "",
+        poaPhone: "",
+        poaPhoneCountryCode: "+251",
+        poaLocation: "",
+        poaAddress: "",
+      };
+    }
+    const contactPhone = splitPhone(profile.contactPersonPhone);
+    const gmPhone = splitPhone(profile.generalManagerPhone);
+    const poaPhone = splitPhone(profile.poaPhone);
+    return {
+      companyName: profile.companyName,
+      companyEmail: profile.companyEmail ?? "",
+      companyPhone: profile.companyPhone ?? "",
+      companyPhoneCountryCode: splitPhone(profile.companyPhone).code,
+      companyLocation: profile.companyLocation,
+      companyAddress: profile.companyAddress ?? "",
+      tinNumber: profile.tinNumber,
+      fanNumber: profile.fanNumber ?? "",
+      contactPersonName: profile.contactPersonName ?? "",
+      contactPersonPhone: contactPhone.number,
+      contactPersonPhoneCountryCode: contactPhone.code,
+      generalManagerName: profile.generalManagerName ?? "",
+      generalManagerEmail: profile.generalManagerEmail ?? "",
+      generalManagerPhone: gmPhone.number,
+      generalManagerPhoneCountryCode: gmPhone.code,
+      poaName: profile.poaName ?? "",
+      poaEmail: profile.poaEmail ?? "",
+      poaPhone: poaPhone.number,
+      poaPhoneCountryCode: poaPhone.code,
+      poaLocation: profile.poaLocation ?? "",
+      poaAddress: profile.poaAddress ?? "",
+    };
+  }, [profile]);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isDirty },
+  } = useForm<FormData>({
+    resolver: zodResolver(settingsSchema),
+    values: defaultValues,
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: (data: FormData) =>
+      api.companies.updateProfile.call({
+        companyName: data.companyName,
+        companyEmail: data.companyEmail,
+        companyPhone: `${data.companyPhoneCountryCode}${data.companyPhone}`,
+        companyLocation: data.companyLocation,
+        companyAddress: data.companyAddress,
+        tin: data.tinNumber,
+        fanNumber: data.fanNumber,
+        contactPersonName: data.contactPersonName,
+        contactPersonPhone: `${data.contactPersonPhoneCountryCode}${data.contactPersonPhone}`,
+        generalManagerName: data.generalManagerName,
+        generalManagerEmail: data.generalManagerEmail,
+        generalManagerPhone: `${data.generalManagerPhoneCountryCode}${data.generalManagerPhone}`,
+        poaName: data.poaName || undefined,
+        poaPhone:
+          data.poaPhone && data.poaPhoneCountryCode
+            ? `${data.poaPhoneCountryCode}${data.poaPhone}`
+            : undefined,
+        poaEmail: data.poaEmail || undefined,
+        poaLocation: data.poaLocation || undefined,
+        poaAddress: data.poaAddress || undefined,
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: api.companies.getProfile.queryKey(),
+      });
+    },
+  });
+
+  const docUploadMutation = useMutation({
+    mutationFn: (files: Record<string, File | File[] | null>) =>
+      companiesService.uploadDocuments(profile!.companyId, files),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: api.companies.getProfile.queryKey(),
+      });
+    },
+  });
+
+  const isPending = profileQuery.isPending || updateMutation.isPending || docUploadMutation.isPending;
+
+  if (profileQuery.isPending) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-primary" />
+      </div>
+    );
+  }
+
+  if (!profile) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-muted-foreground">No company profile found.</p>
+      </div>
+    );
+  }
+
+  const onSubmit = (data: FormData) => {
+    updateMutation.mutate(data);
+  };
+
+  return (
+    <div className="px-4 py-8">
+      <div className="mb-8 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-black tracking-tight text-foreground">
+            Account Settings
+          </h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Manage your company profile, personnel, and documents
+          </p>
+        </div>
+        <Badge variant="secondary" className="font-bold uppercase tracking-wider">
+          Verified
+        </Badge>
+      </div>
+
+      {/* Tab Bar */}
+      <div className="mb-6 flex flex-wrap gap-1 border-b border-border">
+        {TABS.map((t) => (
+          <button
+            key={t.id}
+            type="button"
+            onClick={() => setTab(t.id)}
+            className={cn(
+              "flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-semibold transition-colors",
+              tab === t.id
+                ? "border-primary text-primary"
+                : "border-transparent text-muted-foreground hover:text-foreground",
+            )}
+          >
+            {t.icon}
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              {tab === "company" && <><Building2 className="size-5 text-primary" /> Company Profile</>}
+              {tab === "contact" && <><User className="size-5 text-primary" /> Contact Person</>}
+              {tab === "gm" && <><Briefcase className="size-5 text-primary" /> General Manager</>}
+              {tab === "poa" && <><UserCheck className="size-5 text-accent" /> Power of Attorney</>}
+              {tab === "documents" && <><FileCheck className="size-5 text-primary" /> Documents</>}
+            </CardTitle>
+            <CardDescription>
+              {tab === "company" && "Edit your company registration details"}
+              {tab === "contact" && "Manage the primary contact person for your account"}
+              {tab === "gm" && "Manage the general manager information"}
+              {tab === "poa" && "Power of Attorney details are optional"}
+              {tab === "documents" && "Upload and manage required business documents"}
+            </CardDescription>
+          </CardHeader>
+
+          <CardContent>
+            <FieldGroup className="gap-4">
+              {/* Company Profile Tab */}
+              {tab === "company" && (
+                <>
+                  <Field data-invalid={Boolean(errors.companyName)}>
+                    <FieldLabel>Company Name</FieldLabel>
+                    <Input
+                      placeholder="Global Logistics Ltd"
+                      aria-invalid={Boolean(errors.companyName)}
+                      {...register("companyName")}
+                    />
+                    <FieldError errors={[errors.companyName]} />
+                  </Field>
+
+                  <div className="grid grid-cols-2 gap-4">
+                    <Field data-invalid={Boolean(errors.companyEmail)}>
+                      <FieldLabel>Company Email</FieldLabel>
+                      <Input
+                        type="email"
+                        placeholder="ops@company.com"
+                        aria-invalid={Boolean(errors.companyEmail)}
+                        {...register("companyEmail")}
+                      />
+                      <FieldError errors={[errors.companyEmail]} />
+                    </Field>
+
+                    <PhoneInput
+                      countryCode={{ ...register("companyPhoneCountryCode") }}
+                      phone={{
+                        ...register("companyPhone"),
+                        placeholder: "912345678",
+                      }}
+                      countryCodeError={errors.companyPhoneCountryCode}
+                      phoneError={errors.companyPhone}
+                      label="Company Phone"
+                    />
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-4">
+                    <Field data-invalid={Boolean(errors.companyLocation)}>
+                      <FieldLabel>Location</FieldLabel>
+                      <Input
+                        placeholder="Addis Ababa, Ethiopia"
+                        aria-invalid={Boolean(errors.companyLocation)}
+                        {...register("companyLocation")}
+                      />
+                      <FieldError errors={[errors.companyLocation]} />
+                    </Field>
+
+                    <Field data-invalid={Boolean(errors.companyAddress)}>
+                      <FieldLabel>Address</FieldLabel>
+                      <Input
+                        placeholder="Bole Subcity, Woreda 03"
+                        aria-invalid={Boolean(errors.companyAddress)}
+                        {...register("companyAddress")}
+                      />
+                      <FieldError errors={[errors.companyAddress]} />
+                    </Field>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-4">
+                    <Field data-invalid={Boolean(errors.tinNumber)}>
+                      <FieldLabel>TIN Number (10 digits)</FieldLabel>
+                      <Input
+                        placeholder="1234567890"
+                        maxLength={10}
+                        aria-invalid={Boolean(errors.tinNumber)}
+                        {...register("tinNumber")}
+                      />
+                      <FieldError errors={[errors.tinNumber]} />
+                    </Field>
+
+                    <Field data-invalid={Boolean(errors.fanNumber)}>
+                      <FieldLabel>FAN Number (16 digits)</FieldLabel>
+                      <Input
+                        placeholder="1234567890123456"
+                        maxLength={16}
+                        aria-invalid={Boolean(errors.fanNumber)}
+                        {...register("fanNumber")}
+                      />
+                      <FieldError errors={[errors.fanNumber]} />
+                    </Field>
+                  </div>
+                </>
+              )}
+
+              {/* Contact Person Tab */}
+              {tab === "contact" && (
+                <>
+                  <Field data-invalid={Boolean(errors.contactPersonName)}>
+                    <FieldLabel>Full Name</FieldLabel>
+                    <Input
+                      placeholder="Jane Smith"
+                      aria-invalid={Boolean(errors.contactPersonName)}
+                      {...register("contactPersonName")}
+                    />
+                    <FieldError errors={[errors.contactPersonName]} />
+                  </Field>
+
+                  <PhoneInput
+                    countryCode={{ ...register("contactPersonPhoneCountryCode") }}
+                    phone={{
+                      ...register("contactPersonPhone"),
+                      placeholder: "912345678",
+                    }}
+                    countryCodeError={errors.contactPersonPhoneCountryCode}
+                    phoneError={errors.contactPersonPhone}
+                    label="Phone Number"
+                  />
+                </>
+              )}
+
+              {/* General Manager Tab */}
+              {tab === "gm" && (
+                <>
+                  <Field data-invalid={Boolean(errors.generalManagerName)}>
+                    <FieldLabel>Full Name</FieldLabel>
+                    <Input
+                      placeholder="Abebe Bikila"
+                      aria-invalid={Boolean(errors.generalManagerName)}
+                      {...register("generalManagerName")}
+                    />
+                    <FieldError errors={[errors.generalManagerName]} />
+                  </Field>
+
+                  <div className="grid grid-cols-2 gap-4">
+                    <Field data-invalid={Boolean(errors.generalManagerEmail)}>
+                      <FieldLabel>Email Address</FieldLabel>
+                      <Input
+                        type="email"
+                        placeholder="gm@company.com"
+                        aria-invalid={Boolean(errors.generalManagerEmail)}
+                        {...register("generalManagerEmail")}
+                      />
+                      <FieldError errors={[errors.generalManagerEmail]} />
+                    </Field>
+
+                    <PhoneInput
+                      countryCode={{ ...register("generalManagerPhoneCountryCode") }}
+                      phone={{
+                        ...register("generalManagerPhone"),
+                        placeholder: "912345678",
+                      }}
+                      countryCodeError={errors.generalManagerPhoneCountryCode}
+                      phoneError={errors.generalManagerPhone}
+                      label="Phone Number"
+                    />
+                  </div>
+                </>
+              )}
+
+              {/* Power of Attorney Tab */}
+              {tab === "poa" && (
+                <>
+                  <p className="text-sm text-muted-foreground">
+                    Power of Attorney details are optional. Fill them in if you have
+                    an authorized representative, or leave blank.
+                  </p>
+
+                  <Field data-invalid={Boolean(errors.poaName)}>
+                    <FieldLabel>PoA Full Name</FieldLabel>
+                    <Input
+                      placeholder="Authorized Representative Name"
+                      aria-invalid={Boolean(errors.poaName)}
+                      {...register("poaName")}
+                    />
+                    <FieldError errors={[errors.poaName]} />
+                  </Field>
+
+                  <div className="grid grid-cols-2 gap-4">
+                    <Field data-invalid={Boolean(errors.poaEmail)}>
+                      <FieldLabel>PoA Email</FieldLabel>
+                      <Input
+                        type="email"
+                        placeholder="poa@company.com"
+                        aria-invalid={Boolean(errors.poaEmail)}
+                        {...register("poaEmail")}
+                      />
+                      <FieldError errors={[errors.poaEmail]} />
+                    </Field>
+
+                    <PhoneInput
+                      countryCode={{ ...register("poaPhoneCountryCode") }}
+                      phone={{ ...register("poaPhone"), placeholder: "912345678" }}
+                      label="PoA Phone"
+                      countryCodeError={errors.poaPhoneCountryCode}
+                      phoneError={errors.poaPhone}
+                    />
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-4">
+                    <Field data-invalid={Boolean(errors.poaLocation)}>
+                      <FieldLabel>PoA Location</FieldLabel>
+                      <Input
+                        placeholder="City, Country"
+                        aria-invalid={Boolean(errors.poaLocation)}
+                        {...register("poaLocation")}
+                      />
+                      <FieldError errors={[errors.poaLocation]} />
+                    </Field>
+
+                    <Field data-invalid={Boolean(errors.poaAddress)}>
+                      <FieldLabel>PoA Address</FieldLabel>
+                      <Input
+                        placeholder="Full Address"
+                        aria-invalid={Boolean(errors.poaAddress)}
+                        {...register("poaAddress")}
+                      />
+                      <FieldError errors={[errors.poaAddress]} />
+                    </Field>
+                  </div>
+                </>
+              )}
+
+              {/* Documents Tab */}
+              {tab === "documents" && (
+                <>
+                  {docSettingQuery.isLoading ? (
+                    <div className="flex items-center justify-center py-8">
+                      <Loader2 className="size-6 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : !docSettingQuery.data ? (
+                    <p className="text-sm text-muted-foreground text-center py-4">
+                      No document requirements configured for your account.
+                    </p>
+                  ) : (
+                    <SmartFileInput
+                      file={docSettingQuery.data}
+                      value={documentFiles}
+                      onChange={setDocumentFiles}
+                    />
+                  )}
+
+                  {docSettingQuery.data && (
+                    <div className="flex items-center justify-between pt-4">
+                      <div className="flex items-center gap-2">
+                        {docUploadMutation.isSuccess && (
+                          <span className="flex items-center gap-1.5 text-sm font-medium text-emerald-600">
+                            <CheckCircle2 className="size-4" />
+                            Documents uploaded successfully
+                          </span>
+                        )}
+                        {docUploadMutation.isError && (
+                          <span className="flex items-center gap-1.5 text-sm font-medium text-red-600">
+                            <XCircle className="size-4" />
+                            Upload failed
+                          </span>
+                        )}
+                      </div>
+                      <Button
+                        type="button"
+                        onClick={() => docUploadMutation.mutate(documentFiles)}
+                        disabled={docUploadMutation.isPending}
+                      >
+                        {docUploadMutation.isPending ? (
+                          <>
+                            <Loader2 className="size-4 animate-spin" />
+                            Uploading...
+                          </>
+                        ) : (
+                          <>
+                            <UploadCloud className="size-4" />
+                            Upload Documents
+                          </>
+                        )}
+                      </Button>
+                    </div>
+                  )}
+                </>
+              )}
+            </FieldGroup>
+          </CardContent>
+
+          {tab !== "documents" && (
+            <CardFooter className="flex items-center justify-between gap-4 border-t border-border px-6 py-4">
+              <div className="flex items-center gap-2">
+                {updateMutation.isSuccess && (
+                  <span className="flex items-center gap-1.5 text-sm font-medium text-emerald-600">
+                    <CheckCircle2 className="size-4" />
+                    Saved successfully
+                  </span>
+                )}
+                {updateMutation.isError && (
+                  <span className="flex items-center gap-1.5 text-sm font-medium text-red-600">
+                    <XCircle className="size-4" />
+                    Save failed
+                  </span>
+                )}
+              </div>
+              <div className="flex items-center gap-3">
+                <Button
+                  type="button"
+                  variant="outline"
+                  disabled={isPending || !isDirty}
+                  onClick={() => reset()}
+                >
+                  Reset
+                </Button>
+                <Button type="submit" disabled={isPending}>
+                  {updateMutation.isPending ? (
+                    <>
+                      <Loader2 className="size-4 animate-spin" />
+                      Saving...
+                    </>
+                  ) : (
+                    <>
+                      <Save className="size-4" />
+                      Save Changes
+                    </>
+                  )}
+                </Button>
+              </div>
+            </CardFooter>
+          )}
+        </Card>
+      </form>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/portal/src/pages/accounts/CompanyProfileForm.tsx b/apps/edr-freight-web/portal/src/pages/accounts/CompanyProfileForm.tsx
index eb8d5a343..e86c30132 100644
--- a/apps/edr-freight-web/portal/src/pages/accounts/CompanyProfileForm.tsx
+++ b/apps/edr-freight-web/portal/src/pages/accounts/CompanyProfileForm.tsx
@@ -14,10 +14,8 @@ import {
   ChevronLeft,
   UploadCloud,
 } from "lucide-react";
-import type { OnboardingUserType } from "./types";
 import type { AuthUser } from "@/types/auth";
 import type { CreateCompanyPayload } from "@/services/companies.service";
-import type { FileUploadSetting } from "@/types/fileUploadSettings";
 import PhoneInput from "@/components/auth/PhoneInput";
 import {
   Button,
@@ -30,7 +28,7 @@ import {
 } from "@edr/ui-common";
 import { api } from "@/services/api";
 
-type CompanyStep = "company" | "personnel" | "poa" | "documents";
+type CompanyStep = "company" | "personnel" | "poa" | "documents" | "confirm";
 
 const onboardingSchema = z.object({
   companyName: z.string().min(1, "Company name is required"),
@@ -85,6 +83,7 @@ const stepFields: Record<CompanyStep, (keyof FormData)[]> = {
   ],
   poa: [],
   documents: [],
+  confirm: [],
 };
 
 function buildPayload(data: FormData, _user: AuthUser): CreateCompanyPayload {
@@ -116,26 +115,34 @@ function buildPayload(data: FormData, _user: AuthUser): CreateCompanyPayload {
 }
 
 export default function CompanyProfileForm({
-  userType,
+  documentSettingCode,
+  documentFiles: controlledFiles,
+  onDocumentFilesChange,
   user,
   onSubmit,
   isPending,
   onBack,
 }: {
-  userType: OnboardingUserType;
+  documentSettingCode: string;
+  documentFiles?: Record<string, File | File[] | null>;
+  onDocumentFilesChange?: (
+    files: Record<string, File | File[] | null>,
+  ) => void;
   user: AuthUser;
   onSubmit: (data: CreateCompanyPayload) => void;
   isPending: boolean;
   onBack: () => void;
 }) {
   const [step, setStep] = useState<CompanyStep>("company");
-  const [documentFiles, setDocumentFiles] = useState<
+  const [internalFiles, setInternalFiles] = useState<
     Record<string, File | File[] | null>
   >({});
+  const documentFiles = controlledFiles ?? internalFiles;
+  const setDocumentFiles = onDocumentFilesChange ?? setInternalFiles;
 
-  const { data: uploadSettings = [], isLoading: loadingDocuments } = useQuery(
-    api.fileUploadSettings.getByEntity.queryOptions({
-      input: { entity: "customer" },
+  const { data: uploadSetting, isLoading: loadingDocuments } = useQuery(
+    api.fileUploadSettings.getByCode.queryOptions({
+      input: { code: documentSettingCode },
       refetchOnMount: false,
     }),
   );
@@ -144,6 +151,7 @@ export default function CompanyProfileForm({
     register,
     handleSubmit,
     trigger,
+    watch,
     formState: { errors },
   } = useForm<FormData>({
     resolver: zodResolver(onboardingSchema),
@@ -173,18 +181,20 @@ export default function CompanyProfileForm({
     },
   });
 
-  const hasDocuments = uploadSettings.length > 0;
+  const formValues = watch();
+  const hasDocuments = Boolean(uploadSetting?.fields?.length);
+  const totalSteps = 5;
 
   const nextStep = async () => {
     if (step === "poa") {
-      if (hasDocuments) {
-        setStep("documents");
-      } else {
-        handleSubmit((data) => onSubmit(buildPayload(data, user)))();
-      }
+      setStep("documents");
       return;
     }
     if (step === "documents") {
+      setStep("confirm");
+      return;
+    }
+    if (step === "confirm") {
       handleSubmit((data) => onSubmit(buildPayload(data, user)))();
       return;
     }
@@ -201,8 +211,10 @@ export default function CompanyProfileForm({
       setStep("company");
     } else if (step === "poa") {
       setStep("personnel");
-    } else {
+    } else if (step === "documents") {
       setStep("poa");
+    } else {
+      setStep("documents");
     }
   };
 
@@ -228,31 +240,41 @@ export default function CompanyProfileForm({
           <StepIcon
             icon={<User className="size-5" />}
             active={step === "personnel"}
-            completed={step === "poa"}
+            completed={
+              step === "poa" || step === "documents" || step === "confirm"
+            }
           />
           <StepIcon
             icon={<FileText className="size-5" />}
             active={step === "poa"}
-            completed={hasDocuments ? step === "documents" : step === "personnel"}
+            completed={step === "documents" || step === "confirm"}
+          />
+          <StepIcon
+            icon={<UploadCloud className="size-5" />}
+            active={step === "documents"}
+            completed={step === "confirm"}
+          />
+          <StepIcon
+            icon={<CheckCircle2 className="size-5" />}
+            active={step === "confirm"}
+            completed={false}
           />
-          {hasDocuments && (
-            <StepIcon
-              icon={<UploadCloud className="size-5" />}
-              active={step === "documents"}
-              completed={false}
-            />
-          )}
         </div>
         <p className="text-center text-sm text-muted-foreground mt-3">
-          {step === "company" && `Step 1 of ${hasDocuments ? 4 : 3} — Company Information`}
-          {step === "personnel" && `Step 2 of ${hasDocuments ? 4 : 3} — Personnel Details`}
-          {step === "poa" && `Step 3 of ${hasDocuments ? 4 : 3} — Power of Attorney (Optional)`}
-          {step === "documents" && "Step 4 of 4 — Upload Documents (Optional)"}
+          {step === "company" &&
+            `Step 1 of ${totalSteps} — Company Information`}
+          {step === "personnel" &&
+            `Step 2 of ${totalSteps} — Personnel Details`}
+          {step === "poa" &&
+            `Step 3 of ${totalSteps} — Power of Attorney (Optional)`}
+          {step === "documents" &&
+            `Step 4 of ${totalSteps} — Upload Documents (Optional)`}
+          {step === "confirm" && `Step 5 of ${totalSteps} — Review & Confirm`}
         </p>
       </div>
 
       <form
-        onSubmit={handleSubmit((data) => onSubmit(buildPayload(data, user)))}
+        onSubmit={(e) => e.preventDefault()}
         className="flex flex-col gap-4"
       >
         <FieldGroup className="gap-4">
@@ -353,11 +375,6 @@ export default function CompanyProfileForm({
 
           {step === "personnel" && (
             <>
-              <p className="text-sm text-muted-foreground">
-                Personal details are pulled from your account. Contact and
-                management info is collected below.
-              </p>
-
               <div>
                 <h3 className="text-sm font-semibold text-foreground mb-3">
                   Contact Person
@@ -500,62 +517,155 @@ export default function CompanyProfileForm({
 
           {step === "documents" && (
             <>
-              <p className="text-sm text-muted-foreground">
-                Upload required documents for your registration. You can skip
-                this step and upload later from your account settings.
-              </p>
-
               {loadingDocuments ? (
                 <div className="flex items-center justify-center py-8">
                   <Loader2 className="size-6 animate-spin text-muted-foreground" />
                 </div>
-              ) : uploadSettings.length === 0 ? (
+              ) : !uploadSetting ? (
                 <p className="text-sm text-muted-foreground text-center py-4">
                   No document requirements found for your account type.
                 </p>
               ) : (
                 <div className="flex flex-col gap-6">
-                  {uploadSettings.map((setting) => (
-                    <SmartFileInput
-                      key={setting.id}
-                      file={setting}
-                      value={documentFiles}
-                      onChange={setDocumentFiles}
-                    />
-                  ))}
+                  <SmartFileInput
+                    file={uploadSetting}
+                    value={documentFiles}
+                    onChange={setDocumentFiles}
+                  />
                 </div>
               )}
             </>
           )}
+
+          {step === "confirm" && (
+            <div className="space-y-4 rounded-xl border border-border bg-card p-4">
+              <div>
+                <h3 className="text-base font-semibold text-foreground">
+                  Review your registration
+                </h3>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Confirm the company details below before saving.
+                </p>
+              </div>
+
+              <div className="grid gap-3 md:grid-cols-2">
+                <ReviewRow
+                  label="Company name"
+                  value={formValues.companyName}
+                />
+                <ReviewRow
+                  label="Company email"
+                  value={formValues.companyEmail}
+                />
+                <ReviewRow
+                  label="Company phone"
+                  value={formValues.companyPhone}
+                />
+                <ReviewRow
+                  label="Location"
+                  value={formValues.companyLocation}
+                />
+                <ReviewRow label="Address" value={formValues.companyAddress} />
+                <ReviewRow label="TIN" value={formValues.tinNumber} />
+                <ReviewRow label="VAT" value={formValues.vatNumber} />
+                <ReviewRow label="FAN" value={formValues.fanNumber} />
+                <ReviewRow
+                  label="Contact person"
+                  value={formValues.contactPersonName}
+                />
+                <ReviewRow
+                  label="Contact phone"
+                  value={`${formValues.contactPersonPhoneCountryCode}${formValues.contactPersonPhone}`}
+                />
+                <ReviewRow
+                  label="General manager"
+                  value={formValues.generalManagerName}
+                />
+                <ReviewRow
+                  label="GM email"
+                  value={formValues.generalManagerEmail}
+                />
+                <ReviewRow
+                  label="GM phone"
+                  value={`${formValues.generalManagerPhoneCountryCode}${formValues.generalManagerPhone}`}
+                />
+                <ReviewRow
+                  label="PoA name"
+                  value={formValues.poaName || undefined}
+                />
+                <ReviewRow
+                  label="PoA phone"
+                  value={
+                    formValues.poaPhone && formValues.poaPhoneCountryCode
+                      ? `${formValues.poaPhoneCountryCode}${formValues.poaPhone}`
+                      : undefined
+                  }
+                />
+                <ReviewRow
+                  label="PoA email"
+                  value={formValues.poaEmail || undefined}
+                />
+                <ReviewRow
+                  label="PoA location"
+                  value={formValues.poaLocation || undefined}
+                />
+              </div>
+            </div>
+          )}
         </FieldGroup>
 
         <div className="flex items-center justify-between pt-2">
           <Button type="button" variant="outline" onClick={prevStep}>
             <ArrowLeft />
-            {step === "company" ? "Change Type" : "Back"}
+            {step === "company"
+              ? "Change Type"
+              : step === "confirm"
+                ? "Back to Documents"
+                : "Back"}
           </Button>
 
-          <Button type="button" onClick={nextStep} disabled={isPending}>
-            {isPending ? (
-              <>
-                <Loader2 className="animate-spin" />
-                Submitting...
-              </>
-            ) : step === "documents" ? (
-              "Complete Registration"
-            ) : (
-              <>
-                Next Step
-                <ArrowRight />
-              </>
-            )}
-          </Button>
+          <div className="flex items-center gap-3">
+            <Button
+              type="button"
+              onClick={step === "confirm" ? handleSubmit((data) => onSubmit(buildPayload(data, user))) : nextStep}
+              disabled={isPending || (step === "documents" && !hasDocuments && loadingDocuments)}
+            >
+              {isPending ? (
+                <>
+                  <Loader2 className="animate-spin" />
+                  Submitting...
+                </>
+              ) : step === "documents" ? (
+                "Continue"
+              ) : step === "confirm" ? (
+                "Submit Registration"
+              ) : (
+                <>
+                  Next Step
+                  <ArrowRight />
+                </>
+              )}
+            </Button>
+          </div>
         </div>
       </form>
     </>
   );
 }
 
+function ReviewRow({ label, value }: { label: string; value?: string | null }) {
+  return (
+    <div className="rounded-lg border border-border bg-muted/20 p-3">
+      <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        {label}
+      </div>
+      <div className="mt-1 text-sm font-medium text-foreground">
+        {value?.trim() ? value : "Not provided"}
+      </div>
+    </div>
+  );
+}
+
 function StepIcon({
   icon,
   active,
diff --git a/apps/edr-freight-web/portal/src/pages/accounts/DjiboutiAgentForm.tsx b/apps/edr-freight-web/portal/src/pages/accounts/DjiboutiAgentForm.tsx
index 9422dd3e2..2730c878d 100644
--- a/apps/edr-freight-web/portal/src/pages/accounts/DjiboutiAgentForm.tsx
+++ b/apps/edr-freight-web/portal/src/pages/accounts/DjiboutiAgentForm.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { useQuery } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import {
@@ -10,6 +11,7 @@ import {
   CheckCircle2,
   Loader2,
   ChevronLeft,
+  UploadCloud,
 } from "lucide-react";
 import type { AuthUser } from "@/types/auth";
 import type { CreateCompanyPayload } from "@/services/companies.service";
@@ -21,9 +23,11 @@ import {
   FieldLabel,
   FieldError,
   FieldGroup,
+  SmartFileInput,
 } from "@edr/ui-common";
+import { api } from "@/services/api";
 
-type DjiboutiStep = "company" | "representative";
+type DjiboutiStep = "company" | "representative" | "documents" | "confirm";
 
 const djiboutiSchema = z.object({
   companyName: z.string().min(1, "Company name is required"),
@@ -40,9 +44,23 @@ const djiboutiSchema = z.object({
 
 type FormData = z.infer<typeof djiboutiSchema>;
 
-const stepLabels: Record<DjiboutiStep, string> = {
-  company: "Step 1 of 2 — Company Information",
-  representative: "Step 2 of 2 — Representative Details",
+const stepFields: Record<DjiboutiStep, (keyof FormData)[]> = {
+  company: [
+    "companyName",
+    "companyEmail",
+    "companyPhone",
+    "companyPhoneCountryCode",
+    "companyLocation",
+    "companyAddress",
+  ],
+  representative: [
+    "repName",
+    "repEmail",
+    "repPhone",
+    "repPhoneCountryCode",
+  ],
+  documents: [],
+  confirm: [],
 };
 
 function buildPayload(data: FormData, _user: AuthUser): CreateCompanyPayload {
@@ -64,22 +82,43 @@ function buildPayload(data: FormData, _user: AuthUser): CreateCompanyPayload {
 }
 
 export default function DjiboutiAgentForm({
+  documentSettingCode,
+  documentFiles: controlledFiles,
+  onDocumentFilesChange,
   user,
   onSubmit,
   isPending,
   onBack,
 }: {
+  documentSettingCode: string;
+  documentFiles?: Record<string, File | File[] | null>;
+  onDocumentFilesChange?: (
+    files: Record<string, File | File[] | null>,
+  ) => void;
   user: AuthUser;
   onSubmit: (data: CreateCompanyPayload) => void;
   isPending: boolean;
   onBack: () => void;
 }) {
   const [step, setStep] = useState<DjiboutiStep>("company");
+  const [internalFiles, setInternalFiles] = useState<
+    Record<string, File | File[] | null>
+  >({});
+  const documentFiles = controlledFiles ?? internalFiles;
+  const setDocumentFiles = onDocumentFilesChange ?? setInternalFiles;
+
+  const { data: uploadSetting, isLoading: loadingDocuments } = useQuery(
+    api.fileUploadSettings.getByCode.queryOptions({
+      input: { code: documentSettingCode },
+      refetchOnMount: false,
+    }),
+  );
 
   const {
     register,
     handleSubmit,
     trigger,
+    watch,
     formState: { errors },
   } = useForm<FormData>({
     resolver: zodResolver(djiboutiSchema),
@@ -97,32 +136,42 @@ export default function DjiboutiAgentForm({
     },
   });
 
+  const formValues = watch();
+  const hasDocuments = Boolean(uploadSetting?.fields?.length);
+  const totalSteps = 4;
+
   const nextStep = async () => {
     if (step === "representative") {
+      setStep("documents");
+      return;
+    }
+    if (step === "documents") {
+      setStep("confirm");
+      return;
+    }
+    if (step === "confirm") {
       handleSubmit((data) => onSubmit(buildPayload(data, user)))();
       return;
     }
-    const fields: (keyof FormData)[] =
-      step === "company"
-        ? [
-            "companyName",
-            "companyEmail",
-            "companyPhone",
-            "companyPhoneCountryCode",
-            "companyLocation",
-            "companyAddress",
-          ]
-        : ["repName", "repEmail", "repPhone", "repPhoneCountryCode"];
+    const fields = stepFields[step];
     const isValid = await trigger(fields);
     if (!isValid) return;
     setStep("representative");
   };
 
+  const skipDocuments = () => {
+    setStep("confirm");
+  };
+
   const prevStep = () => {
     if (step === "company") {
       onBack();
-    } else {
+    } else if (step === "representative") {
       setStep("company");
+    } else if (step === "documents") {
+      setStep("representative");
+    } else {
+      setStep("documents");
     }
   };
 
@@ -143,21 +192,34 @@ export default function DjiboutiAgentForm({
           <StepIcon
             icon={<Building2 className="size-5" />}
             active={step === "company"}
-            completed={step === "representative"}
+            completed={step !== "company"}
           />
           <StepIcon
             icon={<UserRound className="size-5" />}
             active={step === "representative"}
+            completed={step === "documents" || step === "confirm"}
+          />
+          <StepIcon
+            icon={<UploadCloud className="size-5" />}
+            active={step === "documents"}
+            completed={step === "confirm"}
+          />
+          <StepIcon
+            icon={<CheckCircle2 className="size-5" />}
+            active={step === "confirm"}
             completed={false}
           />
         </div>
         <p className="text-center text-sm text-muted-foreground mt-3">
-          {stepLabels[step]}
+          {step === "company" && `Step 1 of ${totalSteps} — Company Information`}
+          {step === "representative" && `Step 2 of ${totalSteps} — Representative Details`}
+          {step === "documents" && `Step 3 of ${totalSteps} — Upload Documents (Optional)`}
+          {step === "confirm" && `Step 4 of ${totalSteps} — Review & Confirm`}
         </p>
       </div>
 
       <form
-        onSubmit={handleSubmit((data) => onSubmit(buildPayload(data, user)))}
+        onSubmit={(e) => e.preventDefault()}
         className="flex flex-col gap-4"
       >
         <FieldGroup className="gap-4">
@@ -262,35 +324,120 @@ export default function DjiboutiAgentForm({
               </div>
             </>
           )}
+
+          {step === "documents" && (
+            <>
+              {loadingDocuments ? (
+                <div className="flex items-center justify-center py-8">
+                  <Loader2 className="size-6 animate-spin text-muted-foreground" />
+                </div>
+              ) : !uploadSetting ? (
+                <p className="text-sm text-muted-foreground text-center py-4">
+                  No document requirements found for your account type.
+                </p>
+              ) : (
+                <div className="flex flex-col gap-6">
+                  <SmartFileInput
+                    file={uploadSetting}
+                    value={documentFiles}
+                    onChange={setDocumentFiles}
+                  />
+                </div>
+              )}
+            </>
+          )}
+
+          {step === "confirm" && (
+            <div className="space-y-4 rounded-xl border border-border bg-card p-4">
+              <div>
+                <h3 className="text-base font-semibold text-foreground">
+                  Review your registration
+                </h3>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Confirm the company details below before saving.
+                </p>
+              </div>
+
+              <div className="grid gap-3 md:grid-cols-2">
+                <ReviewRow label="Company name" value={formValues.companyName} />
+                <ReviewRow label="Company email" value={formValues.companyEmail} />
+                <ReviewRow label="Company phone" value={formValues.companyPhone} />
+                <ReviewRow label="Location" value={formValues.companyLocation} />
+                <ReviewRow label="Address" value={formValues.companyAddress} />
+                <ReviewRow label="Rep. name" value={formValues.repName} />
+                <ReviewRow label="Rep. email" value={formValues.repEmail} />
+                <ReviewRow
+                  label="Rep. phone"
+                  value={`${formValues.repPhoneCountryCode}${formValues.repPhone}`}
+                />
+              </div>
+            </div>
+          )}
         </FieldGroup>
 
         <div className="flex items-center justify-between pt-2">
           <Button type="button" variant="outline" onClick={prevStep}>
             <ArrowLeft />
-            {step === "company" ? "Change Type" : "Back"}
+            {step === "company"
+              ? "Change Type"
+              : step === "confirm"
+                ? "Back to Documents"
+                : "Back"}
           </Button>
 
-          <Button type="button" onClick={nextStep} disabled={isPending}>
-            {isPending ? (
-              <>
-                <Loader2 className="animate-spin" />
-                Submitting...
-              </>
-            ) : step === "representative" ? (
-              "Complete Registration"
-            ) : (
-              <>
-                Next Step
-                <ArrowRight />
-              </>
+          <div className="flex items-center gap-3">
+            {step === "documents" && (
+              <Button
+                type="button"
+                variant="outline"
+                onClick={skipDocuments}
+                disabled={isPending}
+              >
+                Skip for now
+              </Button>
             )}
-          </Button>
+
+            <Button
+              type="button"
+              onClick={step === "confirm" ? handleSubmit((data) => onSubmit(buildPayload(data, user))) : nextStep}
+              disabled={isPending || (step === "documents" && !hasDocuments && loadingDocuments)}
+            >
+              {isPending ? (
+                <>
+                  <Loader2 className="animate-spin" />
+                  Submitting...
+                </>
+              ) : step === "documents" ? (
+                "Continue"
+              ) : step === "confirm" ? (
+                "Submit Registration"
+              ) : (
+                <>
+                  Next Step
+                  <ArrowRight />
+                </>
+              )}
+            </Button>
+          </div>
         </div>
       </form>
     </>
   );
 }
 
+function ReviewRow({ label, value }: { label: string; value?: string | null }) {
+  return (
+    <div className="rounded-lg border border-border bg-muted/20 p-3">
+      <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        {label}
+      </div>
+      <div className="mt-1 text-sm font-medium text-foreground">
+        {value?.trim() ? value : "Not provided"}
+      </div>
+    </div>
+  );
+}
+
 function StepIcon({
   icon,
   active,
diff --git a/apps/edr-freight-web/portal/src/pages/customers/on_boarding/CustomerOnboardingPage.tsx b/apps/edr-freight-web/portal/src/pages/accounts/ForwarderForm.tsx
similarity index 57%
rename from apps/edr-freight-web/portal/src/pages/customers/on_boarding/CustomerOnboardingPage.tsx
rename to apps/edr-freight-web/portal/src/pages/accounts/ForwarderForm.tsx
index 994dd751e..418b8bcc4 100644
--- a/apps/edr-freight-web/portal/src/pages/customers/on_boarding/CustomerOnboardingPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/accounts/ForwarderForm.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useForm } from "react-hook-form";
+import { useQuery } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import {
@@ -11,11 +11,11 @@ import {
   FileText,
   CheckCircle2,
   Loader2,
+  ChevronLeft,
+  UploadCloud,
 } from "lucide-react";
-import useAuth from "@/hooks/useAuth";
-import { api } from "@/services/api";
-import type { CreateCustomerDto } from "@/types/customers";
-import AuthLayout from "@/components/auth/AuthLayout";
+import type { AuthUser } from "@/types/auth";
+import type { CreateCompanyPayload } from "@/services/companies.service";
 import PhoneInput from "@/components/auth/PhoneInput";
 import {
   Button,
@@ -24,14 +24,13 @@ import {
   FieldLabel,
   FieldError,
   FieldGroup,
+  SmartFileInput,
 } from "@edr/ui-common";
-import TransporterOnboarding from "./TransportrOnBoarding";
-import DjiboutiForwardingAgentForm from "./DjiboutiFreightForwardingAgent";
-import ImportExportOnBoarding from "./ImportExportOnBoarding";
+import { api } from "@/services/api";
 
-type OnboardingStep = "company" | "personnel" | "poa";
+type ForwarderStep = "company" | "personnel" | "poa" | "documents" | "confirm";
 
-const onboardingSchema = z.object({
+const forwarderSchema = z.object({
   companyName: z.string().min(1, "Company name is required"),
   companyEmail: z.string().email("Invalid email address"),
   companyPhone: z.string().min(1, "Company phone is required"),
@@ -59,9 +58,9 @@ const onboardingSchema = z.object({
   poaLocation: z.string().optional(),
 });
 
-type FormData = z.infer<typeof onboardingSchema>;
+type FormData = z.infer<typeof forwarderSchema>;
 
-const stepFields: Record<OnboardingStep, (keyof FormData)[]> = {
+const stepFields: Record<ForwarderStep, (keyof FormData)[]> = {
   company: [
     "companyName",
     "companyEmail",
@@ -83,20 +82,79 @@ const stepFields: Record<OnboardingStep, (keyof FormData)[]> = {
     "generalManagerPhoneCountryCode",
   ],
   poa: [],
+  documents: [],
+  confirm: [],
 };
 
-export default function CustomerOnboardingPage() {
-  const queryClient = useQueryClient();
-  const { user } = useAuth();
-  const [step, setStep] = useState<OnboardingStep>("company");
+function buildPayload(data: FormData, _user: AuthUser): CreateCompanyPayload {
+  return {
+    companyName: data.companyName,
+    companyEmail: data.companyEmail,
+    companyPhone: `${data.companyPhoneCountryCode}${data.companyPhone}`,
+    companyLocation: data.companyLocation,
+    companyAddress: data.companyAddress,
+    tin: data.tinNumber,
+    vatNumber: data.vatNumber,
+    fanNumber: data.fanNumber,
+    attributes: {
+      contactPersonName: data.contactPersonName,
+      contactPersonPhone: `${data.contactPersonPhoneCountryCode}${data.contactPersonPhone}`,
+      generalManagerName: data.generalManagerName,
+      generalManagerEmail: data.generalManagerEmail,
+      generalManagerPhone: `${data.generalManagerPhoneCountryCode}${data.generalManagerPhone}`,
+      poaName: data.poaName || undefined,
+      poaPhone:
+        data.poaPhone && data.poaPhoneCountryCode
+          ? `${data.poaPhoneCountryCode}${data.poaPhone}`
+          : undefined,
+      poaAddress: data.poaAddress || undefined,
+      poaEmail: data.poaEmail || undefined,
+      poaLocation: data.poaLocation || undefined,
+    },
+  };
+}
+
+export default function ForwarderForm({
+  documentSettingCode,
+  documentFiles: controlledFiles,
+  onDocumentFilesChange,
+  user,
+  onSubmit,
+  isPending,
+  onBack,
+}: {
+  documentSettingCode: string;
+  documentFiles?: Record<string, File | File[] | null>;
+  onDocumentFilesChange?: (
+    files: Record<string, File | File[] | null>,
+  ) => void;
+  user: AuthUser;
+  onSubmit: (data: CreateCompanyPayload) => void;
+  isPending: boolean;
+  onBack: () => void;
+}) {
+  const [step, setStep] = useState<ForwarderStep>("company");
+  const [internalFiles, setInternalFiles] = useState<
+    Record<string, File | File[] | null>
+  >({});
+  const documentFiles = controlledFiles ?? internalFiles;
+  const setDocumentFiles = onDocumentFilesChange ?? setInternalFiles;
+
+  const { data: uploadSetting, isLoading: loadingDocuments } = useQuery(
+    api.fileUploadSettings.getByCode.queryOptions({
+      input: { code: documentSettingCode },
+      refetchOnMount: false,
+    }),
+  );
 
   const {
     register,
     handleSubmit,
     trigger,
+    watch,
     formState: { errors },
   } = useForm<FormData>({
-    resolver: zodResolver(onboardingSchema),
+    resolver: zodResolver(forwarderSchema),
     defaultValues: {
       companyName: "",
       companyEmail: "",
@@ -123,20 +181,21 @@ export default function CustomerOnboardingPage() {
     },
   });
 
-  const createCustomerMutation = useMutation({
-    mutationFn: (payload: CreateCustomerDto) =>
-      api.customers.create.call(payload),
-    onSuccess: () => {
-      if (user)
-        queryClient.invalidateQueries({
-          queryKey: api.customers.getByUserId.queryKey({ id: user.id }),
-        });
-    },
-  });
+  const formValues = watch();
+  const hasDocuments = Boolean(uploadSetting?.fields?.length);
+  const totalSteps = 5;
 
   const nextStep = async () => {
     if (step === "poa") {
-      handleSubmit(onSubmit)();
+      setStep("documents");
+      return;
+    }
+    if (step === "documents") {
+      setStep("confirm");
+      return;
+    }
+    if (step === "confirm") {
+      handleSubmit((data) => onSubmit(buildPayload(data, user)))();
       return;
     }
     const fields = stepFields[step];
@@ -145,69 +204,36 @@ export default function CustomerOnboardingPage() {
     setStep(step === "company" ? "personnel" : "poa");
   };
 
-  const prevStep = () => {
-    if (step === "personnel") setStep("company");
-    else if (step === "poa") setStep("personnel");
+  const skipDocuments = () => {
+    setStep("confirm");
   };
 
-  const onSubmit = async (data: FormData) => {
-    const nameParts = (user?.name?.en ?? "").split(" ");
-    const payload: CreateCustomerDto = {
-      userId: user!.id,
-      firstName: nameParts[0] || "",
-      lastName: nameParts.slice(-1)[0] || "",
-      email: user!.email,
-      phone: user!.phoneNumber,
-      companyName: data.companyName,
-      companyEmail: data.companyEmail,
-      companyPhone: `${data.companyPhoneCountryCode}${data.companyPhone}`,
-      companyLocation: data.companyLocation,
-      companyAddress: data.companyAddress,
-      contactPersonName: data.contactPersonName,
-      contactPersonPhone: `${data.contactPersonPhoneCountryCode}${data.contactPersonPhone}`,
-      tinNumber: data.tinNumber,
-      vatNumber: data.vatNumber,
-      fanNumber: data.fanNumber,
-      generalManagerName: data.generalManagerName,
-      generalManagerEmail: data.generalManagerEmail,
-      generalManagerPhone: `${data.generalManagerPhoneCountryCode}${data.generalManagerPhone}`,
-      poaName: data.poaName || undefined,
-      poaPhone:
-        data.poaPhone && data.poaPhoneCountryCode
-          ? `${data.poaPhoneCountryCode}${data.poaPhone}`
-          : undefined,
-      poaAddress: data.poaAddress || undefined,
-      poaEmail: data.poaEmail || undefined,
-      poaLocation: data.poaLocation || undefined,
-    };
-    createCustomerMutation.mutate(payload);
+  const prevStep = () => {
+    if (step === "company") {
+      onBack();
+    } else if (step === "personnel") {
+      setStep("company");
+    } else if (step === "poa") {
+      setStep("personnel");
+    } else if (step === "documents") {
+      setStep("poa");
+    } else {
+      setStep("documents");
+    }
   };
 
   return (
-    <AuthLayout
-      left={{
-        badge: "Complete Your Profile",
-        title: "Set up your company profile",
-        description:
-          "Provide your business details to start using EDR Freight for managing shipments, tracking consignments, and streamlining logistics operations across Ethiopia and Djibouti.",
-        features: [
-          "Company registration details",
-          "Contact and management personnel",
-          "Power of Attorney (optional)",
-        ],
-        stats: {
-          label: "Active Customers",
-          value: "500+",
-          footer: "And growing",
-          progress: "w-[95%]",
-        },
-      }}
-    >
+    <>
+      <div className="mb-8">
+        <button
+          type="button"
+          onClick={prevStep}
+          className="mb-4 flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ChevronLeft className="size-4" />
+          Change account type
+        </button>
 
-      <TransporterOnboarding />
-      {/* <DjiboutiForwardingAgentForm /> */}
-      {/* <ImportExportOnBoarding /> */}
-      {/* <div className="mb-8 lg:col-span-2">
         <div className="flex items-center justify-between max-w-lg mx-auto relative px-2">
           <div className="absolute top-1/2 left-0 w-full h-0.5 bg-border -translate-y-1/2 z-0" />
           <StepIcon
@@ -218,22 +244,41 @@ export default function CustomerOnboardingPage() {
           <StepIcon
             icon={<User className="size-5" />}
             active={step === "personnel"}
-            completed={step === "poa"}
+            completed={step === "poa" || step === "documents" || step === "confirm"}
           />
           <StepIcon
             icon={<FileText className="size-5" />}
             active={step === "poa"}
+            completed={step === "documents" || step === "confirm"}
+          />
+          <StepIcon
+            icon={<UploadCloud className="size-5" />}
+            active={step === "documents"}
+            completed={step === "confirm"}
+          />
+          <StepIcon
+            icon={<CheckCircle2 className="size-5" />}
+            active={step === "confirm"}
             completed={false}
           />
         </div>
         <p className="text-center text-sm text-muted-foreground mt-3">
-          {step === "company" && "Step 1 of 3 — Company Information"}
-          {step === "personnel" && "Step 2 of 3 — Personnel Details"}
-          {step === "poa" && "Step 3 of 3 — Power of Attorney (Optional)"}
+          {step === "company" &&
+            `Step 1 of ${totalSteps} — Company Information`}
+          {step === "personnel" &&
+            `Step 2 of ${totalSteps} — Personnel Details`}
+          {step === "poa" &&
+            `Step 3 of ${totalSteps} — Power of Attorney (Optional)`}
+          {step === "documents" &&
+            `Step 4 of ${totalSteps} — Upload Documents (Optional)`}
+          {step === "confirm" && `Step 5 of ${totalSteps} — Review & Confirm`}
         </p>
-      </div> */}
+      </div>
 
-      {/* <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
+      <form
+        onSubmit={(e) => e.preventDefault()}
+        className="flex flex-col gap-4"
+      >
         <FieldGroup className="gap-4">
           {step === "company" && (
             <>
@@ -332,11 +377,6 @@ export default function CustomerOnboardingPage() {
 
           {step === "personnel" && (
             <>
-              <p className="text-sm text-muted-foreground">
-                Personal details are pulled from your account. Contact and
-                management info is collected below.
-              </p>
-
               <div>
                 <h3 className="text-sm font-semibold text-foreground mb-3">
                   Contact Person
@@ -418,88 +458,212 @@ export default function CustomerOnboardingPage() {
           {step === "poa" && (
             <>
               <p className="text-sm text-muted-foreground">
-                Power of Attorney details are optional. Skip if not applicable.
+                Power of Attorney details are optional. Fill them in if you have
+                them, or skip to continue.
               </p>
 
-              <Field>
+              <Field data-invalid={Boolean(errors.poaName)}>
                 <FieldLabel>PoA Name</FieldLabel>
                 <Input
                   placeholder="Authorized Representative Name"
+                  aria-invalid={Boolean(errors.poaName)}
                   {...register("poaName")}
                 />
+                <FieldError errors={[errors.poaName]} />
               </Field>
 
               <div className="grid grid-cols-2 gap-4">
-                <Field>
+                <Field data-invalid={Boolean(errors.poaEmail)}>
                   <FieldLabel>PoA Email</FieldLabel>
                   <Input
                     type="email"
                     placeholder="poa@company.com"
+                    aria-invalid={Boolean(errors.poaEmail)}
                     {...register("poaEmail")}
                   />
+                  <FieldError errors={[errors.poaEmail]} />
                 </Field>
 
                 <PhoneInput
                   countryCode={{ ...register("poaPhoneCountryCode") }}
                   phone={{ ...register("poaPhone"), placeholder: "912345678" }}
                   label="PoA Phone"
+                  countryCodeError={errors.poaPhoneCountryCode}
+                  phoneError={errors.poaPhone}
                 />
               </div>
 
               <div className="grid grid-cols-2 gap-4">
-                <Field>
+                <Field data-invalid={Boolean(errors.poaLocation)}>
                   <FieldLabel>PoA Location</FieldLabel>
                   <Input
                     placeholder="City, Country"
+                    aria-invalid={Boolean(errors.poaLocation)}
                     {...register("poaLocation")}
                   />
+                  <FieldError errors={[errors.poaLocation]} />
                 </Field>
 
-                <Field>
+                <Field data-invalid={Boolean(errors.poaAddress)}>
                   <FieldLabel>PoA Address</FieldLabel>
                   <Input
                     placeholder="Full Address"
+                    aria-invalid={Boolean(errors.poaAddress)}
                     {...register("poaAddress")}
                   />
+                  <FieldError errors={[errors.poaAddress]} />
                 </Field>
               </div>
             </>
           )}
+
+          {step === "documents" && (
+            <>
+              {loadingDocuments ? (
+                <div className="flex items-center justify-center py-8">
+                  <Loader2 className="size-6 animate-spin text-muted-foreground" />
+                </div>
+              ) : !uploadSetting ? (
+                <p className="text-sm text-muted-foreground text-center py-4">
+                  No document requirements found for your account type.
+                </p>
+              ) : (
+                <div className="flex flex-col gap-6">
+                  <SmartFileInput
+                    file={uploadSetting}
+                    value={documentFiles}
+                    onChange={setDocumentFiles}
+                  />
+                </div>
+              )}
+            </>
+          )}
+
+          {step === "confirm" && (
+            <div className="space-y-4 rounded-xl border border-border bg-card p-4">
+              <div>
+                <h3 className="text-base font-semibold text-foreground">
+                  Review your registration
+                </h3>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Confirm the company details below before saving.
+                </p>
+              </div>
+
+              <div className="grid gap-3 md:grid-cols-2">
+                <ReviewRow label="Company name" value={formValues.companyName} />
+                <ReviewRow label="Company email" value={formValues.companyEmail} />
+                <ReviewRow label="Company phone" value={formValues.companyPhone} />
+                <ReviewRow label="Location" value={formValues.companyLocation} />
+                <ReviewRow label="Address" value={formValues.companyAddress} />
+                <ReviewRow label="TIN" value={formValues.tinNumber} />
+                <ReviewRow label="VAT" value={formValues.vatNumber} />
+                <ReviewRow label="FAN" value={formValues.fanNumber} />
+                <ReviewRow
+                  label="Contact person"
+                  value={formValues.contactPersonName}
+                />
+                <ReviewRow
+                  label="Contact phone"
+                  value={`${formValues.contactPersonPhoneCountryCode}${formValues.contactPersonPhone}`}
+                />
+                <ReviewRow
+                  label="General manager"
+                  value={formValues.generalManagerName}
+                />
+                <ReviewRow
+                  label="GM email"
+                  value={formValues.generalManagerEmail}
+                />
+                <ReviewRow
+                  label="GM phone"
+                  value={`${formValues.generalManagerPhoneCountryCode}${formValues.generalManagerPhone}`}
+                />
+                <ReviewRow
+                  label="PoA name"
+                  value={formValues.poaName || undefined}
+                />
+                <ReviewRow
+                  label="PoA phone"
+                  value={
+                    formValues.poaPhone && formValues.poaPhoneCountryCode
+                      ? `${formValues.poaPhoneCountryCode}${formValues.poaPhone}`
+                      : undefined
+                  }
+                />
+                <ReviewRow
+                  label="PoA email"
+                  value={formValues.poaEmail || undefined}
+                />
+                <ReviewRow
+                  label="PoA location"
+                  value={formValues.poaLocation || undefined}
+                />
+              </div>
+            </div>
+          )}
         </FieldGroup>
 
         <div className="flex items-center justify-between pt-2">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={prevStep}
-            disabled={step === "company"}
-          >
+          <Button type="button" variant="outline" onClick={prevStep}>
             <ArrowLeft />
-            Back
+            {step === "company"
+              ? "Change Type"
+              : step === "confirm"
+                ? "Back to Documents"
+                : "Back"}
           </Button>
 
-          <Button
-            type="button"
-            onClick={nextStep}
-            disabled={createCustomerMutation.isPending}
-          >
-            {createCustomerMutation.isPending ? (
-              <>
-                <Loader2 className="animate-spin" />
-                Submitting...
-              </>
-            ) : step === "poa" ? (
-              "Complete Registration"
-            ) : (
-              <>
-                Next Step
-                <ArrowRight />
-              </>
+          <div className="flex items-center gap-3">
+            {step === "documents" && (
+              <Button
+                type="button"
+                variant="outline"
+                onClick={skipDocuments}
+                disabled={isPending}
+              >
+                Skip for now
+              </Button>
             )}
-          </Button>
+
+            <Button
+              type="button"
+              onClick={step === "confirm" ? handleSubmit((data) => onSubmit(buildPayload(data, user))) : nextStep}
+              disabled={isPending || (step === "documents" && !hasDocuments && loadingDocuments)}
+            >
+              {isPending ? (
+                <>
+                  <Loader2 className="animate-spin" />
+                  Submitting...
+                </>
+              ) : step === "documents" ? (
+                "Continue"
+              ) : step === "confirm" ? (
+                "Submit Registration"
+              ) : (
+                <>
+                  Next Step
+                  <ArrowRight />
+                </>
+              )}
+            </Button>
+          </div>
         </div>
-      </form> */}
-    </AuthLayout>
+      </form>
+    </>
+  );
+}
+
+function ReviewRow({ label, value }: { label: string; value?: string | null }) {
+  return (
+    <div className="rounded-lg border border-border bg-muted/20 p-3">
+      <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        {label}
+      </div>
+      <div className="mt-1 text-sm font-medium text-foreground">
+        {value?.trim() ? value : "Not provided"}
+      </div>
+    </div>
   );
 }
 
diff --git a/apps/edr-freight-web/portal/src/pages/accounts/OnboardingPage.tsx b/apps/edr-freight-web/portal/src/pages/accounts/OnboardingPage.tsx
index a53b37ee5..ec1d724f8 100644
--- a/apps/edr-freight-web/portal/src/pages/accounts/OnboardingPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/accounts/OnboardingPage.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import {
   ArrowDownToLine,
   ArrowUpFromLine,
@@ -10,9 +10,11 @@ import {
 } from "lucide-react";
 import useAuth from "@/hooks/useAuth";
 import { api } from "@/services/api";
+import { companiesService } from "@/services/companies.service";
 import type { CreateCompanyPayload } from "@/services/companies.service";
 import AuthLayout from "@/components/auth/AuthLayout";
 import CompanyProfileForm from "./CompanyProfileForm";
+import ForwarderForm from "./ForwarderForm";
 import DjiboutiAgentForm from "./DjiboutiAgentForm";
 import TransporterForm from "./TransporterForm";
 import type { OnboardingUserType } from "./types";
@@ -113,17 +115,21 @@ const PREFLIGHT_LEFT = {
   },
 };
 
+const DOCUMENT_SETTING_CODE_MAP: Record<OnboardingUserType, string> = {
+  importer: "company_onboarding_documents_customer",
+  exporter: "company_onboarding_documents_customer",
+  "freight-forwarder-et": "company_onboarding_documents_forwarder",
+  "freight-forwarder-dj": "company_onboarding_documents_forwarder_dj",
+  transporter: "company_onboarding_documents_transporter",
+};
+
 export default function OnboardingPage() {
   const queryClient = useQueryClient();
   const { user } = useAuth();
   const [userType, setUserType] = useState<OnboardingUserType | null>(null);
-
-  useQuery(
-    api.fileUploadSettings.getByEntity.queryOptions({
-      input: { entity: "customer" },
-      refetchOnMount: false,
-    }),
-  );
+  const [documentFiles, setDocumentFiles] = useState<
+    Record<string, File | File[] | null>
+  >({});
 
   const COMPANY_TYPE_MAP: Record<OnboardingUserType, string> = {
     importer: "customer",
@@ -136,8 +142,14 @@ export default function OnboardingPage() {
   const createCompanyMutation = useMutation({
     mutationFn: (payload: CreateCompanyPayload) =>
       api.companies.create.call(payload),
-    onSuccess: () => {
-      queryClient.invalidateQueries({
+    onSuccess: async (data) => {
+      const hasFiles = Object.values(documentFiles).some(
+        (f) => f !== null && (Array.isArray(f) ? f.length > 0 : true),
+      );
+      if (hasFiles) {
+        await companiesService.uploadDocuments(data.company.id, documentFiles);
+      }
+      await queryClient.invalidateQueries({
         queryKey: api.companies.getInfo.queryKey(),
       });
     },
@@ -237,6 +249,9 @@ export default function OnboardingPage() {
     <AuthLayout left={leftProps}>
       {userType === "transporter" ? (
         <TransporterForm
+          documentSettingCode={DOCUMENT_SETTING_CODE_MAP[userType]}
+          documentFiles={documentFiles}
+          onDocumentFilesChange={setDocumentFiles}
           user={user}
           onSubmit={handleSubmit}
           isPending={createCompanyMutation.isPending}
@@ -244,6 +259,19 @@ export default function OnboardingPage() {
         />
       ) : userType === "freight-forwarder-dj" ? (
         <DjiboutiAgentForm
+          documentSettingCode={DOCUMENT_SETTING_CODE_MAP[userType]}
+          documentFiles={documentFiles}
+          onDocumentFilesChange={setDocumentFiles}
+          user={user}
+          onSubmit={handleSubmit}
+          isPending={createCompanyMutation.isPending}
+          onBack={handleBack}
+        />
+      ) : userType === "freight-forwarder-et" ? (
+        <ForwarderForm
+          documentSettingCode={DOCUMENT_SETTING_CODE_MAP[userType]}
+          documentFiles={documentFiles}
+          onDocumentFilesChange={setDocumentFiles}
           user={user}
           onSubmit={handleSubmit}
           isPending={createCompanyMutation.isPending}
@@ -251,7 +279,9 @@ export default function OnboardingPage() {
         />
       ) : (
         <CompanyProfileForm
-          userType={userType}
+          documentSettingCode={DOCUMENT_SETTING_CODE_MAP[userType]}
+          documentFiles={documentFiles}
+          onDocumentFilesChange={setDocumentFiles}
           user={user}
           onSubmit={handleSubmit}
           isPending={createCompanyMutation.isPending}
diff --git a/apps/edr-freight-web/portal/src/pages/accounts/TransporterForm.tsx b/apps/edr-freight-web/portal/src/pages/accounts/TransporterForm.tsx
index 7f6a302cf..eea5c0051 100644
--- a/apps/edr-freight-web/portal/src/pages/accounts/TransporterForm.tsx
+++ b/apps/edr-freight-web/portal/src/pages/accounts/TransporterForm.tsx
@@ -1,11 +1,16 @@
+import { useState } from "react";
 import { useForm, Controller } from "react-hook-form";
+import { useQuery } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import {
-  Loader2,
+  ArrowRight,
+  ArrowLeft,
   ChevronLeft,
   Truck,
-  Info,
+  CheckCircle2,
+  Loader2,
+  UploadCloud,
 } from "lucide-react";
 import type { AuthUser } from "@/types/auth";
 import type { CreateCompanyPayload } from "@/services/companies.service";
@@ -20,8 +25,10 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  SmartFileInput,
 } from "@edr/ui-common";
 import { cn } from "@/lib/utils";
+import { api } from "@/services/api";
 
 const TRUCK_TYPES = [
   "Casoni",
@@ -31,6 +38,8 @@ const TRUCK_TYPES = [
   "Others",
 ] as const;
 
+type TransporterStep = "vehicle" | "documents" | "confirm";
+
 const transporterSchema = z
   .object({
     tinNumber: z.string().length(10, "TIN must be exactly 10 digits"),
@@ -45,7 +54,10 @@ const transporterSchema = z
       .regex(/^\d{4}$/, "Enter a valid year (e.g. 2023)"),
   })
   .superRefine((data, ctx) => {
-    if (data.truckType === "Casoni" && (!data.plateNumber2 || data.plateNumber2.trim().length === 0)) {
+    if (
+      data.truckType === "Casoni" &&
+      (!data.plateNumber2 || data.plateNumber2.trim().length === 0)
+    ) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
         path: ["plateNumber2"],
@@ -77,19 +89,42 @@ function buildPayload(data: FormData, user: AuthUser): CreateCompanyPayload {
 }
 
 export default function TransporterForm({
+  documentSettingCode,
+  documentFiles: controlledFiles,
+  onDocumentFilesChange,
   user,
   onSubmit,
   isPending,
   onBack,
 }: {
+  documentSettingCode: string;
+  documentFiles?: Record<string, File | File[] | null>;
+  onDocumentFilesChange?: (
+    files: Record<string, File | File[] | null>,
+  ) => void;
   user: AuthUser;
   onSubmit: (data: CreateCompanyPayload) => void;
   isPending: boolean;
   onBack: () => void;
 }) {
+  const [step, setStep] = useState<TransporterStep>("vehicle");
+  const [internalFiles, setInternalFiles] = useState<
+    Record<string, File | File[] | null>
+  >({});
+  const documentFiles = controlledFiles ?? internalFiles;
+  const setDocumentFiles = onDocumentFilesChange ?? setInternalFiles;
+
+  const { data: uploadSetting, isLoading: loadingDocuments } = useQuery(
+    api.fileUploadSettings.getByCode.queryOptions({
+      input: { code: documentSettingCode },
+      refetchOnMount: false,
+    }),
+  );
+
   const {
     register,
     handleSubmit,
+    trigger,
     watch,
     control,
     formState: { errors },
@@ -108,187 +143,341 @@ export default function TransporterForm({
 
   const truckType = watch("truckType");
   const isCasoni = truckType === "Casoni";
+  const formValues = watch();
+  const hasDocuments = Boolean(uploadSetting?.fields?.length);
+  const totalSteps = 3;
+
+  const nextStep = async () => {
+    if (step === "documents") {
+      setStep("confirm");
+      return;
+    }
+    if (step === "confirm") {
+      handleSubmit((data) => onSubmit(buildPayload(data, user)))();
+      return;
+    }
+    const fields: (keyof FormData)[] = [
+      "tinNumber",
+      "fanNumber",
+      "truckType",
+      "plateNumber",
+      "vehicleModel",
+      "yearOfManufacturing",
+    ];
+    const isValid = await trigger(fields);
+    if (!isValid) return;
+    setStep("documents");
+  };
+
+  const skipDocuments = () => {
+    setStep("confirm");
+  };
+
+  const prevStep = () => {
+    if (step === "vehicle") {
+      onBack();
+    } else if (step === "documents") {
+      setStep("vehicle");
+    } else {
+      setStep("documents");
+    }
+  };
 
   return (
     <>
       <div className="mb-8">
         <button
           type="button"
-          onClick={onBack}
+          onClick={prevStep}
           className="mb-4 flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
         >
           <ChevronLeft className="size-4" />
           Change account type
         </button>
 
-        <div className="flex items-center justify-center relative px-2">
-          <div className="flex h-10 w-10 items-center justify-center rounded-full border-2 border-primary bg-background text-primary shadow-md">
-            <Truck className="size-5" />
-          </div>
+        <div className="flex items-center justify-between max-w-lg mx-auto relative px-2">
+          <div className="absolute top-1/2 left-0 w-full h-0.5 bg-border -translate-y-1/2 z-0" />
+          <StepIcon
+            icon={<Truck className="size-5" />}
+            active={step === "vehicle"}
+            completed={step !== "vehicle"}
+          />
+          <StepIcon
+            icon={<UploadCloud className="size-5" />}
+            active={step === "documents"}
+            completed={step === "confirm"}
+          />
+          <StepIcon
+            icon={<CheckCircle2 className="size-5" />}
+            active={step === "confirm"}
+            completed={false}
+          />
         </div>
         <p className="text-center text-sm text-muted-foreground mt-3">
-          Transporter Registration
+          {step === "vehicle" && `Step 1 of ${totalSteps} — Vehicle Information`}
+          {step === "documents" && `Step 2 of ${totalSteps} — Upload Documents (Optional)`}
+          {step === "confirm" && `Step 3 of ${totalSteps} — Review & Confirm`}
         </p>
       </div>
 
       <form
-        onSubmit={handleSubmit((data) => onSubmit(buildPayload(data, user)))}
+        onSubmit={(e) => e.preventDefault()}
         className="flex flex-col gap-4"
       >
-        {/* Personal Info (read-only) */}
-        <div className="rounded-lg bg-muted/30 p-4 text-sm text-muted-foreground">
-          <div className="flex items-center gap-2 mb-2">
-            <Info className="size-4" />
-            <span className="font-medium text-foreground">Account Holder</span>
+        {step === "vehicle" && (
+          <>
+            <div className="grid grid-cols-2 gap-4">
+              <Field data-invalid={Boolean(errors.tinNumber)}>
+                <FieldLabel>TIN Number (10 digits)</FieldLabel>
+                <Input
+                  placeholder="1234567890"
+                  maxLength={10}
+                  aria-invalid={Boolean(errors.tinNumber)}
+                  {...register("tinNumber")}
+                />
+                <FieldError errors={[errors.tinNumber]} />
+              </Field>
+
+              <Field data-invalid={Boolean(errors.fanNumber)}>
+                <FieldLabel>FAN Number (16 digits)</FieldLabel>
+                <Input
+                  placeholder="1234567890123456"
+                  maxLength={16}
+                  aria-invalid={Boolean(errors.fanNumber)}
+                  {...register("fanNumber")}
+                />
+                <FieldError errors={[errors.fanNumber]} />
+              </Field>
+            </div>
+
+            <hr className="border-border" />
+
+            <h3 className="text-sm font-semibold text-foreground">
+              Vehicle / Truck Information
+            </h3>
+
+            <Controller
+              name="truckType"
+              control={control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={Boolean(fieldState.error)}>
+                  <FieldLabel>Truck Type</FieldLabel>
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <SelectTrigger
+                      className={cn(
+                        "w-full",
+                        fieldState.error ? "border-destructive!" : "",
+                      )}
+                      aria-invalid={Boolean(fieldState.error)}
+                    >
+                      <SelectValue placeholder="Select truck type..." />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {TRUCK_TYPES.map((type) => (
+                        <SelectItem key={type} value={type}>
+                          {type}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            />
+
+            <div className="grid grid-cols-2 gap-4">
+              <Field data-invalid={Boolean(errors.plateNumber)}>
+                <FieldLabel>Plate Number{isCasoni ? " (Front)" : ""}</FieldLabel>
+                <Input
+                  placeholder={isCasoni ? "AA-12345" : "AA-12345"}
+                  aria-invalid={Boolean(errors.plateNumber)}
+                  {...register("plateNumber")}
+                />
+                <FieldError errors={[errors.plateNumber]} />
+              </Field>
+
+              {isCasoni && (
+                <Field data-invalid={Boolean(errors.plateNumber2)}>
+                  <FieldLabel>Plate Number (Trailer)</FieldLabel>
+                  <Input
+                    placeholder="AA-67890"
+                    aria-invalid={Boolean(errors.plateNumber2)}
+                    {...register("plateNumber2")}
+                  />
+                  <FieldError errors={[errors.plateNumber2]} />
+                </Field>
+              )}
+
+              {!isCasoni && (
+                <Field data-invalid={Boolean(errors.vehicleModel)}>
+                  <FieldLabel>Vehicle Model</FieldLabel>
+                  <Input
+                    placeholder="Isuzu FVR 2024"
+                    aria-invalid={Boolean(errors.vehicleModel)}
+                    {...register("vehicleModel")}
+                  />
+                  <FieldError errors={[errors.vehicleModel]} />
+                </Field>
+              )}
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              {isCasoni && (
+                <Field data-invalid={Boolean(errors.vehicleModel)}>
+                  <FieldLabel>Vehicle Model</FieldLabel>
+                  <Input
+                    placeholder="Isuzu FVR 2024"
+                    aria-invalid={Boolean(errors.vehicleModel)}
+                    {...register("vehicleModel")}
+                  />
+                  <FieldError errors={[errors.vehicleModel]} />
+                </Field>
+              )}
+
+              <Field data-invalid={Boolean(errors.yearOfManufacturing)}>
+                <FieldLabel>Year of Manufacturing</FieldLabel>
+                <Input
+                  placeholder="2023"
+                  maxLength={4}
+                  aria-invalid={Boolean(errors.yearOfManufacturing)}
+                  {...register("yearOfManufacturing")}
+                />
+                <FieldError errors={[errors.yearOfManufacturing]} />
+              </Field>
+            </div>
+          </>
+        )}
+
+        {step === "documents" && (
+          <>
+            {loadingDocuments ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="size-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : !uploadSetting ? (
+              <p className="text-sm text-muted-foreground text-center py-4">
+                No document requirements found for your account type.
+              </p>
+            ) : (
+              <div className="flex flex-col gap-6">
+                <SmartFileInput
+                  file={uploadSetting}
+                  value={documentFiles}
+                  onChange={setDocumentFiles}
+                />
+              </div>
+            )}
+          </>
+        )}
+
+        {step === "confirm" && (
+          <div className="space-y-4 rounded-xl border border-border bg-card p-4">
+            <div>
+              <h3 className="text-base font-semibold text-foreground">
+                Review your registration
+              </h3>
+              <p className="text-sm text-muted-foreground mt-1">
+                Confirm the details below before saving.
+              </p>
+            </div>
+
+            <div className="grid gap-3 md:grid-cols-2">
+              <ReviewRow label="TIN Number" value={formValues.tinNumber} />
+              <ReviewRow label="FAN Number" value={formValues.fanNumber} />
+              <ReviewRow label="Truck Type" value={formValues.truckType} />
+              <ReviewRow label="Plate Number" value={formValues.plateNumber} />
+              {formValues.plateNumber2 && (
+                <ReviewRow label="Plate (Trailer)" value={formValues.plateNumber2} />
+              )}
+              <ReviewRow label="Vehicle Model" value={formValues.vehicleModel} />
+              <ReviewRow label="Year" value={formValues.yearOfManufacturing} />
+            </div>
           </div>
-          <p>
-            {user.name?.en} — {user.email} — {user.phoneNumber}
-          </p>
-        </div>
-
-        <div className="grid grid-cols-2 gap-4">
-          <Field data-invalid={Boolean(errors.tinNumber)}>
-            <FieldLabel>TIN Number (10 digits)</FieldLabel>
-            <Input
-              placeholder="1234567890"
-              maxLength={10}
-              aria-invalid={Boolean(errors.tinNumber)}
-              {...register("tinNumber")}
-            />
-            <FieldError errors={[errors.tinNumber]} />
-          </Field>
-
-          <Field data-invalid={Boolean(errors.fanNumber)}>
-            <FieldLabel>FAN Number (16 digits)</FieldLabel>
-            <Input
-              placeholder="1234567890123456"
-              maxLength={16}
-              aria-invalid={Boolean(errors.fanNumber)}
-              {...register("fanNumber")}
-            />
-            <FieldError errors={[errors.fanNumber]} />
-          </Field>
-        </div>
-
-        <hr className="border-border" />
-
-        <h3 className="text-sm font-semibold text-foreground">
-          Vehicle / Truck Information
-        </h3>
-
-        <Controller
-          name="truckType"
-          control={control}
-          render={({ field, fieldState }) => (
-            <Field data-invalid={Boolean(fieldState.error)}>
-              <FieldLabel>Truck Type</FieldLabel>
-              <Select
-                value={field.value}
-                onValueChange={field.onChange}
-              >
-                <SelectTrigger
-                  className={cn(
-                    "w-full",
-                    fieldState.error ? "border-destructive!" : "",
-                  )}
-                  aria-invalid={Boolean(fieldState.error)}
-                >
-                  <SelectValue placeholder="Select truck type..." />
-                </SelectTrigger>
-                <SelectContent>
-                  {TRUCK_TYPES.map((type) => (
-                    <SelectItem key={type} value={type}>
-                      {type}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <FieldError errors={[fieldState.error]} />
-            </Field>
-          )}
-        />
-
-        <div className="grid grid-cols-2 gap-4">
-          <Field data-invalid={Boolean(errors.plateNumber)}>
-            <FieldLabel>
-              Plate Number{isCasoni ? " (Front)" : ""}
-            </FieldLabel>
-            <Input
-              placeholder={isCasoni ? "AA-12345" : "AA-12345"}
-              aria-invalid={Boolean(errors.plateNumber)}
-              {...register("plateNumber")}
-            />
-            <FieldError errors={[errors.plateNumber]} />
-          </Field>
-
-          {isCasoni && (
-            <Field data-invalid={Boolean(errors.plateNumber2)}>
-              <FieldLabel>Plate Number (Trailer)</FieldLabel>
-              <Input
-                placeholder="AA-67890"
-                aria-invalid={Boolean(errors.plateNumber2)}
-                {...register("plateNumber2")}
-              />
-              <FieldError errors={[errors.plateNumber2]} />
-            </Field>
-          )}
-
-          {!isCasoni && (
-            <Field data-invalid={Boolean(errors.vehicleModel)}>
-              <FieldLabel>Vehicle Model</FieldLabel>
-              <Input
-                placeholder="Isuzu FVR 2024"
-                aria-invalid={Boolean(errors.vehicleModel)}
-                {...register("vehicleModel")}
-              />
-              <FieldError errors={[errors.vehicleModel]} />
-            </Field>
-          )}
-        </div>
-
-        <div className="grid grid-cols-2 gap-4">
-          {isCasoni && (
-            <Field data-invalid={Boolean(errors.vehicleModel)}>
-              <FieldLabel>Vehicle Model</FieldLabel>
-              <Input
-                placeholder="Isuzu FVR 2024"
-                aria-invalid={Boolean(errors.vehicleModel)}
-                {...register("vehicleModel")}
-              />
-              <FieldError errors={[errors.vehicleModel]} />
-            </Field>
-          )}
-
-          <Field data-invalid={Boolean(errors.yearOfManufacturing)}>
-            <FieldLabel>Year of Manufacturing</FieldLabel>
-            <Input
-              placeholder="2023"
-              maxLength={4}
-              aria-invalid={Boolean(errors.yearOfManufacturing)}
-              {...register("yearOfManufacturing")}
-            />
-            <FieldError errors={[errors.yearOfManufacturing]} />
-          </Field>
-        </div>
+        )}
 
         <div className="flex items-center justify-between pt-2">
-          <Button type="button" variant="outline" onClick={onBack}>
-            <ChevronLeft />
-            Change Type
+          <Button type="button" variant="outline" onClick={prevStep}>
+            <ArrowLeft />
+            {step === "vehicle"
+              ? "Change Type"
+              : step === "confirm"
+                ? "Back to Documents"
+                : "Back"}
           </Button>
 
-          <Button type="submit" disabled={isPending}>
-            {isPending ? (
-              <>
-                <Loader2 className="animate-spin" />
-                Submitting...
-              </>
-            ) : (
-              "Complete Registration"
+          <div className="flex items-center gap-3">
+            {step === "documents" && (
+              <Button
+                type="button"
+                variant="outline"
+                onClick={skipDocuments}
+                disabled={isPending}
+              >
+                Skip for now
+              </Button>
             )}
-          </Button>
+
+            <Button
+              type="button"
+              onClick={step === "confirm" ? handleSubmit((data) => onSubmit(buildPayload(data, user))) : nextStep}
+              disabled={isPending || (step === "documents" && !hasDocuments && loadingDocuments)}
+            >
+              {isPending ? (
+                <>
+                  <Loader2 className="animate-spin" />
+                  Submitting...
+                </>
+              ) : step === "documents" ? (
+                "Continue"
+              ) : step === "confirm" ? (
+                "Submit Registration"
+              ) : (
+                <>
+                  Next Step
+                  <ArrowRight />
+                </>
+              )}
+            </Button>
+          </div>
         </div>
       </form>
     </>
   );
 }
+
+function ReviewRow({ label, value }: { label: string; value?: string | null }) {
+  return (
+    <div className="rounded-lg border border-border bg-muted/20 p-3">
+      <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        {label}
+      </div>
+      <div className="mt-1 text-sm font-medium text-foreground">
+        {value?.trim() ? value : "Not provided"}
+      </div>
+    </div>
+  );
+}
+
+function StepIcon({
+  icon,
+  active,
+  completed,
+}: {
+  icon: React.ReactNode;
+  active: boolean;
+  completed: boolean;
+}) {
+  return (
+    <div
+      className={`relative z-10 flex h-10 w-10 items-center justify-center rounded-full border-2 transition-all ${
+        completed
+          ? "bg-primary border-primary text-primary-foreground"
+          : active
+            ? "bg-background border-primary text-primary shadow-md"
+            : "bg-background border-border text-muted-foreground"
+      }`}
+    >
+      {completed ? <CheckCircle2 className="size-5" /> : icon}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/BookingContractPage.tsx b/apps/edr-freight-web/portal/src/pages/bookings/BookingContractPage.tsx
new file mode 100644
index 000000000..a8742c9b1
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingContractPage.tsx
@@ -0,0 +1,165 @@
+import { useCallback, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  ArrowLeft,
+  Download,
+  FileSignature,
+  Loader2,
+  Printer,
+} from "lucide-react";
+import toast from "react-hot-toast";
+
+import { ContractSignaturePad } from "@/components/bookings/ContractSignaturePad";
+import {
+  bookingsService,
+  type SignContractPayload,
+} from "@/services/bookings.service";
+import { Button } from "@edr/ui-common";
+
+export default function BookingContractPage() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const qc = useQueryClient();
+  const [signOpen, setSignOpen] = useState(false);
+  const [signerName, setSignerName] = useState("");
+  const [signatureData, setSignatureData] = useState<string | null>(null);
+
+  const { data, isLoading, isError, refetch } = useQuery({
+    queryKey: ["booking-contract-view", id],
+    queryFn: () => bookingsService.getContractView(id!),
+    enabled: Boolean(id),
+  });
+
+  const signMutation = useMutation({
+    mutationFn: (payload: SignContractPayload) =>
+      bookingsService.signContract(id!, payload),
+    onSuccess: () => {
+      toast.success("Contract signed successfully");
+      setSignOpen(false);
+      void refetch();
+      qc.invalidateQueries({ queryKey: ["booking", id] });
+    },
+    onError: () => toast.error("Failed to sign contract"),
+  });
+
+  const downloadPdf = useCallback(async () => {
+    if (!id) return;
+    try {
+      const blob = await bookingsService.downloadContractDocument(id);
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `contract-${data?.reference ?? id}.pdf`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch {
+      toast.error("PDF not ready yet. Contact EDR if this persists.");
+    }
+  }, [id, data?.reference]);
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-[40vh] items-center justify-center">
+        <Loader2 className="size-8 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  if (isError || !data) {
+    return (
+      <div className="p-8">
+        <p className="text-muted-foreground">Could not load contract.</p>
+        <Button variant="outline" className="mt-4" onClick={() => navigate(-1)}>
+          Go back
+        </Button>
+      </div>
+    );
+  }
+
+  const bodyHtml = extractBodyHtml(data.html);
+
+  return (
+    <div className="min-h-screen bg-muted/30 p-4 md:p-8">
+      <div className="mx-auto max-w-4xl">
+        <div className="mb-4 flex flex-wrap items-center justify-between gap-3 print:hidden">
+          <Button variant="ghost" size="sm" onClick={() => navigate(`/bookings/${id}`)}>
+            <ArrowLeft className="mr-2 size-4" />
+            Back to booking
+          </Button>
+          <div className="flex flex-wrap gap-2">
+            <Button variant="outline" size="sm" onClick={() => window.print()}>
+              <Printer className="mr-2 size-4" />
+              Print
+            </Button>
+            <Button variant="outline" size="sm" onClick={downloadPdf}>
+              <Download className="mr-2 size-4" />
+              PDF
+            </Button>
+            {data.canSignCustomer && (
+              <Button size="sm" onClick={() => setSignOpen(true)}>
+                <FileSignature className="mr-2 size-4" />
+                Sign contract
+              </Button>
+            )}
+          </div>
+        </div>
+
+        <article
+          className="contract-document rounded-lg border bg-white p-6 shadow-sm print:shadow-none md:p-10"
+          dangerouslySetInnerHTML={{ __html: bodyHtml }}
+        />
+      </div>
+
+      {signOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 print:hidden">
+          <div className="w-full max-w-md rounded-xl bg-background p-6 shadow-xl">
+            <h2 className="text-lg font-semibold">Sign contract</h2>
+            <p className="mt-1 text-sm text-muted-foreground">
+              {data.reference} — your signature will be stored securely.
+            </p>
+            <div className="mt-4 space-y-3">
+              <label className="text-sm font-medium" htmlFor="portalSigner">
+                Full name
+              </label>
+              <input
+                id="portalSigner"
+                className="w-full rounded-md border px-3 py-2 text-sm"
+                value={signerName}
+                onChange={(e) => setSignerName(e.target.value)}
+              />
+              <ContractSignaturePad onChange={setSignatureData} />
+            </div>
+            <div className="mt-6 flex justify-end gap-2">
+              <Button variant="outline" onClick={() => setSignOpen(false)}>
+                Cancel
+              </Button>
+              <Button
+                disabled={
+                  signMutation.isPending ||
+                  !signatureData ||
+                  !signerName.trim()
+                }
+                onClick={() =>
+                  signMutation.mutate({
+                    role: "CUSTOMER",
+                    signatureImageBase64: signatureData!,
+                    signerDisplayName: signerName.trim(),
+                    consentText: "I agree to the terms of this contract.",
+                  })
+                }
+              >
+                Confirm signature
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function extractBodyHtml(fullHtml: string): string {
+  const match = fullHtml.match(/<body[^>]*>([\s\S]*)<\/body>/i);
+  return match ? match[1] : fullHtml;
+}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx
index 6a4f13227..fc725c368 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx
@@ -1,6 +1,8 @@
+import { useMemo, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
+  AlertCircle,
   Calendar,
   MapPin,
   Package,
@@ -14,7 +16,6 @@ import {
   ShieldCheck,
   AlertTriangle,
   Info,
-  Clock,
   Layers,
   CheckCircle2,
   History,
@@ -24,54 +25,204 @@ import {
   FileSignature,
   PackageCheck,
   LoaderCircle,
+  DollarSign,
+  Upload,
+  XCircle,
+  Building2,
+  FileUp,
 } from "lucide-react";
 
+import { format } from "date-fns";
+
 import Breadcrumbs from "@/components/Breadcrumbs";
 import { api } from "@/services/api";
 import type { Freight } from "@edr/types";
-import { 
-  Card, 
-  CardHeader, 
-  CardTitle, 
-  CardDescription, 
-  CardContent, 
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
   Badge,
+  Button,
   Separator,
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogClose,
 } from "@edr/ui-common";
 import { cn } from "@/lib/utils";
+import useAuth from "@/hooks/useAuth";
 
 const PROGRESS_STAGES = [
-  { label: "Request", icon: FileText, statuses: ["DRAFT"] },
-  { label: "Approval", icon: ClipboardCheck, statuses: ["CONFIRMED"] },
-  { label: "In Transit", icon: Train, statuses: ["IN_TRANSIT"] },
-  { label: "Complete", icon: PackageCheck, statuses: ["DELIVERED"] },
+  { label: "Request", icon: FileText, statuses: ["DRAFT", "CHANGES_REQUESTED"] },
+  { label: "Submitted", icon: ClipboardCheck, statuses: ["SUBMITTED", "PENDING_APPROVAL"] },
+  { label: "Approved", icon: ShieldCheck, statuses: ["APPROVED_PENDING_SIGNATURE", "APPROVED", "CONTRACT_READY", "SIGNED_CUSTOMER", "FULLY_EXECUTED"] },
+  { label: "In Transit", icon: Train, statuses: ["PNR_GENERATED", "PAYMENT_VERIFICATION_IN_PROGRESS", "PAID", "IN_TRANSIT", "PENDING_CONSOLIDATION", "CONSOLIDATED"] },
+  { label: "Complete", icon: PackageCheck, statuses: ["COMPLETED", "DELIVERED"] },
 ];
 
-const STATUS_MAP: Record<string, { title: string; description: string; color: string; stage: number }> = {
-  DRAFT: { title: "Drafting Request", description: "Booking is being prepared and has not been submitted.", color: "text-slate-500", stage: 0 },
-  CONFIRMED: { title: "Booking Confirmed", description: "Booking has been confirmed and approved.", color: "text-emerald-600", stage: 1 },
-  IN_TRANSIT: { title: "Cargo Moving", description: "Shipment is currently moving through the rail network.", color: "text-sky-600", stage: 2 },
-  DELIVERED: { title: "Service Complete", description: "Cargo delivered and service successfully terminated.", color: "text-emerald-600", stage: 3 },
-  CANCELLED: { title: "Cancelled", description: "This booking process has been terminated.", color: "text-red-600", stage: -1 },
+const STATUS_MAP: Record<
+  string,
+  { title: string; description: string; color: string; stage: number }
+> = {
+  DRAFT: {
+    title: "Drafting Request",
+    description: "Booking is being prepared and has not been submitted.",
+    color: "text-muted-foreground",
+    stage: 0,
+  },
+  CHANGES_REQUESTED: {
+    title: "Changes Requested",
+    description: "Staff has requested changes. Please review and resubmit.",
+    color: "text-amber-600",
+    stage: 0,
+  },
+  SUBMITTED: {
+    title: "Submitted",
+    description: "Your booking has been submitted for review.",
+    color: "text-primary",
+    stage: 1,
+  },
+  PENDING_APPROVAL: {
+    title: "Pending Approval",
+    description: "Booking is in the approval process.",
+    color: "text-primary",
+    stage: 1,
+  },
+  APPROVED_PENDING_SIGNATURE: {
+    title: "Awaiting Signature",
+    description: "Approved — pending contract signature.",
+    color: "text-primary",
+    stage: 2,
+  },
+  APPROVED: {
+    title: "Approved",
+    description: "Booking has been fully approved.",
+    color: "text-primary",
+    stage: 2,
+  },
+  CONTRACT_READY: {
+    title: "Contract Ready",
+    description: "Contract is available for review and signature.",
+    color: "text-primary",
+    stage: 2,
+  },
+  SIGNED_CUSTOMER: {
+    title: "Customer Signed",
+    description: "Customer has signed. Awaiting staff signature.",
+    color: "text-primary",
+    stage: 2,
+  },
+  FULLY_EXECUTED: {
+    title: "Fully Executed",
+    description: "Contract has been fully signed and executed.",
+    color: "text-primary",
+    stage: 2,
+  },
+  PNR_GENERATED: {
+    title: "PNR Generated",
+    description: "Payment reference number generated.",
+    color: "text-primary",
+    stage: 3,
+  },
+  PAYMENT_VERIFICATION_IN_PROGRESS: {
+    title: "Payment Verification",
+    description: "Payment is being verified.",
+    color: "text-primary",
+    stage: 3,
+  },
+  PAID: {
+    title: "Paid",
+    description: "Payment has been confirmed.",
+    color: "text-primary",
+    stage: 3,
+  },
+  IN_TRANSIT: {
+    title: "Cargo Moving",
+    description: "Shipment is currently moving through the rail network.",
+    color: "text-primary",
+    stage: 3,
+  },
+  PENDING_CONSOLIDATION: {
+    title: "Pending Consolidation",
+    description: "Awaiting consolidation partner.",
+    color: "text-primary",
+    stage: 3,
+  },
+  CONSOLIDATED: {
+    title: "Consolidated",
+    description: "Cargo has been consolidated with partner shipment.",
+    color: "text-primary",
+    stage: 3,
+  },
+  COMPLETED: {
+    title: "Service Complete",
+    description: "Cargo delivered and service successfully terminated.",
+    color: "text-primary",
+    stage: 4,
+  },
+  DELIVERED: {
+    title: "Service Complete",
+    description: "Cargo delivered and service successfully terminated.",
+    color: "text-primary",
+    stage: 4,
+  },
+  REJECTED: {
+    title: "Rejected",
+    description: "This booking request has been rejected.",
+    color: "text-destructive",
+    stage: -1,
+  },
+  CANCELLED: {
+    title: "Cancelled",
+    description: "This booking process has been terminated.",
+    color: "text-destructive",
+    stage: -1,
+  },
 };
 
+const REQUIRED_DOC_FIELDS = [
+  { key: "commercial_invoice", label: "Commercial Invoice" },
+  { key: "packing_list", label: "Packing List" },
+  { key: "certificate_of_origin", label: "Certificate of Origin" },
+  { key: "letter_of_credit", label: "Letter of Credit / LC" },
+];
+
 export default function BookingDetailPage() {
   const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
+  const queryClient = useQueryClient();
 
-  const { data: booking, isLoading, isError, error } = useQuery(
+  const {
+    data: booking,
+    isLoading,
+    isError,
+    error,
+  } = useQuery(
     api.bookings.get.queryOptions({
       input: { id: id! },
       enabled: !!id,
     }),
   );
 
+  const refetchBooking = () => {
+    queryClient.invalidateQueries({
+      queryKey: api.bookings.get.queryKey({ id: id! }),
+    });
+  };
+
   if (isLoading) {
     return (
       <div className="container mx-auto flex items-center justify-center p-12">
         <div className="flex flex-col items-center gap-4">
           <LoaderCircle className="size-8 animate-spin text-primary" />
-          <p className="text-sm text-muted-foreground">Loading booking details…</p>
+          <p className="text-sm text-muted-foreground">
+            Loading booking details…
+          </p>
         </div>
       </div>
     );
@@ -81,14 +232,16 @@ export default function BookingDetailPage() {
     return (
       <div className="container mx-auto p-6">
         <Card className="flex flex-col items-center p-12 text-center">
-          <div className="flex size-16 items-center justify-center rounded-full bg-red-50 text-red-400">
+          <div className="flex size-16 items-center justify-center rounded-full bg-destructive/10 text-destructive">
             <AlertTriangle className="size-8" />
           </div>
-          <h1 className="mt-4 text-2xl font-bold text-slate-900">
+          <h1 className="mt-4 text-2xl font-bold text-foreground">
             Failed to load booking
           </h1>
           <p className="mt-2 text-sm text-muted-foreground">
-            {error instanceof Error ? error.message : "An unexpected error occurred."}
+            {error instanceof Error
+              ? error.message
+              : "An unexpected error occurred."}
           </p>
         </Card>
       </div>
@@ -99,10 +252,10 @@ export default function BookingDetailPage() {
     return (
       <div className="container mx-auto p-6">
         <Card className="flex flex-col items-center p-12 text-center">
-          <div className="flex size-16 items-center justify-center rounded-full bg-slate-100 text-slate-400">
+          <div className="flex size-16 items-center justify-center rounded-full bg-muted text-muted-foreground">
             <Package className="size-8" />
           </div>
-          <h1 className="mt-4 text-2xl font-bold text-slate-900">
+          <h1 className="mt-4 text-2xl font-bold text-foreground">
             Booking not found
           </h1>
         </Card>
@@ -110,17 +263,553 @@ export default function BookingDetailPage() {
     );
   }
 
+  if (booking.status === "DRAFT" || booking.status === "CHANGES_REQUESTED") {
+    return (
+      <DraftBookingView booking={booking} onBookingUpdated={refetchBooking} />
+    );
+  }
+
+  return <ReadonlyBookingView booking={booking} />;
+}
+
+function DraftBookingView({
+  booking,
+  onBookingUpdated,
+}: {
+  booking: Freight.IBooking;
+  onBookingUpdated: () => void;
+}) {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { customer } = useAuth();
+  const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({});
+  const documentsRef = useRef<HTMLDivElement>(null);
+
+  const [selectedFiles, setSelectedFiles] = useState<
+    Record<string, File | null>
+  >({});
+  const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
+  const [cancelReason, setCancelReason] = useState("");
+  const [docError, setDocError] = useState("");
+
+  const anyFileSelected = Object.values(selectedFiles).some(Boolean);
+
+  const uploadedCodes = useMemo(
+    () => new Set(booking.files?.map((f) => f.code) ?? []),
+    [booking.files],
+  );
+
+  const pricingQuery = useQuery(
+    api.bookings.generatePrice.queryOptions({
+      input: { id: booking.id },
+      enabled: !!booking.id,
+    }),
+  );
+
+  const uploadMutation = useMutation({
+    mutationFn: (files: Record<string, File | File[] | null>) =>
+      api.bookings.uploadDocuments.call({ id: booking.id, files }),
+    onSuccess: () => {
+      setSelectedFiles({});
+      setDocError("");
+      onBookingUpdated();
+    },
+  });
+
+  const submitMutation = useMutation({
+    mutationFn: () => api.bookings.submit.call({ id: booking.id }),
+    onSuccess: () => {
+      onBookingUpdated();
+      queryClient.invalidateQueries({ queryKey: api.bookings.list.queryKey() });
+    },
+  });
+
+  const cancelMutation = useMutation({
+    mutationFn: (reason: string) =>
+      api.bookings.cancel.call({ id: booking.id, reason }),
+    onSuccess: () => {
+      setCancelDialogOpen(false);
+      onBookingUpdated();
+    },
+  });
+
+  function handleFileSelect(key: string, file: File | null) {
+    setSelectedFiles((prev) => ({ ...prev, [key]: file }));
+  }
+
+  function handleUploadAll() {
+    const filesToUpload: Record<string, File | null> = {};
+    for (const doc of REQUIRED_DOC_FIELDS) {
+      if (selectedFiles[doc.key]) {
+        filesToUpload[doc.key] = selectedFiles[doc.key]!;
+      }
+    }
+    if (Object.keys(filesToUpload).length === 0) return;
+    uploadMutation.mutate(filesToUpload);
+  }
+
+  function handleCancel() {
+    const reason = cancelReason.trim() || "Cancelled by customer";
+    cancelMutation.mutate(reason);
+  }
+
+  function handleSubmitRequest() {
+    const missing = REQUIRED_DOC_FIELDS.filter(
+      (doc) => !uploadedCodes.has(doc.key),
+    );
+    if (missing.length > 0) {
+      setDocError("Please upload all required documents before submitting.");
+      documentsRef.current?.scrollIntoView({ behavior: "smooth" });
+      return;
+    }
+    submitMutation.mutate();
+  }
+
+  const companyName = (customer as any)?.company?.name ?? "—";
+  const companyTin = (customer as any)?.company?.tin ?? "—";
+  const contactName = (customer as any)?.profile
+    ? `${(customer as any).profile.firstName ?? ""} ${(customer as any).profile.lastName ?? ""}`.trim() ||
+    "—"
+    : "—";
+  const contactEmail = (customer as any)?.profile?.email ?? "—";
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="flex flex-col gap-6">
+        <Breadcrumbs
+          items={[
+            { label: "Bookings", href: "/bookings" },
+            { label: booking.reference },
+          ]}
+        />
+
+        <Card>
+          <CardHeader>
+            <div className="flex items-center gap-6">
+              <div className="flex size-14 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
+                <Package className="size-6" />
+              </div>
+              <div className="flex flex-1 flex-col gap-1">
+                <div className="flex items-center gap-3">
+                  <h1 className="text-2xl font-black tracking-tight text-foreground">
+                    {booking.reference}
+                  </h1>
+                  <StatusBadge status={booking.status} />
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  {booking.status === "CHANGES_REQUESTED"
+                    ? "Staff has requested changes. Please review, update, and resubmit."
+                    : "Complete the steps below to submit your booking request."}
+                </p>
+              </div>
+
+              <Button
+                type="button"
+                onClick={handleSubmitRequest}
+                disabled={submitMutation.isPending}
+              >
+                {submitMutation.isPending ? (
+                  <LoaderCircle className="animate-spin" />
+                ) : (
+                  <CheckCircle2 />
+                )}
+                {submitMutation.isPending
+                  ? "Submitting..."
+                  : "Confirm Booking Request"}
+              </Button>
+            </div>
+          </CardHeader>
+        </Card>
+
+        {booking.status === "CHANGES_REQUESTED" && booking.latestChangeRequestNote && (
+          <div className="flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">
+            <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />
+            <div>
+              <p className="font-semibold">Changes Requested by Staff</p>
+              <p className="mt-1 text-amber-700">{booking.latestChangeRequestNote}</p>
+            </div>
+          </div>
+        )}
+
+        {pricingQuery.isError && (
+          <div className="flex items-start gap-3 rounded-xl border border-destructive/20 bg-destructive/10 p-4 text-sm text-destructive">
+            <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
+            <div>
+              <p className="font-semibold">Pricing failed</p>
+              <p className="mt-1 text-destructive/80">
+                {pricingQuery.error instanceof Error
+                  ? pricingQuery.error.message
+                  : "An unexpected error occurred."}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {uploadMutation.isError && (
+          <div className="flex items-start gap-3 rounded-xl border border-destructive/20 bg-destructive/10 p-4 text-sm text-destructive">
+            <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
+            <div>
+              <p className="font-semibold">Document upload failed</p>
+              <p className="mt-1 text-destructive/80">
+                {uploadMutation.error instanceof Error
+                  ? uploadMutation.error.message
+                  : "An unexpected error occurred."}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {submitMutation.isError && (
+          <div className="flex items-start gap-3 rounded-xl border border-destructive/20 bg-destructive/10 p-4 text-sm text-destructive">
+            <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
+            <div>
+              <p className="font-semibold">Submission failed</p>
+              <p className="mt-1 text-destructive/80">
+                {submitMutation.error instanceof Error
+                  ? submitMutation.error.message
+                  : "An unexpected error occurred."}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {cancelMutation.isError && (
+          <div className="flex items-start gap-3 rounded-xl border border-destructive/20 bg-destructive/10 p-4 text-sm text-destructive">
+            <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
+            <div>
+              <p className="font-semibold">Cancel failed</p>
+              <p className="mt-1 text-destructive/80">
+                {cancelMutation.error instanceof Error
+                  ? cancelMutation.error.message
+                  : "An unexpected error occurred."}
+              </p>
+            </div>
+          </div>
+        )}
+
+        <Card
+          className={cn(
+            pricingQuery.isSuccess ? "border-primary/20 bg-primary/5" : "",
+          )}
+        >
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <DollarSign className="size-4 text-primary" />
+              Pricing Estimation
+            </CardTitle>
+            <CardDescription>
+              Price estimate based on your booking details.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {pricingQuery.isLoading ? (
+              <div className="flex flex-col items-center gap-3 py-6 text-center">
+                <LoaderCircle className="size-6 animate-spin text-primary" />
+                <p className="text-xs text-muted-foreground">
+                  Calculating price…
+                </p>
+              </div>
+            ) : pricingQuery.isError ? (
+              <div className="flex flex-col items-center gap-3 py-6 text-center">
+                <p className="text-xs text-muted-foreground">
+                  Could not calculate price.
+                </p>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => pricingQuery.refetch()}
+                >
+                  Retry
+                </Button>
+              </div>
+            ) : pricingQuery.data ? (
+              <div className="flex flex-col gap-4">
+                <div className="overflow-hidden rounded-lg border">
+                  <table className="w-full text-left text-xs">
+                    <thead className="bg-muted text-muted-foreground">
+                      <tr>
+                        <th className="px-4 py-2 font-semibold">Description</th>
+                        <th className="px-4 py-2 font-semibold text-right">
+                          Amount
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y">
+                      {pricingQuery.data.lineItems.map((item, i) => (
+                        <tr key={i}>
+                          <td className="px-4 py-2 text-foreground">
+                            {item.description}
+                          </td>
+                          <td className="px-4 py-2 text-right font-medium text-foreground">
+                            {item.amount.toLocaleString()} {item.currency}
+                          </td>
+                        </tr>
+                      ))}
+                      <tr className="bg-primary/5 font-bold">
+                        <td className="px-4 py-2 text-foreground">
+                          Total Estimated Cost
+                        </td>
+                        <td className="px-4 py-2 text-right text-foreground">
+                          {pricingQuery.data.totalAmount.toLocaleString()}{" "}
+                          {pricingQuery.data.currency}
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+
+                {pricingQuery.data.warnings.length > 0 && (
+                  <div className="flex flex-col gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3">
+                    {pricingQuery.data.warnings.map((w, i) => (
+                      <p
+                        key={i}
+                        className="flex items-start gap-2 text-xs text-amber-800"
+                      >
+                        <AlertTriangle className="mt-0.5 size-3 shrink-0" />
+                        {w}
+                      </p>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ) : null}
+          </CardContent>
+        </Card>
+
+        <Card ref={documentsRef}>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <FileText className="size-4 text-primary" />
+              Required Documents
+            </CardTitle>
+            <CardDescription>
+              Provide the necessary documents for this booking. Some information
+              is pre-filled from your company profile.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-6">
+            {docError && (
+              <div className="flex items-start gap-3 rounded-xl border border-destructive/20 bg-destructive/10 p-4 text-sm text-destructive">
+                <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
+                <p className="font-semibold">{docError}</p>
+              </div>
+            )}
+            <div className="rounded-lg border border-primary/10 bg-primary/[0.02] p-4">
+              <h3 className="mb-3 flex items-center gap-2 text-xs font-bold uppercase tracking-wide text-foreground">
+                <Building2 className="size-3.5 text-primary" />
+                Company Information (from profile)
+              </h3>
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                <InfoItem label="Company Name" value={companyName} />
+                <InfoItem label="TIN / VAT" value={companyTin} />
+                <InfoItem label="Contact Person" value={contactName} />
+                <InfoItem label="Contact Email" value={contactEmail} />
+              </div>
+              <p className="mt-3 text-xs text-muted-foreground">
+                To update your company information, go to{" "}
+                <button
+                  type="button"
+                  className="text-primary underline-offset-2 hover:underline"
+                  onClick={() => navigate("/settings")}
+                >
+                  Settings
+                </button>
+                .
+              </p>
+            </div>
+
+            <Separator />
+
+            <div>
+              <h3 className="mb-3 flex items-center gap-2 text-xs font-bold uppercase tracking-wide text-foreground">
+                <FileUp className="size-3.5 text-primary" />
+                Upload Booking Documents
+              </h3>
+              <div className="flex flex-col gap-4">
+                {REQUIRED_DOC_FIELDS.map((doc) => {
+                  const isUploaded = uploadedCodes.has(doc.key);
+                  return (
+                    <div
+                      key={doc.key}
+                      className="flex flex-col gap-1.5 sm:flex-row sm:items-center sm:justify-between"
+                    >
+                      <label className="flex items-center gap-2 text-xs font-medium text-foreground">
+                        {isUploaded && (
+                          <CheckCircle2 className="size-3.5 text-primary" />
+                        )}
+                        {doc.label}
+                      </label>
+                      <div className="flex items-center gap-2">
+                        {isUploaded ? (
+                          <span className="inline-flex items-center gap-1 rounded-lg border border-primary/20 bg-primary/10 px-3 py-1.5 text-xs font-medium text-primary">
+                            <CheckCircle2 className="size-3" />
+                            Uploaded
+                          </span>
+                        ) : (
+                          <>
+                            <input
+                              ref={(el) => {
+                                fileInputRefs.current[doc.key] = el;
+                              }}
+                              type="file"
+                              accept=".pdf,.jpg,.jpeg,.png"
+                              className="hidden"
+                              onChange={(e) => {
+                                handleFileSelect(
+                                  doc.key,
+                                  e.target.files?.[0] ?? null,
+                                );
+                              }}
+                            />
+                            <button
+                              type="button"
+                              className={cn(
+                                "inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors",
+                                selectedFiles[doc.key]
+                                  ? "border-primary/20 bg-primary/10 text-primary"
+                                  : "border-border bg-background text-muted-foreground hover:border-foreground/20 hover:text-foreground",
+                              )}
+                              onClick={() =>
+                                fileInputRefs.current[doc.key]?.click()
+                              }
+                            >
+                              <Upload className="size-3" />
+                              {selectedFiles[doc.key]
+                                ? selectedFiles[doc.key]!.name
+                                : "Choose file"}
+                            </button>
+                            {selectedFiles[doc.key] && (
+                              <button
+                                type="button"
+                                className="text-muted-foreground hover:text-destructive"
+                                onClick={() => handleFileSelect(doc.key, null)}
+                              >
+                                <XCircle className="size-4" />
+                              </button>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+
+              <div className="mt-6">
+                <Button
+                  type="button"
+                  onClick={handleUploadAll}
+                  disabled={!anyFileSelected || uploadMutation.isPending}
+                >
+                  {uploadMutation.isPending ? (
+                    <LoaderCircle className="mr-1 h-4 w-4 animate-spin" />
+                  ) : (
+                    <Upload className="mr-1 h-4 w-4" />
+                  )}
+                  {uploadMutation.isPending
+                    ? "Uploading..."
+                    : anyFileSelected
+                      ? "Upload Selected Documents"
+                      : "Select files to upload"}
+                </Button>
+                {uploadMutation.isSuccess && (
+                  <p className="mt-2 flex items-center gap-1.5 text-xs text-primary">
+                    <CheckCircle2 className="size-3" />
+                    Documents uploaded successfully
+                  </p>
+                )}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="border-destructive/20">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base text-destructive">
+              <AlertTriangle className="size-4" />
+              Cancel Booking
+            </CardTitle>
+            <CardDescription>
+              If you no longer need this booking, you can cancel it.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-3">
+            <p className="text-xs text-muted-foreground">
+              Cancelling will terminate this booking request and cannot be
+              undone.
+            </p>
+            <Dialog open={cancelDialogOpen} onOpenChange={setCancelDialogOpen}>
+              <DialogTrigger asChild>
+                <Button
+                  type="button"
+                  variant="destructive"
+                  className="self-start"
+                >
+                  <XCircle className="mr-1 h-4 w-4" />
+                  Cancel Booking
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>Cancel Booking</DialogTitle>
+                  <DialogDescription>
+                    Are you sure you want to cancel this booking? This action
+                    cannot be undone.
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="flex flex-col gap-3 py-2">
+                  <label className="text-xs font-medium text-foreground">
+                    Reason for cancellation
+                  </label>
+                  <input
+                    type="text"
+                    placeholder="Optional — provide a reason"
+                    className="rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-destructive/50"
+                    value={cancelReason}
+                    onChange={(e) => setCancelReason(e.target.value)}
+                    autoFocus
+                  />
+                </div>
+                <DialogFooter>
+                  <DialogClose asChild>
+                    <Button type="button" variant="outline">
+                      Keep Booking
+                    </Button>
+                  </DialogClose>
+                  <Button
+                    type="button"
+                    variant="destructive"
+                    onClick={handleCancel}
+                    disabled={cancelMutation.isPending}
+                  >
+                    {cancelMutation.isPending ? (
+                      <LoaderCircle className="mr-1 h-4 w-4 animate-spin" />
+                    ) : (
+                      <XCircle className="mr-1 h-4 w-4" />
+                    )}
+                    Yes, Cancel Booking
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+function ReadonlyBookingView({ booking }: { booking: Freight.IBooking }) {
+  const navigate = useNavigate();
+
   const normalizedStatus = booking.status as keyof typeof STATUS_MAP;
   const statusConfig = STATUS_MAP[normalizedStatus] || STATUS_MAP.DRAFT;
   const currentStageIndex = statusConfig.stage;
 
-  const containerCount = booking.containers?.reduce((sum, c) => sum + c.qty, 0) ?? 0;
-  const containerType = booking.containers?.[0]?.type ?? null;
-
   return (
     <div className="container mx-auto max-w-7xl px-4 py-8">
       <div className="flex flex-col gap-8">
-        
         <Breadcrumbs
           items={[
             { label: "Bookings", href: "/bookings" },
@@ -144,7 +833,10 @@ export default function BookingDetailPage() {
                 <div className="flex items-center gap-3 text-xs text-muted-foreground">
                   <span className="flex items-center gap-1">
                     <Calendar className="size-3" />
-                    {booking.scheduledDate ?? booking.createdAt}
+                    {format(
+                      new Date(booking.scheduledDate ?? booking.createdAt),
+                      "MMM d, yyyy HH:mm",
+                    )}
                   </span>
                 </div>
               </div>
@@ -152,41 +844,84 @@ export default function BookingDetailPage() {
           </CardHeader>
         </Card>
 
+        {(booking.status === "CONTRACT_READY" ||
+          booking.status === "SIGNED_CUSTOMER" ||
+          booking.status === "FULLY_EXECUTED") && (
+            <Card className="border-primary/30 bg-primary/5">
+              <CardContent className="flex flex-col gap-4 p-6 sm:flex-row sm:items-center sm:justify-between">
+                <div>
+                  <p className="font-semibold text-foreground">Contract ready</p>
+                  <p className="text-sm text-muted-foreground">
+                    Review the agreement and apply your digital signature.
+                  </p>
+                </div>
+                <button
+                  type="button"
+                  className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground"
+                  onClick={() => navigate(`/bookings/${booking.id}/contract`)}
+                >
+                  <FileSignature className="size-4" />
+                  View &amp; sign contract
+                </button>
+              </CardContent>
+            </Card>
+          )}
+
         <Card>
           <CardHeader>
             <CardTitle className="flex items-center gap-2 text-base">
               <History className="size-4 text-primary" />
               Booking Status Lifecycle
             </CardTitle>
-            <CardDescription>Track the journey from request to completion</CardDescription>
+            <CardDescription>
+              Track the journey from request to completion
+            </CardDescription>
           </CardHeader>
           <CardContent className="flex flex-col gap-8">
             <div className="relative flex w-full justify-between px-2">
               <div className="absolute top-4 left-0 h-0.5 w-full bg-muted">
-                <div 
-                  className="h-full bg-primary transition-all duration-500" 
-                  style={{ width: currentStageIndex >= 0 ? `${(currentStageIndex / (PROGRESS_STAGES.length - 1)) * 100}%` : '0%' }}
+                <div
+                  className="h-full bg-primary transition-all duration-500"
+                  style={{
+                    width:
+                      currentStageIndex >= 0
+                        ? `${(currentStageIndex / (PROGRESS_STAGES.length - 1)) * 100}%`
+                        : "0%",
+                  }}
                 />
               </div>
 
               {PROGRESS_STAGES.map((stage, idx) => {
                 const isCompleted = idx < currentStageIndex;
                 const isActive = idx === currentStageIndex;
-                
+
                 return (
-                  <div key={stage.label} className="relative z-10 flex flex-col items-center gap-2">
-                    <div className={cn(
-                      "flex size-8 items-center justify-center rounded-full border-2 transition-all duration-300 bg-background",
-                      isCompleted ? "border-primary text-primary" : 
-                      isActive ? "border-primary text-primary shadow-[0_0_10px_rgba(16,185,129,0.3)] scale-110" : 
-                      "border-muted text-muted-foreground"
-                    )}>
-                      {isCompleted ? <CheckCircle2 className="size-4" /> : <stage.icon className="size-4" />}
+                  <div
+                    key={stage.label}
+                    className="relative z-10 flex flex-col items-center gap-2"
+                  >
+                    <div
+                      className={cn(
+                        "flex size-8 items-center justify-center rounded-full border-2 transition-all duration-300 bg-background",
+                        isCompleted
+                          ? "border-primary text-primary"
+                          : isActive
+                            ? "border-primary text-primary shadow-[0_0_10px_rgba(16,185,129,0.3)] scale-110"
+                            : "border-muted text-muted-foreground",
+                      )}
+                    >
+                      {isCompleted ? (
+                        <CheckCircle2 className="size-4" />
+                      ) : (
+                        <stage.icon className="size-4" />
+                      )}
                     </div>
-                    <span className={cn(
-                      "text-[9px] font-bold uppercase tracking-widest",
-                      isActive ? "text-primary" : "text-muted-foreground"
-                    )}>
+                    <span
+                      className={cn(
+                        "text-xs font-bold uppercase tracking-widest",
+                        isActive ? "text-primary" : "text-muted-foreground",
+                      )}
+                    >
                       {stage.label}
                     </span>
                   </div>
@@ -195,26 +930,40 @@ export default function BookingDetailPage() {
             </div>
 
             <div className="flex flex-col gap-4 rounded-xl border border-border/50 bg-muted/20 p-5 md:flex-row md:items-center">
-               <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-background shadow-sm">
-                  {normalizedStatus === "CANCELLED" ? <AlertTriangle className="size-5 text-red-500" /> : <Info className="size-5 text-primary" />}
-               </div>
-               <div className="flex flex-col gap-0.5">
-                  <h4 className={cn("text-sm font-black uppercase tracking-tight", statusConfig.color)}>
-                    {statusConfig.title}
-                  </h4>
-                  <p className="text-xs font-medium text-muted-foreground">
-                    {statusConfig.description}
-                  </p>
-               </div>
-               {normalizedStatus !== "CANCELLED" && normalizedStatus !== "DELIVERED" && (
-                 <div className="ml-auto flex items-center gap-4 border-l border-border pl-6">
+              <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-background shadow-sm">
+                {normalizedStatus === "CANCELLED" ? (
+                  <AlertTriangle className="size-5 text-destructive" />
+                ) : (
+                  <Info className="size-5 text-primary" />
+                )}
+              </div>
+              <div className="flex flex-col gap-0.5">
+                <h4
+                  className={cn(
+                    "text-sm font-black uppercase tracking-tight",
+                    statusConfig.color,
+                  )}
+                >
+                  {statusConfig.title}
+                </h4>
+                <p className="text-xs font-medium text-muted-foreground">
+                  {statusConfig.description}
+                </p>
+              </div>
+              {normalizedStatus !== "CANCELLED" &&
+                normalizedStatus !== "DELIVERED" && (
+                  <div className="ml-auto flex items-center gap-4 border-l border-border pl-6">
                     <div className="flex flex-col">
-                       <p className="text-[9px] font-bold uppercase text-muted-foreground">Est. Waiting</p>
-                       <p className="text-xs font-black text-foreground">1-2 Working Days</p>
+                      <p className="text-xs font-bold uppercase text-muted-foreground">
+                        Est. Waiting
+                      </p>
+                      <p className="text-xs font-black text-foreground">
+                        1-2 Working Days
+                      </p>
                     </div>
                     <CreditCard className="size-5 text-muted-foreground" />
-                 </div>
-               )}
+                  </div>
+                )}
             </div>
           </CardContent>
         </Card>
@@ -232,7 +981,11 @@ export default function BookingDetailPage() {
                 <div className="flex flex-col items-center justify-between gap-4 rounded-xl border bg-muted/30 p-4 md:flex-row">
                   <RouteEndpoint
                     label="Origin Yard"
-                    station={booking.originStation}
+                    station={
+                      booking.originYard?.label ??
+                      booking.originYard?.code ??
+                      "—"
+                    }
                     icon={<MapPin />}
                   />
                   <div className="flex flex-col items-center gap-1 text-primary">
@@ -240,21 +993,50 @@ export default function BookingDetailPage() {
                       <Train className="size-5" />
                       <ArrowRight className="size-4" />
                     </div>
-                    <Badge variant="outline" className="border-primary/20 bg-primary/5 text-[9px] font-bold uppercase">
+                    <Badge
+                      variant="outline"
+                      className="border-primary/20 bg-primary/5 text-xs font-bold uppercase"
+                    >
                       Rail
                     </Badge>
                   </div>
                   <RouteEndpoint
                     label="Destination Yard"
-                    station={booking.destinationStation}
+                    station={
+                      booking.destinationYard?.label ??
+                      booking.destinationYard?.code ??
+                      "—"
+                    }
                     icon={<MapPin />}
                   />
                 </div>
 
                 <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-                  <InfoItem icon={<Layers />} label="Service" value={booking.serviceType === "RAIL_AND_FORWARDING" ? "Rail & Forwarding" : "Rail Only"} />
-                  <InfoItem icon={<ShieldCheck />} label="Return" value={booking.equipmentReturn === "WITH_RETURN" ? "With Return" : "Without Return"} />
-                  <InfoItem icon={<FileText />} label="Trade" value={booking.tradeDirection === "IMPORT" ? "Import" : "Export"} />
+                  <InfoItem
+                    icon={<Layers />}
+                    label="Service"
+                    value={
+                      booking.serviceType === "RAIL_AND_FORWARDING"
+                        ? "Rail & Forwarding"
+                        : "Rail Only"
+                    }
+                  />
+                  <InfoItem
+                    icon={<ShieldCheck />}
+                    label="Return"
+                    value={
+                      booking.equipmentReturn === "WITH_RETURN"
+                        ? "With Return"
+                        : "Without Return"
+                    }
+                  />
+                  <InfoItem
+                    icon={<FileText />}
+                    label="Trade"
+                    value={
+                      booking.tradeDirection === "IMPORT" ? "Import" : "Export"
+                    }
+                  />
                 </div>
               </CardContent>
             </Card>
@@ -271,14 +1053,23 @@ export default function BookingDetailPage() {
                   <h3 className="border-l-4 border-primary pl-3 text-xs font-bold uppercase tracking-wide text-foreground">
                     First Mile
                   </h3>
-                  <InfoItem label="Address" value={booking.firstMileEnabled && booking.firstMilePickupAddress ? booking.firstMilePickupAddress : "Not requested"} />
+                  <InfoItem
+                    label="Address"
+                    value={
+                      booking.firstMileEnabled && booking.firstMilePickupAddress
+                        ? booking.firstMilePickupAddress
+                        : "Not requested"
+                    }
+                  />
                 </div>
                 <div className="flex flex-col gap-3">
                   <h3 className="border-l-4 border-primary pl-3 text-xs font-bold uppercase tracking-wide text-foreground">
                     Last Mile
                   </h3>
                   <p className="pl-4 text-xs text-muted-foreground italic">
-                    {booking.lastMileEnabled && booking.lastMileDeliveryAddress ? booking.lastMileDeliveryAddress : "Not requested"}
+                    {booking.lastMileEnabled && booking.lastMileDeliveryAddress
+                      ? booking.lastMileDeliveryAddress
+                      : "Not requested"}
                   </p>
                 </div>
               </CardContent>
@@ -293,31 +1084,57 @@ export default function BookingDetailPage() {
               </CardHeader>
               <CardContent className="flex flex-col gap-6">
                 <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-                  <InfoItem icon={<Package />} label="Freight Type" value={booking.freightType === "BULK" ? "Bulk" : "Break Bulk"} />
-                  <InfoItem icon={<Weight />} label="Weight (VGM)" value={`${booking.cargoTotalWeightVgm} Tons`} />
-                  <InfoItem icon={<Ship />} label="Currency" value={booking.paymentCurrency} />
+                  <InfoItem
+                    icon={<Package />}
+                    label="Freight Type"
+                    value={
+                      booking.freightType === "BULK" ? "Bulk" : "Break Bulk"
+                    }
+                  />
+                  <InfoItem
+                    icon={<Weight />}
+                    label="Weight (VGM)"
+                    value={`${booking.cargoTotalWeightVgm} Tons`}
+                  />
+                  <InfoItem
+                    icon={<Ship />}
+                    label="Currency"
+                    value={booking.paymentCurrency}
+                  />
                 </div>
 
                 {booking.containers && booking.containers.length > 0 && (
                   <>
                     <Separator />
                     <div className="flex flex-col gap-3">
-                      <h3 className="text-xs font-bold uppercase tracking-wide text-foreground">Load Details</h3>
+                      <h3 className="text-xs font-bold uppercase tracking-wide text-foreground">
+                        Load Details
+                      </h3>
                       <div className="rounded-lg border overflow-hidden">
                         <table className="w-full text-left text-xs">
                           <thead className="bg-muted text-muted-foreground">
                             <tr>
                               <th className="px-3 py-2 font-semibold">Type</th>
-                              <th className="px-3 py-2 font-semibold text-center">Quantity</th>
-                              <th className="px-3 py-2 font-semibold text-right">VGM (Tons)</th>
+                              <th className="px-3 py-2 font-semibold text-center">
+                                Quantity
+                              </th>
+                              <th className="px-3 py-2 font-semibold text-right">
+                                VGM (Tons)
+                              </th>
                             </tr>
                           </thead>
                           <tbody className="divide-y">
                             {booking.containers.map((c, i) => (
                               <tr key={i}>
-                                <td className="px-3 py-2 font-medium">{c.type}</td>
-                                <td className="px-3 py-2 text-center">{c.qty} Units</td>
-                                <td className="px-3 py-2 text-right">{c.vgm}t</td>
+                                <td className="px-3 py-2 font-medium">
+                                  {c.type}
+                                </td>
+                                <td className="px-3 py-2 text-center">
+                                  {c.qty} Units
+                                </td>
+                                <td className="px-3 py-2 text-right">
+                                  {c.vgm}t
+                                </td>
                               </tr>
                             ))}
                           </tbody>
@@ -339,14 +1156,17 @@ export default function BookingDetailPage() {
                 </CardTitle>
               </CardHeader>
               <CardContent className="flex flex-col gap-4">
-                <InfoItem label="Type" value={booking.contractType === "RENEWAL" ? "Renewal" : "New"} />
+                <InfoItem
+                  label="Type"
+                  value={booking.contractType === "RENEWAL" ? "Renewal" : "New"}
+                />
                 <InfoItem label="Customer ID" value={booking.customerId} />
                 <Separator />
                 <div className="flex flex-wrap gap-2">
-                  <Badge variant="outline" className="bg-background text-[9px]">
+                  <Badge variant="outline" className="bg-background text-xs">
                     Hazardous: {booking.isHazardous ? "Yes" : "No"}
                   </Badge>
-                  <Badge variant="outline" className="bg-background text-[9px]">
+                  <Badge variant="outline" className="bg-background text-xs">
                     Refrigerated: {booking.isRefrigerated ? "Yes" : "No"}
                   </Badge>
                 </div>
@@ -360,15 +1180,21 @@ export default function BookingDetailPage() {
               <CardContent className="flex flex-col gap-4">
                 {booking.freightSubtype && (
                   <div className="flex flex-col gap-1">
-                    <p className="text-[9px] font-bold uppercase tracking-tight text-muted-foreground">Cargo Description</p>
-                    <p className="text-xs text-foreground leading-relaxed italic">"{booking.freightSubtype}"</p>
+                    <p className="text-xs font-bold uppercase tracking-tight text-muted-foreground">
+                      Cargo Description
+                    </p>
+                    <p className="text-xs text-foreground leading-relaxed italic">
+                      "{booking.freightSubtype}"
+                    </p>
                   </div>
                 )}
                 {booking.financialTerms && (
                   <>
                     <Separator />
                     <div className="flex flex-col gap-1">
-                      <p className="text-[9px] font-bold uppercase tracking-tight text-muted-foreground">Financial Terms</p>
+                      <p className="text-xs font-bold uppercase tracking-tight text-muted-foreground">
+                        Financial Terms
+                      </p>
                       <div className="rounded-lg bg-amber-50/50 border border-amber-100 p-2">
                         <p className="text-xs text-amber-900 flex gap-2">
                           <StickyNote className="size-3 shrink-0 mt-0.5 text-amber-500" />
@@ -379,7 +1205,9 @@ export default function BookingDetailPage() {
                   </>
                 )}
                 {!booking.freightSubtype && !booking.financialTerms && (
-                  <p className="text-xs text-muted-foreground italic">No additional information provided.</p>
+                  <p className="text-xs text-muted-foreground italic">
+                    No additional information provided.
+                  </p>
                 )}
               </CardContent>
             </Card>
@@ -405,7 +1233,7 @@ function RouteEndpoint({
         {icon && <div className="[&_svg]:size-5">{icon}</div>}
       </div>
       <div className="flex flex-col">
-        <p className="text-[9px] font-bold uppercase tracking-wide text-muted-foreground">
+        <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
           {label}
         </p>
         <p className="text-sm font-black text-foreground">{station}</p>
@@ -414,20 +1242,26 @@ function RouteEndpoint({
   );
 }
 
-function InfoItem({ 
-  icon, 
-  label, 
-  value 
-}: { 
-  icon?: React.ReactNode; 
-  label: string; 
-  value?: string | number | null 
+function InfoItem({
+  icon,
+  label,
+  value,
+}: {
+  icon?: React.ReactNode;
+  label: string;
+  value?: string | number | null;
 }) {
   return (
     <div className="flex items-start gap-2">
-      {icon && <div className="mt-0.5 text-muted-foreground [&_svg]:size-3.5">{icon}</div>}
+      {icon && (
+        <div className="mt-0.5 text-muted-foreground [&_svg]:size-3.5">
+          {icon}
+        </div>
+      )}
       <div className="flex flex-col">
-        <p className="text-[9px] font-bold uppercase tracking-tight text-muted-foreground">{label}</p>
+        <p className="text-xs font-bold uppercase tracking-tight text-muted-foreground">
+          {label}
+        </p>
         <p className="text-xs font-bold text-foreground">{value ?? "—"}</p>
       </div>
     </div>
@@ -436,19 +1270,37 @@ function InfoItem({
 
 function StatusBadge({ status }: { status: string }) {
   const statusColors: Record<string, string> = {
-    DRAFT: "bg-slate-50 text-slate-700 border-slate-200",
-    CONFIRMED: "bg-emerald-50 text-emerald-700 border-emerald-200",
-    IN_TRANSIT: "bg-sky-50 text-sky-700 border-sky-200",
-    DELIVERED: "bg-indigo-50 text-indigo-700 border-indigo-200",
-    CANCELLED: "bg-red-50 text-red-700 border-red-200",
+    DRAFT: "bg-muted text-muted-foreground border-border",
+    CHANGES_REQUESTED: "bg-amber-50 text-amber-700 border-amber-200",
+    SUBMITTED: "bg-primary/10 text-primary border-primary/20",
+    PENDING_APPROVAL: "bg-primary/10 text-primary border-primary/20",
+    APPROVED_PENDING_SIGNATURE: "bg-primary/10 text-primary border-primary/20",
+    APPROVED: "bg-primary/10 text-primary border-primary/20",
+    CONTRACT_READY: "bg-primary/10 text-primary border-primary/20",
+    SIGNED_CUSTOMER: "bg-primary/10 text-primary border-primary/20",
+    FULLY_EXECUTED: "bg-primary/10 text-primary border-primary/20",
+    PNR_GENERATED: "bg-primary/10 text-primary border-primary/20",
+    PAYMENT_VERIFICATION_IN_PROGRESS: "bg-primary/10 text-primary border-primary/20",
+    PAID: "bg-primary/10 text-primary border-primary/20",
+    CONFIRMED: "bg-primary/10 text-primary border-primary/20",
+    IN_TRANSIT: "bg-primary/10 text-primary border-primary/20",
+    PENDING_CONSOLIDATION: "bg-primary/10 text-primary border-primary/20",
+    CONSOLIDATED: "bg-primary/10 text-primary border-primary/20",
+    COMPLETED: "bg-muted text-foreground border-border",
+    DELIVERED: "bg-muted text-foreground border-border",
+    REJECTED: "bg-destructive/10 text-destructive border-destructive/20",
+    CANCELLED: "bg-destructive/10 text-destructive border-destructive/20",
   };
 
   return (
-    <Badge 
-      variant="outline" 
-      className={cn("px-2 py-0.5 font-bold uppercase tracking-wider text-[9px]", statusColors[status] || "bg-muted")}
+    <Badge
+      variant="outline"
+      className={cn(
+        "px-2 py-0.5 font-bold uppercase tracking-wider text-xs",
+        statusColors[status] || "bg-muted",
+      )}
     >
-      {status.replace(/_/g, ' ')}
+      {status.replace(/_/g, " ")}
     </Badge>
   );
 }
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/MyBookings.tsx b/apps/edr-freight-web/portal/src/pages/bookings/MyBookings.tsx
index 960d9c0f2..ac0b3661f 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/MyBookings.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/MyBookings.tsx
@@ -49,8 +49,8 @@ export default function MyBookings() {
       const term = searchTerm.toLowerCase();
       return (
         b.reference.toLowerCase().includes(term) ||
-        b.originStation.toLowerCase().includes(term) ||
-        b.destinationStation.toLowerCase().includes(term) ||
+        (b.originYard?.label ?? b.originYard?.code ?? "").toLowerCase().includes(term) ||
+        (b.destinationYard?.label ?? b.destinationYard?.code ?? "").toLowerCase().includes(term) ||
         b.status.toLowerCase().includes(term)
       );
     });
@@ -85,8 +85,8 @@ export default function MyBookings() {
               <Package className="h-5 w-5" />
             </div>
             <div>
-              <p className="font-medium text-slate-900">{booking.reference}</p>
-              <p className="text-sm text-slate-500">{booking.scheduledDate ?? booking.createdAt}</p>
+              <p className="font-medium text-foreground">{booking.reference}</p>
+              <p className="text-sm text-muted-foreground">{booking.scheduledDate ?? booking.createdAt}</p>
             </div>
           </div>
         );
@@ -96,10 +96,10 @@ export default function MyBookings() {
       id: "route",
       header: "Route",
       cell: ({ row }) => (
-        <div className="flex items-center gap-2 text-sm text-slate-700">
-          <span>{row.original.originStation}</span>
-          <ArrowRight className="text-slate-400" />
-          <span>{row.original.destinationStation}</span>
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <span>{row.original.originYard?.label ?? row.original.originYard?.code ?? "—"}</span>
+          <ArrowRight className="text-muted-foreground" />
+          <span>{row.original.destinationYard?.label ?? row.original.destinationYard?.code ?? "—"}</span>
         </div>
       ),
     },
@@ -111,9 +111,9 @@ export default function MyBookings() {
         const containerCount = b.containers?.reduce((sum, c) => sum + c.qty, 0) ?? 0;
         const containerType = b.containers?.[0]?.type ?? null;
         return (
-          <div className="text-sm text-slate-700">
+          <div className="text-sm text-muted-foreground">
             <p>{b.freightType === "BULK" ? "Bulk" : "Break Bulk"}</p>
-            <p className="text-xs text-slate-500">
+            <p className="text-xs text-muted-foreground">
               {containerType && containerCount > 0 ? `${containerCount} × ${containerType} · ` : ""}{b.cargoTotalWeightVgm}t
             </p>
           </div>
@@ -124,7 +124,7 @@ export default function MyBookings() {
       id: "transportMode",
       header: "Transport",
       cell: ({ row }) => (
-        <span className="text-sm text-slate-700">
+        <span className="text-sm text-muted-foreground">
           {row.original.serviceType === "RAIL_AND_FORWARDING" ? "Rail & Forwarding" : "Rail"}
         </span>
       ),
@@ -172,10 +172,10 @@ export default function MyBookings() {
       <div className="space-y-6">
         <Card className="p-6 flex-row justify-between">
           <div>
-            <h1 className="text-3xl font-bold tracking-tight text-slate-900">
+            <h1 className="text-3xl font-bold tracking-tight text-foreground">
               My Bookings
             </h1>
-            <p className="mt-1 text-sm text-secondary-foreground">
+            <p className="mt-1 text-sm text-muted-foreground">
               View and manage your freight booking requests.
             </p>
           </div>
@@ -205,8 +205,8 @@ export default function MyBookings() {
           <Card>
             <CardContent className="flex items-center justify-between">
               <div>
-                <p className="text-sm text-slate-500">Total Bookings</p>
-                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                <p className="text-sm text-muted-foreground">Total Bookings</p>
+                <h3 className="mt-2 text-3xl font-bold text-foreground">
                   {bookings.length}
                 </h3>
               </div>
@@ -219,8 +219,8 @@ export default function MyBookings() {
           <Card>
             <CardContent className="flex items-center justify-between">
               <div>
-                <p className="text-sm text-slate-500">Active Bookings</p>
-                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                <p className="text-sm text-muted-foreground">Active Bookings</p>
+                <h3 className="mt-2 text-3xl font-bold text-foreground">
                   {activeCount}
                 </h3>
               </div>
@@ -233,8 +233,8 @@ export default function MyBookings() {
           <Card>
             <CardContent className="flex items-center justify-between">
               <div>
-                <p className="text-sm text-slate-500">Pending Approval</p>
-                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                <p className="text-sm text-muted-foreground">Pending Approval</p>
+                <h3 className="mt-2 text-3xl font-bold text-foreground">
                   {pendingCount}
                 </h3>
               </div>
@@ -263,9 +263,9 @@ export default function MyBookings() {
           <CardContent className="px-0">
             {total === 0 && dataTableStatus === "success" ? (
               <div className="flex flex-col items-center justify-center py-12 px-6 text-center">
-                <Package className="h-12 w-12 text-slate-300 mb-4" />
-                <h3 className="text-sm font-semibold text-slate-900">No bookings found</h3>
-                <p className="text-xs text-slate-500 mt-1 max-w-sm">
+                <Package className="h-12 w-12 text-muted-foreground mb-4" />
+                <h3 className="text-sm font-semibold text-foreground">No bookings found</h3>
+                <p className="text-xs text-muted-foreground mt-1 max-w-sm">
                   {searchTerm ? "No bookings match your current search filter." : "You haven't requested any bookings yet."}
                 </p>
               </div>
@@ -299,15 +299,15 @@ export default function MyBookings() {
 function StatusBadge({ status }: { status: string }) {
   const styles: Record<string, string> = {
     DRAFT: "bg-amber-100 text-amber-700",
-    CONFIRMED: "bg-sky-100 text-sky-700",
-    IN_TRANSIT: "bg-indigo-100 text-indigo-700",
-    DELIVERED: "bg-emerald-100 text-emerald-700",
-    CANCELLED: "bg-red-100 text-red-700",
+    CONFIRMED: "bg-primary/10 text-primary",
+    IN_TRANSIT: "bg-muted text-foreground",
+    DELIVERED: "bg-primary/10 text-primary",
+    CANCELLED: "bg-destructive/10 text-destructive",
   };
 
   return (
     <span
-      className={`inline-flex rounded-full px-3 py-1 text-xs font-medium ${styles[status] ?? "bg-slate-100 text-slate-700"}`}
+      className={`inline-flex rounded-full px-3 py-1 text-xs font-medium ${styles[status] ?? "bg-muted text-muted-foreground"}`}
     >
       {status.replace(/_/g, ' ')}
     </span>
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx b/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx
index 4a1c53fef..9b5a4cf73 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx
@@ -6,7 +6,6 @@ import { useNavigate } from "react-router-dom";
 import {
   AlertCircle,
   Check,
-  CheckCircle2,
   ChevronLeft,
   ChevronRight,
   LoaderCircle,
@@ -31,13 +30,11 @@ import {
   Step5CargoDetails,
   Step8Review,
 } from "./new-booking-form/steps";
-import useAuth from "@/hooks/useAuth";
 
 export default function NewBookingPage() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const [step, setStep] = useState(1);
-  const { customer } = useAuth();
   const { data: referenceData, isLoading: refDataLoading } = useQuery(
     api.bookings.referenceData.queryOptions(),
   );
@@ -47,7 +44,7 @@ export default function NewBookingPage() {
       api.bookings.create.call(payload),
     onSuccess: (booking) => {
       queryClient.invalidateQueries({ queryKey: api.bookings.list.queryKey() });
-      setTimeout(() => navigate(`/bookings/${booking.id}`), 2500);
+      navigate(`/bookings/${booking.id}`);
     },
   });
 
@@ -120,7 +117,6 @@ export default function NewBookingPage() {
       const group = cargoTree.find(
         (g) => g.code === "CONTAINER" || /container/i.test(g.name),
       );
-      console.log(group, cargoTree);
       return group?.id ?? "";
     };
 
@@ -132,23 +128,27 @@ export default function NewBookingPage() {
       return "";
     };
 
-    const cargoTypeId = cargoTree[0].id;
-    // data.cargoType === "container"
-    //   ? findContainerCargoTypeId()
-    //   : (findCargoTypeId(
-    //     data.freightType === "bulk"
-    //       ? data.bulkCommodity
-    //       : data.breakBulkType,
-    //   ) ?? "");
+    const selectedChild =
+      data.cargoType !== "container" && data.bulkCommoditytype
+        ? cargoTree
+          .find((g) => g.code.toLowerCase() === data.freightType)
+          ?.children?.find((c) => c.name === data.bulkCommoditytype)
+        : undefined;
+
+    const cargoTypeId =
+      data.cargoType === "container"
+        ? findContainerCargoTypeId()
+        : (findCargoTypeId(data.bulkCommoditytype) ??
+          cargoTree.find((g) => g.code.toLowerCase() === data.freightType)
+            ?.id ??
+          "");
 
     const cargoFreeText =
       data.cargoType === "container"
         ? undefined
-        : data.freightType === "bulk" && data.bulkCommodity === "Others"
-          ? data.bulkCommodityOther
-          : data.freightType === "break_bulk" && data.breakBulkType === "Others"
-            ? data.breakBulkTypeOther
-            : undefined;
+        : selectedChild?.show_free_text_box
+          ? data.bulkCommoditytype
+          : undefined;
 
     // ── Build API payload ───────────────────────────────────────────────
     const apiPayload: CreateBookingPayload = {
@@ -168,11 +168,16 @@ export default function NewBookingPage() {
           : direction === "domestic"
             ? "DOMESTIC"
             : "IMPORT",
-      cargoTypeId,
+      cargoTypeId: data.cargoType === "container" ? undefined : cargoTypeId,
       cargoTotalWeightVgm: totalWeight,
       isHazardous: data.isHazardous,
       paymentCurrency: "USD",
       allowConsolidation: data.consolidationEnabled,
+      // @ts-ignore
+      freightType:
+        data.cargoType === "container"
+          ? ("CONTAINER" as const)
+          : ("BULK" as const),
       containers:
         data.cargoType === "container"
           ? data.containers.map((c) => ({
@@ -181,7 +186,6 @@ export default function NewBookingPage() {
             vgmPerUnitTons: Number(c.vgm || 0),
           }))
           : [],
-      ...(customer ? { customerId: customer.id } : {}),
       ...(data.previousContractRef
         ? { previousContractId: data.previousContractRef }
         : {}),
@@ -203,26 +207,6 @@ export default function NewBookingPage() {
     createMutation.mutate(apiPayload);
   });
 
-  if (createMutation.isSuccess) {
-    return (
-      <div className="flex min-h-screen items-center justify-center p-6">
-        <div className="w-full max-w-sm rounded-2xl border border-border bg-card p-10 text-center shadow-sm">
-          <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-emerald-100">
-            <CheckCircle2 className="h-7 w-7 text-emerald-600" />
-          </div>
-          <h2 className="text-xl font-bold">Contract Submitted</h2>
-          <p className="mt-2 text-sm text-muted-foreground">
-            Your request is queued for review by EDR Line Staff. You will be
-            notified once approved.
-          </p>
-          <p className="mt-4 font-mono text-sm font-semibold text-primary">
-            {createMutation.data?.reference}
-          </p>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <form
       id="new-booking-form"
@@ -241,7 +225,7 @@ export default function NewBookingPage() {
             <div className="mb-6 flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-800">
               <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-red-500" />
               <div>
-                <p className="font-semibold">Submission failed</p>
+                <p className="font-semibold">Failed to save draft</p>
                 <p className="mt-1 text-red-600">
                   {createMutation.error instanceof Error
                     ? createMutation.error.message
@@ -302,9 +286,7 @@ export default function NewBookingPage() {
               ) : (
                 <Check />
               )}
-              {createMutation.isPending
-                ? "Submitting..."
-                : "Submit Contract Request"}
+              {createMutation.isPending ? "Saving Draft..." : "Save as Draft"}
             </Button>
           )}
         </div>
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts
index d994f93f7..be443d081 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts
@@ -1,19 +1,6 @@
 import { DeepPartial, Path } from "react-hook-form";
 import * as z from "zod";
 
-export const STATIONS = [
-  "Addis Ababa",
-  "Adama",
-  "Mojo",
-  "Awash",
-  "Mieso",
-  "Dire Dawa",
-  "Aysha",
-  "Ali Sabieh",
-  "Holhol",
-  "Djibouti City",
-] as const;
-
 export const ETHIOPIA_STATIONS = new Set<string>([
   "Addis Ababa",
   "Adama",
@@ -23,19 +10,6 @@ export const ETHIOPIA_STATIONS = new Set<string>([
   "Dire Dawa",
 ]);
 
-export const BULK_COMMODITIES = [
-  "Coffee",
-  "Beans",
-  "Fertilizer",
-  "Sugar",
-  "Oil",
-  "Livestock",
-  "Steel",
-  "Others",
-] as const;
-
-export const BREAK_BULK_TYPES = ["Machinery", "Ro-Ro", "Others"] as const;
-
 export const MOCK_VALID_CONTRACTS = [
   "EDR-2024-10001",
   "EDR-2024-10002",
@@ -43,31 +17,6 @@ export const MOCK_VALID_CONTRACTS = [
   "EDR-2022-55442",
 ];
 
-export const CONTAINER_TYPES = [
-  "Dry Container",
-  "High Cubic",
-  "Reefer Container",
-  "Open Top",
-  "Flat Rack",
-  "Tank Container",
-  "Open Side",
-] as const;
-
-export const SHIPPING_LINES = [
-  "MSC",
-  "CMA CGM",
-  "Evergreen",
-  "COSCO",
-  "Hapag-Lloyd",
-  "ONE",
-  "Yang Ming",
-  "ZIM",
-  "Messina Line",
-  "Safmarine",
-  "Wan Hai",
-  "Ethiopian Shipping Lines (ESLSE)",
-] as const;
-
 export const STEPS = [
   { id: 1, label: "Contract Type", short: "Contract" },
   { id: 2, label: "Service Type & Mile", short: "Service" },
@@ -108,11 +57,8 @@ export const bookingFormSchema = z
     shippingLine: z.string(),
     cargoType: z.enum(["container", "bulk"], "Select a cargo type."),
     cargoWeight: z.string(),
-    freightType: z.enum(["bulk", "break_bulk"]).optional(),
-    bulkCommodity: z.string(),
-    bulkCommodityOther: z.string(),
-    breakBulkType: z.string(),
-    breakBulkTypeOther: z.string(),
+    freightType: z.string(), // parent group
+    bulkCommoditytype: z.string(),
     isHazardous: z.boolean(),
     isRefrigerated: z.boolean(),
     containers: z.array(
@@ -171,42 +117,10 @@ export const bookingFormSchema = z
     (data) =>
       !(
         data.cargoType === "bulk" &&
-        data.freightType === "bulk" &&
-        !data.bulkCommodity
+        data.freightType &&
+        !data.bulkCommoditytype
       ),
-    { message: "Select a commodity.", path: ["bulkCommodity"] },
-  )
-  .refine(
-    (data) =>
-      !(
-        data.cargoType === "bulk" &&
-        data.freightType === "bulk" &&
-        data.bulkCommodity === "Others" &&
-        !data.bulkCommodityOther.trim()
-      ),
-    { message: "Specify the commodity.", path: ["bulkCommodityOther"] },
-  )
-  .refine(
-    (data) =>
-      !(
-        data.cargoType === "bulk" &&
-        data.freightType === "break_bulk" &&
-        !data.breakBulkType
-      ),
-    { message: "Select a break-bulk type.", path: ["breakBulkType"] },
-  )
-  .refine(
-    (data) =>
-      !(
-        data.cargoType === "bulk" &&
-        data.freightType === "break_bulk" &&
-        data.breakBulkType === "Others" &&
-        !data.breakBulkTypeOther.trim()
-      ),
-    {
-      message: "Specify the break-bulk type.",
-      path: ["breakBulkTypeOther"],
-    },
+    { message: "Select a commodity.", path: ["bulkCommoditytype"] },
   )
   .refine(
     (data) => {
@@ -268,10 +182,7 @@ export const initialBookingFormValues: DeepPartial<BookingFormValues> = {
   destinationYard: "",
   shippingLine: "",
   cargoWeight: "",
-  bulkCommodity: "",
-  bulkCommodityOther: "",
-  breakBulkType: "",
-  breakBulkTypeOther: "",
+  bulkCommoditytype: "",
   isHazardous: false,
   isRefrigerated: false,
   containers: [{ type: "20ft", containerType: "", qty: "1", vgm: "" }],
@@ -300,10 +211,7 @@ export const stepFields: Record<number, Array<Path<BookingFormValues>>> = {
     "cargoType",
     "cargoWeight",
     "freightType",
-    "bulkCommodity",
-    "bulkCommodityOther",
-    "breakBulkType",
-    "breakBulkTypeOther",
+    "bulkCommoditytype",
     "containers",
     "consolidationEnabled",
   ],
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx
index ee54196e8..cbd70f5ac 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx
@@ -44,8 +44,7 @@ export function Step5CargoDetails({
 }) {
   const cargoType = form.watch("cargoType");
   const freightType = form.watch("freightType");
-  const bulkCommodity = form.watch("bulkCommodity");
-  const breakBulkType = form.watch("breakBulkType");
+  const bulkCommoditytype = form.watch("bulkCommoditytype");
   const containers = form.watch("containers");
 
   const { fields, append, remove } = useFieldArray({
@@ -60,13 +59,21 @@ export function Step5CargoDetails({
     );
   }, [referenceData]);
 
-  const bulkCommodityOptions = useMemo(() => {
+  const freightTypeGroups = useMemo(() => {
     if (!referenceData?.cargo_type) return [];
-    return referenceData.cargo_type.flatMap(
-      (group) => group.children?.map((c) => c.name) ?? [],
+    return referenceData.cargo_type.filter(
+      (g) => g.code !== "CONTAINER",
     );
   }, [referenceData]);
 
+  const commodityOptions = useMemo(() => {
+    if (!referenceData?.cargo_type || !freightType) return [];
+    const group = referenceData.cargo_type.find(
+      (g) => g.code.toLowerCase() === freightType,
+    );
+    return group?.children?.map((c) => c.name) ?? [];
+  }, [referenceData, freightType]);
+
   function getOverweightAlert(
     type: "20ft" | "40ft",
     vgm: number,
@@ -122,7 +129,7 @@ export function Step5CargoDetails({
                   selected={cargoType === "container"}
                   onClick={() => {
                     field.onChange("container");
-                    form.setValue("freightType", undefined, {
+                    form.setValue("freightType", "", {
                       shouldDirty: true,
                     });
                   }}
@@ -194,82 +201,42 @@ export function Step5CargoDetails({
             render={({ field, fieldState }) => (
               <Field data-invalid={fieldState.invalid}>
                 <div className="grid gap-3 sm:grid-cols-2">
-                  <OptionCard
-                    selected={freightType === "bulk"}
-                    onClick={() => field.onChange("bulk")}
-                  >
-                    <p className="font-semibold">Bulk</p>
-                    <p className="mt-0.5 text-xs text-muted-foreground">
-                      Coffee, fertilizer, grain, ore, etc.
-                    </p>
-                  </OptionCard>
-                  <OptionCard
-                    selected={freightType === "break_bulk"}
-                    onClick={() => field.onChange("break_bulk")}
-                  >
-                    <p className="font-semibold">Break-Bulk</p>
-                    <p className="mt-0.5 text-xs text-muted-foreground">
-                      Machinery, vehicles, project cargo, etc.
-                    </p>
-                  </OptionCard>
+                  {freightTypeGroups.map((group) => {
+                    const val = group.code.toLowerCase();
+                    return (
+                      <OptionCard
+                        key={group.code}
+                        selected={freightType === val}
+                        onClick={() => {
+                          field.onChange(val);
+                          form.setValue("bulkCommoditytype", "", {
+                            shouldDirty: true,
+                          });
+                        }}
+                      >
+                        <p className="font-semibold">{group.name}</p>
+                      </OptionCard>
+                    );
+                  })}
                 </div>
                 <FieldError errors={[fieldState.error]} />
               </Field>
             )}
           />
 
-          {freightType === "bulk" && (
+          {freightType && commodityOptions.length > 0 && (
             <div className="space-y-2">
               <Controller
-                name="bulkCommodity"
+                name="bulkCommoditytype"
                 control={form.control}
                 render={({ field, fieldState }) => (
                   <SelectField
                     field={field}
                     error={fieldState.error}
-                    label="Commodity *"
-                    placeholder="Select commodity *"
-                  >
-                    {bulkCommodityOptions.map((option) => (
-                      <SelectItem key={option} value={option}>
-                        {option}
-                      </SelectItem>
-                    ))}
-                  </SelectField>
-                )}
-              />
-              {bulkCommodity === "Others" && (
-                <Controller
-                  name="bulkCommodityOther"
-                  control={form.control}
-                  render={({ field, fieldState }) => (
-                    <Field data-invalid={fieldState.invalid}>
-                      <Input
-                        {...field}
-                        aria-invalid={fieldState.invalid}
-                        placeholder="Specify commodity *"
-                      />
-                      <FieldError errors={[fieldState.error]} />
-                    </Field>
-                  )}
-                />
-              )}
-            </div>
-          )}
-
-          {freightType === "break_bulk" && (
-            <div className="space-y-2">
-              <Controller
-                name="breakBulkType"
-                control={form.control}
-                render={({ field, fieldState }) => (
-                  <SelectField
-                    field={field}
-                    error={fieldState.error}
-                    label="Break-bulk type *"
+                    label="Cargo type *"
                     placeholder="Select type *"
                   >
-                    {bulkCommodityOptions.map((option) => (
+                    {commodityOptions.map((option) => (
                       <SelectItem key={option} value={option}>
                         {option}
                       </SelectItem>
@@ -277,22 +244,6 @@ export function Step5CargoDetails({
                   </SelectField>
                 )}
               />
-              {breakBulkType === "Others" && (
-                <Controller
-                  name="breakBulkTypeOther"
-                  control={form.control}
-                  render={({ field, fieldState }) => (
-                    <Field data-invalid={fieldState.invalid}>
-                      <Input
-                        {...field}
-                        aria-invalid={fieldState.invalid}
-                        placeholder="Specify break-bulk type *"
-                      />
-                      <FieldError errors={[fieldState.error]} />
-                    </Field>
-                  )}
-                />
-              )}
             </div>
           )}
         </div>
diff --git a/apps/edr-freight-web/portal/src/pages/customers/customers.mock.ts b/apps/edr-freight-web/portal/src/pages/customers/customers.mock.ts
index 92ec6ff80..a1a9bf1c2 100644
--- a/apps/edr-freight-web/portal/src/pages/customers/customers.mock.ts
+++ b/apps/edr-freight-web/portal/src/pages/customers/customers.mock.ts
@@ -14,6 +14,7 @@ export interface Customer {
   country: string;
   address: string;
   notes: string;
+  documentsComplete: boolean;
 }
 
 const seedCustomers: Customer[] = [
@@ -30,6 +31,7 @@ const seedCustomers: Customer[] = [
     country: "Ethiopia",
     address: "Bole Road, Sub-City 03, Building 17",
     notes: "Top-tier importer. Prefers weekly invoicing.",
+    documentsComplete: false,
   },
   {
     id: 2,
@@ -44,6 +46,7 @@ const seedCustomers: Customer[] = [
     country: "Ethiopia",
     address: "Industrial Park, Zone B, Warehouse 4",
     notes: "Awaiting compliance documents.",
+    documentsComplete: false,
   },
   {
     id: 3,
@@ -58,6 +61,7 @@ const seedCustomers: Customer[] = [
     country: "Djibouti",
     address: "Port Quarter, Avenue 26, Block 9",
     notes: "Account paused since last quarter.",
+    documentsComplete: true,
   },
 ];
 
@@ -99,6 +103,7 @@ const generated: Customer[] = extras.map((entry, i) => {
     country: entry.country,
     address: `Block ${i + 1}, Street ${10 + i}, Quarter ${(i % 5) + 1}`,
     notes: `Mock customer #${id}.`,
+    documentsComplete: i % 3 === 0,
   };
 });
 
diff --git a/apps/edr-freight-web/portal/src/services/api.ts b/apps/edr-freight-web/portal/src/services/api.ts
index bb5fcdcc7..9b306b8b1 100644
--- a/apps/edr-freight-web/portal/src/services/api.ts
+++ b/apps/edr-freight-web/portal/src/services/api.ts
@@ -8,13 +8,17 @@ import type {
   UpdateFileUploadFieldDto,
   UpdateFileUploadSettingDto,
 } from "@/types/fileUploadSettings";
-import { bookingsService, CreateBookingPayload } from "./bookings.service";
+import {
+  bookingsService,
+  BookingListFilter,
+  CreateBookingPayload,
+  GeneratePriceResponse,
+} from "./bookings.service";
 import { consignmentsService } from "./consignments.service";
 import { trackingService } from "./tracking.service";
 import { fileUploadSettingsService } from "./fileUploadSettings.service";
 import { dropdownSettingsService } from "./dropdownSettings.service";
 import { authService } from "./auth.service";
-import { customersService } from "./customers.service";
 import { companiesService } from "./companies.service";
 import {
   CreateDropdownOptionDto,
@@ -24,15 +28,11 @@ import {
   UpdateDropdownOptionDto,
   UpdateDropdownSettingDto,
 } from "@/types/dropdownSettings";
-import {
-  CreateCustomerDto,
-  Customer,
-  UpdateCustomerDto,
-} from "@/types/customers";
 import type {
   CompanyInfoResponse,
   CreateCompanyPayload,
 } from "./companies.service";
+import type { ProfileResponse, UpdateProfilePayload } from "@/types/profile";
 import type {
   AuthUser,
   GenerateVerificationCodePayload,
@@ -89,40 +89,6 @@ export const api = {
     logout: endpoint<void, void>("auth", "logout", authService.logout),
   },
 
-  customers: {
-    list: endpoint<void, Customer[]>(
-      "customers",
-      "list",
-      customersService.list,
-    ),
-
-    get: endpoint<{ id: string }, Customer>("customers", "get", ({ id }) =>
-      customersService.getById(id),
-    ),
-
-    create: endpoint<CreateCustomerDto, Customer>(
-      "customers",
-      "create",
-      customersService.create,
-    ),
-
-    update: endpoint<{ id: string; dto: UpdateCustomerDto }, Customer>(
-      "customers",
-      "update",
-      ({ id, dto }) => customersService.update(id, dto),
-    ),
-
-    remove: endpoint<{ id: string }, void>("customers", "remove", ({ id }) =>
-      customersService.remove(id),
-    ),
-
-    getByUserId: endpoint<{ id: string }, Customer | null>(
-      "customers",
-      "getByUserId",
-      ({ id }) => customersService.getByUserId(id),
-    ),
-  },
-
   companies: {
     getInfo: endpoint<void, CompanyInfoResponse | null>(
       "companies",
@@ -135,10 +101,22 @@ export const api = {
       "create",
       companiesService.create,
     ),
+
+    getProfile: endpoint<void, ProfileResponse>(
+      "companies",
+      "getProfile",
+      companiesService.getProfile,
+    ),
+
+    updateProfile: endpoint<UpdateProfilePayload, ProfileResponse>(
+      "companies",
+      "updateProfile",
+      companiesService.updateProfile,
+    ),
   },
 
   bookings: {
-    list: endpoint<void, PaginatedResponse<Freight.IBooking>>(
+    list: endpoint<BookingListFilter | void, PaginatedResponse<Freight.IBooking>>(
       "bookings",
       "list",
       bookingsService.list,
@@ -165,6 +143,31 @@ export const api = {
     remove: endpoint<{ id: string }, void>("bookings", "remove", ({ id }) =>
       bookingsService.remove(id),
     ),
+
+    cancel: endpoint<{ id: string; reason: string }, Freight.IBooking>(
+      "bookings",
+      "cancel",
+      ({ id, reason }) => bookingsService.cancel(id, reason),
+    ),
+
+    generatePrice: endpoint<{ id: string }, GeneratePriceResponse>(
+      "bookings",
+      "generatePrice",
+      ({ id }) => bookingsService.generatePrice(id),
+    ),
+
+    submit: endpoint<{ id: string }, Freight.IBooking>(
+      "bookings",
+      "submit",
+      ({ id }) => bookingsService.submit(id),
+    ),
+
+    uploadDocuments: endpoint<
+      { id: string; files: Record<string, File | File[] | null> },
+      Freight.IBooking
+    >("bookings", "uploadDocuments", ({ id, files }) =>
+      bookingsService.uploadDocuments(id, files),
+    ),
   },
 
   consignments: {
diff --git a/apps/edr-freight-web/portal/src/services/bookings.service.ts b/apps/edr-freight-web/portal/src/services/bookings.service.ts
index 6ac93a742..95a3e5740 100644
--- a/apps/edr-freight-web/portal/src/services/bookings.service.ts
+++ b/apps/edr-freight-web/portal/src/services/bookings.service.ts
@@ -1,12 +1,65 @@
 import type { Freight, PaginatedResponse } from "@edr/types";
 
+import { URL_CONSTANTS } from "@/constants/URLS";
 import { client } from "../utils/api";
 
+const B = URL_CONSTANTS.BOOKINGS;
+
 export type CreateBookingPayload = Freight.CreateBookingDto;
 
+export interface ContractView {
+  bookingId: string;
+  reference: string;
+  status: string;
+  templateKey: string;
+  title: string;
+  html: string;
+  canSignCustomer: boolean;
+  canSignStaff: boolean;
+  hasContractDocument: boolean;
+  signatures: Array<{
+    role: string;
+    signerDisplayName: string;
+    signedAt: string;
+    signatureImageUrl?: string | null;
+  }>;
+}
+
+export interface PriceLineItem {
+  code: string;
+  description: string;
+  amount: number;
+  currency: string;
+}
+
+export interface GeneratePriceResponse {
+  bookingId: string;
+  totalAmount: number;
+  currency: string;
+  lineItems: PriceLineItem[];
+  warnings: string[];
+}
+
+export interface SignContractPayload {
+  role: "CUSTOMER" | "STAFF";
+  signatureImageBase64: string;
+  signerDisplayName: string;
+  consentText?: string;
+}
+
+export interface BookingListFilter {
+  status?: string;
+  page?: number;
+  pageSize?: number;
+  sortBy?: string;
+  sortOrder?: "ASC" | "DESC";
+}
+
 export const bookingsService = {
-  list: async (): Promise<PaginatedResponse<Freight.IBooking>> => {
-    const { data } = await client.get("/api/bookings");
+  list: async (
+    filter: BookingListFilter | void = {},
+  ): Promise<PaginatedResponse<Freight.IBooking>> => {
+    const { data } = await client.get("/api/bookings", { params: filter });
     return data.data;
   },
   get: async (id: string): Promise<Freight.IBooking> => {
@@ -24,4 +77,60 @@ export const bookingsService = {
   remove: async (id: string): Promise<void> => {
     await client.delete(`/api/bookings/${id}`);
   },
+
+  cancel: async (id: string, reason: string): Promise<Freight.IBooking> => {
+    const { data } = await client.post(`/api/bookings/${id}/cancel`, { reason });
+    return data.data;
+  },
+
+  generatePrice: async (id: string): Promise<GeneratePriceResponse> => {
+    const { data } = await client.post(`/api/bookings/${id}/generate-price`);
+    return data.data;
+  },
+
+  submit: async (id: string): Promise<Freight.IBooking> => {
+    const { data } = await client.post(`/api/bookings/${id}/submit`);
+    return data.data;
+  },
+
+  uploadDocuments: async (
+    id: string,
+    files: Record<string, File | File[] | null>,
+  ): Promise<Freight.IBooking> => {
+    const formData = new FormData();
+    for (const [key, fileOrFiles] of Object.entries(files)) {
+      if (!fileOrFiles) continue;
+      if (Array.isArray(fileOrFiles)) {
+        for (const f of fileOrFiles) formData.append(key, f);
+      } else {
+        formData.append(key, fileOrFiles);
+      }
+    }
+    const { data } = await client.post(
+      `/api/bookings/${id}/documents`,
+      formData,
+      { headers: { "Content-Type": "multipart/form-data" } },
+    );
+    return data.data;
+  },
+
+  getContractView: async (id: string): Promise<ContractView> => {
+    const { data } = await client.get(B.CONTRACT_VIEW(id));
+    return data.data ?? data;
+  },
+
+  downloadContractDocument: async (id: string): Promise<Blob> => {
+    const { data } = await client.get(B.CONTRACT_DOCUMENT(id), {
+      responseType: "blob",
+    });
+    return data;
+  },
+
+  signContract: async (
+    id: string,
+    payload: SignContractPayload,
+  ): Promise<Freight.IBooking> => {
+    const { data } = await client.post(B.CONTRACT_SIGN(id), payload);
+    return data.data ?? data;
+  },
 };
diff --git a/apps/edr-freight-web/portal/src/services/companies.service.ts b/apps/edr-freight-web/portal/src/services/companies.service.ts
index 4a68b5aa2..359881a9b 100644
--- a/apps/edr-freight-web/portal/src/services/companies.service.ts
+++ b/apps/edr-freight-web/portal/src/services/companies.service.ts
@@ -2,6 +2,7 @@ import { client } from "@/utils/api";
 import { unwrap } from "@/utils/endpoint";
 import { URL_CONSTANTS } from "@/constants/URLS";
 import type { ApiResponse } from "@/types/apiResponse";
+import type { ProfileResponse, UpdateProfilePayload } from "@/types/profile";
 import { isAxiosError } from "axios";
 
 export interface ExternalProfileResponse {
@@ -80,4 +81,37 @@ export const companiesService = {
     );
     return unwrap(response.data);
   },
+
+  getProfile: async (): Promise<ProfileResponse> => {
+    const response = await client.get<ApiResponse<ProfileResponse>>(
+      URL_CONSTANTS.COMPANIES_API.PROFILE,
+    );
+    return unwrap(response.data);
+  },
+
+  updateProfile: async (payload: UpdateProfilePayload): Promise<ProfileResponse> => {
+    const response = await client.patch<ApiResponse<ProfileResponse>>(
+      URL_CONSTANTS.COMPANIES_API.PROFILE,
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
+  uploadDocuments: async (
+    companyId: string,
+    files: Record<string, File | File[] | null>,
+  ): Promise<void> => {
+    const formData = new FormData();
+    for (const [fieldName, fileOrFiles] of Object.entries(files)) {
+      if (!fileOrFiles) continue;
+      if (Array.isArray(fileOrFiles)) {
+        for (const f of fileOrFiles) {
+          formData.append(fieldName, f);
+        }
+      } else {
+        formData.append(fieldName, fileOrFiles);
+      }
+    }
+    await client.post(URL_CONSTANTS.COMPANIES_API.DOCUMENTS(companyId), formData);
+  },
 };
diff --git a/apps/edr-freight-web/portal/src/services/customers.service.ts b/apps/edr-freight-web/portal/src/services/customers.service.ts
deleted file mode 100644
index 3d809709d..000000000
--- a/apps/edr-freight-web/portal/src/services/customers.service.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { client } from "@/utils/api";
-import { unwrap } from "@/utils/endpoint";
-import { URL_CONSTANTS } from "@/constants/URLS";
-import type { ApiResponse } from "@/types/apiResponse";
-import type {
-  CreateCustomerDto,
-  Customer,
-  UpdateCustomerDto,
-} from "@/types/customers";
-import { isAxiosError } from "axios";
-
-const BASE = URL_CONSTANTS.CUSTOMERS_API.BASE;
-
-export const customersService = {
-  list: async (): Promise<Customer[]> => {
-    const response = await client.get<ApiResponse<Customer[]>>(BASE);
-    return unwrap(response.data);
-  },
-
-  getById: async (id: string): Promise<Customer> => {
-    const response = await client.get<ApiResponse<Customer>>(
-      URL_CONSTANTS.CUSTOMERS_API.BY_ID(id),
-    );
-    return unwrap(response.data);
-  },
-
-  getByUserId: async (userId: string): Promise<Customer | null> => {
-    try {
-      const response = await client.get<ApiResponse<Customer>>(
-        URL_CONSTANTS.CUSTOMERS_API.BY_USER_ID(userId),
-      );
-      return unwrap(response.data);
-    } catch (e) {
-      if (isAxiosError(e) && e.response?.status === 404) {
-        return null;
-      }
-      throw e;
-    }
-  },
-
-  create: async (payload: CreateCustomerDto): Promise<Customer> => {
-    const response = await client.post<ApiResponse<Customer>>(BASE, payload);
-    return unwrap(response.data);
-  },
-
-  update: async (id: string, payload: UpdateCustomerDto): Promise<Customer> => {
-    const response = await client.patch<ApiResponse<Customer>>(
-      URL_CONSTANTS.CUSTOMERS_API.BY_ID(id),
-      payload,
-    );
-    return unwrap(response.data);
-  },
-
-  remove: async (id: string): Promise<void> => {
-    await client.delete(URL_CONSTANTS.CUSTOMERS_API.BY_ID(id));
-  },
-};
diff --git a/apps/edr-freight-web/portal/src/services/files/file_upload_settings.ts b/apps/edr-freight-web/portal/src/services/files/file_upload_settings.ts
deleted file mode 100644
index c0ee8b1dc..000000000
--- a/apps/edr-freight-web/portal/src/services/files/file_upload_settings.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { api } from "../crud";
-
-import { URL_CONSTANTS } from "../../constants/URLS"
\ No newline at end of file
diff --git a/apps/edr-freight-web/portal/src/types/profile.ts b/apps/edr-freight-web/portal/src/types/profile.ts
new file mode 100644
index 000000000..cab34ee23
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/types/profile.ts
@@ -0,0 +1,43 @@
+export interface ProfileResponse {
+  companyId: string;
+  companyName: string;
+  companyEmail: string | null;
+  companyPhone: string | null;
+  companyLocation: string;
+  companyAddress: string | null;
+  tinNumber: string;
+  vatNumber: string | null;
+  fanNumber: string | null;
+  contactPersonName: string | null;
+  contactPersonPhone: string | null;
+  generalManagerName: string | null;
+  generalManagerEmail: string | null;
+  generalManagerPhone: string | null;
+  poaName: string | null;
+  poaPhone: string | null;
+  poaEmail: string | null;
+  poaLocation: string | null;
+  poaAddress: string | null;
+  profileId: string;
+}
+
+export interface UpdateProfilePayload {
+  companyName?: string;
+  companyEmail?: string;
+  companyPhone?: string;
+  companyLocation?: string;
+  companyAddress?: string;
+  tin?: string;
+  vatNumber?: string;
+  fanNumber?: string;
+  contactPersonName?: string;
+  contactPersonPhone?: string;
+  generalManagerName?: string;
+  generalManagerEmail?: string;
+  generalManagerPhone?: string;
+  poaName?: string;
+  poaPhone?: string;
+  poaEmail?: string;
+  poaLocation?: string;
+  poaAddress?: string;
+}
diff --git a/apps/edr-freight-web/portal/vite.config.ts.timestamp-1780409607954-40aaca5c64a3.mjs b/apps/edr-freight-web/portal/vite.config.ts.timestamp-1780409607954-40aaca5c64a3.mjs
new file mode 100644
index 000000000..3d7fe4d5b
--- /dev/null
+++ b/apps/edr-freight-web/portal/vite.config.ts.timestamp-1780409607954-40aaca5c64a3.mjs
@@ -0,0 +1,24 @@
+// vite.config.ts
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "file:///C:/laragon/www/edr-platform/node_modules/.pnpm/vite@5.4.21_@types+node@20.19.41_lightningcss@1.32.0_terser@5.48.0/node_modules/vite/dist/node/index.js";
+import react from "file:///C:/laragon/www/edr-platform/node_modules/.pnpm/@vitejs+plugin-react@4.7.0_vite@5.4.21_@types+node@20.19.41_lightningcss@1.32.0_terser@5.48.0_/node_modules/@vitejs/plugin-react/dist/index.js";
+import tailwindcss from "file:///C:/laragon/www/edr-platform/node_modules/.pnpm/@tailwindcss+vite@4.3.0_vite@5.4.21_@types+node@20.19.41_lightningcss@1.32.0_terser@5.48.0_/node_modules/@tailwindcss/vite/dist/index.mjs";
+var __vite_injected_original_import_meta_url = "file:///C:/laragon/www/edr-platform/apps/edr-freight-web/portal/vite.config.ts";
+var __dirname = path.dirname(fileURLToPath(__vite_injected_original_import_meta_url));
+var vite_config_default = defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src")
+    }
+  },
+  server: {
+    port: 5173,
+    host: "0.0.0.0"
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxsYXJhZ29uXFxcXHd3d1xcXFxlZHItcGxhdGZvcm1cXFxcYXBwc1xcXFxlZHItZnJlaWdodC13ZWJcXFxccG9ydGFsXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCJDOlxcXFxsYXJhZ29uXFxcXHd3d1xcXFxlZHItcGxhdGZvcm1cXFxcYXBwc1xcXFxlZHItZnJlaWdodC13ZWJcXFxccG9ydGFsXFxcXHZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9DOi9sYXJhZ29uL3d3dy9lZHItcGxhdGZvcm0vYXBwcy9lZHItZnJlaWdodC13ZWIvcG9ydGFsL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHBhdGggZnJvbSBcIm5vZGU6cGF0aFwiO1xyXG5pbXBvcnQgeyBmaWxlVVJMVG9QYXRoIH0gZnJvbSBcIm5vZGU6dXJsXCI7XHJcblxyXG5pbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tIFwidml0ZVwiO1xyXG5pbXBvcnQgcmVhY3QgZnJvbSBcIkB2aXRlanMvcGx1Z2luLXJlYWN0XCI7XHJcbmltcG9ydCB0YWlsd2luZGNzcyBmcm9tIFwiQHRhaWx3aW5kY3NzL3ZpdGVcIjtcclxuXHJcbmNvbnN0IF9fZGlybmFtZSA9IHBhdGguZGlybmFtZShmaWxlVVJMVG9QYXRoKGltcG9ydC5tZXRhLnVybCkpO1xyXG5cclxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcclxuICBwbHVnaW5zOiBbcmVhY3QoKSwgdGFpbHdpbmRjc3MoKV0sXHJcbiAgcmVzb2x2ZToge1xyXG4gICAgYWxpYXM6IHtcclxuICAgICAgXCJAXCI6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUsIFwiLi9zcmNcIiksXHJcbiAgICB9LFxyXG4gIH0sXHJcbiAgc2VydmVyOiB7XHJcbiAgICBwb3J0OiA1MTczLFxyXG4gICAgaG9zdDogXCIwLjAuMC4wXCIsXHJcbiAgfSxcclxufSk7XHJcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBcVcsT0FBTyxVQUFVO0FBQ3RYLFNBQVMscUJBQXFCO0FBRTlCLFNBQVMsb0JBQW9CO0FBQzdCLE9BQU8sV0FBVztBQUNsQixPQUFPLGlCQUFpQjtBQUwyTSxJQUFNLDJDQUEyQztBQU9wUixJQUFNLFlBQVksS0FBSyxRQUFRLGNBQWMsd0NBQWUsQ0FBQztBQUU3RCxJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxHQUFHLFlBQVksQ0FBQztBQUFBLEVBQ2hDLFNBQVM7QUFBQSxJQUNQLE9BQU87QUFBQSxNQUNMLEtBQUssS0FBSyxRQUFRLFdBQVcsT0FBTztBQUFBLElBQ3RDO0FBQUEsRUFDRjtBQUFBLEVBQ0EsUUFBUTtBQUFBLElBQ04sTUFBTTtBQUFBLElBQ04sTUFBTTtBQUFBLEVBQ1I7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=
diff --git a/package.json b/package.json
index 31a34c325..7b33dff30 100644
--- a/package.json
+++ b/package.json
@@ -17,20 +17,22 @@
     "prepare": "husky"
   },
   "devDependencies": {
-    "turbo": "^2.3.0",
-    "typescript": "^5.5.4",
-    "prettier": "^3.3.3",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
-    "@commitlint/cli": "^19.5.0",
-    "@commitlint/config-conventional": "^19.5.0"
+    "prettier": "^3.3.3",
+    "turbo": "^2.3.0",
+    "typeorm": "0.3.30",
+    "typescript": "^5.5.4"
   },
   "pnpm": {
     "overrides": {
       "date-fns": "^3.6.0",
       "pdfjs-dist": "^3.11.174",
       "react": "19.2.6",
-      "react-dom": "19.2.6"
+      "react-dom": "19.2.6",
+      "typeorm": "0.3.30"
     }
   },
   "lint-staged": {
diff --git a/packages/api-common/src/interceptors/response-transform.interceptor.ts b/packages/api-common/src/interceptors/response-transform.interceptor.ts
index 6c924a884..d3a024b62 100644
--- a/packages/api-common/src/interceptors/response-transform.interceptor.ts
+++ b/packages/api-common/src/interceptors/response-transform.interceptor.ts
@@ -3,7 +3,9 @@ import {
   ExecutionContext,
   Injectable,
   NestInterceptor,
+  StreamableFile,
 } from "@nestjs/common";
+import { Readable } from "stream";
 import { Observable } from "rxjs";
 import { map } from "rxjs/operators";
 
@@ -16,18 +18,28 @@ export interface StandardResponse<T> {
 @Injectable()
 export class ResponseTransformInterceptor<T> implements NestInterceptor<
   T,
-  StandardResponse<T>
+  StandardResponse<T> | T
 > {
   intercept(
     _context: ExecutionContext,
     next: CallHandler<T>,
-  ): Observable<StandardResponse<T>> {
+  ): Observable<StandardResponse<T> | T> {
     return next.handle().pipe(
-      map((data) => ({
-        success: true,
-        data,
-        timestamp: new Date().toISOString(),
-      })),
+      map((data) => {
+        if (
+          data instanceof StreamableFile ||
+          data instanceof Buffer ||
+          data instanceof Readable
+        ) {
+          return data;
+        }
+
+        return {
+          success: true,
+          data,
+          timestamp: new Date().toISOString(),
+        };
+      }),
     );
   }
 }
diff --git a/packages/types/src/freight/index.ts b/packages/types/src/freight/index.ts
index 2dce17419..7e20712d3 100644
--- a/packages/types/src/freight/index.ts
+++ b/packages/types/src/freight/index.ts
@@ -27,12 +27,31 @@ export enum CalculationMethod {
   PERCENTAGE = 'PERCENTAGE',
 }
 
+export enum FreightType {
+  Container = 'CONTAINER',
+  Bulk = 'BULK',
+}
+
 export enum BookingStatus {
   Draft = "DRAFT",
-  Confirmed = "CONFIRMED",
+  Submitted = "SUBMITTED",
+  ChangesRequested = "CHANGES_REQUESTED",
+  PendingApproval = "PENDING_APPROVAL",
+  ApprovedPendingSignature = "APPROVED_PENDING_SIGNATURE",
+  Approved = "APPROVED",
+  ContractReady = "CONTRACT_READY",
+  SignedCustomer = "SIGNED_CUSTOMER",
+  FullyExecuted = "FULLY_EXECUTED",
+  PnrGenerated = "PNR_GENERATED",
+  PaymentVerificationInProgress = "PAYMENT_VERIFICATION_IN_PROGRESS",
+  Paid = "PAID",
   InTransit = "IN_TRANSIT",
+  Completed = "COMPLETED",
   Delivered = "DELIVERED",
+  Rejected = "REJECTED",
   Cancelled = "CANCELLED",
+  PendingConsolidation = "PENDING_CONSOLIDATION",
+  Consolidated = "CONSOLIDATED",
 }
 
 export enum ConsignmentStatus {
@@ -153,6 +172,14 @@ export interface IConsignment extends BaseEntity {
   destinationStation: string;
 }
 
+export interface IYard extends BaseEntity {
+  code: string;
+  label: string;
+  country: string;
+  isActive: boolean;
+  displayOrder: number;
+}
+
 export interface IBooking extends BaseEntity {
   reference: string;
   customerId: string;
@@ -172,11 +199,11 @@ export interface IBooking extends BaseEntity {
   lastMileDeliveryAddress?: string | null;
 
   equipmentReturn: "WITH_RETURN" | "WITHOUT_RETURN";
-  originStation: string;
-  destinationStation: string;
+  originYard?: IYard | null;
+  destinationYard?: IYard | null;
   cargoTotalWeightVgm: number;
 
-  freightType: "BULK" | "BREAK_BULK";
+  freightType: FreightType;
   freightSubtype?: string | null;
 
   isHazardous: boolean;
@@ -203,7 +230,20 @@ export interface IBooking extends BaseEntity {
   signedByCeoId?: string | null;
   signedByCeoAt?: string | null;
 
-  files?: Array<{ id: string; name: string; url: string; mimeType: string }>;
+  files?: Array<{
+    id: string;
+    code: string;
+    name: string;
+    url: string;
+    mimeType: string;
+    size: number;
+    resourceId: string;
+    resource: string;
+    signedUrl?: string | null;
+  }>;
+
+  latestChangeRequestNote?: string | null;
+  contractSummary?: string | null;
 }
 
 export interface IInvoice extends BaseEntity {
@@ -283,6 +323,7 @@ export interface CreateBookingContainerDto {
 export interface CreateBookingDto {
   reference?: string;
   customerId?: string;
+  companyId?: string;
   trainId?: string;
   scheduledDate: string;
   contractType: "NEW" | "RENEWAL";
@@ -294,7 +335,8 @@ export interface CreateBookingDto {
   originYardId: string;
   destinationYardId: string;
   tradeDirection: "IMPORT" | "EXPORT" | "DOMESTIC";
-  cargoTypeId: string;
+  freightType: FreightType;
+  cargoTypeId?: string;
   cargoFreeText?: string;
   shippingLineId?: string;
   cargoTotalWeightVgm: number;
@@ -304,6 +346,6 @@ export interface CreateBookingDto {
   startDate?: string;
   endDate?: string;
   financialTerms?: string;
-  containers: CreateBookingContainerDto[];
+  containers?: CreateBookingContainerDto[];
   allowConsolidation?: boolean;
 }
diff --git a/packages/ui-common/src/components/data-table/table.tsx b/packages/ui-common/src/components/data-table/table.tsx
index 697062f54..adbd6e428 100644
--- a/packages/ui-common/src/components/data-table/table.tsx
+++ b/packages/ui-common/src/components/data-table/table.tsx
@@ -97,7 +97,30 @@ export function DataTable<TData, TValue>({
                   <TableRow
                     key={row.id}
                     data-state={row.getIsSelected() && "selected"}
-                    onClick={() => onRowClick?.(row.original)}
+                    onClick={(event) => {
+                      if (!onRowClick) return;
+                      const target = event.target as HTMLElement;
+                      if (
+                        target.closest(
+                          [
+                            "button",
+                            "a",
+                            "input",
+                            "textarea",
+                            "select",
+                            "[role='menu']",
+                            "[role='menuitem']",
+                            "[data-slot='dialog-content']",
+                            "[data-slot='dialog-overlay']",
+                            "[data-slot='dropdown-menu-content']",
+                            "[data-stop-row-click]",
+                          ].join(","),
+                        )
+                      ) {
+                        return;
+                      }
+                      onRowClick(row.original);
+                    }}
                     role={onRowClick ? "button" : ""}
                     className={
                       onRowClick
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index df069b83d..feb0162dc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,6 +9,7 @@ overrides:
   pdfjs-dist: ^3.11.174
   react: 19.2.6
   react-dom: 19.2.6
+  typeorm: 0.3.30
 
 importers:
 
@@ -32,6 +33,9 @@ importers:
       turbo:
         specifier: ^2.3.0
         version: 2.9.14
+      typeorm:
+        specifier: 0.3.30
+        version: 0.3.30(babel-plugin-macros@3.1.0)(pg@8.21.0)(ts-node@10.9.2(@types/node@20.19.41)(typescript@5.9.3))
       typescript:
         specifier: ^5.5.4
         version: 5.9.3
@@ -95,21 +99,24 @@ importers:
       dotenv:
         specifier: ^17.4.2
         version: 17.4.2
+      handlebars:
+        specifier: ^4.7.9
+        version: 4.7.9
       minio:
         specifier: 7.1.3
         version: 7.1.3
       pg:
         specifier: ^8.13.0
         version: 8.21.0
+      puppeteer:
+        specifier: ^24.2.0
+        version: 24.43.1(typescript@5.9.3)
       reflect-metadata:
         specifier: ^0.2.2
         version: 0.2.2
       rxjs:
         specifier: ^7.8.1
         version: 7.8.2
-      typeorm:
-        specifier: ^0.3.20
-        version: 0.3.30(babel-plugin-macros@3.1.0)(pg@8.21.0)(ts-node@10.9.2(@types/node@20.19.41)(typescript@5.9.3))
     devDependencies:
       '@edr/eslint-config':
         specifier: workspace:*
@@ -162,6 +169,9 @@ importers:
       tsconfig-paths:
         specifier: ^4.2.0
         version: 4.2.0
+      typeorm:
+        specifier: 0.3.30
+        version: 0.3.30(babel-plugin-macros@3.1.0)(pg@8.21.0)(ts-node@10.9.2(@types/node@20.19.41)(typescript@5.9.3))
       typescript:
         specifier: ^5.5.4
         version: 5.9.3
@@ -213,6 +223,9 @@ importers:
       recharts:
         specifier: ^3.8.1
         version: 3.8.1(@types/react@18.3.29)(react-dom@19.2.6(react@19.2.6))(react-is@19.2.6)(react@19.2.6)(redux@5.0.1)
+      sonner:
+        specifier: ^2.0.7
+        version: 2.0.7(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       tailwind-merge:
         specifier: ^3.6.0
         version: 3.6.0
@@ -286,6 +299,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      date-fns:
+        specifier: ^3.6.0
+        version: 3.6.0
       lucide-react:
         specifier: ^1.14.0
         version: 1.16.0(react@19.2.6)
@@ -301,6 +317,9 @@ importers:
       react-hook-form:
         specifier: ^7.76.0
         version: 7.76.0(react@19.2.6)
+      react-hot-toast:
+        specifier: ^2.6.0
+        version: 2.6.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react-router-dom:
         specifier: ^6.27.0
         version: 6.30.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -411,7 +430,7 @@ importers:
         specifier: ^7.8.1
         version: 7.8.2
       typeorm:
-        specifier: ^0.3.20
+        specifier: 0.3.30
         version: 0.3.30(babel-plugin-macros@3.1.0)(pg@8.21.0)(ts-node@10.9.2(@types/node@20.19.41)(typescript@5.9.3))
     devDependencies:
       '@edr/eslint-config':
@@ -716,7 +735,7 @@ importers:
         specifier: ^7.8.1
         version: 7.8.2
       typeorm:
-        specifier: ^0.3.20
+        specifier: 0.3.30
         version: 0.3.30(babel-plugin-macros@3.1.0)(pg@8.21.0)(ts-node@10.9.2(@types/node@20.19.41)(typescript@5.9.3))
       typescript:
         specifier: ^5.5.4
@@ -2284,7 +2303,7 @@ packages:
       '@nestjs/core': ^10.0.0 || ^11.0.0
       reflect-metadata: ^0.1.13 || ^0.2.0
       rxjs: ^7.2.0
-      typeorm: ^0.3.0 || ^1.0.0-dev
+      typeorm: 0.3.30
 
   '@noble/ciphers@1.3.0':
     resolution: {integrity: sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==}
@@ -2440,6 +2459,11 @@ packages:
   '@popperjs/core@2.11.8':
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
+  '@puppeteer/browsers@2.13.2':
+    resolution: {integrity: sha512-5EUZSUIc37H6aIXyWO0Z4y8NlF8NnjgmqeQgOGiswAU7pY0HOo16ho4+alIWmSfdZnjqBRawMsP3I5YqLSn6kw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   '@radix-ui/number@1.1.1':
     resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
 
@@ -3876,6 +3900,9 @@ packages:
   '@tokenizer/token@0.3.0':
     resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==}
 
+  '@tootallnate/quickjs-emscripten@0.23.0':
+    resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
+
   '@tria-plc/api-common@0.1.4':
     resolution: {integrity: sha512-lm9esp5PDxUyggqxYXbx2CQhZKwtcAaAcGFuuUURw3u5DlzGUNwMOFkQkDLM/fbgN+33+s1RKC7UynnG9NZFww==, tarball: https://npm.pkg.github.com/download/@tria-plc/api-common/0.1.4/de160e4bb61a882efd9c877b4614028f1ffd7cb8}
     peerDependencies:
@@ -3890,7 +3917,7 @@ packages:
       '@tria-plc/iamapi-common': '*'
       reflect-metadata: ^0.2.0
       rxjs: ^7.8.0
-      typeorm: ^0.3.0
+      typeorm: 0.3.30
 
   '@tria-plc/iamapi-common@0.1.6':
     resolution: {integrity: sha512-qaCLZ1TgbcQ5XciRuA/aZjRCM/GmGYgcmsyDDIlhiMNw3FL3DCiR/QiFuQpERvV4FqgQNBJg66+S/jXO3I2jbw==, tarball: https://npm.pkg.github.com/download/@tria-plc/iamapi-common/0.1.6/e2a8f3357b650bb9477facae4aaa7044382acebf}
@@ -3911,7 +3938,7 @@ packages:
       class-validator: ^0.14.1
       reflect-metadata: ^0.2.0
       rxjs: ^7.8.0
-      typeorm: ^0.3.0
+      typeorm: 0.3.30
 
   '@tria-plc/iamui-common@1.1.1':
     resolution: {integrity: sha512-aj9fMxmB/3kwSnN1vl8NvmCrI/1quNjfg9Bb7fJR4HhWEE26foIZC2xeg1ERzQxBll6rMj/R0Zl0+Riv6OONTQ==, tarball: https://npm.pkg.github.com/download/@tria-plc/iamui-common/1.1.1/98fa2e350b807e9d123cab7d75038a027005ef41}
@@ -4169,6 +4196,9 @@ packages:
   '@types/yargs@17.0.35':
     resolution: {integrity: sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==}
 
+  '@types/yauzl@2.10.3':
+    resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
+
   '@typescript-eslint/eslint-plugin@8.59.4':
     resolution: {integrity: sha512-PegsU+XfyJJNjd4+u/k6f9yTyp0lEXXiPopUNobZcIAUJFGICFLN+sP0Rb3JehVmiij1Ph0dFGYqODoRo/2+6A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -5093,6 +5123,10 @@ packages:
     resolution: {integrity: sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==}
     engines: {node: '>=0.10.0'}
 
+  ast-types@0.13.4:
+    resolution: {integrity: sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==}
+    engines: {node: '>=4'}
+
   ast-types@0.16.1:
     resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
     engines: {node: '>=4'}
@@ -5133,8 +5167,13 @@ packages:
   axios@1.16.1:
     resolution: {integrity: sha512-caYkukvroVPO8KrzuJEb50Hm07KwfBZPEC3VeFHTsqWHvKTsy54hjJz9BS/cdaypROE2rH6xvm9mHX4fgWkr3A==}
 
-  axios@1.17.0:
-    resolution: {integrity: sha512-J8SwNxprqqpbfenehxWYXE7CW+wM1BB4w3+N+g+/Wx40xM4rsLrfPmHHxSWIxJLYDgSY/HqlFPIYb2/S3rxafw==}
+  b4a@1.8.1:
+    resolution: {integrity: sha512-aiqre1Nr0B/6DgE2N5vwTc+2/oQZ4Wh1t4NznYY4E00y8LCt6NqdRv81so00oo27D8MVKTpUa/MwUUtBLXCoDw==}
+    peerDependencies:
+      react-native-b4a: '*'
+    peerDependenciesMeta:
+      react-native-b4a:
+        optional: true
 
   babel-jest@29.7.0:
     resolution: {integrity: sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==}
@@ -5192,6 +5231,47 @@ packages:
     resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
     engines: {node: 18 || 20 || >=22}
 
+  bare-events@2.9.1:
+    resolution: {integrity: sha512-Z0oHEHAFDZkffN8Qc39zNZjQlMDkPJRyyyZieU1VH7u8c5S+qHZ2S8ixdKIAxEjfHO7FJxXmJWgteOghVanIsg==}
+    peerDependencies:
+      bare-abort-controller: '*'
+    peerDependenciesMeta:
+      bare-abort-controller:
+        optional: true
+
+  bare-fs@4.7.2:
+    resolution: {integrity: sha512-aTvMFUWkBmjzKtEQMDGGDNF8bkfpD5N1b/FCwt7A3wrU4t1o/e/85Wzkluh6JlODCjqVESYCkQCdTXqZ9G7VFg==}
+    engines: {bare: '>=1.16.0'}
+    peerDependencies:
+      bare-buffer: '*'
+    peerDependenciesMeta:
+      bare-buffer:
+        optional: true
+
+  bare-os@3.9.1:
+    resolution: {integrity: sha512-6M5XjcnsygQNPMCMPXSK379xrJFiZ/AEMNBmFEmQW8d/789VQATvriyi5r0HYTL9TkQ26rn3kgdTG3aisbrXkQ==}
+    engines: {bare: '>=1.14.0'}
+
+  bare-path@3.0.1:
+    resolution: {integrity: sha512-ghj2DSK/2e99a1anTVPCV4m4YIYtrbXhfM7V3D7XZLOTsybnYyaJloymGqssQc8l/or0UoDyRtNQkmkEF/ysgQ==}
+
+  bare-stream@2.13.1:
+    resolution: {integrity: sha512-Vp0cnjYyrEC4whYTymQ+YZi6pBpfiICZO3cfRG8sy67ZNWe951urv1x4eW1BKNngw3U+3fPYb5JQvHbCtxH7Ow==}
+    peerDependencies:
+      bare-abort-controller: '*'
+      bare-buffer: '*'
+      bare-events: '*'
+    peerDependenciesMeta:
+      bare-abort-controller:
+        optional: true
+      bare-buffer:
+        optional: true
+      bare-events:
+        optional: true
+
+  bare-url@2.4.4:
+    resolution: {integrity: sha512-zbQJi2YQUe3SrX19TItQ8DoPj9E1i5rrdE9iHV4PhUif1GodNRSe85lavVGbmU7P4M8579EQi4akGFuhCATWaQ==}
+
   base64-arraybuffer@1.0.2:
     resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
     engines: {node: '>= 0.6.0'}
@@ -5212,6 +5292,10 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  basic-ftp@5.3.1:
+    resolution: {integrity: sha512-bopVNp6ugyA150DDuZfPFdt1KZ5a94ZDiwX4hMgZDzF+GttD80lEy8kj98kbyhLXnPvhtIo93mdnLIjpCAeeOw==}
+    engines: {node: '>=10.0.0'}
+
   bidi-js@1.0.3:
     resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
 
@@ -5415,6 +5499,11 @@ packages:
     resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
     engines: {node: '>=6.0'}
 
+  chromium-bidi@14.0.0:
+    resolution: {integrity: sha512-9gYlLtS6tStdRWzrtXaTMnqcM4dudNegMXJxkR0I/CXObHalYeYcAMPrL19eroNZHtJ8DQmu1E+ZNOYu/IXMXw==}
+    peerDependencies:
+      devtools-protocol: '*'
+
   ci-info@3.9.0:
     resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
     engines: {node: '>=8'}
@@ -5782,6 +5871,10 @@ packages:
     resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
     engines: {node: '>= 12'}
 
+  data-uri-to-buffer@6.0.2:
+    resolution: {integrity: sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==}
+    engines: {node: '>= 14'}
+
   data-urls@5.0.0:
     resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
     engines: {node: '>=18'}
@@ -5923,6 +6016,10 @@ packages:
     resolution: {integrity: sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==}
     engines: {node: '>=0.10.0'}
 
+  degenerator@5.0.1:
+    resolution: {integrity: sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==}
+    engines: {node: '>= 14'}
+
   delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -5952,6 +6049,9 @@ packages:
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
+  devtools-protocol@0.0.1608973:
+    resolution: {integrity: sha512-Tpm17fxYzt+J7VrGdc1k8YdRqS3YV7se/M6KeemEqvUbq/n7At1rWVuXMxQgpWkdwSdIEKYbU//Bve+Shm4YNQ==}
+
   dezalgo@1.0.4:
     resolution: {integrity: sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==}
 
@@ -6190,6 +6290,10 @@ packages:
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
+  escodegen@2.1.0:
+    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
+    engines: {node: '>=6.0'}
+    hasBin: true
 
   eslint-config-prettier@9.1.2:
     resolution: {integrity: sha512-iI1f+D2ViGn+uvv5HuHVUamg8ll4tN+JRHGc6IJi4TP9Kl976C57fzPXgseXNs8v0iA8aSJpHsTWjDb9QJamGQ==}
@@ -6359,6 +6463,9 @@ packages:
   eventemitter3@5.0.4:
     resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
 
+  events-universal@1.0.1:
+    resolution: {integrity: sha512-LUd5euvbMLpwOF8m6ivPCbhQeSiYVNb8Vs0fQ8QjXo0JTkEHpz8pxdQf0gStltaPpw0Cca8b39KxvK9cfKRiAw==}
+
   events@3.3.0:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
@@ -6433,6 +6540,11 @@ packages:
     resolution: {integrity: sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==}
     engines: {node: '>=0.10.0'}
 
+  extract-zip@2.0.1:
+    resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
+    engines: {node: '>= 10.17.0'}
+    hasBin: true
+
   falsey@0.3.2:
     resolution: {integrity: sha512-lxEuefF5MBIVDmE6XeqCdM4BWk1+vYmGZtkbKZ/VFcg6uBBw6fXNEbWmxCjDdQlFc9hy450nkiWwM3VAW6G1qg==}
     engines: {node: '>=0.10.0'}
@@ -6451,6 +6563,9 @@ packages:
     resolution: {integrity: sha512-jt2DW/aNFNwke7AUd+Z+e6pz39KO5rzdbbFCg2sGafS4mk13MI7Z8O5z9cADNn5lhGODIgLwug6TZO2ctf7kcw==}
     engines: {node: '>=6.0.0'}
 
+  fast-fifo@1.3.2:
+    resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
+
   fast-glob@3.3.3:
     resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
@@ -6489,6 +6604,9 @@ packages:
   fb-watchman@2.0.2:
     resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
 
+  fd-slicer@1.1.0:
+    resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
+
   fdir@6.5.0:
     resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
     engines: {node: '>=12.0.0'}
@@ -6748,6 +6866,10 @@ packages:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
 
+  get-stream@5.2.0:
+    resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
+    engines: {node: '>=8'}
+
   get-stream@6.0.1:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
@@ -6764,6 +6886,10 @@ packages:
     resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
     engines: {node: '>= 0.4'}
 
+  get-uri@6.0.5:
+    resolution: {integrity: sha512-b1O07XYq8eRuVzBNgJLstU6FYc1tS6wnMtF1I1D9lE8LxZSOGZ7LhxN54yPP6mGw5f2CkXY2BQUL9Fx41qvcIg==}
+    engines: {node: '>= 14'}
+
   get-value@2.0.6:
     resolution: {integrity: sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==}
     engines: {node: '>=0.10.0'}
@@ -8115,6 +8241,10 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lru-cache@7.18.3:
+    resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
+    engines: {node: '>=12'}
+
   lucide-react@0.513.0:
     resolution: {integrity: sha512-CJZKq2g8Y8yN4Aq002GahSXbG2JpFv9kXwyiOAMvUBv7pxeOFHUWKB0mO7MiY4ZVFCV4aNjv2BJFq/z3DgKPQg==}
     peerDependencies:
@@ -8291,6 +8421,9 @@ packages:
     resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
     engines: {node: '>= 8'}
 
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
   mixin-deep@1.3.2:
     resolution: {integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==}
     engines: {node: '>=0.10.0'}
@@ -8393,6 +8526,10 @@ packages:
       '@nestjs/common': '>=9.0.0'
       '@nestjs/core': '>=9.0.0'
 
+  netmask@2.1.1:
+    resolution: {integrity: sha512-eonl3sLUha+S1GzTPxychyhnUzKyeQkZ7jLjKrBagJgPla13F+uQ71HgpFefyHgqrjEbCPkDArxYsjY8/+gLKA==}
+    engines: {node: '>= 0.4.0'}
+
   next-themes@0.4.6:
     resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
     peerDependencies:
@@ -8614,6 +8751,14 @@ packages:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
+  pac-proxy-agent@7.2.0:
+    resolution: {integrity: sha512-TEB8ESquiLMc0lV8vcd5Ql/JAKAoyzHFXaStwjkzpOpC5Yv+pIzLfHvjTSdf3vpa2bMiUQrg9i6276yn8666aA==}
+    engines: {node: '>= 14'}
+
+  pac-resolver@7.0.1:
+    resolution: {integrity: sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==}
+    engines: {node: '>= 14'}
+
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
@@ -8732,6 +8877,9 @@ packages:
     resolution: {integrity: sha512-peBp3qZyuS6cNIJ2akRNG1uo1WJ1d0wTxg/fxMdZ0BqCVhx242bSFHM9eNqflfJVS9SsgkzgT/1UgnsurBOTMg==}
     engines: {node: '>=14.16'}
 
+  pend@1.2.0:
+    resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
+
   perfect-freehand@1.2.3:
     resolution: {integrity: sha512-bHZSfqDHGNlPpgH2yxXgPHlQSPpEbo+qg7li0M78J9vNAi2yjwLeA4x79BEQhX44lEWpCLSFCeRZwpw0niiXPA==}
 
@@ -8930,6 +9078,10 @@ packages:
     resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
     engines: {node: '>= 0.6.0'}
 
+  progress@2.0.3:
+    resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
+    engines: {node: '>=0.4.0'}
+
   promise-breaker@6.0.0:
     resolution: {integrity: sha512-BthzO9yTPswGf7etOBiHCVuugs2N01/Q/94dIPls48z2zCmrnDptUUZzfIb+41xq0MnYZ/BzmOd6ikDR4ibNZA==}
 
@@ -8980,9 +9132,16 @@ packages:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
 
+  proxy-agent@6.5.0:
+    resolution: {integrity: sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A==}
+    engines: {node: '>= 14'}
+
   proxy-compare@3.0.1:
     resolution: {integrity: sha512-V9plBAt3qjMlS1+nC8771KNf6oJ12gExvaxnNzN/9yVRLdTv/lc+oJlnSzrdYDAvBfTStPCoiaCOTmTs0adv7Q==}
 
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
   proxy-from-env@2.1.0:
     resolution: {integrity: sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==}
     engines: {node: '>=10'}
@@ -8990,6 +9149,9 @@ packages:
   proxy-memoize@3.0.1:
     resolution: {integrity: sha512-VDdG/VYtOgdGkWJx7y0o7p+zArSf2383Isci8C+BP3YXgMYDoPd3cCBjw0JdWb6YBb9sFiOPbAADDVTPJnh+9g==}
 
+  pump@3.0.4:
+    resolution: {integrity: sha512-VS7sjc6KR7e1ukRFhQSY5LM2uBWAUPiOPa/A3mkKmiMwSmRFUITt0xuj+/lesgnCv+dPIEYlkzrcyXgquIHMcA==}
+
   punycode@1.4.1:
     resolution: {integrity: sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==}
 
@@ -8997,6 +9159,15 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
+  puppeteer-core@24.43.1:
+    resolution: {integrity: sha512-T5ScUMAsmhdNbgDR41AGESYeS6V9MSgetkSnVhhW+gXvzC42VesKCn5ld87gAZDJ6vLHL9GkRvY9WtQWSnwFbw==}
+    engines: {node: '>=18'}
+
+  puppeteer@24.43.1:
+    resolution: {integrity: sha512-/FSOViCrqRdb1HDocpsM9Z1giA71gTQPUt3SpHGVRALKAy/rJr1fLFYZW9F23qPxqVxTHQnbh/5B5opJST3kAw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   pure-rand@6.1.0:
     resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==}
 
@@ -9650,6 +9821,10 @@ packages:
     resolution: {integrity: sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==}
     engines: {node: '>=18'}
 
+  smart-buffer@4.2.0:
+    resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
+    engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
+
   smob@1.6.2:
     resolution: {integrity: sha512-RQsvleCbF8cVHEv+xuDGaA4pOizFqJ0GgjtMSRo6oP8pnN7WsigHgVGey6aILRBKv4W2YOMHLqbKdnB6hpB9fw==}
     engines: {node: '>=20.0.0'}
@@ -9674,6 +9849,14 @@ packages:
     resolution: {integrity: sha512-asJqbVBDsBCJx0pTqw3WfesSY0iRX+2xzWEWzrpcH7L6fLzrhyF8WPI8UaeM4YCuDfpwA/cgsdugMsmtz8EJeg==}
     engines: {node: '>=10.0.0'}
 
+  socks-proxy-agent@8.0.5:
+    resolution: {integrity: sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==}
+    engines: {node: '>= 14'}
+
+  socks@2.8.9:
+    resolution: {integrity: sha512-LJhUYUvItdQ0LkJTmPeaEObWXAqFyfmP85x0tch/ez9cahmhlBBLbIqDFnvBnUJGagb0JbIQrkBs1wJ+yRYpEw==}
+    engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
+
   sonner@2.0.7:
     resolution: {integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==}
     peerDependencies:
@@ -9771,6 +9954,9 @@ packages:
     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
     engines: {node: '>=10.0.0'}
 
+  streamx@2.26.0:
+    resolution: {integrity: sha512-VvNG1K72Po/xwJzxZFnZ++Tbrv4lwSptsbkFuzXCJAYZvCK5nnxsvXU6ajqkv7chyiI1Y0YXq2Jh8Iy8Y7NF/A==}
+
   strict-event-emitter@0.5.1:
     resolution: {integrity: sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==}
 
@@ -9961,15 +10147,24 @@ packages:
     resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
     engines: {node: '>=6'}
 
+  tar-fs@3.1.2:
+    resolution: {integrity: sha512-QGxxTxxyleAdyM3kpFs14ymbYmNFrfY+pHj7Z8FgtbZ7w2//VAgLMac7sT6nRpIHjppXO2AwwEOg0bPFVRcmXw==}
+
   tar-stream@2.2.0:
     resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
     engines: {node: '>=6'}
 
+  tar-stream@3.2.0:
+    resolution: {integrity: sha512-ojzvCvVaNp6aOTFmG7jaRD0meowIAuPc3cMMhSgKiVWws1GyHbGd/xvnyuRKcKlMpt3qvxx6r0hreCNITP9hIg==}
+
   tar@6.2.1:
     resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
     engines: {node: '>=10'}
     deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
+  teex@1.0.1:
+    resolution: {integrity: sha512-eYE6iEI62Ni1H8oIa7KlDU6uQBtqr4Eajni3wX7rpfXD8ysFx8z0+dri+KWEPWpBsxXfxu58x/0jvTVT1ekOSg==}
+
   terser-webpack-plugin@5.6.0:
     resolution: {integrity: sha512-Eum+5ajkaOhf5KbM26osvv21kLD7BaGqQ1UA4Ami4arYwylmGUQTgHFpHDdmJod1q4QXa66p0to/FBKID+J1vA==}
     engines: {node: '>= 10.13.0'}
@@ -10028,6 +10223,9 @@ packages:
     resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
     engines: {node: '>=8'}
 
+  text-decoder@1.2.7:
+    resolution: {integrity: sha512-vlLytXkeP4xvEq2otHeJfSQIRyWxo/oZGEbXrtEEF9Hnmrdly59sUbzZ/QgyWuLYHctCHxFF4tRQZNQ9k60ExQ==}
+
   text-extensions@2.4.0:
     resolution: {integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==}
     engines: {node: '>=8'}
@@ -10306,6 +10504,9 @@ packages:
     resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
     engines: {node: '>= 0.4'}
 
+  typed-query-selector@2.12.2:
+    resolution: {integrity: sha512-EOPFbyIub4ngnEdqi2yOcNeDLaX/0jcE1JoAXQDDMIthap7FoN795lc/SHfIq2d416VufXpM8z/lD+WRm2gfOQ==}
+
   typedarray@0.0.6:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
 
@@ -10319,7 +10520,7 @@ packages:
     hasBin: true
     peerDependencies:
       '@faker-js/faker': '>=8.4.1'
-      typeorm: ~0.3.0
+      typeorm: 0.3.30
 
   typeorm@0.3.30:
     resolution: {integrity: sha512-8T35PzjefOdqc2ZR9mwLQj0pUGp6lQhMbK2EvVMwJVJWlaoHm0v/Q6dThNOZkFchD+0yMg8gwjKM28ePiLSXSQ==}
@@ -10678,6 +10879,9 @@ packages:
     resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
     engines: {node: '>= 8'}
 
+  webdriver-bidi-protocol@0.4.1:
+    resolution: {integrity: sha512-ARrjNjtWRRs2w4Tk7nqrf2gBI0QXWuOmMCx2hU+1jUt6d00MjMxURrhxhGbrsoiZKJrhTSTzbIrc554iKI10qw==}
+
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
@@ -10891,6 +11095,9 @@ packages:
     resolution: {integrity: sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=23}
 
+  yauzl@2.10.0:
+    resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
+
   year@0.2.1:
     resolution: {integrity: sha512-9GnJUZ0QM4OgXuOzsKNzTJ5EOkums1Xc+3YQXp+Q+UxFjf7zLucp9dQ8QMIft0Szs1E1hUiXFim1OYfEKFq97w==}
     engines: {node: '>=0.8'}
@@ -13110,6 +13317,21 @@ snapshots:
 
   '@popperjs/core@2.11.8': {}
 
+  '@puppeteer/browsers@2.13.2':
+    dependencies:
+      debug: 4.4.3
+      extract-zip: 2.0.1
+      progress: 2.0.3
+      proxy-agent: 6.5.0
+      semver: 7.8.1
+      tar-fs: 3.1.2
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - bare-buffer
+      - react-native-b4a
+      - supports-color
+
   '@radix-ui/number@1.1.1': {}
 
   '@radix-ui/primitive@1.1.3': {}
@@ -14627,6 +14849,8 @@ snapshots:
 
   '@tokenizer/token@0.3.0': {}
 
+  '@tootallnate/quickjs-emscripten@0.23.0': {}
+
   '@tria-plc/api-common@0.1.4(kw56ayyn7pbkaoqn2kt3fjycd4)':
     dependencies:
       '@nestjs/axios': 4.0.1(@nestjs/common@11.1.23(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(axios@1.16.1)(rxjs@7.8.2)
@@ -15095,6 +15319,11 @@ snapshots:
     dependencies:
       '@types/yargs-parser': 21.0.3
 
+  '@types/yauzl@2.10.3':
+    dependencies:
+      '@types/node': 20.19.41
+    optional: true
+
   '@typescript-eslint/eslint-plugin@8.59.4(@typescript-eslint/parser@8.59.4(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -16473,6 +16702,10 @@ snapshots:
 
   assign-symbols@1.0.0: {}
 
+  ast-types@0.13.4:
+    dependencies:
+      tslib: 2.8.1
+
   ast-types@0.16.1:
     dependencies:
       tslib: 2.8.1
@@ -16523,6 +16756,7 @@ snapshots:
     transitivePeerDependencies:
       - debug
       - supports-color
+  b4a@1.8.1: {}
 
   babel-jest@29.7.0(@babel/core@7.29.0):
     dependencies:
@@ -16622,6 +16856,38 @@ snapshots:
 
   balanced-match@4.0.4: {}
 
+  bare-events@2.9.1: {}
+
+  bare-fs@4.7.2:
+    dependencies:
+      bare-events: 2.9.1
+      bare-path: 3.0.1
+      bare-stream: 2.13.1(bare-events@2.9.1)
+      bare-url: 2.4.4
+      fast-fifo: 1.3.2
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
+
+  bare-os@3.9.1: {}
+
+  bare-path@3.0.1:
+    dependencies:
+      bare-os: 3.9.1
+
+  bare-stream@2.13.1(bare-events@2.9.1):
+    dependencies:
+      streamx: 2.26.0
+      teex: 1.0.1
+    optionalDependencies:
+      bare-events: 2.9.1
+    transitivePeerDependencies:
+      - react-native-b4a
+
+  bare-url@2.4.4:
+    dependencies:
+      bare-path: 3.0.1
+
   base64-arraybuffer@1.0.2: {}
 
   base64-js@0.0.8: {}
@@ -16640,6 +16906,8 @@ snapshots:
 
   baseline-browser-mapping@2.10.32: {}
 
+  basic-ftp@5.3.1: {}
+
   bidi-js@1.0.3:
     dependencies:
       require-from-string: 2.0.2
@@ -16887,6 +17155,12 @@ snapshots:
 
   chrome-trace-event@1.0.4: {}
 
+  chromium-bidi@14.0.0(devtools-protocol@0.0.1608973):
+    dependencies:
+      devtools-protocol: 0.0.1608973
+      mitt: 3.0.1
+      zod: 3.25.76
+
   ci-info@3.9.0: {}
 
   ci-info@4.4.0: {}
@@ -17239,6 +17513,8 @@ snapshots:
 
   data-uri-to-buffer@4.0.1: {}
 
+  data-uri-to-buffer@6.0.2: {}
+
   data-urls@5.0.0:
     dependencies:
       whatwg-mimetype: 4.0.0
@@ -17357,6 +17633,12 @@ snapshots:
       is-descriptor: 1.0.4
       isobject: 3.0.1
 
+  degenerator@5.0.1:
+    dependencies:
+      ast-types: 0.13.4
+      escodegen: 2.1.0
+      esprima: 4.0.1
+
   delayed-stream@1.0.0: {}
 
   delegates@1.0.0:
@@ -17374,6 +17656,8 @@ snapshots:
 
   detect-node-es@1.1.0: {}
 
+  devtools-protocol@0.0.1608973: {}
+
   dezalgo@1.0.4:
     dependencies:
       asap: 2.0.6
@@ -17685,6 +17969,13 @@ snapshots:
   eslint-config-prettier@10.1.8(eslint@9.39.4(jiti@2.7.0)):
     dependencies:
       eslint: 9.39.4(jiti@2.7.0)
+  escodegen@2.1.0:
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+    optionalDependencies:
+      source-map: 0.6.1
 
   eslint-config-prettier@9.1.2(eslint@8.57.1):
     dependencies:
@@ -17926,6 +18217,12 @@ snapshots:
 
   eventemitter3@5.0.4: {}
 
+  events-universal@1.0.1:
+    dependencies:
+      bare-events: 2.9.1
+    transitivePeerDependencies:
+      - bare-abort-controller
+
   events@3.3.0: {}
 
   eventsource-parser@3.0.8: {}
@@ -18080,6 +18377,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  extract-zip@2.0.1:
+    dependencies:
+      debug: 4.4.3
+      get-stream: 5.2.0
+      yauzl: 2.10.0
+    optionalDependencies:
+      '@types/yauzl': 2.10.3
+    transitivePeerDependencies:
+      - supports-color
+
   falsey@0.3.2:
     dependencies:
       kind-of: 5.1.0
@@ -18095,6 +18402,8 @@ snapshots:
 
   fast-equals@5.4.0: {}
 
+  fast-fifo@1.3.2: {}
+
   fast-glob@3.3.3:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -18139,6 +18448,10 @@ snapshots:
     dependencies:
       bser: 2.1.1
 
+  fd-slicer@1.1.0:
+    dependencies:
+      pend: 1.2.0
+
   fdir@6.5.0(picomatch@4.0.4):
     optionalDependencies:
       picomatch: 4.0.4
@@ -18424,6 +18737,10 @@ snapshots:
       dunder-proto: 1.0.1
       es-object-atoms: 1.1.2
 
+  get-stream@5.2.0:
+    dependencies:
+      pump: 3.0.4
+
   get-stream@6.0.1: {}
 
   get-stream@8.0.1: {}
@@ -18439,6 +18756,14 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
 
+  get-uri@6.0.5:
+    dependencies:
+      basic-ftp: 5.3.1
+      data-uri-to-buffer: 6.0.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   get-value@2.0.6: {}
 
   git-raw-commits@4.0.0:
@@ -20187,6 +20512,8 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lru-cache@7.18.3: {}
+
   lucide-react@0.513.0(react@19.2.6):
     dependencies:
       react: 19.2.6
@@ -20353,6 +20680,8 @@ snapshots:
       yallist: 4.0.0
     optional: true
 
+  mitt@3.0.1: {}
+
   mixin-deep@1.3.2:
     dependencies:
       for-in: 1.0.2
@@ -20469,6 +20798,8 @@ snapshots:
       reflect-metadata: 0.1.14
       rxjs: 7.8.2
 
+  netmask@2.1.1: {}
+
   next-themes@0.4.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
       react: 19.2.6
@@ -20717,6 +21048,24 @@ snapshots:
 
   p-try@2.2.0: {}
 
+  pac-proxy-agent@7.2.0:
+    dependencies:
+      '@tootallnate/quickjs-emscripten': 0.23.0
+      agent-base: 7.1.4
+      debug: 4.4.3
+      get-uri: 6.0.5
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      pac-resolver: 7.0.1
+      socks-proxy-agent: 8.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  pac-resolver@7.0.1:
+    dependencies:
+      degenerator: 5.0.1
+      netmask: 2.1.1
+
   package-json-from-dist@1.0.1: {}
 
   pako@0.2.9: {}
@@ -20815,6 +21164,8 @@ snapshots:
 
   peek-readable@5.4.2: {}
 
+  pend@1.2.0: {}
+
   perfect-freehand@1.2.3: {}
 
   performance-now@2.1.0:
@@ -20971,6 +21322,8 @@ snapshots:
 
   process@0.11.10: {}
 
+  progress@2.0.3: {}
+
   promise-breaker@6.0.0: {}
 
   prompts@2.4.2:
@@ -21058,18 +21411,72 @@ snapshots:
       forwarded: 0.2.0
       ipaddr.js: 1.9.1
 
+  proxy-agent@6.5.0:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      lru-cache: 7.18.3
+      pac-proxy-agent: 7.2.0
+      proxy-from-env: 1.1.0
+      socks-proxy-agent: 8.0.5
+    transitivePeerDependencies:
+      - supports-color
+
   proxy-compare@3.0.1: {}
 
+  proxy-from-env@1.1.0: {}
+
   proxy-from-env@2.1.0: {}
 
   proxy-memoize@3.0.1:
     dependencies:
       proxy-compare: 3.0.1
 
+  pump@3.0.4:
+    dependencies:
+      end-of-stream: 1.4.5
+      once: 1.4.0
+
   punycode@1.4.1: {}
 
   punycode@2.3.1: {}
 
+  puppeteer-core@24.43.1:
+    dependencies:
+      '@puppeteer/browsers': 2.13.2
+      chromium-bidi: 14.0.0(devtools-protocol@0.0.1608973)
+      debug: 4.4.3
+      devtools-protocol: 0.0.1608973
+      typed-query-selector: 2.12.2
+      webdriver-bidi-protocol: 0.4.1
+      ws: 8.20.1
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - bare-buffer
+      - bufferutil
+      - react-native-b4a
+      - supports-color
+      - utf-8-validate
+
+  puppeteer@24.43.1(typescript@5.9.3):
+    dependencies:
+      '@puppeteer/browsers': 2.13.2
+      chromium-bidi: 14.0.0(devtools-protocol@0.0.1608973)
+      cosmiconfig: 9.0.1(typescript@5.9.3)
+      devtools-protocol: 0.0.1608973
+      puppeteer-core: 24.43.1
+      typed-query-selector: 2.12.2
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - bare-buffer
+      - bufferutil
+      - react-native-b4a
+      - supports-color
+      - typescript
+      - utf-8-validate
+
   pure-rand@6.1.0: {}
 
   pure-rand@7.0.1: {}
@@ -21905,6 +22312,8 @@ snapshots:
       ansi-styles: 6.2.3
       is-fullwidth-code-point: 5.1.0
 
+  smart-buffer@4.2.0: {}
+
   smob@1.6.2: {}
 
   snapdragon-node@2.1.1:
@@ -21948,6 +22357,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  socks-proxy-agent@8.0.5:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+      socks: 2.8.9
+    transitivePeerDependencies:
+      - supports-color
+
+  socks@2.8.9:
+    dependencies:
+      ip-address: 10.2.0
+      smart-buffer: 4.2.0
+
   sonner@2.0.7(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
       react: 19.2.6
@@ -22026,6 +22448,15 @@ snapshots:
 
   streamsearch@1.1.0: {}
 
+  streamx@2.26.0:
+    dependencies:
+      events-universal: 1.0.1
+      fast-fifo: 1.3.2
+      text-decoder: 1.2.7
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
+
   strict-event-emitter@0.5.1: {}
 
   strict-uri-encode@2.0.0: {}
@@ -22257,6 +22688,18 @@ snapshots:
 
   tapable@2.3.3: {}
 
+  tar-fs@3.1.2:
+    dependencies:
+      pump: 3.0.4
+      tar-stream: 3.2.0
+    optionalDependencies:
+      bare-fs: 4.7.2
+      bare-path: 3.0.1
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - bare-buffer
+      - react-native-b4a
+
   tar-stream@2.2.0:
     dependencies:
       bl: 4.1.0
@@ -22265,6 +22708,17 @@ snapshots:
       inherits: 2.0.4
       readable-stream: 3.6.2
 
+  tar-stream@3.2.0:
+    dependencies:
+      b4a: 1.8.1
+      bare-fs: 4.7.2
+      fast-fifo: 1.3.2
+      streamx: 2.26.0
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - bare-buffer
+      - react-native-b4a
+
   tar@6.2.1:
     dependencies:
       chownr: 2.0.0
@@ -22275,6 +22729,13 @@ snapshots:
       yallist: 4.0.0
     optional: true
 
+  teex@1.0.1:
+    dependencies:
+      streamx: 2.26.0
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
+
   terser-webpack-plugin@5.6.0(webpack@5.106.0):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
@@ -22312,6 +22773,12 @@ snapshots:
       glob: 7.2.3
       minimatch: 3.1.5
 
+  text-decoder@1.2.7:
+    dependencies:
+      b4a: 1.8.1
+    transitivePeerDependencies:
+      - react-native-b4a
+
   text-extensions@2.4.0: {}
 
   text-segmentation@1.0.3:
@@ -22639,6 +23106,8 @@ snapshots:
       possible-typed-array-names: 1.1.0
       reflect.getprototypeof: 1.0.10
 
+  typed-query-selector@2.12.2: {}
+
   typedarray@0.0.6: {}
 
   typeof-article@0.1.1:
@@ -23013,6 +23482,8 @@ snapshots:
 
   web-streams-polyfill@3.3.3: {}
 
+  webdriver-bidi-protocol@0.4.1: {}
+
   webidl-conversions@3.0.1: {}
 
   webidl-conversions@7.0.0: {}
@@ -23272,6 +23743,11 @@ snapshots:
       y18n: 5.0.8
       yargs-parser: 22.0.0
 
+  yauzl@2.10.0:
+    dependencies:
+      buffer-crc32: 0.2.13
+      fd-slicer: 1.1.0
+
   year@0.2.1: {}
 
   yn@3.1.1: {}
diff --git a/tasks.md b/tasks.md
deleted file mode 100644
index b829182c4..000000000
--- a/tasks.md
+++ /dev/null
@@ -1,5 +0,0 @@
-- In ./apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step1-contract-type.tsx the input field for the previous contract ref should be a select field with the list of contracts from the API
-- the "Equipment Return" field in ./apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step3-first-last-mile.tsx should be a toggle like Last Mile - Delivery and should appear only if the last mile is toggled. and also add "( Door to Port)" to first mile description and vice versa to the last mile
-- add Type of container- Dry container, high cubic containers , reefer containers, open top containers, flat rack, tank container, open side containers to ./apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step4-route.tsx
-- merge the "Unpaired 20ft Container" from ./apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step6-wagon-allocation.tsx to step 4 and fully remove the step 5
-- add Type of Shipping lines - MSC, CMA CGM, Evergreen, COSCO, Hapag-Lloyd, ONE, Yang Ming, ZIM, Messina Line, Safmarine, Wan Hai, Ethiopian Shipping Lines (ESLSE) to ./apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step4-route.tsx