diff --git a/app/src/components/MessageListGroup.vue b/app/src/components/MessageListGroup.vue
index 786054e9..5ef8622f 100644
--- a/app/src/components/MessageListGroup.vue
+++ b/app/src/components/MessageListGroup.vue
@@ -4,15 +4,17 @@
     :class="{ 'fixed-height': fixedHeight, 'bordered': bordered }"
     @scroll="onScroll"
   >
-    <b-list-group-item
+    <yuno-list-group-item
       v-if="limit && messages.length > limit"
       variant="info" v-t="'api.partial_logs'"
     />
 
-    <b-list-group-item v-for="({ color, text }, i) in reducedMessages" :key="i">
-      <span class="status" :class="'bg-' + color" />
+    <yuno-list-group-item
+      v-for="({ color, text }, i) in reducedMessages" :key="i"
+      :variant="color" size="xs"
+    >
       <span v-html="text" />
-    </b-list-group-item>
+    </yuno-list-group-item>
   </b-list-group>
 </template>
 
@@ -75,18 +77,4 @@ export default {
   border: $card-border-width solid $card-border-color;
   @include border-radius($card-border-radius);
 }
-
-.list-group-item {
-  font-size: $font-size-sm;
-  padding: $tooltip-padding-y $tooltip-padding-x;
-  padding-left: 1rem;
-}
-
-.status {
-  position: absolute;
-  width: .4rem;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
 </style>