diff --git a/bitbake/lib/toaster/toastergui/static/js/base.js b/bitbake/lib/toaster/toastergui/static/js/base.js
index 6fd77ea457..0fb1f8b6bf 100644
--- a/bitbake/lib/toaster/toastergui/static/js/base.js
+++ b/bitbake/lib/toaster/toastergui/static/js/base.js
@@ -6,13 +6,20 @@ function basePageInit(ctx) {
   var newBuildTargetInput;
   var newBuildTargetBuildBtn;
 
+  /* initially the current project is used unless overridden by the new build
+   * button in top right nav
+   */
   var selectedProject = libtoaster.ctx;
+
   var selectedTarget;
 
   var newBuildProjectInput = $("#new-build-button #project-name-input");
   var newBuildProjectSaveBtn = $("#new-build-button #save-project-button");
 
-  $("#config-nav .nav li a").each(function(){
+
+  _checkProjectBuildable();
+
+  $("#project-topbar .nav li a").each(function(){
     if (window.location.pathname === $(this).attr('href'))
       $(this).parent().addClass('active');
     else
@@ -26,7 +33,7 @@ function basePageInit(ctx) {
     });
   }
 
-    /* Hide the button if we're on the project,newproject or importlyaer page
+  /* Hide the button if we're on the project,newproject or importlyaer page
    * or if there are no projects yet defined
    * only show if there isn't already a build-target-input already
    */
@@ -37,8 +44,8 @@ function basePageInit(ctx) {
     newBuildTargetInput = $("#new-build-button .build-target-input");
     newBuildTargetBuildBtn = $("#new-build-button .build-button");
 
-    newBuildButton.show();
     _setupNewBuildButton();
+    newBuildButton.show();
   } else if ($(".build-target-input").length > 0) {
     newBuildTargetInput = $("#project-topbar .build-target-input");
     newBuildTargetBuildBtn = $("#project-topbar .build-button");
@@ -52,9 +59,35 @@ function basePageInit(ctx) {
     $('#project .icon-pencil').hide();
   }
 
+  libtoaster.makeTypeahead(newBuildTargetInput, selectedProject.projectTargetsUrl, { format: "json" }, function (item) {
+        /* successfully selected a target */
+      selectedTarget = item;
+  });
 
-  _checkProjectBuildable();
+  newBuildTargetInput.on('input', function () {
+    if ($(this).val().length === 0) {
+      newBuildTargetBuildBtn.attr("disabled", "disabled");
+    } else {
+      newBuildTargetBuildBtn.removeAttr("disabled");
+    }
+  });
 
+  newBuildTargetBuildBtn.click(function (e) {
+    e.preventDefault();
+
+    if (!newBuildTargetInput.val()) {
+      return;
+    }
+
+    if (!selectedTarget) {
+      selectedTarget = { name: newBuildTargetInput.val() };
+    }
+    /* Fire off the build */
+    libtoaster.startABuild(selectedProject.projectBuildsUrl,
+      selectedProject.projectId, selectedTarget.name, function(){
+      window.location.replace(selectedProject.projectBuildsUrl);
+    }, null);
+  });
 
   function _checkProjectBuildable() {
     if (selectedProject.projectId === undefined) {
@@ -74,21 +107,12 @@ function basePageInit(ctx) {
           /* we can build this project; enable input fields */
           newBuildTargetInput.prop("disabled", false);
           newBuildTargetBuildBtn.prop("disabled", false);
-
-          libtoaster.makeTypeahead(newBuildTargetInput, selectedProject.projectTargetsUrl, { format: "json" }, function (item) {
-            /* successfully selected a target */
-            selectedProject.projectPageUrl = item.projectPageUrl;
-            selectedProject.projectName = item.name;
-            selectedProject.projectId = item.id;
-            selectedProject.projectBuildsUrl = item.projectBuildsUrl;
-          });
-
-        }
+       }
       }, null);
   }
 
+  /* Setup New build button in the top nav bar */
   function _setupNewBuildButton() {
-    /* Setup New build button */
 
     /* If we don't have a current project then present the set project
      * form.
@@ -98,7 +122,6 @@ function basePageInit(ctx) {
       $('#project .icon-pencil').hide();
     }
 
-
     libtoaster.makeTypeahead(newBuildProjectInput, selectedProject.projectsUrl, { format : "json" }, function (item) {
       /* successfully selected a project */
       newBuildProjectSaveBtn.removeAttr("disabled");
@@ -115,40 +138,16 @@ function basePageInit(ctx) {
       newBuildProjectSaveBtn.attr("disabled", "disabled");
     });
 
-    newBuildTargetInput.on('input', function () {
-      if ($(this).val().length === 0) {
-        newBuildTargetBuildBtn.attr("disabled", "disabled");
-      } else {
-        newBuildTargetBuildBtn.removeAttr("disabled");
-      }
-    });
-
-    newBuildTargetBuildBtn.click(function () {
-      if (!newBuildTargetInput.val()) {
-        return;
-      }
-
-      if (!selectedTarget) {
-        selectedTarget = { name: newBuildTargetInput.val() };
-      }
-      /* fire and forget */
-      libtoaster.startABuild(selectedProject.projectBuildsUrl, selectedProject.projectId, selectedTarget.name, null, null);
-      window.location.replace(selectedProject.projectPageUrl);
-    });
 
     newBuildProjectSaveBtn.click(function () {
       selectedProject.projectId = selectedProject.pk;
       /* Update the typeahead project_id paramater */
       _checkProjectBuildable();
 
-      /* we set the effective context of the page to the currently selected project */
-      /* TBD: do we override even if we already have a context project ?? */
-      /* TODO: replace global library context with references to the "selected" project */
-
-      /* we can create a target typeahead only after we have a project selected */
       newBuildTargetInput.prop("disabled", false);
       newBuildTargetBuildBtn.prop("disabled", false);
 
+      /* Update the typeahead to use the new selectedProject */
       libtoaster.makeTypeahead(newBuildTargetInput, selectedProject.projectTargetsUrl, { format: "json" }, function (item) {
         /* successfully selected a target */
         selectedTarget = item;
diff --git a/bitbake/lib/toaster/toastergui/static/js/importlayer.js b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
index 560e25a01c..03274c00f3 100644
--- a/bitbake/lib/toaster/toastergui/static/js/importlayer.js
+++ b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
@@ -16,8 +16,6 @@ function importLayerPageInit (ctx) {
   var currentLayerDepSelection;
   var validLayerName = /^(\w|-)+$/;
 
-  $("#new-project-button").hide();
-
   libtoaster.makeTypeahead(layerDepInput, libtoaster.ctx.projectLayersUrl, { include_added: "true" }, function(item){
     currentLayerDepSelection = item;
 
@@ -154,7 +152,7 @@ function importLayerPageInit (ctx) {
             } else {
               /* Success layer import now go to the project page */
               $.cookie('layer-imported-alert', JSON.stringify(data), { path: '/'});
-              window.location.replace(libtoaster.ctx.projectPageUrl+'#/layerimported');
+              window.location.replace(libtoaster.ctx.projectPageUrl+'?notify=layer-imported');
             }
           },
           error: function (data) {
diff --git a/bitbake/lib/toaster/toastergui/static/js/layerdetails.js b/bitbake/lib/toaster/toastergui/static/js/layerdetails.js
index 291ed98c34..be6bbcd20f 100644
--- a/bitbake/lib/toaster/toastergui/static/js/layerdetails.js
+++ b/bitbake/lib/toaster/toastergui/static/js/layerdetails.js
@@ -16,14 +16,15 @@ function layerDetailsPageInit (ctx) {
   });
 
   $(".breadcrumb li:first a").click(function(e){
+    e.preventDefault();
     /* By default this link goes to the project configuration page. However
      * if we have some builds we go there instead of the default href
      */
     libtoaster.getProjectInfo(libtoaster.ctx.projectPageUrl, function(prjInfo){
       if (prjInfo.builds && prjInfo.builds.length > 0) {
         window.location.replace(libtoaster.ctx.projectBuildsUrl);
-        e.preventDefault();
-        return;
+      } else {
+        window.location.replace(libtoaster.ctx.projectPageUrl);
       }
     });
   });
diff --git a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
index afd665ca99..079bbcb0b8 100644
--- a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
+++ b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
@@ -79,11 +79,12 @@ var libtoaster = (function (){
         data: data,
         headers: { 'X-CSRFToken' : $.cookie('csrftoken')},
         success: function (_data) {
+          /* No proper reponse YOCTO #7995
           if (_data.error !== "ok") {
             console.warn(_data.error);
-          } else {
+          } else { */
             if (onsuccess !== undefined) onsuccess(_data);
-          }
+        //  }
         },
         error: function (_data) {
           console.warn("Call failed");
@@ -180,7 +181,15 @@ var libtoaster = (function (){
           if (onFail !== undefined)
             onFail(data);
         } else {
-          onSuccess(data.layerdeps);
+          var deps = {};
+          /* Filter out layer dep ids which are in the
+           * project already.
+           */
+          deps.list = data.layerdeps.list.filter(function(layerObj){
+            return (data.projectlayers.lastIndexOf(layerObj.id) < 0);
+          });
+
+          onSuccess(deps);
         }
       }, function() {
         console.log("E: Failed to make request");
diff --git a/bitbake/lib/toaster/toastergui/static/js/projectpage.js b/bitbake/lib/toaster/toastergui/static/js/projectpage.js
new file mode 100644
index 0000000000..b7cb074f11
--- /dev/null
+++ b/bitbake/lib/toaster/toastergui/static/js/projectpage.js
@@ -0,0 +1,429 @@
+"use strict";
+
+function projectPageInit(ctx) {
+
+  var layerAddInput = $("#layer-add-input");
+  var layersInPrjList = $("#layers-in-project-list");
+  var layerAddBtn = $("#add-layer-btn");
+
+  var machineChangeInput = $("#machine-change-input");
+  var machineChangeBtn = $("#machine-change-btn");
+  var machineForm = $("#select-machine-form");
+  var machineChangeFormToggle = $("#change-machine-toggle");
+  var machineNameTitle = $("#project-machine-name");
+  var machineChangeCancel = $("#cancel-machine-change");
+
+  var freqBuildBtn =  $("#freq-build-btn");
+  var freqBuildList = $("#freq-build-list");
+
+  var releaseChangeFormToggle = $("#release-change-toggle");
+  var releaseTitle = $("#project-release-title");
+  var releaseForm = $("#change-release-form");
+  var releaseModal = $("#change-release-modal");
+  var cancelReleaseChange = $("#cancel-release-change");
+
+  var currentLayerAddSelection;
+  var currentMachineAddSelection = {};
+
+  var urlParams = libtoaster.parseUrlParams();
+
+  libtoaster.getProjectInfo(libtoaster.ctx.projectPageUrl, function(prjInfo){
+    updateProjectLayers(prjInfo.layers);
+    updateFreqBuildRecipes(prjInfo.freqtargets);
+    updateProjectRelease(prjInfo.release);
+    updateProjectReleases(prjInfo.releases, prjInfo.release);
+
+    /* If we're receiving a machine set from the url and it's different from
+     * our current machine then activate set machine sequence.
+     */
+    if (urlParams.hasOwnProperty('setMachine') &&
+        urlParams.setMachine !== prjInfo.machine.name){
+        currentMachineAddSelection.name = urlParams.setMachine;
+        machineChangeBtn.click();
+    } else {
+      updateMachineName(prjInfo.machine.name);
+    }
+
+   /* Now we're really ready show the page */
+    $("#project-page").show();
+  });
+
+  (function notificationRequest(){
+
+    if (urlParams.hasOwnProperty('notify')){
+      switch (urlParams.notify){
+        case 'new-project':
+          $("#project-created-notification").show();
+          break;
+        case 'layer-imported':
+          layerImportedNotification();
+          break;
+        default:
+          break;
+      }
+    }
+  })();
+
+  /* Layer imported notification */
+  function layerImportedNotification(){
+    var imported = $.cookie("layer-imported-alert");
+    var message = "Layer imported";
+
+    if (!imported)
+      return;
+    else
+      imported = JSON.parse(imported);
+
+    if (imported.deps_added.length === 0) {
+      message = "You have imported <strong><a href=\""+imported.imported_layer.layerdetailurl+"\">"+imported.imported_layer.name+"</a></strong> and added it to your project.";
+    } else {
+
+      var links = "<a href=\""+imported.imported_layer.layerdetailurl+"\">"+imported.imported_layer.name+"</a>, ";
+
+      imported.deps_added.map (function(item, index){
+        links +='<a href="'+item.layerdetailurl+'">'+item.name+'</a>';
+        /*If we're at the last element we don't want the trailing comma */
+        if (imported.deps_added[index+1] !== undefined)
+          links += ', ';
+      });
+
+      /* Length + 1 here to do deps + the imported layer */
+      message = 'You have imported <strong><a href="'+imported.imported_layer.layerdetailurl+'">'+imported.imported_layer.name+'</a></strong> and added <strong>'+(imported.deps_added.length+1)+'</strong> layers to your project: <strong>'+links+'</strong>';
+    }
+
+    libtoaster.showChangeNotification(message);
+
+    $.removeCookie("layer-imported-alert", { path: "/"});
+  }
+
+  /* Add/Rm layer functionality */
+
+  libtoaster.makeTypeahead(layerAddInput, libtoaster.ctx.projectLayersUrl, { include_added: "false" }, function(item){
+    currentLayerAddSelection = item;
+    layerAddBtn.removeAttr("disabled");
+  });
+
+  layerAddBtn.click(function(e){
+    e.preventDefault();
+    var layerObj = currentLayerAddSelection;
+
+    addRmLayer(layerObj, true);
+    /* Reset the text input */
+    layerAddInput.val("");
+  });
+
+  function addRmLayer(layerObj, add){
+
+    libtoaster.addRmLayer(layerObj, add, function(layerDepsList){
+      if (add){
+        updateProjectLayers([layerObj]);
+        updateProjectLayers(layerDepsList);
+      }
+
+      /* Show the alert message */
+      var message = libtoaster.makeLayerAddRmAlertMsg(layerObj, layerDepsList, add);
+      libtoaster.showChangeNotification(message);
+    });
+  }
+
+  function updateProjectLayers(layers){
+
+    /* No layers to add */
+    if (layers.length === 0){
+      updateLayersCount();
+      return;
+    }
+
+    for (var i in layers){
+      var layerObj = layers[i];
+
+      var projectLayer = $("<li><a></a><span class=\"icon-trash\" data-toggle=\"tooltip\" title=\"Delete\"></span></li>");
+
+      projectLayer.data('layer', layerObj);
+      projectLayer.children("span").tooltip();
+
+      var link = projectLayer.children("a");
+
+      link.attr("href", layerObj.layerdetailurl);
+      link.text(layerObj.name);
+      /* YOCTO #8024
+        link.tooltip({title: layerObj.giturl + " | "+ layerObj.branch.name, placement: "right"});
+        branch name not accessible sometimes it is revision instead
+      */
+
+      var trashItem = projectLayer.children("span");
+      trashItem.click(function (e) {
+        e.preventDefault();
+        var layerObjToRm = $(this).parent().data('layer');
+
+        addRmLayer(layerObjToRm, false);
+
+        $(this).parent().fadeOut(function (){
+          $(this).remove();
+          updateLayersCount();
+        });
+      });
+
+      layersInPrjList.append(projectLayer);
+
+      updateLayersCount();
+    }
+  }
+
+  function updateLayersCount(){
+    var count = $("#layers-in-project-list").children().length;
+
+    if (count === 0)
+      $("#no-layers-in-project").fadeIn();
+    else
+      $("#no-layers-in-project").hide();
+
+    $("#project-layers-count").text(count);
+
+    return count;
+  }
+
+  /* Frequent builds functionality */
+  function updateFreqBuildRecipes(recipes) {
+    var noMostBuilt = $("#no-most-built");
+
+    if (recipes.length === 0){
+      noMostBuilt.show();
+      freqBuildBtn.hide();
+    } else {
+      noMostBuilt.hide();
+      freqBuildBtn.show();
+    }
+
+    for (var i in recipes){
+      var freqTargetCheck = $('<li><label class="checkbox"><input type="checkbox" /><span class="freq-target-name"></span></label></li>');
+      freqTargetCheck.find(".freq-target-name").text(recipes[i]);
+      freqTargetCheck.find("input").val(recipes[i]);
+      freqTargetCheck.click(function(){
+        if (freqBuildList.find(":checked").length > 0)
+          freqBuildBtn.removeAttr("disabled");
+        else
+          freqBuildBtn.attr("disabled", "disabled");
+      });
+
+      freqBuildList.append(freqTargetCheck);
+    }
+  }
+
+  freqBuildBtn.click(function(e){
+    e.preventDefault();
+
+    var toBuild = "";
+    freqBuildList.find(":checked").each(function(){
+      toBuild += $(this).val();
+      toBuild += " ";
+    });
+
+    libtoaster.startABuild(libtoaster.ctx.projectBuildsUrl, libtoaster.ctx.projectId, toBuild, function(){
+      /* Build started */
+      window.location.replace(libtoaster.ctx.projectBuildsUrl);
+    },
+    function(){
+      /* Build start failed */
+      /* [YOCTO #7995] */
+      window.location.replace(libtoaster.ctx.projectBuildsUrl);
+    });
+  });
+
+
+  /* Change machine functionality */
+
+  machineChangeFormToggle.click(function(){
+    machineForm.slideDown();
+    machineNameTitle.hide();
+    $(this).hide();
+  });
+
+  machineChangeCancel.click(function(){
+    machineForm.slideUp(function(){
+      machineNameTitle.show();
+      machineChangeFormToggle.show();
+    });
+  });
+
+  function updateMachineName(machineName){
+    machineChangeInput.val(machineName);
+    machineNameTitle.text(machineName);
+  }
+
+  libtoaster.makeTypeahead(machineChangeInput, libtoaster.ctx.projectMachinesUrl, { }, function(item){
+    currentMachineAddSelection = item;
+    machineChangeBtn.removeAttr("disabled");
+  });
+
+  machineChangeBtn.click(function(e){
+    e.preventDefault();
+    if (currentMachineAddSelection.name === undefined)
+      return;
+
+    libtoaster.editCurrentProject({ machineName : currentMachineAddSelection.name },
+      function(){
+        /* Success machine changed */
+        updateMachineName(currentMachineAddSelection.name);
+        machineChangeCancel.click();
+
+        /* Show the alert message */
+        var message = $('<span class="lead">You have changed the machine to: <strong><span id="notify-machine-name"></span></strong></span>');
+        message.find("#notify-machine-name").text(currentMachineAddSelection.name);
+        libtoaster.showChangeNotification(message);
+    },
+      function(){
+        /* Failed machine changed */
+        console.log("failed to change machine");
+    });
+  });
+
+
+  /* Change release functionality */
+  function updateProjectRelease(release){
+    releaseTitle.text(release.description);
+  }
+
+  function updateProjectReleases(releases, current){
+    for (var i in releases){
+      var releaseOption = $("<option></option>");
+
+      releaseOption.val(releases[i].id);
+      releaseOption.text(releases[i].description);
+      releaseOption.data('release', releases[i]);
+
+      if (releases[i].id == current.id)
+        releaseOption.attr("selected", "selected");
+
+      releaseForm.children("select").append(releaseOption);
+    }
+  }
+
+  releaseChangeFormToggle.click(function(){
+    releaseForm.slideDown();
+    releaseTitle.hide();
+    $(this).hide();
+  });
+
+  cancelReleaseChange.click(function(e){
+    e.preventDefault();
+    releaseForm.slideUp(function(){
+      releaseTitle.show();
+      releaseChangeFormToggle.show();
+    });
+  });
+
+  function changeProjectRelease(release, layersToRm){
+    libtoaster.editCurrentProject({ projectVersion : release.id },
+      function(){
+        /* Success */
+        /* Update layers list with new layers */
+        layersInPrjList.addClass('muted');
+        libtoaster.getProjectInfo(libtoaster.ctx.projectPageUrl,
+            function(prjInfo){
+              layersInPrjList.children().remove();
+              updateProjectLayers(prjInfo.layers);
+              layersInPrjList.removeClass('muted');
+              releaseChangedNotification(release, prjInfo.layers, layersToRm);
+        });
+        updateProjectRelease(release);
+        cancelReleaseChange.click();
+    });
+  }
+
+  /* Create a notification to show the changes to the layer configuration
+   * caused by changing a release.
+   */
+
+  function releaseChangedNotification(release, layers, layersToRm){
+
+    var message;
+
+    if (layers.length === 0 && layersToRm.length === 0){
+      message = $('<span><span class="lead">You have changed the project release to: <strong><span id="notify-release-name"></span></strong>.');
+      message.find("#notify-release-name").text(release.description);
+      libtoaster.showChangeNotification(message);
+      return;
+    }
+
+    /* Create the whitespace separated list of layers removed */
+    var layersDelList = "";
+
+    layersToRm.map(function(layer, i){
+      layersDelList += layer.name;
+      if (layersToRm[i+1] !== undefined)
+        layersDelList += ', ';
+    });
+
+    message = $('<span><span class="lead">You have changed the project release to: <strong><span id="notify-release-name"></span></strong>. This has caused the following changes in your project layers:</span><ul id="notify-layers-changed-list"></ul></span>');
+
+    var changedList = message.find("#notify-layers-changed-list");
+
+    message.find("#notify-release-name").text(release.description);
+
+    /* Manually construct the list item for changed layers */
+    var li = '<li><strong>'+layers.length+'</strong> layers changed to the <strong>'+release.name+'</strong> release: ';
+    for (var i in layers){
+      li += '<a href='+layers[i].layerdetailurl+'>'+layers[i].name+'</a>';
+      if (i !== 0)
+        li += ', ';
+    }
+
+    changedList.append($(li));
+
+    /* Layers removed */
+    if (layersToRm && layersToRm.length > 0){
+      if (layersToRm.length == 1)
+        li = '<li><strong>1</strong> layer deleted: '+layersToRm[0].name+'</li>';
+      else
+        li = '<li><strong>'+layersToRm.length+'</strong> layers deleted: '+layersDelList+'</li>';
+
+      changedList.append($(li));
+    }
+
+    libtoaster.showChangeNotification(message);
+  }
+
+  /* Show the modal dialog which gives the option to remove layers which
+   * aren't compatible with the proposed release
+   */
+  function showReleaseLayerChangeModal(release, layers){
+    var layersToRmList = releaseModal.find("#layers-to-remove-list");
+    layersToRmList.text("");
+
+    releaseModal.find(".proposed-release-change-name").text(release.description);
+    releaseModal.data("layers", layers);
+    releaseModal.data("release", release);
+
+    for (var i in layers){
+      layersToRmList.append($("<li></li>").text(layers[i].name));
+    }
+    releaseModal.modal('show');
+  }
+
+  $("#change-release-btn").click(function(e){
+    e.preventDefault();
+
+    var newRelease = releaseForm.find("option:selected").data('release');
+
+    $.getJSON(ctx.typeaheadUrl,
+      { search: newRelease.id, type: "versionlayers" },
+      function(layers) {
+        if (layers.rows.length === 0){
+          /* No layers to change for this release */
+          changeProjectRelease(newRelease, []);
+        } else {
+          showReleaseLayerChangeModal(newRelease, layers.rows);
+        }
+    });
+  });
+
+  /* Release change modal accept */
+  $("#change-release-and-rm-layers").click(function(){
+    var layers = releaseModal.data("layers");
+    var release =  releaseModal.data("release");
+
+    changeProjectRelease(release, layers);
+  });
+
+}
diff --git a/bitbake/lib/toaster/toastergui/templates/base.html b/bitbake/lib/toaster/toastergui/templates/base.html
index 8def2daf8e..4c6676c6e7 100644
--- a/bitbake/lib/toaster/toastergui/templates/base.html
+++ b/bitbake/lib/toaster/toastergui/templates/base.html
@@ -38,6 +38,8 @@
         projectName : {{project.name|json}},
         projectTargetsUrl: {% url 'projectavailabletargets' project.id as paturl%}{{paturl|json}},
         projectBuildsUrl: {% url 'projectbuilds' project.id as pburl %}{{pburl|json}},
+        projectLayersUrl: {% url 'projectlayers' project.id as plurl %}{{plurl|json}},
+        projectMachinesUrl: {% url 'projectmachines' project.id as pmurl %}{{pmurl|json}},
         projectId : {{project.id}},
         {% else %}
         projectId : undefined,
@@ -69,6 +71,11 @@
     Loading <i class="fa-pulse icon-spinner"></i>
   </div>
 
+  <div id="change-notification" class="alert lead alert-info" style="display:none">
+    <button type="button" class="close" id="hide-alert">&times;</button>
+    <span id="change-notification-msg"></span>
+  </div>
+
     <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container-fluid">
diff --git a/bitbake/lib/toaster/toastergui/templates/baseprojectpage.html b/bitbake/lib/toaster/toastergui/templates/baseprojectpage.html
index ac32deac2f..0db06a86da 100644
--- a/bitbake/lib/toaster/toastergui/templates/baseprojectpage.html
+++ b/bitbake/lib/toaster/toastergui/templates/baseprojectpage.html
@@ -29,8 +29,6 @@
       <li><a href="{% url 'projecttargets' project.id %}">Recipes</a></li>
       <li><a href="{% url 'projectmachines' project.id %}">Machines</a></li>
       <li><a href="{% url 'projectlayers' project.id %}">Layers</a></li>
-      <li class="nav-header">Actions</li>
-      <li><a href="{% url 'importlayer' project.id %}">Import layer</a></li>
     </ul>
   </div>
   <div class="span10">
diff --git a/bitbake/lib/toaster/toastergui/templates/importlayer.html b/bitbake/lib/toaster/toastergui/templates/importlayer.html
index d6984bcc9f..bec5f1aa74 100644
--- a/bitbake/lib/toaster/toastergui/templates/importlayer.html
+++ b/bitbake/lib/toaster/toastergui/templates/importlayer.html
@@ -1,10 +1,11 @@
-{% extends "baseprojectpage.html" %}
+{% extends "base.html" %}
 {% load projecttags %}
 {% load humanize %}
 {% load static %}
+{% block pagecontent %}
 
+{% include "projecttopbar.html" %}
 
-{% block projectinfomain %}
 
         {% if project and project.release %}
                   <script src="{% static 'js/layerDepsModal.js' %}"></script>
@@ -24,12 +25,10 @@
                     });
                   </script>
 
-                <h2>Import layer</h2>
-
-                <form>
-                    <span class="help-block">The layer you are importing must be compatible with <strong>{{project.release.description}}</strong>, which is the release you are using in this project.</span>
+                <form class="span11">
                    <fieldset class="air">
                       <legend>Layer repository information</legend>
+                      <span class="help-block">The layer you are importing must be compatible with <strong>{{project.release.description}}</strong>, which is the release you are using in this project.</span>
                       <div class="alert alert-error" id="import-error" style="display:none">
                         <button type="button" class="close" data-dismiss="alert">&times;</button>
                         <h3>&nbsp;</h3>
@@ -136,5 +135,4 @@
                       </div>
 
           {% endif %}
-
 {% endblock %}
diff --git a/bitbake/lib/toaster/toastergui/templates/machine_btn.html b/bitbake/lib/toaster/toastergui/templates/machine_btn.html
index 54ff5def71..d2cb55bab4 100644
--- a/bitbake/lib/toaster/toastergui/templates/machine_btn.html
+++ b/bitbake/lib/toaster/toastergui/templates/machine_btn.html
@@ -1,4 +1,4 @@
-<a href="{% url 'project' extra.pid %}#/machineselect={{data.name}}" class="btn btn-block layer-exists-{{data.layer_version.id}}" style="margin-top: 5px; display:none">
+<a href="{% url 'project' extra.pid %}?setMachine={{data.name}}" class="btn btn-block layer-exists-{{data.layer_version.id}}" style="margin-top: 5px; display:none">
   Select machine</a>
 <button class="btn btn-block layerbtn layer-add-{{data.layer_version.id}}" data-layer='{ "id": {{data.layer_version.id}}, "name":  "{{data.layer_version.layer.name}}", "layerdetailurl": "{%url 'layerdetails' extra.pid data.layer_version.id %}"}' data-directive="add">
   <i class="icon-plus"></i>
diff --git a/bitbake/lib/toaster/toastergui/templates/project.html b/bitbake/lib/toaster/toastergui/templates/project.html
index 0fbfb599b7..aad79b4860 100644
--- a/bitbake/lib/toaster/toastergui/templates/project.html
+++ b/bitbake/lib/toaster/toastergui/templates/project.html
@@ -1,446 +1,130 @@
- {% extends "baseprojectpage.html" %}
-<!--
-vim: expandtab tabstop=2
--->
+{% extends "baseprojectpage.html" %}
+
 {% load projecttags %}
 {% load humanize %}
 {% load static %}
 
-
 {% block projectinfomain %}
-<script src="{% static "js/angular.min.js" %}"></script>
-<script src="{% static "js/angular-animate.min.js" %}"></script>
-<script src="{% static "js/angular-cookies.min.js" %}"></script>
-<script src="{% static "js/angular-route.min.js" %}"></script>
-<script src="{% static "js/angular-sanitize.min.js" %}"></script>
-<script src="{% static "js/ui-bootstrap-tpls-0.11.0.js" %}"></script>
 
-{% if lvs_nos == 0 %}
-
-  <div class="page-header">
-    <h1> {{ project.name }} </h1>
-  </div>
-  <div class="alert alert-info lead">
-	  <p>Toaster has no layer information. Without layer information, you cannot run builds. To generate layer information you can:</p>
-		<ul>
-			 <li> <a href="http://www.yoctoproject.org/docs/latest/toaster-manual/toaster-manual.html#layer-source">Configure a layer source</a></li>
-			 <li> <a href="{% url 'importlayer' project.id %}">Import a layer</a></li>
-		</ul>
-</div>
-
-{%else%}
-
-<div id="main" role="main" data-ng-app="project" data-ng-controller="prjCtrl" data-ng-cloak>
-
-  <!-- alerts section 1-->
-  <div data-ng-repeat="a in zone1alerts">
-    <div class="alert alert-dismissible lead" role="alert" data-ng-class="a.type"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
-      <span data-ng-bind-html="a.text"></span>
-    </div>
-  </div>
-
-  <!-- custom templates for ng -->
-
-  <style>
-  .missing-layer {
-    color: lightgrey;
-  }
-  </style>
-  <script type="text/ng-template" id="recipes_suggestion_details">
-    <a> {[match.model.name]}
-      <span data-ng-class="{'missing-layer':($parent.$parent.$parent.$parent.filterProjectLayerIds().indexOf(match.model.projectcompatible_layer.id) == -1)}">
-          [{[match.model.layer_version__layer__name]}]
-      </span>
-    </a>
-  </script>
-
-  <script type="text/ng-template" id="machines_suggestion_details">
-    <a>  {[match.model.name]} <span class="{'missing-layer':(filterProjectLayerIds().indexOf(match.model.layer_version_compatible_id) == -1)}">[{[match.model.layer_version__layer__name]}]</span> </a>
-  </script>
-
-  <script type="text/ng-template" id="layers_suggestion_details">
-    <a>  {[match.model['layer__name']]} ( {[match.model.layer__vcs_url]} ) </a>
-  </script>
-
-
-
-
-  <!-- modal dialogs -->
-  <script type="text/ng-template" id="dependencies_modal">
-    <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
-        <h3><span data-ng-bind="layerAddName"></span> dependencies</h3>
-    </div>
-    <div class="modal-body">
-        <p><strong>{[layerAddName]}</strong> depends on some layers that are not added to your project. Select the ones you want to add:</p>
-        <ul class="unstyled">
-            <li data-ng-repeat="ld in items">
-                <label class="checkbox">
-                    <input type="checkbox" data-ng-model="selectedItems[ld.id]"> {[ld.name]}
-                </label>
-            </li>
-        </ul>
-    </div>
-    <div class="modal-footer">
-        <button class="btn btn-primary" data-ng-click="ok()">Add layers</button>
-        <button class="btn" data-ng-click="cancel()">Cancel</button>
-    </div>
-    </form>
-  </script>
-
-
-  <script type="text/ng-template" id="change_version_modal">
-    <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
-        <h3>Changing release to {[releaseDescription]}</h3>
-      </div>
-      <div class="modal-body">
-        <p>The following project layers do not exist for the {[releaseDescription]} release:</p>
-        <ul>
-          <li data-ng-repeat="i in items"><span class="layer-info" data-toggle="tooltip" tooltip="{[i.detail]}">{[i.name]}</span></li>
-        </ul>
-        <p>If you change the release to {[releaseDescription]}, the above layers will be deleted from your project.</p>
-      </div>
-      <div class="modal-footer">
-        <button class="btn btn-primary" data-ng-click="ok()">Change release and delete layers</button>
-        <button class="btn" data-ng-click="cancel()">Cancel</button>
-      </div>
-  </script>
-
-  <script type="text/ng-template" id="target_display">
-      <div data-ng-switch on="t.task.length">
-        <div data-ng-switch-when="undefined">{[t.target]}</div>
-        <div data-ng-switch-default>{[t.target]}:{[t.task]}</div>
-      </div>
-  </script>
-
-
-  <!-- latest builds list -->
-
-  <a id="buildslist"></a>
-  <h2 class="air" data-ng-if="builds.length">Latest builds</h2>
-  <div class="animate-repeat alert"  data-ng-repeat="b in builds track by b.id" data-ng-class="{'queued':'alert-info', 'In Progress':'alert-info', 'Succeeded':'alert-success', 'Failed':'alert-error'}[b.status]">
-    <div class="row-fluid">
-        <switch data-ng-switch="b.status">
-
-          <case data-ng-switch-when="Failed">
-            <div class="lead span3">
-              <a data-ng-class="{'Succeeded': 'success', 'Failed': 'error'}[b.status]" href="{[b.br_page_url]}">
-                <span data-ng-repeat="t in b.targets" data-ng-include src="'target_display'"></span>
-              </a>
-            </div>
-            <div class="span2 lead">
-              <ngif data-ng-if="b.updated - todaydate > 0">
-                 {[b.updated|date:'HH:mm']}
-              </ngif>
-              <ngif data-ng-if="b.updated - todaydate < 0">
-                 {[b.updated|date:'dd/MM/yy HH:mm']}
-              </ngif>
-            </div>
-            <div class="span2">
-              <ngif data-ng-if="b.errors.length">
-                <span>
-                  <i class="icon-minus-sign red lead"></i>
-                  <a href="{[b.br_page_url]}#errors" class="lead error">{[b.errors.length]}
-                  <ng-pluralize count="b.errors.length" when="{'1':'error','other':'errors'}"></ng-pluralize></a>
-                </span>
-              </ngif>
-            </div>
-            <div class="span2">
-              <!-- we don't have warnings in this case -->
-            </div>
-            <div> <span class="lead">Build time: {[b.command_time|timediff]}</span>
-                <button class="btn pull-right" data-ng-class="{'Succeeded':  'btn-success', 'Failed': 'btn-danger'}[b.status]"
-                    data-ng-click="buildExistingTarget(b.targets)">Run again</button>
-
-            </div>
-          </case>
-
-          <case data-ng-switch-when="queued">
-            <div class="lead span5"> <span data-ng-repeat="t in b.targets" data-ng-include src="'target_display'"></span>   </div>
-            <div class="span4 lead" >Build queued
-              <i title="This build will start as soon as a build server is available" class="icon-question-sign get-help get-help-blue heading-help" data-toggle="tooltip"></i>
-            </div>
-            <button class="btn pull-right btn-info" data-ng-click="buildCancel(b)">Cancel</button>
-          </case>
-
-          <case data-ng-switch-when="In Progress">
-            <switch data-ng-switch="b.build.length">
-              <case data-ng-switch-when="0">
-                <div class="lead span5"> <span data-ng-repeat="t in b.targets" data-ng-include src="'target_display'"></span>   </div>
-                <div class="span4 lead">
-                  Checking out layers
-                </div>
-              </case>
-              <case data-ng-switch-default="">
-                <div class="lead span3"> <span data-ng-repeat="t in b.targets" data-ng-include src="'target_display'"></span>   </div>
-                <div class="span4 offset1" >
-                  <div class="progress" style="margin-top:5px;" data-toggle="tooltip" tooltip="{[b.build[0].completeper]}% of tasks complete">
-                      <div style="width: {[b.build[0].completeper]}%;" class="bar"></div>
-                  </div>
-                </div>
-                <div class="text-right lead">{[b.build[0].completeper]}% tasks completed</div>
-              </case>
-          </case>
-
-
-          <case data-ng-switch-when="Succeeded">
-            <div class="lead span3">
-              <a data-ng-class="{'Succeeded': 'success', 'Failed': 'error'}[b.build[0].status]" href="{[b.build[0].build_page_url]}">
-                <span data-ng-repeat="t in b.targets" data-ng-include src="'target_display'"></span>
-              </a>
-            </div>
-            <div class="span2 lead">
-              <ngif data-ng-if="b.build[0].completed_on - todaydate > 0">
-                 {[b.build[0].completed_on|date:'HH:mm']}
-              </ngif>
-              <ngif data-ng-if="b.build[0].completed_on - todaydate < 0">
-                 {[b.build[0].completed_on|date:'dd/MM/yy HH:mm']}
-              </ngif>
-            </div>
-            <div class="span2">
-              <ngif data-ng-if="b.build[0].errors">
-                <span>
-                  <i class="icon-minus-sign red lead"></i>
-                  <a href="{[b.build[0].build_page_url]}#errors" class="lead error">{[b.build[0].errors]}
-                  <ng-pluralize count="b.build[0].errors" when="{'1':'error','other':'errors'}"></ng-pluralize></a>
-                </span>
-              </ngif>
-            </div>
-            <div class="span2">
-              <ngif data-ng-if="b.build[0].warnings">
-                <span>
-                  <i class="icon-warning-sign yellow lead"></i>
-                  <a href="{[b.build[0].build_page_url]}#warnings" class="lead warning">{[b.build[0].warnings]}
-                  <ng-pluralize count="b.build[0].warnings" when="{'1':'warning','other':'warnings'}"></ng-pluralize></a>
-                </span>
-              </ngif>
-            </div>
-            <div> <span class="lead">Build time: <a href="{[b.build[0].build_time_page_url]}">{[b.build[0].build_time|timediff]}</a></span>
-                <button class="btn pull-right" data-ng-class="{'Succeeded':  'btn-success', 'Failed': 'btn-danger'}[b.build[0].status]"
-                    data-ng-click="buildExistingTarget(b.targets)">Run again</button>
-
-            </div>
-          </case>
-
-
-          <case data-ng-switch-default="">
-          <div>FIXME!</div>
-          </case>
-        </switch>
-      <div class="lead pull-right">
-      </div>
-    </div>
-  </div>
-
-  <h2 class="air">Project configuration</h2>
-
-  <!-- alerts section 2 -->
-  <div data-ng-repeat="a in zone2alerts">
-    <div class="alert alert-dismissible lead" role="alert" data-ng-class="a.type"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
-      <span data-ng-bind-html="a.text"></span>
-    </div>
-  </div>
-
-  <div class="row-fluid">
-
-    <!-- project layers -->
-    <div id="layer-container" class="well well-transparent span4">
-      <h3>
-        Layers <span class="muted counter">({[layers.length]})</span>
-        <i class="icon-question-sign get-help heading-help" title="Bitbake reads metadata files from modules called 'layers'. Layers allow you to isolate different types of customizations from each other. <a href='http://www.yoctoproject.org/docs/current/dev-manual/dev-manual.html#understanding-and-creating-layers' target='_blank'>More on layers</a>"></i>
-      </h3>
-      <div class="alert" data-ng-if="project.release && !layers.length">
-        <b>You need to add some layers </b>
-        <p>
-        You can:
-          <ul>
-            <li> <a href="{% url 'projectlayers' project.id %}">View all compatible layers available in Toaster</a>
-            <li> <a href="{% url 'importlayer' project.id %}">Import a layer</a>
-            <li> <a href="https://www.yoctoproject.org/docs/1.6.1/dev-manual/dev-manual.html#understanding-and-creating-layers" target="_blank">Read about layers in the manual</a>
-          </ul>
-        Or type a layer name below.
-        </p>
-      </div>
-      <form data-ng-submit="layerAdd()">
-        <div class="input-append">
-          <input type="text" style="width: 100%" id="layer" autocomplete="off" placeholder="Type a layer name" data-minLength="1" data-ng-model="layerAddName" data-typeahead="e for e in getLayersAutocompleteSuggestions($viewValue)" data-typeahead-template-url="layers_suggestion_details" data-typeahead-on-select="onLayerSelect($item, $model, $label)" data-typeahead-editable="false" data-ng-class="{ 'has-error': layerAddName.$invalid }" data-ng-disabled="!project.release" />
-          <input type="submit" id="add-layer" class="btn" value="Add" data-ng-disabled="!layerAddName.length"/>
-        </div>
-        {% csrf_token %}
-      </form>
-      <p>
-        <a href="{% url 'projectlayers' project.id %}">View all compatible layers</a>
-        <i class="icon-question-sign get-help" title="View all the layers you can build with the release selected for this project, which is {[project.release.desc]}"></i>
-        |
-        <a href="{% url 'importlayer' project.id %}">Import layer</a></p>
-      <ul class="unstyled configuration-list">
-          <li data-ng-repeat="l in layers track by l.id" class="animate-repeat">
-            <a href="{[l.layerdetailurl]}" class="layer-info" data-toggle="tooltip" tooltip-placement="right" tooltip="{[l.giturl]} | {[l.branch.name]}">{[l.name]}</a>
-            <i class="icon-trash" data-ng-click="layerDel(l.id)" tooltip="Delete"></i>
-                      </li>
-      </ul>
-    </div>
-
-
-    <!-- project targets -->
-    <div id="target-container" class="well well-transparent span4">
-      <h3>
-        Recipes
-        <i class="icon-question-sign get-help heading-help" title="What you build, often an image recipe that produces a root file system file. Something like <code>core-image-minimal</code> or <code>core-image-sato</code>"></i>
-      </h3>
-        <form data-ng-submit="buildNamedTarget()">
-          <div class="input-append">
-            <input type="text" style="width: 100%" placeholder="Type the recipe(s) you want to build" autocomplete="off" data-minLength="1"  data-ng-model="targetName1" data-typeahead="a.name for a in getRecipesAutocompleteSuggestions($viewValue)" data-typeahead-template-url="recipes_suggestion_details" data-ng-disabled="!project.release || !layers.length">
-            <button type="submit" class="btn btn-primary" data-ng-disabled="!targetName1.length">
-              Build </button>
-          </div>
-          {% csrf_token %}
-        </form>
-        <p>
-          <a href="{% url 'projecttargets' project.id %}">View all compatible recipes</a>
-          <i class="icon-question-sign get-help" title="View all the recipes you can build with the release selected for this project, which is {[project.release.desc]}"></i>
-        </p>
-        <div data-ng-if="frequenttargets.length">
-        <h4 class="air">
-            Most built recipes
-        </h4>
-          <ul class="unstyled configuration-list {[mutedtargets]}">
-          <li data-ng-repeat="t in frequenttargets">
-            <label class="checkbox">
-              <input type="checkbox" data-ng-model="mostBuiltTargets[t]" data-ng-disabled="disableBuildCheckbox(t)" data-ng-checked="mostBuiltTargets[t] && !disableBuildCheckbox(t)">{[t]}
-            </label>
-          </li>
-        </ul>
-        <button class="btn btn-large btn-primary" data-ng-disabled="enableBuildSelectedTargets()" data-ng-click="buildSelectedTargets()">Build selected recipes</button>
-        </div>
-    </div>
-
-    <!-- project configuration -->
-    <div id="machine-distro" class="well well-transparent span4">
-      <h3>
-        Machine
-        <i class="icon-question-sign get-help heading-help" title="The machine is the hardware for which you want to build. You can only set one machine per project"></i>
-      </h3>
-      <p class="lead" id="select-machine-opposite">
-        <span>{[machine.name]}</span>
-        <i id="change-machine" class="icon-pencil" data-ng-click="toggle('#select-machine')"></i>
-      </p>
-      <div id="select-machine" style="display: none">
-        <div class="alert alert-info">
-          <strong>Machine changes have a big impact on build outcome.</strong>
-              You cannot really compare the builds for the new machine with the previous ones.
-        </div>
-        <form data-ng-submit="editProjectSettings('#select-machine')" class="input-append">
-              <input type="text" id="machine" autocomplete="off" data-ng-model="machineName" value="{[machine.name]}" data-typeahead="m.name for m in getMachinesAutocompleteSuggestions($viewValue)" data-typeahead-template-url="machines_suggestion_details" />
-              <input type="submit" id="apply-change-machine" class="btn" data-ng-disabled="machineName == machine.name || machineName.length == 0" value="Save"/>
-              <input type="reset" id="cancel-machine" class="btn btn-link" data-ng-click="toggle('#select-machine')" value="Cancel"/>
-              {% csrf_token %}
-        </form>
-        <p>
-          <a href="{% url 'projectmachines' project.id %}" class="link">View all compatible machines</a>
-        <i class="icon-question-sign get-help" title="View all the machines you can set with the release selected for this project, which is {[project.release.desc]}"></i>
-      </p>
-      </div>
-      <p class="link-action">
-            <a href="{% url 'projectconf' project.id %}" class="link">Edit configuration variables</a>
-            <i data-original-title="You can set other project configuration options here. Each option, like everything else in the build system, is a variable - value pair" class="icon-question-sign get-help heading-help" title=""></i>
-            </p>
-    </div>
-  </div>
-
-
-  <h2>Project details</h2>
-
-  <!-- alerts section 3 -->
-  <div data-ng-repeat="a in zone3alerts">
-    <div class="alert alert-dismissible lead" role="alert" data-ng-class="a.type"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
-      <span data-ng-bind-html="a.text"></span>
-    </div>
-  </div>
-
-
-  <div id="project-details" class="well well-transparent">
-    <h3>Project name</h3>
-    <p class="lead" id="change-project-name-opposite">
-      <span >{[project.name]}</span>
-      <i class="icon-pencil" data-ng-click="toggle('#change-project-name')" ></i>
-    </p>
-    <div id="change-project-name" style="display:none;">
-      <form data-ng-submit="editProjectSettings('#change-project-name')" class="input-append">
-        <input type="text" class="input-xlarge" id="type-project-name" data-ng-model="projectName" value="{[project.name]}">
-        <input type="submit" class="btn" value="Save" data-ng-disabled="project.name == projectName"/>
-        <input type="reset" class="btn btn-link" value="Cancel" data-ng-click="toggle('#change-project-name')">
-     </form>
-    </div>
-
-    <h3 data-ng-if="releases.length > 1">
-      Release
-      <i class="icon-question-sign get-help heading-help" title="The version of the build system you want to use"></i>
-    </h3>
-    <p data-ng-if="releases.length > 1" class="lead" id="change-project-version-opposite">
-      <span id="project-version">{[project.release.desc]}</span>
-      <i id="change-version" class="icon-pencil" data-ng-click="toggle('#change-project-version')" ></i>
-    </p>
-    <div class="div-inline" id="change-project-version" style="display:none;">
-      <form data-ng-submit="testProjectSettingsChange('#change-project-version')" class="input-append">
-        <select id="select-version" data-ng-model="projectVersion">
-          <option data-ng-repeat="r in releases" value="{[r.id]}" data-ng-selected="r.id == project.release.id">{[r.description]}</option>
-        </select>
-        <input type="submit" class="btn" style="margin-left:5px;" value="Save" data-ng-disabled="project.release.id == projectVersion"/>
-        <input type="reset"  class="btn btn-link" value="Cancel" data-ng-click="toggle('#change-project-version')"/>
-
-      </form>
-    </div>
-  </div>
-
-</div> <!-- end main -->
-
-</div> <!-- end row -->
-
-
-
-<!-- load application logic !-->
-<script src="{% static "js/projectapp.js" %}"></script>
-
-<!-- dump initial data for use in the angular app -->
+<script src="{% static 'js/layerDepsModal.js' %}"></script>
+<script src="{% static 'js/projectpage.js' %}"></script>
 <script>
-angular.element(document).ready(function() {
-  scope = angular.element("#main").scope();
-  scope.urls = {};
-  scope.urls.xhr_build = "{% url 'projectbuilds' project.id %}";
-  scope.urls.xhr_edit = "{% url 'project' project.id %}?format=json";
-  scope.urls.layers = "{% url 'projectlayers' project.id %}";
-  scope.urls.targets = "{% url 'projectavailabletargets' project.id %}";
-  scope.urls.machines = "{% url 'projectmachines' project.id %}";
-  scope.urls.importlayer = "{% url 'importlayer' project.id %}";
-  scope.urls.xhr_datatypeahead = {% url 'xhr_datatypeahead' project.id as xhrdta %}{{xhrdta|json}};
-  scope.project = {{prj|json}};
-  scope.builds = {{builds|json}};
-  scope.layers = {{layers|json}};
-  scope.targets = {{targets|json}};
-  scope.frequenttargets = {{freqtargets|json}};
-  scope.machine = {{machine|json}};
-  scope.releases = {{releases|json}};
-  scope.layerCount = scope.layers.length;
-  scope.mutedtargets = (scope.layerCount == 0 ? "muted" : "")
-  var now = (new Date()).getTime();
-  scope.todaydate = now - (now % 86400000);
+  $(document).ready(function (){
+    var ctx = {
+      typeaheadUrl : "{% url 'xhr_datatypeahead' project.id %}",
 
-  scope.zone1alerts = [];
-  scope.zone2alerts = [];
-  scope.zone3alerts = [];
-
-  scope.mostBuiltTargets = {};
-
-  scope.updateDisplayWithCommands();
-  scope.validateData();
-
-  scope.init();
-  scope.$digest();
+    };
 
+    try {
+      projectPageInit(ctx);
+    } catch (e) {
+      document.write("Sorry, An error has occurred loading this page");
+      console.warn(e);
+    }
   });
 </script>
 
-{% endif %} {# from lvs_nos check #}
+<div id="change-release-modal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="change-release-modal" aria-hidden="false">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
+    <h3>Changing Yocto Project release to <span class="proposed-release-change-name"></span></h3>
+  </div>
+  <div class="modal-body">
+    <p>The following added layers do not exist for <span class="proposed-release-change-name"></span>: </p>
+    <ul id="layers-to-remove-list">
+    </ul>
+    <p>If you change the Yocto Project release to <span class="proposed-release-change-name"></span>, the above layers will be deleted from your added layers.</p>
+  </div>
+  <div class="modal-footer">
+    <button id="change-release-and-rm-layers" data-dismiss="modal" type="submit" class="btn btn-primary">Change release and delete layers</button>
+    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
+  </div>
+</div>
+
+
+<div class="row-fluid" id="project-page" style="display:none">
+  <div class="span6">
+    <div class="well well-transparent" id="machine-section">
+      <h3>Machine</h3>
+
+      <p class="lead"><span id="project-machine-name"></span> <i title="" data-original-title="" id="change-machine-toggle" class="icon-pencil"></i></p>
+
+      <form id="select-machine-form" style="display:none;">
+        <div class="alert alert-info">
+          <strong>Machine changes have a big impact on build outcome.</strong> You cannot really compare the builds for the new machine with the previous ones.
+        </div>
+
+        <div class="input-append">
+          <input id="machine-change-input" autocomplete="off" value="" data-provide="typeahead" data-minlength="1" data-autocomplete="off" type="text">
+            <button id="machine-change-btn" class="btn" type="button">Save</button> <a href="#" id="cancel-machine-change" class="btn btn-link">Cancel</a>
+        </div>
+
+        <p><a href="{% url 'projectmachines' project.id %}" class="link">View compatible machines</a></p>
+      </form>
+    </div>
+
+    <div class="well well-transparent">
+      <h3>Most built recipes</h3>
+
+      <div class="alert alert-info" style="display:none" id="no-most-built">
+        <span class="lead">You haven't built any recipes yet</span>
+      </div>
+
+      <ul class="unstyled configuration-list" id="freq-build-list">
+      </ul>
+      <button class="btn btn-primary" id="freq-build-btn" disabled="disabled">Build selected recipes</button>
+    </div>
+
+    <div class="well well-transparent">
+      <h3>Project release</h3>
+
+      <p class="lead"><span id="project-release-title"></span> <i title="" data-original-title="" id="release-change-toggle" class="icon-pencil"></i></p>
+
+      <form class="form-inline" id="change-release-form" style="display:none;">
+        <select></select>
+        <button class="btn" style="margin-left:5px;" id="change-release-btn">Change</button> <a href="#" id="cancel-release-change" class="btn btn-link">Cancel</a>
+      </form>
+    </div>
+  </div>
+
+  <div class="span6">
+    <div class="well well-transparent" id="layer-container">
+      <h3>Layers <span class="muted counter">(<span id="project-layers-count"></span>)</span>
+        <i data-original-title="OpenEmbedded organises metadata into modules called 'layers'. Layers allow you to isolate different types of customizations from each other. <a href='http://www.yoctoproject.org/docs/current/dev-manual/dev-manual.html#understanding-and-creating-layers' target='_blank'>More on layers</a>" class="icon-question-sign get-help heading-help" title=""></i>
+      </h3>
+
+      <div class="alert lead" id="no-layers-in-project" style="display:none">
+        You need to add some layers. For that you can:
+        <ul>
+          <li><a href="{% url 'projectlayers' project.id %}">View all layers compatible with this project</a></li>
+          <li><a href="{% url 'importlayer' project.id %}">Import a layer</a></li>
+          <li><a href="http://www.yoctoproject.org/docs/current/dev-manual/dev-manual.html#understanding-and-creating-layers" target="_blank">Read about layers in the documentation</a></li>
+        </ul>
+        <p>Or type a layer name below.</p>
+      </div>
+
+      <form style="margin-top:20px">
+        <!--div class="control-group error"-->
+
+        <div class="input-append">
+          <input id="layer-add-input" autocomplete="off" placeholder="Type a layer name" data-minlength="1" data-autocomplete="off" data-provide="typeahead" data-source="" type="text">
+            <button id="add-layer-btn" class="btn" disabled>Add</button>
+        </div>
+
+        <div id="import-alert" class="alert alert-info" style="display:none;">
+          Toaster does not know about this layer. Please <a href="#">import it</a>
+        </div>
+
+        <p>
+          <a href="{% url 'projectlayers' project.id %}" id="view-compatible-layers">View compatible layers</a>
+          <i data-original-title="View all the layers you can build with the release selected for this project, which is Yocto Project master" class="icon-question-sign get-help" title=""></i>
+          | <a href="{% url 'importlayer' project.id %}">Import layer</a>
+        </p>
+      </form>
+
+      <ul class="unstyled configuration-list" id="layers-in-project-list">
+      </ul>
+    </div>
+  </div>
+</div>
 {% endblock %}
diff --git a/bitbake/lib/toaster/toastergui/templates/projecttopbar.html b/bitbake/lib/toaster/toastergui/templates/projecttopbar.html
index 46473cb76b..d4d1951ae4 100644
--- a/bitbake/lib/toaster/toastergui/templates/projecttopbar.html
+++ b/bitbake/lib/toaster/toastergui/templates/projecttopbar.html
@@ -1,3 +1,8 @@
+<div class="alert alert-success lead" id="project-created-notification" style="margin-top:15px; display:none">
+  <button type="button" class="close" data-dismiss="alert">×</button>
+  Your project <strong>{{project.name}}</strong> has been created. You can now <a href="{% url 'projectmachines' project.id %}">select your target machine</a> and <a href="{% url 'projecttargets' project.id %}">choose image recipes</a> to build.
+</div>
+
 <!-- project name -->
 <div class="row-fluid page-header">
   <h1>{{project.name}}</h1>
@@ -7,7 +12,7 @@
   <ul class="nav nav-pills">
     <li>
       <a href="{% url 'projectbuilds' project.id %}">
-        Builds (<span class="total-builds"></span>)
+        Builds (<span class="total-builds">0</span>)
       </a>
     </li>
     <li id="topbar-configuration-tab">
@@ -15,6 +20,11 @@
         Configuration
       </a>
     </li>
+    <li>
+      <a href="{% url 'importlayer' project.id %}">
+        Import layer
+      </a>
+    </li>
     <!-- Coming soon
     <li>
       <a href="my-image-recipes.html">
@@ -23,16 +33,16 @@
     </li>
     -->
     <li class="pull-right">
-      <form class="form-inline" style="margin-bottom: 0">
 
         <i class="icon-question-sign get-help heading-help" data-placement="left" title="" data-original-title="Type the name of one or more recipes you want to build, separated by a space. You can also specify a task by appending a semicolon and a task name to the recipe name, like so: <code>busybox:clean</code>">
         </i>
         <div class="input-append">
-          <input type="text" class="input-xlarge build-target-input" placeholder="Type the recipe you want to build" autocomplete="off">
-            <button class="btn btn-primary build-button" data-project-id="{{project.id}}" disabled>Build
-            </button>
+          <form class="form-inline" style="margin-bottom: 0">
+            <input type="text" class="input-xlarge input-lg build-target-input" placeholder="Type the recipe you want to build" autocomplete="off" disabled>
+              <button class="btn btn-primary btn-large build-button" data-project-id="{{project.id}}" disabled>Build
+              </button>
+            </form>
           </div>
-        </form>
-      </li>
-    </ul>
+        </li>
+      </ul>
 </div>
diff --git a/bitbake/lib/toaster/toastergui/views.py b/bitbake/lib/toaster/toastergui/views.py
index 688a4c276f..b43a01e951 100755
--- a/bitbake/lib/toaster/toastergui/views.py
+++ b/bitbake/lib/toaster/toastergui/views.py
@@ -2132,7 +2132,7 @@ if True:
                 prj = Project.objects.create_project(name = request.POST['projectname'], release = release)
                 prj.user_id = request.user.pk
                 prj.save()
-                return redirect(reverse(project, args=(prj.pk,)) + "#/newproject")
+                return redirect(reverse(project, args=(prj.pk,)) + "?notify=new-project")
 
             except (IntegrityError, BadParameterException) as e:
                 # fill in page with previously submitted values
@@ -2238,7 +2238,8 @@ if True:
         }
 
         if prj.release is not None:
-            context["prj"]["release"] = { "id": prj.release.pk, "name": prj.release.name, "desc": prj.release.description}
+            context['release'] = { "id": prj.release.pk, "name": prj.release.name, "description": prj.release.description}
+
 
         try:
             context["machine"] = {"name": prj.projectvariable_set.get(name="MACHINE").value}