diff --git a/app/(dashboard)/top-ups/[topupId]/page.tsx b/app/(dashboard)/top-ups/[topupId]/page.tsx
index 8bc9827..a36e23f 100644
--- a/app/(dashboard)/top-ups/[topupId]/page.tsx
+++ b/app/(dashboard)/top-ups/[topupId]/page.tsx
@@ -9,72 +9,72 @@ import { TextShimmer } from "@/components/ui/text-shimmer";
 import { cn } from "@/lib/utils";
 import { tryCatch } from "@/utils/tryCatch";
 export default async function TopupPage({
-	params,
+  params,
 }: {
-	params: Promise<{ topupId: string }>;
+  params: Promise<{ topupId: string }>;
 }) {
-	const topupId = (await params).topupId;
-	const [error, topup] = await tryCatch(getTopup({ id: topupId }));
-	if (error) {
-		if (error.message === "Invalid token.") redirect("/auth/signin");
-		return <ClientErrorMessage message={error.message} />;
-	}
+  const topupId = (await params).topupId;
+  const [error, topup] = await tryCatch(getTopup({ id: topupId }));
+  if (error) {
+    if (error.message === "Invalid token.") redirect("/auth/signin");
+    return <ClientErrorMessage message={error.message} />;
+  }
 
-	return (
-		<div>
-			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2">
-				<h3 className="text-sarLinkOrange text-2xl">Topup</h3>
-				<div className="flex flex-col gap-4 items-end w-full">
-					{!topup.is_expired && topup.paid && topup.status !== "PENDING" && (
-						<Button
-							disabled
-							className={cn(
-								"rounded-md opacity-100! uppercase font-semibold",
-								topup?.paid
-									? "text-green-900 bg-green-500/20"
-									: "text-inherit bg-yellow-400",
-							)}
-						>
-							{topup.status}
-						</Button>
-					)}
-					{topup.status === "PENDING" && !topup.is_expired && (
-						<Button>
-							<TextShimmer>Payment Pending</TextShimmer>{" "}
-						</Button>
-					)}
+  return (
+    <div>
+      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2">
+        <h3 className="text-sarLinkOrange text-2xl">Topup</h3>
+        <div className="flex flex-col gap-4 items-end w-full">
+          {!topup.is_expired && topup.paid && topup.status !== "PENDING" && (
+            <Button
+              disabled
+              className={cn(
+                "rounded-md opacity-100! uppercase font-semibold",
+                topup?.paid
+                  ? "text-green-900 bg-green-500/20"
+                  : "text-inherit bg-yellow-400",
+              )}
+            >
+              {topup.status}
+            </Button>
+          )}
+          {topup.status === "PENDING" && !topup.is_expired && (
+            <Button>
+              <TextShimmer>Payment Pending</TextShimmer>{" "}
+            </Button>
+          )}
 
-					{!topup.paid &&
-						(topup.is_expired ? (
-							<Button
-								disabled
-								className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
-							>
-								Topup Expired
-							</Button>
-						) : topup.status === "PENDING" ? (
-							<CancelTopupButton topupId={topupId} />
-						) : topup.status === "CANCELLED" ? (
-							<Button disabled>Topup Cancelled</Button>
-						) : (
-							""
-						))}
-				</div>
-			</div>
-			{!topup.paid && topup.status === "PENDING" && !topup.is_expired && (
-				<ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
-			)}
-			<div
-				id="user-topup-details"
-				className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
-			>
-				<TopupToPay
-					disabled={
-						topup.paid || topup.is_expired || topup.status === "CANCELLED"
-					}
-					topup={topup || undefined}
-				/>
-			</div>
-		</div>
-	);
+          {!topup.paid &&
+            (topup.is_expired ? (
+              <Button
+                disabled
+                className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
+              >
+                Topup Expired
+              </Button>
+            ) : topup.status === "PENDING" ? (
+              <CancelTopupButton topupId={topupId} />
+            ) : topup.status === "CANCELLED" ? (
+              <Button disabled>Topup Cancelled</Button>
+            ) : (
+              ""
+            ))}
+        </div>
+      </div>
+      {!topup.paid && topup.status === "PENDING" && !topup.is_expired && (
+        <ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
+      )}
+      <div
+        id="user-topup-details"
+        className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+      >
+        <TopupToPay
+          disabled={
+            topup.paid || topup.is_expired || topup.status === "CANCELLED"
+          }
+          topup={topup || undefined}
+        />
+      </div>
+    </div>
+  );
 }
diff --git a/components/topup-to-pay.tsx b/components/topup-to-pay.tsx
index 02f69af..9c8ba25 100644
--- a/components/topup-to-pay.tsx
+++ b/components/topup-to-pay.tsx
@@ -3,151 +3,155 @@ import { BadgeDollarSign, Loader2 } from "lucide-react";
 import { useActionState, useEffect } from "react";
 import { toast } from "sonner";
 import {
-	type VerifyTopupPaymentState,
-	verifyTopupPayment,
+  type VerifyTopupPaymentState,
+  verifyTopupPayment,
 } from "@/actions/payment";
 import {
-	Table,
-	TableBody,
-	TableCaption,
-	TableCell,
-	TableFooter,
-	TableRow,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableRow,
 } from "@/components/ui/table";
 import type { Topup } from "@/lib/backend-types";
 import { AccountInfomation } from "./account-information";
 import { Button } from "./ui/button";
 
 const initialState: VerifyTopupPaymentState = {
-	message: "",
-	success: false,
-	fieldErrors: {},
+  message: "",
+  success: false,
+  fieldErrors: {},
 };
 export default function TopupToPay({
-	topup,
-	disabled,
+  topup,
+  disabled,
 }: {
-	topup?: Topup;
-	disabled?: boolean;
+  topup?: Topup;
+  disabled?: boolean;
 }) {
-	const [state, formAction, isPending] = useActionState(
-		verifyTopupPayment,
-		initialState,
-	);
+  const [state, formAction, isPending] = useActionState(
+    verifyTopupPayment,
+    initialState,
+  );
 
-	// Handle toast notifications based on state changes
-	useEffect(() => {
-		if (state.success && state.message) {
-			toast.success("Topup successful!", {
-				closeButton: true,
-				description: state.transaction
-					? `Your topup payment has been verified successfully using ${state.transaction.sourceBank} bank transfer on ${state.transaction.trxDate}.`
-					: state.message,
-			});
-		} else if (
-			!state.success &&
-			state.message &&
-			state.message !== initialState.message
-		) {
-			toast.error("Topup Payment Verification Failed", {
-				closeButton: true,
-				description: state.message,
-			});
-		}
-	}, [state]);
+  // Handle toast notifications based on state changes
+  useEffect(() => {
+    if (state.success && state.message) {
+      toast.success("Topup successful!", {
+        closeButton: true,
+        description: state.transaction
+          ? `Your topup payment has been verified successfully using ${state.transaction.sourceBank} bank transfer on ${state.transaction.trxDate}.`
+          : state.message,
+      });
+    } else if (
+      !state.success &&
+      state.message &&
+      state.message !== initialState.message
+    ) {
+      toast.error("Topup Payment Verification Failed", {
+        closeButton: true,
+        description: state.message,
+      });
+    }
+  }, [state]);
 
-	return (
-		<div className="w-full">
-			<div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
-				<Table>
-					<TableCaption>
-						<div className="max-w-sm mx-auto">
-							<p>Please send the following amount to the payment address</p>
-							<AccountInfomation
-								accName="Baraveli Dev"
-								accountNo="90101400028321000"
-							/>
-							{topup?.paid ? (
-								<Button
-									size={"lg"}
-									variant={"secondary"}
-									disabled
-									className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold"
-								>
-									Topup Payment Verified
-								</Button>
-							) : (
-								<div className="flex flex-col gap-2">
-									<form action={formAction}>
-										<input
-											type="hidden"
-											name="topupId"
-											value={topup?.id ?? ""}
-										/>
-										<Button
-											disabled={disabled || isPending}
-											type="submit"
-											size={"lg"}
-											className="mb-4 w-full"
-										>
-											{isPending ? "Processing payment..." : "I have paid"}
-											{isPending ? (
-												<Loader2 className="animate-spin" />
-											) : (
-												<BadgeDollarSign />
-											)}
-										</Button>
-									</form>
-								</div>
-							)}
-						</div>
-					</TableCaption>
-					<TableBody className="">
-						<TableRow>
-							<TableCell>Topup created</TableCell>
-							<TableCell className="text-right text-muted-foreground">
-								{new Date(topup?.created_at ?? "").toLocaleDateString("en-US", {
-									month: "short",
-									day: "2-digit",
-									year: "numeric",
-									minute: "2-digit",
-									hour: "2-digit",
-									second: "2-digit",
-								})}
-							</TableCell>
-						</TableRow>
-						<TableRow>
-							<TableCell>Payment received</TableCell>
-							<TableCell className="text-right text-sarLinkOrange">
-								{topup?.paid_at
-									? new Date(topup.paid_at).toLocaleDateString("en-US", {
-											month: "short",
-											day: "2-digit",
-											year: "numeric",
-											minute: "2-digit",
-											hour: "2-digit",
-											second: "2-digit",
-										})
-									: "-"}
-							</TableCell>
-						</TableRow>
-						<TableRow>
-							<TableCell>MIB Reference</TableCell>
-							<TableCell className="text-right">
-								{topup?.mib_reference ? topup.mib_reference : "-"}
-							</TableCell>
-						</TableRow>
-					</TableBody>
-					<TableFooter>
-						<TableRow className="">
-							<TableCell colSpan={1}>Total Due</TableCell>
-							<TableCell className="text-right text-3xl font-bold">
-								{topup?.amount?.toFixed(2)}
-							</TableCell>
-						</TableRow>
-					</TableFooter>
-				</Table>
-			</div>
-		</div>
-	);
+  return (
+    <div className="w-full">
+      <div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
+        <Table>
+          <TableCaption>
+            {!topup?.paid ||
+              topup?.is_expired ||
+              (topup?.status !== "CANCELLED" && (
+                <div className="max-w-sm mx-auto">
+                  <p>Please send the following amount to the payment address</p>
+                  <AccountInfomation
+                    accName="Baraveli Dev"
+                    accountNo="90101400028321000"
+                  />
+                  {topup?.paid ? (
+                    <Button
+                      size={"lg"}
+                      variant={"secondary"}
+                      disabled
+                      className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold"
+                    >
+                      Topup Payment Verified
+                    </Button>
+                  ) : (
+                    <div className="flex flex-col gap-2">
+                      <form action={formAction}>
+                        <input
+                          type="hidden"
+                          name="topupId"
+                          value={topup?.id ?? ""}
+                        />
+                        <Button
+                          disabled={disabled || isPending}
+                          type="submit"
+                          size={"lg"}
+                          className="mb-4 w-full"
+                        >
+                          {isPending ? "Processing payment..." : "I have paid"}
+                          {isPending ? (
+                            <Loader2 className="animate-spin" />
+                          ) : (
+                            <BadgeDollarSign />
+                          )}
+                        </Button>
+                      </form>
+                    </div>
+                  )}
+                </div>
+              ))}
+          </TableCaption>
+          <TableBody className="">
+            <TableRow>
+              <TableCell>Topup created</TableCell>
+              <TableCell className="text-right text-muted-foreground">
+                {new Date(topup?.created_at ?? "").toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "2-digit",
+                  year: "numeric",
+                  minute: "2-digit",
+                  hour: "2-digit",
+                  second: "2-digit",
+                })}
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>Payment received</TableCell>
+              <TableCell className="text-right text-sarLinkOrange">
+                {topup?.paid_at
+                  ? new Date(topup.paid_at).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "2-digit",
+                      year: "numeric",
+                      minute: "2-digit",
+                      hour: "2-digit",
+                      second: "2-digit",
+                    })
+                  : "-"}
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>MIB Reference</TableCell>
+              <TableCell className="text-right">
+                {topup?.mib_reference ? topup.mib_reference : "-"}
+              </TableCell>
+            </TableRow>
+          </TableBody>
+          <TableFooter>
+            <TableRow className="">
+              <TableCell colSpan={1}>Total Due</TableCell>
+              <TableCell className="text-right text-3xl font-bold">
+                {topup?.amount?.toFixed(2)}
+              </TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </div>
+    </div>
+  );
 }