diff --git a/src/assets/main.css b/src/assets/main.css
index d255f57..5478713 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -50,10 +50,14 @@ html {
   max-height: 95dvh;
 }
 
-a, a:active, a:focus, a:hover {
+a.color-epic, a.color-epic:active, a.color-epic:focus, a.color-epic:hover {
   color: #9E9EFF;
 }
 
+a.color-leg, a.color-leg:active, a.color-leg:focus, a.color-leg:hover {
+  color: #FB8C00;
+}
+
 .select-row {
   background-color: #444;
 }
diff --git a/src/components/HistoryList.vue b/src/components/HistoryList.vue
index 33ce877..e774728 100644
--- a/src/components/HistoryList.vue
+++ b/src/components/HistoryList.vue
@@ -11,7 +11,6 @@ const errorMessage = ref('')
 const formValid = ref(true)
 
 const historyList = reactive([])
-
 const historySelected = ref([])
 
 const deleteHistoryDialog = ref(false)
@@ -20,6 +19,16 @@ const isLoading = ref(false)
 
 const search = ref('')
 
+const assignLegendaryDialog = ref(false)
+const listLegendary = [
+  { value: 'tarecgosa', title: 'Courroux du dragon, le Repos de Tarecgosa' },
+  { value: 'crocsPere', title: 'Crocs du père' }
+]
+const legendarySelected = ref('tarecgosa')
+
+const rosterList = reactive([])
+const memberSelected = ref(null)
+
 const headers = [
   { value: 'name', title: 'Membre', sortable: true },
   { value: 'fullDate', title: 'Date', align: 'center', sortable: true }, 
@@ -34,6 +43,7 @@ const headers = [
 
 onMounted(async () => {
   await getHistory()
+  await getRoster()
 })
 
 const isLogged = computed(() => {
@@ -41,6 +51,12 @@ const isLogged = computed(() => {
   return false
 })
 
+const getRoster = async () => {
+  rosterList.length = 0
+  const result = await httpRequest('/rosters', { method: 'GET' }, false, true)
+  rosterList.push(...result.rosters)
+}
+
 const getHistory = async () => {
   historyList.length = 0
   const result = await httpRequest('/histories', { method: 'GET' }, false, true)
@@ -113,6 +129,70 @@ const submitDeleteHistory = async () => {
   }
 }
 
+const assignLegendary = () => {
+  assignLegendaryDialog.value = true
+}
+
+const cancelAssignLegendary = () => {
+  assignLegendaryDialog.value = false
+  legendarySelected.value = 'tarecgosa'
+  memberSelected.value = null
+}
+
+const submitAssignLegendary = async () => {
+  errorMessage.value = null
+  if (memberSelected.value) {
+    try {
+      isLoading.value = true
+      const member = rosterList.find(r => r.name === memberSelected.value)
+      const memberClass = member.classe
+      const result = await httpRequest('/assignLegendary', { method: 'POST', body: { legendary: legendarySelected.value, member: memberSelected.value, classe: memberClass } }, true, true)
+      if (result.success) {
+        await getHistory()
+        cancelAssignLegendary()
+      } else errorMessage.value = false
+      isLoading.value = false
+    } catch (e) {
+      errorMessage.value = e.message
+      isLoading.value = false
+    }
+  } else {
+    errorMessage.value = 'Veuillez sélectionner un membre'
+  }
+}
+
+const listMember = computed(() => {
+  const list = []
+  if (legendarySelected.value === 'tarecgosa') {
+    const rosterFiltered = rosterList.filter(r => 
+                              r.classe === 'MAGE' ||
+                              r.classe === 'WARLOCK' ||
+                              (r.classe === 'PRIEST' && r.role === 'Ranged') ||
+                              (r.classe === 'SHAMAN' && r.role === 'Ranged') ||
+                              (r.classe === 'DRUID'  && r.role === 'Ranged')
+                            )
+    list.push(...rosterFiltered.map(r => {
+      return { value: r.name, title: r.name }
+    }))
+  } else if (legendarySelected.value === 'crocsPere') {
+    const rosterFiltered = rosterList.filter(r => r.classe === 'ROGUE')
+    list.push(...rosterFiltered.map(r => {
+      return { value: r.name, title: r.name }
+    }))
+  }
+  return list
+})
+
+const colorItem = (item) => {
+  switch (item.itemID) {
+    case '71086':
+    case '77949':
+    case '77950':
+      return 'color-leg'
+    default:
+      return 'color-epic'
+  }
+}
 </script>
 
 <template>
@@ -121,8 +201,10 @@ const submitDeleteHistory = async () => {
       <v-toolbar flat>
         <v-text-field v-model="search" class="ml-5" label="Filtrer un membre" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line density="compact" />
         <v-spacer />
+        <v-btn v-if="isLogged" prepend-icon="mdi-link-variant-plus" variant="outlined" size="small" color="warning" text="Assigner un légendaire" @click="assignLegendary" />
+        <v-spacer />
         <v-btn v-if="isLogged" class="mr-5" :disabled="historySelected.length === 0" prepend-icon="mdi-trash-can-outline" color="error" variant="flat" size="small" text="Supprimer" @click="deleteHistory" />
-        <v-btn v-if="isLogged" class="mr-5" prepend-icon="mdi-plus-circle" variant="outlined" size="small" color="primary" text="Ajouter" @click="addHistory" />
+        <v-btn v-if="isLogged" class="mr-5" prepend-icon="mdi-plus-circle-outline" variant="outlined" size="small" color="primary" text="Ajouter" @click="addHistory" />
       </v-toolbar>
     </template>
     <template #item.name="{ item }">
@@ -132,7 +214,7 @@ const submitDeleteHistory = async () => {
       {{ DateTime.fromMillis(value).toUTC().toFormat('dd/MM/yyyy HH:mm') }}
     </template>
     <template #item.itemID="{ item }">
-      <a :href="`https://wowhead.com/cata/fr/item=${item.itemID}`" target="_blank">{{ item.itemName }}</a>
+      <a :class="colorItem(item)" :href="`https://wowhead.com/cata/fr/item=${item.itemID}`" target="_blank">{{ item.itemName }}</a>
     </template>
   </v-data-table>
 
@@ -175,4 +257,31 @@ const submitDeleteHistory = async () => {
       </v-card-actions>
     </v-card>
   </v-dialog>
+
+  <v-dialog max-width="500" persistent v-model="assignLegendaryDialog">
+    <v-card title="Assignation d'un légendaire">
+      <v-card-text>
+        <v-row>
+          <v-col cols="12">
+            <v-select label="Légendaire" v-model="legendarySelected" :items="listLegendary" variant="outlined" />
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="12">
+            <v-autocomplete label="Membre" v-model="memberSelected" :items="listMember" variant="outlined" />
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="12">
+            <span class="text-error">{{ errorMessage }}</span>
+          </v-col>
+        </v-row>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn prepend-icon="mdi-cancel" text="Annuler" variant="outlined" size="small" color="warning" @click="cancelAssignLegendary" />
+        <v-btn :loading="isLoading" prepend-icon="mdi-content-save-plus-outline" text="Confirmer" variant="outlined" size="small" color="primary" @click="submitAssignLegendary" />
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
 </template>
diff --git a/src/components/RosterList.vue b/src/components/RosterList.vue
index 1bfb557..d2e32f7 100644
--- a/src/components/RosterList.vue
+++ b/src/components/RosterList.vue
@@ -206,7 +206,7 @@ const saveRaidDate = async () => {
             <v-btn icon="mdi-content-save-outline" variant="outlined" size="small" color="primary" @click="saveRaidDate" />
           </div>
           <v-spacer />
-          <v-btn class="mr-5" prepend-icon="mdi-plus-circle" variant="outlined" size="small" color="primary" text="Ajouter" @click="addMember" />
+          <v-btn class="mr-5" prepend-icon="mdi-plus-circle-outline" variant="outlined" size="small" color="primary" text="Ajouter" @click="addMember" />
         </v-toolbar>
       </template>
       <template #item.name="{ item }">