diff --git a/website/client/assets/svg/accessories.svg b/website/client/assets/svg/accessories.svg
index 87ef039a2b..bc8a60f397 100644
--- a/website/client/assets/svg/accessories.svg
+++ b/website/client/assets/svg/accessories.svg
@@ -1,6 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="23" viewBox="0 0 40 23">
-    <g fill="none" fill-rule="evenodd" stroke="#A5A1AC" stroke-width="2.4">
-        <path d="M23.324 10.53h14.621M2.248 10.53h21.946M16.804 15.667s1.501-.742 3.293-.742a7.57 7.57 0 0 1 3.197.742"/>
-        <path stroke-linecap="round" stroke-linejoin="round" d="M16.838 10.53v3.878c0 3.879-3.22 7.052-7.154 7.052H8.359c-3.497 0-6.36-2.822-6.36-6.269v-4.968l8.289-7.205c2.02-1.756 4.63-1.113 6.482.958M23.26 10.53v3.878c0 3.879 3.219 7.052 7.154 7.052h1.325c3.497 0 6.359-2.822 6.359-6.269v-4.968L29.81 3.018c-2.02-1.756-4.63-1.113-6.482.958"/>
-    </g>
-</svg>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.5 21.85"><defs><style>.cls-1{}</style></defs><title>extras</title><path class="cls-1" d="M38.84,13.59l-8.29-7.2c-2.39-2.08-5.74-1.64-8.16,1.06A1.2,1.2,0,0,0,24.17,9c1.17-1.3,3.12-2.31,4.8-.85l6.22,5.41H4.81L11,8.19c1.68-1.46,3.63-.45,4.8.85a1.2,1.2,0,1,0,1.79-1.6c-2.42-2.7-5.77-3.14-8.16-1.06l-8.29,7.2a1.2,1.2,0,0,0-.41.91v5a7.52,7.52,0,0,0,7.56,7.47H9.63a8.35,8.35,0,0,0,8.05-6.08A7,7,0,0,1,20,20.4a6.41,6.41,0,0,1,2.26.44,8.35,8.35,0,0,0,8.05,6.09h1.32a7.52,7.52,0,0,0,7.56-7.47v-5A1.2,1.2,0,0,0,38.84,13.59ZM9.63,24.53H8.31a5.12,5.12,0,0,1-5.16-5.07V16H15.59v2.68A5.91,5.91,0,0,1,9.63,24.53ZM18,18.25V16h4v2.24A8.39,8.39,0,0,0,20,18,8.83,8.83,0,0,0,18,18.25Zm13.7,6.28H30.37a5.91,5.91,0,0,1-6-5.85V16H36.85v3.46A5.12,5.12,0,0,1,31.69,24.53Z" transform="translate(-0.75 -5.08)"/></svg>
diff --git a/website/client/assets/svg/backgrounds.svg b/website/client/assets/svg/backgrounds.svg
index 180952ab5f..462991bccd 100644
--- a/website/client/assets/svg/backgrounds.svg
+++ b/website/client/assets/svg/backgrounds.svg
@@ -1,6 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <rect width="29.6" height="29.6" x="1.2" y="1.2" stroke="#A5A1AC" stroke-width="2.4" rx="4"/>
-        <path fill="#A5A1AC" d="M11 11l2-1-2-1-1-2-1 2-2 1 2 1 1 2zM23 14l2-1-2-1-1-2-1 2-2 1 2 1 1 2zM15.333 22.333L18 21l-2.667-1.333L14 17l-1.333 2.667L10 21l2.667 1.333L14 25z"/>
-    </g>
-</svg>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.cls-1{fill-rule:evenodd;}</style></defs><title>background</title><path class="cls-1" d="M28,0H4A4,4,0,0,0,0,4V28a4,4,0,0,0,4,4H28a4,4,0,0,0,4-4V4A4,4,0,0,0,28,0Zm1.6,28A1.6,1.6,0,0,1,28,29.6H4A1.6,1.6,0,0,1,2.4,28V4A1.6,1.6,0,0,1,4,2.4H28A1.6,1.6,0,0,1,29.6,4V28ZM10,13L9,11,7,10,9,9l1-2,1,2,2,1-2,1Zm13-1,2,1-2,1-1,2-1-2-2-1,2-1,1-2Zm-7.67,7.67L18,21l-2.67,1.33L14,25l-1.33-2.67L10,21l2.67-1.33L14,17Z"/></svg>
diff --git a/website/client/assets/svg/body.svg b/website/client/assets/svg/body.svg
index 2572e81faf..e65485cfeb 100644
--- a/website/client/assets/svg/body.svg
+++ b/website/client/assets/svg/body.svg
@@ -1,8 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="34" viewBox="0 0 32 34">
-    <g fill="none" fill-rule="evenodd">
-        <path class='path' stroke="#6133B4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" d="M2.124 20.456S2.854 2 15.734 2c12.88 0 13.61 18.456 13.61 18.456"/>
-        <path class='path' stroke="#6133B4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" d="M10.29 32.388s-1.725-7.96-1.725-14.681c0-6.722 2.382-14.682 2.382-14.682M21.064 32.388s1.724-7.96 1.724-14.681c0-6.722-2.382-14.682-2.382-14.682"/>
-        <path class='path' stroke="#6133B4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" d="M8.957 22.65s3.372-.64 6.933-.64c3.563 0 6.54.64 6.54.64M7.003 32.388h3.29M21.144 32.388h3.289"/>
-        <path fill="#6133B4" d="M3.784 21.533a1.893 1.893 0 1 1-3.785 0 1.893 1.893 0 0 1 3.785 0M31.237 21.533a1.893 1.893 0 1 1-3.786 0 1.893 1.893 0 0 1 3.786 0"/>
-    </g>
-</svg>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.49 32"><defs><style>.cls-1{fill-rule:evenodd;}</style></defs><title>body</title><path class="cls-1" d="M30.55,18.8C30.19,12.11,26.77,0,16.11,0A11.9,11.9,0,0,0,11,1.11l-0.12.05C4.35,4.32,2,13.19,1.69,18.64A1.85,1.85,0,1,0,4,19.05c0.09-1.31.83-9.79,5.5-14.14A53.73,53.73,0,0,0,7.94,16.5,76.9,76.9,0,0,0,9.37,29.66H7.59a1.17,1.17,0,0,0,0,2.34h3.21L11,32l0.1,0a1.13,1.13,0,0,0,.23-0.1l0.17-.11a1.12,1.12,0,0,0,.37-0.57,1.12,1.12,0,0,0,0-.2,0.33,0.33,0,0,0,0-.26,1.09,1.09,0,0,0,0-.11c0-.05-0.82-3.82-1.3-8.26a39.75,39.75,0,0,1,5.62-.45,33.72,33.72,0,0,1,5.21.43c-0.48,4.44-1.29,8.23-1.3,8.28a1.17,1.17,0,0,0,.9,1.39l0.25,0H24.6a1.17,1.17,0,0,0,0-2.34H22.74A76.9,76.9,0,0,0,24.17,16.5a54,54,0,0,0-1.6-11.72C27.16,8.91,28.05,17,28.2,18.84A1.85,1.85,0,1,0,30.55,18.8Zm-8.72-2.3c0,1.13-.05,2.3-0.14,3.46a35.84,35.84,0,0,0-5.42-.43,41.52,41.52,0,0,0-5.84.46c-0.09-1.17-.14-2.35-0.14-3.48A57.14,57.14,0,0,1,12.41,3a10.15,10.15,0,0,1,7.28,0A57.16,57.16,0,0,1,21.83,16.5Z" transform="translate(-0.76)"/></svg>
diff --git a/website/client/assets/svg/hair.svg b/website/client/assets/svg/hair.svg
index 5eb61e64ac..cfd97784fe 100644
--- a/website/client/assets/svg/hair.svg
+++ b/website/client/assets/svg/hair.svg
@@ -1,6 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35">
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#A5A1AC" d="M22.688 0a7.222 7.222 0 0 0-5.12 2.12L2.12 17.569a7.241 7.241 0 0 0 0 10.24l2.538 2.538L30.346 4.66 27.809 2.12A7.222 7.222 0 0 0 22.688 0m0 2.414c1.289 0 2.502.502 3.413 1.414l.832.83L4.659 26.934l-.831-.831a4.793 4.793 0 0 1-1.415-3.414c0-1.29.502-2.501 1.415-3.414L19.275 3.828a4.793 4.793 0 0 1 3.413-1.414"/>
-        <path stroke="#A5A1AC" stroke-width="2.4" d="M4.385 28.385l5.746 5.747M28.36 4.41l5.746 5.746M16.372 16.398l5.746 5.746M7.382 25.389l5.746 5.746M10.379 22.392l5.746 5.746M13.376 19.395l5.746 5.746M19.37 13.4l5.745 5.747M22.366 10.404l5.746 5.746M25.363 7.407l5.746 5.746"/>
-    </g>
-</svg>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.24 31.25"><defs><style>.cls-1{}</style></defs><title>hair</title><path class="cls-1" d="M26.14,6.55l4,4,1.7-1.7L27,4l0,0-0.85-.85-1-1a5.49,5.49,0,0,0-7.76,0L2.21,17.38a5.49,5.49,0,0,0,0,7.76l1,1L4,27l0,0,4.86,4.86,1.7-1.7-4-4,0,0L8.5,24.19l4,4,1.7-1.7-4-4,1.8-1.8,4,4L17.7,23l-4-4,1.8-1.8,4,4,1.7-1.7-4-4,1.8-1.8,4,4L24.7,16l-4-4,1.8-1.8,4,4,1.7-1.7-4-4,1.92-1.92ZM4.88,24.42l-1-1a3.09,3.09,0,0,1,0-4.37L19.08,3.9a3.09,3.09,0,0,1,4.37,0l1,1Z" transform="translate(-0.6 -0.6)"/></svg>
diff --git a/website/client/assets/svg/skin.svg b/website/client/assets/svg/skin.svg
index 7c9d74b2a0..63a2df136f 100644
--- a/website/client/assets/svg/skin.svg
+++ b/website/client/assets/svg/skin.svg
@@ -1,6 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="37" height="33" viewBox="0 0 37 33">
-    <g fill="none" fill-rule="evenodd" stroke="#A5A1AC" stroke-linejoin="round" stroke-width="2.4">
-        <path stroke-linecap="round" d="M13.782 21.846s1.794 3.682 0 5.454c-1.793 1.773-5.957 0-8.327.938C3.085 29.175 2 31.65 2 31.65M23.744 21.846s-1.794 3.682 0 5.454c1.793 1.773 5.957 0 8.327.938 2.37.937 3.455 3.412 3.455 3.412"/>
-        <path d="M27.939 12.642c0 6.321-5.755 11.445-9.277 11.445-2.98 0-9.277-5.124-9.277-11.445C9.385 6.32 13.089 2 18.662 2c5.572 0 9.277 4.32 9.277 10.642z"/>
-    </g>
-</svg>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.8 28.4"><defs><style>.cls-1{}</style></defs><title>skin</title><path class="cls-1" d="M31.8,28.52a7.44,7.44,0,0,0-3.69-3.63,8.72,8.72,0,0,0-3.82-.26c-1.21.09-2.57,0.19-3.08-.3-0.72-.71-0.15-2.6.24-3.4a1.13,1.13,0,0,0,0-.18,12,12,0,0,0,3.75-8.41c0-6.2-3.84-10.53-9.33-10.53S6.58,6.13,6.58,12.33a12.19,12.19,0,0,0,3.94,8.46,1.13,1.13,0,0,0,0,.13c0.39,0.8,1,2.7.24,3.41-0.5.5-1.87,0.39-3.08,0.3a8.75,8.75,0,0,0-3.82.26A7.43,7.43,0,0,0,.2,28.52a1.2,1.2,0,1,0,2.2,1,5,5,0,0,1,2.37-2.36A7.3,7.3,0,0,1,7.53,27c1.72,0.13,3.66.28,4.94-1a3.9,3.9,0,0,0,1-3.11,5.72,5.72,0,0,0,2.39.64,6.15,6.15,0,0,0,2.57-.67,3.92,3.92,0,0,0,1,3.14c1.28,1.26,3.22,1.12,4.94,1a7.34,7.34,0,0,1,2.76.1,5,5,0,0,1,2.37,2.36A1.2,1.2,0,1,0,31.8,28.52ZM9,12.33C9,7.39,11.7,4.2,15.91,4.2s6.93,3.19,6.93,8.13-4.62,8.84-6.93,8.84C14,21.17,9,17.25,9,12.33Z" transform="translate(-0.1 -1.8)"/></svg>
diff --git a/website/client/components/creatorIntro.vue b/website/client/components/creatorIntro.vue
index 6108f530d1..ecfbb87648 100644
--- a/website/client/components/creatorIntro.vue
+++ b/website/client/components/creatorIntro.vue
@@ -16,23 +16,23 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
         button.btn.btn-secondary(v-once) {{$t('randomize')}}
     #options-nav.container.section.text-center.customize-menu
       .row
-        div(:class='{"col-3": !editing, "col-2 offset-1": editing}')
+        .menu-container(:class='{"col-3": !editing, "col-2 offset-1": editing, active: activeTopPage === "body"}')
           .menu-item(@click='changeTopPage("body", "size")')
             .svg-icon(v-html='icons.bodyIcon')
           strong(v-once) {{$t('bodyBody')}}
-        div(:class='{"col-3": !editing, "col-2": editing}')
+        .menu-container(:class='{"col-3": !editing, "col-2": editing, active: activeTopPage === "skin"}')
           .menu-item(@click='changeTopPage("skin", "color")')
             .svg-icon(v-html='icons.skinIcon')
           strong(v-once) {{$t('skin')}}
-        div(:class='{"col-3": !editing, "col-2": editing}')
+        .menu-container(:class='{"col-3": !editing, "col-2": editing, active: activeTopPage === "hair"}')
           .menu-item(@click='changeTopPage("hair", "color")')
             .svg-icon(v-html='icons.hairIcon')
           strong(v-once) {{$t('hair')}}
-        div(:class='{"col-3": !editing, "col-2": editing}')
+        .menu-container(:class='{"col-3": !editing, "col-2": editing, active: activeTopPage === "extra"}')
           .menu-item(@click='changeTopPage("extra", "glasses")')
             .svg-icon(v-html='icons.accessoriesIcon')
           strong(v-once) {{$t('extra')}}
-        .col-2(v-if='editing')
+        .menu-container.col-2(v-if='editing', :class='{active: activeTopPage === "backgrounds"}')
           .menu-item(@click='changeTopPage("backgrounds", "2017")')
             .svg-icon(v-html='icons.backgroundsIcon')
           strong(v-once) {{$t('backgrounds')}}
@@ -505,14 +505,15 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
       width: 32px;
       height: 32px;
       margin: 0 auto;
-      color: #6133B4;
     }
 
-    .menu-item:hover {
+    .menu-container {
+      color: #a5a1ac;
+    }
+
+    .menu-container:hover, .menu-container.active {
       cursor: pointer;
-      svg path, strong {
-        stroke: purple !important;
-      }
+      color: #6133B4;
     }
   }