diff --git a/src/pages-and-resources/pages/PageCard.jsx b/src/pages-and-resources/pages/PageCard.jsx
index 4c5120d35..a37e53437 100644
--- a/src/pages-and-resources/pages/PageCard.jsx
+++ b/src/pages-and-resources/pages/PageCard.jsx
@@ -28,7 +28,7 @@ function PageCard({ intl, page }) {
   const pageStatusMsgId = page.isEnabled ? 'pageStatus.enabled' : 'pageStatus.disabled';
   const componentClasses = classNames(
     'd-flex flex-column align-content-stretch',
-    'bg-white p-3 border shadow',
+    'bg-light-100 p-3 border shadow',
     { 'border-gray-500': page.isEnabled, 'border-gray-100': !page.isEnabled },
   );
 
diff --git a/src/pages-and-resources/resources/ResourcesList.jsx b/src/pages-and-resources/resources/ResourcesList.jsx
index d212c3523..8b1dfd560 100644
--- a/src/pages-and-resources/resources/ResourcesList.jsx
+++ b/src/pages-and-resources/resources/ResourcesList.jsx
@@ -9,7 +9,7 @@ function ResourceList({ intl, resources }) {
   return (
     <div>
       <h3 className="text-info-500">{intl.formatMessage(messages['resources.subheading'])}</h3>
-      <div className="row bg-white text-info-500 border shadow justify-content-center align-items-center my-3 mx-1">
+      <div className="row bg-light-100 text-info-500 border shadow justify-content-center align-items-center my-3 mx-1">
         <div className="col-1 font-weight-bold">{intl.formatMessage(messages['resources.custom.title'])}</div>
         <div className="col-8 my-3">
           {intl.formatMessage(messages['resources.custom.description'])}