diff --git a/front/src/components/common/Message.vue b/front/src/components/common/Message.vue
index b88f4dad1..c58ff7df9 100644
--- a/front/src/components/common/Message.vue
+++ b/front/src/components/common/Message.vue
@@ -40,7 +40,7 @@ onMounted(() => {
     <Alert
       v-if="isVisible"
       role="alert"
-      :color="messageColor"
+      :[messageColor]="true"
       class="is-notification"
     >
       {{ message.content }}
diff --git a/front/src/components/ui/alert.scss b/front/src/components/ui/alert.scss
index f96a0a009..21ecb3506 100644
--- a/front/src/components/ui/alert.scss
+++ b/front/src/components/ui/alert.scss
@@ -22,6 +22,7 @@
     z-index: 1000;
     min-width: 200px;
     max-width: 400px;
+    background-color: var(--background-color);
 
     &.fade-enter-active,
     &.fade-leave-active {