diff --git a/apps/edr-freight-web/portal/src/pages/bookings/EditBookingPage.tsx b/apps/edr-freight-web/portal/src/pages/bookings/EditBookingPage.tsx
index 543817f92..fa1900734 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/EditBookingPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/EditBookingPage.tsx
@@ -1,59 +1,99 @@
-import { useMemo } from "react";
-import { useFieldArray, Controller, useForm } from "react-hook-form";
+import { useMemo, useRef, type ReactNode } from "react";
+import { Controller, useForm } from "react-hook-form";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useNavigate, useParams } from "react-router-dom";
+import {
+  ActionIcon,
+  Alert,
+  Box,
+  Button,
+  Center,
+  Divider,
+  Group,
+  Loader,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Switch,
+  Text,
+  Textarea,
+  TextInput,
+  Title,
+} from "@mantine/core";
 import {
   AlertCircle,
+  AlertTriangle,
   Check,
-  LoaderCircle,
-  Loader2,
-  Package,
-  Weight,
-  Plus,
-  Trash2,
-  MapPin,
+  Download,
+  FileText,
   Flame,
+  MapPin,
   Snowflake,
   Truck,
-  FileText,
+  Upload,
+  X,
 } from "lucide-react";
-import {
-  Button,
-  Field,
-  FieldLabel,
-  FieldError,
-  Input,
-  Badge,
-  Switch,
-  Textarea,
-  Separator,
-  Skeleton,
-} from "@edr/ui-common";
 import type { Freight } from "@edr/types";
 import { api } from "@/services/api";
 import type { CreateBookingPayload } from "@/services/bookings.service";
 import {
   BookingFormInputValues,
+  BOOKING_DOCS_SETTING,
   bookingFormSchema,
   getRouteDirection,
   initialBookingFormValues,
+  type BookingDocuments,
   type BookingFormValues,
   type RouteDirection,
 } from "./new-booking-form/schema";
-import { SelectField, AlertBox } from "./new-booking-form/shared";
+import { SelectField } from "./new-booking-form/shared";
+import { Step5CargoDetails } from "./new-booking-form/steps";
+import {
+  CountChip,
+  DocRow,
+  IconSquare,
+} from "./BookingDetailPage/components/Documents";
 
-function yardNameFromBooking(yard: { label?: string; code?: string; name?: string } | undefined | null): string {
+function yardNameFromBooking(
+  yard: { label?: string; code?: string; name?: string } | undefined | null,
+): string {
   return yard?.label ?? yard?.name ?? yard?.code ?? "";
 }
 
+/** Fallback container type for a size, used only when a booking row has no
+ *  loaded containerType relation. */
+function defaultContainerTypeForSize(
+  referenceData: Freight.BookingReferenceData,
+  size: string,
+): string {
+  const norm = (s: string) => s.toLowerCase().replace(/\s|ft/g, "");
+  const group =
+    referenceData.containers.find((g) => norm(g.size) === norm(size)) ??
+    referenceData.containers[0];
+  return group?.types[0]?.name ?? "";
+}
+
+/** The API returns the `bookingContainers` relation (with `containerType`
+ *  loaded), not the `{ type, qty, vgm }` shape the frontend type advertises. */
+interface BookingContainerRow {
+  quantity: number;
+  vgmPerUnitTons: number | string;
+  containerType?: {
+    sizeFt?: number | null;
+    label?: string | null;
+    code?: string | null;
+  } | null;
+}
+
 function mapBookingToFormValues(
   booking: Freight.IBooking,
   referenceData: Freight.BookingReferenceData,
 ): BookingFormInputValues {
   const vals: BookingFormInputValues = {
     ...initialBookingFormValues,
-    contractType: (booking.contractType?.toLowerCase() as "new" | "renewal") ?? "new",
+    contractType:
+      (booking.contractType?.toLowerCase() as "new" | "renewal") ?? "new",
     previousContractRef: booking.previousContractId ?? "",
     serviceType:
       booking.serviceType === "RAIL_AND_FORWARDING" ? "rail_forwarding" : "rail",
@@ -66,7 +106,9 @@ function mapBookingToFormValues(
       deliveryAddress: booking.lastMileDeliveryAddress ?? "",
     },
     equipmentReturn:
-      booking.equipmentReturn === "WITH_RETURN" ? "with_return" : "without_return",
+      booking.equipmentReturn === "WITH_RETURN"
+        ? "with_return"
+        : "without_return",
     originYard: yardNameFromBooking(booking.originYard),
     destinationYard: yardNameFromBooking(booking.destinationYard),
     cargoType: booking.freightType === "BULK" ? "bulk" : "container",
@@ -76,7 +118,8 @@ function mapBookingToFormValues(
     shippingLine: (booking as any).shippingLine?.name ?? "",
     consolidationEnabled: booking.allowConsolidation ?? false,
     notes: "",
-    termsAccepted: false,
+    // Terms were accepted at creation; editing shouldn't re-gate on them.
+    termsAccepted: true,
     freightType: "",
     bulkCommoditytype: "",
     containers: [],
@@ -94,22 +137,114 @@ function mapBookingToFormValues(
     }
   }
 
-  if (booking.freightType === "CONTAINER" && booking.containers && booking.containers.length > 0) {
-    vals.containers = booking.containers.map((c) => ({
-      type: c.type === "40ft" ? "40ft" : "20ft" as const,
-      containerType: "",
-      qty: String(c.qty),
-      vgm: String(c.vgm),
-    }));
+  if (booking.freightType === "CONTAINER") {
+    const rows = ((booking as any).bookingContainers ?? []) as BookingContainerRow[];
+    vals.containers =
+      rows.length > 0
+        ? rows.map((bc) => {
+            const size =
+              bc.containerType?.sizeFt === 40
+                ? ("40ft" as const)
+                : ("20ft" as const);
+            const typeName = bc.containerType?.label?.trim()
+              ? bc.containerType.label
+              : (bc.containerType?.code ??
+                defaultContainerTypeForSize(referenceData, size));
+            return {
+              type: size,
+              containerType: typeName,
+              qty: String(bc.quantity ?? 1),
+              vgm: String(Number(bc.vgmPerUnitTons ?? 0)),
+            };
+          })
+        : [
+            {
+              type: "20ft" as const,
+              containerType: defaultContainerTypeForSize(referenceData, "20ft"),
+              qty: "1",
+              vgm: "",
+            },
+          ];
   }
 
   return vals;
 }
 
+function SectionHeading({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <Box>
+      <Title order={2} fz="lg" fw={700}>
+        {title}
+      </Title>
+      <Text size="sm" c="dimmed" mt={2}>
+        {description}
+      </Text>
+    </Box>
+  );
+}
+
+function ToggleRow({
+  icon,
+  title,
+  description,
+  checked,
+  onChange,
+  children,
+}: {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  checked: boolean;
+  onChange: (value: boolean) => void;
+  children?: ReactNode;
+}) {
+  return (
+    <Box p="md">
+      <Group justify="space-between" align="flex-start" wrap="nowrap" gap="md">
+        <Group align="flex-start" gap="sm" wrap="nowrap">
+          <Box mt={2}>{icon}</Box>
+          <Box>
+            <Text size="sm" fw={500}>
+              {title}
+            </Text>
+            <Text size="xs" c="dimmed" mt={2}>
+              {description}
+            </Text>
+          </Box>
+        </Group>
+        <Switch
+          checked={checked}
+          onChange={(e) => onChange(e.currentTarget.checked)}
+          color="edr-green"
+        />
+      </Group>
+      {children}
+    </Box>
+  );
+}
+
+const DIRECTION_COLOR: Record<string, string> = {
+  export: "blue",
+  import: "yellow",
+  domestic: "gray",
+};
+const DIRECTION_LABEL: Record<string, string> = {
+  export: "Export workflow (inside country to outside country)",
+  import: "Import workflow (outside country to inside country)",
+  domestic: "Domestic corridor",
+};
+
 export default function EditBookingPage() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
+  const docInputRefs = useRef<Record<string, HTMLInputElement | null>>({});
 
   const bookingQuery = useQuery(
     api.bookings.get.queryOptions({
@@ -124,16 +259,6 @@ export default function EditBookingPage() {
     }),
   );
 
-  const updateMutation = useMutation({
-    mutationFn: (payload: Partial<CreateBookingPayload>) =>
-      api.bookings.update.call({ id: id!, dto: payload }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: api.bookings.list.queryKey() });
-      queryClient.invalidateQueries({ queryKey: api.bookings.get.queryKey({ id: id! }) });
-      navigate(`/bookings/${id}`);
-    },
-  });
-
   const booking = bookingQuery.data;
 
   const formValues = useMemo((): BookingFormInputValues | undefined => {
@@ -148,25 +273,42 @@ export default function EditBookingPage() {
     mode: "onChange",
   });
 
+  const updateMutation = useMutation({
+    mutationFn: async (payload: Partial<CreateBookingPayload>) => {
+      const result = await api.bookings.update.call({ id: id!, dto: payload });
+
+      // Upload any newly attached documents against the existing booking.
+      const documents = (form.getValues("documents") ?? {}) as BookingDocuments;
+      const hasDocuments = Object.values(documents).some((value) =>
+        Array.isArray(value) ? value.length > 0 : Boolean(value),
+      );
+      if (hasDocuments) {
+        await api.bookings.uploadDocuments.call({ id: id!, files: documents });
+      }
+
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: api.bookings.list.queryKey() });
+      queryClient.invalidateQueries({
+        queryKey: api.bookings.get.queryKey({ id: id! }),
+      });
+      navigate(`/bookings/${id}`);
+    },
+  });
+
   const originYard = form.watch("originYard");
   const destinationYard = form.watch("destinationYard");
   const serviceType = form.watch("serviceType");
   const firstMileEnabled = form.watch("firstMile.enabled");
   const lastMileEnabled = form.watch("lastMile.enabled");
-  const cargoType = form.watch("cargoType");
-  const freightType = form.watch("freightType");
-  const containers = form.watch("containers");
+  const documents = (form.watch("documents") ?? {}) as BookingDocuments;
 
   const direction: RouteDirection = useMemo(
     () => getRouteDirection(originYard, destinationYard),
     [originYard, destinationYard],
   );
 
-  const { fields, append, remove } = useFieldArray({
-    control: form.control,
-    name: "containers",
-  });
-
   const yardOptions = useMemo(() => {
     if (!referenceData?.yard) return [];
     return referenceData.yard.map((y) => ({
@@ -184,37 +326,13 @@ export default function EditBookingPage() {
     }));
   }, [referenceData]);
 
-  const freightTypeGroups = useMemo(() => {
-    if (!referenceData?.cargo_type) return [];
-    return referenceData.cargo_type.filter(
-      (g) => g.code !== "CONTAINER",
+  const setDocument = (key: string, file: File | null) => {
+    const current = (form.getValues("documents") ?? {}) as BookingDocuments;
+    form.setValue(
+      "documents",
+      { ...current, [key]: file },
+      { shouldDirty: true },
     );
-  }, [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]);
-
-  const containerTypeOptions = useMemo(() => {
-    if (!referenceData?.containers) return [];
-    return referenceData.containers.flatMap((group) =>
-      group.types.map((t) => t.name),
-    );
-  }, [referenceData]);
-
-  const directionStyle: Record<string, string> = {
-    export: "bg-sky-50 text-sky-800 border-sky-200",
-    import: "bg-amber-50 text-amber-800 border-amber-200",
-    domestic: "bg-muted text-muted-foreground border-border",
-  };
-  const directionLabel: Record<string, string> = {
-    export: "Export workflow (inside country to outside country)",
-    import: "Import workflow (outside country to inside country)",
-    domestic: "Domestic corridor",
   };
 
   const handleSubmit = form.handleSubmit((data) => {
@@ -238,14 +356,12 @@ export default function EditBookingPage() {
     const selectedChild =
       data.cargoType !== "container" && data.bulkCommoditytype
         ? cargoTree
-          .find((g) => g.code.toLowerCase() === data.freightType)
-          ?.children?.find((c) => c.name === data.bulkCommoditytype)
+            .find((g) => g.code.toLowerCase() === data.freightType)
+            ?.children?.find((c) => c.name === data.bulkCommoditytype)
         : undefined;
 
     const cargoTypeId =
-      data.cargoType === "container"
-        ? undefined
-        : selectedChild?.id ?? "";
+      data.cargoType === "container" ? undefined : (selectedChild?.id ?? "");
 
     const findContainerTypeId = (name: string): string => {
       for (const group of containerGroups) {
@@ -258,9 +374,9 @@ export default function EditBookingPage() {
     const totalWeight =
       data.cargoType === "container"
         ? data.containers.reduce(
-          (acc, c) => acc + Number(c.vgm || 0) * Number(c.qty || 0),
-          0,
-        )
+            (acc, c) => acc + Number(c.vgm || 0) * Number(c.qty || 0),
+            0,
+          )
         : Number(data.cargoWeight || 0);
 
     const apiPayload: Partial<CreateBookingPayload> = {
@@ -293,10 +409,10 @@ export default function EditBookingPage() {
       containers:
         data.cargoType === "container"
           ? data.containers.map((c) => ({
-            containerTypeId: findContainerTypeId(c.containerType),
-            quantity: Number(c.qty || 1),
-            vgmPerUnitTons: Number(c.vgm || 0),
-          }))
+              containerTypeId: findContainerTypeId(c.containerType),
+              quantity: Number(c.qty || 1),
+              vgmPerUnitTons: Number(c.vgm || 0),
+            }))
           : [],
       ...(data.previousContractRef
         ? { previousContractId: data.previousContractRef }
@@ -320,743 +436,488 @@ export default function EditBookingPage() {
 
   if (bookingQuery.isLoading) {
     return (
-      <div className="flex h-full items-center justify-center">
-        <Loader2 className="size-8 animate-spin text-primary" />
-      </div>
+      <Center mih={400} p="xl">
+        <Stack align="center" gap="md">
+          <Loader color="edr-green" />
+          <Text size="sm" c="dimmed">
+            Loading booking…
+          </Text>
+        </Stack>
+      </Center>
     );
   }
 
   if (bookingQuery.isError || !booking) {
     return (
-      <div className="container mx-auto p-6">
-        <div className="flex flex-col items-center gap-4 rounded-xl border border-destructive/20 bg-destructive/10 p-12 text-center">
-          <AlertCircle className="size-8 text-destructive" />
-          <h2 className="text-lg font-bold text-foreground">Failed to load booking</h2>
-          <Button variant="outline" onClick={() => navigate("/bookings")}>
+      <Center mih={400} p="xl">
+        <Stack align="center" gap="md" ta="center">
+          <Box c="red">
+            <AlertTriangle size={30} />
+          </Box>
+          <Text fw={700} fz="lg">
+            Failed to load booking
+          </Text>
+          <Button variant="default" onClick={() => navigate("/bookings")}>
             Back to Bookings
           </Button>
-        </div>
-      </div>
+        </Stack>
+      </Center>
     );
   }
 
   if (!formValues) {
     return (
-      <div className="flex h-full items-center justify-center">
-        <Loader2 className="size-8 animate-spin text-primary" />
-      </div>
+      <Center mih={400} p="xl">
+        <Loader color="edr-green" />
+      </Center>
     );
   }
 
+  const uploadedCodes = new Set(
+    booking.files?.map((f) => f.code).filter(Boolean) ?? [],
+  );
+  const uploadedCount = BOOKING_DOCS_SETTING.fields.filter((f) =>
+    uploadedCodes.has(f.fileKey),
+  ).length;
+
   return (
-    <form
+    <Box
+      component="form"
       id="edit-booking-form"
-      className="mx-auto max-w-4xl"
       onSubmit={handleSubmit}
+      maw={900}
+      mx="auto"
+      px="md"
+      py="xl"
     >
-      <div className="px-6 py-8">
-        <h1 className="text-2xl font-bold tracking-tight">
-          Edit Booking {booking.reference ?? ""}
-        </h1>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Update the booking details below. All changes are saved together.
-        </p>
+      <Title order={1} fz={26} fw={800} style={{ letterSpacing: "-0.01em" }}>
+        Edit Booking {booking.reference ?? ""}
+      </Title>
+      <Text size="sm" c="dimmed" mt={4}>
+        Update the booking details below. All changes are saved together.
+      </Text>
 
-        {updateMutation.isError && (
-          <div className="mt-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">Failed to save changes</p>
-              <p className="mt-1 text-red-600">
-                {updateMutation.error instanceof Error
-                  ? updateMutation.error.message
-                  : "An unexpected error occurred. Please try again."}
-              </p>
-            </div>
-          </div>
-        )}
+      {updateMutation.isError && (
+        <Alert
+          color="red"
+          icon={<AlertCircle size={16} />}
+          radius="md"
+          mt="lg"
+          title="Failed to save changes"
+        >
+          <Text size="sm">
+            {updateMutation.error instanceof Error
+              ? updateMutation.error.message
+              : "An unexpected error occurred. Please try again."}
+          </Text>
+        </Alert>
+      )}
 
-        <div className="mt-8 space-y-10">
-          {/* ── Section 1: Contract ── */}
-          <section className="space-y-4">
-            <div>
-              <h2 className="text-lg font-bold">Contract</h2>
-              <p className="text-sm text-muted-foreground">
-                New contract or renewal of an existing one.
-              </p>
-            </div>
-            <div className="grid gap-4 sm:grid-cols-2">
-              <Controller
-                name="contractType"
-                control={form.control}
-                render={({ field, fieldState }) => (
-                  <SelectField
-                    field={field}
-                    error={fieldState.error}
-                    label="Contract Type *"
-                    placeholder="Select contract type..."
-                    data={[
-                      { value: "new", label: "New Contract" },
-                      { value: "renewal", label: "Contract Renewal" },
-                    ]}
-                  />
-                )}
-              />
-
-
-            </div>
-          </section>
-
-          <Separator />
-
-          {/* ── Section 2: Service ── */}
-          <section className="space-y-4">
-            <div>
-              <h2 className="text-lg font-bold">Service</h2>
-              <p className="text-sm text-muted-foreground">
-                Select the service combination and configure trucking options.
-              </p>
-            </div>
-
-            <div className="grid gap-4 sm:grid-cols-2">
-              <Controller
-                name="serviceType"
-                control={form.control}
-                render={({ field, fieldState }) => (
-                  <SelectField
-                    field={field}
-                    error={fieldState.error}
-                    label="Service Type *"
-                    placeholder="Select service type..."
-                    data={[
-                      { value: "rail", label: "Rail Transport Only" },
-                      { value: "rail_forwarding", label: "Logistics (Rail + Forwarding)" },
-                    ]}
-                  />
-                )}
-              />
-
-              <Controller
-                name="equipmentReturn"
-                control={form.control}
-                render={({ field, fieldState }) => (
-                  <SelectField
-                    field={field}
-                    error={fieldState.error}
-                    label="Equipment Return"
-                    placeholder="Select..."
-                    data={[
-                      { value: "with_return", label: "With Return" },
-                      { value: "without_return", label: "Without Return" },
-                    ]}
-                  />
-                )}
-              />
-            </div>
-
-            {serviceType === "rail_forwarding" && (
-              <div className="divide-y divide-border rounded-xl border border-border">
-                <div className="p-4">
-                  <Controller
-                    name="firstMile.enabled"
-                    control={form.control}
-                    render={({ field }) => (
-                      <div className="flex items-start justify-between gap-4">
-                        <div className="flex items-start gap-3">
-                          <Truck className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
-                          <div>
-                            <p className="text-sm font-medium">First Mile - Pick-up</p>
-                            <p className="mt-0.5 text-xs text-muted-foreground">
-                              Truck pick-up from your premises to the origin rail yard.
-                            </p>
-                          </div>
-                        </div>
-                        <Switch
-                          checked={field.value}
-                          onCheckedChange={(value) => {
-                            field.onChange(value);
-                            if (!value) {
-                              form.setValue("firstMile.pickUpAddress", "", {
-                                shouldDirty: true,
-                                shouldValidate: true,
-                              });
-                            }
-                          }}
-                        />
-                      </div>
-                    )}
-                  />
-                  {firstMileEnabled && (
-                    <Controller
-                      name="firstMile.pickUpAddress"
-                      control={form.control}
-                      render={({ field, fieldState }) => (
-                        <Field className="mt-3" data-invalid={fieldState.invalid}>
-                          <Input
-                            {...field}
-                            aria-invalid={fieldState.invalid}
-                            placeholder="Pick-up address *"
-                          />
-                          <FieldError errors={[fieldState.error]} />
-                        </Field>
-                      )}
-                    />
-                  )}
-                </div>
-
-                <div className="p-4">
-                  <Controller
-                    name="lastMile.enabled"
-                    control={form.control}
-                    render={({ field }) => (
-                      <div className="flex items-start justify-between gap-4">
-                        <div className="flex items-start gap-3">
-                          <Truck className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
-                          <div>
-                            <p className="text-sm font-medium">Last Mile - Delivery</p>
-                            <p className="mt-0.5 text-xs text-muted-foreground">
-                              Truck delivery from the destination rail yard to the final address.
-                            </p>
-                          </div>
-                        </div>
-                        <Switch
-                          checked={field.value}
-                          onCheckedChange={(value) => {
-                            field.onChange(value);
-                            if (!value) {
-                              form.setValue("lastMile.deliveryAddress", "", {
-                                shouldDirty: true,
-                                shouldValidate: true,
-                              });
-                            }
-                          }}
-                        />
-                      </div>
-                    )}
-                  />
-                  {lastMileEnabled && (
-                    <Controller
-                      name="lastMile.deliveryAddress"
-                      control={form.control}
-                      render={({ field, fieldState }) => (
-                        <Field className="mt-3" data-invalid={fieldState.invalid}>
-                          <Input
-                            {...field}
-                            aria-invalid={fieldState.invalid}
-                            placeholder="Delivery address *"
-                          />
-                          <FieldError errors={[fieldState.error]} />
-                        </Field>
-                      )}
-                    />
-                  )}
-                </div>
-
-                <div className="p-4">
-                  <Controller
-                    name="customsClearingEnabled"
-                    control={form.control}
-                    render={({ field }) => (
-                      <div className="flex items-start justify-between gap-4">
-                        <div className="flex items-start gap-3">
-                          <FileText className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
-                          <div>
-                            <p className="text-sm font-medium">Customs Clearing Service</p>
-                            <p className="mt-0.5 text-xs text-muted-foreground">
-                              EDR handles customs documentation and clearance on your behalf.
-                            </p>
-                          </div>
-                        </div>
-                        <Switch
-                          checked={field.value}
-                          onCheckedChange={field.onChange}
-                        />
-                      </div>
-                    )}
-                  />
-                </div>
-              </div>
-            )}
-          </section>
-
-          <Separator />
-
-          {/* ── Section 3: Route ── */}
-          <section className="space-y-4">
-            <div>
-              <h2 className="text-lg font-bold">Route</h2>
-              <p className="text-sm text-muted-foreground">
-                Select the origin and destination yards.
-              </p>
-            </div>
-
-            <div className="grid gap-4 sm:grid-cols-2">
-              <Controller
-                name="originYard"
-                control={form.control}
-                render={({ field, fieldState }) => (
-                  <SelectField
-                    field={field}
-                    error={fieldState.error}
-                    label="Origin Yard *"
-                    placeholder="Select origin..."
-                    disabled={yardOptions.length === 0}
-                    data={yardOptions.filter((y) => y.value !== destinationYard)}
-                  />
-                )}
-              />
-
-              <Controller
-                name="destinationYard"
-                control={form.control}
-                render={({ field, fieldState }) => (
-                  <SelectField
-                    field={field}
-                    error={fieldState.error}
-                    label="Destination Yard *"
-                    placeholder="Select destination..."
-                    disabled={yardOptions.length === 0}
-                    data={yardOptions.filter((y) => y.value !== originYard)}
-                  />
-                )}
-              />
-            </div>
-
-            {direction && (
-              <div
-                className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-xs font-medium ${directionStyle[direction]}`}
-              >
-                <MapPin className="h-3.5 w-3.5 shrink-0" />
-                {directionLabel[direction]}
-              </div>
-            )}
-
-            {direction && direction !== "domestic" && (
-              <Controller
-                name="shippingLine"
-                control={form.control}
-                render={({ field, fieldState }) => (
-                  <SelectField
-                    field={field}
-                    error={fieldState.error}
-                    label="Shipping Line"
-                    placeholder="Select shipping line..."
-                    data={shippingLineOptions}
-                  />
-                )}
-              />
-            )}
-
-            <div className="space-y-0 divide-y divide-border rounded-xl border border-border">
-              <div className="flex items-center justify-between px-4 py-3">
-                <div className="flex items-center gap-3">
-                  <Flame className="h-4 w-4 shrink-0 text-red-500" />
-                  <div>
-                    <p className="text-sm font-medium">Hazardous Material</p>
-                    <p className="text-xs text-muted-foreground">
-                      Applies a Hazard Surcharge to the final bill.
-                    </p>
-                  </div>
-                </div>
-                <Controller
-                  name="isHazardous"
-                  control={form.control}
-                  render={({ field }) => (
-                    <Switch checked={field.value} onCheckedChange={field.onChange} />
-                  )}
-                />
-              </div>
-              <div className="flex items-center justify-between px-4 py-3">
-                <div className="flex items-center gap-3">
-                  <Snowflake className="h-4 w-4 shrink-0 text-sky-500" />
-                  <div>
-                    <p className="text-sm font-medium">Refrigerated Cargo</p>
-                    <p className="text-xs text-muted-foreground">
-                      Temperature-controlled transport applies a Refrigerator Surcharge.
-                    </p>
-                  </div>
-                </div>
-                <Controller
-                  name="isRefrigerated"
-                  control={form.control}
-                  render={({ field }) => (
-                    <Switch checked={field.value} onCheckedChange={field.onChange} />
-                  )}
-                />
-              </div>
-            </div>
-          </section>
-
-          <Separator />
-
-          {/* ── Section 4: Cargo ── */}
-          <section className="space-y-4">
-            <div>
-              <h2 className="text-lg font-bold">Cargo Details</h2>
-              <p className="text-sm text-muted-foreground">
-                Define your cargo type, weight, and container configuration.
-              </p>
-            </div>
-
-            <div className="grid gap-4 sm:grid-cols-2">
-              <Controller
-                name="cargoType"
-                control={form.control}
-                render={({ field, fieldState }) => (
-                  <SelectField
-                    field={field}
-                    error={fieldState.error}
-                    label="Cargo Type *"
-                    placeholder="Select cargo type..."
-                    data={[
-                      { value: "container", label: "Containerized" },
-                      { value: "bulk", label: "General Cargo" },
-                    ]}
-                  />
-                )}
-              />
-
-              <Controller
-                name="cargoWeight"
-                control={form.control}
-                render={({ field, fieldState }) => (
-                  <Field data-invalid={fieldState.invalid}>
-                    <FieldLabel htmlFor="cargoWeight">
-                      Total Cargo Weight (Tons) *
-                    </FieldLabel>
-                    <div className="relative">
-                      <Weight className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                      <Input
-                        {...field}
-                        id="cargoWeight"
-                        type="number"
-                        aria-invalid={fieldState.invalid}
-                        placeholder="0.00"
-                        className="pl-9"
-                        min="0"
-                        step="0.01"
-                      />
-                    </div>
-                    <FieldError errors={[fieldState.error]} />
-                  </Field>
-                )}
-              />
-            </div>
-
-            {cargoType === "bulk" && (
-              <>
-                <div className="grid gap-4 sm:grid-cols-2">
-                  <Controller
-                    name="freightType"
-                    control={form.control}
-                    render={({ field, fieldState }) => (
-                      <SelectField
-                        field={field}
-                        error={fieldState.error}
-                        label="Freight Type *"
-                        placeholder="Select freight type..."
-                        data={freightTypeGroups.map((g) => ({
-                          value: g.code.toLowerCase(),
-                          label: g.name,
-                        }))}
-                      />
-                    )}
-                  />
-
-                  {freightType && commodityOptions.length > 0 && (
-                    <Controller
-                      name="bulkCommoditytype"
-                      control={form.control}
-                      render={({ field, fieldState }) => (
-                        <SelectField
-                          field={field}
-                          error={fieldState.error}
-                          label="Commodity *"
-                          placeholder="Select commodity..."
-                          data={commodityOptions}
-                        />
-                      )}
-                    />
-                  )}
-                </div>
-
-                <Controller
-                  name="consolidationEnabled"
-                  control={form.control}
-                  render={({ field }) => (
-                    <div className="flex items-center justify-between rounded-xl border border-border px-4 py-3">
-                      <div>
-                        <p className="text-sm font-medium">Allow Consolidation</p>
-                        <p className="text-xs text-muted-foreground">
-                          Combine shipments to optimize costs.
-                        </p>
-                      </div>
-                      <Switch checked={field.value} onCheckedChange={field.onChange} />
-                    </div>
-                  )}
-                />
-              </>
-            )}
-
-            {cargoType === "container" && (
-              <div className="space-y-4">
-                <div className="flex items-center justify-between">
-                  <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                    Containers
-                  </p>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={() =>
-                      append({
-                        type: "20ft",
-                        containerType: "",
-                        qty: "1",
-                        vgm: "",
-                      })
-                    }
-                  >
-                    <Plus className="mr-1 h-3.5 w-3.5" />
-                    Add Container
-                  </Button>
-                </div>
-
-                {fields.map((field, index) => {
-                  const containerType = containers[index]?.type;
-                  const vgm = containers[index]?.vgm ?? 0;
-                  const alert = (() => {
-                    if (containerType === "20ft" && +vgm > 0) {
-                      const limit = direction === "export" ? 25 : 20;
-                      if (+vgm > limit) {
-                        return `VGM ${vgm}t exceeds the ${limit}t ${direction ?? "standard"} limit for a 20ft container. An Overweight Surcharge will apply.`;
-                      }
-                    }
-                    if (containerType === "40ft" && +vgm > 32.5) {
-                      return `VGM ${vgm}t exceeds the 32.5t global limit for a 40ft container. An Overweight Surcharge will apply.`;
-                    }
-                    return null;
-                  })();
-
-                  return (
-                    <div
-                      key={field.id}
-                      className="rounded-xl border border-border p-4 space-y-4"
-                    >
-                      <div className="flex items-center justify-between">
-                        <p className="text-sm font-medium">
-                          Container {index + 1}
-                        </p>
-                        {fields.length > 1 && (
-                          <button
-                            type="button"
-                            onClick={() => remove(index)}
-                            className="flex items-center gap-1 text-xs text-destructive hover:underline"
-                          >
-                            <Trash2 className="h-3.5 w-3.5" />
-                            Remove
-                          </button>
-                        )}
-                      </div>
-
-                      <div className="grid gap-3 sm:grid-cols-4">
-                        <Controller
-                          name={`containers.${index}.type`}
-                          control={form.control}
-                          render={({ field: typeField, fieldState }) => (
-                            <SelectField
-                              field={typeField}
-                              error={fieldState.error}
-                              label="Size *"
-                              placeholder="Size..."
-                              data={[
-                                { value: "20ft", label: "20ft (TEU)" },
-                                { value: "40ft", label: "40ft (FEU)" },
-                              ]}
-                            />
-                          )}
-                        />
-
-                        <Controller
-                          name={`containers.${index}.containerType`}
-                          control={form.control}
-                          render={({ field: ctField, fieldState }) => (
-                            <SelectField
-                              field={ctField}
-                              error={fieldState.error}
-                              label="Type *"
-                              placeholder="Type..."
-                              data={containerTypeOptions}
-                            />
-                          )}
-                        />
-
-                        <Controller
-                          name={`containers.${index}.qty`}
-                          control={form.control}
-                          render={({ field: qtyField, fieldState }) => (
-                            <Field data-invalid={fieldState.invalid}>
-                              <FieldLabel>Quantity *</FieldLabel>
-                              <Input
-                                value={qtyField.value ?? 1}
-                                onChange={(e) => qtyField.onChange(e.target.value)}
-                                onBlur={qtyField.onBlur}
-                                type="number"
-                                aria-invalid={fieldState.invalid}
-                                min="1"
-                              />
-                              <FieldError errors={[fieldState.error]} />
-                            </Field>
-                          )}
-                        />
-
-                        <Controller
-                          name={`containers.${index}.vgm`}
-                          control={form.control}
-                          render={({ field: vgmField, fieldState }) => (
-                            <Field data-invalid={fieldState.invalid}>
-                              <FieldLabel>VGM (Tons) *</FieldLabel>
-                              <Input
-                                value={vgmField.value ?? 0}
-                                onChange={(e) => vgmField.onChange(e.target.value)}
-                                onBlur={vgmField.onBlur}
-                                type="number"
-                                aria-invalid={fieldState.invalid}
-                                placeholder="e.g. 18.5"
-                                min="0"
-                                step="0.1"
-                              />
-                              <FieldError errors={[fieldState.error]} />
-                            </Field>
-                          )}
-                        />
-                      </div>
-
-                      {alert && (
-                        <AlertBox tone="warning">
-                          <strong>Overweight Alert:</strong> {alert}
-                        </AlertBox>
-                      )}
-                    </div>
-                  );
-                })}
-
-                {containers && (() => {
-                  const Ft40Wagons = containers
-                    .filter((c) => c.type === "40ft")
-                    .reduce((sum, c) => sum + Number(c.qty), 0);
-                  const Ft20Wagons = containers
-                    .filter((c) => c.type === "20ft")
-                    .reduce((sum, c) => sum + Number(c.qty), 0);
-                  const hasOddUnit = Ft20Wagons % 2 === 1;
-                  if (hasOddUnit) {
-                    return (
-                      <AlertBox tone="warning">
-                        <div className="flex items-start gap-2">
-                          <div>
-                            <p className="font-semibold">Unpaired 20ft Container</p>
-                            <p className="mt-1 text-xs">
-                              One 20ft container occupies only half a wagon. The wagon
-                              will depart once a co-loader is found to fill the
-                              remaining slot, which{" "}
-                              <strong>may delay departure</strong> beyond the standard
-                              lead time.
-                            </p>
-                          </div>
-                        </div>
-                      </AlertBox>
-                    );
-                  }
-                  return null;
-                })()}
-              </div>
-            )}
-          </section>
-
-          <Separator />
-
-          {/* ── Section 5: Notes & Submit ── */}
-          <section className="space-y-4">
-            <div>
-              <h2 className="text-lg font-bold">Notes & Confirmation</h2>
-              <p className="text-sm text-muted-foreground">
-                Add any special instructions and confirm the changes.
-              </p>
-            </div>
+      <Stack gap={36} mt="xl">
+        {/* ── Section 1: Service ── */}
+        <Stack gap="md">
+          <SectionHeading
+            title="Service"
+            description="Select the service combination and configure trucking options."
+          />
 
+          <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
             <Controller
-              name="notes"
-              control={form.control}
-              render={({ field }) => (
-                <Field>
-                  <FieldLabel htmlFor="notes">Additional Notes</FieldLabel>
-                  <Textarea
-                    {...field}
-                    id="notes"
-                    placeholder="Any special instructions or notes for EDR operations..."
-                    rows={3}
-                  />
-                </Field>
-              )}
-            />
-
-            <Controller
-              name="termsAccepted"
+              name="serviceType"
               control={form.control}
               render={({ field, fieldState }) => (
-                <Field data-invalid={fieldState.invalid}>
-                  <label className="flex cursor-pointer items-start gap-3">
-                    <button
-                      type="button"
-                      role="checkbox"
-                      aria-checked={field.value}
-                      aria-invalid={fieldState.invalid}
-                      onClick={() => field.onChange(!field.value)}
-                      className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded border-2 transition ${field.value ? "border-primary bg-primary" : "border-input"
-                      }`}
-                    >
-                      {field.value && (
-                        <Check className="h-3 w-3 text-primary-foreground" />
-                      )}
-                    </button>
-                    <span className="text-sm text-muted-foreground">
-                      I confirm the information is accurate and agree to EDR's{" "}
-                      <span className="text-primary">
-                        freight contract terms and conditions
-                      </span>
-                      .
-                    </span>
-                  </label>
-                  <FieldError errors={[fieldState.error, form.formState.errors.termsAccepted]} />
-                </Field>
+                <SelectField
+                  field={field}
+                  error={fieldState.error}
+                  label="Service Type *"
+                  placeholder="Select service type..."
+                  data={[
+                    { value: "rail", label: "Rail Transport Only" },
+                    {
+                      value: "rail_forwarding",
+                      label: "Logistics (Rail + Forwarding)",
+                    },
+                  ]}
+                />
               )}
             />
-          </section>
-        </div>
 
-        {/* ── Submit ── */}
-        <div className="mt-10 flex items-center gap-3 border-t border-border pt-6">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => navigate(`/bookings/${id}`)}
-          >
-            Cancel
-          </Button>
-          <Button
-            type="submit"
-            form="edit-booking-form"
-            disabled={updateMutation.isPending}
-          >
-            {updateMutation.isPending ? (
-              <LoaderCircle className="h-4 w-4 animate-spin" />
-            ) : (
-              <Check />
+            <Controller
+              name="equipmentReturn"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <SelectField
+                  field={field}
+                  error={fieldState.error}
+                  label="Equipment Return"
+                  placeholder="Select..."
+                  data={[
+                    { value: "with_return", label: "With Return" },
+                    { value: "without_return", label: "Without Return" },
+                  ]}
+                />
+              )}
+            />
+          </SimpleGrid>
+
+          {serviceType === "rail_forwarding" && (
+            <Paper withBorder radius="md">
+              <Controller
+                name="firstMile.enabled"
+                control={form.control}
+                render={({ field }) => (
+                  <ToggleRow
+                    icon={<Truck size={16} color="#6B7C8E" />}
+                    title="First Mile - Pick-up"
+                    description="Truck pick-up from your premises to the origin rail yard."
+                    checked={field.value}
+                    onChange={(value) => {
+                      field.onChange(value);
+                      if (!value) {
+                        form.setValue("firstMile.pickUpAddress", "", {
+                          shouldDirty: true,
+                          shouldValidate: true,
+                        });
+                      }
+                    }}
+                  >
+                    {firstMileEnabled && (
+                      <Controller
+                        name="firstMile.pickUpAddress"
+                        control={form.control}
+                        render={({ field: addr, fieldState }) => (
+                          <TextInput
+                            {...addr}
+                            mt="sm"
+                            radius="md"
+                            placeholder="Pick-up address *"
+                            error={fieldState.error?.message}
+                          />
+                        )}
+                      />
+                    )}
+                  </ToggleRow>
+                )}
+              />
+
+              <Divider />
+
+              <Controller
+                name="lastMile.enabled"
+                control={form.control}
+                render={({ field }) => (
+                  <ToggleRow
+                    icon={<Truck size={16} color="#6B7C8E" />}
+                    title="Last Mile - Delivery"
+                    description="Truck delivery from the destination rail yard to the final address."
+                    checked={field.value}
+                    onChange={(value) => {
+                      field.onChange(value);
+                      if (!value) {
+                        form.setValue("lastMile.deliveryAddress", "", {
+                          shouldDirty: true,
+                          shouldValidate: true,
+                        });
+                      }
+                    }}
+                  >
+                    {lastMileEnabled && (
+                      <Controller
+                        name="lastMile.deliveryAddress"
+                        control={form.control}
+                        render={({ field: addr, fieldState }) => (
+                          <TextInput
+                            {...addr}
+                            mt="sm"
+                            radius="md"
+                            placeholder="Delivery address *"
+                            error={fieldState.error?.message}
+                          />
+                        )}
+                      />
+                    )}
+                  </ToggleRow>
+                )}
+              />
+
+              <Divider />
+
+              <Controller
+                name="customsClearingEnabled"
+                control={form.control}
+                render={({ field }) => (
+                  <ToggleRow
+                    icon={<FileText size={16} color="#6B7C8E" />}
+                    title="Customs Clearing Service"
+                    description="EDR handles customs documentation and clearance on your behalf."
+                    checked={field.value}
+                    onChange={field.onChange}
+                  />
+                )}
+              />
+            </Paper>
+          )}
+        </Stack>
+
+        <Divider />
+
+        {/* ── Section 3: Route ── */}
+        <Stack gap="md">
+          <SectionHeading
+            title="Route"
+            description="Select the origin and destination yards."
+          />
+
+          <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
+            <Controller
+              name="originYard"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <SelectField
+                  field={field}
+                  error={fieldState.error}
+                  label="Origin Yard *"
+                  placeholder="Select origin..."
+                  disabled={yardOptions.length === 0}
+                  data={yardOptions.filter((y) => y.value !== destinationYard)}
+                />
+              )}
+            />
+
+            <Controller
+              name="destinationYard"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <SelectField
+                  field={field}
+                  error={fieldState.error}
+                  label="Destination Yard *"
+                  placeholder="Select destination..."
+                  disabled={yardOptions.length === 0}
+                  data={yardOptions.filter((y) => y.value !== originYard)}
+                />
+              )}
+            />
+          </SimpleGrid>
+
+          {direction && (
+            <Alert
+              color={DIRECTION_COLOR[direction]}
+              icon={<MapPin size={16} />}
+              radius="md"
+            >
+              {DIRECTION_LABEL[direction]}
+            </Alert>
+          )}
+
+          {direction && direction !== "domestic" && (
+            <Controller
+              name="shippingLine"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <SelectField
+                  field={field}
+                  error={fieldState.error}
+                  label="Shipping Line"
+                  placeholder="Select shipping line..."
+                  data={shippingLineOptions}
+                />
+              )}
+            />
+          )}
+
+          <Paper withBorder radius="md">
+            <Controller
+              name="isHazardous"
+              control={form.control}
+              render={({ field }) => (
+                <ToggleRow
+                  icon={<Flame size={16} color="#E03131" />}
+                  title="Hazardous Material"
+                  description="Applies a Hazard Surcharge to the final bill."
+                  checked={field.value}
+                  onChange={field.onChange}
+                />
+              )}
+            />
+            <Divider />
+            <Controller
+              name="isRefrigerated"
+              control={form.control}
+              render={({ field }) => (
+                <ToggleRow
+                  icon={<Snowflake size={16} color="#1C7ED6" />}
+                  title="Refrigerated Cargo"
+                  description="Temperature-controlled transport applies a Refrigerator Surcharge."
+                  checked={field.value}
+                  onChange={field.onChange}
+                />
+              )}
+            />
+          </Paper>
+        </Stack>
+
+        <Divider />
+
+        {/* ── Section 4: Cargo ── */}
+        <Box>
+          <Step5CargoDetails
+            form={form}
+            direction={direction}
+            referenceData={referenceData}
+            isLoading={!referenceData}
+          />
+        </Box>
+
+        <Divider />
+
+        {/* ── Section 5: Documents ── */}
+        <Stack gap="md">
+          <SectionHeading
+            title="Documents"
+            description="Attach or replace shipment documents. Uploads are saved when you save your changes."
+          />
+
+          <Paper withBorder radius="md" p="md">
+            <Group justify="space-between" align="center" mb="xs">
+              <Text fw={700} fz="sm" c="#10202F">
+                Shipment documents
+              </Text>
+              <CountChip
+                uploaded={uploadedCount}
+                total={BOOKING_DOCS_SETTING.fields.length}
+              />
+            </Group>
+
+            <Box>
+              {BOOKING_DOCS_SETTING.fields.map((docField, i) => {
+                const isUploaded = uploadedCodes.has(docField.fileKey);
+                const uploadedFile = booking.files?.find(
+                  (f) => f.code === docField.fileKey,
+                );
+                const value = documents[docField.fileKey];
+                const selected = value instanceof File ? value : null;
+
+                return (
+                  <DocRow
+                    key={docField.fileKey}
+                    last={i === BOOKING_DOCS_SETTING.fields.length - 1}
+                    title={docField.fileLabel}
+                    meta={
+                      selected
+                        ? selected.name
+                        : isUploaded
+                          ? (uploadedFile?.name ?? "Uploaded")
+                          : "Not added yet"
+                    }
+                    status={
+                      selected ? "ready" : isUploaded ? "verified" : "missing"
+                    }
+                    action={
+                      <Group gap={6} wrap="nowrap">
+                        {isUploaded && !selected && (
+                          <IconSquare
+                            href={uploadedFile?.signedUrl ?? uploadedFile?.url}
+                            icon={<Download size={16} />}
+                          />
+                        )}
+                        <input
+                          ref={(el) => {
+                            docInputRefs.current[docField.fileKey] = el;
+                          }}
+                          type="file"
+                          accept=".pdf,.jpg,.jpeg,.png"
+                          style={{ display: "none" }}
+                          onChange={(e) =>
+                            setDocument(
+                              docField.fileKey,
+                              e.target.files?.[0] ?? null,
+                            )
+                          }
+                        />
+                        <Button
+                          variant="default"
+                          size="xs"
+                          radius="md"
+                          leftSection={<Upload size={14} />}
+                          onClick={() =>
+                            docInputRefs.current[docField.fileKey]?.click()
+                          }
+                        >
+                          {selected ? "Change" : isUploaded ? "Replace" : "Add"}
+                        </Button>
+                        {selected && (
+                          <ActionIcon
+                            variant="default"
+                            radius="md"
+                            color="red"
+                            onClick={() => setDocument(docField.fileKey, null)}
+                            aria-label="Discard replacement"
+                          >
+                            <X size={15} />
+                          </ActionIcon>
+                        )}
+                      </Group>
+                    }
+                  />
+                );
+              })}
+            </Box>
+          </Paper>
+        </Stack>
+
+        <Divider />
+
+        {/* ── Section 6: Notes ── */}
+        <Stack gap="md">
+          <SectionHeading
+            title="Notes"
+            description="Add any special instructions for EDR operations."
+          />
+          <Controller
+            name="notes"
+            control={form.control}
+            render={({ field }) => (
+              <Textarea
+                {...field}
+                radius="md"
+                label="Additional Notes"
+                placeholder="Any special instructions or notes for EDR operations..."
+                rows={3}
+              />
             )}
-            {updateMutation.isPending ? "Saving Changes..." : "Save Changes"}
-          </Button>
-        </div>
-      </div>
-    </form>
+          />
+        </Stack>
+      </Stack>
+
+      {/* ── Submit ── */}
+      <Group
+        mt="xl"
+        pt="lg"
+        gap="sm"
+        style={{ borderTop: "1px solid var(--mantine-color-gray-2)" }}
+      >
+        <Button
+          type="button"
+          variant="default"
+          radius="md"
+          onClick={() => navigate(`/bookings/${id}`)}
+        >
+          Cancel
+        </Button>
+        <Button
+          type="submit"
+          form="edit-booking-form"
+          color="edr-green"
+          radius="md"
+          loading={updateMutation.isPending}
+          leftSection={
+            updateMutation.isPending ? undefined : <Check size={16} />
+          }
+        >
+          {updateMutation.isPending ? "Saving Changes..." : "Save Changes"}
+        </Button>
+      </Group>
+    </Box>
   );
 }
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step8-review.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step8-review.tsx
index 3d2e087db..b547a47c9 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step8-review.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step8-review.tsx
@@ -2,6 +2,8 @@ import { Controller, type UseFormReturn } from "react-hook-form";
 import { Box, Card, Checkbox, SimpleGrid, Text, Textarea, Title } from "@mantine/core";
 import {
   BookingFormInputValues,
+  BOOKING_DOCS_SETTING,
+  type BookingDocuments,
   type BookingFormValues,
   type RouteDirection,
 } from "./schema";
@@ -67,6 +69,13 @@ export function Step8Review({
         )
       : 0;
 
+  const documents = (values.documents ?? {}) as BookingDocuments;
+  const docsAttached = BOOKING_DOCS_SETTING.fields.filter((f) => {
+    const value = documents[f.fileKey];
+    return Array.isArray(value) ? value.length > 0 : Boolean(value);
+  }).length;
+  const docsTotal = BOOKING_DOCS_SETTING.fields.length;
+
   const cargoValue =
     values.cargoType === "container"
       ? containerSummary
@@ -206,6 +215,18 @@ export function Step8Review({
             target={4}
           />
         </ReviewCard>
+
+        <ReviewCard title="Documents">
+          <Row
+            label="Attached"
+            value={
+              docsAttached > 0
+                ? `${docsAttached} of ${docsTotal} attached`
+                : "None — upload later from the booking page"
+            }
+            target={5}
+          />
+        </ReviewCard>
       </SimpleGrid>
 
       <Controller