diff --git a/distribution_fe/app/(dashboard)/operations/rides/_components/ride-view-sheet.tsx b/distribution_fe/app/(dashboard)/operations/rides/_components/ride-view-sheet.tsx
index 70916ba..6513168 100644
--- a/distribution_fe/app/(dashboard)/operations/rides/_components/ride-view-sheet.tsx
+++ b/distribution_fe/app/(dashboard)/operations/rides/_components/ride-view-sheet.tsx
@@ -55,6 +55,12 @@ export function RideViewSheet({ open, onClose, ride }: RideViewSheetProps) {
           <Row label="Meter End" value={ride.meterend ? `${ride.meterend} km` : '—'} />
           <Row label="Started At" value={fmtDateTime(ride.startedAt)} />
           <Row label="Closed At" value={fmtDateTime(ride.closedAt)} />
+          {ride.status === 'Cancelled' && (
+            <>
+              <Row label="Cancel Type" value={ride.cancelTypeCode || '—'} />
+              <Row label="Cancel Reason" value={ride.cancelReason || '—'} />
+            </>
+          )}
           <Row label="Created At" value={fmtDateTime(ride.createdAt)} />
         </div>
       </DialogContent>
diff --git a/distribution_fe/app/(dashboard)/operations/rides/_components/rides-client.tsx b/distribution_fe/app/(dashboard)/operations/rides/_components/rides-client.tsx
index 4353d1f..6e2d527 100644
--- a/distribution_fe/app/(dashboard)/operations/rides/_components/rides-client.tsx
+++ b/distribution_fe/app/(dashboard)/operations/rides/_components/rides-client.tsx
@@ -145,6 +145,7 @@ export function RidesClient() {
         {
           action: 'cancel',
           label: 'Cancel ride',
+          tone: 'destructive',
           onClick: handleCancel,
           visible: (target) => target.status === 'Open',
         },
diff --git a/distribution_fe/types/api.ts b/distribution_fe/types/api.ts
index 0fb545b..955781d 100644
--- a/distribution_fe/types/api.ts
+++ b/distribution_fe/types/api.ts
@@ -561,6 +561,8 @@ export interface RideResponse {
   meterend: number
   startedAt: string | null
   closedAt: string | null
+  cancelTypeCode: CancelRequestType | null
+  cancelReason: string | null
   createdAt: string
 }