diff --git a/front/public/js/alpha.js b/front/public/js/alpha.js
index 7f7e70bd..55aea84f 100644
--- a/front/public/js/alpha.js
+++ b/front/public/js/alpha.js
@@ -9,7 +9,8 @@ $(document).ready(function() {
   var DEFAULTDESC = "Tap/click here to update the description for this timer";
   var EMAIL;
   var JWT;
-  var COIN = new Audio("http://www.orangefreesounds.com/wp-content/uploads/2014/08/Mario-coin-sound.mp3");
+  var COIN = new Audio("http://themushroomkingdom.net/sounds/wav/smb/smb_coin.wav");
+  var OUT  = new Audio('http://themushroomkingdom.net/sounds/wav/smb/smb_mariodie.wav');
   /**
    * timerupsert is our generic API CRUD method which allows us to
    * CREATE a new timer, UPDATE the description of the timer and
@@ -332,11 +333,15 @@ $(document).ready(function() {
       event.stopImmediatePropagation();
       event.preventDefault();
       return login_or_register();
-    })
+    });
+
+    $('#logout').click(function() {
+      return logout();
+    });
 
     $('#start').click(function() {
       return start();
-    })
+    });
 
     $("#stop").click( function() {
       console.log("#stop Clicked!")
@@ -344,16 +349,23 @@ $(document).ready(function() {
     });
 
     $("#clear").click( function() {
-      localStorage.clear(); // erase all history (client-side only)
+      clear();
       boot(function(){
-        console.log("#clear localStorage - erase session/JWT & timers");
-        clearactive();
-        timers = {}; // make sure timers are cleared!
-        rendertimers(); // re-render list
         return start();
       })
     });
   }
+  /**
+   * clears everyting on the client
+   * used in logout and in dev see: https://github.com/ideaq/time/issues/115
+   */
+  var clear = function(){
+    console.log("#clear localStorage - erase session/JWT & timers");
+    localStorage.clear(); // erase all history (client-side only)
+    $("#past-timers-list").html(''); // clear past timers
+    clearactive();
+    timers = {}; // make sure timers are cleared!
+  }
 
 
   var editlistener = function(id) {
@@ -395,13 +407,18 @@ $(document).ready(function() {
        password: $('#password').val()
      };
      // >> input validation here!
-
+     db.set('email', person.email);
      JWT = localStorage.getItem('JWT');
+     var head = {}
+     if(JWT) {
+       head = {
+         Authorization: JWT
+       }
+     }
+
      $.ajax({
        type: "POST",
-       headers: {
-         Authorization: JWT
-       },
+       headers : head,
        url: "/login-or-register",
        data: person,
        dataType: "json",
@@ -416,9 +433,11 @@ $(document).ready(function() {
            })
            rendertimers();
          }
+         localStorage.setItem('JWT', xhr.getResponseHeader("authorization"));
+         JWT = xhr.getResponseHeader("authorization");
          COIN.play();
-
          $('#login').fadeOut();
+         $('#loggedinas').html(person.email);
          $('#nav').fadeIn();
        },
        error: function(xhr, err) {
@@ -428,6 +447,27 @@ $(document).ready(function() {
      });
    }
 
+   var logout = function(){
+     $.ajax({
+       type: "POST",
+       headers: {
+         Authorization: JWT
+       },
+       url: "/logout",
+       success: function(res, status, xhr) {
+         console.log('LOGOUT - - - - - - - res:')
+         console.log(res);
+         $('#nav').fadeOut();
+         $('#login').fadeIn();
+         OUT.play();
+         return clear();
+       },
+       error: function(xhr, err) {
+         console.log(err);
+       }
+     });
+   }
+
   /**
    * loadtimers fetches existing timers from API
    *
@@ -465,6 +505,13 @@ $(document).ready(function() {
     JWT = localStorage.getItem('JWT');
     if(JWT) {
       console.log('existing person', JWT);
+      var email = db.get('email');
+      console.log("EMAIL: "+email);
+      if(email) {
+        $('#login').fadeOut();
+        $('#loggedinas').html(email);
+        $('#nav').fadeIn();
+      }
       return callback();
     } else {
       $.ajax({
diff --git a/front/views/index.html b/front/views/index.html
index f754ffae..e1872170 100644
--- a/front/views/index.html
+++ b/front/views/index.html
@@ -58,8 +58,8 @@
     <section id="nav" style="display:none;">
       <div id="profile-button">
         <i class="fa fa-user"></i>
-        <p id="offlinemsg"> You are logged in as </p>
-        <i class="fa fa-sign-out" id="logout"></i>
+        <p id="offlinemsg"> You are logged in as <b id="loggedinas"> </b>&nbsp;</p>
+        <button id="logout"><i class="fa fa-sign-out" ></i>Logout</button>
       </div>
     </section>
 
@@ -90,6 +90,6 @@
 <!-- https://github.com/ideaq/faster -->
 <script src="https://rawgit.com/ideaq/faster/master/lib/client.js"></script>
 
-<i id="clear" class="fa fa-recycle" style="position:fixed; bottom:0.2em; left:10px; z-index:100; color:#BEF202; border: 1px white solid; padding:4px;"></i>
+<i id="clear" class="fa fa-recycle" style="position:fixed; bottom:0.2em; left:10px; z-index:100; color:#BEF202; border: 1px white solid; padding:4px; display: none;"></i>
   </body>
 </html>