diff --git a/client/web/compose/src/components/Admin/Module/DalSchemaAlterations.vue b/client/web/compose/src/components/Admin/Module/DalSchemaAlterations.vue
index 59388bc29..ead73c045 100644
--- a/client/web/compose/src/components/Admin/Module/DalSchemaAlterations.vue
+++ b/client/web/compose/src/components/Admin/Module/DalSchemaAlterations.vue
@@ -12,6 +12,7 @@
       borderless
       sticky-header
       responsive
+      hover
       head-variant="light"
       class="mb-0"
       style="min-height: 300px; max-height: 75vh;"
@@ -41,7 +42,7 @@
           v-for="a in sortedAlterations"
           :key="a.alterationID"
           class="border-top"
-          :class="{ 'bg-gray': a.alterationID === dependOnHover }"
+          :class="{ 'bg-extra-light': a.alterationID === dependOnHover }"
           @mouseover="dependOnHover = a.dependsOn"
           @mouseleave="dependOnHover = undefined"
         >
@@ -72,7 +73,7 @@
               v-else-if="a.dependsOn"
               variant="extra-light"
             >
-              {{ $t('waitingFor', { id:a.dependsOn }) }}
+              {{ $t('waitingFor', { id: a.dependsOn }) }}
             </b-badge>
           </b-td>
 
diff --git a/client/web/compose/src/components/Public/Record/Modal.vue b/client/web/compose/src/components/Public/Record/Modal.vue
index f558aef4a..2efa7230b 100644
--- a/client/web/compose/src/components/Public/Record/Modal.vue
+++ b/client/web/compose/src/components/Public/Record/Modal.vue
@@ -5,7 +5,7 @@
     scrollable
     dialog-class="h-100 mw-90"
     content-class="card position-initial"
-    body-class="p-0 bg-gray"
+    body-class="p-0"
     footer-class="p-0"
     size="xl"
     @hidden="onHidden"
@@ -229,9 +229,15 @@ export default {
   position: initial;
 }
 
-#record-modal .modal-header {
-  h5 {
-    min-height: 27px;
+#record-modal {
+  .modal-header {
+    h5 {
+      min-height: 27px;
+    }
+  }
+
+  .modal-body {
+    background-color: var(--body-bg);
   }
 }
 </style>