--- a/swtr/static/css/swtmaker.css
+++ b/swtr/static/css/swtmaker.css
@@ -1,5 +1,10 @@
 #swt-maker {
 }
+#signinview {
+  margin 0 20px;
+  padding: 10px;
+  text-align: center;
+}
 #img-annotation-wrapper {
   margin: 30px auto 0 auto;
   /*border: 1px solid black;*/
--- a/swtr/static/js/swtmaker.js
+++ b/swtr/static/js/swtmaker.js
@@ -149,7 +149,10 @@
           //TODO: move this to a annotation view or something
           anno.removeAll();
           _.each(swtr.sweets.models, function(swt) {
-            swt.get('how')['editable'] = false;
+            if(!_.has(swt.get('how'), 'editable')) {
+              swt.get('how')['editable'] = false;
+              swt.get('how').text += '\n - by ' + swt.get('who');
+            }
             anno.addAnnotation(swt.get('how'));
           });
           //console.log(swtr.sweets.toJSON());

@@ -161,9 +164,10 @@
         }
       });
       this.cleanUp();
+      return false;
     },
     cleanUp: function() {
-      console.log('cleaning up');
+      //console.log('cleaning up');
       $(this.el).hide();
     }
   });
@@ -172,7 +176,8 @@
     el: $('#swt-maker'),
     events: {
       'click #img-url-submit': 'setImage',
-      'click #sweet': 'sweet'
+      'click #sweet': 'sweet',
+      'click #signin-credentials': 'getSignInCredentials'
     },
     initialize: function() {
       //var allElements = $('body *');
@@ -213,7 +218,7 @@
     getExistingAnnotations: function() {
       this.helpview.step(0);
       this.$overlay.show();
-      console.log('getting existing annotations of ', this.imgURL);
+      //console.log('getting existing annotations of ', this.imgURL);
       swtr.sweets.getAll({
         where: this.imgURL,
         success: function(data) {
@@ -221,7 +226,7 @@
             swtr.sweets.add(data);
             _.each(data, function(swt) {
               swt.how['editable'] = false;
-              swt.how.text+= '\n - by ' + swt.who;
+              swt.how.text += '\n - by ' + swt.who;
               anno.addAnnotation(swt.how);
             });
             swtr.appView.$overlay.hide();
@@ -230,7 +235,7 @@
         },
         error: function(jqxhr, error, statusText) {
           if(jqxhr.status === 404) { //annotations don't exist for this image
-            console.log('annotations don\'t exist for this image. Create one!');
+            //console.log('annotations don\'t exist for this image. Create one!');
           }
           swtr.appView.$overlay.hide();
           swtr.appView.helpview.step(2);
@@ -261,6 +266,41 @@
       this.getSweets();
       this.showSweets();
       return false;
+    },
+    getSignInCredentials: function(event) {
+      event.preventDefault();
+      if(swtr.who === 'Guest' && !$('#username').length) {
+        var template = _.template($('#signin-credentials-template').html());
+        $('#signin-msg').html(template());
+      }
+      else if($('#username').length && $('#username').val()) {
+        var username = $('#username').val();
+        var password = $('#password').val();
+        this.signIn(username, password);
+      }
+      return false;
+    },
+    signIn: function(username, password) {
+      this.$overlay.show();
+      $.ajax({
+        url: swtr.swtstoreURL() + swtr.endpoints.auth,
+        type: 'POST',
+        data: {user: username, hash: password},
+        success: function(data) {
+          swtr.appView.$overlay.hide();
+          swtr.who = username;
+          $('#signinview').html('You are signed in.');
+        },
+        error: function(jqxhr, status, error) {
+          swtr.appView.$overlay.hide();
+          if(error === 'FORBIDDEN') {
+            $('#signin-msg').html('Error signing in. Please check your username and password. ');
+          }
+          else {
+            $('#signin-msg').html('Error signin in. Please try again.');
+          }
+        }
+      });
     }
   });
 
@@ -295,6 +335,7 @@
                 break;
       }
       $(this.el).html(text);
+      $(window).scrollTop(0, 0);
     }
   });
 
--- a/swtr/templates/index.html
+++ b/swtr/templates/index.html
@@ -16,6 +16,14 @@
 
     <div id="swt-maker" class="container">
       <div id="helpview" class="alert alert-info"></div>
+      <div class="row" id="signinview">
+        <form class="form-inline" role="form">
+          <span id="signin-msg">You are not signed in. </span>
+          <button class="btn btn-sm btn-primary" id="signin-credentials">
+            Sign In
+          </button>
+        </form>
+      </div>
       <div id="img-input">
         <div class="form-group">
           <input type="text" placeholder="Enter URL of the image"
@@ -44,7 +52,8 @@
     <script>
       window.swtr = window.swtr || {};
       swtr.swtstoreURL = function() { return '{{ conf.swtstoreURL }}'; }
-      swtr.endpoints = {'get': '/sweets/q', 'post': '/sweets'};
+      swtr.endpoints = {'get': '/sweets/q', 'post': '/sweets', 'auth':
+        '/authenticate'};
       window.onload = function() {
         swtr.init();
       };
@@ -62,6 +71,16 @@
         /<a href="<%= where %>"><%= where.substr(0, 30) + '...' %></a>
         <%= how %>
       </li>
+    </script>
+    <script type="text/template" id="signin-credentials-template">
+        <div class="form-group">
+          <label class="sr-only" for="username">Username</label>
+          <input type="text" class="form-control" id="username" placeholder="Enter username">
+        </div>
+        <div class="form-group">
+          <label class="sr-only" for="password">Password</label>
+          <input type="password" class="form-control" id="password" placeholder="Password">
+        </div>
     </script>
   </body>
 </html>