diff --git a/app/(dashboard)/top-ups/page.tsx b/app/(dashboard)/top-ups/page.tsx
index 8b27ed9..ad41ebc 100644
--- a/app/(dashboard)/top-ups/page.tsx
+++ b/app/(dashboard)/top-ups/page.tsx
@@ -26,8 +26,8 @@ export default async function Topups({
         <DynamicFilter
           inputs={[
             {
-              label: "Paid",
-              name: "paid",
+              label: "Status",
+              name: "status",
               type: "radio-group",
               options: [
                 {
@@ -35,12 +35,16 @@ export default async function Topups({
                   value: "",
                 },
                 {
-                  label: "Paid",
-                  value: "true",
+                  label: "Pending",
+                  value: "PENDING",
                 },
                 {
-                  label: "Pending",
-                  value: "false",
+                  label: "Cancelled",
+                  value: "CANCELLED",
+                },
+                {
+                  label: "Paid",
+                  value: "PAID",
                 },
               ],
             },
diff --git a/components/topups-table.tsx b/components/topups-table.tsx
index 479c7a6..24aad7b 100644
--- a/components/topups-table.tsx
+++ b/components/topups-table.tsx
@@ -122,7 +122,13 @@ export async function TopupsTable({
 
 										<TableCell>
 											<span className="font-semibold pr-2">
-												{topup.is_expired ? <Badge>Expired</Badge> : <Badge variant="outline">{topup.status}</Badge>}
+												{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 variant="outline">{topup.status}</Badge>
+												)}
 											</span>
 										</TableCell>
 										<TableCell>
@@ -150,10 +156,7 @@ export async function TopupsTable({
 								</TableRow>
 							</TableFooter>
 						</Table>
-						<Pagination
-							totalPages={meta.total / meta.per_page}
-							currentPage={meta.current_page}
-						/>
+
 					</div>
 					<div className="sm:hidden block">
 						{data.map((topup) => (
@@ -161,8 +164,8 @@ export async function TopupsTable({
 						))}
 					</div>
 					<Pagination
-						totalPages={meta?.last_page}
-						currentPage={meta?.current_page}
+						totalPages={meta.total / meta.per_page}
+						currentPage={meta.current_page}
 					/>
 				</>
 			)}