diff --git a/assets/stylesheets/sections/_upgrades.scss b/assets/stylesheets/sections/_upgrades.scss
index 205d26cadf051..6ad65015dda4a 100644
--- a/assets/stylesheets/sections/_upgrades.scss
+++ b/assets/stylesheets/sections/_upgrades.scss
@@ -182,7 +182,6 @@
 		.plan-header {
 			float: left;
 			width: 100%;
-			height: 50px;
 			box-sizing: border-box;
 
 			.badge {
diff --git a/client/components/plans/plan-discount-message/index.jsx b/client/components/plans/plan-discount-message/index.jsx
index b6ec2c9067310..cfb2e7012eb08 100644
--- a/client/components/plans/plan-discount-message/index.jsx
+++ b/client/components/plans/plan-discount-message/index.jsx
@@ -42,9 +42,7 @@ module.exports = React.createClass( {
 	},
 
 	render: function() {
-		if ( this.planHasDiscount() ) {
-			return this.planDiscountMessage();
-		} else if ( this.showMostPopularMessage() ) {
+		if ( this.showMostPopularMessage() ) {
 			return this.mostPopularPlan();
 		}
 		return false;
diff --git a/client/components/plans/plan-header/style.scss b/client/components/plans/plan-header/style.scss
index c802e32e764d9..8f100cc50c539 100644
--- a/client/components/plans/plan-header/style.scss
+++ b/client/components/plans/plan-header/style.scss
@@ -34,7 +34,7 @@
 	.plan-header {
 		background: $white;
 		width: 100%;
-		padding: 24px 16px;
+		padding: 24px 16px 16px;
 		position: relative;
 		box-sizing: border-box;
 		cursor: pointer;
@@ -80,6 +80,10 @@
 			display: none;
 		}
 	}
+
+	@include breakpoint( "<480px" ) {
+		height: 70px;
+	}
 }
 
 .plans-compare {
@@ -140,7 +144,6 @@
 	.plan.card {
 		.plan-header {
 			float: left;
-			height: 70px;
 
 			.plan-header__title {
 				margin: -8px 0 0 0;
diff --git a/client/components/plans/plan-price/index.jsx b/client/components/plans/plan-price/index.jsx
index 2d03da356272e..a61d525202f6b 100644
--- a/client/components/plans/plan-price/index.jsx
+++ b/client/components/plans/plan-price/index.jsx
@@ -59,11 +59,11 @@ module.exports = React.createClass( {
 		if ( abtest( 'monthlyPlanPricing' ) === 'monthly' && this.props.isInSignup && plan.raw_price !== 0 ) {
 			periodLabel = this.translate( 'per month, billed yearly' );
 		} else {
-			periodLabel = hasDiscount ? this.translate( 'for first year' ) : plan.bill_period_label
+			periodLabel = hasDiscount ? this.translate( 'due today when you upgrade' ) : plan.bill_period_label
 		}
 
 		return (
-			<div className="plan-price">
+			<div className={ hasDiscount ? "plan-price plan-price__discount" : "plan-price" }>
 				<span>{ this.getPrice() }</span>
 				<small className="plan-price__billing-period">
 					{ periodLabel }
diff --git a/client/components/plans/plan-price/style.scss b/client/components/plans/plan-price/style.scss
index f9a65710c9c68..27086e59651a5 100644
--- a/client/components/plans/plan-price/style.scss
+++ b/client/components/plans/plan-price/style.scss
@@ -3,7 +3,6 @@
 	font-size: 14px;
 	font-weight: 400;
 	line-height: 20px;
-	text-align: right;
 }
 
 .plan-price__billing-period {
@@ -12,6 +11,11 @@
 	color: darken( $gray, 10% );
 }
 
+.plan-header .plan-price__discount,
+.plan-price__discount .plan-price__billing-period {
+	color: $alert-green;
+}
+
 .plan-price.is-placeholder {
 	@include placeholder( 23% );
 }
@@ -39,12 +43,15 @@
 		display: block;
 		opacity: .7;
 	}
+
+	.plan-price__discount {
+		color: $alert-green;
+	}
 }
 
 @mixin plans-collapsed() {
 	.plan-header .plan-price {
-		display: inline-block;
-		padding: 0 0 0 40px;
+		padding: 0 20px 0 40px;
 	}
 
 	.plan-price__billing-period {