From 5f2032a9d50bea2f10b63b5cfe25b048183b03d4 Mon Sep 17 00:00:00 2001
From: negue <negue@users.noreply.github.com>
Date: Thu, 26 Sep 2019 12:43:47 +0200
Subject: [PATCH] Style fixes: Onboarding (#11241)

* wip: createIntro / onboard ui rework

* extract more methods - working body settings component

* move justin above the dialog

* extract submenu + fix styles

* white background on items, working example of "none" item, item border radius

* extract options as component

* move more subMenu's to the component

* add chair margins

* move tasks to common/content

* add menu indicator

* extract more parts of onboarding-intro

* refactor / fully converted hair-settings

* extract extra-settings

* fix sprite positions / lint

* extract task-strings to be translatable

* style fixes - hide submenu's if not editing

* style / margin fixes

* more style fixes

* show hair styles at onboarding - use arrowleft/right as svg instead of image fix next color

* finish button style - full set background/purchase button

* fix footer - prev/next hover

* Add Default Tasks + `byHabitica` property

* customize-options click item on the full zone

* purple tasks

* footer animation => none

* fix onboarding task habit up/down

* onboarding circle color/position

* task styles

* fix onboarding position

* show seasonal options

* add hover to (locked-) options

* added the correct behavior of shop-items to onboarding options

* hide hover on active options
---
 website/client/assets/creator/arrow.png       |  Bin 194 -> 0 bytes
 website/client/assets/creator/arrow@2x.png    |  Bin 330 -> 0 bytes
 website/client/assets/creator/arrow@3x.png    |  Bin 582 -> 0 bytes
 website/client/assets/creator/prev.png        |  Bin 191 -> 0 bytes
 website/client/assets/creator/prev@2x.png     |  Bin 334 -> 0 bytes
 website/client/assets/creator/prev@3x.png     |  Bin 614 -> 0 bytes
 website/client/assets/scss/colors.scss        |    2 +
 website/client/assets/scss/task.scss          |   13 +
 website/client/assets/svg/arrow_left.svg      |    3 +
 website/client/assets/svg/arrow_right.svg     |    3 +
 .../components/avatarModal/body-settings.vue  |   92 +
 .../avatarModal/customize-options.vue         |  304 +++
 .../components/avatarModal/extra-settings.vue |  272 +++
 .../components/avatarModal/hair-settings.vue  |  341 ++++
 .../components/avatarModal/skin-settings.vue  |  114 ++
 .../components/avatarModal/sub-menu.vue       |   52 +
 website/client/components/creatorIntro.vue    | 1767 +++++------------
 website/client/components/tasks/column.vue    |    1 -
 website/client/components/tasks/task.vue      |   13 +-
 website/client/mixins/avatarEditUtilities.js  |  178 ++
 website/client/mixins/subPage.js              |   12 +
 website/client/mixins/userState.js            |    7 +
 website/client/store/getters/tasks.js         |    2 +-
 website/common/locales/en/defaultTasks.json   |   48 +-
 website/common/locales/en/generic.json        |    1 +
 website/common/script/content/index.js        |    2 +
 website/common/script/content/tasks.js        |  158 ++
 website/server/models/task.js                 |    2 +
 28 files changed, 2142 insertions(+), 1245 deletions(-)
 delete mode 100644 website/client/assets/creator/arrow.png
 delete mode 100644 website/client/assets/creator/arrow@2x.png
 delete mode 100644 website/client/assets/creator/arrow@3x.png
 delete mode 100644 website/client/assets/creator/prev.png
 delete mode 100644 website/client/assets/creator/prev@2x.png
 delete mode 100644 website/client/assets/creator/prev@3x.png
 create mode 100644 website/client/assets/svg/arrow_left.svg
 create mode 100644 website/client/assets/svg/arrow_right.svg
 create mode 100644 website/client/components/avatarModal/body-settings.vue
 create mode 100644 website/client/components/avatarModal/customize-options.vue
 create mode 100644 website/client/components/avatarModal/extra-settings.vue
 create mode 100644 website/client/components/avatarModal/hair-settings.vue
 create mode 100644 website/client/components/avatarModal/skin-settings.vue
 create mode 100644 website/client/components/avatarModal/sub-menu.vue
 create mode 100644 website/client/mixins/avatarEditUtilities.js
 create mode 100644 website/client/mixins/subPage.js
 create mode 100644 website/client/mixins/userState.js
 create mode 100644 website/common/script/content/tasks.js

diff --git a/website/client/assets/creator/arrow.png b/website/client/assets/creator/arrow.png
deleted file mode 100644
index 410be81a7798edd16242d1ec3e5479b509031e01..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 194
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz#^NA%Cx&(BWL^R}HJ&bxArYL(
zDGLNtr1F3E=N$R7*{<hAjZ==A6IX_={VRq^kGP{t7A$8hF>SeYBtwL!g2O<l%lV7N
z(kcD()YxoT++-cTn>5U8b6cEX!s6zfaKO2N)i(apEc+<&1??XimN#BBd)VN9u)(_F
p)l-HlJ9q!DFa9v{HwLmZFti$q{ygBhCLHJv22WQ%mvv4FO#sAXLt+2`

diff --git a/website/client/assets/creator/arrow@2x.png b/website/client/assets/creator/arrow@2x.png
deleted file mode 100644
index 003d4b98c2cf0dcda1d422656cec8a5a672e12ab..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 330
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=jKx9jP7LeL$-D%zSv*}FLn;{G
z&U(wsWXR*JnWTIzfm3a_YDDwQgl6MOp%X3M|BG5H^xO6N?}+L4@#lZPE)F~Nv2Km=
z-K*=~vE99%?C_oC?k~jyr5k=%alDwfAo~Bc>NomFR~9$iI&7<Mz;x<ii7eA4;jq7s
z4MiHU^8N>k-XFfo8Th>ABTIrqX-oNacE;VZ>-O2Rg!pHa*M5A?kgA}(K*sC3qJnMW
zRe2VT_DiK49{v$u*%?nQL^Da(HgO+!N6Ybk1~v|-N2weg{ShV>^BDdKi?kd${n(v>
z`H`eJuTz78Mx30#!_V)GuPX1kme?>#JW#q)Ys*sNe_^dWQw;m=_5YdjWW_8`*q6Hl
P1Bb!W)z4*}Q$iB}Q$B(!

diff --git a/website/client/assets/creator/arrow@3x.png b/website/client/assets/creator/arrow@3x.png
deleted file mode 100644
index 938172fa189779bc420ff75fd82d0f4e9930cad1..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 582
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7OGojKx9jP7LeL$-HD>U}EreaSW+o
zd^_i$ud^c$E9WBRTMIa~yoI+o`UW&4yHC3|k45eH*R1$|J#l=iRi;l@udm%#|F=Z$
z;jh1iFW=0+_uESL!B100)+;r~mUBtC$FOTGcxG%Ddcfk5l>?*c{EsV{jtO38<XZ8w
z$6wT-ZwFt1!`bwjRSktlN)I^S?Y@%#_1l(e@si(DYD#~-JHhtkO}H9Y#KAf38Vc!~
zjRFsFJ+pCPw46P)lPS#Lxgytzn`?YTHZ)oC2RfWfOI_3;dZx02smM%w^64+Jr%nai
z1bBQ08gk&1$O48L3^Mu5A`HR}k8>NC5||41@CGpWF!XI_<Z9qN@bMn&L8d<(K}aHI
z4vYqj7WddR7}OY!-)3Mv!1AC%nvgLtO$V6nJ@{iU{yzW6JfD^FjvEYEaT~*+bKrm9
zKIH|~+l!y?FxbY(c=BBnQ(0xZ2`h`rZf>p{Ph~HO2uygRr;#wd+#}e*Vbksf4YBtW
zebE&De^>2zx!gLo)@*_In-6uYGHkbO{TO4D+P`Z*Fu3rpkn4qz^`3af_QtaQV29~9
z9{%OB;Mr0=hiTUlzW3n=5*OTkEOJ4$tm40Zn}=AX^y^i?w7|gN>FVdQ&MBb@0LG~3
A1^@s6

diff --git a/website/client/assets/creator/prev.png b/website/client/assets/creator/prev.png
deleted file mode 100644
index 6ad81b7d3ceac73431c26fca2990c5effeccec38..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 191
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz#^NA%Cx&(BWL^R}m7Xq+ArYL(
zDGGu*u{)mGZ<_Yvhk#p(-O3!bAk%>8zblv{I9N5S<_HJ*ulkcA!c)PK@FX$nxMh`;
z<OczXQU>L{k84bLd)f|UaPaIBkXXy@_L`~3q+y;H=T*_gf0@1rC{MM2&^aMN%Hg|U
m)hr2L<`;@CTJ;Am1KsySf-!mR@uNUTFnGH9xvX<aXaWEfdp_g<

diff --git a/website/client/assets/creator/prev@2x.png b/website/client/assets/creator/prev@2x.png
deleted file mode 100644
index f5f24ed3bfca3a27b5bc5b0857821c1fd429efe0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 334
zcmV-U0kQsxP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00001b5ch_0Itp)
z=>Px$2uVaiRCodHn=uXoF%Sa@;)!$=yp4j6KOR3g7m+2OcdoT=leK4+pcCt6e!idI
zakj+k{ak0dTf4g#NUx6p=?S^_2LWz})9XV(dP45~J$4sR=lpJc_xp^1+u`*35Rjgb
zdw&q%b~wHMcmm{a@vEQnioo#%V1PoTU59}7gjIhKpd4z~SNl1y0%Qb~L+v^Qv?r|k
zg8=1FyAA>E39J4fKsnT|LqL1Nsy_%&4z=s!3E;axJL0Op@gsl%3Xygl0@@Q+{f#F;
z-UF0_yWbV~zkqVstdAc73@{TGUmgPDBQkGrJOSJH02PqBCvXo?4x07xBY**B!s5$A
gKzu~z4UQ+^52FbfLHbiDJ^%m!07*qoM6N<$f;vWvr~m)}

diff --git a/website/client/assets/creator/prev@3x.png b/website/client/assets/creator/prev@3x.png
deleted file mode 100644
index 780145a87e6ea13d96a0540c314ee2cb37d1c744..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 614
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7OGojKx9jP7LeL$-HD>U{dgOaSW+o
zd^^|B?}&o{i{%mFlN=S&jFR;&6-`suE%~-Z_0^`ScWuL_UOV{8?|a40o6mp0em>pi
z((&iNoA1<bua1BJ&EfysN|6AwbquUiIHw%n%`6h279jVYFTi1@L**W82gX#Uryt)n
zY--rP`uXL}b63xQp7$5X6=c;|;IqKyp6r4KqsC7a<qb@ySWZ2@%gCi6tkGZ24wjUw
zUw&-!+%<;rj*;_r_%cdFnk{J1@xQZ-p+`qLz+swtUND2(G+qsb)56;|8I(`6iA;Ff
zd0V7mVk$G&iBCsz`OlXbY|c0!D{%DWX^{gnU4^+i9z99rdT?eDC#y^0CnMH^w2LiF
zi!3T<GFfcSaAFLcv&V;VPNd1g1`WTsWen$ZW(7EisOtwaq>K4#D0EGpuGwJRttLX)
zxc!2Ufp(OWrCHLBdy(?Gf4sB)E4%ep{8xCOo$=sCyhg(OpEFi8G$z+CY^Z&fyoiad
z?{6#9x0(H&ToM-F#JO&y+o@?Kz!X;ejJz=8+mWVuvXx?ASVHnGg+GXvq-`#8Wz?Q=
g-dUu8c;-KbrYMO<$;y@kz=Xr#>FVdQ&MBb@09UvEMgRZ+

diff --git a/website/client/assets/scss/colors.scss b/website/client/assets/scss/colors.scss
index ee3864f7c0..9ced003cc1 100644
--- a/website/client/assets/scss/colors.scss
+++ b/website/client/assets/scss/colors.scss
@@ -78,3 +78,5 @@ $wizard-color: #2995CD;
 $gems-color: #24CC8F;
 $gold-color: #FFA624;
 $hourglass-color: #2995CD;
+
+$purple-task: #925cf3;
diff --git a/website/client/assets/scss/task.scss b/website/client/assets/scss/task.scss
index 46d17aba95..f7fc28751a 100644
--- a/website/client/assets/scss/task.scss
+++ b/website/client/assets/scss/task.scss
@@ -231,6 +231,19 @@
   }
 
   &-purple { // purple, only used in modals
+    &-control {
+      &-bg {
+        background: $purple-task !important;
+        &:hover {
+          .habit-control { background: rgba(26, 24, 29, 0.48) !important; }
+          .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
+        }
+      }
+      &-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
+      &-inner-daily-todo { background: #ffffff80 !important; }
+      &-checkbox { color: $purple-task !important; }
+    }
+
     &-modal {
       &-bg { background: $purple-300 !important; }
       &-icon { color: $purple-300 !important; }
diff --git a/website/client/assets/svg/arrow_left.svg b/website/client/assets/svg/arrow_left.svg
new file mode 100644
index 0000000000..51be9229ea
--- /dev/null
+++ b/website/client/assets/svg/arrow_left.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <path fill="#A5A1AC" fill-rule="evenodd" d="M16 0h-4v32h4V0zm16 8H16v16h16V8zM12 4H8v24h4V4zM8 8H4v16h4V8zm-4 4H0v8h4v-8z"/>
+</svg>
diff --git a/website/client/assets/svg/arrow_right.svg b/website/client/assets/svg/arrow_right.svg
new file mode 100644
index 0000000000..88947c9bdd
--- /dev/null
+++ b/website/client/assets/svg/arrow_right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <path fill="#A5A1AC" fill-rule="evenodd" d="M16 0h4v32h-4V0zM0 8h16v16H0V8zm20-4h4v24h-4V4zm4 4h4v16h-4V8zm4 4h4v8h-4v-8z"/>
+</svg>
diff --git a/website/client/components/avatarModal/body-settings.vue b/website/client/components/avatarModal/body-settings.vue
new file mode 100644
index 0000000000..cea1b2c7dd
--- /dev/null
+++ b/website/client/components/avatarModal/body-settings.vue
@@ -0,0 +1,92 @@
+<template lang="pug">
+  #body.section.customize-section
+    sub-menu.text-center(:items="items", :activeSubPage="activeSubPage", @changeSubPage="changeSubPage($event)")
+    div(v-if='activeSubPage === "size"')
+      customize-options(
+        :items="sizes",
+        :currentValue="user.preferences.size"
+      )
+    div(v-if='activeSubPage === "shirt"')
+      customize-options(
+        :items="freeShirts",
+        :currentValue="user.preferences.shirt"
+      )
+      customize-options(
+        v-if='editing',
+        :items='specialShirts',
+        :currentValue="user.preferences.shirt",
+        :fullSet='!userOwnsSet("shirt", specialShirtKeys)',
+        @unlock='unlock(`shirt.${specialShirtKeys.join(",shirt.")}`)'
+      )
+</template>
+
+<script>
+  import appearance from 'common/script/content/appearance';
+  import {subPageMixin} from '../../mixins/subPage';
+  import {userStateMixin} from '../../mixins/userState';
+  import {avatarEditorUtilies} from '../../mixins/avatarEditUtilities';
+  import subMenu from './sub-menu';
+  import customizeOptions from './customize-options';
+  import gem from 'assets/svg/gem.svg';
+
+  const freeShirtKeys = Object.keys(appearance.shirt).filter(k => appearance.shirt[k].price === 0);
+  const specialShirtKeys = Object.keys(appearance.shirt).filter(k => appearance.shirt[k].price !== 0);
+
+
+  export default {
+    props: [
+      'editing',
+    ],
+    components: {
+      subMenu,
+      customizeOptions,
+    },
+    mixins: [
+      subPageMixin,
+      userStateMixin,
+      avatarEditorUtilies,
+    ],
+    data () {
+      return {
+        specialShirtKeys,
+        icons: Object.freeze({
+          gem,
+        }),
+        items: [
+          {
+            id: 'size',
+            label: this.$t('size'),
+          },
+          {
+            id: 'shirt',
+            label: this.$t('shirt'),
+          },
+        ],
+      };
+    },
+    computed: {
+      sizes () {
+        return ['slim', 'broad'].map(s => this.mapKeysToFreeOption(s, 'size'));
+      },
+      freeShirts () {
+        return freeShirtKeys.map(s => this.mapKeysToFreeOption(s, 'shirt'));
+      },
+      specialShirts () {
+        let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
+        let keys = this.specialShirtKeys;
+        let options = keys.map(key => this.mapKeysToOption(key, 'shirt'));
+        return options;
+      },
+    },
+    mounted () {
+      this.changeSubPage('size');
+    },
+    methods: {
+
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>
diff --git a/website/client/components/avatarModal/customize-options.vue b/website/client/components/avatarModal/customize-options.vue
new file mode 100644
index 0000000000..27eb6e2e0b
--- /dev/null
+++ b/website/client/components/avatarModal/customize-options.vue
@@ -0,0 +1,304 @@
+<template lang="pug">
+  .customize-options(:class="{'background-set': fullSet}")
+    .outer-option-background(
+      v-for='option in items',
+      :key='option.key',
+      @click='option.click(option)',
+      :class='{locked: option.gemLocked || option.goldLocked, premium: Boolean(option.gem), active: option.active || currentValue === option.key, none: option.none, hide: option.hide }'
+    )
+      .option
+        .sprite.customize-option(:class='option.class')
+          .redline-outer(v-if="option.none")
+            .redline
+      .gem-lock(v-if='option.gemLocked')
+        .svg-icon.gem(v-html='icons.gem')
+        span {{ option.gem }}
+      .gold-lock(v-if='option.goldLocked')
+        .svg-icon.gold(v-html='icons.gold')
+        span {{ option.gold }}
+    .purchase-set(v-if='fullSet', @click='unlock()')
+      span.label {{ $t('purchaseAll') }}
+      .svg-icon.gem(v-html='icons.gem')
+      span.price 5
+</template>
+
+<script>
+  import gem from 'assets/svg/gem.svg';
+  import gold from 'assets/svg/gold.svg';
+  import {avatarEditorUtilies} from '../../mixins/avatarEditUtilities';
+
+  export default {
+    props: ['items', 'currentValue', 'fullSet'],
+    mixins: [
+      avatarEditorUtilies,
+    ],
+    data () {
+      return {
+        icons: Object.freeze({
+          gem,
+          gold,
+        }),
+      };
+    },
+    methods: {
+      unlock () {
+        this.$emit('unlock');
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  .customize-options {
+    width: 100%;
+  }
+
+  .hide {
+    display: none !important;
+  }
+
+  .outer-option-background {
+    display: inline-block;
+    vertical-align: top;
+    pointer-events: visible;
+    cursor: pointer;
+
+    &.premium {
+      height: 112px;
+      width: 96px;
+      margin-left: 8px;
+      margin-right: 8px;
+      margin-bottom: 8px;
+
+      .option {
+        margin: 12px 16px;
+      }
+    }
+
+    &.locked {
+      border-radius: 2px;
+      border: 1px solid transparent;
+      box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+      background-color: $white;
+
+      .option {
+        border: none;
+        border-radius: 2px;
+        padding-left: 6px;
+        padding-top: 4px;
+      }
+
+      &:hover {
+        box-shadow: 0 4px 4px 0 rgba($black, 0.16), 0 1px 8px 0 rgba($black, 0.12);
+        border: 1px solid $purple-500;
+      }
+    }
+
+    &:not(.locked):not(.active) {
+      .option:hover {
+        background-color: rgba(213, 200, 255, .32);
+      }
+    }
+
+    &.premium:not(.locked):not(.active) {
+      border-radius: 2px;
+      background-color: rgba(59, 202, 215, 0.1);
+    }
+
+    &.none .option {
+      .sprite {
+        opacity: 0.24;
+      }
+
+      .redline-outer {
+        height: 60px;
+        width: 60px;
+        position: absolute;
+        bottom: 0;
+        margin: 0 auto 0 0;
+
+        .redline {
+          width: 60px;
+          height: 4px;
+          display: block;
+          background: red;
+          transform: rotate(-45deg);
+          position: absolute;
+          top: 0;
+          margin-top: 30px;
+          margin-bottom: 20px;
+          margin-left: -1px;
+        }
+      }
+    }
+
+    &.active .option {
+      background: white;
+      border: solid 4px $purple-300;
+    }
+
+    &.premium:not(.active) .option {
+      border-radius: 8px;
+    }
+  }
+  .option {
+    vertical-align: bottom;
+    height: 64px;
+    width: 64px;
+
+    margin: 12px 8px;
+    border: 4px solid transparent;
+    border-radius: 10px;
+    position: relative;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .outer-option-background:not(.none) {
+
+    .sprite.customize-option {
+      // margin: 0 auto;
+      //margin-left: -3px;
+      //margin-top: -7px;
+      margin-top: 0;
+      margin-left: 0;
+
+      &.size, &.shirt {
+        margin-top: -8px;
+        margin-left: -4px;
+      }
+
+      &.color-bangs {
+        margin-top: 3px;
+      }
+      &.skin {
+        margin-top: -4px;
+        margin-left: -4px;
+      }
+      &.chair {
+        margin-left: -1px;
+        margin-top: -1px;
+
+        &.button_chair_black {
+          // different sprite margin?
+          margin-top: -3px;
+        }
+
+        &.handleless {
+          margin-left: -5px;
+          margin-top: -5px;
+        }
+      }
+      &.color, &.bangs {
+          margin-top: 4px;
+          margin-left: -3px;
+      }
+
+      &.hair.base {
+          margin-top: 0px;
+          margin-left: -5px;
+      }
+
+      &.headAccessory {
+        margin-top: 0;
+        margin-left: -4px;
+      }
+
+      &.headband {
+        margin-top: -6px;
+        margin-left: -27px;
+      }
+    }
+  }
+
+  .text-center {
+    .gem-lock, .gold-lock {
+      display: inline-block;
+      margin: 0 auto 8px;
+      vertical-align: bottom;
+    }
+  }
+
+  .gem-lock, .gold-lock {
+    .svg-icon {
+      width: 16px;
+    }
+
+    span {
+      font-weight: bold;
+      margin-left: .5em;
+    }
+
+    .svg-icon, span {
+      display: inline-block;
+      vertical-align: bottom;
+    }
+  }
+
+  .gem-lock span {
+    color: $green-10
+  }
+
+  .purchase-set {
+    background: #fff;
+    padding: 0.5em;
+    border-radius: 0 0 2px 2px;
+    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+    cursor: pointer;
+
+    span {
+      font-weight: bold;
+      font-size: 12px;
+    }
+
+    span.price {
+      color: #24cc8f;
+    }
+
+    .gem, .coin {
+      width: 16px;
+    }
+
+    &.single {
+      width: 141px;
+    }
+
+    width: 100%;
+
+    span {
+      font-size: 14px;
+    }
+
+    .gem, .coin {
+      width: 20px;
+      margin: 0 .5em;
+      display: inline-block;
+      vertical-align: bottom;
+    }
+  }
+
+  .background-set {
+    background-color: #edecee;
+    border-radius: 2px;
+
+    padding-top: 12px;
+    margin-left: 12px;
+    margin-right: 12px;
+    margin-bottom: 12px;
+
+
+    width: calc(100% - 24px);
+
+    padding-left: 0;
+    padding-right: 0;
+
+    max-width: unset; // disable col12 styling
+    flex: unset;
+  }
+
+
+</style>
diff --git a/website/client/components/avatarModal/extra-settings.vue b/website/client/components/avatarModal/extra-settings.vue
new file mode 100644
index 0000000000..406771ebfd
--- /dev/null
+++ b/website/client/components/avatarModal/extra-settings.vue
@@ -0,0 +1,272 @@
+<template lang="pug">
+  #extra.section.container.customize-section
+    sub-menu.text-center(:items="extraSubMenuItems", :activeSubPage="activeSubPage", @changeSubPage="changeSubPage($event)")
+
+    #hair-color(v-if='activeSubPage === "glasses"')
+      customize-options(
+        :items="eyewear"
+      )
+
+    #animal-ears(v-if='activeSubPage === "ears"')
+      customize-options(
+        :items="animalItems('headAccessory')",
+        :fullSet='!animalItemsOwned("headAccessory")',
+        @unlock='unlock(animalItemsUnlockString("headAccessory"))'
+      )
+
+    #animal-tails(v-if='activeSubPage === "tails"')
+      customize-options(
+        :items="animalItems('back')",
+        :fullSet='!animalItemsOwned("back")',
+        @unlock='unlock(animalItemsUnlockString("back"))'
+      )
+    #headband(v-if='activeSubPage === "headband"')
+      customize-options(
+        :items="headbands",
+      )
+
+    #wheelchairs(v-if='activeSubPage === "wheelchair"')
+      customize-options(
+        :items="chairs",
+      )
+    #flowers(v-if='activeSubPage === "flower"')
+      customize-options(
+        :items="flowers",
+      )
+</template>
+
+<script>
+  import appearance from 'common/script/content/appearance';
+  import {subPageMixin} from '../../mixins/subPage';
+  import {userStateMixin} from '../../mixins/userState';
+  import {avatarEditorUtilies} from '../../mixins/avatarEditUtilities';
+  import subMenu from './sub-menu';
+  import customizeOptions from './customize-options';
+  import gem from 'assets/svg/gem.svg';
+
+  const freeShirtKeys = Object.keys(appearance.shirt).filter(k => appearance.shirt[k].price === 0);
+  const specialShirtKeys = Object.keys(appearance.shirt).filter(k => appearance.shirt[k].price !== 0);
+
+
+  export default {
+    props: [
+      'editing',
+    ],
+    components: {
+      subMenu,
+      customizeOptions,
+    },
+    mixins: [
+      subPageMixin,
+      userStateMixin,
+      avatarEditorUtilies,
+    ],
+    data () {
+      return {
+        animalItemKeys: {
+          back: ['bearTail', 'cactusTail', 'foxTail', 'lionTail', 'pandaTail', 'pigTail', 'tigerTail', 'wolfTail'],
+          headAccessory: ['bearEars', 'cactusEars', 'foxEars', 'lionEars', 'pandaEars', 'pigEars', 'tigerEars', 'wolfEars'],
+        },
+        chairKeys: ['none', 'black', 'blue', 'green', 'pink', 'red', 'yellow', 'handleless_black', 'handleless_blue', 'handleless_green', 'handleless_pink', 'handleless_red', 'handleless_yellow'],
+        specialShirtKeys,
+        icons: Object.freeze({
+          gem,
+        }),
+        items: [
+          {
+            id: 'size',
+            label: this.$t('size'),
+          },
+          {
+            id: 'shirt',
+            label: this.$t('shirt'),
+          },
+        ],
+      };
+    },
+    computed: {
+      extraSubMenuItems () {
+        const items = [];
+
+        if (this.editing) {
+          items.push({
+            id: 'glasses',
+            label: this.$t('glasses'),
+          });
+        }
+
+        items.push(
+          {
+            id: 'wheelchair',
+            label: this.$t('wheelchair'),
+          },
+          {
+            id: 'flower',
+            label: this.$t('accent'),
+          },
+        );
+
+        if (this.editing) {
+          items.push({
+            id: 'ears',
+            label: this.$t('animalEars'),
+          });
+
+          items.push({
+            id: 'tails',
+            label: this.$t('animalTails'),
+          });
+
+          items.push({
+            id: 'headband',
+            label: this.$t('headband'),
+          });
+        }
+
+        return items;
+      },
+      eyewear () {
+        let keys = [
+          'blackTopFrame', 'blueTopFrame', 'greenTopFrame', 'pinkTopFrame', 'redTopFrame', 'whiteTopFrame', 'yellowTopFrame',
+          'blackHalfMoon', 'blueHalfMoon', 'greenHalfMoon', 'pinkHalfMoon', 'redHalfMoon', 'whiteHalfMoon', 'yellowHalfMoon',
+        ];
+        let options = keys.map(key => {
+          let newKey = `eyewear_special_${key}`;
+          let option = {};
+          option.key = key;
+          option.active = this.user.preferences.costume ? this.user.items.gear.costume.eyewear === newKey : this.user.items.gear.equipped.eyewear === newKey;
+          option.class = `eyewear_special_${key}`;
+          option.click = () => {
+            let type = this.user.preferences.costume ? 'costume' : 'equipped';
+
+            return this.equip(newKey, type);
+          };
+          return option;
+        });
+        return options;
+      },
+      freeShirts () {
+        return freeShirtKeys.map(s => this.mapKeysToFreeOption(s, 'shirt'));
+      },
+      specialShirts () {
+        let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
+        let keys = this.specialShirtKeys;
+        let options = keys.map(key => this.mapKeysToOption(key, 'shirt'));
+        return options;
+      },
+      headbands () {
+        let keys = ['blackHeadband', 'blueHeadband', 'greenHeadband', 'pinkHeadband', 'redHeadband', 'whiteHeadband', 'yellowHeadband'];
+        let options = keys.map(key => {
+          let newKey = `headAccessory_special_${key}`;
+          let option = {};
+          option.key = key;
+          option.active = this.user.preferences.costume ? this.user.items.gear.costume.headAccessory === newKey : this.user.items.gear.equipped.headAccessory === newKey;
+          option.class = `headAccessory_special_${option.key} headband`;
+          option.click = () => {
+            let type = this.user.preferences.costume ? 'costume' : 'equipped';
+            return this.equip(newKey, type);
+          };
+          return option;
+        });
+        return options;
+      },
+      chairs () {
+        let options = this.chairKeys.map(key => {
+          let option = {};
+          option.key = key;
+          if (key === 'none') {
+            option.none = true;
+          }
+          option.active = this.user.preferences.chair === key;
+          option.class = `button_chair_${key} chair ${key.includes('handleless_') ? 'handleless' : ''}`;
+          option.click = () => {
+            return this.set({'preferences.chair': key});
+          };
+          return option;
+        });
+        return options;
+      },
+      flowers () {
+        let keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
+        let options = keys.map(key => {
+          let option = {};
+          option.key = key;
+          if (key === 0) {
+            option.none = true;
+          }
+          option.active = this.user.preferences.hair.flower === key;
+          option.class = `hair_flower_${key} flower`;
+          option.click = () => {
+            return this.set({'preferences.hair.flower': key});
+          };
+          return option;
+        });
+        return options;
+      },
+    },
+    mounted () {
+      this.changeSubPage(this.extraSubMenuItems[0].id);
+    },
+    methods: {
+      animalItems (category) {
+        // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
+        let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
+        let keys = this.animalItemKeys[category];
+        let options = keys.map(key => {
+          let newKey = `${category}_special_${key}`;
+          let userPurchased = this.user.items.gear.owned[newKey];
+
+          let option = {};
+          option.key = key;
+          option.active = this.user.preferences.costume ? this.user.items.gear.costume[category] === newKey : this.user.items.gear.equipped[category] === newKey;
+          option.class = `headAccessory_special_${option.key} ${category}`;
+          if (category === 'back') {
+            option.class = `icon_back_special_${option.key} back`;
+          }
+          option.gemLocked = userPurchased === undefined;
+          option.goldLocked = userPurchased === false;
+          if (option.goldLocked) {
+            option.gold = 20;
+          }
+          if (option.gemLocked) {
+            option.gem = 2;
+          }
+          option.locked = option.gemLocked || option.goldLocked;
+          option.click = () => {
+            if (option.gemLocked) {
+              return this.unlock(`items.gear.owned.${newKey}`);
+            } else if (option.goldLocked) {
+              return this.buy(newKey);
+            } else {
+              let type = this.user.preferences.costume ? 'costume' : 'equipped';
+              return this.equip(newKey, type);
+            }
+          };
+          return option;
+        });
+        return options;
+      },
+      animalItemsUnlockString (category) {
+        const keys = this.animalItemKeys[category].map(key => {
+          return `items.gear.owned.${category}_special_${key}`;
+        });
+
+        return keys.join(',');
+      },
+      animalItemsOwned (category) {
+        // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
+        let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
+
+        let own = true;
+        this.animalItemKeys[category].forEach(key => {
+          if (this.user.items.gear.owned[`${category}_special_${key}`] === undefined) own = false;
+        });
+        return own;
+      },
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>
diff --git a/website/client/components/avatarModal/hair-settings.vue b/website/client/components/avatarModal/hair-settings.vue
new file mode 100644
index 0000000000..d86f608aba
--- /dev/null
+++ b/website/client/components/avatarModal/hair-settings.vue
@@ -0,0 +1,341 @@
+<template lang="pug">
+  #hair.section.customize-section
+    sub-menu.text-center(:items="hairSubMenuItems", :activeSubPage="activeSubPage", @changeSubPage="changeSubPage($event)")
+
+    #hair-color(v-if='activeSubPage === "color"')
+      customize-options(
+        :items="freeHairColors",
+        :currentValue="user.preferences.hair.color"
+      )
+
+      div(v-if='editing && set.key !== "undefined"', v-for='set in seasonalHairColors')
+        customize-options(
+          :items='set.options',
+          :currentValue="user.preferences.skin",
+          :fullSet='!hideSet(set) && !userOwnsSet("hair", set.keys, "color")',
+          @unlock='unlock(`hair.color.${set.keys.join(",hair.color.")}`)'
+        )
+
+    #style(v-if='activeSubPage === "style"')
+      div(v-for='set in styleSets')
+        customize-options(
+          :items='set.options',
+          :fullSet='set.fullSet',
+          @unlock='set.unlock()'
+        )
+    #bangs(v-if='activeSubPage === "bangs"')
+      customize-options(
+        :items='hairBangs',
+        :currentValue="user.preferences.hair.bangs"
+      )
+    #facialhair(v-if='activeSubPage === "facialhair"')
+      customize-options(
+        v-if='editing',
+        :items='mustacheList'
+      )
+      customize-options(
+        v-if='editing',
+        :items='beardList',
+        :fullSet='isPurchaseAllNeeded("hair", ["baseHair5", "baseHair6"], ["mustache", "beard"])',
+        @unlock='unlock(`hair.mustache.${baseHair5Keys.join(",hair.mustache.")},hair.beard.${baseHair6Keys.join(",hair.beard.")}`)'
+      )
+</template>
+
+<script>
+  import appearance from 'common/script/content/appearance';
+  import {subPageMixin} from '../../mixins/subPage';
+  import {userStateMixin} from '../../mixins/userState';
+  import {avatarEditorUtilies} from '../../mixins/avatarEditUtilities';
+  import subMenu from './sub-menu';
+  import customizeOptions from './customize-options';
+  import gem from 'assets/svg/gem.svg';
+  import appearanceSets from 'common/script/content/appearance/sets';
+  import groupBy from 'lodash/groupBy';
+
+  const hairColorBySet = groupBy(appearance.hair.color, 'set.key');
+  const freeHairColorKeys = hairColorBySet[undefined].map(s => s.key);
+
+  export default {
+    props: [
+      'editing',
+    ],
+    components: {
+      subMenu,
+      customizeOptions,
+    },
+    mixins: [
+      subPageMixin,
+      userStateMixin,
+      avatarEditorUtilies,
+    ],
+    data () {
+      return {
+        freeHairColorKeys,
+        icons: Object.freeze({
+          gem,
+        }),
+        baseHair1: [1, 3],
+        baseHair2Keys: [2, 4, 5, 6, 7, 8],
+        baseHair3Keys: [9, 10, 11, 12, 13, 14],
+        baseHair4Keys: [15, 16, 17, 18, 19, 20],
+        baseHair5Keys: [1, 2],
+        baseHair6Keys: [1, 2, 3],
+      };
+    },
+    computed: {
+      hairSubMenuItems () {
+        const items = [
+          {
+            id: 'color',
+            label: this.$t('color'),
+          },
+          {
+            id: 'bangs',
+            label: this.$t('bangs'),
+          },
+          {
+            id: 'style',
+            label: this.$t('style'),
+          },
+        ];
+
+        if (this.editing) {
+          items.push({
+            id: 'facialhair',
+            label: this.$t('facialhair'),
+          });
+        }
+
+        return items;
+      },
+      freeHairColors () {
+        return freeHairColorKeys.map(s => this.mapKeysToFreeOption(s, 'hair', 'color'));
+      },
+      seasonalHairColors () {
+        // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
+        let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
+
+        let seasonalHairColors = [];
+        for (let key in hairColorBySet) {
+          let set = hairColorBySet[key];
+
+          let keys = set.map(item => {
+            return item.key;
+          });
+
+          let options = keys.map(optionKey => {
+            const option = this.mapKeysToOption(optionKey, 'hair', 'color', key);
+            return option;
+          });
+
+          let text = this.$t(key);
+          if (appearanceSets[key] && appearanceSets[key].text) {
+            text = appearanceSets[key].text();
+          }
+
+          let compiledSet = {
+            key,
+            options,
+            keys,
+            text,
+          };
+          seasonalHairColors.push(compiledSet);
+        }
+
+        return seasonalHairColors;
+      },
+      premiumHairColors () {
+        // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
+        let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
+        let keys = this.premiumHairColorKeys;
+        let options = keys.map(key => {
+          return this.mapKeysToOption(key, 'hair', 'color');
+        });
+        return options;
+      },
+      baseHair2 () {
+        // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
+        let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
+        let keys = this.baseHair2Keys;
+        let options = keys.map(key => {
+          return this.mapKeysToOption(key, 'hair', 'base');
+        });
+        return options;
+      },
+      baseHair3 () {
+        // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
+        let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
+        let keys = this.baseHair3Keys;
+        let options = keys.map(key => {
+          const option = this.mapKeysToOption(key, 'hair', 'base');
+          return option;
+        });
+        return options;
+      },
+      baseHair4 () {
+        // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
+        let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
+        let keys = this.baseHair4Keys;
+        let options = keys.map(key => {
+          return this.mapKeysToOption(key, 'hair', 'base');
+        });
+        return options;
+      },
+      baseHair5 () {
+        // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
+        let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
+        let keys = this.baseHair5Keys;
+        let options = keys.map(key => {
+          return this.mapKeysToOption(key, 'hair', 'mustache');
+        });
+        return options;
+      },
+      baseHair6 () {
+        // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
+        let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
+        let keys = this.baseHair6Keys;
+        let options = keys.map(key => {
+          return this.mapKeysToOption(key, 'hair', 'beard');
+        });
+        return options;
+      },
+      hairBangs () {
+        const none = this.mapKeysToFreeOption(0, 'hair', 'bangs');
+        none.none = true;
+
+        const options = [1, 2, 3, 4].map(s => this.mapKeysToFreeOption(s, 'hair', 'bangs'));
+
+        return [none, ...options];
+      },
+      mustacheList () {
+        const noneOption = this.mapKeysToFreeOption(0, 'hair', 'mustache');
+        noneOption.none = true;
+
+        return [noneOption, ...this.baseHair5];
+      },
+      beardList () {
+        const noneOption = this.mapKeysToFreeOption(0, 'hair', 'beard');
+        noneOption.none = true;
+
+        return [noneOption, ...this.baseHair6];
+      },
+      styleSets () {
+        const sets = [];
+
+        const emptyHairBase = {
+          ...this.mapKeysToFreeOption(0, 'hair', 'base'),
+          none: true,
+        };
+
+        if (this.editing) {
+          sets.push({
+            fullSet: !this.userOwnsSet('hair', this.baseHair3Keys, 'base'),
+            unlock: () => this.unlock(`hair.base.${this.baseHair3Keys.join(',hair.base.')}`),
+            options: [
+              emptyHairBase,
+              ...this.baseHair3,
+            ],
+          });
+
+          sets.push({
+            fullSet: !this.userOwnsSet('hair', this.baseHair4Keys, 'base'),
+            unlock: () => this.unlock(`hair.base.${this.baseHair4Keys.join(',hair.base.')}`),
+            options: [
+              ...this.baseHair4,
+            ],
+          });
+        }
+
+        sets.push({
+          options: [
+            emptyHairBase,
+            ...this.baseHair1.map(key => this.mapKeysToFreeOption(key, 'hair', 'base')),
+          ],
+        });
+
+        if (this.editing) {
+          sets.push({
+            fullSet: !this.userOwnsSet('hair', this.baseHair2Keys, 'base'),
+            unlock: () => this.unlock(`hair.base.${this.baseHair2Keys.join(',hair.base.')}`),
+            options: [
+              ...this.baseHair2,
+            ],
+          });
+        }
+
+        return sets;
+      },
+    },
+    mounted () {
+      this.changeSubPage('color');
+    },
+    methods: {
+      /**
+       * Allows you to find out whether you need the "Purchase All" button or not. If there are more than 2 unpurchased items, returns true, otherwise returns false.
+       * @param {string} category - The selected category.
+       * @param {string[]} keySets - The items keySets.
+       * @param {string[]} [types] - The items types (subcategories). Optional.
+       * @returns {boolean} - Determines whether the "Purchase All" button is needed (true) or not (false).
+       */
+      isPurchaseAllNeeded (category, keySets, types) {
+        const purchasedItemsLengths = [];
+        // If item types are specified, count them
+        if (types && types.length > 0) {
+          // Types can be undefined, so we must check them.
+          types.forEach((type) => {
+            if (this.user.purchased[category][type]) {
+              purchasedItemsLengths
+                .push(Object.keys(this.user.purchased[category][type]).length);
+            }
+          });
+        } else {
+          let purchasedItemsCounter = 0;
+
+          // If types are not specified, recursively
+          // search for purchased items in the category
+          const findPurchasedItems = (item) => {
+            if (typeof item === 'object') {
+              Object.values(item)
+                .forEach((innerItem) => {
+                  if (typeof innerItem === 'boolean' && innerItem === true) {
+                    purchasedItemsCounter += 1;
+                  }
+                  return findPurchasedItems(innerItem);
+                });
+            }
+            return purchasedItemsCounter;
+          };
+
+          findPurchasedItems(this.user.purchased[category]);
+          if (purchasedItemsCounter > 0) {
+            purchasedItemsLengths.push(purchasedItemsCounter);
+          }
+        }
+
+        // We don't need to count the key sets (below)
+        // if there are no purchased items at all.
+        if (purchasedItemsLengths.length === 0) {
+          return true;
+        }
+
+        const allItemsLengths = [];
+        // Key sets must be specify correctly.
+        keySets.forEach((keySet) => {
+          allItemsLengths.push(Object.keys(this[keySet]).length);
+        });
+
+        // Simply sum all the length values and
+        // write them into variables for the convenience.
+        const allItems = allItemsLengths.reduce((acc, val) => acc + val);
+        const purchasedItems = purchasedItemsLengths.reduce((acc, val) => acc + val);
+
+        const unpurchasedItems = allItems - purchasedItems;
+        return unpurchasedItems > 2;
+      },
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>
diff --git a/website/client/components/avatarModal/skin-settings.vue b/website/client/components/avatarModal/skin-settings.vue
new file mode 100644
index 0000000000..f180b47a3f
--- /dev/null
+++ b/website/client/components/avatarModal/skin-settings.vue
@@ -0,0 +1,114 @@
+<template lang="pug">
+  #skin.section.customize-section
+    sub-menu.text-center(:items="skinSubMenuItems", :activeSubPage="activeSubPage", @changeSubPage="changeSubPage($event)")
+    customize-options(
+      :items="freeSkins",
+      :currentValue="user.preferences.skin"
+    )
+
+    div(v-if='editing && set.key !== "undefined"', v-for='set in seasonalSkins')
+      customize-options(
+        :items='set.options',
+        :currentValue="user.preferences.skin",
+        :fullSet='!hideSet(set) && !userOwnsSet("skin", set.keys)',
+        @unlock='unlock(`skin.${set.keys.join(",skin.")}`)'
+      )
+</template>
+
+<script>
+  import appearance from 'common/script/content/appearance';
+  import {subPageMixin} from '../../mixins/subPage';
+  import {userStateMixin} from '../../mixins/userState';
+  import {avatarEditorUtilies} from '../../mixins/avatarEditUtilities';
+  import appearanceSets from 'common/script/content/appearance/sets';
+  import subMenu from './sub-menu';
+  import customizeOptions from './customize-options';
+  import gem from 'assets/svg/gem.svg';
+
+  import groupBy from 'lodash/groupBy';
+
+  const skinsBySet = groupBy(appearance.skin, 'set.key');
+
+  const freeSkinKeys = skinsBySet[undefined].map(s => s.key);
+
+  // const specialSkinKeys = Object.keys(appearance.shirt).filter(k => appearance.shirt[k].price !== 0);
+
+
+  export default {
+    props: [
+      'editing',
+    ],
+    components: {
+      subMenu,
+      customizeOptions,
+    },
+    mixins: [
+      subPageMixin,
+      userStateMixin,
+      avatarEditorUtilies,
+    ],
+    data () {
+      return {
+        freeSkinKeys,
+        icons: Object.freeze({
+          gem,
+        }),
+        skinSubMenuItems: [
+          {
+            id: 'color',
+            label: this.$t('color'),
+          },
+        ],
+      };
+    },
+    computed: {
+      freeSkins () {
+        return freeSkinKeys.map(s => this.mapKeysToFreeOption(s, 'skin'));
+      },
+      seasonalSkins () {
+        // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
+        let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
+
+        let seasonalSkins = [];
+        for (let setKey in skinsBySet) {
+          let set = skinsBySet[setKey];
+
+          let keys = set.map(item => {
+            return item.key;
+          });
+
+          let options = keys.map(optionKey => {
+            const option = this.mapKeysToOption(optionKey, 'skin', '', setKey);
+
+            return option;
+          });
+
+          let text = this.$t(setKey);
+          if (appearanceSets[setKey] && appearanceSets[setKey].text) {
+            text = appearanceSets[setKey].text();
+          }
+
+          let compiledSet = {
+            key: setKey,
+            options,
+            keys,
+            text,
+          };
+          seasonalSkins.push(compiledSet);
+        }
+
+        return seasonalSkins;
+      },
+    },
+    mounted () {
+      this.changeSubPage('color');
+    },
+    methods: {
+
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>
diff --git a/website/client/components/avatarModal/sub-menu.vue b/website/client/components/avatarModal/sub-menu.vue
new file mode 100644
index 0000000000..3d24bc0994
--- /dev/null
+++ b/website/client/components/avatarModal/sub-menu.vue
@@ -0,0 +1,52 @@
+<template lang="pug">
+  .sub-menu.text-center
+    .sub-menu-item(
+      v-for="item of items",
+      :key="item.id",
+      @click='$emit("changeSubPage", item.id)',
+      :class='{active: activeSubPage === item.id}'
+    )
+      strong(v-once) {{ item.label }}
+</template>
+
+<script>
+    export default {
+      props: ['items', 'activeSubPage'],
+    };
+</script>
+
+<style scoped lang="scss">
+  @import '~client/assets/scss/colors.scss';
+
+  .sub-menu {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 10px;
+    padding-top: 12px;
+    flex-wrap: wrap;
+  }
+
+  .sub-menu:hover {
+    cursor: pointer;
+  }
+
+  .sub-menu-item {
+    padding: 6px 16px;
+    text-align: center;
+    border-bottom: 2px solid #f9f9f9;
+    height: 32px;
+    font-size: 12px;
+    font-weight: bold;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1.67;
+    letter-spacing: normal;
+    text-align: center;
+    color: $gray-100;
+  }
+
+  .sub-menu .sub-menu-item:hover, .sub-menu .sub-menu-item.active {
+    color: $purple-200;
+    border-bottom: 2px solid $purple-200;
+  }
+</style>
diff --git a/website/client/components/creatorIntro.vue b/website/client/components/creatorIntro.vue
index a62477bd46..e049d0348b 100644
--- a/website/client/components/creatorIntro.vue
+++ b/website/client/components/creatorIntro.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true', :hide-footer='true', :class='{"page-2": modalPage > 1 && !editing}')
+b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true', :hide-footer='true', :modal-class="{'page-2':modalPage > 1 && !editing}")
   .section.row.welcome-section(v-if='modalPage === 1 && !editing')
     .col-6.offset-3.text-center
       h3(v-once) {{$t('welcomeTo')}}
@@ -20,268 +20,48 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
           .menu-item
             .svg-icon(v-html='icons.bodyIcon')
           strong(v-once) {{$t('bodyBody')}}
+          .indicator
         .menu-container(@click='changeTopPage("skin", "color")', :class='{"col-3": !editing, "col-2": editing, active: activeTopPage === "skin"}')
           .menu-item
             .svg-icon(v-html='icons.skinIcon')
           strong(v-once) {{$t('skin')}}
+          .indicator
         .menu-container(@click='changeTopPage("hair", "color")', :class='{"col-3": !editing, "col-2": editing, active: activeTopPage === "hair"}')
           .menu-item
             .svg-icon(v-html='icons.hairIcon')
           strong(v-once) {{$t('hair')}}
+          .indicator
         .menu-container(@click='changeTopPage("extra", "glasses")', :class='{"col-3": !editing, "col-2": editing, active: activeTopPage === "extra"}')
           .menu-item
             .svg-icon(v-html='icons.accessoriesIcon')
           strong(v-once) {{$t('extra')}}
+          .indicator
         .menu-container.col-2(@click='changeTopPage("backgrounds", "2019")', v-if='editing', :class='{active: activeTopPage === "backgrounds"}')
           .menu-item
             .svg-icon(v-html='icons.backgroundsIcon')
           strong(v-once) {{$t('backgrounds')}}
-    #body.section.customize-section(v-if='activeTopPage === "body"')
-      .row.sub-menu.text-center
-        .col-3.offset-3.sub-menu-item(@click='changeSubPage("size")', :class='{active: activeSubPage === "size"}')
-          strong(v-once) {{$t('size')}}
-        .col-3.sub-menu-item(@click='changeSubPage("shirt")', :class='{active: activeSubPage === "shirt"}')
-          strong(v-once) {{$t('shirt')}}
-      .row(v-if='activeSubPage === "size"')
-        .col-12.customize-options.size-options
-          .option(v-for='option in ["slim", "broad"]',
-            :class='{active: user.preferences.size === option}',
-            @click='set({"preferences.size": option})')
-            .sprite.customize-option(:class="`${option}_shirt_black`")
-      .row(v-if='activeSubPage === "shirt"')
-        .col-12.customize-options
-          .option(v-for='option in ["black", "blue", "green", "pink", "white", "yellow"]',
-            :class='{active: user.preferences.shirt === option}',
-            @click='set({"preferences.shirt": option})')
-            .sprite.customize-option(:class="`slim_shirt_${option}`")
-        .col-12.customize-options(v-if='editing')
-          .option(v-for='item in specialShirts',
-            :class='{active: item.active, locked: item.locked}',
-            @click='item.click')
-            .sprite.customize-option(:class="`broad_shirt_${item.key}`")
-            .gem-lock(v-if='item.locked')
-              .svg-icon.gem(v-html='icons.gem')
-              span 2
-          .col-12.text-center(v-if='!userOwnsSet("shirt", specialShirtKeys)')
-            .gem-lock
-              .svg-icon.gem(v-html='icons.gem')
-              span 5
-            button.btn.btn-secondary.purchase-all(@click='unlock(`shirt.${specialShirtKeys.join(",shirt.")}`)') {{ $t('purchaseAll') }}
-    #skin.section.customize-section(v-if='activeTopPage === "skin"')
-      .row.sub-menu.col-6.offset-3.text-center
-        .col-6.offset-3.text-center.sub-menu-item(:class='{active: activeSubPage === "color"}')
-          strong(v-once) {{$t('color')}}
-      .row
-        .col-12.customize-options
-          .option(v-for='option in ["ddc994", "f5a76e", "ea8349", "c06534", "98461a", "915533", "c3e1dc", "6bd049"]',
-            :class='{active: user.preferences.skin === option}',
-            @click='set({"preferences.skin": option})')
-            .skin.sprite.customize-option(:class="`skin_${option}`")
-      .row(v-if='editing && set.key !== "undefined"', v-for='set in seasonalSkins')
-        .col-12.customize-options
-          .option(v-for='option in set.options',
-            :class='{active: option.active, locked: option.locked, hide: option.hide}',
-            @click='option.click')
-            .skin.sprite.customize-option(:class="`skin_${option.key}`")
-            .gem-lock(v-if='option.locked')
-              .svg-icon.gem(v-html='icons.gem')
-              span 2
-        .col-12.text-center(v-if='!hideSet(set) && !userOwnsSet("skin", set.keys)')
-          .gem-lock
-            .svg-icon.gem(v-html='icons.gem')
-            span 5
-          button.btn.btn-secondary.purchase-all(@click='unlock(`skin.${set.keys.join(",skin.")}`)') {{ $t('purchaseAll') }}
-    #hair.section.customize-section(v-if='activeTopPage === "hair"')
-      .row.col-12.sub-menu.text-center
-        .col-3.text-center.sub-menu-item(@click='changeSubPage("color")', :class='{active: activeSubPage === "color", "offset-2": !editing}')
-          strong(v-once) {{$t('color')}}
-        .col-3.text-center.sub-menu-item(@click='changeSubPage("bangs")', :class='{active: activeSubPage === "bangs"}')
-          strong(v-once) {{$t('bangs')}}
-        .col-3.text-center.sub-menu-item(@click='changeSubPage("style")', :class='{active: activeSubPage === "style"}')
-          strong(v-once) {{$t('style')}}
-        .col-3.text-center.sub-menu-item(@click='changeSubPage("facialhair")', :class='{active: activeSubPage === "facialhair"}', v-if='editing')
-            strong(v-once) {{$t('facialhair')}}
-      #hair-color.row(v-if='activeSubPage === "color"')
-        .col-12.customize-options
-          .option(v-for='option in ["white", "brown", "blond", "red", "black"]',
-            :class='{active: user.preferences.hair.color === option}',
-            @click='set({"preferences.hair.color": option})')
-            .color-bangs.sprite.customize-option(:class="`hair_bangs_1_${option}`")
-        .col-12.customize-options(v-if='editing && set.key !== "undefined"', v-for='set in seasonalHairColors')
-          .option(v-for='option in set.options',
-            :class='{active: option.active, locked: option.locked, hide: option.hide}',
-            @click='option.click')
-            .skin.sprite.customize-option(:class="`hair_bangs_1_${option.key}`")
-            .gem-lock(v-if='option.locked')
-              .svg-icon.gem(v-html='icons.gem')
-              span 2
-          .col-12.text-center(v-if='!hideSet(set) && !userOwnsSet("hair", set.keys, "color")')
-            .gem-lock
-              .svg-icon.gem(v-html='icons.gem')
-              span 5
-            button.btn.btn-secondary.purchase-all(@click='unlock(`hair.color.${set.keys.join(",hair.color.")}`)') {{ $t('purchaseAll') }}
-      #style.row(v-if='activeSubPage === "style"')
-        .col-12.customize-options(v-if='editing')
-          .head_0.option(@click='set({"preferences.hair.base": 0})', :class="[{ active: user.preferences.hair.base === 0 }, 'hair_base_0_' + user.preferences.hair.color]")
-          .option(v-for='option in baseHair3',
-            :class='{active: option.active, locked: option.locked}',
-            @click='option.click')
-            .base.sprite.customize-option(:class="`hair_base_${option.key}_${user.preferences.hair.color}`")
-            .gem-lock(v-if='option.locked')
-              .svg-icon.gem(v-html='icons.gem')
-              span 2
-          .col-12.text-center(v-if='!userOwnsSet("hair", baseHair3Keys, "base")')
-            .gem-lock
-              .svg-icon.gem(v-html='icons.gem')
-              span 5
-            button.btn.btn-secondary.purchase-all(@click='unlock(`hair.base.${baseHair3Keys.join(",hair.base.")}`)') {{ $t('purchaseAll') }}
-        .col-12.customize-options(v-if='editing')
-          .option(v-for='option in baseHair4',
-            :class='{active: option.active, locked: option.locked}',
-            @click='option.click')
-            .base.sprite.customize-option(:class="`hair_base_${option.key}_${user.preferences.hair.color}`")
-            .gem-lock(v-if='option.locked')
-              .svg-icon.gem(v-html='icons.gem')
-              span 2
-          .col-12.text-center(v-if='!userOwnsSet("hair", baseHair4Keys, "base")')
-            .gem-lock
-              .svg-icon.gem(v-html='icons.gem')
-              span 5
-            button.btn.btn-secondary.purchase-all(@click='unlock(`hair.base.${baseHair4Keys.join(",hair.base.")}`)') {{ $t('purchaseAll') }}
-        .col-12.customize-options
-          .head_0.option(v-if="!editing", @click='set({"preferences.hair.base": 0})', :class="[{ active: user.preferences.hair.base === 0 }, 'hair_base_0_' + user.preferences.hair.color]")
-          .option(v-for='option in baseHair1',
-            :class='{active: user.preferences.hair.base === option}',
-            @click='set({"preferences.hair.base": option})')
-            .base.sprite.customize-option(:class="`hair_base_${option}_${user.preferences.hair.color}`")
-        .col-12.customize-options(v-if='editing')
-          .option(v-for='option in baseHair2',
-            :class='{active: option.active, locked: option.locked}',
-            @click='option.click')
-            .base.sprite.customize-option(:class="`hair_base_${option.key}_${user.preferences.hair.color}`")
-            .gem-lock(v-if='option.locked')
-              .svg-icon.gem(v-html='icons.gem')
-              span 2
-          .col-12.text-center(v-if='!userOwnsSet("hair", baseHair2Keys, "base")')
-            .gem-lock
-              .svg-icon.gem(v-html='icons.gem')
-              span 5
-            button.btn.btn-secondary.purchase-all(@click='unlock(`hair.base.${baseHair2Keys.join(",hair.base.")}`)') {{ $t('purchaseAll') }}
-      #bangs.row(v-if='activeSubPage === "bangs"')
-        .col-12.customize-options
-          .head_0.option(@click='set({"preferences.hair.bangs": 0})',
-            :class="[{ active: user.preferences.hair.bangs === 0 }, 'hair_bangs_0_' + user.preferences.hair.color]")
-          .option(v-for='option in [1, 2, 3, 4]',
-            :class='{active: user.preferences.hair.bangs === option}',
-            @click='set({"preferences.hair.bangs": option})')
-            .bangs.sprite.customize-option(:class="`hair_bangs_${option}_${user.preferences.hair.color}`")
-      #facialhair.row(v-if='activeSubPage === "facialhair"')
-        .col-12.customize-options(v-if='editing')
-          .head_0.option(@click='set({"preferences.hair.mustache": 0})', :class="[{ active: user.preferences.hair.mustache === 0 }, 'hair_base_0_' + user.preferences.hair.color]")
-          .option(v-for='option in baseHair5',
-            :class='{active: option.active, locked: option.locked}',
-            @click='option.click')
-            .base.sprite.customize-option(:class="`hair_mustache_${option.key}_${user.preferences.hair.color}`")
-            .gem-lock(v-if='option.locked')
-              .svg-icon.gem(v-html='icons.gem')
-              span 2
-        .col-12.customize-options(v-if='editing')
-          .head_0.option(@click='set({"preferences.hair.beard": 0})', :class="[{ active: user.preferences.hair.beard === 0 }, 'hair_base_0_' + user.preferences.hair.color]")
-          .option(v-for='option in baseHair6',
-            :class='{active: option.active, locked: option.locked}',
-            @click='option.click')
-            .base.sprite.customize-option(:class="`hair_beard_${option.key}_${user.preferences.hair.color}`")
-            .gem-lock(v-if='option.locked')
-              .svg-icon.gem(v-html='icons.gem')
-              span 2
-          .col-12.text-center(v-if="isPurchaseAllNeeded('hair', ['baseHair5', 'baseHair6'], ['mustache', 'beard'])")
-            .gem-lock
-              .svg-icon.gem(v-html='icons.gem')
-              span 5
-            button.btn.btn-secondary.purchase-all(@click='unlock(`hair.mustache.${baseHair5Keys.join(",hair.mustache.")},hair.beard.${baseHair6Keys.join(",hair.beard.")}`)') {{ $t('purchaseAll') }}
-    #extra.section.container.customize-section(v-if='activeTopPage === "extra"')
-      .row.sub-menu
-        .col-3.offset-1.text-center.sub-menu-item(@click='changeSubPage("glasses")', :class='{active: activeSubPage === "glasses"}')
-          strong(v-once) {{ $t('glasses') }}
-        .col-4.text-center.sub-menu-item(@click='changeSubPage("wheelchair")', :class='{active: activeSubPage === "wheelchair"}')
-          strong(v-once) {{ $t('wheelchair') }}
-        .col-3.text-center.sub-menu-item(@click='changeSubPage("flower")', :class='{active: activeSubPage === "flower"}')
-          strong(v-once) {{ $t('accent') }}
-      .row.sub-menu(v-if='editing')
-        .col-4.text-center.sub-menu-item(@click='changeSubPage("ears")' :class='{active: activeSubPage === "ears"}')
-          strong(v-once) {{ $t('animalEars') }}
-        .col-4.text-center.sub-menu-item(@click='changeSubPage("tails")' :class='{active: activeSubPage === "tails"}')
-          strong(v-once) {{ $t('animalTails') }}
-        .col-4.text-center.sub-menu-item(@click='changeSubPage("headband")' :class='{active: activeSubPage === "headband"}')
-          strong(v-once) {{ $t('headband') }}
-      #glasses.row(v-if='activeSubPage === "glasses"')
-        .col-12.customize-options
-          .option(v-for='option in eyewear', 
-            :class='{active: option.active}',
-            @click='option.click')
-            .sprite.customize-option(:class="`eyewear_special_${option.key}`")
-      #animal-ears.row(v-if='activeSubPage === "ears"')
-        .section.col-12.customize-options
-          .option(v-for='option in animalItems("headAccessory")',
-            :class='{active: option.active, locked: option.locked}',
-            @click='option.click')
-            .sprite.customize-option(:class="`headAccessory_special_${option.key}`")
-            .gem-lock(v-if='option.gemLocked')
-              .svg-icon.gem(v-html='icons.gem')
-              span 2
-            .gold-lock(v-if='option.goldLocked')
-              .svg-icon.gold(v-html='icons.gold')
-              span 20
-          .col-12.text-center(v-if='!animalItemsOwned("headAccessory")')
-            .gem-lock
-              .svg-icon.gem(v-html='icons.gem')
-              span 5
-            button.btn.btn-secondary.purchase-all(@click='unlock(animalItemsUnlockString("headAccessory"))') {{ $t('purchaseAll') }}
-      #animal-tails.row(v-if='activeSubPage === "tails"')
-        .section.col-12.customize-options
-          .option(v-for='option in animalItems("back")',
-            :class='{active: option.active, locked: option.locked}',
-            @click='option.click')
-            .sprite.customize-option(:class="`icon_back_special_${option.key}`")
-            .gem-lock(v-if='option.gemLocked')
-              .svg-icon.gem(v-html='icons.gem')
-              span 2
-            .gold-lock(v-if='option.goldLocked')
-              .svg-icon.gold(v-html='icons.gold')
-              span 20
-          .col-12.text-center(v-if='!animalItemsOwned("back")')
-            .gem-lock
-              .svg-icon.gem(v-html='icons.gem')
-              span 5
-            button.btn.btn-secondary.purchase-all(@click='unlock(animalItemsUnlockString("back"))') {{ $t('purchaseAll') }}
-      #headband.row(v-if='activeSubPage === "headband"')
-        .col-12.customize-options
-          .option(v-for='option in headbands', 
-            :class='{active: option.active}',
-            @click='option.click')
-            .sprite.customize-option(:class="`headAccessory_special_${option.key}`")
-      #wheelchairs.row(v-if='activeSubPage === "wheelchair"')
-        .col-12.customize-options
-          .option(@click='set({"preferences.chair": "none"})', :class='{active: user.preferences.chair === "none"}')
-            | None
-          .option(v-for='option in chairKeys',
-            :class='{active: user.preferences.chair === option}',
-            @click='set({"preferences.chair": option})')
-            .chair.sprite.customize-option(:class="`button_chair_${option}`")
-      #flowers.row(v-if='activeSubPage === "flower"')
-        .col-12.customize-options
-          .head_0.option(@click='set({"preferences.hair.flower":0})', :class='{active: user.preferences.hair.flower === 0}')
-          .option(v-for='option in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]',
-            :class='{active: user.preferences.hair.flower === option}',
-            @click='set({"preferences.hair.flower": option})')
-            .sprite.customize-option(:class="`hair_flower_${option}`")
-      .row(v-if='activeSubPage === "flower"')
-        .col-12.customize-options
-          // button.customize-option(ng-repeat='item in ::getGearArray("animal")', class='{{::item.key}}',
-            ng-class="{locked: user.items.gear.owned[item.key] == undefined, selectableInventory: user.preferences.costume ? user.items.gear.costume.headAccessory == item.key : user.items.gear.equipped.headAccessory == item.key}",
-            popover='{{::item.notes()}}', popover-title='{{::item.text()}}', popover-trigger='mouseenter',
-            popover-placement='right', popover-append-to-body='true',
-            ng-click='user.items.gear.owned[item.key] ? equip(item.key) : purchase(item.type,item)')
+          .indicator
+
+    body-settings(
+      v-if='activeTopPage === "body"',
+      :editing="editing",
+    )
+
+    skin-settings(
+      v-if='activeTopPage === "skin"',
+      :editing="editing",
+    )
+
+    hairSettings(
+      v-if='activeTopPage === "hair"',
+      :editing="editing"
+    )
+
+    extraSettings(
+      v-if='activeTopPage === "extra"',
+      :editing="editing"
+    )
+
     #backgrounds.section.container.customize-section(v-if='activeTopPage === "backgrounds"')
       .row.title-row
         toggle-switch.backgroundFilterToggle(:label="'Hide locked backgrounds'", v-model='filterBackgrounds')
@@ -296,19 +76,7 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
           popover-trigger='mouseenter')
           .incentive-background(:class='[`background_${bg.key}`]')
             .small-rectangle
-      .row.sub-menu.col-10.offset-1(v-if='!filterBackgrounds')
-        .col-2.text-center.sub-menu-item(@click='changeSubPage("2019")', :class='{active: activeSubPage === "2019"}')
-          strong(v-once) 2019
-        .col-2.text-center.sub-menu-item(@click='changeSubPage("2018")', :class='{active: activeSubPage === "2018"}')
-          strong(v-once) 2018
-        .col-2.text-center.sub-menu-item(@click='changeSubPage("2017")', :class='{active: activeSubPage === "2017"}')
-          strong(v-once) 2017
-        .col-2.text-center.sub-menu-item(@click='changeSubPage("2016")', :class='{active: activeSubPage === "2016"}')
-          strong(v-once) 2016
-        .col-2.text-center.sub-menu-item(@click='changeSubPage("2015")', :class='{active: activeSubPage === "2015"}')
-          strong(v-once) 2015
-        .col-2.text-center.sub-menu-item(@click='changeSubPage("2014")', :class='{active: activeSubPage === "2014"}')
-          strong(v-once) 2014
+      sub-menu.text-center(:items="bgSubMenuItems", :activeSubPage="activeSubPage", @changeSubPage="changeSubPage($event)")
       .row.customize-menu(v-if='!filterBackgrounds' v-for='(sets, key) in backgroundShopSetsByYear')
         .row.background-set(v-for='set in sets', v-if='activeSubPage === key')
           .col-8.offset-2.text-center.set-title
@@ -378,7 +146,7 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
             input.custom-control-input#self_care(type="checkbox", value='self_care', v-model='taskCategories')
             label.custom-control-label(v-once, for="self_care") {{ $t('self_care') }}
 
-  .section.d-flex.justify-content-center(:class='{top: modalPage > 1}', v-if='!editing')
+  .section.d-flex.justify-content-center.justin-outer-section(:class='{top: modalPage > 1}', v-if='!editing')
     .justin-section.d-flex.align-items-center
       .featured-label
         span.rectangle
@@ -397,537 +165,563 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
         div(v-if='modalPage === 3')
           p(v-once) {{ $t('justinIntroMessage3') }}
       .npc-justin-textbox
-  .section.mr-5.ml-5(v-if='modalPage === 1')
+  .section.mr-5.ml-5.first-page-footer(v-if='modalPage === 1')
     username-form(@usernameConfirmed='modalPage += 1', :avatarIntro='true')
     .small.text-center(v-html="$t('usernameTOSRequirements')")
 
   .section.container.footer(v-if='!editing && !(modalPage === 1)')
-    .row
-      .col-3.offset-1.text-center
-        div(v-if='modalPage > 1', @click='prev()')
-          .prev-arrow
-          .prev(v-once) {{ $t('prev') }}
-      .col-4.text-center.circles
-        .circle(:class="{active: modalPage === 1}")
-        .circle(:class="{active: modalPage === 2}")
-        .circle(:class="{active: modalPage === 3}")
-      .col-3.text-center
-        div(v-if='modalPage < 3', @click='next()')
-          .next(v-once) {{$t('next')}}
-          .next-arrow
-        div(v-if='modalPage === 3', @click='done()')
-          button.btn.btn-primary.next(v-once, v-if='!loading') {{$t('done')}}
+    .footer-left
+      div.prev-outer(v-if='modalPage > 1', @click='prev()')
+        .prev-arrow.svg-icon(v-html='icons.arrowLeft')
+        .prev(v-once) {{ $t('prev') }}
+    .footer-center.text-center.circles
+      .circle(:class="{active: modalPage === 1}")
+      .circle(:class="{active: modalPage === 2}")
+      .circle(:class="{active: modalPage === 3}")
+    .footer-right
+      div.next-outer(v-if='modalPage < 3', @click='next()')
+        .next(v-once) {{$t('next')}}
+        .next-arrow.svg-icon(v-html='icons.arrowRight')
+      div.next-outer(v-if='modalPage === 3 && !loading', @click='done()', :class="{disabled: taskCategories.length === 0}")
+        .next(v-once) {{$t('finish')}}
+        .next-arrow.svg-icon(v-html='icons.arrowRight')
 </template>
 
-<style>
+<style lang="scss">
+  @import '~client/assets/scss/colors.scss';
+
+  $dialogMarginTop: 56px;
+  $userCreationBgHeight:  105px;
+
   /* @TODO do not rely on avatar-modal___BV_modal_body_,
      it already changed once when bootstrap-vue reached version 1 */
 
-  .page-2 #avatar-modal___BV_modal_body_ {
-    margin-top: 2rem;
+  #avatar-modal___BV_modal_outer_ {
+    z-index: 1045 !important; // on production the toolbar has a higher z-index
   }
 
   #avatar-modal___BV_modal_body_, #avatar-modal___BV_modal_body_ {
     padding: 0;
   }
 
-  #avatar-modal .modal-dialog {
-    margin-top: 7rem;
-  }
-</style>
-
-<style lang="scss" scoped>
-  @import '~client/assets/scss/colors.scss';
-
-  #creator-background {
-    background-color: $purple-200;
-  }
-
-  #creator-modal {
-    width: 448px;
-    height: 670px;
-    border-radius: 8px;
-    background-color: #ffffff;
-    box-shadow: 0 2px 16px 0 rgba(26, 24, 29, 0.32);
-    margin: 0 auto;
-    padding-top: 1em;
-    position: relative;
-  }
-
-  .corner-decoration {
-    position: absolute;
-    width: 6px;
-    height: 6px;
-    background-color: #ffbe5d;
-    border: inherit;
-    outline: inherit;
-  }
-
-  .small {
-    color: $gray-200;
-  }
-
-  h3 {
-    font-size: 20px;
-    font-weight: normal;
-    color: $gray-200;
-  }
-
-  .purchase-all {
-    margin-bottom: 1em;
-  }
-
-  .section {
-    margin-top: 2em;
-  }
-
-  .edit-modal {
-    margin-top: 10em;
-  }
-
-  .row.sub-menu + .row.sub-menu {
-    margin-top: 0.5em;
-  }
-
-  .welcome-section {
-    margin-top: 2.5em;
-    margin-bottom: 2.5em;
-  }
-
-  .logo {
-    width: 190px;
-    margin: 0 auto 1.25em;
-  }
-
-  .user-creation-bg {
-    background-image: url('~client/assets/creator/creator-hills-bg.png');
-    height: 105px;
-    width: 219px;
-    margin: 0 auto;
-  }
-
-  .avatar {
-    position: absolute;
-    top: -22px;
-    left: 4em;
-  }
-
-  .edit-avatar {
-    left: 9.2em;
-  }
-
-  .justin-section {
-    position: relative;
-  }
-
-  .justin-message {
-    border-color: #ffa623;
-    border-style: solid;
-    border-width: 2px;
-    outline-color: #b36213;
-    outline-style: solid;
-    outline-width: 2px;
-    position: relative;
-    padding: 2em;
-    margin: 2px;
-    height: 100%;
-    width: 400px;
-
-    p {
-      margin: auto;
+  .page-2 {
+    #avatar-modal___BV_modal_body_ {
+      margin-top: $dialogMarginTop;
     }
 
-    p + p {
-      margin-top: 1em;
+    &#avatar-modal {
+      .modal-dialog.modal-md {
+        margin-top: 186px;
+      }
     }
   }
 
-  .npc-justin-textbox {
-    position: absolute;
-    right: 1rem;
-    top: -3.1rem;
-    width: 48px;
-    height: 48px;
-    background-image: url('~client/assets/images/justin_textbox.png');
-  }
+  #avatar-modal {
 
-  .featured-label {
-    position: absolute;
-    top: -1rem;
-    left: 1.5rem;
-    border-radius: 2px;
-    margin: auto;
-
-    .text {
-      font-size: 12px;
-      min-height: auto;
-      color: $white;
+    .first-page-footer {
+      margin-bottom: 32px;
     }
-  }
 
-  .circles {
-    padding-left: 2em;
-  }
+    .customize-section {
+      text-align: center;
+      padding-bottom: 2em;
+    }
 
-  .circle {
-    width: 8px;
-    height: 8px;
-    background-color: #d8d8d8;
-    border-radius: 50%;
-    display: inline-block;
-    margin-right: 1em;
-  }
+    #creator-background {
+      background-color: $purple-200;
+    }
 
-  .circle.active {
-    background-color: #bda8ff;
-  }
+    .corner-decoration {
+      position: absolute;
+      width: 6px;
+      height: 6px;
+      background-color: #ffbe5d;
+      border: inherit;
+      outline: inherit;
+    }
 
-  .customize-menu {
-    .menu-item .svg-icon {
-      width: 32px;
-      height: 32px;
+    .small {
+      color: $gray-200;
+    }
+
+    h3 {
+      font-size: 20px;
+      font-weight: normal;
+      color: $gray-200;
+    }
+
+    .purchase-all {
+      margin-bottom: 1em;
+    }
+
+    .edit-modal {
+      margin-top: 10em;
+    }
+
+    .row.sub-menu + .row.sub-menu {
+      margin-top: 0.5em;
+    }
+
+    .welcome-section {
+      margin-top: 2.5em;
+      margin-bottom: 2.5em;
+    }
+
+    .logo {
+      width: 190px;
+      margin: 0 auto 1.25em;
+    }
+
+    .user-creation-bg {
+      background-image: url('~client/assets/creator/creator-hills-bg.png');
+      height: $userCreationBgHeight;
+      width: 219px;
       margin: 0 auto;
     }
 
-    .menu-container {
-      color: #a5a1ac;
+    .avatar {
+      position: absolute !important; // was overwritten in production build
+      top: -22px;
+      left: 4em;
     }
 
-    .menu-container:hover, .menu-container.active {
-      cursor: pointer;
-      color: #6133B4;
+    .top {
+      position: absolute;
+      top: -($dialogMarginTop + $userCreationBgHeight - 16px);
+      right: 50%;
+      left: 50%;
     }
-  }
 
-  .sub-menu:hover {
-    cursor: pointer;
-  }
+    .justin-outer-section:not(.top) {
+      margin-bottom: 24px;
+    }
 
-  .sub-menu-item {
-    text-align: center;
-    border-bottom: 2px solid #f9f9f9;
-  }
+    .avatar-section {
+      margin-bottom: 30px;
+    }
 
-  .sub-menu .sub-menu-item:hover, .sub-menu .sub-menu-item.active {
-    color: $purple-200;
-    border-bottom: 2px solid $purple-200;
-  }
+    .edit-avatar {
+      left: 9.2em;
+    }
 
-  .customize-section {
-    text-align: center;
-    padding-bottom: 2em;
-  }
+    .justin-section {
+      position: relative;
+    }
 
-  .option.hide {
-    display: none !important;
-  }
+    .justin-message {
+      border-color: #ffa623;
+      border-style: solid;
+      border-width: 2px;
+      outline-color: #b36213;
+      outline-style: solid;
+      outline-width: 2px;
+      position: relative;
+      padding: 2em;
+      margin: 2px;
+      height: 100%;
+      width: 400px;
+      background: $gray-700;
 
-  .customize-options .option {
-    display: inline-block;
-    vertical-align: bottom;
-    padding: .5em;
-    height: 90px;
-    width: 90px;
-    margin: 1em .5em .5em 0;
-    border: 4px solid $gray-700;
-    border-radius: 4px;
+      p {
+        margin: auto;
+      }
 
-    &.locked {
-      border: none;
+      p + p {
+        margin-top: 1em;
+      }
+    }
+
+    .npc-justin-textbox {
+      position: absolute;
+      right: 1rem;
+      top: -3.1rem;
+      width: 48px;
+      height: 48px;
+      background-image: url('~client/assets/images/justin_textbox.png');
+    }
+
+    .featured-label {
+      position: absolute;
+      top: -1rem;
+      left: 1.5rem;
       border-radius: 2px;
-      background-color: #ffffff;
-      box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-      margin-top: 0;
+      margin: auto;
+
+      .text {
+        font-size: 12px;
+        min-height: auto;
+        color: $white;
+      }
     }
 
-    .sprite.customize-option {
-      margin: 0 auto;
+    .circles {
+      align-self: flex-end;
     }
-  }
 
-  .text-center {
-    .gem-lock, .gold-lock {
+    .circle {
+      width: 8px;
+      height: 8px;
+      background-color: #d8d8d8;
+      border-radius: 50%;
       display: inline-block;
       margin-right: 1em;
-      margin-bottom: 1.6em;
-      vertical-align: bottom;
-    }
-  }
 
-  .gem-lock, .gold-lock {
-    .svg-icon {
-      width: 16px;
+      &:last-of-type {
+        margin-right: 0;
+      }
     }
 
-    span {
-      font-weight: bold;
-      margin-left: .5em;
+    .circle.active {
+      background-color: $purple-300;
     }
 
-    .svg-icon, span {
-      display: inline-block;
-      vertical-align: bottom;
-    }
-  }
-
-  .gem-lock span {
-    color: $green-10
-  }
-
-  .gold-lock span {
-    color: $yellow-10
-  }
-
-  .option.active {
-    border-color: $purple-200;
-  }
-
-  .option:hover {
-    cursor: pointer;
-  }
-
-  .customize-section {
-    background-color: #f9f9f9;
-    padding-top: 1em;
-    min-height: 280px;
-  }
-
-  .interests-section {
-    margin-top: 3em;
-
-    .task-option {
-      margin: 0 auto;
-      width: 70%;
-    }
-  }
-
-  #backgrounds {
-    .title-row {
-      margin-bottom: 1em;
-    }
-
-    .backgroundFilterToggle {
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .set-title {
-      margin-top: 1em;
-      margin-bottom: 1em;
-    }
-
-    .background {
-      margin: 0 auto;
-      box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-      border-radius: 2px;
-    }
-
-    strong {
-      margin: 0 auto;
-    }
-
-    .incentive-background {
-      background-image: none;
-      width: 68px;
-      height: 68px;
-      border-radius: 8px;
-      background-color: #92b6bd;
-      margin: 0 auto;
-      padding-top: .3em;
-
-      .small-rectangle {
-        width: 60px;
-        height: 40px;
-        border-radius: 4px;
+    .customize-menu {
+      .menu-item .svg-icon {
+        width: 32px;
+        height: 32px;
+        margin: 0 auto;
+      }
+
+      .menu-container {
+        color: #a5a1ac;
+      }
+
+      .menu-container:hover, .menu-container.active {
+        cursor: pointer;
+        color: $purple-300;
+      }
+
+      .indicator {
+        display: none;
+      }
+
+      .menu-container.active .indicator{
+        width: 0px;
+        height: 0px;
+        border-left: 12px solid transparent;
+        border-right: 12px solid transparent;
+        border-bottom: 12px solid $gray-700;
+        display: block;
         margin: 0 auto;
-        opacity: .6;
-        background: white;
       }
     }
 
-    .background_violet {
-      background-color: #a993ed;
-    }
 
-    .background_blue {
-      background-color: #92b6bd;
-    }
-
-    .background_green {
-      background-color: #92bd94;
-    }
-
-    .background_purple {
-      background-color: #9397bd;
-    }
-
-    .background_red {
-      background-color: #b77e80;
-    }
-
-    .background_yellow {
-      background-color: #bcbb91;
-    }
-
-    .incentive-background:hover {
-      cursor: pointer;
-    }
-
-    .background:hover {
-      cursor: pointer;
-    }
-
-    .purchase-background {
-      margin: 0 auto;
-      background: #fff;
-      padding: 0.5em;
-      border-radius: 0 0 2px 2px;
-      box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-      cursor: pointer;
-
-      span {
-        font-weight: bold;
-        font-size: 12px;
+    .text-center {
+      .gem-lock, .gold-lock {
+        display: inline-block;
+        margin-right: 1em;
+        margin-bottom: 1.6em;
+        vertical-align: bottom;
       }
+    }
 
-      span.price {
-        color: #24cc8f;
-      }
-
-      .gem, .coin {
+    .gem-lock, .gold-lock {
+      .svg-icon {
         width: 16px;
       }
 
-      &.single {
-        width: 141px;
+      span {
+        font-weight: bold;
+        margin-left: .5em;
       }
 
-      &.set {
-        width: 100%;
+      .svg-icon, span {
+        display: inline-block;
+        vertical-align: bottom;
+      }
+    }
+
+    .gem-lock span {
+      color: $green-10
+    }
+
+    .gold-lock span {
+      color: $yellow-10
+    }
+
+    .customize-section {
+      background-color: #f9f9f9;
+      min-height: 280px;
+    }
+
+    .interests-section {
+      margin-top: 3em;
+      margin-bottom: 60px;
+
+      .task-option {
+        margin: 0 auto;
+        width: 70%;
+      }
+    }
+
+    #backgrounds {
+      padding-top: 12px;
+
+      .title-row {
+        margin-bottom: 1em;
+      }
+
+      .backgroundFilterToggle {
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      .set-title {
+        margin-top: 1em;
+        margin-bottom: 1em;
+      }
+
+      .background {
+        margin: 0 auto;
+        box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+        border-radius: 2px;
+      }
+
+      strong {
+        margin: 0 auto;
+      }
+
+      .incentive-background {
+        background-image: none;
+        width: 68px;
+        height: 68px;
+        border-radius: 8px;
+        background-color: #92b6bd;
+        margin: 0 auto;
+        padding-top: .3em;
+
+        .small-rectangle {
+          width: 60px;
+          height: 40px;
+          border-radius: 4px;
+          margin: 0 auto;
+          opacity: .6;
+          background: white;
+        }
+      }
+
+      .background_violet {
+        background-color: #a993ed;
+      }
+
+      .background_blue {
+        background-color: #92b6bd;
+      }
+
+      .background_green {
+        background-color: #92bd94;
+      }
+
+      .background_purple {
+        background-color: #9397bd;
+      }
+
+      .background_red {
+        background-color: #b77e80;
+      }
+
+      .background_yellow {
+        background-color: #bcbb91;
+      }
+
+      .incentive-background:hover {
+        cursor: pointer;
+      }
+
+      .background:hover {
+        cursor: pointer;
+      }
+
+      .purchase-background {
+        margin: 0 auto;
+        background: #fff;
+        padding: 0.5em;
+        border-radius: 0 0 2px 2px;
+        box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+        cursor: pointer;
 
         span {
-          font-size: 14px;
+          font-weight: bold;
+          font-size: 12px;
+        }
+
+        span.price {
+          color: #24cc8f;
         }
 
         .gem, .coin {
-          width: 20px;
+          width: 16px;
+        }
+
+        &.single {
+          width: 141px;
+        }
+
+        &.set {
+          width: 100%;
+
+          span {
+            font-size: 14px;
+          }
+
+          .gem, .coin {
+            width: 20px;
+          }
         }
       }
-    }
 
-    .gem, .coin {
-      margin: 0 .5em;
-      display: inline-block;
-      vertical-align: bottom;
-    }
+      .gem, .coin {
+        margin: 0 .5em;
+        display: inline-block;
+        vertical-align: bottom;
+      }
 
-    .background-set {
+      .background-set {
         width: 100%;
         margin: 10px;
         background-color: #edecee;
         border-radius: 2px;
+      }
     }
-  }
 
-  .footer {
-    padding-bottom: 1em;
-    bottom: 0;
-    width: 100%;
+    .footer {
+      margin-top: 24px;
+      padding-bottom: 24px;
+      padding-left: 24px;
+      padding-right: 24px;
+      bottom: 0;
+      width: 100%;
+      display: flex;
 
-    .prev {
+      * {
+        transition: none !important;
+      }
+
+      .footer-left, .footer-right {
+        flex: auto;
+        flex-grow: 0;
+        width: 30%
+      }
+
+      .footer-center {
+        flex: 1;
+      }
+
+      .prev, .next {
+        color: $gray-300;
+        font-weight: bold;
+        display: inline-block;
+        padding: 0.4em;
+      }
+
+      .prev {
+        padding-left: 16px;
+      }
+
+      .next {
+        padding-right: 16px;
+      }
+
+      .prev-outer {
+        white-space: nowrap;
+
+        &:hover {
+          cursor: pointer;
+
+          .prev {
+            color: $purple-300;
+          }
+
+          .prev-arrow {
+            path {
+              fill: $purple-300;
+            }
+          }
+        }
+      }
+
+      .prev-arrow, .next-arrow {
+        width: 32px;
+        height: 32px;
+        display: inline-block;
+        vertical-align: bottom;
+      }
+
+      .next-outer {
+        white-space: nowrap;
+        flex: 1;
+        text-align: right;
+
+        &:hover {
+          cursor: pointer;
+
+          .next {
+            color: $purple-300;
+          }
+
+          .next-arrow {
+            path {
+              fill: $purple-300;
+            }
+          }
+        }
+      }
+    }
+
+    .badge-svg {
+      left: calc((100% - 18px) / 2);
+      cursor: pointer;
+      color: $gray-400;
+      background: $white;
+      padding: 4.5px 6px;
+
+      &.item-selected-badge {
+        background: $purple-300;
+        color: $white;
+      }
+    }
+
+    .icon-12 {
+      width: 12px;
+      height: 12px;
+    }
+
+    span.badge.badge-pill.badge-item.badge-svg:not(.item-selected-badge) {
       color: #a5a1ac;
-      font-weight: bold;
-      display: inline-block;
-      padding: 0.4em;
-      margin-left: 1em;
     }
 
-    .prev:hover, .prev-arrow:hover {
-      cursor: pointer;
-    }
-
-    .prev-arrow {
-      background-image: url('~client/assets/creator/prev.png');
-      width: 32px;
-      height: 32px;
-      display: inline-block;
-      vertical-align: bottom;
-    }
-
-    .next {
-      font-weight: bold;
-      display: inline-block;
-      padding: 0.4em;
-      margin-right: 1em;
-    }
-
-    .next:hover, .next-arrow:hover {
-      cursor: pointer;
-    }
-
-    .next-arrow {
-      background-image: url('~client/assets/creator/arrow.png');
-      width: 32px;
-      height: 32px;
-      display: inline-block;
-      vertical-align: bottom;
-    }
-  }
-
-  .badge-svg {
-    left: calc((100% - 18px) / 2);
-    cursor: pointer;
-    color: $gray-400;
-    background: $white;
-    padding: 4.5px 6px;
-
-    &.item-selected-badge {
-      background: $purple-300;
-      color: $white;
-    }
-  }
-
-  .icon-12 {
-    width: 12px;
-    height: 12px;
-  }
-
-  span.badge.badge-pill.badge-item.badge-svg:not(.item-selected-badge) {
-    color: #a5a1ac;
-  }
-
-  span.badge.badge-pill.badge-item.badge-svg.hide {
-    display: none;
-  }
-
-  .background-button {
-      margin-bottom: 15px;
-  }
-
-  .background-button:hover {
     span.badge.badge-pill.badge-item.badge-svg.hide {
-      display: block;
+      display: none;
+    }
+
+    .background-button {
+      margin-bottom: 15px;
+    }
+
+    .background-button:hover {
+      span.badge.badge-pill.badge-item.badge-svg.hide {
+        display: block;
+      }
     }
   }
 </style>
 
 <script>
 import axios from 'axios';
-import moment from 'moment';
 import map from 'lodash/map';
-import get from 'lodash/get';
-import groupBy from 'lodash/groupBy';
 import { mapState } from 'client/libs/store';
 import avatar from './avatar';
 import usernameForm from './settings/usernameForm';
 import { getBackgroundShopSets } from '../../common/script/libs/shops';
-import unlock from '../../common/script/ops/unlock';
-import buy from '../../common/script/ops/buy/buy';
 import guide from 'client/mixins/guide';
 import notifications from 'client/mixins/notifications';
-import appearance from 'common/script/content/appearance';
-import appearanceSets from 'common/script/content/appearance/sets';
 import toggleSwitch from 'client/components/ui/toggleSwitch';
+import bodySettings from './avatarModal/body-settings';
+import skinSettings from './avatarModal/skin-settings';
+import hairSettings from './avatarModal/hair-settings';
+import extraSettings from './avatarModal/extra-settings';
+import subMenu from './avatarModal/sub-menu';
 
 import logoPurple from 'assets/svg/logo-purple.svg';
 import bodyIcon from 'assets/svg/body.svg';
@@ -938,146 +732,25 @@ import backgroundsIcon from 'assets/svg/backgrounds.svg';
 import gem from 'assets/svg/gem.svg';
 import gold from 'assets/svg/gold.svg';
 import pin from 'assets/svg/pin.svg';
+import arrowRight from 'assets/svg/arrow_right.svg';
+import arrowLeft from 'assets/svg/arrow_left.svg';
 import isPinned from 'common/script/libs/isPinned';
+import {avatarEditorUtilies} from '../mixins/avatarEditUtilities';
 
-const skinsBySet = groupBy(appearance.skin, 'set.key');
-const hairColorBySet = groupBy(appearance.hair.color, 'set.key');
-
-const tasksByCategory = {
-  work: [
-    {
-      type: 'habit',
-      text: 'Process email',
-      up: true,
-      down: false,
-    },
-    {
-      type: 'daily',
-      text: 'Most important task >> Worked on today’s most important task',
-      notes: 'Tap to specify your most important task',
-    },
-    {
-      type: 'todo',
-      text: 'Work project >> Complete work project',
-      notes: 'Tap to specify the name of your current project + set a due date!',
-    },
-  ],
-  exercise: [
-    {
-      type: 'habit',
-      text: '10 min cardio >> + 10 minutes cardio',
-      up: true,
-      down: false,
-    },
-    {
-      type: 'daily',
-      text: 'Stretching >> Daily workout routine',
-      notes: 'Tap to choose your schedule and specify exercises!',
-    },
-    {
-      type: 'todo',
-      text: 'Set up workout schedule',
-      notes: 'Tap to add a checklist!',
-    },
-  ],
-  health_wellness: [ // eslint-disable-line
-    {
-      type: 'habit',
-      text: 'Eat Health/Junk Food',
-      up: true,
-      down: true,
-    },
-    {
-      type: 'daily',
-      text: 'Floss',
-      notes: 'Tap to make any changes!',
-    },
-    {
-      type: 'todo',
-      text: 'Schedule check-up >> Brainstorm a healthy change',
-      notes: 'Tap to add checklists!',
-    },
-  ],
-  school: [
-    {
-      type: 'habit',
-      text: 'Study/Procrastinate',
-      up: true,
-      down: true,
-    },
-    {
-      type: 'daily',
-      text: 'Finish homework',
-      notes: 'Tap to choose your homework schedule!',
-    },
-    {
-      type: 'todo',
-      text: 'Finish assignment for class',
-      notes: 'Tap to name the assignment and choose a due date!]',
-    },
-  ],
-  self_care: [ // eslint-disable-line
-    {
-      type: 'habit',
-      text: 'Take a short break',
-      up: true,
-      down: false,
-    },
-    {
-      type: 'daily',
-      text: '5 minutes of quiet breathing',
-      notes: 'Tap to choose your schedule!',
-    },
-    {
-      type: 'todo',
-      text: 'Engage in a fun activity',
-      notes: 'Tap to specify what you plan to do!',
-    },
-  ],
-  chores: [
-    {
-      type: 'habit',
-      text: '10 minutes cleaning',
-      up: true,
-      down: false,
-    },
-    {
-      type: 'daily',
-      text: 'Wash dishes',
-      notes: 'Tap to choose your schedule!',
-    },
-    {
-      type: 'todo',
-      text: 'Organize closet >> Organize clutter',
-      notes: 'Tap to specify the cluttered area!',
-    },
-  ],
-  creativity: [
-    {
-      type: 'habit',
-      text: 'Study a master of the craft >> + Practiced a new creative technique',
-      up: true,
-      down: false,
-    },
-    {
-      type: 'daily',
-      text: 'Work on creative project',
-      notes: 'Tap to specify the name of your current project + set the schedule!',
-    },
-    {
-      type: 'todo',
-      text: 'Finish creative project',
-      notes: 'Tap to specify the name of your project',
-    },
-  ],
-};
+import content from 'common/script/content/index';
 
 export default {
-  mixins: [guide, notifications],
+  mixins: [guide, notifications, avatarEditorUtilies],
   components: {
     avatar,
     toggleSwitch,
     usernameForm,
+    bodySettings,
+    skinSettings,
+    hairSettings,
+    extraSettings,
+
+    subMenu,
   },
   mounted () {
     if (this.editing) this.modalPage = 2;
@@ -1086,26 +759,13 @@ export default {
   },
   data () {
     let backgroundShopSets = getBackgroundShopSets();
+
     return {
       loading: false,
       backgroundShopSets,
       backgroundUpdate: new Date(),
       filterBackgrounds: false,
-      specialShirtKeys: ['convict', 'cross', 'fire', 'horizon', 'ocean', 'purple', 'rainbow', 'redblue', 'thunder', 'tropical', 'zombie'],
-      rainbowSkinKeys: ['eb052b', 'f69922', 'f5d70f', '0ff591', '2b43f6', 'd7a9f7', '800ed0', 'rainbow'],
-      animalSkinKeys: ['bear', 'cactus', 'fox', 'lion', 'panda', 'pig', 'tiger', 'wolf'],
-      premiumHairColorKeys: ['rainbow', 'yellow', 'green', 'purple', 'blue', 'TRUred'],
-      baseHair1: [1, 3],
-      baseHair2Keys: [2, 4, 5, 6, 7, 8],
-      baseHair3Keys: [9, 10, 11, 12, 13, 14],
-      baseHair4Keys: [15, 16, 17, 18, 19, 20],
-      baseHair5Keys: [1, 2],
-      baseHair6Keys: [1, 2, 3],
-      animalItemKeys: {
-        back: ['bearTail', 'cactusTail', 'foxTail', 'lionTail', 'pandaTail', 'pigTail', 'tigerTail', 'wolfTail'],
-        headAccessory: ['bearEars', 'cactusEars', 'foxEars', 'lionEars', 'pandaEars', 'pigEars', 'tigerEars', 'wolfEars'],
-      },
-      chairKeys: ['black', 'blue', 'green', 'pink', 'red', 'yellow', 'handleless_black', 'handleless_blue', 'handleless_green', 'handleless_pink', 'handleless_red', 'handleless_yellow'],
+
       icons: Object.freeze({
         logoPurple,
         bodyIcon,
@@ -1116,11 +776,26 @@ export default {
         gem,
         pin,
         gold,
+        arrowRight,
+        arrowLeft,
       }),
       modalPage: 1,
       activeTopPage: 'body',
       activeSubPage: 'size',
       taskCategories: [],
+      skinSubMenuItems: [
+        {
+          id: 'color',
+          label: this.$t('color'),
+        },
+      ],
+
+      bgSubMenuItems: ['2019', '2018', '2017', '2016', '2015', '2014'].map(y =>
+        ({
+          id: y,
+          label: y,
+        })
+      ),
     };
   },
   watch: {
@@ -1137,184 +812,8 @@ export default {
   },
   computed: {
     ...mapState({user: 'user.data'}),
-    headbands () {
-      let keys = ['blackHeadband', 'blueHeadband', 'greenHeadband', 'pinkHeadband', 'redHeadband', 'whiteHeadband', 'yellowHeadband'];
-      let options = keys.map(key => {
-        let newKey = `headAccessory_special_${key}`;
-        let option = {};
-        option.key = key;
-        option.active = this.user.preferences.costume ? this.user.items.gear.costume.headAccessory === newKey : this.user.items.gear.equipped.headAccessory === newKey;
-        option.click = () => {
-          let type = this.user.preferences.costume ? 'costume' : 'equipped';
-          return this.equip(newKey, type);
-        };
-        return option;
-      });
-      return options;
-    },
-    eyewear () {
-      let keys = [
-        'blackTopFrame', 'blueTopFrame', 'greenTopFrame', 'pinkTopFrame', 'redTopFrame', 'whiteTopFrame', 'yellowTopFrame',
-        'blackHalfMoon', 'blueHalfMoon', 'greenHalfMoon', 'pinkHalfMoon', 'redHalfMoon', 'whiteHalfMoon', 'yellowHalfMoon',
-      ];
-      let options = keys.map(key => {
-        let newKey = `eyewear_special_${key}`;
-        let option = {};
-        option.key = key;
-        option.active = this.user.preferences.costume ? this.user.items.gear.costume.eyewear === newKey : this.user.items.gear.equipped.eyewear === newKey;
-        option.click = () => {
-          let type = this.user.preferences.costume ? 'costume' : 'equipped';
-          return this.equip(newKey, type);
-        };
-        return option;
-      });
-      return options;
-    },
-    specialShirts () {
-      // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
-      let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
-      let keys = this.specialShirtKeys;
-      let options = keys.map(key => {
-        return this.mapKeysToOption(key, 'shirt');
-      });
-      return options;
-    },
-    rainbowSkins () {
-      // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
-      let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
-      let keys = this.rainbowSkinKeys;
-      let options = keys.map(key => {
-        return this.mapKeysToOption(key, 'skin');
-      });
-      return options;
-    },
-    animalSkins () {
-      // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
-      let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
-      let keys = this.animalSkinKeys;
-      let options = keys.map(key => {
-        return this.mapKeysToOption(key, 'skin');
-      });
-      return options;
-    },
-    seasonalSkins () {
-      // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
-      let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
 
-      let seasonalSkins = [];
-      for (let key in skinsBySet) {
-        let set = skinsBySet[key];
 
-        let keys = set.map(item => {
-          return item.key;
-        });
-
-        let options = keys.map(optionKey => {
-          return this.mapKeysToOption(optionKey, 'skin', '', key);
-        });
-
-        let text = this.$t(key);
-        if (appearanceSets[key] && appearanceSets[key].text) {
-          text = appearanceSets[key].text();
-        }
-
-        let compiledSet = {
-          key,
-          options,
-          keys,
-          text,
-        };
-        seasonalSkins.push(compiledSet);
-      }
-
-      return seasonalSkins;
-    },
-    seasonalHairColors () {
-      // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
-      let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
-
-      let seasonalHairColors = [];
-      for (let key in hairColorBySet) {
-        let set = hairColorBySet[key];
-
-        let keys = set.map(item => {
-          return item.key;
-        });
-
-        let options = keys.map(optionKey => {
-          return this.mapKeysToOption(optionKey, 'hair', 'color', key);
-        });
-
-        let text = this.$t(key);
-        if (appearanceSets[key] && appearanceSets[key].text) {
-          text = appearanceSets[key].text();
-        }
-
-        let compiledSet = {
-          key,
-          options,
-          keys,
-          text,
-        };
-        seasonalHairColors.push(compiledSet);
-      }
-
-      return seasonalHairColors;
-    },
-    premiumHairColors () {
-      // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
-      let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
-      let keys = this.premiumHairColorKeys;
-      let options = keys.map(key => {
-        return this.mapKeysToOption(key, 'hair', 'color');
-      });
-      return options;
-    },
-    baseHair2 () {
-      // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
-      let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
-      let keys = this.baseHair2Keys;
-      let options = keys.map(key => {
-        return this.mapKeysToOption(key, 'hair', 'base');
-      });
-      return options;
-    },
-    baseHair3 () {
-      // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
-      let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
-      let keys = this.baseHair3Keys;
-      let options = keys.map(key => {
-        return this.mapKeysToOption(key, 'hair', 'base');
-      });
-      return options;
-    },
-    baseHair4 () {
-      // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
-      let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
-      let keys = this.baseHair4Keys;
-      let options = keys.map(key => {
-        return this.mapKeysToOption(key, 'hair', 'base');
-      });
-      return options;
-    },
-    baseHair5 () {
-      // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
-      let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
-      let keys = this.baseHair5Keys;
-      let options = keys.map(key => {
-        return this.mapKeysToOption(key, 'hair', 'mustache');
-      });
-      return options;
-    },
-    baseHair6 () {
-      // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
-      let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
-      let keys = this.baseHair6Keys;
-      let options = keys.map(key => {
-        return this.mapKeysToOption(key, 'hair', 'beard');
-      });
-      return options;
-    },
     editing () {
       return this.$store.state.avatarEditorOptions.editingUser;
     },
@@ -1366,9 +865,6 @@ export default {
     },
   },
   methods: {
-    hideSet (set) {
-      return moment(appearanceSets[set.key].availableUntil).isBefore(moment());
-    },
     purchase (type, key) {
       this.$store.dispatch('shops:purchase', {
         type,
@@ -1376,102 +872,6 @@ export default {
       });
       this.backgroundUpdate = new Date();
     },
-    mapKeysToOption (key, type, subType, set) {
-      let userPreference = subType ? this.user.preferences[type][subType] : this.user.preferences[type];
-      let userPurchased = subType ? this.user.purchased[type][subType] : this.user.purchased[type];
-      let locked = !userPurchased || !userPurchased[key];
-      let pathKey = subType ? `${type}.${subType}` : `${type}`;
-      let hide = false;
-
-      if (set && appearanceSets[set]) {
-        if (locked) hide = moment(appearanceSets[set].availableUntil).isBefore(moment());
-      }
-
-      let option = {};
-      option.key = key;
-      option.active = userPreference === key;
-      option.locked = locked;
-      option.hide = hide;
-      option.click = () => {
-        return locked ? this.unlock(`${pathKey}.${key}`) : this.set({[`preferences.${pathKey}`]: key});
-      };
-      return option;
-    },
-    userOwnsSet (type, setKeys, subType) {
-      let owns = true;
-
-      setKeys.forEach(key => {
-        if (subType) {
-          if (!this.user.purchased[type] || !this.user.purchased[type][subType] || !this.user.purchased[type][subType][key]) owns = false;
-          return;
-        }
-        if (!this.user.purchased[type][key]) owns = false;
-      });
-
-      return owns;
-    },
-    /**
-      * Allows you to find out whether you need the "Purchase All" button or not. If there are more than 2 unpurchased items, returns true, otherwise returns false.
-      * @param {string} category - The selected category.
-      * @param {string[]} keySets - The items keySets.
-      * @param {string[]} [types] - The items types (subcategories). Optional.
-      * @returns {boolean} - Determines whether the "Purchase All" button is needed (true) or not (false).
-    */
-    isPurchaseAllNeeded (category, keySets, types) {
-      const purchasedItemsLengths = [];
-      // If item types are specified, count them
-      if (types && types.length > 0) {
-        // Types can be undefined, so we must check them.
-        types.forEach((type) => {
-          if (this.user.purchased[category][type]) {
-            purchasedItemsLengths
-              .push(Object.keys(this.user.purchased[category][type]).length);
-          }
-        });
-      } else {
-        let purchasedItemsCounter = 0;
-
-        // If types are not specified, recursively
-        // search for purchased items in the category
-        const findPurchasedItems = (item) => {
-          if (typeof item === 'object') {
-            Object.values(item)
-              .forEach((innerItem) => {
-                if (typeof innerItem === 'boolean' && innerItem === true) {
-                  purchasedItemsCounter += 1;
-                }
-                return findPurchasedItems(innerItem);
-              });
-          }
-          return purchasedItemsCounter;
-        };
-
-        findPurchasedItems(this.user.purchased[category]);
-        if (purchasedItemsCounter > 0) {
-          purchasedItemsLengths.push(purchasedItemsCounter);
-        }
-      }
-
-      // We don't need to count the key sets (below)
-      // if there are no purchased items at all.
-      if (purchasedItemsLengths.length === 0) {
-        return true;
-      }
-
-      const allItemsLengths = [];
-      // Key sets must be specify correctly.
-      keySets.forEach((keySet) => {
-        allItemsLengths.push(Object.keys(this[keySet]).length);
-      });
-
-      // Simply sum all the length values and
-      // write them into variables for the convenience.
-      const allItems = allItemsLengths.reduce((acc, val) => acc + val);
-      const purchasedItems = purchasedItemsLengths.reduce((acc, val) => acc + val);
-
-      const unpurchasedItems = allItems - purchasedItems;
-      return unpurchasedItems > 2;
-    },
     prev () {
       this.modalPage -= 1;
     },
@@ -1485,18 +885,22 @@ export default {
     changeSubPage (page) {
       this.activeSubPage = page;
     },
-    set (settings) {
-      this.$store.dispatch('user:set', settings);
-    },
-    equip (key, type) {
-      this.$store.dispatch('common:equip', {key, type});
-    },
     async done () {
       this.loading = true;
 
-      let tasksToCreate = [];
+      let tasksToCreate = [
+        ...content.tasksByCategory.defaults.map(t =>  ({
+          ...t,
+          text: t.text(),
+          notes: t.notes && t.notes(),
+        })),
+      ];
       this.taskCategories.forEach(category => {
-        tasksToCreate = tasksToCreate.concat(tasksByCategory[category]);
+        tasksToCreate = tasksToCreate.concat(content.tasksByCategory[category].map(t => ({
+          ...t,
+          text: t.text(),
+          notes: t.notes && t.notes(),
+        })));
       });
 
       // @TODO: Move to the action
@@ -1533,74 +937,6 @@ export default {
 
       return setOwnedByUser;
     },
-    /**
-     * For gem-unlockable preferences, (a) if owned, select preference (b) else, purchase
-     * @param path: User.preferences <-> User.purchased maps like User.preferences.skin=abc <-> User.purchased.skin.abc.
-     *  Pass in this paramater as "skin.abc". Alternatively, pass as an array ["skin.abc", "skin.xyz"] to unlock sets
-     */
-    async unlock (path) {
-      let fullSet = path.indexOf(',') !== -1;
-      let isBackground = path.indexOf('background.') !== -1;
-
-      let cost;
-
-      if (isBackground) {
-        cost = fullSet ? 3.75 : 1.75; // (Backgrounds) 15G per set, 7G per individual
-      } else {
-        cost = fullSet ? 1.25 : 0.5; // (Hair, skin, etc) 5G per set, 2G per individual
-      }
-
-      let loginIncentives = [
-        'background.blue',
-        'background.green',
-        'background.red',
-        'background.purple',
-        'background.yellow',
-        'background.violet',
-      ];
-
-      if (loginIncentives.indexOf(path) === -1) {
-        if (fullSet) {
-          if (confirm(this.$t('purchaseFor', {cost: cost * 4})) !== true) return;
-          // @TODO: implement gem modal
-          // if (this.user.balance < cost) return $rootScope.openModal('buyGems');
-        } else if (!get(this.user, `purchased.${path}`)) {
-          if (confirm(this.$t('purchaseFor', {cost: cost * 4})) !== true) return;
-          // @TODO: implement gem modal
-          // if (this.user.balance < cost) return $rootScope.openModal('buyGems');
-        }
-      }
-
-      await axios.post(`/api/v4/user/unlock?path=${path}`);
-      try {
-        unlock(this.user, {
-          query: {
-            path,
-          },
-        });
-        this.backgroundUpdate = new Date();
-      } catch (e) {
-        alert(e.message);
-      }
-    },
-    async buy (item) {
-      const options = {
-        currency: 'gold',
-        key: item,
-        type: 'marketGear',
-        quantity: 1,
-        pinType: 'marketGear',
-      };
-      await axios.post(`/api/v4/user/buy/${item}`, options);
-      try {
-        buy(this.user, {
-          params: options,
-        });
-        this.backgroundUpdate = new Date();
-      } catch (e) {
-        alert(e.message);
-      }
-    },
     setKeys (type, _set) {
       return map(_set, (v, k) => {
         if (type === 'background') k = v.key;
@@ -1626,51 +962,6 @@ export default {
     backgroundPurchased () {
       this.backgroundUpdate = new Date();
     },
-    animalItemsUnlockString (category) {
-      const keys = this.animalItemKeys[category].map(key => {
-        return `items.gear.owned.${category}_special_${key}`;
-      });
-
-      return keys.join(',');
-    },
-    animalItemsOwned (category) {
-      // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
-      let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
-
-      let own = true;
-      this.animalItemKeys[category].forEach(key => {
-        if (this.user.items.gear.owned[`${category}_special_${key}`] === undefined) own = false;
-      });
-      return own;
-    },
-    animalItems (category) {
-      // @TODO: For some resonse when I use $set on the user purchases object, this is not recomputed. Hack for now
-      let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
-      let keys = this.animalItemKeys[category];
-      let options = keys.map(key => {
-        let newKey = `${category}_special_${key}`;
-        let userPurchased = this.user.items.gear.owned[newKey];
-
-        let option = {};
-        option.key = key;
-        option.active = this.user.preferences.costume ? this.user.items.gear.costume[category] === newKey : this.user.items.gear.equipped[category] === newKey;
-        option.gemLocked = userPurchased === undefined;
-        option.goldLocked = userPurchased === false;
-        option.locked = option.gemLocked || option.goldLocked;
-        option.click = () => {
-          if (option.gemLocked) {
-            return this.unlock(`items.gear.owned.${newKey}`);
-          } else if (option.goldLocked) {
-            return this.buy(newKey);
-          } else {
-            let type = this.user.preferences.costume ? 'costume' : 'equipped';
-            return this.equip(newKey, type);
-          }
-        };
-        return option;
-      });
-      return options;
-    },
   },
 };
 </script>
diff --git a/website/client/components/tasks/column.vue b/website/client/components/tasks/column.vue
index f5a69506bb..1d73d8d5ed 100644
--- a/website/client/components/tasks/column.vue
+++ b/website/client/components/tasks/column.vue
@@ -154,7 +154,6 @@
     text-align: center;
 
     overflow-y: hidden;
-    max-height: 65px; // approximate max height
   }
 
   .quick-add-tip-slide-enter-active {
diff --git a/website/client/components/tasks/task.vue b/website/client/components/tasks/task.vue
index 70e3d04619..34351b8006 100644
--- a/website/client/components/tasks/task.vue
+++ b/website/client/components/tasks/task.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 .task-wrapper
-  .task(@click='castEnd($event, task)')
+  .task(@click='castEnd($event, task)', :class="`type_${task.type}`")
     approval-header(:task='task', v-if='this.task.group.id', :group='group')
     .d-flex(:class="{'task-not-scoreable': isUser !== true}")
       // Habits left side control
@@ -418,7 +418,6 @@
     transition-property: border-color, background, color;
     transition-timing-function: ease-in;
   }
-
   .left-control {
     border-top-left-radius: 2px;
     border-bottom-left-radius: 2px;
@@ -428,8 +427,14 @@
 
     & + .task-content {
       border-left: none;
-      border-top-right-radius: 2px;
-      border-bottom-right-radius: 2px;
+    }
+  }
+  .task:not(.type_habit) {
+    .left-control {
+      & + .task-content {
+        border-top-right-radius: 2px;
+        border-bottom-right-radius: 2px;
+      }
     }
   }
 
diff --git a/website/client/mixins/avatarEditUtilities.js b/website/client/mixins/avatarEditUtilities.js
new file mode 100644
index 0000000000..00fe66168c
--- /dev/null
+++ b/website/client/mixins/avatarEditUtilities.js
@@ -0,0 +1,178 @@
+import moment from 'moment';
+import axios from 'axios';
+
+import unlock from '../../common/script/ops/unlock';
+import buy from '../../common/script/ops/buy/buy';
+
+import get from 'lodash/get';
+
+import appearanceSets from 'common/script/content/appearance/sets';
+
+
+import {userStateMixin} from './userState';
+
+export const avatarEditorUtilies = {
+  mixins: [userStateMixin],
+  data () {
+    return {
+      backgroundUpdate: new Date(),
+    };
+  },
+  methods: {
+    hideSet (set) {
+      return moment(appearanceSets[set.key].availableUntil).isBefore(moment());
+    },
+    mapKeysToFreeOption (key, type, subType) {
+      const userPreference = subType ? this.user.preferences[type][subType] : this.user.preferences[type];
+      const pathKey = subType ? `${type}.${subType}` : `${type}`;
+
+      const option = {};
+      option.key = key;
+      option.pathKey = pathKey;
+      option.active = userPreference === key;
+      option.class = this.createClass(type, subType, key);
+      option.click = (optionParam) => {
+        return option.gemLocked ? this.unlock(`${optionParam.pathKey}.${key}`) : this.set({[`preferences.${optionParam.pathKey}`]: optionParam.key});
+      };
+      return option;
+    },
+    mapKeysToOption (key, type, subType, set) {
+      const option = this.mapKeysToFreeOption(key, type, subType);
+
+      let userPurchased = subType ? this.user.purchased[type][subType] : this.user.purchased[type];
+      let locked = !userPurchased || !userPurchased[key];
+      let hide = false;
+
+      if (set && appearanceSets[set]) {
+        if (locked) hide = moment(appearanceSets[set].availableUntil).isBefore(moment());
+      }
+
+      option.gemLocked = locked;
+      option.hide = hide;
+      if (locked) {
+        option.gem = 2;
+      }
+
+      return option;
+    },
+    createClass (type, subType, key) {
+      let str = `${type} ${subType} `;
+
+      switch (type) {
+        case 'shirt': {
+          str += `${this.user.preferences.size}_shirt_${key}`;
+          break;
+        }
+        case 'size': {
+          str += `${key}_shirt_black`;
+          break;
+        }
+        case 'hair': {
+          if (subType === 'color') {
+            str += `hair_bangs_1_${key}`; // todo get current hair-bang setting
+          } else {
+            str += `hair_${subType}_${key}_${this.user.preferences.hair.color}`;
+          }
+          break;
+        }
+        case 'skin': {
+          str += `skin skin_${key}`;
+          break;
+        }
+        default: {
+          // `hair_base_${option.key}_${user.preferences.hair.color}`
+          // console.warn('unknown type', type, key);
+        }
+      }
+
+      return str;
+    },
+    userOwnsSet (type, setKeys, subType) {
+      let owns = true;
+
+      setKeys.forEach(key => {
+        if (subType) {
+          if (!this.user.purchased[type] || !this.user.purchased[type][subType] || !this.user.purchased[type][subType][key]) owns = false;
+          return;
+        }
+        if (!this.user.purchased[type][key]) owns = false;
+      });
+
+      return owns;
+    },
+    set (settings) {
+      this.$store.dispatch('user:set', settings);
+    },
+    equip (key, type) {
+      this.$store.dispatch('common:equip', {key, type});
+    },
+    /**
+     * For gem-unlockable preferences, (a) if owned, select preference (b) else, purchase
+     * @param path: User.preferences <-> User.purchased maps like User.preferences.skin=abc <-> User.purchased.skin.abc.
+     *  Pass in this paramater as "skin.abc". Alternatively, pass as an array ["skin.abc", "skin.xyz"] to unlock sets
+     */
+    async unlock (path) {
+      let fullSet = path.indexOf(',') !== -1;
+      let isBackground = path.indexOf('background.') !== -1;
+
+      let cost;
+
+      if (isBackground) {
+        cost = fullSet ? 3.75 : 1.75; // (Backgrounds) 15G per set, 7G per individual
+      } else {
+        cost = fullSet ? 1.25 : 0.5; // (Hair, skin, etc) 5G per set, 2G per individual
+      }
+
+      let loginIncentives = [
+        'background.blue',
+        'background.green',
+        'background.red',
+        'background.purple',
+        'background.yellow',
+        'background.violet',
+      ];
+
+      if (loginIncentives.indexOf(path) === -1) {
+        if (fullSet) {
+          if (confirm(this.$t('purchaseFor', {cost: cost * 4})) !== true) return;
+          // @TODO: implement gem modal
+          // if (this.user.balance < cost) return $rootScope.openModal('buyGems');
+        } else if (!get(this.user, `purchased.${path}`)) {
+          if (confirm(this.$t('purchaseFor', {cost: cost * 4})) !== true) return;
+          // @TODO: implement gem modal
+          // if (this.user.balance < cost) return $rootScope.openModal('buyGems');
+        }
+      }
+
+      await axios.post(`/api/v4/user/unlock?path=${path}`);
+      try {
+        unlock(this.user, {
+          query: {
+            path,
+          },
+        });
+        this.backgroundUpdate = new Date();
+      } catch (e) {
+        alert(e.message);
+      }
+    },
+    async buy (item) {
+      const options = {
+        currency: 'gold',
+        key: item,
+        type: 'marketGear',
+        quantity: 1,
+        pinType: 'marketGear',
+      };
+      await axios.post(`/api/v4/user/buy/${item}`, options);
+      try {
+        buy(this.user, {
+          params: options,
+        });
+        this.backgroundUpdate = new Date();
+      } catch (e) {
+        alert(e.message);
+      }
+    },
+  },
+};
diff --git a/website/client/mixins/subPage.js b/website/client/mixins/subPage.js
new file mode 100644
index 0000000000..bdae59faee
--- /dev/null
+++ b/website/client/mixins/subPage.js
@@ -0,0 +1,12 @@
+export const subPageMixin = {
+  data () {
+    return {
+      activeSubPage: '',
+    };
+  },
+  methods: {
+    changeSubPage (page) {
+      this.activeSubPage = page;
+    },
+  },
+};
diff --git a/website/client/mixins/userState.js b/website/client/mixins/userState.js
new file mode 100644
index 0000000000..d52d6e2be2
--- /dev/null
+++ b/website/client/mixins/userState.js
@@ -0,0 +1,7 @@
+import { mapState } from 'client/libs/store';
+
+export const userStateMixin = {
+  computed: {
+    ...mapState({user: 'user.data'}),
+  },
+};
diff --git a/website/client/store/getters/tasks.js b/website/client/store/getters/tasks.js
index 2c453a0423..ff5d751428 100644
--- a/website/client/store/getters/tasks.js
+++ b/website/client/store/getters/tasks.js
@@ -16,7 +16,7 @@ export function getTagsFor (store) {
 }
 
 function getTaskColor (task) {
-  if (task.type === 'reward') return 'purple';
+  if (task.type === 'reward' || task.byHabitica) return 'purple';
 
   const value = task.value;
 
diff --git a/website/common/locales/en/defaultTasks.json b/website/common/locales/en/defaultTasks.json
index 7dcacb0b35..dca538c5fc 100644
--- a/website/common/locales/en/defaultTasks.json
+++ b/website/common/locales/en/defaultTasks.json
@@ -34,5 +34,51 @@
   "defaultTag4": "School",
   "defaultTag5": "Teams",
   "defaultTag6": "Chores",
-  "defaultTag7": "Creativity"
+  "defaultTag7": "Creativity",
+
+  "workHabitMail": "Process email",
+  "workDailyImportantTask": "Most important task >> Worked on today’s most important task",
+  "workDailyImportantTaskNotes": "Tap to specify your most important task",
+  "workTodoProject": "Work project >> Complete work project",
+  "workTodoProjectNotes": "Tap to specify the name of your current project + set a due date!",
+
+  "exerciseHabit": "10 min cardio >> + 10 minutes cardio",
+  "exerciseDailyText": "Stretching >> Daily workout routine",
+  "exerciseDailyNotes": "Tap to choose your schedule and specify exercises!",
+  "exerciseTodoText": "Set up workout schedule",
+  "exerciseTodoNotes": "Tap to add a checklist!",
+
+  "healthHabit": "Eat Health/Junk Food",
+  "healthDailyText": "Floss",
+  "healthDailyNotes": "Tap to make any changes!",
+
+  "healthTodoText": "Schedule check-up >> Brainstorm a healthy change",
+  "healthTodoNotes": "Tap to add checklists!",
+
+  "schoolHabit": "Study/Procrastinate",
+  "schoolDailyText": "Finish homework",
+  "schoolDailyNotes": "Tap to choose your homework schedule!",
+  "schoolTodoText": "Finish assignment for class",
+  "schoolTodoNotes": "Tap to name the assignment and choose a due date!]",
+
+  "selfCareHabit": "Take a short break",
+  "selfCareDailyText": "5 minutes of quiet breathing",
+  "selfCareDailyNotes": "Tap to choose your schedule!",
+  "selfCareTodoText": "Engage in a fun activity",
+  "selfCareTodoNotes": "Tap to specify what you plan to do!",
+
+  "choresHabit": "10 minutes cleaning",
+  "choresDailyText": "Wash dishes",
+  "choresDailyNotes": "Tap to choose your schedule!",
+  "choresTodoText": "Organize closet >> Organize clutter",
+  "choresTodoNotes": "Tap to specify the cluttered area!",
+
+  "creativityHabit": "Study a master of the craft >> + Practiced a new creative technique",
+  "creativityDailyText": "Work on creative project",
+  "creativityDailyNotes": "Tap to specify the name of your current project + set the schedule!",
+  "creativityTodoText": "Finish creative project",
+  "creativityTodoNotes": "Tap to specify the name of your project",
+
+  "defaultHabitText": "Click here to edit this into a bad habit you'd like to quit",
+  "defaultHabitNotes": "Or delete from the edit screen"
 }
diff --git a/website/common/locales/en/generic.json b/website/common/locales/en/generic.json
index c5744715b6..e5b7c3f485 100644
--- a/website/common/locales/en/generic.json
+++ b/website/common/locales/en/generic.json
@@ -7,6 +7,7 @@
 
   "onward": "Onward!",
   "done": "Done",
+  "finish": "Finish",
   "gotIt": "Got it!",
 
   "titleTasks": "Tasks",
diff --git a/website/common/script/content/index.js b/website/common/script/content/index.js
index eedb5c8cd9..177fe2536b 100644
--- a/website/common/script/content/index.js
+++ b/website/common/script/content/index.js
@@ -2,6 +2,7 @@ import defaults from 'lodash/defaults';
 import each from 'lodash/each';
 import moment from 'moment';
 import t from './translation';
+import {tasksByCategory} from './tasks';
 
 import {
   CLASSES,
@@ -898,6 +899,7 @@ api.userDefaults = {
     },
   ],
 };
+api.tasksByCategory = tasksByCategory;
 
 api.userDefaultsMobile = {
   habits: [],
diff --git a/website/common/script/content/tasks.js b/website/common/script/content/tasks.js
new file mode 100644
index 0000000000..1b14a99fd0
--- /dev/null
+++ b/website/common/script/content/tasks.js
@@ -0,0 +1,158 @@
+import t from './translation';
+
+export const tasksByCategory = {
+  work: [
+    {
+      type: 'habit',
+      text: t('workHabitMail'),
+      up: true,
+      down: false,
+    },
+    {
+      type: 'daily',
+      text: t('workDailyImportantTask'),
+      notes: t('workDailyImportantTaskNotes'),
+    },
+    {
+      type: 'todo',
+      text: t('workTodoProject'),
+      notes: t('workTodoProjectNotes'),
+    },
+  ],
+  exercise: [
+    {
+      type: 'habit',
+      text: t('exerciseHabit'),
+      up: true,
+      down: false,
+    },
+    {
+      type: 'daily',
+      text: t('exerciseDailyText'),
+      notes: t('exerciseDailyNotes'),
+    },
+    {
+      type: 'todo',
+      text: t('exerciseTodoText'),
+      notes: t('exerciseTodoNotes'),
+    },
+  ],
+  health_wellness: [ // eslint-disable-line
+    {
+      type: 'habit',
+      text: t('healthHabit'),
+      up: true,
+      down: true,
+    },
+    {
+      type: 'daily',
+      text: t('healthDailyText'),
+      notes: t('healthDailyNotes'),
+    },
+    {
+      type: 'todo',
+      text: t('healthTodoText'),
+      notes: t('healthTodoNotes'),
+    },
+  ],
+  school: [
+    {
+      type: 'habit',
+      text: t('schoolHabit'),
+      up: true,
+      down: true,
+    },
+    {
+      type: 'daily',
+      text: t('schoolDailyText'),
+      notes: t('schoolDailyNotes'),
+    },
+    {
+      type: 'todo',
+      text: t('schoolTodoText'),
+      notes: t('schoolTodoNotes'),
+    },
+  ],
+  self_care: [ // eslint-disable-line
+    {
+      type: 'habit',
+      text: t('selfCareHabit'),
+      up: true,
+      down: false,
+    },
+    {
+      type: 'daily',
+      text: t('selfCareDailyText'),
+      notes: t('selfCareDailyNotes'),
+    },
+    {
+      type: 'todo',
+      text: t('selfCareTodoText'),
+      notes: t('selfCareTodoNotes'),
+    },
+  ],
+  chores: [
+    {
+      type: 'habit',
+      text: t('choresHabit'),
+      up: true,
+      down: false,
+    },
+    {
+      type: 'daily',
+      text: t('choresDailyText'),
+      notes: t('choresDailyNotes'),
+    },
+    {
+      type: 'todo',
+      text: t('choresTodoText'),
+      notes: t('choresTodoNotes'),
+    },
+  ],
+  creativity: [
+    {
+      type: 'habit',
+      text: t('creativityHabit'),
+      up: true,
+      down: false,
+    },
+    {
+      type: 'daily',
+      text: t('creativityDailyText'),
+      notes: t('creativityDailyNotes'),
+    },
+    {
+      type: 'todo',
+      text: t('creativityTodoText'),
+      notes: t('creativityTodoNotes'),
+    },
+  ],
+  defaults: [
+    {
+      type: 'habit',
+      text: t('defaultHabit4Text'),
+      notes: t('defaultHabit4Notes'),
+      up: true,
+      down: false,
+    },
+    {
+      type: 'habit',
+      text: t('defaultHabitText'),
+      notes: t('defaultHabitNotes'),
+      up: false,
+      down: true,
+    },
+    {
+      type: 'todo',
+      text: t('defaultTodo1Text'),
+      notes: t('defaultTodoNotes'),
+      byHabitica: true,
+    },
+    {
+      type: 'reward',
+      text: t('defaultReward2Text'),
+      notes: t('defaultReward2Notes'),
+      value: 10,
+    },
+  ],
+};
diff --git a/website/server/models/task.js b/website/server/models/task.js
index aa64de38e8..24c73da6fd 100644
--- a/website/server/models/task.js
+++ b/website/server/models/task.js
@@ -128,6 +128,8 @@ export let TaskSchema = new Schema({
   },
 
   reminders: [reminderSchema],
+
+  byHabitica: {$type: Boolean, default: false}, // Flag of Tasks that were created by Habitica
 }, _.defaults({
   minimize: false, // So empty objects are returned
   strict: true,