diff --git a/front/src/components/structure/message/Message.vue b/front/src/components/structure/message/Message.vue
index 8070f18..c1d3bec 100644
--- a/front/src/components/structure/message/Message.vue
+++ b/front/src/components/structure/message/Message.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { defineProps, withDefaults, ref } from "vue";
 import { decodeEmojis } from "../../../utils/string";
-import { removeDuplicates } from "../../../utils/array";
 import { Address, Message } from "@/store/models/model";
 import Content from "./Content.vue";
 import Options from "./Options.vue";
 import { isSeenFc } from "@/utils/flagsUtils";
 import SvgLoader from "@/components/utils/SvgLoader.vue";
 import { useRouter } from "vue-router";
+import { displayAddresses } from "@/utils/address";
 
 export interface Props {
     msg: Message;
@@ -21,17 +21,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const compact = ref(props.compact);
 
-const displayAddresses = (addressIds: string[] | undefined): string => {
-    if (!addressIds) return "";
-    addressIds = removeDuplicates(addressIds);
-    let res = "";
-    addressIds.forEach((addressId) => {
-        const address = props.members?.find((member) => member.id === parseInt(addressId));
-        if (address) res += address.email;
-    });
-    return res;
-};
-
 const classes = (): string => {
     const flags = props.msg?.flags;
 
@@ -45,6 +34,15 @@ const classes = (): string => {
     return "msg-basic";
 };
 
+const style = (prop: string): string => {
+    // get color of the member that send the message
+    let member = props.members?.find((member) => member.id === parseInt(props.msg?.fromA?.split(",")[0]));
+    if (member?.color) {
+        return `${prop}: ${member.color} !important`;
+    }
+    return "";
+};
+
 const router = useRouter();
 </script>
 <!-- to if to is more than me
@@ -54,9 +52,9 @@ const router = useRouter();
         attachments -->
 <template>
     <div class="message" @dblclick="$emit('openMessageView', props.msg?.id)">
-        <div id="context">
+        <div id="context" :style="style('background-color')">
             <div class="left" id="profile">
-                {{ displayAddresses(props.msg?.fromA?.split(",")) }} - {{ props.msg?.fromA }}
+                {{ displayAddresses(props.msg?.fromA?.split(","), props.members) }} - {{ props.msg?.fromA }}
             </div>
             <div class="middle">{{ decodeEmojis(props.msg?.subject) }}</div>
             <div class="right" id="date">
@@ -73,7 +71,7 @@ const router = useRouter();
                 }}
             </div>
         </div>
-        <div class="content" :class="[classes()]">
+        <div class="content" :class="[classes()]" :style="style('border-color')">
             <Content v-if="!compact" :content="props.msg?.content" />
             <SvgLoader
                 v-if="compact"
@@ -86,7 +84,6 @@ const router = useRouter();
         </div>
         <div id="thread-link" v-if="props.msg?.thread" @click="router.push(`/${props.msg?.thread}`)">
             <SvgLoader svg="expand-left-fill" />
-            <!-- <SvgLoader svg="expand-left-fill" :loading="true" /> -->
             <span>Go to the full conversation.</span>
         </div>
     </div>
@@ -133,8 +130,11 @@ const router = useRouter();
 
 .content {
     display: flex;
-    padding-top: 6px;
+    padding: 6px;
     flex-direction: row;
+    border: solid 4px var(--quaternary-background);
+    border-top: 0;
+    border-radius: 0 0 4px 4px;
 }
 
 .expand-contract {
diff --git a/front/src/store/models/model.ts b/front/src/store/models/model.ts
index cbb492d..f7a8296 100644
--- a/front/src/store/models/model.ts
+++ b/front/src/store/models/model.ts
@@ -15,7 +15,7 @@ export interface Message {
     content: string;
     date: string;
     flags: string[];
-    threads: number | null;
+    thread: number | null;
 }
 
 export enum LoadingState {
@@ -47,5 +47,6 @@ export interface Address {
     id: number;
     name: string | null;
     email: string;
+    color: string | undefined;
     type: string;
 }
diff --git a/front/src/store/store.ts b/front/src/store/store.ts
index be8733e..99625e3 100644
--- a/front/src/store/store.ts
+++ b/front/src/store/store.ts
@@ -4,6 +4,7 @@ import { decodeEmojis } from "@/utils/string";
 import { AxiosError, AxiosResponse } from "axios";
 import { createStore } from "vuex";
 import { Room, Account, Address, RoomType, Message, LoadingState } from "./models/model";
+import { removeDuplicates } from "@/utils/array";
 
 interface RoomFromBack {
     id: number;
@@ -154,6 +155,10 @@ const store = createStore<State>({
             if (!roomMessage) return;
             payload.messages.forEach((message: any) => {
                 message.flags = message.flags?.split(",") ?? [];
+                // todo fix upstream
+                // message.fromA = message.fromA ? removeDuplicates(message.fromA.split(",").join(",")) : null;
+                // message.toA = message.toA ? removeDuplicates(message.toA.split(",").join(",")) : null;
+                // message.ccA = message.ccA ? removeDuplicates(message.ccA.split(",").join(",")) : null;
                 roomMessage?.messages.push(message);
             });
         },
diff --git a/front/src/utils/address.ts b/front/src/utils/address.ts
new file mode 100644
index 0000000..6eb4be0
--- /dev/null
+++ b/front/src/utils/address.ts
@@ -0,0 +1,13 @@
+import { Address } from "@/store/models/model";
+import { removeDuplicates } from "./array";
+
+export const displayAddresses = (addressIds: string[] | undefined, members: Address[]): string => {
+    if (!addressIds) return "";
+    addressIds = removeDuplicates(addressIds);
+    let res = "";
+    addressIds.forEach((addressId) => {
+        const address = members?.find((member) => member.id === parseInt(addressId));
+        if (address) res += address.email;
+    });
+    return res;
+};