diff --git a/src/components/card_categorie.vue b/src/components/card_categorie.vue
new file mode 100644
index 0000000..264e5d0
--- /dev/null
+++ b/src/components/card_categorie.vue
@@ -0,0 +1,72 @@
+<template>
+  <b-card v-if="categorie"
+          :bg-variant="categorie.variant"
+          text-variant="white"
+          class="text-center">
+    <div class="card-text">
+      <div class="icon">
+        <font-awesome-icon :icon="categorie.icon" class="fa-3x"/>
+      </div>
+      <div class="amount">
+        <h3>{{ total() }}€</h3>
+        {{ categorie.name }}
+      </div>
+    </div>
+  </b-card>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { total } from '../libs/data_processing'
+export default {
+  name: 'cardCategorie',
+  props: [
+    'categoriename',
+    'rows'
+  ],
+  data () {
+    return {
+    }
+  },
+  computed: {
+    ...mapGetters('config', [
+      'categories'
+    ]),
+    ...mapGetters('datas', [
+      'tag_filter_rows'
+    ]),
+    categorie () {
+      return this.categories[this.categoriename.toLowerCase()]
+    }
+  },
+  methods: {
+    filter_rows () {
+      return this.tag_filter_rows([this.categorie.name])
+    },
+    total () {
+      return total(this.filter_rows())
+    },
+    count () {
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+.card-body {
+  padding: 10px;
+}
+.card-text {
+  display: flex;
+}
+.icon {
+  flex: 40%;
+  align-self: center;
+}
+.amount {
+  flex: 50%;
+  text-align: right;
+  margin-left: 10px;
+}
+</style>
diff --git a/src/components/card_tag.vue b/src/components/card_tag.vue
new file mode 100644
index 0000000..06621aa
--- /dev/null
+++ b/src/components/card_tag.vue
@@ -0,0 +1,85 @@
+<template>
+  <b-card v-if="tag"
+          :bg-variant="tag.variant"
+          text-variant="white"
+          class="text-center">
+    <div class="card-text">
+        <div class="icon">
+          <font-awesome-icon :icon="tag.icon" class="fa-3x"/>
+        </div>
+        <div class="amount">
+          <h3>{{ total() }}€</h3>
+          {{ tag.name }}
+        </div>
+    </div>
+  </b-card>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { total } from '../libs/data_processing'
+export default {
+  name: 'cardTag',
+  props: [
+    'tagname',
+    'rows'
+  ],
+  data () {
+    return {
+      default_tag: {
+        name: 'Tout',
+        variant: 'info',
+        icon: 'file-invoice-dollar'
+      }
+    }
+  },
+  computed: {
+    ...mapGetters('config', [
+      'tags'
+    ]),
+    ...mapGetters('datas', [
+      'tag_filter_rows'
+    ]),
+    tag () {
+      if (this.tagname) {
+        return this.tags[this.tagname]
+      } else {
+        return this.default_tag
+      }
+    }
+  },
+  methods: {
+    filter_rows () {
+      if (this.tag === this.default_tag) {
+        return this.tag_filter_rows([])
+      } else {
+        return this.tag_filter_rows([this.tag.name])
+      }
+    },
+    total () {
+      return total(this.filter_rows())
+    },
+    count () {
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+.card-body {
+  padding: 10px;
+}
+.card-text {
+  display: flex;
+}
+.icon {
+  flex: 40%;
+  align-self: center;
+}
+.amount {
+  flex: 50%;
+  text-align: right;
+  margin-left: 10px;
+}
+</style>
diff --git a/src/components/categorie_item.vue b/src/components/categorie_item.vue
new file mode 100644
index 0000000..f3e3b81
--- /dev/null
+++ b/src/components/categorie_item.vue
@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <div v-if="edit_mode" class="categorie">
+      <div class="icon">
+        <font-awesome-icon :icon="edited_categorie.icon" class="fa-2x"/>
+          <!--
+        Icône inconnue
+          -->
+      </div>
+      <div class="description">
+        <b-form-input type="text" v-model="edited_categorie.name"></b-form-input>
+        <b-form-input type="text" v-model="edited_categorie.icon"></b-form-input>
+        <b-form-input type="color" v-model="edited_categorie.color"></b-form-input>
+      </div>
+      <div class="actions">
+        <b-button-group vertical v-if="editable">
+          <b-button @click="save()" >Sauver</b-button>
+          <b-button @click="toggleEdit()">Annuler</b-button>
+        </b-button-group>
+      </div>
+    </div>
+
+    <div v-else class="categorie">
+      <div class="icon text-info">
+        <font-awesome-icon :icon="categorie.icon" class="fa-2x"/>
+      </div>
+      <div class="description">
+        <h4>{{ categorie.name }}</h4>
+
+        Mots clés<span v-if="categorie.invert"> (tout sauf)</span>: {{ categorie.words.length != 0 ? categorie.words.join(" - ") : 'Aucun' }}
+      </div>
+      <div class="actions">
+      <!--
+        <b-button-group vertical v-if="editable">
+          <b-button @click="toggleEdit()">Editer</b-button>
+          <b-button>Supprimer</b-button>
+        </b-button-group>
+      -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+export default {
+  name: 'categorieItem',
+  props: [
+    'categoriename'
+  ],
+  data () {
+    return {
+      default_categorie: {
+        name: 'Tout',
+        variant: 'info',
+        icon: 'file-invoice-dollar'
+      },
+      edit_mode: false,
+      edited_categorie: {}
+    }
+  },
+  computed: {
+    ...mapGetters('config', {
+      getcategorie: 'categorie'
+    }),
+    categorie () {
+      if (this.categoriename) {
+        return this.getcategorie(this.categoriename)
+      } else {
+        return this.default_categorie
+      }
+    },
+    editable () {
+      if (this.categoriename) {
+        return true
+      } else {
+        return false
+      }
+    }
+  },
+  methods: {
+    ...mapActions('config', [
+      'edit_categorie'
+    ]),
+    toggleEdit () {
+      this.edited_categorie = { ...this.categorie }
+      this.edit_mode = !this.edit_mode
+    },
+    save () {
+      this.edit_categorie(this.edited_categorie)
+      this.toggleEdit()
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+.categorie {
+  display: flex;
+}
+.icon {
+  flex: 10%;
+  align-self: center;
+}
+.description {
+  flex: 80%;
+  text-align: left;
+  align-self: center;
+}
+.actions {
+  flex: 10%;
+  text-align: left;
+  margin-left: 10px;
+  align-self: center;
+}
+</style>
diff --git a/src/components/tag_item.vue b/src/components/tag_item.vue
new file mode 100644
index 0000000..091c812
--- /dev/null
+++ b/src/components/tag_item.vue
@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <div v-if="edit_mode" class="tag">
+      <div class="icon">
+        <font-awesome-icon :icon="edited_tag.icon" class="fa-2x"/>
+          <!--
+        Icône inconnue
+          -->
+      </div>
+      <div class="description">
+        <b-form-input type="text" v-model="edited_tag.name"></b-form-input>
+        <b-form-input type="text" v-model="edited_tag.icon"></b-form-input>
+        <b-form-input type="color" v-model="edited_tag.color"></b-form-input>
+      </div>
+      <div class="actions">
+        <b-button-group vertical v-if="editable">
+          <b-button @click="save()" >Sauver</b-button>
+          <b-button @click="toggleEdit()">Annuler</b-button>
+        </b-button-group>
+      </div>
+    </div>
+
+    <div v-else class="tag">
+      <div class="icon">
+        <font-awesome-icon :style="{ color: tag.color}" :icon="tag.icon" class="fa-2x"/>
+      </div>
+      <div class="description">
+        <h4>{{ tag.name }}</h4>
+
+        Mots clés<span v-if="tag.invert"> (tout sauf)</span>: {{ tag.words.join(" - ") }}
+      </div>
+      <div class="actions">
+      <!--
+        <b-button-group vertical v-if="editable">
+          <b-button @click="toggleEdit()">Editer</b-button>
+          <b-button>Supprimer</b-button>
+        </b-button-group>
+      -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+export default {
+  name: 'tagItem',
+  props: [
+    'tagname'
+  ],
+  data () {
+    return {
+      default_tag: {
+        name: 'Tout',
+        variant: 'info',
+        icon: 'file-invoice-dollar'
+      },
+      edit_mode: false,
+      edited_tag: {}
+    }
+  },
+  computed: {
+    ...mapGetters('config', {
+      getTag: 'tag'
+    }),
+    tag () {
+      if (this.tagname) {
+        return this.getTag(this.tagname)
+      } else {
+        return this.default_tag
+      }
+    },
+    editable () {
+      if (this.tagname) {
+        return true
+      } else {
+        return false
+      }
+    }
+  },
+  methods: {
+    ...mapActions('config', [
+      'edit_tag'
+    ]),
+    toggleEdit () {
+      this.edited_tag = { ...this.tag }
+      this.edit_mode = !this.edit_mode
+    },
+    save () {
+      this.edit_tag(this.edited_tag)
+      this.toggleEdit()
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+.tag {
+  display: flex;
+}
+.icon {
+  flex: 10%;
+  align-self: center;
+}
+.description {
+  flex: 80%;
+  text-align: left;
+  align-self: center;
+}
+.actions {
+  flex: 10%;
+  text-align: left;
+  margin-left: 10px;
+  align-self: center;
+}
+</style>