diff --git a/apps/edr-freight-web/backoffice/src/App.tsx b/apps/edr-freight-web/backoffice/src/App.tsx
index 6abe397dc..2ee3241d8 100644
--- a/apps/edr-freight-web/backoffice/src/App.tsx
+++ b/apps/edr-freight-web/backoffice/src/App.tsx
@@ -34,15 +34,15 @@ 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 {
-  CargoesCrudPage,
-  ContainersCrudPage,
-  TrainMasterDataPage,
-  WagonsCrudPage,
-} from "./pages/fleet/FleetCrudPages";
-import { getCategorySidebarChildren } from "./pages/ruleEngine/config/resources";
-import TrainDetailPage from "./pages/trains/TrainDetailPage";
+import TrainsPage from "./pages/trains/TrainsPage";
+import {
+  CargoesCrudPage,
+  ContainersCrudPage,
+  TrainMasterDataPage,
+  WagonsCrudPage,
+} from "./pages/fleet/FleetCrudPages";
+import { getCategorySidebarChildren } from "./pages/ruleEngine/config/resources";
+import TrainDetailPage from "./pages/trains/TrainDetailPage";
 
 const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
   {
@@ -241,13 +241,13 @@ const App = () => {
           <Route
             path="booking-requests/:id/contract"
             element={<BookingContractPage />}
-          />
-          <Route path="operations/train-scheduling" element={<TrainsPage />} />
-          <Route path="trains" element={<TrainMasterDataPage />} />
-          <Route path="trains/:id" element={<TrainDetailPage />} />
-          <Route path="wagons" element={<WagonsCrudPage />} />
-          <Route path="containers" element={<ContainersCrudPage />} />
-          <Route path="cargoes" element={<CargoesCrudPage />} />
+          />
+          <Route path="operations/train-scheduling" element={<TrainsPage />} />
+          <Route path="trains" element={<TrainMasterDataPage />} />
+          <Route path="trains/:id" element={<TrainDetailPage />} />
+          <Route path="wagons" element={<WagonsCrudPage />} />
+          <Route path="containers" element={<ContainersCrudPage />} />
+          <Route path="cargoes" element={<CargoesCrudPage />} />
 
           <Route path="user-management" element={<UserManagementPage />} />
           <Route path="user-management/users" element={<UsersPage />} />
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/ApprovalStepsCard.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/ApprovalStepsCard.tsx
index ebfc573b0..bbb770fa3 100644
--- a/apps/edr-freight-web/backoffice/src/components/bookings/ApprovalStepsCard.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/ApprovalStepsCard.tsx
@@ -150,7 +150,6 @@ function StepRow({
         : isNext
           ? "green"
           : "gray";
-  const highlighted = isNext || step.status === "APPROVED";
 
   return (
     <Group
@@ -161,8 +160,11 @@ function StepRow({
       py="xs"
       style={{
         borderRadius: 8,
-        border: `1px solid ${highlighted ? "var(--mantine-color-green-2)" : "var(--mantine-color-gray-2)"}`,
-        background: isNext ? "var(--mantine-color-green-0)" : "white",
+        border: "1px solid var(--mantine-color-gray-2)",
+        borderLeft: isNext
+          ? "3px solid var(--mantine-color-green-6)"
+          : "1px solid var(--mantine-color-gray-2)",
+        background: isNext ? "var(--mantine-color-gray-0)" : "white",
       }}
     >
       <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
@@ -177,8 +179,8 @@ function StepRow({
             flexShrink: 0,
             fontSize: 12,
             fontWeight: 700,
-            background: isNext ? "var(--mantine-color-green-1)" : "var(--mantine-color-gray-1)",
-            color: isNext ? "var(--mantine-color-green-8)" : "var(--mantine-color-gray-6)",
+            background: "var(--mantine-color-gray-1)",
+            color: isNext ? "var(--mantine-color-gray-7)" : "var(--mantine-color-gray-6)",
           }}
         >
           {step.stepOrder}
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusBadge.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusBadge.tsx
index 6d8ce3a99..4b801d99f 100644
--- a/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusBadge.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusBadge.tsx
@@ -37,7 +37,14 @@ export function BookingStatusBadge({ status }: { status: string }) {
       radius="md"
       tt="uppercase"
       fw={600}
-      style={{ fontSize: "0.7rem", letterSpacing: "0.05em" }}
+      title={style.label}
+      style={{
+        fontSize: "0.7rem",
+        letterSpacing: "0.05em",
+        display: "inline-flex",
+        maxWidth: "100%",
+        whiteSpace: "nowrap",
+      }}
     >
       {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
index 88f04ddaa..d8b93dbc0 100644
--- a/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusTabs.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusTabs.tsx
@@ -40,12 +40,17 @@ export function BookingStatusTabs({
   return (
     <Group
       gap="sm"
-      wrap="wrap"
+      wrap="nowrap"
       p="md"
       style={{
         background: "var(--mantine-color-gray-0)",
         borderRadius: "12px",
         border: "1px solid var(--mantine-color-gray-2)",
+        overflowX: "auto",
+        overflowY: "hidden",
+        WebkitOverflowScrolling: "touch",
+        scrollBehavior: "smooth",
+        scrollbarWidth: "thin",
       }}
     >
       {BOOKING_LIST_TABS.map((tab) => {
@@ -56,6 +61,7 @@ export function BookingStatusTabs({
             key={tab.key}
             onClick={() => onChange(tab.key)}
             style={{
+              flexShrink: 0,
               background: isActive ? "white" : "transparent",
               border: isActive ? "1px solid var(--mantine-color-green-3)" : "1px solid var(--mantine-color-gray-2)",
               borderRadius: "10px",
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/BookingWorkflowStepper.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/BookingWorkflowStepper.tsx
index 2a70525ba..1b2c279a5 100644
--- a/apps/edr-freight-web/backoffice/src/components/bookings/BookingWorkflowStepper.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingWorkflowStepper.tsx
@@ -13,7 +13,7 @@ import {
   WORKFLOW_STAGES,
 } from "@/features/bookings/booking-status.config";
 import { SectionCard } from "./detail/SectionCard";
-import { BRAND_GREEN } from "./detail/booking-detail.styles";
+import { BRAND_GREEN, detailStyles } from "./detail/booking-detail.styles";
 
 const STAGE_ICONS: LucideIcon[] = [
   FileText,
@@ -112,16 +112,11 @@ export function BookingWorkflowStepper({
         radius="md"
         withBorder
         p="md"
-        style={{
-          background: isTerminal
-            ? "var(--mantine-color-red-0)"
-            : "var(--mantine-color-green-0)",
-          borderColor: isTerminal
-            ? "var(--mantine-color-red-2)"
-            : "var(--mantine-color-green-2)",
-        }}
+        style={
+          isTerminal ? detailStyles.statusBannerTerminal : detailStyles.statusBanner
+        }
       >
-        <Text size="sm" fw={600} c={isTerminal ? "red.7" : "green.8"}>
+        <Text size="sm" fw={600} c={isTerminal ? "red.7" : "dark"}>
           {title}
         </Text>
         <Text size="sm" c="dimmed" mt={4}>
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/NextStepBanner.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/NextStepBanner.tsx
index 20318db59..1132a8c23 100644
--- a/apps/edr-freight-web/backoffice/src/components/bookings/NextStepBanner.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/NextStepBanner.tsx
@@ -11,7 +11,7 @@ export function NextStepBanner({ nextStep }: NextStepBannerProps) {
   return (
     <Alert
       variant="light"
-      color="green"
+      color="gray"
       radius="md"
       icon={<ArrowRight size={16} />}
       title={
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingRouteServiceCard.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingRouteServiceCard.tsx
index 10044f2d4..2978bea38 100644
--- a/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingRouteServiceCard.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingRouteServiceCard.tsx
@@ -75,11 +75,11 @@ export function BookingRouteServiceCard({
               width: 36,
               height: 36,
               borderRadius: "50%",
-              background: "var(--mantine-color-green-0)",
-              border: "1px solid var(--mantine-color-green-2)",
+              background: "var(--mantine-color-gray-1)",
+              border: "1px solid var(--mantine-color-gray-3)",
             }}
           >
-            <Train size={18} color="var(--mantine-color-green-7)" />
+            <Train size={18} color="var(--mantine-color-gray-7)" />
           </Box>
           <Badge variant="light" color="gray" size="sm" radius="sm" tt="uppercase">
             {serviceLabel}
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/detail/booking-detail.styles.ts b/apps/edr-freight-web/backoffice/src/components/bookings/detail/booking-detail.styles.ts
index 9785157b6..9b252adba 100644
--- a/apps/edr-freight-web/backoffice/src/components/bookings/detail/booking-detail.styles.ts
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/detail/booking-detail.styles.ts
@@ -20,10 +20,22 @@ export const detailStyles = {
     borderBottom: "1px solid var(--mantine-color-gray-2)",
   } satisfies CSSProperties,
 
-  /** Subtle key-figure card (e.g. payment) — tinted, still flat. */
+  /** Subtle key-figure card (e.g. payment) — neutral tint, still flat. */
   highlightCard: {
-    background: "var(--mantine-color-green-0)",
-    borderColor: "var(--mantine-color-green-2)",
+    background: "var(--mantine-color-gray-0)",
+    borderColor: "var(--mantine-color-gray-2)",
+  } satisfies CSSProperties,
+
+  /** Workflow status description banner — neutral default. */
+  statusBanner: {
+    background: "var(--mantine-color-gray-0)",
+    borderColor: "var(--mantine-color-gray-2)",
+  } satisfies CSSProperties,
+
+  /** Workflow status banner for terminal (rejected/cancelled) states. */
+  statusBannerTerminal: {
+    background: "var(--mantine-color-red-0)",
+    borderColor: "var(--mantine-color-red-2)",
   } satisfies CSSProperties,
 
   routeLine: {
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 8425d12cc..a9b3849d7 100644
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx
@@ -40,7 +40,7 @@ export default function BookingRequestDetailPage() {
       <Box style={detailStyles.page}>
         <Center mih="60vh">
           <Stack align="center" gap="md">
-            <Loader color="green" />
+            <Loader color="gray" />
             <Text size="sm" c="dimmed" fw={500}>
               Loading booking…
             </Text>
@@ -64,8 +64,8 @@ export default function BookingRequestDetailPage() {
                   width: 64,
                   height: 64,
                   borderRadius: 16,
-                  background: "var(--mantine-color-green-0)",
-                  color: "var(--mantine-color-green-7)",
+                  background: "var(--mantine-color-gray-1)",
+                  color: "var(--mantine-color-gray-6)",
                 }}
               >
                 <Package size={32} />
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 2283bc0bd..54b570fb4 100644
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
@@ -185,8 +185,18 @@ export default function BookingRequestsPage() {
     },
     {
       id: "status",
+      size: 200,
+      minSize: 180,
       header: () => <span className={bookingTable.headerCell}>Status</span>,
-      cell: ({ row }) => <BookingStatusBadge status={row.original.status} />,
+      cell: ({ row }) => (
+        <div className="py-1">
+          <BookingStatusBadge status={row.original.status} />
+        </div>
+      ),
+      meta: {
+        headerClassName: "min-w-[11rem]",
+        cellClassName: "min-w-[11rem]",
+      },
     },
     {
       id: "approval",
@@ -340,22 +350,16 @@ export default function BookingRequestsPage() {
             style={{
               background: "white",
               border: "1px solid var(--mantine-color-gray-2)",
-              overflowX: "auto",
-              overflowY: "hidden",
-              WebkitOverflowScrolling: "touch",
-              scrollBehavior: "smooth",
             }}
           >
-            <div style={{ minWidth: "min-content", display: "inline-block", width: "100%" }}>
-              <BookingStatusTabs
-                active={activeTab}
-                onChange={(tab) => {
-                  setActiveTab(tab);
-                  setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
-                }}
-                counts={tabCounts}
-              />
-            </div>
+            <BookingStatusTabs
+              active={activeTab}
+              onChange={(tab) => {
+                setActiveTab(tab);
+                setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+              }}
+              counts={tabCounts}
+            />
           </Paper>
 
           <Card