diff --git a/components/Profile/AddCreditCardButton/index.tsx b/components/Profile/AddCreditCardButton/index.tsx
index 8bc1ca7f9..f91fbe4ba 100644
--- a/components/Profile/AddCreditCardButton/index.tsx
+++ b/components/Profile/AddCreditCardButton/index.tsx
@@ -29,21 +29,27 @@ function useAddCardResultToast() {
     const error = searchParams.get("error")
 
     if (success) {
-      toast.success(
-        intl.formatMessage({ id: "Your card was successfully saved!" })
-      )
+      setTimeout(() => {
+        toast.success(
+          intl.formatMessage({ id: "Your card was successfully saved!" })
+        )
+      })
     } else if (cancel) {
-      toast.warning(
-        intl.formatMessage({
-          id: "You canceled adding a new credit card.",
-        })
-      )
+      setTimeout(() => {
+        toast.warning(
+          intl.formatMessage({
+            id: "You canceled adding a new credit card.",
+          })
+        )
+      })
     } else if (failure || error) {
-      toast.error(
-        intl.formatMessage({
-          id: "Something went wrong and we couldn't add your card. Please try again later.",
-        })
-      )
+      setTimeout(() => {
+        toast.error(
+          intl.formatMessage({
+            id: "Something went wrong and we couldn't add your card. Please try again later.",
+          })
+        )
+      })
     }
 
     router.replace(pathname)
diff --git a/components/TempDesignSystem/Toasts/toasts.module.css b/components/TempDesignSystem/Toasts/toasts.module.css
index 27ebcff09..5a9fc2ef5 100644
--- a/components/TempDesignSystem/Toasts/toasts.module.css
+++ b/components/TempDesignSystem/Toasts/toasts.module.css
@@ -9,7 +9,7 @@
   width: var(--width);
 }
 
-.message {
+.toast .message {
   padding: var(--Spacing-x2) var(--Spacing-x-one-and-half);
 }