diff --git a/payments/templates/pages/payment-cancel.html b/payments/templates/pages/payment-cancel.html
index 83da017..8d107fd 100644
--- a/payments/templates/pages/payment-cancel.html
+++ b/payments/templates/pages/payment-cancel.html
@@ -2,11 +2,20 @@
 
 {% block title %}{{ _("Payment Cancelled") }}{% endblock %}
 
-{%- block header -%}
-<h2>{{ _("Payment Cancelled") }}<h2>
-{% endblock %}
-
 {%- block page_content -%}
-<p>{{ _("You have cancelled the payment") }}</p>
-<p><br><a href="/">Back to home page</a></p>
+<div class='page-card'>
+	<div class='page-card-head'>
+		<span class='indicator red'>
+			{{ _("Payment Cancelled") }}</span>
+	</div>
+	<p>{{ _("Your payment is cancelled.") }}</p>
+	<div><a href='{{ frappe.form_dict.redirect_to or "/" }}' class='btn btn-primary btn-sm'>
+		{{ _("Continue") }}</a></div>
+</div>
+<style>
+.hero-and-content {
+	background-color: #f5f7fa;
+}
+</style>
+
 {% endblock %}
diff --git a/payments/templates/pages/payment-failed.html b/payments/templates/pages/payment-failed.html
index 92f676b..570785f 100644
--- a/payments/templates/pages/payment-failed.html
+++ b/payments/templates/pages/payment-failed.html
@@ -2,11 +2,20 @@
 
 {% block title %}{{ _("Payment Failed") }}{% endblock %}
 
-{%- block header -%}
-<h2>{{ _("Payment Failed") }}<h2>
-{% endblock %}
-
 {%- block page_content -%}
-<p class="lead">{{ _("Oops. Your payment has failed.") }}</p>
-<p><a href="{{ frappe.form_dict.redirect_to or "/" }}" class="btn btn-primary">{{ frappe.form_dict.redirect_message or _("Continue") }}</a></p>
+<div class='page-card'>
+	<div class='page-card-head'>
+		<span class='indicator red'>
+			{{ _("Payment Failed") }}</span>
+	</div>
+	<p>{{ _("Your payment has failed.") }}</p>
+	<div><a href='{{ frappe.form_dict.redirect_to or "/" }}' class='btn btn-primary btn-sm'>
+		{{ _("Continue") }}</a></div>
+</div>
+<style>
+.hero-and-content {
+	background-color: #f5f7fa;
+}
+</style>
+
 {% endblock %}
diff --git a/payments/templates/pages/payment-success.html b/payments/templates/pages/payment-success.html
index ee1dc49..3572584 100644
--- a/payments/templates/pages/payment-success.html
+++ b/payments/templates/pages/payment-success.html
@@ -2,12 +2,19 @@
 
 {% block title %}{{ _("Payment Success") }}{% endblock %}
 
-{%- block header -%}
-<h2>{{ _("Payment Success") }}</h2>
-{% endblock %}
-
 {%- block page_content -%}
-<p class="lead">{{ _("Your payment was successfully accepted") }}</p>
-<p><a href="{{ frappe.form_dict.redirect_to or "/" }}"
-	class="btn btn-primary">{{ frappe.form_dict.redirect_message or _("Continue") }}</a></p>
+<div class='page-card'>
+	<div class='page-card-head'>
+		<span class='indicator green'>
+			{{ _("Success") }}</span>
+	</div>
+	<p>{{ _("Your payment was successfully accepted") }}</p>
+	<div><a href='{{ frappe.form_dict.redirect_to or "/" }}' class='btn btn-primary btn-sm'>
+		{{ _("Continue") }}</a></div>
+</div>
+<style>
+.hero-and-content {
+	background-color: #f5f7fa;
+}
+</style>
 {% endblock %}