diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index eac3f7417..f88e75f2e 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -984,8 +984,6 @@ div.secondary-actions {
 }
 
 .site-about #content {
-  background-color: $lightgrey;
-
   .content-inner {
     max-width: 760px;
   }
diff --git a/app/views/site/about.html.erb b/app/views/site/about.html.erb
index 619094e56..7dbed1514 100644
--- a/app/views/site/about.html.erb
+++ b/app/views/site/about.html.erb
@@ -1,3 +1,4 @@
+<% content_for(:content_class) { "bg-body-secondary" } %>
 <% I18n.with_locale @locale do %>
   <%= tag.div :lang => @locale, :dir => t("html.dir") do %>
     <div class="container-lg attr">
@@ -11,13 +12,13 @@
         </div>
       </div>
       <div class='row'>
-        <div class="px-5 py-4 bg-dark">
+        <div class="px-5 py-4 bg-black bg-opacity-75">
           <h1 class="text-white fw-light"><%= t ".used_by_html", :name => tag.span("OpenStreetMap", :class => "user-name") %></h1>
         </div>
       </div>
     </div>
 
-    <div class='bg-white px-5 py-4'>
+    <div class='bg-body px-5 py-4'>
       <p class="lead"><%= t ".lede_text" %></p>
 
       <%= render :layout => "about_section", :locals => { :icon => "local", :title => "local_knowledge" } do %>