diff --git a/config/postes.yml b/config/postes.yml
new file mode 100644
index 0000000..28de419
--- /dev/null
+++ b/config/postes.yml
@@ -0,0 +1,71 @@
+---
+postes:
+  total:
+    name: Tout
+    variant: info
+    icon: file-invoice-dollar
+
+  cash:
+    name: Cash
+    variant: info
+    icon: money-bill-wave
+    words:
+      - RETRAIT
+
+  CB:
+    name: CB
+    variant: info
+    icon: credit-card
+    words:
+      - PAIEMENT
+
+  other:
+    name: Autre
+    variant: info
+    icon: directions
+    invert: true
+    words:
+      - PAIEMENT
+      - RETRAIT
+
+  autoroute:
+    name: Autoroute
+    variant: danger
+    icon: road
+    words:
+      - AUTOROUTE
+      - APRR
+
+  essence: 
+    name: Essence
+    variant: danger
+    icon: charging-station
+    words:
+      - CARBU
+      - TOTAL
+      - ESSFLO
+      - STATION
+      - AVIA
+
+  courses: 
+    name: Courses
+    variant: warning
+    icon: shopping-cart
+    words:
+      - BIOCOOP
+      - LA VIE CLAIRE
+      - MAISON VITALE
+      - BOUCHERIE
+      - SALAISON CHALAM
+      - INTERMARCHE
+      - LA FERME DU COIN
+
+  bio: 
+    name: Bio
+    variant: success
+    icon: shopping-basket
+    words:
+      - BIOCOOP
+      - LA VIE CLAIRE
+      - MAISON VITALE
+
diff --git a/postes.yml b/postes.yml
deleted file mode 100644
index e53d677..0000000
--- a/postes.yml
+++ /dev/null
@@ -1,9 +0,0 @@
----
-postes:
-  autoroute:
-    - AUTOROUTE
-    - APRR
-  essence: [CARBU, TOTAL, ESSFLO, STATION, AVIA]
-  bouffe: [BIOCOOP, LA VIE CLAIRE, MAISON VITALE, BOUCHERIE, SALAISON CHALAM, INTERMARCHE, LA FERME DU COIN]
-  bio: [BIOCOOP, LA VIE CLAIRE, MAISON VITALE]
-
diff --git a/src/components/box.vue b/src/components/box.vue
new file mode 100644
index 0000000..a6173b0
--- /dev/null
+++ b/src/components/box.vue
@@ -0,0 +1,78 @@
+<template>
+  <b-card :bg-variant="poste.variant"
+          text-variant="white"
+          class="text-center">
+    <p class="card-text">
+      <font-awesome-icon :icon="poste.icon" />
+      {{ poste.name }}
+      </br>
+      {{ total() }}€
+    </p>
+  </b-card>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'box',
+  props: [
+    'postename',
+    'rows'
+  ],
+  data () {
+    return {
+      empty_poste: {
+        variant: '',
+        icon: '',
+        name: ''
+      }
+    }
+  },
+  computed: {
+    ...mapGetters('config', [
+      'postes'
+    ]),
+    poste () {
+      if (this.postes) {
+        return this.postes[this.postename]
+      } else {
+        return this.empty_poste
+      }
+    }
+  },
+  methods: {
+    filter_rows () {
+      if (this.poste.words) {
+        if (this.poste.invert) {
+          return this.rows.filter(x => {
+            return this.poste.words.every(v => {
+              return x.Libellé.indexOf(v) < 0
+            })
+          })
+        } else {
+          return this.rows.filter(x => {
+            return this.poste.words.some(v => {
+              return x.Libellé.indexOf(v) >= 0
+            })
+          })
+        }
+      } else {
+        return this.rows
+      }
+    },
+    total () {
+      return Math.round(
+        -this.filter_rows()
+          .map(x => parseFloat(x.Montant))
+          .reduce((sum, x) => sum + x, 0)
+      )
+    },
+    count () {
+    }
+  },
+}
+
+</script>
+
+<style scoped>
+</style>
diff --git a/src/main.js b/src/main.js
index 0e53ee1..f981bac 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,12 +9,18 @@ import 'bootstrap-vue/dist/bootstrap-vue.css'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faCar, faChargingStation, faUtensils, faFileInvoiceDollar
+  faCar, faChargingStation, faRoad,
+  faUtensils, faDirections,
+  faFileInvoiceDollar, faMoneyBillWave, faCreditCard,
+  faShoppingCart, faShoppingBasket
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 library.add(
-  faCar, faChargingStation, faUtensils, faFileInvoiceDollar
+  faCar, faChargingStation, faRoad,
+  faUtensils, faDirections,
+  faFileInvoiceDollar, faMoneyBillWave, faCreditCard,
+  faShoppingCart, faShoppingBasket
 )
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
diff --git a/src/store/modules/config.js b/src/store/modules/config.js
index ed18905..77f2a8c 100644
--- a/src/store/modules/config.js
+++ b/src/store/modules/config.js
@@ -1,15 +1,43 @@
+import { readFile } from 'fs'
+import path from 'path'
+import yaml from 'js-yaml'
+
 export default {
   namespaced: true,
   state: {
-    data_dir: '/home/lafrite/scripts/comptes/data/'
+    data_dir: '/home/lafrite/scripts/comptes/data/',
+    postes_filename: 'postes.yml',
+    postes: {}
   },
   getters: {
     data_dir: (state) => {
       return state.data_dir
+    },
+    postes_filename: (state) => {
+      return state.postes_filename
+    },
+    postes: (state) => {
+      return state.postes
     }
   },
   mutations: {
+    SET_POSTES: (state, { postes }) => {
+      state.postes = postes
+    }
   },
   actions: {
+    async load_postes (context) {
+      readFile(path.join(context.getters.data_dir, context.getters.postes_filename), 'utf8', (err, content) => {
+        if (err) {
+          console.log(err)
+        } else {
+          var parseConfig = {
+            header: true
+          }
+          var parsed = yaml.safeLoad(content, parseConfig)
+          context.commit('SET_POSTES', { postes: parsed.postes })
+        }
+      })
+    }
   }
 }
diff --git a/src/store/modules/datas.js b/src/store/modules/datas.js
index 5f193d7..1363ac4 100644
--- a/src/store/modules/datas.js
+++ b/src/store/modules/datas.js
@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import { readdir, readFile } from 'fs'
 import path from 'path'
 import Papa from 'papaparse'
diff --git a/src/views/home.vue b/src/views/home.vue
index 4d8d0e8..cd8d04c 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -12,12 +12,20 @@
       </b-row>
     </b-container>
 
+     <b-card-group deck class="mb-3">
+       <box postename="total" :rows="filter_rows"></box>
+       <box postename="cash" :rows="filter_rows"></box>
+       <box postename="CB" :rows="filter_rows"></box>
+       <box postename="other" :rows="filter_rows"></box>
+     </b-card-group>
+
     <b-table striped hover :items="filter_rows" :fields='fields'></b-table>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import box from '../components/box'
 
 var today = new Date()
 var monthAgo = new Date()
@@ -26,6 +34,7 @@ monthAgo.setMonth(monthAgo.getMonth() - 1)
 export default {
   name: 'home',
   components: {
+    box: box
   },
   data () {
     return {
@@ -50,12 +59,14 @@ export default {
     }
   },
   mounted: function () {
+    this.$store.dispatch('config/load_postes')
     this.$store.dispatch('datas/find_csv')
   },
   computed: {
     ...mapGetters({
       'csvs': 'datas/csvs',
-      'rows': 'datas/rows'
+      'rows': 'datas/rows',
+      'postes': 'config/postes'
     }),
     filter_rows () {
       return this.filter_date(this.filter_spending(this.rows))