diff --git a/back/db/api.ts b/back/db/api.ts
index 0972ad3..4043d8b 100644
--- a/back/db/api.ts
+++ b/back/db/api.ts
@@ -35,6 +35,7 @@ export async function getRooms(mailboxId) {
             address.email AS user,
             app_room.owner_id AS userId,
             app_room.notSeen,
+            app_room.room_type AS roomType,
             mailbox_message.mailbox_id AS mailboxId
             FROM app_room 
             INNER JOIN message
@@ -91,7 +92,7 @@ export async function getMessages(roomId) {
 
         WHERE msg.room_id = ?
         GROUP BY msg.message_id
-        ORDER BY message.idate;
+        ORDER BY message.idate DESC;
     `;
     const values = [roomId];
     return await execQueryAsync(query, values);
diff --git a/front/src/components/Badge.vue b/front/src/components/Badge.vue
index 0be364b..72bf93e 100644
--- a/front/src/components/Badge.vue
+++ b/front/src/components/Badge.vue
@@ -1,25 +1,45 @@
 <template>
-    <div class="wrapper">
-        <slot class="badge" name="body"> 0 </slot>
-    </div>
+    <span :class="['badge', type]" :style="{ backgroundColor: color }">
+        {{ value }}
+    </span>
 </template>
 
+<script>
+export default {
+    props: {
+        value: {
+            type: [Number, String],
+            default: 0,
+        },
+        color: {
+            type: String,
+            default: "#007bff",
+        },
+        type: {
+            type: String,
+            default: "badge-primary",
+        },
+    },
+};
+</script>
+
 <style scoped>
-.wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #4d5970;
-    height: 1.6rem;
-    width: 1.6rem;
-    min-width: 1.6rem;
-    min-height: 1.6rem;
-    border-radius: 1.6rem;
+.badge {
+    display: inline-block;
+    padding: 0.25em 0.4em;
+    font-size: 75%;
+    font-weight: 700;
+    /* line-height: 1; */
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: 0.25rem;
 }
 
-.badge {
+.badge-primary {
     color: #fff;
-    font-size: 1.1rem;
-    line-height: 1.4rem;
+    background-color: #007bff;
 }
+
+/* add more type classes for other types/colors */
 </style>
diff --git a/front/src/store/models/model.ts b/front/src/store/models/model.ts
index ff3aa84..a4d9741 100644
--- a/front/src/store/models/model.ts
+++ b/front/src/store/models/model.ts
@@ -1,14 +1,13 @@
-
 export enum RoomType {
     ROOM = 0,
     CHANNEL = 1,
     GROUP = 2,
     DM = 3,
     THREAD = 4,
-};
+}
 
 export interface Message {
-
+    todo: true;
 }
 
 export interface Room {
@@ -32,4 +31,4 @@ export interface Account {
 
 export interface Address {
     todo: boolean;
-}
\ No newline at end of file
+}
diff --git a/front/src/store/store.ts b/front/src/store/store.ts
index e5e2e12..7be19e2 100644
--- a/front/src/store/store.ts
+++ b/front/src/store/store.ts
@@ -1,4 +1,5 @@
 import API from "@/services/imapAPI";
+import { decodeEmojis } from "@/utils/string";
 import { createStore, Store } from "vuex";
 import { Room, Account, Address, RoomType, Message } from "./models/model";
 
@@ -19,9 +20,10 @@ interface AccountFromBack {
 }
 
 function createRoom(options: RoomFromBack): Room {
+    console.log(options.roomType);
     return {
         id: options.id,
-        roomName: options.roomName,
+        roomName: decodeEmojis(options.roomName),
         roomType: options.roomType,
         mailboxId: options.mailboxId,
         userId: options.userId,
@@ -91,18 +93,26 @@ const store = createStore<State>({
         },
     },
     getters: {
-        rooms: (state) => () => {
+        rooms: (state) => (): Room[] => {
             if (state.activeAccount === 0) return state.rooms;
             return state.rooms.filter((room) => room.mailboxId == state.activeAccount);
         },
-        messages: (state) => (roomId: number) => {
-            const room = state.rooms.find((room) => room.id == roomId);
-            if (!room) return [];
-            if (!room.messagesFetched) {
-                store.dispatch("fetchMessages", { roomId: room.id });
-            }
-            return room.messages;
-        },
+        room:
+            (state) =>
+            (roomId: number): Room | undefined => {
+                const room = state.rooms.find((room) => room.id == roomId);
+                return room;
+            },
+        messages:
+            (state) =>
+            (roomId: number): Message[] => {
+                const room = state.rooms.find((room) => room.id == roomId);
+                if (!room) return [];
+                if (!room.messagesFetched) {
+                    store.dispatch("fetchMessages", { roomId: room.id });
+                }
+                return room.messages;
+            },
     },
     actions: {
         fetchAccounts: async (context) => {
diff --git a/front/src/utils/string.ts b/front/src/utils/string.ts
index ae78b00..1c1e40b 100644
--- a/front/src/utils/string.ts
+++ b/front/src/utils/string.ts
@@ -1,3 +1,5 @@
+// todo optimize
+
 export function decodeEmojis(text: string): string {
     if (!text) return text;
     const regex = /\\u{([^}]+)}/g;
diff --git a/front/src/views/room/Header.vue b/front/src/views/room/Header.vue
index 49be798..e589507 100644
--- a/front/src/views/room/Header.vue
+++ b/front/src/views/room/Header.vue
@@ -1,22 +1,54 @@
-<script setup>
-import { defineProps } from "vue";
-const props = defineProps({ room: Object });
+<script setup lang="ts">
+import store from "../../store/store";
+import { defineProps, ref, watch } from "vue";
+import Badge from "@/components/Badge.vue";
+import { RoomType } from "@/store/models/model";
+
+const props = defineProps({ id: Number });
+const room = ref(store.getters.room(props.id));
+
+watch(
+    () => props.id,
+    (newId) => {
+        room.value = store.getters.room(newId);
+    },
+);
+
+const roomTitle = () => {
+    const type = room.value?.roomType;
+    if (type === RoomType.DM || type == RoomType.CHANNEL || type == RoomType.ROOM) {
+        return room.value?.user;
+    }
+    return room.value?.roomName;
+};
 </script>
 
 <template>
     <div class="main">
-        <div>
-            {{ props }}
-            type: name / sender
+        <div class="infos">
+            <Badge :value="RoomType[room?.roomType]" />
+            {{ roomTitle() }}
         </div>
-        <div>action: threads message important</div>
+        <div class="action">action: threads message important</div>
     </div>
 </template>
 
 <style scoped>
 .main {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
     border-bottom: 1px solid #505050;
     width: 100%;
     height: 51px;
 }
+
+.infos {
+    margin-left: 15px;
+}
+
+.action {
+    margin-right: 15px;
+}
 </style>
diff --git a/front/src/views/room/RoomView.vue b/front/src/views/room/RoomView.vue
index b346aab..513192c 100644
--- a/front/src/views/room/RoomView.vue
+++ b/front/src/views/room/RoomView.vue
@@ -1,17 +1,17 @@
 <script setup>
 import { useStore } from "vuex";
 import { useRoute, onBeforeRouteUpdate } from "vue-router";
-import { onBeforeMount } from "vue";
+import { onBeforeMount, ref } from "vue";
 import Header from "./Header.vue";
 import Message from "./Message.vue";
 
 const store = useStore();
 const route = useRoute();
-let { id } = route.params;
+const id = ref(parseInt(route.params?.id));
 onBeforeMount(async () => {
+    console.log(id);
     // get data
-    let room = store.state.rooms.find((room) => room.id === id);
-    console.log(room);
+    let room = store.getters.room(id);
     if (!room || room?.fetched === false) {
         // todo
         // await store.dispatch("fetchMessages", );
@@ -21,7 +21,8 @@ onBeforeMount(async () => {
 
 onBeforeRouteUpdate(async (to, from) => {
     if (to.params.id !== from.params.id) {
-        id = to.params.id;
+        id.value = parseInt(to.params.id);
+        console.log(id);
         store.commit("setActiveRoom", id);
     }
 });
diff --git a/front/src/views/sidebar/Sidebar.vue b/front/src/views/sidebar/Sidebar.vue
index caf1c47..281e687 100644
--- a/front/src/views/sidebar/Sidebar.vue
+++ b/front/src/views/sidebar/Sidebar.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
-        <Accounts />
-        <Rooms id="rooms" />
+        <Accounts class="accounts" />
+        <Rooms class="rooms" />
     </div>
 </template>
 
@@ -24,9 +24,11 @@ div {
     height: 100%;
 }
 
-#rooms {
-    max-width: 300px;
-    min-width: 250px;
+.accounts {
+    width: 82px;
+}
+.rooms {
+    width: 300px;
 }
 
 /* todo setup max size */
diff --git a/front/src/views/sidebar/rooms/Room.vue b/front/src/views/sidebar/rooms/Room.vue
index b5f728e..8c0b0c7 100644
--- a/front/src/views/sidebar/rooms/Room.vue
+++ b/front/src/views/sidebar/rooms/Room.vue
@@ -5,7 +5,6 @@ import BaseAvatar from "../../avatars/BaseAvatar.vue";
 import Badge from "../../../components/Badge.vue";
 import ThreadList from "./threads/ThreadList.vue";
 import store from "@/store/store";
-import { decodeEmojis } from "@/utils/string";
 
 const props = defineProps({
     data: {
@@ -32,7 +31,7 @@ const router = useRouter();
             <BaseAvatar url="vue.png" />
             <div id="content">
                 <div id="sender">{{ props.data.user }}</div>
-                <div id="object">{{ decodeEmojis(props.data.roomName) }}</div>
+                <div id="object">{{ props.data.roomName }}</div>
             </div>
             <Badge class="badge" v-if="props.data.unseen > 0"
                 ><template v-slot:body>{{ props.data.unseen }}</template>
diff --git a/front/tsconfig.json b/front/tsconfig.json
index 06bddb3..ee6a6eb 100644
--- a/front/tsconfig.json
+++ b/front/tsconfig.json
@@ -5,6 +5,7 @@
       "strict": true,
       "jsx": "preserve",
       "importHelpers": true,
+      "allowJs": true,
       "moduleResolution": "node",
       "skipLibCheck": true,
       "esModuleInterop": true,
@@ -19,7 +20,7 @@
       ],
       "paths": {
         "@/*": [
-          "src/*"
+          "src/*",
         ]
       },
       "lib": [