diff --git a/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.tsx b/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.tsx
index 12e6b3e4661d..2b76feb64882 100644
--- a/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.tsx
+++ b/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.tsx
@@ -47,7 +47,11 @@ const Commitment = ({
rounded
inline
variant={ODS_TILE_VARIANT.stroked}
- className="flex flex-row items-center mr-5 my-4 justify-between w-full cursor-pointer"
+ className={`flex flex-row items-center mr-5 my-4 justify-between w-full cursor-pointer ${
+ isActive
+ ? 'bg-[--ods-color-blue-100] border-[--ods-color-blue-600]'
+ : ''
+ }`}
color={
isActive
? ODS_THEME_COLOR_INTENT.primary
@@ -59,7 +63,10 @@ const Commitment = ({
{t('commitment_month', { value: duration })}
-
+
{diffInPercent ? `- ${diffInPercent} %` : ''}
@@ -75,8 +82,7 @@ const Commitment = ({
)}
{getTextPrice(priceNumber * CENTS_PRICE)}