--- a/swtr/static/css/swtmaker.css
+++ b/swtr/static/css/swtmaker.css
@@ -18,13 +18,6 @@
   margin-left: 0;
 }
 
-#signinview {
-  margin 0 20px;
-  padding: 10px;
-  text-align: center;
-  z-index: 100001;
-}
-
 #img-annotation-wrapper, #ocd-results {
   margin: 30px auto 0 auto;
 }
@@ -100,7 +93,8 @@
   background-color: rgba(255, 255, 255, 0.7);
 }
 
-#user-input-row .form-inline .form-control {
+#user-input-row .form-inline .form-control,
+#search-user-input-row .form-inline .form-control {
   width: 100%;
 }
 
--- a/swtr/static/js/img_swtr.js
+++ b/swtr/static/js/img_swtr.js
@@ -1,4 +1,105 @@
 (function(swtr) {
+
+  /* Model for Image Annotation Sweets */
+  var ImgAnnoSwt = Backbone.Model.extend({
+    defaults: {
+      'who': '',
+      'what': 'img-anno',
+      'where': '',
+      'how': {}
+    },
+    initialize: function() {
+    }
+  });
+
+  /* Collection to hold all multiple ImgAnnoSwt */
+  swtr.ImgAnnoSwts = Backbone.Collection.extend({
+    model: ImgAnnoSwt,
+    url: function() {
+      return swtr.swtstoreURL() + '/sweets';
+    },
+    // get all sweets/annotations of type #img-anno for a particular URI
+    // (where)
+    // @options is a javascript object,
+    // @options.where : URI of the resource for which swts to be fetched
+    // @options.who: optional username to filter sweets
+    // @options.success: success callback to call
+    // @options.error: error callback to call
+    getAll: function(options) {
+      // error checking
+      if(!options.where) {
+        throw Error('"where" option must be passed to get sweets of a URI');
+        return false;
+      }
+      // setting up params
+      var where = options.where,
+    who = options.who || null;
+      url = swtr.swtstoreURL() + swtr.endpoints.get + '?where=' +
+        encodeURIComponent(where) + '&access_token=' + swtr.access_token;
+      if(who) {
+        url += '&who=' + who;
+      }
+      // get them!
+      this.sync('read', this, {
+        url: url,
+        success: function() {
+          if(typeof options.success === 'function') {
+            options.success.apply(this, arguments);
+          }
+        },
+        error: function() {
+          if(typeof options.error === 'function') {
+            options.error.apply(this, arguments);
+          }
+        }
+      });
+    },
+    // post newly created sweets to a sweet store
+    // @options is a javascript object,
+    // @options.where : URI of the resource for which swts to be fetched
+    // @options.who: optional username to filter sweets
+    // @options.success: success callback to call
+    // @options.error: error callback to call,
+    post: function(options) {
+      var new_sweets = this.getNew();
+      var dummy_collection = new Backbone.Collection(new_sweets);
+
+      if(!swtr.access_token) {
+        throw new Error('Access Token is required to sweet');
+        return;
+      }
+
+      var url = swtr.swtstoreURL() + swtr.endpoints.post +
+        '?access_token=' + swtr.access_token;
+
+      this.sync('create', dummy_collection, {
+        url: url,
+        success: function() {
+          if(typeof options.success === 'function') {
+            options.success.apply(this, arguments);
+          }
+        },
+        error: function() {
+          if(typeof options.error === 'function') {
+            options.error.apply(this, arguments);
+          }
+        }
+      });
+    },
+    // return newly created models from the collection
+    getNew: function() {
+      var new_models = [];
+      this.each(function(model) {
+        if(model.isNew()) {
+          new_models.push(model);
+        }
+      });
+      return new_models;
+    },
+    // update part of the collection after a save on the server
+    update: function() {
+    }
+  });
   swtr.ImgAnnoView = Backbone.View.extend({
     el: $("#img-annotation-wrapper"),
     events: {
--- a/swtr/static/js/main.js
+++ b/swtr/static/js/main.js
@@ -4,13 +4,13 @@
   //Find a better way to do closure
   //Remove script code from the HTML page
   swtr.init = function() {
-    this.sweets = new ImgAnnoSwts();
+    this.sweets = new swtr.ImgAnnoSwts();
     this.appView = new AppView();
     this.who = 'Guest';
 
     this.app_router = new AppRouter();
     Backbone.history.start();
-    this.app_router.navigate('home');
+    this.app_router.start();
 
     $.ajaxSetup({
       xhrFields: {
@@ -39,107 +39,6 @@
     }
   };
 
-  /* Model for Image Annotation Sweets */
-  var ImgAnnoSwt = Backbone.Model.extend({
-    defaults: {
-      'who': '',
-      'what': 'img-anno',
-      'where': '',
-      'how': {}
-    },
-    initialize: function() {
-    }
-  });
-
-  /* Collection to hold all multiple ImgAnnoSwt */
-  var ImgAnnoSwts = Backbone.Collection.extend({
-    model: ImgAnnoSwt,
-    url: function() {
-      return swtr.swtstoreURL() + '/sweets';
-    },
-    // get all sweets/annotations of type #img-anno for a particular URI
-    // (where)
-    // @options is a javascript object,
-    // @options.where : URI of the resource for which swts to be fetched
-    // @options.who: optional username to filter sweets
-    // @options.success: success callback to call
-    // @options.error: error callback to call
-    getAll: function(options) {
-      // error checking
-      if(!options.where) {
-        throw Error('"where" option must be passed to get sweets of a URI');
-        return false;
-      }
-      // setting up params
-      var where = options.where,
-          who = options.who || null;
-      url = swtr.swtstoreURL() + swtr.endpoints.get + '?where=' +
-        encodeURIComponent(where) + '&access_token=' + swtr.access_token;
-      if(who) {
-        url += '&who=' + who;
-      }
-      // get them!
-      this.sync('read', this, {
-        url: url,
-        success: function() {
-          if(typeof options.success === 'function') {
-            options.success.apply(this, arguments);
-          }
-        },
-        error: function() {
-          if(typeof options.error === 'function') {
-            options.error.apply(this, arguments);
-          }
-        }
-      });
-    },
-    // post newly created sweets to a sweet store
-    // @options is a javascript object,
-    // @options.where : URI of the resource for which swts to be fetched
-    // @options.who: optional username to filter sweets
-    // @options.success: success callback to call
-    // @options.error: error callback to call,
-    post: function(options) {
-      var new_sweets = this.getNew();
-      var dummy_collection = new Backbone.Collection(new_sweets);
-
-      if(!swtr.access_token) {
-        throw new Error('Access Token is required to sweet');
-        return;
-      }
-
-      var url = swtr.swtstoreURL() + swtr.endpoints.post +
-            '?access_token=' + swtr.access_token;
-
-      this.sync('create', dummy_collection, {
-        url: url,
-        success: function() {
-          if(typeof options.success === 'function') {
-            options.success.apply(this, arguments);
-          }
-        },
-        error: function() {
-          if(typeof options.error === 'function') {
-            options.error.apply(this, arguments);
-          }
-        }
-      });
-    },
-    // return newly created models from the collection
-    getNew: function() {
-      var new_models = [];
-      this.each(function(model) {
-        if(model.isNew()) {
-          new_models.push(model);
-        }
-      });
-      return new_models;
-    },
-    // update part of the collection after a save on the server
-    update: function() {
-    }
-  });
-
   var SweetsView = Backbone.View.extend({
     el: $('#sweet-list-wrapper'),
     events: {


@@ -370,20 +269,19 @@
       'click #user-input-submit': 'submitUserInput',
       'click #sweet': 'sweet',
       'click #sign-in': 'signIn',
-      'click #ocd-source': 'sourceChanged'
       //'mouseup .annotorious-editor-button-save': 'addnew_anno'
     },
     initialize: function() {
       // initialize components
       this.source = 'none';
-      this.helpview = new HelpView();
+      //this.helpview = new HelpView();
       this.sweetsview = new SweetsView({collection: swtr.sweets});
 
       // cache jquery selected elements which are used frequently
       this.$overlay = $('#app-overlay');
       this.$img = $('#annotatable-img');
 
-      this.helpview.step(1);
+      //this.helpview.step(1);
       // initialize the oauth stuff
       this.oauth = new Oauth({
         app_id: swtr.app_id,
@@ -419,10 +317,12 @@
           swtr.imgAnnoView.setImage(url);
         }
         else {
-          swtr.imgAnnoView = new swtr.ImgAnnoView({collection:swtr.sweets,
-                                                   img: this.$img[0],
-                                                   $img: this.$img,
-                                                   url: url});
+          swtr.imgAnnoView = new swtr.ImgAnnoView({
+            collection:swtr.sweets,
+            img: this.$img[0],
+            $img: this.$img,
+            url: url
+          });
         }
         return false;
       }








@@ -496,61 +396,70 @@
     },
     userLoggedIn: function(username) {
       swtr.who = username;
-      var text = 'Signed in as <b>' + swtr.who + '</b>';
+      var text = 'Signed in as <b><u>' + swtr.who + '</u></b>';
       $('#signinview').html(text);
     },
     userLoggedOut: function() {
       swtr.who = 'Guest';
       $('#signinview').html('Logged out');
+    }
+  });
+
+
+  var PlayAreaView = Backbone.View.extend({
+    el: $('#play-page'),
+    events: {
     },
-    changeURLInputPlaceholder: function(source) {
-      switch (source) {
-        case 'ocd'  : $('#user-input').attr('placeholder', 'Enter search query');
-                      break;
-        case 'none' : $('#user-input').attr('placeholder', 'Enter URL of image or web page');
-                      break;
-      }
+    initialize: function() {
+      this.render();
     },
-    // function to change the source in the application and update the UI
-    changeSource: function(source) {
-      switch (source) {
-        case 'ocd'  : this.source = 'ocd';
-                      this.helpview.step(11);
-                      this.changeURLInputPlaceholder('ocd');
-                      break;
-        case 'none' : this.source = 'none';
-                      this.helpview.step(1);
-                      this.changeURLInputPlaceholder('none');
-                      break;
-      }
+    render: function() {
+    }
+  });
+
+  var SearchView = Backbone.View.extend({
+    id: 'search-page-container',
+    events: {
+      'click #search-user-input-submit': 'userInputSubmit'
     },
-    // event handler to capture control panel UI change of source
-    sourceChanged: function(event) {
-      if($('#ocd-source').is(':checked')) {
-        this.changeSource('ocd');
-      }
-      else {
-        this.changeSource('none');
-      }
+    initialize: function() {
+      this.template = _.template($('#search-page-template').html());
+      this.helpview = new HelpView();
+      this.render();
+      this.helpview.step(11);
     },
-    loadOCDSearch: function(input) {
+    render: function() {
+      this.$el.html(this.template());
+      $('#search-page').html(this.$el);
+    },
+    userInputSubmit: function(event) {
+      event.preventDefault();
+      var input = $('#search-user-input').val();
+      this.loadSearch(input);
+      return false;
+    },
+    loadSearch: function(input) {
       var self = this;
-      $('#img-annotation-wrapper').hide();
-      $('#ocd-results').show();
-      $('#ocd-results').html('<h4 style="text-align: center;">Loading..</h4>');
+      this.$el.append('<div id="ocd-view"></div>');
+      $('#ocd-view').html('<h4 style="text-align: center;">Loading..</h4>');
       $.ajax({
         type: 'GET',
         url: '/search/ocd',
         data: {query: input},
         success: function(data) {
-          self.ocdView = new OCDView({
+          self.ocd_view = new OCDView({
+            el: $('#ocd-view'),
             query: input,
             data: data,
             model: data.hits.hits
           });
         }
       });
-    }
+    },
+    destroy: function() {
+      this.helpview.remove();
+      this.remove();
+    },
   });
 
   var OCDView = Backbone.View.extend({
@@ -651,7 +560,7 @@
       event.preventDefault();
       // TODO: init the image anno
       var url = $(event.currentTarget).find('img').attr('src');
-      swtr.appView.loadURL(url, 'image');
+      //swtr.appView.loadURL(url, 'image');
       return false;
     },
     search: function(data, cb) {


@@ -670,12 +579,18 @@
   });
 
   var HelpView = Backbone.View.extend({
-    el: $('#helpview'),
+    id: 'helpview-wrapper',
     events: {
     },
     initialize: function() {
+      this.template = _.template($('#helpview-template').html());
+      this.render();
       this.$text_el = $('#helpview-text');
     },
+    render: function() {
+      $('#helpview-container').html(this.$el);
+      this.$el.html(this.template({}));
+    },
     //TODO: move from number based steps to something else. number based steps
     //implicitly imply sequential processing..which does not happen in this
     //case..


@@ -712,12 +627,25 @@
       case 13: text = 'This does not seem to be a URL. Please enter a valid URL.';
                break;
       }
-      $(this.$text_el).html(text);
+      this.$text_el.html(text);
       $(window).scrollTop(0, 0);
     }
   });
 
+  var DummyView = Backbone.View.extend({
+    intialize: function() {
+      this.render();
+    },
+    render: function() {
+      $('#swtr-root').append('dummy view');
+    },
+    destroy: function() {
+      this.remove();
+      this.undelegateEvents();
+    }
+  });
 
+
   // utilities and helper functions to go here
   swtr.utils = {
     linkify: function(link) {
@@ -729,7 +657,6 @@
       }
     }
   };
-  //swtr.AppView = AppView;
 
   var AppRouter = Backbone.Router.extend({
     routes: {
@@ -738,6 +665,11 @@
       'play': 'play',
       'search': 'search'
     },
+    components: {
+      'linked-data': DummyView,
+      'play': DummyView,
+      'search': SearchView
+    },
     home: function() {
       this.hideAll();
       this.show('home-page');
@@ -758,6 +690,13 @@
       $('.page').hide();
     },
     show: function(id) {
+      if(this.mounted_component) {
+        this.mounted_component.destroy();
+      }
+      if(id !== 'home-page') {
+        var component = id.split('-page')[0];
+        this.mounted_component = new this.components[component];
+      }
       $('#' + id).show();
       this.highlight(id);
     },
@@ -766,6 +705,17 @@
       var href = id.split('-page')[0];
       var selector = '#swtr-navbar-collapse a[href="#/' + href + '"]';
       $(selector).parent('li').addClass('active');
+    },
+    start: function() {
+      var fragment = window.location.hash.split('#')[1];
+      if(!fragment) {
+        this.navigate('home');
+        return;
+      }
+      var route = fragment.split('/')[1];
+      if(_.indexOf(_.keys(this.routes), route) > -1) {
+        this.navigate(fragment);
+      }
     }
   });
 
--- a/swtr/templates/index.html
+++ b/swtr/templates/index.html
@@ -56,6 +56,8 @@
     </header>
 
     <div id="swtr-root" class="container">
+      <div id="helpview-container"></div>
+
       <div id="home-page" class="page">
         <div class="jumbotron">
           <h1> CLink: Community Linked Open Cultuur Data </h1>
@@ -85,19 +87,6 @@
       </div>
 
       <div id="play-page" class="page">
-        <!-- first row: helpview and sign in button -->
-        <div class="row">
-          <!-- helpview column of width md-8 -->
-          <div class="col-md-8">
-            <div id="helpview" class="bg-info">
-              <span class="label label-primary">Heads Up</span>
-              <span id="helpview-text"></span>
-              <a class="close">&times;</a>
-            </div>
-          </div>
-          <!-- signin view column of width md-4 -->
-          <div class="col-md-4"></div>
-        </div> <!-- end first row -->
         <!-- second row: image URL input box and Load button -->
         <div class="row" id="user-input-row">
           <div class="col-md-8">

@@ -142,17 +131,7 @@
             <img src="" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
           {% endif %}
           </div>
-          <div id="ocd-view"></div>
         </div> <!-- end fourth row -->
-        <!-- <\!-- fifth row: options for filter -\-> -->
-        <!-- <div id="filter-div" class="row"> -->
-        <!--   <div id="filter-user-div"> -->
-        <!--     <p><span>SWeeTs by</span></p> -->
-        <!--   </div> -->
-        <!--   <div id="filter-tags-div"> -->
-        <!--     <p><span>Tags</span></p> -->
-        <!--   </div> -->
-        <!-- </div> <\!-- end fifth row -\-> -->
 
         <div id="sweet-list-wrapper">
           <ul id="sweet-list"></ul>

@@ -164,9 +143,11 @@
 
       </div>
 
-      <div id="linked-data-page" class="page"></div>
+      <!-- the search page -->
       <div id="search-page" class="page"></div>
 
+      <div id="linked-data-page" class="page"></div>
+
     </div>
     <div id="app-overlay"></div>
 

@@ -195,10 +176,23 @@
     <script src="{{ url_for('static', filename='js/lib/annotorious.debug.js') }}"></script>
     <script src="{{ url_for('static', filename='js/lib/custom-fields-plugin.js') }}"></script>
     <script src="{{ url_for('static', filename='js/oauth.js') }}"></script>
-    <script type="text/javascript" src="{{ url_for('static', filename='js/lib/bootstrap-tags.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/lib/bootstrap-tags.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/img_swtr.js') }}"></script>
     <script src="{{ url_for('static', filename='js/main.js') }}"></script>
 
+    <!-- underscore.js templates -->
+    <script type="text/template" id="helpview-template">
+      <div class="row">
+        <div class="col-md-8">
+          <div id="helpview" class="bg-info">
+            <span class="label label-primary">Heads Up</span>
+            <span id="helpview-text"></span>
+            <a class="close">&times;</a>
+          </div>
+        </div>
+        <div class="col-md-4"></div>
+      </div>
+    </script>
     <script type="text/template" id="sweet-template">
       <li class="sweet">
         <a href="#">@<%= who %></a> <strong>#<%= what %></strong>
@@ -225,6 +219,24 @@
         </ul>
       </span>
     </script>
+    <script type="text/template" id="search-page-template">
+      <div class="row" id="search-user-input-row">
+        <div class="col-md-8">
+          <form class="form-inline" role="form">
+            <div class="form-group col-md-11">
+              <label class="sr-only" for="search-user-input">Enter search query</label>
+              <input class="form-control" type="text"
+                placeholder="Enter search query" id="search-user-input">
+            </div>
+            <button type="submit" class="btn btn-info" id="search-user-input-submit">
+              Go
+            </button>
+          </form>
+        </div>
+        <div class="col-md-4">
+        </div>
+      </div>
+    </script>
     <script type="text/template" id="ocd-view-base-template">
       <div id="ocd-hud">
         <span id="ocd-total-results"></span>
@@ -248,8 +260,10 @@
     </script>
     <script type="text/template" id="filter-users">
       <ul>
-        <input type="checkbox" name=<%= who %> checked="checked">
-        <label><%= who %></label>
+        <label>
+          <input type="checkbox" name="<%= who %>" checked="checked">
+          <%= who %>
+        </label>
       </ul>
     </script>
     <script type="text/template" id="filter-tags">