diff --git a/src/views/elevation/ElevationDemo.vue b/src/views/elevation/ElevationDemo.vue
index 1f4ceffcb..21324a5f9 100644
--- a/src/views/elevation/ElevationDemo.vue
+++ b/src/views/elevation/ElevationDemo.vue
@@ -11,7 +11,7 @@
         <div class="content-section implementation">
             <div class="p-grid">
                 <div class="p-col" v-for="index in 24" :key="index">
-                    <div :class="['box', 'p-shadow-' + index]">
+                    <div :class="['shadow-box', 'p-shadow-' + index]">
                         p-shadow-{{index}}
                     </div>
                 </div>
@@ -33,7 +33,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.box {
+.shadow-box {
     min-height: 100px;
     min-width: 150px;
     display: flex;
@@ -42,5 +42,6 @@ export default {
     font-weight: 600;
     margin: 2rem;
     border-radius: 4px;
+    background-color: var(--surface-e);
 }
 </style>
\ No newline at end of file
diff --git a/src/views/elevation/ElevationDoc.vue b/src/views/elevation/ElevationDoc.vue
index 5c4020a44..c38a71cd2 100644
--- a/src/views/elevation/ElevationDoc.vue
+++ b/src/views/elevation/ElevationDoc.vue
@@ -29,7 +29,7 @@ export default {
     <div>
         <div class="p-grid">
             <div class="p-col" v-for="index in 24" :key="index">
-                <div :class="['box', 'p-shadow-' + index]">
+                <div :class="['shadow-box', 'p-shadow-' + index]">
                     p-shadow-{{index}}
                 </div>
             </div>
@@ -43,7 +43,7 @@ export default {
 <\\/script>
 
 <style lang="scss" scoped>
-.box {
+.shadow-box {
     min-height: 100px;
     min-width: 150px;
     display: flex;
@@ -52,6 +52,7 @@ export default {
     font-weight: 600;
     margin: 2rem;
     border-radius: 4px;
+    background-color: var(--surface-e);
 }
 </style>                    
 `
@@ -63,7 +64,7 @@ export default {
     <div>
         <div class="p-grid">
             <div class="p-col" v-for="index in 24" :key="index">
-                <div :class="['box', 'p-shadow-' + index]">
+                <div :class="['shadow-box', 'p-shadow-' + index]">
                     p-shadow-{{index}}
                 </div>
             </div>
@@ -77,7 +78,7 @@ export default {
 <\\/script>
 
 <style lang="scss" scoped>
-.box {
+.shadow-box {
     min-height: 100px;
     min-width: 150px;
     display: flex;
@@ -86,6 +87,7 @@ export default {
     font-weight: 600;
     margin: 2rem;
     border-radius: 4px;
+    background-color: var(--surface-e);
 }
 </style>                    
 `