diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index 9d6350e60a..66f392d3a1 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -5189,6 +5189,11 @@
       "from": "intersect@>=0.0.3 <0.1.0",
       "resolved": "https://registry.npmjs.org/intersect/-/intersect-0.0.3.tgz"
     },
+    "intro.js": {
+      "version": "2.6.0",
+      "from": "intro.js@latest",
+      "resolved": "http://registry.npmjs.org/intro.js/-/intro.js-2.6.0.tgz"
+    },
     "invariant": {
       "version": "2.2.2",
       "from": "invariant@>=2.2.0 <3.0.0",
diff --git a/package.json b/package.json
index f6dd64cc3d..33d474e6f0 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "html-webpack-plugin": "^2.8.1",
     "image-size": "~0.3.2",
     "in-app-purchase": "^1.1.6",
+    "intro.js": "^2.6.0",
     "jade": "~1.11.0",
     "jquery": "^3.1.1",
     "js2xmlparser": "~1.0.0",
diff --git a/website/client/app.vue b/website/client/app.vue
index 8480d855c6..918d145008 100644
--- a/website/client/app.vue
+++ b/website/client/app.vue
@@ -63,6 +63,7 @@ export default {
 };
 </script>
 
+<style src="intro.js/minified/introjs.min.css"></style>
 <style src="bootstrap/scss/bootstrap.scss" lang="scss"></style>
 <style src="assets/scss/index.scss" lang="scss"></style>
 <style src="assets/css/index.css"></style>
diff --git a/website/client/components/inventory/equipment/index.vue b/website/client/components/inventory/equipment/index.vue
index 5a7e2c42ec..92fbf02111 100644
--- a/website/client/components/inventory/equipment/index.vue
+++ b/website/client/components/inventory/equipment/index.vue
@@ -84,10 +84,10 @@
       v-for="group in itemsGroups",
       v-if="viewOptions[group.key].selected",
       :key="group.key",
+      :class='group.key',
     )
       h2
        | {{ group.label }}
-       |
        span.badge.badge-pill.badge-default {{items[group.key].length}}
 
       .items
diff --git a/website/client/components/inventory/items/index.vue b/website/client/components/inventory/items/index.vue
index 78ed35df61..6aff96c4f6 100644
--- a/website/client/components/inventory/items/index.vue
+++ b/website/client/components/inventory/items/index.vue
@@ -105,11 +105,9 @@
       div.potion-icon(:class="'Pet_HatchingPotion_'+currentDraggingPotion.key")
       div.popover
         div.popover-content {{ $t('clickOnEggToHatch', {potionName: currentDraggingPotion.text() }) }}
-
 </template>
 
 <style lang="scss" scoped>
-
   .hatchingPotionInfo {
     position: absolute;
     left: -500px;
diff --git a/website/client/components/notifications.vue b/website/client/components/notifications.vue
index 126ee8f42e..e189dfdbfa 100644
--- a/website/client/components/notifications.vue
+++ b/website/client/components/notifications.vue
@@ -25,6 +25,7 @@ div
 
 import { mapState } from 'client/libs/store';
 import notifications from 'client/mixins/notifications';
+import guide from 'client/mixins/guide';
 
 import welcomeModal from './achievements/welcome';
 import newStuff from './achievements/newStuff';
@@ -49,7 +50,7 @@ import ultimateGear from './achievements/ultimateGear';
 import wonChallenge from './achievements/wonChallenge';
 
 export default {
-  mixins: [notifications],
+  mixins: [notifications, guide],
   components: {
     wonChallenge,
     ultimateGear,
@@ -132,8 +133,8 @@ export default {
     invitedToQuest () {
       return this.user.party.quest.RSVPNeeded && !this.user.party.quest.completed;
     },
-    userDailies () {
-      return this.$store.state.tasks.data.dailys;
+    userTasks () {
+      return this.$store.state.tasks.data;
     },
   },
   watch: {
@@ -223,7 +224,8 @@ export default {
       if (after !== true) return;
       this.$root.$emit('show::modal', 'quest-invitation');
     },
-    userDailies () {
+    userTasks () {
+      // @TODO: Is this the best way to check for loaded?
       this.runYesterDailies();
     },
   },
@@ -231,6 +233,12 @@ export default {
     if (!this.user.flags.welcomed) {
       this.$root.$emit('show::modal', 'welcome');
     }
+
+    window.setTimeout(() => {
+      this.initTour();
+      if (this.user.flags.tour.intro === this.TOUR_END) return;
+      this.goto('intro', 0);
+    }, 2000);
   },
   methods: {
     playSound () {
diff --git a/website/client/components/tasks/column.vue b/website/client/components/tasks/column.vue
index 1f14f18d3e..466c858776 100644
--- a/website/client/components/tasks/column.vue
+++ b/website/client/components/tasks/column.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-.tasks-column
+.tasks-column(:class='type')
   b-modal(ref="editTaskModal")
     span Hello From My Modal!
   .d-flex
diff --git a/website/client/mixins/guide.js b/website/client/mixins/guide.js
index 1b0d2fff11..f69b0cb65b 100644
--- a/website/client/mixins/guide.js
+++ b/website/client/mixins/guide.js
@@ -1,325 +1,355 @@
-// var chapters = {
-//    intro: [
-//      [
-//        {
-//          state: 'options.profile.avatar',
-//          element: '.tab-content.ng-scope',
-//          content: this.$t('tourAvatar'),
-//          placement: 'top',
-//          proceed: this.$t('tourAvatarProceed'),
-//          backdrop: false,
-//          orphan: true,
-//          gold: 4,
-//          experience: 29
-//        },
-//        {
-//          state: 'tasks',
-//          element: '.task-column.todos',
-//          content: this.$t('tourToDosBrief'),
-//          placement: 'top',
-//          proceed: this.$t('tourOkay'),
-//          gold: 4,
-//          experience: 29
-//        },
-//        {
-//          state: 'tasks',
-//          element: '.task-column.dailys',
-//          content: this.$t('tourDailiesBrief'),
-//          placement: 'top',
-//          proceed: this.$t('tourDailiesProceed'),
-//          gold: 4,
-//          experience: 29
-//        },
-//        {
-//          state: 'tasks',
-//          element: '.task-column.habits',
-//          content: this.$t('tourHabitsBrief'),
-//          placement: 'top',
-//          proceed: this.$t('tourHabitsProceed'),
-//          gold: 4,
-//          experience: 29
-//        },
-//        {
-//          state: 'tasks',
-//          element: 'h2.task-column_title.reward-title',
-//          content: User.user.flags.armoireEnabled ? this.$t('tourRewardsArmoire') : this.$t('tourRewardsBrief'),
-//          placement: 'left',
-//          proceed: this.$t('tourRewardsProceed'),
-//          gold: 4,
-//          experience: 29,
-//          final: true
-//        }
-//      ]
-//    ],
-//    classes: [
-//      [
-//        {
-//          orphan: true,
-//          content: this.$t('classGearText'),
-//          final: true,
-//          state: 'options.inventory.equipment',
-//          element: '.equipment-tab',
-//          title: this.$t('classGear'),
-//          hideNavigation: true
-//        }
-//        /*, {
-//          state: 'options.profile.stats',
-//          element: '.allocate-stats',
-//          title: this.$t('stats'),
-//          content: this.$t('classStats')
-//        }, {
-//          state: 'options.profile.stats',
-//          element: '.auto-allocate',
-//          title: this.$t('autoAllocate'),
-//          placement: 'left',
-//          content: this.$t('autoAllocateText')
-//        }, {
-//          element: '.meter.mana',
-//          title: this.$t('spells'),
-//          content: this.$t('spellsText')
-//        }, {
-//          orphan: true,
-//          title: this.$t('readMore'),
-//          content: this.$t('moreClass'),
-//          final: true
-//        }*/
-//      ]
-//    ],
-//    stats: [[
-//      {
-//        orphan: true,
-//        content: this.$t('tourStatsPage'),
-//        final: true,
-//        proceed: this.$t('tourOkay'),
-//        hideNavigation: true
-//      }
-//    ]],
-//    tavern: [[
-//      {
-//        orphan: true,
-//        content: this.$t('tourTavernPage'),
-//        final: true,
-//        proceed: this.$t('tourAwesome'),
-//        hideNavigation: true
-//      }
-//    ]],
-//    party: [[
-//      {
-//        orphan: true,
-//        content: this.$t('tourPartyPage'),
-//        final: true,
-//        proceed: this.$t('tourSplendid'),
-//        hideNavigation: true
-//      }
-//    ]],
-//    guilds: [[
-//      {
-//        orphan: true,
-//        content: this.$t('tourGuildsPage'),
-//        final: true,
-//        proceed: this.$t('tourNifty'),
-//        hideNavigation: true
-//      }
-//    ]],
-//    challenges: [[
-//      {
-//        orphan: true,
-//        content: this.$t('tourChallengesPage'),
-//        final: true,
-//        proceed: this.$t('tourOkay'),
-//        hideNavigation: true
-//      }
-//    ]],
-//    market: [[
-//      {
-//        orphan: true,
-//        content: this.$t('tourMarketPage'),
-//        final: true,
-//        proceed: this.$t('tourAwesome'),
-//        hideNavigation: true
-//      }
-//    ]],
-//    hall: [[
-//      {
-//        orphan: true,
-//        content: this.$t('tourHallPage'),
-//        final: true,
-//        proceed: this.$t('tourSplendid'),
-//        hideNavigation: true
-//      }
-//    ]],
-//    pets: [[
-//      {
-//        orphan: true,
-//        content: this.$t('tourPetsPage'),
-//        final: true,
-//        proceed: this.$t('tourNifty'),
-//        hideNavigation: true
-//      }
-//    ]],
-//    mounts: [[
-//      {
-//        orphan: true,
-//        content: this.$t('tourMountsPage'),
-//        final: true,
-//        proceed: this.$t('tourOkay'),
-//        hideNavigation: true
-//      }
-//    ]],
-//    equipment: [[
-//      {
-//        orphan: true,
-//        content: this.$t('tourEquipmentPage'),
-//        final: true,
-//        proceed: this.$t('tourAwesome'),
-//        hideNavigation: true
-//      }
-//    ]]
-//  }
-//
-//  _.each(chapters, function(chapter, k){
-//    _(chapter).flattenDeep().forEach(function(step, i) {
-//      step.content = '<div><div class='' + (env.worldDmg.guide ? 'npc_justin_broken' : 'npc_justin') + ' float-left'></div>' + step.content + '</div>';
-//      $(step.element).popover('destroy'); // destroy existing hover popovers so we can add our own
-//      step.onShow = function(){
-//        Analytics.track({'hitType':'event','eventCategory':'behavior','eventAction':'tutorial','eventLabel':k+'-web','eventValue':i+1,'complete':false});
-//        if (step.state && !$state.is(step.state)) {
-//          $state.go(step.state);
-//          return $timeout(function(){});
-//        }
-//      };
-//      step.onHide = function(){
-//        var ups = {};
-//        var lastKnownStep = User.user.flags.tour[k];
-//
-//        // Return early if user has already completed this tutorial
-//        if (lastKnownStep === -2) {
-//          return;
-//        }
-//
-//        if (i > lastKnownStep) {
-//          if (step.gold) ups['stats.gp'] = User.user.stats.gp + step.gold;
-//          if (step.experience) ups['stats.exp'] = User.user.stats.exp + step.experience;
-//          ups['flags.tour.'+k] = i;
-//        }
-//
-//        if (step.final) { // -2 indicates complete
-//          if (k === 'intro') {
-//            // Manually show bunny scroll reward
-//            var rewardData = {
-//              reward: [Shared.content.quests.dustbunnies],
-//              rewardKey: ['inventory_quest_scroll_dustbunnies'],
-//              rewardText: Shared.content.quests.dustbunnies.text(),
-//              message: this.$t('checkinEarned'),
-//              nextRewardAt: 1,
-//            };
-//            Notification.showLoginIncentive(User.user, rewardData, Social.loadWidgets);
-//          }
-//          //Mark tour complete
-//          ups['flags.tour.'+k] = -2;
-//          Analytics.track({'hitType':'event','eventCategory':'behavior','eventAction':'tutorial','eventLabel':k+'-web','eventValue':i+1,'complete':true})
-//        }
-//
-//        User.set(ups);
-//        // User.set() doesn't include a check for level changes, so manually check here.
-//        if (step.experience) {
-//          User.user.fns.updateStats(User.user.stats);
-//        }
-//      }
-//    });
-//  });
-//
-//  var tour = {};
-//  _.each(chapters, function(v,k){
-//    tour[k] = new Tour({
-//      name: k,
-//      backdrop: true,
-//      template: function(i,step){
-//        var showFinish = step.final || k == 'classes';
-//        var showCounter = k=='intro' && !step.final;
-//
-//        return '<div class='popover' role='tooltip'>' +
-//          '<div class='arrow'></div>' +
-//          '<h3 class='popover-title'></h3>' +
-//          '<div class='popover-content'></div>' +
-//          '<div class='popover-navigation'> ' +
-//            (showCounter ? '<span style='float:right;'>'+ (i+1 +' of '+ _.flattenDeep(chapters[k]).length) +'</span>' : '')+ // counter
-//            '<div class='btn-group'>' +
-//              (step.hideNavigation ? '' : '<button class='btn btn-sm btn-default' data-role='prev'>&laquo; Previous</button>') +
-//              (showFinish ? ('<button class='btn btn-sm btn-primary' data-role='end' style='float:none;'>' + (step.proceed ? step.proceed : 'Finish Tour') + '</button>') :
-//                (step.hideNavigation ? '' : ('<button class='btn btn-sm btn-primary' data-role='next'>' + (step.proceed ? step.proceed : 'Next') + ' &raquo;</button>'))) +
-//              '<button class='btn btn-sm btn-default' data-role='pause-resume' data-pause-text='Pause' data-resume-text='Resume'>Pause</button>' +
-//            '</div>' +
-//          '</div>' +
-//          '</div>';
-//      },
-//      storage: false
-//    });
-//  });
-//
-//  var goto = function(chapter, page, force) {
-//    if (chapter == 'intro' && User.user.flags.welcomed != true) User.set({'flags.welcomed': true});
-//    if (chapter == 'classes' && User.user.flags.tour.classes === -2) return;
-//    if (page === -1) page = 0;
-//    var curr = User.user.flags.tour[chapter];
-//    if (page != curr+1 && !force) return;
-//    var chap = tour[chapter], opts = chap._options;
-//    opts.steps = [];
-//    _.times(page, function(p){
-//      opts.steps  = opts.steps.concat(chapters[chapter][p]);
-//    })
-//
-//    var end = opts.steps.length;
-//    opts.steps = opts.steps.concat(chapters[chapter][page]);
-//    chap._removeState('end');
-//
-//    if (chap._inited) {
-//      chap.goTo(end);
-//    } else {
-//      chap.setCurrentStep(end);
-//      if (page > 0) {
-//        chap.init();
-//        chap.goTo(page);
-//      } else {
-//        chap.start();
-//      }
-//    }
-//  }
-//
-//  //Init and show the welcome tour (only after user is pulled from server & wrapped).
-//  var watcher = $rootScope.$watch('User.user._wrapped', function(wrapped){
-//    if (!wrapped) return; // only run after user has been wrapped
-//    watcher(); // deregister watcher
-//    if (window.env.IS_MOBILE) return; // Don't show tour immediately on mobile devices
-//    if (User.user.flags.welcomed == false) {
-//      $rootScope.openModal('welcome', {size: 'lg', backdrop: 'static', keyboard: false});
-//    }
-//
-//    var alreadyShown = function(before, after) { return !(!before && after === true) };
-//    //$rootScope.$watch('user.flags.dropsEnabled', _.flow(alreadyShown, function(already) { //FIXME requires lodash@~3.2.0
-//    $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
-//      switch (toState.name) {
-//        // case 'options.profile.avatar':   return goto('intro', 5);
-//        case 'options.profile.stats':        return goto('stats', 0);
-//        case 'options.social.tavern':        return goto('tavern', 0);
-//        case 'options.social.party':         return goto('party', 0);
-//        case 'options.social.guilds.public': return goto('guilds', 0);
-//        case 'options.social.challenges':    return goto('challenges', 0);
-//        case 'options.social.hall.heroes':   return goto('hall', 0);
-//        case 'options.inventory.drops':      return goto('market', 0);
-//        case 'options.inventory.pets':       return goto('pets', 0);
-//        case 'options.inventory.mounts':     return goto('mounts', 0);
-//        case 'options.inventory.equipment':  return goto('equipment', 0);
-//      }
-//    });
-//  });
-//
-// export default {
-//   methods: {
-//     hoyo (user) {
-//       // @TODO: What is was the timeout for?
-//       window.amplitude.setUserId(user._id);
-//       window.ga('set', {userId: user._id});
-//     },
-//   },
-// };
+// import each from 'lodash/each';
+// import flattenDeep from 'lodash/flattenDeep';
+import times from 'lodash/times';
+import Intro from 'intro.js/';
+
+export default {
+  data () {
+    return {
+      TOUR_END: -2,
+      tour: {},
+      chapters: {},
+      loaded: false,
+    };
+  },
+  watch: {
+    $route () {
+      this.routeChange();
+    },
+  },
+  methods: {
+    load () {
+      // @TODO: this should be called after app is loaded
+      // Init and show the welcome tour (only after user is pulled from server & wrapped).
+      if (window.env.IS_MOBILE) return; // Don't show tour immediately on mobile devices
+
+      // let alreadyShown = (before, after) => {
+      //   return Boolean(!before && after === true);
+      // };
+      // $rootScope.$watch('user.flags.dropsEnabled', _.flow(alreadyShown, function(already) { //FIXME requires lodash@~3.2.0
+    },
+    initTour () {
+      if (this.loaded) return;
+      this.chapters = {
+        intro: [
+          [
+            {
+              // state: 'options.profile.avatar',
+              element: '.member-details',
+              intro: this.$t('tourAvatar'),
+              // placement: 'top',
+              // proceed: this.$t('tourAvatarProceed'),
+              // backdrop: false,
+              // orphan: true,
+              // gold: 4,
+              // experience: 29,
+            },
+            {
+              // state: 'tasks',
+              element: '.todo',
+              intro: this.$t('tourToDosBrief'),
+              placement: 'top',
+              // proceed: this.$t('tourOkay'),
+              // gold: 4,
+              // experience: 29,
+            },
+            {
+              // state: 'tasks',
+              element: '.daily',
+              intro: this.$t('tourDailiesBrief'),
+              placement: 'top',
+              // proceed: this.$t('tourDailiesProceed'),
+              // gold: 4,
+              // experience: 29,
+            },
+            {
+              // state: 'tasks',
+              element: '.habit',
+              intro: this.$t('tourHabitsBrief'),
+              placement: 'top',
+              // proceed: this.$t('tourHabitsProceed'),
+              // gold: 4,
+              // experience: 29,
+            },
+            {
+              // state: 'tasks',
+              element: '.reward',
+              intro: this.user.flags.armoireEnabled ? this.$t('tourRewardsArmoire') : this.$t('tourRewardsBrief'),
+              placement: 'left',
+              // proceed: this.$t('tourRewardsProceed'),
+              // gold: 4,
+              // experience: 29,
+              // final: true,
+            },
+          ],
+        ],
+        classes: [
+          [
+            {
+              orphan: true,
+              intro: this.$t('classGearText'),
+              final: true,
+              state: 'options.inventory.equipment',
+              element: '.weapon',
+              title: this.$t('classGear'),
+              hideNavigation: true,
+            },
+          ],
+        ],
+        stats: [[
+          {
+            orphan: true,
+            intro: this.$t('tourStatsPage'),
+            final: true,
+            proceed: this.$t('tourOkay'),
+            hideNavigation: true,
+          },
+        ]],
+        tavern: [[
+          {
+            orphan: true,
+            intro: this.$t('tourTavernPage'),
+            final: true,
+            proceed: this.$t('tourAwesome'),
+            hideNavigation: true,
+          },
+        ]],
+        party: [[
+          {
+            orphan: true,
+            intro: this.$t('tourPartyPage'),
+            final: true,
+            proceed: this.$t('tourSplendid'),
+            hideNavigation: true,
+          },
+        ]],
+        guilds: [[
+          {
+            // orphan: true,
+            intro: this.$t('tourGuildsPage'),
+            // final: true,
+            // proceed: this.$t('tourNifty'),
+            // hideNavigation: true,
+          },
+        ]],
+        challenges: [[
+          {
+            orphan: true,
+            intro: this.$t('tourChallengesPage'),
+            final: true,
+            proceed: this.$t('tourOkay'),
+            hideNavigation: true,
+          },
+        ]],
+        market: [[
+          {
+            orphan: true,
+            intro: this.$t('tourMarketPage'),
+            final: true,
+            proceed: this.$t('tourAwesome'),
+            hideNavigation: true,
+          },
+        ]],
+        hall: [[
+          {
+            orphan: true,
+            intro: this.$t('tourHallPage'),
+            final: true,
+            proceed: this.$t('tourSplendid'),
+            hideNavigation: true,
+          },
+        ]],
+        pets: [[
+          {
+            orphan: true,
+            intro: this.$t('tourPetsPage'),
+            final: true,
+            proceed: this.$t('tourNifty'),
+            hideNavigation: true,
+          },
+        ]],
+        mounts: [[
+          {
+            orphan: true,
+            intro: this.$t('tourMountsPage'),
+            final: true,
+            proceed: this.$t('tourOkay'),
+            hideNavigation: true,
+          },
+        ]],
+        equipment: [[
+          {
+            orphan: true,
+            intro: this.$t('tourEquipmentPage'),
+            final: true,
+            proceed: this.$t('tourAwesome'),
+            hideNavigation: true,
+          },
+        ]],
+      };
+      // let chapters = this.chapters;
+      // each(chapters, (chapter, k) => {
+      //   flattenDeep(chapter).forEach((step, i) => {
+      //     // @TODO: (env.worldDmg.guide ? 'npc_justin_broken' : 'npc_justin')
+      //     step.content = `<div><div class='npc_justin float-left'></div>${step.content}</div>`;
+      //     // @TODO: $(step.element).popover('destroy'); // destroy existing hover popovers so we can add our own
+      //
+      //     step.onShow = () => {
+      //       // @TODO: Analytics.track({'hitType':'event','eventCategory':'behavior','eventAction':'tutorial','eventLabel':k+'-web','eventValue':i+1,'complete':false});
+      //       // @TODO: Add Router if (!step.state || $state.is(step.state)) return;
+      //       // @TODO: Add Router $state.go(step.state);
+      //       // @TODO: Do we need this? return $timeout(() => {});
+      //     };
+      //   });
+      // });
+
+      // let tour = this.tour;
+      // each(chapters, (v, k) => {
+      //   tour[k] = new Tour({
+      //     name: k,
+      //     backdrop: true,
+      //     template: (i, step) => {
+      //       let showFinish = step.final || k === 'classes';
+      //       let showCounter = k === 'intro' && !step.final;
+      //       // TODO: we can probably create a component for all this
+      //
+      //       let counterSpan = '';
+      //       if (showCounter) counterSpan = `<span style="float:right;">${i + 1} of ${flattenDeep(chapters[k]).length}</span>`;
+      //
+      //       let prevButton = '';
+      //       if (!step.hideNavigation) prevButton = '<button class="btn btn-sm btn-default" data-role="prev">&laquo; Previous</button>';
+      //
+      //       let nextButton = '';
+      //       let stepProceedText = 'Next';
+      //       if (step.proceed) stepProceedText = step.proceed;
+      //       if (!step.hideNavigation) nextButton = `<button class="btn btn-sm btn-primary" data-role="next">${stepProceedText} &raquo;</button>`;
+      //       let stepFinishText = 'Finish Tour';
+      //       if (step.proceed) stepFinishText = step.proceed;
+      //       if (showFinish) nextButton = `<button class="btn btn-sm btn-primary" data-role="end" style="float:none;">${stepFinishText}</button>`;
+      //
+      //       return `<div class="popover" role="tooltip"> \
+      //         <div class="arrow"></div> \
+      //         <h3 class="popover-title"></h3> \
+      //         <div class="popover-content"></div> \
+      //         <div class="popover-navigation"> \
+      //           ${counterSpan} \
+      //           <div class="btn-group"> \
+      //             ${prevButton} \
+      //             ${nextButton} \
+      //             <button class="btn btn-sm btn-default" \
+      //             data-role="pause-resume" data-pause-text="Pause" data-resume-text="Resume">Pause</button> \
+      //         </div> \
+      //         </div> \
+      //         </div>`;
+      //     },
+      //     storage: false,
+      //   });
+      // });
+      this.loaded = true;
+    },
+    routeChange () {
+      this.initTour();
+      switch (this.$route.name) {
+        // case 'options.profile.avatar':   return goto('intro', 5);
+        case 'stats':        return this.goto('stats', 0);
+        case 'tavern':        return this.goto('tavern', 0);
+        case 'party':         return this.goto('party', 0);
+        case 'guildsDiscovery': return this.goto('guilds', 0);
+        case 'challenges':    return this.goto('challenges', 0);
+        case 'patrons':   return this.goto('hall', 0);
+        case 'items':      return this.goto('market', 0);
+        case 'stable':       return this.goto('pets', 0);
+        // @TODO: same page now case 'stable':     return this.goto('mounts', 0);
+        case 'equipment':  return this.goto('equipment', 0);
+      }
+    },
+    hoyo (user) {
+      // @TODO: What is was the timeout for?
+      window.amplitude.setUserId(user._id);
+      window.ga('set', {userId: user._id});
+    },
+    goto (chapter, page, force) {
+      if (chapter === 'intro' && this.user.flags.welcomed !== true)  {
+        // @TODO: Add dispatch User.set({'flags.welcomed': true});
+      }
+      if (chapter === 'classes' && this.user.flags.tour.classes === -2) return;
+      if (page === -1) page = 0;
+      let curr = this.user.flags.tour[chapter];
+      if (page !== curr + 1 && !force) return;
+      let chap = this.tour[chapter];
+      if (!chap) return;
+      let opts = chap._options;
+      opts.steps = [];
+
+      page += 1;
+      times(page, (p) => {
+        opts.steps  = opts.steps.concat(this.chapters[chapter][p]);
+      });
+
+      // let end = opts.steps.length;
+      // opts.steps = opts.steps.concat(this.chapters[chapter][page]);
+      // chap._removeState('end');
+      // @TODO: Do we always need to initialize here?
+      let intro = Intro.introJs();
+      intro.setOptions({steps: opts.steps});
+      intro.start();
+      intro.oncomplete(() => {
+        this.markTourComplete(chapter);
+      });
+
+      // if (chap._inited) {
+      //   chap.goTo(end);
+      // } else {
+      //   chap.setCurrentStep(end);
+      //   if (page > 0) {
+      //     chap.init();
+      //     chap.goTo(page);
+      //   } else {
+      //     chap.start();
+      //   }
+      // }
+    },
+    markTourComplete (chapter) {
+      // @TODO: this is suppose to keep track of wher ethe left off. Do that later
+      let ups = {};
+      let lastKnownStep = this.user.flags.tour[chapter];
+
+      // Return early if user has already completed this tutorial
+      if (lastKnownStep === -2) {
+        return;
+      }
+
+      // if (i > lastKnownStep) {
+      //   if (step.gold) ups['stats.gp'] = this.user.stats.gp + step.gold;
+      //   if (step.experience) ups['stats.exp'] = this.user.stats.exp + step.experience;
+      //   ups[`flags.tour.${k}`] = i;
+      // }
+
+      // step.final
+      // if (true) { // -2 indicates complete
+      //   if (chapter === 'intro') {
+      //     // Manually show bunny scroll reward
+      //     // let rewardData = {
+      //     //   reward: [Shared.content.quests.dustbunnies],
+      //     //   rewardKey: ['inventory_quest_scroll_dustbunnies'],
+      //     //   rewardText: Shared.content.quests.dustbunnies.text(),
+      //     //   message: this.$t('checkinEarned'),
+      //     //   nextRewardAt: 1,
+      //     // };
+      //     // @TODO: Notification.showLoginIncentive(this.user, rewardData, Social.loadWidgets);
+      //   }
+
+        // Mark tour complete
+      ups[`flags.tour.${chapter}`] = -2; // @TODO: Move magic numbers to enum
+        // @TODO: Analytics.track({'hitType':'event','eventCategory':'behavior','eventAction':'tutorial','eventLabel':k+'-web','eventValue':i+1,'complete':true})
+      // }
+
+      this.$store.dispatch('user:set', ups);
+      // User.set() doesn't include a check for level changes, so manually check here.
+      // @TODO:
+      // if (step.experience) {
+      //   this.user.fns.updateStats(this.user.stats);
+      // }
+    },
+  },
+};