diff --git a/web/app/assets/javascripts/fakeJamClient.js b/web/app/assets/javascripts/fakeJamClient.js
index e07dcb406..2691c7d4c 100644
--- a/web/app/assets/javascripts/fakeJamClient.js
+++ b/web/app/assets/javascripts/fakeJamClient.js
@@ -444,6 +444,7 @@
         function SessionStartRecording() {}
         function SessionStopPlay() {}
         function SessionStopRecording() {}
+        function SessionAddPlayTrack() {}
         function SessionRemoveAllPlayTracks(){}
         function isSessionTrackPlaying() { return false; }
         function SessionCurrrentPlayPosMs() { return 0; }
@@ -826,6 +827,7 @@
         this.SessionStartPlay = SessionStartPlay;
         this.SessionStartRecording = SessionStartRecording;
         this.SessionStopPlay = SessionStopPlay;
+        this.SessionAddPlayTrack = SessionAddPlayTrack;
         this.SessionRemoveAllPlayTracks = SessionRemoveAllPlayTracks;
         this.SessionStopRecording = SessionStopRecording;
         this.isSessionTrackPlaying = isSessionTrackPlaying;
diff --git a/web/app/assets/javascripts/gear/gear_wizard.js b/web/app/assets/javascripts/gear/gear_wizard.js
index 26ec35fe4..b75f239a9 100644
--- a/web/app/assets/javascripts/gear/gear_wizard.js
+++ b/web/app/assets/javascripts/gear/gear_wizard.js
@@ -5,24 +5,15 @@
   context.JK = context.JK || {};
   context.JK.GearWizard = function (app) {
 
+    var logger = context.JK.logger;
+
     var $dialog = null;
     var wizard = null;
     var $wizardSteps = null;
-    var $currentWizardStep = null;
-    var step = null;
-    var previousStep  = null;
     var $templateSteps = null;
-    var $templateButtons = null;
-    var $templateAudioPort = null;
-    var $ftueButtons = null;
-    var $btnNext = null;
-    var $btnBack = null;
-    var $btnClose = null;
-    var $btnCancel = null;
 
     var self = this;
 
-    var TOTAL_STEPS = 7;
     var STEP_INTRO = 0;
     var STEP_SELECT_DEVICE = 1;
     var STEP_SELECT_TRACKS = 2;
@@ -57,9 +48,16 @@
       });
     }
 
+    function onStepChanged(e, data) {
+      var step = wizard.getCurrentStep();
+      var $currentWizardStep = wizard.getCurrentWizardStep();
 
-    function reset() {
-      $currentWizardStep = null;
+      // update ftue step numbers
+      var $ftueSteps = $(context._.template($templateSteps.html(), {}, { variable: 'data' }));
+      var $activeStep = $ftueSteps.find('.ftue-stepnumber[data-step-number="' + step + '"]');
+      $activeStep.addClass('.active');
+      $activeStep.next().show(); // show the .ftue-step-title
+      $currentWizardStep.find('.ftuesteps').replaceWith($ftueSteps);
     }
 
     // checks if we already have a profile called 'FTUE...'; if not, create one.  if so, re-use it.
@@ -85,13 +83,12 @@
     }
 
     function beforeShow(args) {
-      previousStep = null;
 
       context.jamClient.FTUECancel();
       context.jamClient.FTUESetStatus(false);
       findOrCreateFTUEProfile();
 
-      wizard.beforeShow(args);
+      wizard.onBeforeShow(args);
     }
 
     function afterShow() {
@@ -99,75 +96,31 @@
     }
 
     function afterHide() {
-      step = null;
+      wizard.onAfterHide();
+
       context.jamClient.FTUESetStatus(true);
       context.jamClient.FTUECancel();
     }
 
-    function back() {
-      if ($(this).is('.button-grey')) return false;
-      previousStep = step;
-      step = step - 1;
-      moveToStep();
-      return false;
-    }
-
-    function next() {
-      if ($(this).is('.button-grey')) return false;
-
-      var stepInfo = STEPS[step];
-      if(stepInfo.handleNext) {
-        var result = stepInfo.handleNext.call(stepInfo);
-        if(!result) {return false;}
-      }
-
-      previousStep = step;
-      step = step + 1;
-
-      moveToStep();
-      return false;
-    }
 
     function closeDialog() {
-      beforeHideStep($currentWizardStep);
+      wizard.onCloseDialog();
       app.layout.closeDialog('gear-wizard');
       return false;
     }
 
     function events() {
-
-    }
-
-    function route() {
-
+      $(wizard).on('step_changed', onStepChanged);
+      $(wizard).on('wizard_cancel', closeDialog);
+      $(wizard).on('wizard_close', closeDialog);
     }
 
     function setNextState(enabled) {
-
-      if(!$btnNext) return;
-
-      $btnNext.removeClass('button-orange button-grey');
-
-      if (enabled) {
-        $btnNext.addClass('button-orange');
-      }
-      else {
-        $btnNext.addClass('button-grey');
-      }
+      wizard.setNextState(enabled);
     }
 
     function setBackState(enabled) {
-
-      if(!$btnBack) return;
-
-      $btnBack.removeClass('button-orange button-grey');
-
-      if (enabled) {
-        $btnBack.addClass('button-orange');
-      }
-      else {
-        $btnBack.addClass('button-grey');
-      }
+      wizard.setBackState(enabled);
     }
 
 
@@ -186,8 +139,6 @@
       $dialog = $('#gear-wizard-dialog');
       $wizardSteps = $dialog.find('.wizard-step');
       $templateSteps = $('#template-ftuesteps');
-      $templateButtons = $('#template-wizard-buttons');
-      $ftueButtons = $dialog.find('.ftue-buttons');
 
       stepUnderstandGear.initialize($wizardSteps.filter($('[layout-wizard-step=0]')));
       stepSelectGear.initialize($wizardSteps.filter($('[layout-wizard-step=1]')));
@@ -197,6 +148,9 @@
       stepNetworkTest.initialize($wizardSteps.filter($('[layout-wizard-step=5]')));
       stepSuccess.initialize($wizardSteps.filter($('[layout-wizard-step=6]')));
 
+      wizard = new context.JK.Wizard(app);
+      wizard.initialize($dialog, $wizardSteps, STEPS);
+
       events();
     }
 
diff --git a/web/app/assets/javascripts/gear/wizard.js b/web/app/assets/javascripts/gear/wizard.js
index 01cd910db..9f608a7f4 100644
--- a/web/app/assets/javascripts/gear/wizard.js
+++ b/web/app/assets/javascripts/gear/wizard.js
@@ -5,17 +5,24 @@
   context.JK = context.JK || {};
   context.JK.Wizard = function (app) {
 
+    var STEPS = null;
+    var step = null;
+    var previousStep  = null;
     var $dialog = null;
     var $templateButtons = null;
     var $wizardSteps = null;
-    var STEPS = null;
-    var step = null;
+    var $currentWizardStep = null;
+    var $wizardButtons = null;
     var $btnNext = null;
     var $btnBack = null;
     var $btnClose = null;
     var $btnCancel = null;
-    var $currentWizardStep = null;
+    var self = this;
+    var $self = $(this);
 
+    function totalSteps() {
+      return STEPS.length;
+    }
 
     function beforeHideStep() {
       if(!previousStep) {return}
@@ -41,6 +48,30 @@
       stepInfo.beforeShow.call(stepInfo);
     }
 
+    function back() {
+      if ($(this).is('.button-grey')) return false;
+      previousStep = step;
+      step = step - 1;
+      moveToStep();
+      return false;
+    }
+
+    function next() {
+      if ($(this).is('.button-grey')) return false;
+
+      var stepInfo = STEPS[step];
+      if(stepInfo.handleNext) {
+        var result = stepInfo.handleNext.call(stepInfo);
+        if(!result) {return false;}
+      }
+
+      previousStep = step;
+      step = step + 1;
+
+      moveToStep();
+      return false;
+    }
+
     function moveToStep() {
       var $nextWizardStep = $wizardSteps.filter($('[layout-wizard-step=' + step + ']'));
 
@@ -50,58 +81,99 @@
 
       $currentWizardStep = $nextWizardStep;
 
-      var $ftueSteps = $(context._.template($templateSteps.html(), {}, { variable: 'data' }));
-      var $activeStep = $ftueSteps.find('.ftue-stepnumber[data-step-number="' + step + '"]');
-      $activeStep.addClass('.active');
-      $activeStep.next().show(); // show the .ftue-step-title
-      $currentWizardStep.find('.ftuesteps').replaceWith($ftueSteps);
+      $self.triggerHandler('step_changed', {step:step});
 
       // update buttons
       var $wizardButtonsContent = $(context._.template($templateButtons.html(), {}, {variable: 'data'}));
 
-
       $btnBack = $wizardButtonsContent.find('.btn-back');
       $btnNext = $wizardButtonsContent.find('.btn-next');
       $btnClose = $wizardButtonsContent.find('.btn-close');
       $btnCancel = $wizardButtonsContent.find('.btn-cancel');
 
       // hide back button if 1st step or last step
-      if (step == 0 && step == TOTAL_STEPS - 1) {
+      if (step == 0 && step == totalSteps() - 1) {
         $btnBack.hide();
       }
       // hide next button if not on last step
-      if (step == TOTAL_STEPS - 1) {
+      if (step == totalSteps() - 1) {
         $btnNext.hide();
       }
       // hide close if on last step
-      if (step != TOTAL_STEPS - 1) {
+      if (step != totalSteps() - 1) {
         $btnClose.hide();
       }
       // hide cancel if not on last step
-      if (step == TOTAL_STEPS - 1) {
+      if (step == totalSteps() - 1) {
         $btnCancel.hide();
       }
 
       $btnNext.on('click', next);
       $btnBack.on('click', back);
-      $btnClose.on('click', closeDialog);
-      $btnCancel.on('click', closeDialog);
+      $btnClose.on('click', function() {$self.triggerHandler('wizard_close'); return false;});
+      $btnCancel.on('click', function() {$self.triggerHandler('wizard_cancel'); return false;});
 
-      $ftueButtons.empty();
-      $ftueButtons.append($wizardButtonsContent);
+      $wizardButtons.empty();
+      $wizardButtons.append($wizardButtonsContent);
 
       beforeShowStep($currentWizardStep);
       $currentWizardStep.show();
 
     }
 
+    // called by owner whenever
+    function onCloseDialog() {
+      beforeHideStep($currentWizardStep);
+    }
 
-    function beforeShow(args) {
+    function onBeforeShow(args) {
+
+      previousStep = null;
 
       step = args.d1;
       if (!step) step = 0;
       step = parseInt(step);
-      moveToStep(null);
+      moveToStep();
+    }
+
+    function onAfterHide() {
+      step = null;
+    }
+
+    function setNextState(enabled) {
+
+      if(!$btnNext) return;
+
+      $btnNext.removeClass('button-orange button-grey');
+
+      if (enabled) {
+        $btnNext.addClass('button-orange');
+      }
+      else {
+        $btnNext.addClass('button-grey');
+      }
+    }
+
+    function setBackState(enabled) {
+
+      if(!$btnBack) return;
+
+      $btnBack.removeClass('button-orange button-grey');
+
+      if (enabled) {
+        $btnBack.addClass('button-orange');
+      }
+      else {
+        $btnBack.addClass('button-grey');
+      }
+    }
+
+    function getCurrentStep() {
+      return step;
+    }
+
+    function getCurrentWizardStep() {
+      return $currentWizardStep;
     }
 
     function initialize(_$dialog, _$wizardSteps, _STEPS) {
@@ -110,10 +182,17 @@
       $wizardSteps = _$wizardSteps;
       STEPS = _STEPS;
 
-
+      $wizardButtons = $dialog.find('.wizard-buttons');
       $templateButtons = $('#template-wizard-buttons');
     }
 
+    this.setNextState = setNextState;
+    this.setBackState = setBackState;
+    this.getCurrentStep = getCurrentStep;
+    this.getCurrentWizardStep = getCurrentWizardStep;
+    this.onCloseDialog = onCloseDialog;
+    this.onBeforeShow = onBeforeShow;
+    this.onAfterHide = onAfterHide;
     this.initialize = initialize;
 
   }
diff --git a/web/app/views/clients/gear/_gear_wizard.html.haml b/web/app/views/clients/gear/_gear_wizard.html.haml
index 63ccd5bfa..7d5e5195a 100644
--- a/web/app/views/clients/gear/_gear_wizard.html.haml
+++ b/web/app/views/clients/gear/_gear_wizard.html.haml
@@ -268,7 +268,7 @@
                 %a JamKazam Support Center
               %li
                 %a JamKazam Community Forum
-    .ftue-buttons
+    .wizard-buttons
 
 %script{type: 'text/template', id: 'template-ftuesteps'}
   .ftuesteps-inner