diff --git a/src/app/[name]/(Dialogs)/order/track/[id]/page.tsx b/src/app/[name]/(Dialogs)/order/track/[id]/page.tsx
index a9ff048..2a0aabf 100644
--- a/src/app/[name]/(Dialogs)/order/track/[id]/page.tsx
+++ b/src/app/[name]/(Dialogs)/order/track/[id]/page.tsx
@@ -10,8 +10,11 @@ import { Clock } from 'iconsax-react';
 import clsx from 'clsx';
 import useToggle from '@/hooks/helpers/useToggle';
 import Prompt from '@/components/utils/Prompt';
-import { useGetOrderDetail } from '../../checkout/hooks/useOrderData';
+import { useCancelOrder, useGetOrderDetail } from '../../checkout/hooks/useOrderData';
 import ordersTranslations from '@/locales/fa/orders.json';
+import { toast } from '@/components/Toast';
+import { extractErrorMessage } from '@/lib/func';
+import { useQueryClient } from '@tanstack/react-query';
 
 const getDeliveryMethodTitle = (method: string) => {
     switch (method) {
@@ -59,12 +62,24 @@ const getStatusText = (status: string): string => {
 function OrderTrackingPage() {
     const { id } = useParams();
     const router = useRouter();
+    const queryClient = useQueryClient();
     const { state: cancelModal, toggle: toggleCancelModal } = useToggle();
     const { data: orderDetail, isLoading } = useGetOrderDetail(id as string);
+    const { mutate: cancelOrder } = useCancelOrder();
 
     const onCancelOrder = (e: React.MouseEvent | null) => {
-        if (!e) return;
-        // TODO: Implement cancel order logic
+        if (!e || !id) return;
+
+        cancelOrder(id as string, {
+            onSuccess: () => {
+                toggleCancelModal();
+                queryClient.invalidateQueries({ queryKey: ['order-detail', id] });
+                toast('سفارش با موفقیت لغو شد', 'success');
+            },
+            onError: (error) => {
+                toast(extractErrorMessage(error), 'error');
+            }
+        });
     };
 
     return (