diff --git a/src/pages/offcanvas.html b/src/pages/offcanvas.html
index f443960efa..156f328000 100644
--- a/src/pages/offcanvas.html
+++ b/src/pages/offcanvas.html
@@ -27,7 +27,7 @@ <h2 class="offcanvas-title" id="offcanvas{{ direction | capitalize }}Label">{{ d
 			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda ea est, eum exercitationem fugiat illum itaque laboriosam magni necessitatibus, nemo nisi numquam quae reiciendis repellat sit soluta unde. Aut!
 		</div>
 		<div class="mt-3">
-			<button class="btn" type="button" data-bs-dismiss="offcanvas">
+			<button class="btn btn-primary" type="button" data-bs-dismiss="offcanvas">
 				Close offcanvas
 			</button>
 		</div>
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 2a1ed17633..d5f02853d1 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -767,6 +767,7 @@ $flag-sizes: $avatar-sizes !default;
 $payment-sizes: $avatar-sizes !default;
 
 // Offcanvas
+$offcanvas-bg-color: var(--#{$prefix}bg-surface) !default;
 $offcanvas-border-color: var(--#{$prefix}border-color-translucent) !default;
 
 // Placeholder
diff --git a/src/scss/ui/_offcanvas.scss b/src/scss/ui/_offcanvas.scss
index 6963489290..aa95164135 100644
--- a/src/scss/ui/_offcanvas.scss
+++ b/src/scss/ui/_offcanvas.scss
@@ -1,7 +1,3 @@
-.offcanvas {
-  background: var(--#{$prefix}card-bg);
-}
-
 .offcanvas-header {
   border-bottom: var(--#{$prefix}border-width) solid $border-color-translucent;
 }