diff --git a/demo/src/app/default/default.component.html b/demo/src/app/default/default.component.html
index 1fcde6069e..ea05c355fd 100644
--- a/demo/src/app/default/default.component.html
+++ b/demo/src/app/default/default.component.html
@@ -27,9 +27,9 @@ <h3 class="text-secondary mb-3">The angular way</h3>
 </main>
 
 <div class="masthead-followup">
-	<div class="row m-0 border border-secondary">
+	<div class="row m-0 border" style="--bs-border-color: var(--bs-body-bg)">
 		<div
-			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border border-secondary d-flex flex-column align-items-center align-items-md-start"
+			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border d-flex flex-column align-items-center align-items-md-start"
 		>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
@@ -54,7 +54,7 @@ <h3>Native</h3>
 		</div>
 
 		<div
-			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border border-secondary d-flex flex-column align-items-center align-items-md-start"
+			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border d-flex flex-column align-items-center align-items-md-start"
 		>
 			<svg
 				fill="currentColor"
@@ -83,7 +83,7 @@ <h3>Widgets</h3>
 		</div>
 
 		<div
-			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border border-secondary d-flex flex-column align-items-center align-items-md-start"
+			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border d-flex flex-column align-items-center align-items-md-start"
 		>
 			<svg
 				fill="currentColor"
@@ -109,7 +109,7 @@ <h3>Quality</h3>
 		<div class="w-100"></div>
 
 		<div
-			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border border-secondary d-flex flex-column align-items-center align-items-md-start"
+			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border d-flex flex-column align-items-center align-items-md-start"
 		>
 			<svg
 				fill="currentColor"
@@ -134,7 +134,7 @@ <h3>Accessible</h3>
 		</div>
 
 		<div
-			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border border-secondary d-flex flex-column align-items-center align-items-md-start"
+			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border d-flex flex-column align-items-center align-items-md-start"
 		>
 			<svg
 				fill="currentColor"
@@ -160,7 +160,7 @@ <h3>Team</h3>
 		</div>
 
 		<div
-			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border border-secondary d-flex flex-column align-items-center align-items-md-start"
+			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border d-flex flex-column align-items-center align-items-md-start"
 		>
 			<svg
 				fill="currentColor"
diff --git a/src/datepicker/datepicker-month.scss b/src/datepicker/datepicker-month.scss
index b824956395..4f3f6067ea 100644
--- a/src/datepicker/datepicker-month.scss
+++ b/src/datepicker/datepicker-month.scss
@@ -19,7 +19,7 @@ ngb-datepicker-month {
 	&-weekdays {
 		border-bottom: 1px solid var(--bs-border-color);
 		border-radius: 0;
-		background-color: var(--bs-secondary-bg);
+		background-color: var(--bs-tertiary-bg);
 	}
 	&-day,
 	&-weekday,
diff --git a/src/datepicker/datepicker.scss b/src/datepicker/datepicker.scss
index 99e4c0f5b6..2d5e0dbbb3 100644
--- a/src/datepicker/datepicker.scss
+++ b/src/datepicker/datepicker.scss
@@ -29,7 +29,7 @@ ngb-datepicker {
 		border-bottom: 0;
 		border-radius: 0.25rem 0.25rem 0 0;
 		padding-top: 0.25rem;
-		background-color: var(--bs-secondary-bg);
+		background-color: var(--bs-tertiary-bg);
 	}
 
 	&-months {
@@ -44,7 +44,7 @@ ngb-datepicker {
 			height: 2rem;
 			line-height: 2rem;
 			text-align: center;
-			background-color: var(--bs-secondary-bg);
+			background-color: var(--bs-tertiary-bg);
 		}
 
 		& + & {