diff --git a/contentcuration/contentcuration/frontend/shared/views/BottomBar.vue b/contentcuration/contentcuration/frontend/shared/views/BottomBar.vue
index 6cceeb228d..d0b6c51aa0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/BottomBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/BottomBar.vue
@@ -2,7 +2,7 @@
 
   <div
     class="bottom-bar pa-2"
-    :style="appearanceOverrides"
+    :style="bottomBarStyles"
   >
     <slot></slot>
   </div>
@@ -17,7 +17,16 @@
     props: {
       appearanceOverrides: {
         type: Object,
-        default: () => {},
+        default: () => ({}),
+      },
+    },
+    computed: {
+      bottomBarStyles() {
+        return {
+          backgroundColor: this.$themeTokens.surface,
+          borderTop: `1px solid ${this.$themeTokens.fineLine}`,
+          ...this.appearanceOverrides,
+        };
       },
     },
   };
@@ -36,8 +45,6 @@
     align-items: center;
     width: 100%;
     height: 64px;
-    background-color: #ffffff;
-    border-top: 1px solid #dddddd;
   }
 
 </style>