diff --git a/css/style.css b/css/style.css
index bb4fde8..07a746f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -24,7 +24,6 @@ nav .tabs .indicator {
 #toast-container {
     top: inherit;
     bottom: 10%;
-
 }
 
 #toast a {
@@ -41,5 +40,5 @@ nav .tabs .indicator {
 footer.page-footer {
     margin-top: 0;
     padding-top: 0;
-
 }
+
diff --git a/index.html b/index.html
index 45214ac..582d5a8 100644
--- a/index.html
+++ b/index.html
@@ -23,26 +23,66 @@
             <a class="modal-action modal-close waves-effect btn-flat">Ça marche</a>
         </div>
     </div>
+    <ul id="menuUtilisateur" class="dropdown-content">
+        <li><a>Se déconnecter</a></li>
+        <li><a>Changer de mot de passe</a></li>
+        <li><a>Changer de carte</a></li>
+        <li class="prezSeul"><a>Gestion des utilisateurs</a></li>
+    </ul>
+    <div id="passerCarte" class="modal">
+        <div class="modal-content">
+            <h4>Passez la carte du client</h4>
+            <p>Veuillez passer la carte du client concerné pour finaliser l'action suivante : <strong>recharger 10 €</strong>.</p>
+        </div>
+        <div class="modal-footer">
+            <a class="modal-action modal-close waves-effect waves-red btn-flat">Annuler</a>
+        </div>
+    </div>
+    <div id="soldeInsuffisant" class="modal">
+        <div class="modal-content">
+            <h4>Solde insuffisant</h4>
+            <p>
+                Le solde de la carte <strong>QUAELUY1RO</strong> n'est pas suffisant pour effectuer un paiement de 3,50 €.<br/> Solde actuel : 2,70 €<br/> Manquant : 0,80 €<br/>
+            </p>
+        </div>
+        <div class="modal-footer">
+            <a href="#rechargement" class="modal-action modal-close waves-effect waves-green btn-flat">Recharger</a>
+            <a class="modal-action modal-close waves-effect waves-red btn-flat">Annuler</a>
+        </div>
+    </div>
+
     <!-- Page -->
     <nav class="red" role="navigation">
         <div class="nav-wrapper container">
-            <a id="logo-container" href="#" class="brand-logo">{{ nomApplication }}</a>
+            <a class="brand-logo" v-if="page == 'connexion'">10⁵</a>
+            <div class="left" v-else>
+                <a class="breadcrumb">10⁵</a>
+                <a class="breadcrumb" v-if="page == 'operations'">Opérations</a>
+            </div>
             <ul class="right hide-on-med-and-down">
                 <li v-if="connecte">
-                    <a class="dropdown-button" href="#!" data-activates="menuUtilisateur">
+                    <a class="dropdown-button" data-activates="menuUtilisateur">
                         <i class="material-icons">perm_identity</i> {{ login }} (<i class="material-icons">timer</i> {{ timer }})
                     </a>
                 </li>
             </ul>
-            <ul id="nav-mobile" class="side-nav">
-                <li><a href="#">TODO</a></li>
+            <ul class="side-nav">
+                <li><a>TODO</a></li>
+            </ul>
+        </div>
+        <div class="col s12 red" v-show="page == 'operations'">
+            <ul class="tabs red">
+                <li class="tab col s3"><a href="#creation">Création</a></li>
+                <li class="tab col s3"><a href="#rechargement">Rechargement</a></li>
+                <li class="tab col s3"><a class="active" href="#paiement">Paiement</a></li>
+                <li class="tab col s3"><a href="#vidange">Vidange</a></li>
             </ul>
         </div>
     </nav>
 
     <div class="section no-pad-bot" id="main">
-        <div class="container">
-            <br><br><br>
+        <br><br><br>
+        <div class="container" v-show="page == 'connexion'">
             <h4>Se connecter</h4>
             <h5>Avec votre identifiant et votre mot de passe</h5>
             <div class="row">
@@ -60,7 +100,7 @@
                         </div>
                     </div>
                     <div class="row">
-                        <a href="#!" class="btn-large waves-effect waves-light disabled" @click="connecter" :class="{'disabled': !peutConnecter}">Se connecter</a>
+                        <a class="btn-large waves-effect waves-light disabled" @click="connecter" :class="{'disabled': !peutConnecter}">Se connecter</a>
                     </div>
                 </form>
             </div>
@@ -69,8 +109,75 @@
                 <p>Passez-la simplement devant le lecteur</p>
             </div>
         </div>
+
+        <div class="container" v-show="page == 'operations'">
+            <div class="row center">
+                <div id="creation">
+                    <h5>Créer un nouveau client</h5>
+                    <div class="row">
+                        <form class="col s12">
+                            <div class="input-field col s12">
+                                <input type="number" name="solde">
+                                <label for="solde">Solde initial (€)</label>
+                            </div>
+                            <div class="row center">
+                                <a class="btn-large waves-effect waves-light">Créer</a>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <div id="rechargement">
+                    <h5>Recharger un client</h5>
+                    <div class="row">
+                        <form class="col s12">
+                            <div class="input-field col s12">
+                                <input type="number" name="credit">
+                                <label for="credit">Crédit (€)</label>
+                            </div>
+                            <div class="row center">
+                                <a class="btn-large waves-effect waves-light btn modal-trigger">Recharger</a>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <div id="paiement">
+                    <h5>Vendre à un client</h5>
+                    <div class="row">
+                        <form class="col s12">
+                            <div id="grilleBieres">
+                                <div class="row">
+                                    <div class="col s4"><a class="waves-effect waves-light btn">1</a></div>
+                                    <div class="col s4"><a class="waves-effect waves-light btn">2</a></div>
+                                    <div class="col s4"><a class="waves-effect waves-light btn">3</a></div>
+                                </div>
+                                <div class="row">
+                                    <div class="col s4"><a class="waves-effect waves-light btn">4</a></div>
+                                    <div class="col s4"><a class="waves-effect waves-light btn">5</a></div>
+                                    <div class="col s4"><a class="waves-effect waves-light btn">6</a></div>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="input-field col s12">
+                                    <input type="number" name="prix">
+                                    <label for="prix">Prix (€)</label>
+                                </div>
+                            </div>
+                            <div class="row center">
+                                <a class="btn-large waves-effect waves-light">Payer</a>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <div id="vidange">
+                    <h5>Vider le contenu de la carte d'un client</h5>
+                    <div class="row center">
+                        <a class="btn-large waves-effect waves-light">Vider</a>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-    </div>
+
     <footer class="page-footer red">
         <div class="footer-copyright">
             <div class="container">
diff --git a/js/init.js b/js/init.js
index bef48e7..10b5268 100644
--- a/js/init.js
+++ b/js/init.js
@@ -20,7 +20,7 @@ $(function(){
 var app = new Vue({
     el: 'body',
     data: {
-        nomApplication: "10⁵",
+        page: 'connexion',
         connecte: false,
         erreurTitre: '',
         erreurMessage: '',
@@ -54,7 +54,8 @@ var app = new Vue({
                         that.droit = donnees.droit
                         that.jeton = donnees.jeton
                         that.connecte = that.date
-                        that.toast("Correctement identifié en tant que " + that.login + " pour 10 minutes")
+                        that.toast("Correctement identifié en tant que " + that.login + " pour " + JETON_DUREE/60+ " minutes")
+                        that.page = 'operations'
                        break;
 
                     case "identifiants_invalides":
@@ -74,7 +75,9 @@ var app = new Vue({
         },
         timer: function() {
             var secondes = this.connecte + JETON_DUREE - this.date
-            return Math.floor(secondes/60) + ':' + (secondes % 60)
+            var minutes = Math.floor(secondes/60)
+            var secondes = secondes % 60
+            return  minutes + ':' + (secondes < 10 ? '0' : '') + secondes
         }
     },
 })
diff --git a/main.html b/main.html
deleted file mode 100644
index 7466a2d..0000000
--- a/main.html
+++ /dev/null
@@ -1,119 +0,0 @@
-<!-- Réutilisable -->
-<ul id="menuUtilisateur" class="dropdown-content">
-    <li><a href="#!">Se déconnecter</a></li>
-    <li><a href="#!">Changer de mot de passe</a></li>
-    <li><a href="#!">Changer de carte</a></li>
-    <li class="prezSeul"><a href="#!">Gestion des utilisateurs</a></li>
-</ul>
-<div id="passerCarte" class="modal">
-    <div class="modal-content">
-        <h4>Passez la carte du client</h4>
-        <p>Veuillez passer la carte du client concerné pour finaliser l'action suivante : <strong>recharger 10 €</strong>.</p>
-    </div>
-    <div class="modal-footer">
-        <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat">Annuler</a>
-    </div>
-</div>
-<div id="soldeInsuffisant" class="modal">
-    <div class="modal-content">
-        <h4>Solde insuffisant</h4>
-        <p>
-            Le solde de la carte <strong>QUAELUY1RO</strong> n'est pas suffisant pour effectuer un paiement de 3,50 €.<br/> Solde actuel : 2,70 €<br/> Manquant : 0,80 €<br/>
-        </p>
-    </div>
-    <div class="modal-footer">
-        <a href="#rechargement" class="modal-action modal-close waves-effect waves-green btn-flat">Recharger</a>
-        <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat">Annuler</a>
-    </div>
-</div>
-
-<!-- Page -->
-<nav class="red" role="navigation">
-    <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">10⁵</a>
-        <ul class="right hide-on-med-and-down">
-            <li><a class="dropdown-button" href="#!" data-activates="menuUtilisateur"><i class="material-icons">perm_identity</i> vigou (<i class="material-icons">timer</i> 3:12)</a></li>
-        </ul>
-
-        <ul id="nav-mobile" class="side-nav">
-            <li><a href="#">TODO</a></li>
-        </ul>
-        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
-    </div>
-    <div class="col s12 red">
-        <ul class="tabs red">
-            <li class="tab col s3"><a href="#creation">Création</a></li>
-            <li class="tab col s3"><a href="#rechargement">Rechargement</a></li>
-            <li class="tab col s3"><a class="active" href="#paiement">Paiement</a></li>
-            <li class="tab col s3"><a href="#vidange">Vidange</a></li>
-        </ul>
-    </div>
-</nav>
-<div class="section no-pad-bot" id="main">
-    <div class="container">
-        <br><br><br>
-        <div class="row center">
-            <div id="creation">
-                <h5>Créer un nouveau client</h5>
-                <div class="row">
-                    <form class="col s12">
-                        <div class="input-field col s12">
-                            <input type="number" id="solde">
-                            <label for="solde">Solde initial (€)</label>
-                        </div>
-                        <div class="row center">
-                            <a href="#!" id="creer" class="btn-large waves-effect waves-light">Créer</a>
-                        </div>
-                    </form>
-                </div>
-            </div>
-            <div id="rechargement">
-                <h5>Recharger un client</h5>
-                <div class="row">
-                    <form class="col s12">
-                        <div class="input-field col s12">
-                            <input type="number" id="credit">
-                            <label for="credit">Crédit (€)</label>
-                        </div>
-                        <div class="row center">
-                            <a href="#passerCarte" id="recharger" class="btn-large waves-effect waves-light btn modal-trigger">Recharger</a>
-                        </div>
-                    </form>
-                </div>
-            </div>
-            <div id="paiement">
-                <h5>Vendre à un client</h5>
-                <div class="row">
-                    <form class="col s12">
-                        <div id="grilleBieres">
-                            <div class="row">
-                                <div class="col s4"><a onclick="vendu()" class="waves-effect waves-light btn">1</a></div>
-                                <div class="col s4"><a class="waves-effect waves-light btn">2</a></div>
-                                <div class="col s4"><a class="waves-effect waves-light btn">3</a></div>
-                            </div>
-                            <div class="row">
-                                <div class="col s4"><a class="waves-effect waves-light btn">4</a></div>
-                                <div class="col s4"><a class="waves-effect waves-light btn">5</a></div>
-                                <div class="col s4"><a class="waves-effect waves-light btn">6</a></div>
-                            </div>
-                        </div>
-                        <div class="row">
-                            <div class="input-field col s12">
-                                <input type="number" id="prix">
-                                <label for="prix">Prix (€)</label>
-                            </div>
-                        </div>
-                        <div class="row center">
-                            <a href="#!" id="payer" onclick="soldeInsuffisant()" class="btn-large waves-effect waves-light">Payer</a>
-                        </div>
-                    </form>
-                </div>
-            </div>
-            <div id="vidange">
-                <h5>Vider le contenu de la carte d'un client</h5>
-                <div class="row center">
-                    <a href="#!" id="payer" class="btn-large waves-effect waves-light">Vider</a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
--
libgit2 0.21.2