diff --git a/actions/payment.ts b/actions/payment.ts
index 6098869..9b0eef9 100644
--- a/actions/payment.ts
+++ b/actions/payment.ts
@@ -164,24 +164,16 @@ export async function getTopup({ id }: { id: string }) {
 export async function cancelTopup({ id }: { id: string }) {
 	const session = await getServerSession(authOptions);
 	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL}/api/billing/topup/${id}/delete/`,
+		`${process.env.SARLINK_API_BASE_URL}/api/billing/topup/${id}/cancel/`,
 		{
-			method: "DELETE",
+			method: "PATCH",
 			headers: {
 				"Content-Type": "application/json",
 				Authorization: `Token ${session?.apiToken}`,
 			},
 		},
 	);
-	if (!response.ok) {
-		const errorData = (await response.json()) as ApiError;
-		const errorMessage =
-			errorData.message || errorData.detail || "An error occurred.";
-		const error = new Error(errorMessage);
-		(error as ApiError & { details?: ApiError }).details = errorData; // Attach the errorData to the error object
-		throw error;
-	}
-	return { message: "Topup successfully canceled." };
+	return handleApiResponse<Topup>(response, "cancelTopup");
 }
 
 export async function cancelPayment({ id }: { id: string }) {
diff --git a/components/billing/cancel-topup-button.tsx b/components/billing/cancel-topup-button.tsx
index a6ca438..21f71b2 100644
--- a/components/billing/cancel-topup-button.tsx
+++ b/components/billing/cancel-topup-button.tsx
@@ -17,13 +17,15 @@ export default function CancelTopupButton({
     <Button
       onClick={async () => {
         setLoading(true);
-        const [error, x] = await tryCatch(cancelTopup({ id: topupId }));
-        console.log(x);
+        const [error, topup] = await tryCatch(cancelTopup({ id: topupId }));
         if (error) {
           toast.error(error.message);
           setLoading(false);
         } else {
-          toast.success("Topup cancelled successfully!")
+          toast.success("Topup cancelled successfully!", {
+            description: `Your topup of ${topup?.amount} MVR has been cancelled.`,
+            closeButton: true,
+          })
           router.replace("/top-ups");
         }
       }}
diff --git a/components/topups-table.tsx b/components/topups-table.tsx
index 24aad7b..dd5879c 100644
--- a/components/topups-table.tsx
+++ b/components/topups-table.tsx
@@ -125,7 +125,7 @@ export async function TopupsTable({
 												{topup.paid ? (
 													<Badge className="bg-green-100 dark:bg-green-700" variant="outline">{topup.status}</Badge>
 												) : topup.is_expired ? (
-													<Badge className="text-black dark:text-white bg-yellow-100 dark:bg-yellow-700">Expired</Badge>
+													<Badge>Expired</Badge>
 												) : (
 													<Badge variant="outline">{topup.status}</Badge>
 												)}
@@ -203,16 +203,18 @@ function MobileTopupDetails({ topup }: { topup: Topup }) {
 						View Details
 					</Button>
 				</Link>
-				<Badge
-					className={cn(
-						topup?.paid
-							? "text-green-500 bg-green-500/20"
-							: "text-yellow-500 bg-yellow-500/20",
-					)}
-					variant={topup.paid ? "outline" : "secondary"}
-				>
-					{topup.paid ? "Paid" : "Unpaid"}
-				</Badge>
+				{topup.status !== "CANCELLED" && (
+					<Badge
+						className={cn(
+							topup?.paid
+								? "text-green-500 bg-green-500/20"
+								: "text-yellow-500 bg-yellow-500/20",
+						)}
+						variant={topup.paid ? "outline" : "secondary"}
+					>
+						{topup.paid ? "Paid" : "Unpaid"}
+					</Badge>
+				)}
 			</div>
 			<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
 				<div className="block sm:hidden">