diff --git a/apps/web/components/dialog/ChargeCardDialog.tsx b/apps/web/components/dialog/ChargeCardDialog.tsx
index 0295f4ced4..6aa3eb086a 100644
--- a/apps/web/components/dialog/ChargeCardDialog.tsx
+++ b/apps/web/components/dialog/ChargeCardDialog.tsx
@@ -47,7 +47,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent>
         <div className="flex flex-row space-x-3">
-          <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
+          <div className=" bg-subtle flex h-10 w-10 flex-shrink-0 justify-center rounded-full">
             <CreditCard className="m-auto h-6 w-6" />
           </div>
           <div className="pt-1">