diff --git a/src/app/subscription/components/__tests__/tailwind-components.test.tsx b/src/app/subscription/components/__tests__/tailwind-components.test.tsx
index feb010c7..a5b5e4d3 100644
--- a/src/app/subscription/components/__tests__/tailwind-components.test.tsx
+++ b/src/app/subscription/components/__tests__/tailwind-components.test.tsx
@@ -62,11 +62,16 @@ describe("subscription Tailwind components", () => {
     expect(html.indexOf('aria-label="GCash"')).toBeLessThan(
       html.indexOf('aria-label="Stripe"'),
     );
-    expect(html).toContain('aria-pressed="true"');
-    expect(html).toContain("border-[#d92f7f]");
-    expect(html).toContain("bg-[#fff4f9]");
-    expect(html).toContain("0_0_0_3px_rgba(217,47,127,0.18)");
-    expect(html).toContain("-translate-y-0.5");
+    const selectedButton = html.match(
+      /<button[^>]*aria-pressed="true"[^>]*>/,
+    )?.[0];
+    expect(selectedButton).toBeDefined();
+    expect(selectedButton).toContain("border-[#f657a0]");
+    expect(selectedButton).not.toContain("border-[rgba(246,87,160,0.18)]");
+    expect(selectedButton).toContain("bg-[#fff4f9]");
+    expect(selectedButton).not.toContain("bg-white");
+    expect(selectedButton).toContain("0_0_0_3px_rgba(217,47,127,0.18)");
+    expect(selectedButton).toContain("-translate-y-0.5");
     expect(html).toContain("/images/subscription/gcash-logo.svg");
   });
 
diff --git a/src/app/subscription/components/subscription-payment-method.tsx b/src/app/subscription/components/subscription-payment-method.tsx
index 88f9ebe3..46ce88e2 100644
--- a/src/app/subscription/components/subscription-payment-method.tsx
+++ b/src/app/subscription/components/subscription-payment-method.tsx
@@ -63,10 +63,10 @@ export function SubscriptionPaymentMethod({
         {paymentMethods.map((method) => {
           const selected = method.channel === value;
           const classes = [
-            "flex min-h-[clamp(54px,11.481vw,62px)] cursor-pointer items-center justify-center rounded-(--responsive-card-radius-sm,18px) border border-[rgba(246,87,160,0.18)] bg-white px-[clamp(12px,2.593vw,14px)] py-[clamp(9px,1.852vw,10px)] text-center font-[inherit] text-[#3c3b3b] shadow-[0_5px_7px_0_rgba(247,89,168,0.08)] transition-[border-color,box-shadow,transform] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-accent) active:enabled:scale-98 disabled:cursor-not-allowed disabled:opacity-72",
+            "flex min-h-[clamp(54px,11.481vw,62px)] cursor-pointer items-center justify-center rounded-(--responsive-card-radius-sm,18px) px-[clamp(12px,2.593vw,14px)] py-[clamp(9px,1.852vw,10px)] text-center font-[inherit] text-[#3c3b3b] transition-[border-color,box-shadow,transform] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-accent) active:enabled:scale-98 disabled:cursor-not-allowed disabled:opacity-72",
             selected
-              ? "border-2 border-[#d92f7f] bg-[#fff4f9] shadow-[0_8px_18px_rgba(217,47,127,0.24),0_0_0_3px_rgba(217,47,127,0.18)] -translate-y-0.5"
-              : "",
+              ? "border-2 border-[#f657a0] bg-[#fff4f9] shadow-[0_8px_18px_rgba(217,47,127,0.24),0_0_0_3px_rgba(217,47,127,0.18)] -translate-y-0.5"
+              : "border border-[rgba(246,87,160,0.18)] bg-white shadow-[0_5px_7px_0_rgba(247,89,168,0.08)]",
           ]
             .filter(Boolean)
             .join(" ");