diff --git a/index.html b/index.html
index 996b3a6..bdb38e5 100644
--- a/index.html
+++ b/index.html
@@ -92,7 +92,7 @@
                 </ul>
             </div>
             <ul class="side-nav">
-                <li><a>TODO</a></li>
+                <todo></todo>
             </ul>
         </div>
     </nav>
@@ -225,7 +225,7 @@
                                         <div class="switch">
                                             <label>
                                                 Non
-                                                <input v-model="client.decouvert" type="checkbox" @click="decouvert(client.idCarte, client.decouvert, $event)">
+                                                <input v-model="client.decouvert" type="checkbox" @click="c_decouvert(client, $event)">
                                                 <span class="lever"></span>
                                                 Oui
                                             </label>
@@ -233,7 +233,7 @@
                                     </li>
                                 </ul>
                                 <h5>Transactions</h5>
-                                <p>TODO</p>
+                                <todo></todo>
                             </div>
                         </li>
                     </ul>
@@ -281,9 +281,60 @@
                 </div>
                 <div id="utilisateurs">
                     <h4>Liste des utilisateurs</h4>
+                    <button @click="actuUtilisateurs">Rafraîchir</button>
+                    <ul class="collapsible popout" data-collapsible="accordion">
+                        <li v-for="utilisateur in utilisateurs">
+                            <div class="collapsible-header">
+                                <i class="material-icons" v-if="utilisateur.droit == 1">assignment_ind</i>
+                                <i class="material-icons" v-if="utilisateur.droit == 2">perm_identity</i>
+                                <i class="material-icons" v-if="utilisateur.droit == 3">supervisor_account</i>
+                                {{ utilisateur.login }}
+                            </div>
+                            <div class="collapsible-body">
+                                <h5>Changer de droit</h5>
+                                <form @change="u_droit(utilisateur)">
+                                    <p>
+                                        <input :name="'droit_' + utilisateur.login" type="radio" :id="'droit_' + utilisateur.login + '_1'" v-model="utilisateur.droit" value="1"/>
+                                        <label :for="'droit_' + utilisateur.login + '_1'">BDE</label>
+                                    </p>
+                                    <p>
+                                        <input :name="'droit_' + utilisateur.login" type="radio" :id="'droit_' + utilisateur.login + '_2'" v-model="utilisateur.droit" value="2"/>
+                                        <label :for="'droit_' + utilisateur.login + '_2'">Bar</label>
+                                    </p>
+                                    <p>
+                                        <input :name="'droit_' + utilisateur.login" type="radio" :id="'droit_' + utilisateur.login + '_3'" v-model="utilisateur.droit" value="3"/>
+                                        <label :for="'droit_' + utilisateur.login + '_3'">Président</label>
+                                    </p>
+                                </form>
+                                <h5>Changer de mot de passe</h5>
+                                <form @submit="u_mdp(utilisateur)">
+                                    <div class="input-field">
+                                        <i class="material-icons prefix">vpn_key</i>
+                                        <input type="password" name="mdp" v-model="utilisateur.mdp">
+                                        <label for="utilisateur.mdp">Mot de passe</label>
+                                    </div>
+                                    <button :disabled="!utilisateur.mdp">Changer de mot de passe</button>
+                                </form>
+                                <h5> Changer de carte </h5>
+                                <form @submit="u_carte(utilisateur)">
+                                    <div class="input-field">
+                                        <i class="material-icons prefix">credit_card</i>
+                                        <input type="text" name="carte" length="8" v-model="utilisateur.idCarte" >
+                                        <label for="utilisateur.idCarte">Carte</label>
+                                    </div>
+                                    <button :disabled="!utilisateur.idCarte">Changer de carte</button>
+                                </form>
+
+                                <h5>Transactions</h5>
+                                <todo></todo>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
                 </div>
                 <div id="statistiques">
                     <h4>Statistiques</h4>
+                    <todo></todo>
                 </div>
             </div>
         </div>
diff --git a/js/init.js b/js/init.js
index 952ad63..aefd451 100644
--- a/js/init.js
+++ b/js/init.js
@@ -12,10 +12,13 @@ var TRANSACTION_DUREE = 60
 var PEUT_NFC = false
 
 // Préparation de l'interactivité
+function desactiverForms() {
+    $('form').submit(function() { return false });
+}
 $(function(){
     $('.button-collapse').sideNav();
     $('.modal-trigger').leanModal()
-    $('form').submit(function() { return false });
+    desactiverForms()
     $('[name=idCarte]').characterCounter();
 });
 
@@ -39,6 +42,7 @@ var app = new Vue({
         // Données
         clients: [],
         transactions: [],
+        utilisateurs: [],
     },
     methods: {
         // API
@@ -84,6 +88,20 @@ var app = new Vue({
                 }
             })
         },
+        actuUtilisateurs: function() {
+            var that = this
+            this.api("utilisateur/liste", {}, function(retour, donnees) {
+                switch(retour) {
+                    case "ok":
+                        that.utilisateurs = donnees.utilisateurs
+                        break;
+
+                    default:
+                        that.erreur(retour, donnees);
+                        break;
+                }
+            })
+        },
 
         // Affichage
         toast: function(texte) {
@@ -120,15 +138,57 @@ var app = new Vue({
             }))
             that.toast(interieur);
         },
-        decouvert: function(idCarte, decouvert, e) {
+        c_decouvert: function(client, e) {
             var that = this
             // Hack pour récupérer la vraie valeur (decouvert peut mais pas obligatoirement avoir la bonne valeur tel qu'implémenté dans le HTML actuellmenent)
             if (typeof(e) == 'object') {
-                decouvert = $(e.target).is(':checked')
+                client.decouvert = $(e.target).is(':checked')
             }
-            this.api("client/decouvert", {idCarte: idCarte, decouvert: decouvert}, function(retour, donnees) {
+            this.api("client/decouvert", {idCarte: client.idCarte, decouvert: client.decouvert}, function(retour, donnees) {
+                switch(retour) {
+                    case "ok":
+                        break;
+
+                    default:
+                        that.erreur(retour, donnees);
+                        break;
+                }
+            });
+        },
+        u_mdp: function(utilisateur) {
+            var that = this
+            this.api("utilisateur/mdp", {login: utilisateur.login, mdp: utilisateur.mdp}, function(retour, donnees) {
                 switch(retour) {
                     case "ok":
+                        that.toast(utilisateur.login + " : mot de passe changé")
+                        break;
+
+                    default:
+                        that.erreur(retour, donnees);
+                        break;
+                }
+            });
+        },
+        u_droit: function(utilisateur) {
+            var that = this
+            this.api("utilisateur/droit", {login: utilisateur.login, droit: utilisateur.droit}, function(retour, donnees) {
+                switch(retour) {
+                    case "ok":
+                        that.toast(utilisateur.login + " : droit changé")
+                        break;
+
+                    default:
+                        that.erreur(retour, donnees);
+                        break;
+                }
+            });
+        },
+        u_carte: function(utilisateur) {
+            var that = this
+            this.api("utilisateur/carte", {login: utilisateur.login, idCarte: utilisateur.idCarte}, function(retour, donnees) {
+                switch(retour) {
+                    case "ok":
+                        that.toast(utilisateur.login + " : carte changée")
                         break;
 
                     default:
@@ -231,6 +291,14 @@ var app = new Vue({
             return  minutes + ':' + (secondes < 10 ? '0' : '') + secondes
         }
     },
+    components: {
+        'todo': Vue.extend({template: '<div class="chip green"> Prochainement </div>'}),
+    },
+    watch: {
+        utilisateurs: function() {
+            desactiverForms()
+        }
+    }
 })
 
 Vue.filter('date', function(timestamp) {
diff --git a/scss/style.scss b/scss/style.scss
index 235b39f..3bf8c22 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -27,6 +27,7 @@ $tabs-bg-color: $primary-color !default;
 
 // Permet le footer de se mettre toujours en bas
 body {
+    overflow-y: scroll; // Toujours afficher la barre de défilment pour éviter les sautements
     display: flex;
     min-height: 100vh;
     flex-direction: column;
@@ -107,6 +108,9 @@ form {
 
 .collapsible-body {
     padding: 20px;
+    p {
+        padding: inherit;
+    }
 }
 
 
--
libgit2 0.21.2