diff --git a/src/components/new_tag.vue b/src/components/new_tag.vue
new file mode 100644
index 0000000..b91970f
--- /dev/null
+++ b/src/components/new_tag.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="item">
+    <div class="tag">
+      <div v-if="!isNewTag">
+        <b-button @click="toggle_new_tag" size="sm">
+          <font-awesome-icon icon="plus" class="fa" /> Ajouter un tag
+        </b-button>
+      </div>
+      <div class="description">
+        <div v-if="isNewTag" class="tag">
+          <edit-tag v-model="editedTag"></edit-tag>
+        </div>
+      </div>
+    </div>
+
+    <div class="actions">
+      <b-button-group vertical>
+        <div v-if="isNewTag">
+          <b-button @click="save()">Sauver</b-button>
+          <b-button @click="toggle_new_tag()">Annuler</b-button>
+        </div>
+      </b-button-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+import editTag from './edit_tag'
+export default {
+  name: 'newTag',
+  components: {
+    editTag: editTag
+  },
+  data () {
+    return {
+      isNewTag: false,
+      emptyTag: {
+        color: '',
+        icon: 'question',
+        name: '',
+        variant: '',
+        words: []
+      },
+      editedTag: {}
+    }
+  },
+  computed: {
+  },
+  methods: {
+    ...mapActions('config', [
+      'edit_tag'
+    ]),
+    toggle_new_tag () {
+      this.isNewTag = !this.isNewTag
+      this.editedTag = { ...this.emptyTag }
+    },
+    save () {
+      this.edit_tag(this.editedTag)
+      this.toggle_new_tag()
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+.item {
+  display: flex;
+}
+.tag {
+  flex: 90%;
+  text-align: left;
+  align-self: center;
+  display: flex;
+}
+.actions {
+  flex: 10%;
+  text-align: left;
+  margin-left: 10px;
+  align-self: center;
+}
+.icon {
+  flex: 10%;
+  align-self: center;
+}
+.description {
+  flex: 90%;
+  text-align: left;
+  align-self: center;
+}
+</style>