diff --git a/src/pages/_includes/marketing/sections/testimonials.html b/src/pages/_includes/marketing/sections/testimonials.html
index 82a9735dc..036f2074d 100644
--- a/src/pages/_includes/marketing/sections/testimonials.html
+++ b/src/pages/_includes/marketing/sections/testimonials.html
@@ -18,7 +18,7 @@
 					{% for testimonial in group %}
 					{% assign person = people[i] %}
 					<div class="col-12">
-						<a href="#" class="card bg-light">
+						<a href="#" class="card bg-body">
 							<div class="card-body">
 								<div class="row mb-3">
 									<div class="col-auto">{% include "ui/avatar.html" person=person size="md" %}</div>
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 01ed60a28..2c5f3f9c2 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -806,7 +806,7 @@ $popover-body-color: inherit !default;
 
 // Footer
 $footer-padding-y: 2rem !default;
-$footer-bg: $white !default;
+$footer-bg: var(--#{$prefix}bg-surface) !default;
 $footer-border-color: var(--#{$prefix}border-color) !default;
 $footer-color: var(--#{$prefix}gray-500) !default;
 
diff --git a/src/scss/marketing/_pricing.scss b/src/scss/marketing/_pricing.scss
index ed97c8ff8..dc8700f3e 100644
--- a/src/scss/marketing/_pricing.scss
+++ b/src/scss/marketing/_pricing.scss
@@ -15,7 +15,7 @@ $pricing-card-width: 22rem;
   flex: 1;
   display: flex;
   flex-direction: column;
-  background: $white;
+  background: var(--#{$prefix}bg-surface);
   border: 1px solid $border-color;
   padding: 2rem;
   margin: 0 0 1rem;