diff --git a/src/components/Account.vue b/src/components/Account.vue
index 8d21813..68d1489 100644
--- a/src/components/Account.vue
+++ b/src/components/Account.vue
@@ -1,25 +1,39 @@
 <template>
   <div class="account-tab">
+    <div>
+      <div class="expense-button-div float-left">
+        <b-button variant="success">Ajouter une dépense</b-button>
+        <b-button variant="info" v-on:click="showImportExpenses">Importer des dépenses</b-button>
+      </div>
+      <div class="float-right">
+        <b-button variant="light">Partager le compte bancaire</b-button></div>
+    </div>
+    <b-form>
+      <div class="form-datepicker">
+        <div class="text-datepicker">De</div>
+        <b-form-datepicker style="max-width: 300px" v-model="fromValue" :min="fromMin" :max="fromMax" @input="computePickerDate()"></b-form-datepicker>
+        <div class="text-datepicker"> à </div>
+        <b-form-datepicker style="max-width: 300px" v-model="toValue" :min="toMin" :max="toMax" @input="computePickerDate()"></b-form-datepicker>
+      </div>
+    </b-form>
     <b-card no-body>
-      <b-tabs card>
+      <b-tabs card vertical>
         <b-tab title="Vue Global">
-          <scatter-chart
+          <scatter-chart style="max-width: 30%;"
+                         v-if="loaded"
+                         :chartdata="expensesChartData"
+                         :options="optionsChartData"
+          />
+          <scatter-chart style="max-width: 100%;"
               v-if="loaded"
               :chartdata="chartData"
               />
         </b-tab>
 
         <b-tab title="Vue detaillé" >
-          <div>
-          <div class="expense-button-div float-left">
-            <b-button variant="success">Ajouter une dépense</b-button>
-            <b-button variant="info" v-on:click="showImportExpenses">Importer des dépenses</b-button>
-          </div>
-            <div class="float-right">
-              <b-button variant="light">Partager le compte</b-button></div>
-          </div>
           <b-table striped hover bordered :items="expenses" :fields="fields"></b-table>
         </b-tab>
+
       </b-tabs>
     </b-card>
     <b-modal ref="import-expense" size="lg" centered title="">
@@ -49,14 +63,27 @@
 </template>
 
 <script>
-import {BCard, BTabs , BTab, BTable, BFormFile, BModal, BButton} from "bootstrap-vue";
-import {getAnAccount, getExpenses, sendCSVImportExpenses} from "@/service/noscomptes";
-import {formatExpenses} from "@/service/expenses";
+import {BCard, BTabs , BTab, BTable, BFormFile, BModal, BButton, BForm, BFormDatepicker} from "bootstrap-vue";
+import {getAnAccount, getExpenses, sendCSVImportExpenses, getExpensesBetweenDate} from "@/service/noscomptes";
+import {formatExpenses, formatExpensesChart, formatIOTChartOption} from "@/service/expenses";
 import ScatterChart from './charts/BarChart.vue';
 export default {
   name: 'account',
   data: function () {
     return {
+      optionsChartData: {
+        scales: {
+          xAxes: [{
+            stacked: true,
+            type: 'category',
+          }],
+          yAxes: [{
+            ticks: {
+              beginAtZero: false
+            }
+          }]
+        }
+      },
       fields: [
         {
           key: 'expenseDate',
@@ -82,8 +109,16 @@ export default {
         libelle:"Test",
         value: 10
       }],
+      filteredExpenses:{},
       chartData:{} ,
+      expensesChartData:{},
       loaded: false,
+      fromValue: "",
+      fromMin: new Date(2021,10,10),
+      fromMax:new Date(),
+      toValue: "",
+      toMin: new Date(2021,10,1),
+      toMax:new Date(),
     }
   },
   beforeCreate() {
@@ -94,6 +129,8 @@ export default {
     getExpenses(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId).then(data => {
         this.expenses = data
       this.chartData = formatExpenses(data)
+      this.expensesChartData = formatExpensesChart(data)
+      this.optionsChartData = formatIOTChartOption(data)
       this.loaded= true
     })
 
@@ -101,6 +138,24 @@ export default {
   mounted () {
   },
   methods: {
+    computePickerDate(){
+      if (this.fromValue !== "") {
+        this.toMin = new Date(this.fromValue)
+      }
+      if(this.toValue !== "") {
+        this.fromMax = new Date(this.toValue)
+      }
+      let loggedUser = this.$store.state.loggedUser
+      this.loaded = false
+      getExpensesBetweenDate(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId, this.fromValue, this.toValue).then(data => {
+        this.expenses = data
+        this.chartData = formatExpenses(data)
+        this.expensesChartData = formatExpensesChart(data)
+        this.optionsChartData = formatIOTChartOption(data)
+        this.loaded = true
+      })
+      return false
+    },
     loadAccount() {
       let loggedUser = this.$store.state.loggedUser
       getAnAccount(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId).then(data => {
@@ -118,6 +173,8 @@ export default {
             getExpenses(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId).then(data => {
               this.expenses = data
               this.chartData = formatExpenses(data)
+              this.expensesChartData = formatExpensesChart(data)
+              this.optionsChartData = formatIOTChartOption(data)
               this.loaded = true
             })
 
@@ -136,7 +193,9 @@ export default {
     BTable,
     BFormFile,
     BModal,
-    BButton
+    BButton,
+    BForm,
+    BFormDatepicker
   }
 }
 </script>
@@ -152,5 +211,17 @@ export default {
 .sr-only {
   display: none;
 }
+.text-datepicker {
+  align-items: center;
+  display: flex;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.form-datepicker {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin: 10px 15px 10px 0px;
+}
 </style>
 
diff --git a/src/components/JointAccount.vue b/src/components/JointAccount.vue
new file mode 100644
index 0000000..4f59859
--- /dev/null
+++ b/src/components/JointAccount.vue
@@ -0,0 +1,241 @@
+<template>
+  <div class="jointAccounts-tab">
+    <b-card no-body>
+      <b-tabs card>
+        <b-tab title="Compte joint" active>
+          <b-card style="display: inline-block;"
+                  class="mb-2 jointAccount-card jointAccount-add"
+          >
+            <b-card-title>
+              <br>
+            </b-card-title>
+            <b-card-text>
+              <br>
+              </b-card-text>
+            <b-button href="#" variant="success" v-on:click="show()" >Ajouter un compte joint<b-icon-plus-circle-fill style="color:green"></b-icon-plus-circle-fill></b-button>
+
+          </b-card>
+          <b-card style="display: inline-block;" v-for="jointAccount in jointAccounts" :key="jointAccount.id"
+              :title=jointAccount.name
+              class="mb-2 jointAccount-card"
+          >
+            <b-card-text>
+              {{jointAccount.name}}
+            </b-card-text>
+            <b-button :href="'/jointAccount/'+jointAccount.id" variant="primary" class="see-jointAccount" >Voir</b-button>
+            <b-button href="#" variant="danger" v-on:click="validateDeleteJointAccount(jointAccount.id)">Supprimer</b-button>
+
+          </b-card>
+        </b-tab>
+      </b-tabs>
+    </b-card>
+    <b-modal ref="delete-jointAccount" size="lg" centered title="">
+      <template #modal-header="{ }">
+      </template>
+      <template #default="{ }">
+        <p>Etes vous sûr ?</p>
+      </template>
+
+      <template #modal-footer="{ ok, cancel }">
+        <b-button size="sm" variant="danger" @click="deleteJointAccount()">
+          Supprimer
+        </b-button>
+        <!-- Button with custom close trigger value -->
+        <b-button size="sm" variant="outline-secondary" @click="show=cancel()">
+          Annuler
+        </b-button>
+      </template>
+    </b-modal>
+    <b-modal ref="create-jointAccount" size="lg" centered title="">
+      <template #modal-header="{  }">
+        <h5>Ajout d'un compte joint</h5>
+      </template>
+      <template #modal-footer="{ ok, cancel }">
+        <b-button size="sm" variant="success" @click="validateForm()">
+          Créer
+        </b-button>
+        <b-button size="sm" variant="danger" @click="cancel()">
+          Fermer
+        </b-button>
+      </template>
+      <form ref="form" @submit.stop.prevent="handleSubmit">
+        <b-form-group
+            label="Name"
+            label-for="name-input"
+            invalid-feedback="Le nom du compte joint est requis"
+            :state="nameState"
+        >
+          <b-form-input
+              id="name-input"
+              v-model="name"
+              :state="nameState"
+              required
+          ></b-form-input>
+        </b-form-group>
+        <b-form-group
+            label="Name"
+            label-for="name-input"
+            invalid-feedback=""
+            :state="sharedState"
+        >
+          <b-table striped hover bordered :items="sharedUsers" :fields="fields">
+            <template #cell(actions)="row">
+              <b-button v-if="row.item.user != loggedUser.email" size="sm" class="mr-1" variant="danger" @click="removeUser(row.index)">
+                Supprimer
+              </b-button>
+            </template>
+          </b-table>
+          <b-form-group
+              label-for="user-input"
+              invalid-feedback="Veuillez saisir un email valide"
+              :state="userState"
+          >
+            <b-form-input
+                id="user-input"
+                v-model="user"
+                :state="userState"
+                required
+            ></b-form-input>
+            <b-button size="sm" class="mr-1" variant="success" @click="addUser()">
+              Ajouter un utilisateur
+            </b-button>
+          </b-form-group>
+        </b-form-group>
+      </form>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import {BCard, BTabs, BTable, BButton, BTab, BCardText, BCardTitle, BIconPlusCircleFill, BModal, BFormGroup, BFormInput} from "bootstrap-vue";
+import {createJointAccount, getJointAccounts, deleteAnJointAccount} from "@/service/noscomptes";
+export default {
+  name: 'notre_compte',
+  data: function () {
+    return {
+      loggedUser: this.$store.state.loggedUser,
+      jointAccounts: [],
+      nameState: undefined,
+      sharedState: undefined,
+      userState: undefined,
+      user: "",
+      name: "",
+      sharedUsers: [{"user": this.$store.state.loggedUser.email}],
+      fields: [
+        { key: 'user', label: 'Utilisateur', sortable: true, sortDirection: 'desc' },
+        { key: 'actions', label: 'Actions' }
+      ],
+    }
+  },
+  beforeCreate() {
+    let loggedUser = this.$store.state.loggedUser
+    getJointAccounts(loggedUser.oauth_token, loggedUser.nosComptesId).then(data => {
+      // this.$store.commit('userJointAccounts', data)
+      this.jointAccounts = data
+    })
+  },
+  mounted () {
+  },
+  methods: {
+    deleteJointAccount(){
+      let loggedUser = this.$store.state.loggedUser
+      deleteAnJointAccount(loggedUser.oauth_token, loggedUser.nosComptesId, this.jointAccountIdToDelete).then(() => {
+        this.loadJointAccounts()
+        this.$refs['delete-jointAccount'].hide()
+      })
+    },
+    loadJointAccounts() {
+      let loggedUser = this.$store.state.loggedUser
+      getJointAccounts(loggedUser.oauth_token, loggedUser.nosComptesId).then(data => {
+        // this.$store.commit('userJointAccounts', data)
+        this.jointAccounts = data
+      })
+    },
+    removeUser(userToRemove) {
+      this.sharedUsers = this.sharedUsers.filter((_, index) => index != userToRemove)
+    },
+    addUser() {
+      this.userState = undefined
+      if(this.user == "") {
+        this.userState = false
+        return
+      }
+      this.sharedUsers.push({"user": this.user})
+      this.user= ""
+    },
+    validateForm() {
+      let loggedUser = this.$store.state.loggedUser
+      this.nameState= undefined
+      createJointAccount(loggedUser.oauth_token, loggedUser.nosComptesId, {"name": this.name})
+        .then(() => {
+          this.$refs['create-jointAccount'].hide();
+          this.nameState= undefined
+          this.loadJointAccounts()
+        })
+      .catch(error => {
+        if (error.response.status != 409) {
+          this.$refs['create-jointAccount'].hide()
+        } else {
+          this.nameState= false
+        }
+        })
+
+    },
+    validateDeleteJointAccount(jointAccountId) {
+      this.jointAccountIdToDelete = jointAccountId
+      this.$refs['delete-jointAccount'].show()
+    },
+    show() {
+      this.$refs['create-jointAccount'].show()
+    }
+  },
+  components: {
+    BCard,
+    BButton,
+    BTabs,
+    BTab,
+    BTable,
+    BCardText,
+    BCardTitle,
+    BIconPlusCircleFill,
+    BModal,
+    BFormGroup,
+    BFormInput
+  }
+}
+</script>
+
+<style>
+.jointAccounts-tab {
+  margin: 2% 1% 0 1%;
+  box-shadow: 0px 0px 7px 2px rgba(119, 119, 119, 0.7);
+  -moz-box-shadow: 0px 0px 7px 2px rgba(119, 119, 119, 0.7);
+  -webkit-box-shadow: 0px 0px 7px 2px rgba(119, 119, 119, 0.7);
+}
+.jointAccounts-tab .jointAccount-card{
+  margin: 1% 0% 1% 1%;
+  width: 20rem;
+  height: 20rem;
+  box-shadow: 0px 0px 3px 0px rgba(119, 119, 119, 0.4);
+  -moz-box-shadow: 0px 0px 3px 0px rgba(119, 119, 119, 0.4);
+  -webkit-box-shadow: 0px 0px 3px 0px rgba(119, 119, 119, 0.4);
+}
+.jointAccounts-tab .jointAccount-card a.btn svg{
+  margin: 0 0 0 10px;
+}
+.jointAccounts-tab .jointAccount-card.jointAccount-add a.btn {
+  background-color: white;
+  color: black;
+  border-color: black;
+}
+.jointAccounts-tab .jointAccount-card.jointAccount-add:hover {
+  background-color: green;
+}
+.jointAccounts-tab .jointAccount-card.jointAccount-add:hover .card-title, .jointAccounts-tab .jointAccount-card.jointAccount-add:hover .card-title .bi {
+  color:white!important;
+}
+.see-jointAccount {
+  margin: 0 100px 0 0;
+}
+</style>
+
diff --git a/src/components/MesComptes.vue b/src/components/MesComptes.vue
index c58370b..2ceb40c 100644
--- a/src/components/MesComptes.vue
+++ b/src/components/MesComptes.vue
@@ -2,7 +2,7 @@
   <div class="accounts-tab">
     <b-card no-body>
       <b-tabs card>
-        <b-tab title="Mes comptes" active>
+        <b-tab title="Mes comptes bancaires" active>
           <b-card style="display: inline-block;"
                   class="mb-2 account-card account-add"
           >
diff --git a/src/components/NotreCompte.vue b/src/components/NotreCompte.vue
new file mode 100644
index 0000000..07aa6e7
--- /dev/null
+++ b/src/components/NotreCompte.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="accounts-tab">
+    <b-card no-body>
+      <b-tabs card>
+        <b-tab title="Notre compte" active>
+          <b-card style="display: inline-block;"
+                  class="mb-2 account-card account-add"
+          >
+            <b-card-title>
+              <br>
+            </b-card-title>
+            <b-card-text>
+              <br>
+              </b-card-text>
+            <b-button href="#" variant="success" v-on:click="show()" >Ajouter un compte commun<b-icon-plus-circle-fill style="color:green"></b-icon-plus-circle-fill></b-button>
+
+          </b-card>
+          <b-card style="display: inline-block;" v-for="account in accounts" :key="account.id"
+              :title=account.name
+              class="mb-2 account-card"
+          >
+            <b-card-text>
+              {{account.name}}
+            </b-card-text>
+            <b-button :href="'/account/'+account.id" variant="primary" class="see-account" >Voir</b-button>
+            <b-button href="#" variant="danger" v-on:click="validateDeleteAccount(account.id)">Supprimer</b-button>
+
+          </b-card>
+        </b-tab>
+      </b-tabs>
+    </b-card>
+    <b-modal ref="delete-account" size="lg" centered title="">
+      <template #modal-header="{ }">
+      </template>
+      <template #default="{ }">
+        <p>Etes vous sûr ?</p>
+      </template>
+
+      <template #modal-footer="{ ok, cancel }">
+        <b-button size="sm" variant="danger" @click="deleteAccount()">
+          Supprimer
+        </b-button>
+        <!-- Button with custom close trigger value -->
+        <b-button size="sm" variant="outline-secondary" @click="show=cancel()">
+          Annuler
+        </b-button>
+      </template>
+    </b-modal>
+    <b-modal ref="create-account" size="lg" centered title="">
+      <template #modal-header="{  }">
+        <h5>Ajout d'un compte</h5>
+      </template>
+      <template #modal-footer="{ ok, cancel }">
+        <b-button size="sm" variant="success" @click="validateForm()">
+          Créer
+        </b-button>
+        <b-button size="sm" variant="danger" @click="cancel()">
+          Fermer
+        </b-button>
+      </template>
+      <form ref="form" @submit.stop.prevent="handleSubmit">
+        <b-form-group
+            label="Name"
+            label-for="name-input"
+            invalid-feedback="Le nom du compte est requis"
+            :state="nameState"
+        >
+          <b-form-input
+              id="name-input"
+              v-model="name"
+              :state="nameState"
+              required
+          ></b-form-input>
+        </b-form-group>
+        <b-form-group
+            label="Banque"
+            label-for="provider-input"
+            invalid-feedback="La banque est requise"
+            :state="nameState">
+          <b-form-select v-model="provider" :options="options"></b-form-select>
+        </b-form-group>
+      </form>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import {BCard, BTabs, BButton, BTab, BCardText, BCardTitle, BIconPlusCircleFill, BModal, BFormGroup, BFormSelect, BFormInput} from "bootstrap-vue";
+import {createAccount, getAccounts, deleteAnAccount} from "@/service/noscomptes";
+export default {
+  name: 'notre_compte',
+  data: function () {
+    return {
+      accounts: [],
+      nameState: undefined,
+      name: "",
+    }
+  },
+  beforeCreate() {
+    let loggedUser = this.$store.state.loggedUser
+    getAccounts(loggedUser.oauth_token, loggedUser.nosComptesId).then(data => {
+      // this.$store.commit('userAccounts', data)
+      this.accounts = data
+    })
+  },
+  mounted () {
+  },
+  methods: {
+    deleteAccount(){
+      let loggedUser = this.$store.state.loggedUser
+      deleteAnAccount(loggedUser.oauth_token, loggedUser.nosComptesId, this.accountIdToDelete).then(() => {
+        this.loadAccounts()
+        this.$refs['delete-account'].hide()
+      })
+    },
+    loadAccounts() {
+      let loggedUser = this.$store.state.loggedUser
+      getAccounts(loggedUser.oauth_token, loggedUser.nosComptesId).then(data => {
+        // this.$store.commit('userAccounts', data)
+        this.accounts = data
+      })
+    },
+    validateForm() {
+      let loggedUser = this.$store.state.loggedUser
+      this.nameState= undefined
+      createAccount(loggedUser.oauth_token, loggedUser.nosComptesId, {"name": this.name, "provider": this.provider})
+        .then(() => {
+          this.$refs['create-account'].hide();
+          this.nameState= undefined
+          this.loadAccounts()
+        })
+      .catch(error => {
+        if (error.response.status != 409) {
+          this.$refs['create-account'].hide()
+        } else {
+          this.nameState= false
+        }
+        })
+
+    },
+    validateDeleteAccount(accountId) {
+      this.accountIdToDelete = accountId
+      this.$refs['delete-account'].show()
+    },
+    show() {
+      this.$refs['create-account'].show()
+    }
+  },
+  components: {
+    BCard,
+    BButton,
+    BTabs,
+    BTab,
+    BCardText,
+    BCardTitle,
+    BIconPlusCircleFill,
+    BModal,
+    BFormGroup,
+    BFormSelect,
+    BFormInput
+  }
+}
+</script>
+
+<style>
+.accounts-tab {
+  margin: 2% 1% 0 1%;
+  box-shadow: 0px 0px 7px 2px rgba(119, 119, 119, 0.7);
+  -moz-box-shadow: 0px 0px 7px 2px rgba(119, 119, 119, 0.7);
+  -webkit-box-shadow: 0px 0px 7px 2px rgba(119, 119, 119, 0.7);
+}
+.accounts-tab .account-card{
+  margin: 1% 0% 1% 1%;
+  width: 20rem;
+  height: 20rem;
+  box-shadow: 0px 0px 3px 0px rgba(119, 119, 119, 0.4);
+  -moz-box-shadow: 0px 0px 3px 0px rgba(119, 119, 119, 0.4);
+  -webkit-box-shadow: 0px 0px 3px 0px rgba(119, 119, 119, 0.4);
+}
+.accounts-tab .account-card a.btn svg{
+  margin: 0 0 0 10px;
+}
+.accounts-tab .account-card.account-add a.btn {
+  background-color: white;
+  color: black;
+  border-color: black;
+}
+.accounts-tab .account-card.account-add:hover {
+  background-color: green;
+}
+.accounts-tab .account-card.account-add:hover .card-title, .accounts-tab .account-card.account-add:hover .card-title .bi {
+  color:white!important;
+}
+.account-card .card-body {
+  text-align: center;
+  align-self: center;
+}
+.tab-pane.card-body {
+  margin: 0 1%
+}
+.see-account {
+  margin: 0 100px 0 0;
+}
+</style>
+
diff --git a/src/router/router.js b/src/router/router.js
index 577e373..0fa8284 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -4,6 +4,7 @@ import Home from '@/views/Home'
 import Login from '@/views/Login'
 import store from "../store/store";
 import MesComptes from "@/components/MesComptes";
+import JointAccount from "@/components/JointAccount";
 import Account from "@/components/Account"
 Vue.use(Router)
 
@@ -18,7 +19,11 @@ let baseRoutes = [
     }, {
       path: 'account/:accountId',
       component: Account,
-    }]
+    },
+      {
+        path: "jointAccount",
+        component: JointAccount,
+      }]
   },
   {
     path: '/login',
diff --git a/src/service/expenses.js b/src/service/expenses.js
index 6006395..100165a 100644
--- a/src/service/expenses.js
+++ b/src/service/expenses.js
@@ -1,3 +1,4 @@
+import Vue from 'vue'
 
 export const formatExpenses = (expenses) => {
     const formattedExpenses = []
@@ -24,3 +25,105 @@ export const formatExpenses = (expenses) => {
         }]
     }
 }
+
+export const formatExpensesChart = (expenses) => {
+    const reduceIncome = []
+    const reduceOutcome = []
+    const reduceTotal = []
+    const outcome = []
+    const income = []
+    const total = []
+    expenses.sort(function(a,b){
+        // Turn your strings into dates, and then subtract them
+        // to get a value that is either negative, positive, or zero.
+        return new Date(a.expenseDate) - new Date(b.expenseDate);
+    });
+    for (const expense of expenses) {
+        var month = Vue.moment(expense.expenseDate).format('MMMM');
+        if (expense.value > 0) {
+            if (reduceIncome[month] === undefined) {
+                reduceIncome[month] = expense.value
+            } else {
+                reduceIncome[month] += expense.value
+            }
+        } else {
+            if (reduceOutcome[month] === undefined) {
+                reduceOutcome[month] = expense.value
+            } else {
+                reduceOutcome[month] += expense.value
+            }
+        }
+        if (reduceTotal[month] === undefined) {
+            reduceTotal[month] = expense.value
+        } else {
+            reduceTotal[month] += expense.value
+        }
+    }
+    for (const date in reduceOutcome) {
+        outcome[outcome.length] = { x: date, y: reduceOutcome[date] }
+    }
+    for (const date in reduceIncome) {
+        income[income.length] = { x: date, y: reduceIncome[date] }
+    }
+
+    for (const date in reduceTotal) {
+        total[total.length] = { x: date, y: reduceTotal[date] }
+    }
+
+    console.log(income)
+    console.log(outcome)
+    return {
+        datasets: [{
+            type: "line",
+            label: 'total',
+            data: total,
+            fill: false,
+            borderColor: 'rgb(0, 0, 0)',
+            backgroundColor:'rgb(198, 24, 24)',
+            tension: 0.1
+        },{
+            label: 'Income',
+            data: income,
+            fill: false,
+            borderColor: 'rgb(0, 0, 0)',
+            backgroundColor:'rgb(24,198,24)',
+            tension: 0.1
+        },
+            {
+                label: 'Outcome',
+                data: outcome,
+                fill: false,
+                borderColor: 'rgb(0, 0, 0)',
+                backgroundColor:'rgb(198, 24, 24)',
+                tension: 0.1
+            }]
+    }
+}
+
+export const formatIOTChartOption = (expenses) => {
+    const months = []
+    const monthLabel = []
+    for (const expense of expenses) {
+        var month = Vue.moment(expense.expenseDate).format('MMMM');
+        months[month] = month
+    }
+    for (const month in months) {
+        monthLabel[monthLabel.length] = month
+    }
+    console.log(months)
+    console.log(monthLabel)
+    return  {
+        scales: {
+            xAxes: [{
+                stacked: true,
+                type: 'category',
+                labels: monthLabel,
+            }],
+            yAxes: [{
+                ticks: {
+                    beginAtZero: false
+                }
+            }]
+        }
+    }
+}
diff --git a/src/service/noscomptes.js b/src/service/noscomptes.js
index 691a32d..87fa729 100644
--- a/src/service/noscomptes.js
+++ b/src/service/noscomptes.js
@@ -57,6 +57,15 @@ export const getExpenses = (oauthToken, userId, accountId) => {
     })
 }
 
+export const getExpensesBetweenDate = (oauthToken, userId, accountId, from, to) => {
+    const headers = {
+        "Authorization": "Bearer " + oauthToken
+    };
+    return Vue.axios.get("http://localhost:8081/users/"+userId+"/accounts/"+accountId+"/expenses?from="+from+"&to="+to, {headers}).then(response => {
+        return response.data
+    })
+}
+
 
 export const sendCSVImportExpenses = (oauthToken, userId, accountId, file) => {
     const headers = {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 7a400ce..6ec6a8f 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -6,6 +6,7 @@
         <b-navbar-nav>
           <b-nav-item href="/accounts">Mes comptes</b-nav-item>
           <b-nav-item href="#">Nos comptes</b-nav-item>
+          <b-nav-item href="/jointAccount">Compte joint</b-nav-item>
         </b-navbar-nav>
         <b-navbar-nav align="end" class="right-element">
           <b-nav-item-dropdown left dropleft>