diff --git a/app/(dashboard)/top-ups/[topupId]/page.tsx b/app/(dashboard)/top-ups/[topupId]/page.tsx
index 62a8fd3..c981875 100644
--- a/app/(dashboard)/top-ups/[topupId]/page.tsx
+++ b/app/(dashboard)/top-ups/[topupId]/page.tsx
@@ -20,53 +20,62 @@ export default async function TopupPage({
     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 && (
-
-            <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?.paid ? <span>Paid</span> : <TextShimmer>Payment Pending</TextShimmer>}
+          {!topup.is_expired ||
+            (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?.paid ? <span>Paid</span> : ""}
+              </Button>
+            ))}
+          {topup.status === "PENDING" && !topup.is_expired && (
+            <Button>
+              <TextShimmer>Payment Pending</TextShimmer>{" "}
             </Button>
           )}
 
-          {!topup.paid && (
-            topup.is_expired ? (
+          {!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 && (
-        <ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
-      )}
+      {
+        (!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}
+          disabled={topup.paid || topup.is_expired || topup.status === "CANCELLED"}
           topup={topup || undefined}
         />
       </div>
-    </div>
+    </div >
   );
 }
diff --git a/components/topup-to-pay.tsx b/components/topup-to-pay.tsx
index 8c81780..012895d 100644
--- a/components/topup-to-pay.tsx
+++ b/components/topup-to-pay.tsx
@@ -7,7 +7,10 @@ import {
 } from "lucide-react";
 import { useActionState, useEffect, useState } from "react";
 import { toast } from "sonner";
-import { type VerifyTopupPaymentState, verifyTopupPayment } from "@/actions/payment";
+import {
+	type VerifyTopupPaymentState,
+	verifyTopupPayment,
+} from "@/actions/payment";
 import {
 	Table,
 	TableBody,
@@ -19,15 +22,22 @@ import {
 import type { Topup } from "@/lib/backend-types";
 import { Button } from "./ui/button";
 
-
-
 const initialState: VerifyTopupPaymentState = {
 	message: "",
 	success: false,
 	fieldErrors: {},
 };
-export default function TopupToPay({ topup, disabled }: { topup?: Topup, disabled?: boolean }) {
-	const [state, formAction, isPending] = useActionState(verifyTopupPayment, initialState);
+export default function TopupToPay({
+	topup,
+	disabled,
+}: {
+	topup?: Topup;
+	disabled?: boolean;
+}) {
+	const [state, formAction, isPending] = useActionState(
+		verifyTopupPayment,
+		initialState,
+	);
 
 	// Handle toast notifications based on state changes
 	useEffect(() => {
@@ -38,7 +48,11 @@ export default function TopupToPay({ topup, disabled }: { topup?: Topup, disable
 					? `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) {
+		} else if (
+			!state.success &&
+			state.message &&
+			state.message !== initialState.message
+		) {
 			toast.error("Topup Payment Verification Failed", {
 				closeButton: true,
 				description: state.message,
@@ -69,16 +83,18 @@ export default function TopupToPay({ topup, disabled }: { topup?: Topup, disable
 							) : (
 								<div className="flex flex-col gap-2">
 									<form action={formAction}>
-										<input type="hidden" name="topupId" value={topup?.id ?? ""} />
+										<input
+											type="hidden"
+											name="topupId"
+											value={topup?.id ?? ""}
+										/>
 										<Button
 											disabled={disabled || isPending}
 											type="submit"
 											size={"lg"}
-											className="mb-4"
+											className="mb-4 w-full"
 										>
-											{isPending
-												? "Processing payment..."
-												: "I have paid"}
+											{isPending ? "Processing payment..." : "I have paid"}
 											{isPending ? (
 												<Loader2 className="animate-spin" />
 											) : (
@@ -86,7 +102,6 @@ export default function TopupToPay({ topup, disabled }: { topup?: Topup, disable
 											)}
 										</Button>
 									</form>
-
 								</div>
 							)}
 						</div>
@@ -150,32 +165,43 @@ function AccountInfomation({
 }) {
 	const [accNo, setAccNo] = useState(false);
 	return (
-		<div className="justify-start items-start border my-4 flex flex-col gap-2 p-2 rounded-md">
+		<div className="justify-center items-center border my-4 flex flex-col gap-2 p-2 rounded-md">
 			<h6 className="title-bg uppercase p-2 border rounded w-full font-semibold">
 				Account Information
 			</h6>
-			<div className="border justify-start flex flex-col items-start bg-white/10 w-full p-2 rounded">
+			<div className="border justify-center flex flex-col items-center bg-white/10 w-full p-2 rounded">
 				<div className="text-sm font-semibold">Account Name</div>
 				<span>{accName}</span>
 			</div>
-			<div className="border flex justify-between items-start gap-2  bg-white/10 w-full p-2 rounded">
-				<div className="flex flex-col items-start justify-start">
+			<div className="border flex justify-between items-center gap-2 w-full p-2 rounded">
+				<div className="flex flex-col items-center justify-center w-full">
 					<p className="text-sm font-semibold">Account No</p>
 					<span>{accountNo}</span>
+					<Button
+						onClick={() => {
+							setTimeout(() => {
+								setAccNo(true);
+								navigator.clipboard.writeText(accountNo);
+							}, 2000);
+							toast.success("Account number copied!");
+							setAccNo((prev) => !prev);
+						}}
+						className="mt-2 w-full"
+						variant={"secondary"}
+					>
+						{accNo ? (
+							<div className="flex items-center gap-2">
+								<span>Copy Account Number</span>
+								<ClipboardCheck />
+							</div>
+						) : (
+							<div className="flex items-center gap-2">
+								<span>Copy Account Number</span>
+								<ClipboardCheck color="green" />
+							</div>
+						)}
+					</Button>
 				</div>
-				<Button
-					onClick={() => {
-						setTimeout(() => {
-							setAccNo(true);
-							navigator.clipboard.writeText(accountNo);
-						}, 2000);
-						toast.success("Account number copied!");
-						setAccNo((prev) => !prev);
-					}}
-					variant={"link"}
-				>
-					{accNo ? <Clipboard /> : <ClipboardCheck color="green" />}
-				</Button>
 			</div>
 		</div>
 	);