diff --git a/website/client/assets/images/home/battle-monsters.png b/website/client/assets/images/home/battle-monsters.png
new file mode 100755
index 0000000000..8f57061dcd
Binary files /dev/null and b/website/client/assets/images/home/battle-monsters.png differ
diff --git a/website/client/assets/images/home/battle-monsters@2x.png b/website/client/assets/images/home/battle-monsters@2x.png
new file mode 100755
index 0000000000..84656a7ae6
Binary files /dev/null and b/website/client/assets/images/home/battle-monsters@2x.png differ
diff --git a/website/client/assets/images/home/battle-monsters@3x.png b/website/client/assets/images/home/battle-monsters@3x.png
new file mode 100755
index 0000000000..d56a85abef
Binary files /dev/null and b/website/client/assets/images/home/battle-monsters@3x.png differ
diff --git a/website/client/assets/images/home/earn-rewards.png b/website/client/assets/images/home/earn-rewards.png
new file mode 100755
index 0000000000..849a275445
Binary files /dev/null and b/website/client/assets/images/home/earn-rewards.png differ
diff --git a/website/client/assets/images/home/earn-rewards@2x.png b/website/client/assets/images/home/earn-rewards@2x.png
new file mode 100755
index 0000000000..e67c7d821a
Binary files /dev/null and b/website/client/assets/images/home/earn-rewards@2x.png differ
diff --git a/website/client/assets/images/home/earn-rewards@3x.png b/website/client/assets/images/home/earn-rewards@3x.png
new file mode 100755
index 0000000000..d2c07d504e
Binary files /dev/null and b/website/client/assets/images/home/earn-rewards@3x.png differ
diff --git a/website/client/assets/images/home/google-play-badge.svg b/website/client/assets/images/home/google-play-badge.svg
new file mode 100644
index 0000000000..9b44de53af
--- /dev/null
+++ b/website/client/assets/images/home/google-play-badge.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" viewBox="0 0 135 40">
+    <g fill="none" fill-rule="nonzero">
+        <path fill="#36205D" d="M130 40H5c-2.8 0-5-2.2-5-5V5c0-2.8 2.2-5 5-5h125c2.8 0 5 2.2 5 5v30c0 2.7-2.2 5-5 5z"/>
+        <path fill="#BDA8FF" d="M130 .8c2.3 0 4.2 1.9 4.2 4.2v30c0 2.3-1.9 4.2-4.2 4.2H5C2.7 39.2.8 37.3.8 35V5C.8 2.7 2.7.8 5 .8h125zm0-.8H5C2.2 0 0 2.2 0 5v30c0 2.8 2.2 5 5 5h125c2.8 0 5-2.2 5-5V5c0-2.7-2.2-5-5-5z"/>
+        <g fill="#D5C8FF" stroke="#D5C8FF" stroke-width=".2">
+            <path d="M47.4 10.2c0 .8-.2 1.5-.7 2-.6.6-1.3.9-2.2.9-.9 0-1.6-.3-2.2-.9-.6-.6-.9-1.3-.9-2.2 0-.9.3-1.6.9-2.2.6-.6 1.3-.9 2.2-.9.4 0 .8.1 1.2.3.4.2.7.4.9.7l-.5.5c-.4-.5-.9-.7-1.6-.7-.6 0-1.2.2-1.6.7-.5.4-.7 1-.7 1.7s.2 1.3.7 1.7c.5.4 1 .7 1.6.7.7 0 1.2-.2 1.7-.7.3-.3.5-.7.5-1.2h-2.2v-.7h2.9v.3zM52 7.7h-2.7v1.9h2.5v.7h-2.5v1.9H52v.8h-3.5V7H52zM55.3 13h-.8V7.7h-1.7V7H57v.7h-1.7zM59.9 13V7h.8v6zM64.1 13h-.8V7.7h-1.7V7h4.1v.7H64V13zM73.6 12.2c-.6.6-1.3.9-2.2.9-.9 0-1.6-.3-2.2-.9-.6-.6-.9-1.3-.9-2.2 0-.9.3-1.6.9-2.2.6-.6 1.3-.9 2.2-.9.9 0 1.6.3 2.2.9.6.6.9 1.3.9 2.2 0 .9-.3 1.6-.9 2.2zm-3.8-.5c.4.4 1 .7 1.6.7.6 0 1.2-.2 1.6-.7.4-.4.7-1 .7-1.7s-.2-1.3-.7-1.7c-.4-.4-1-.7-1.6-.7-.6 0-1.2.2-1.6.7-.4.4-.7 1-.7 1.7s.2 1.3.7 1.7zM75.6 13V7h.9l2.9 4.7V7h.8v6h-.8l-3.1-4.9V13z"/>
+        </g>
+        <path fill="#D5C8FF" d="M68.1 21.8c-2.4 0-4.3 1.8-4.3 4.3 0 2.4 1.9 4.3 4.3 4.3s4.3-1.8 4.3-4.3c0-2.6-1.9-4.3-4.3-4.3zm0 6.8c-1.3 0-2.4-1.1-2.4-2.6s1.1-2.6 2.4-2.6c1.3 0 2.4 1 2.4 2.6 0 1.5-1.1 2.6-2.4 2.6zm-9.3-6.8c-2.4 0-4.3 1.8-4.3 4.3 0 2.4 1.9 4.3 4.3 4.3s4.3-1.8 4.3-4.3c0-2.6-1.9-4.3-4.3-4.3zm0 6.8c-1.3 0-2.4-1.1-2.4-2.6s1.1-2.6 2.4-2.6c1.3 0 2.4 1 2.4 2.6 0 1.5-1.1 2.6-2.4 2.6zm-11.1-5.5v1.8H52c-.1 1-.5 1.8-1 2.3-.6.6-1.6 1.3-3.3 1.3-2.7 0-4.7-2.1-4.7-4.8 0-2.7 2.1-4.8 4.7-4.8 1.4 0 2.5.6 3.3 1.3l1.3-1.3c-1.1-1-2.5-1.8-4.5-1.8-3.6 0-6.7 3-6.7 6.6 0 3.6 3.1 6.6 6.7 6.6 2 0 3.4-.6 4.6-1.9 1.2-1.2 1.6-2.9 1.6-4.2 0-.4 0-.8-.1-1.1h-6.2zm45.4 1.4c-.4-1-1.4-2.7-3.6-2.7s-4 1.7-4 4.3c0 2.4 1.8 4.3 4.2 4.3 1.9 0 3.1-1.2 3.5-1.9l-1.4-1c-.5.7-1.1 1.2-2.1 1.2s-1.6-.4-2.1-1.3l5.7-2.4-.2-.5zm-5.8 1.4c0-1.6 1.3-2.5 2.2-2.5.7 0 1.4.4 1.6.9l-3.8 1.6zM82.6 30h1.9V17.5h-1.9V30zm-3-7.3c-.5-.5-1.3-1-2.3-1-2.1 0-4.1 1.9-4.1 4.3s1.9 4.2 4.1 4.2c1 0 1.8-.5 2.2-1h.1v.6c0 1.6-.9 2.5-2.3 2.5-1.1 0-1.9-.8-2.1-1.5l-1.6.7c.5 1.1 1.7 2.5 3.8 2.5 2.2 0 4-1.3 4-4.4V22h-1.8v.7zm-2.2 5.9c-1.3 0-2.4-1.1-2.4-2.6s1.1-2.6 2.4-2.6c1.3 0 2.3 1.1 2.3 2.6s-1 2.6-2.3 2.6zm24.4-11.1h-4.5V30h1.9v-4.7h2.6c2.1 0 4.1-1.5 4.1-3.9s-2-3.9-4.1-3.9zm.1 6h-2.7v-4.3h2.7c1.4 0 2.2 1.2 2.2 2.1-.1 1.1-.9 2.2-2.2 2.2zm11.5-1.8c-1.4 0-2.8.6-3.3 1.9l1.7.7c.4-.7 1-.9 1.7-.9 1 0 1.9.6 2 1.6v.1c-.3-.2-1.1-.5-1.9-.5-1.8 0-3.6 1-3.6 2.8 0 1.7 1.5 2.8 3.1 2.8 1.3 0 1.9-.6 2.4-1.2h.1v1h1.8v-4.8c-.2-2.2-1.9-3.5-4-3.5zm-.2 6.9c-.6 0-1.5-.3-1.5-1.1 0-1 1.1-1.3 2-1.3.8 0 1.2.2 1.7.4-.2 1.2-1.2 2-2.2 2zm10.5-6.6l-2.1 5.4h-.1l-2.2-5.4h-2l3.3 7.6-1.9 4.2h1.9l5.1-11.8h-2zm-16.8 8h1.9V17.5h-1.9V30z"/>
+        <path fill="#D5C8FF" stroke="#36205D" d="M10.4 7.5c-.3.3-.5.8-.5 1.4V31c0 .6.2 1.1.5 1.4l.1.1 12.4-12.4v-.2L10.4 7.5zM27 24.3l-4.1-4.1V19.9l4.1-4.1.1.1 4.9 2.8c1.4.8 1.4 2.1 0 2.9l-5 2.7z"/>
+        <path fill="#D5C8FF" stroke="#36205D" d="M27.1 24.2L22.9 20 10.4 32.5c.5.5 1.2.5 2.1.1l14.6-8.4M27.1 15.8L12.5 7.5c-.9-.5-1.6-.4-2.1.1L22.9 20l4.2-4.2z"/>
+        <g fill="#000">
+            <path d="M27 24.1l-14.5 8.2c-.8.5-1.5.4-2 0l-.1.1.1.1c.5.4 1.2.5 2 0L27 24.1z" opacity=".2"/>
+            <path d="M10.4 32.3c-.3-.3-.4-.8-.4-1.4v.1c0 .6.2 1.1.5 1.4v-.1h-.1z" opacity=".12"/>
+        </g>
+        <path fill="#000" d="M32 21.3l-5 2.8.1.1 4.9-2.8c.7-.4 1-.9 1-1.4 0 .5-.4.9-1 1.3z" opacity=".12"/>
+        <path fill="#FFF" d="M12.5 7.6L32 18.7c.6.4 1 .8 1 1.3 0-.5-.3-1-1-1.4L12.5 7.5C11.1 6.7 10 7.4 10 9v.1c0-1.6 1.1-2.3 2.5-1.5z" opacity=".25"/>
+    </g>
+</svg>
diff --git a/website/client/assets/images/home/health-fitness.png b/website/client/assets/images/home/health-fitness.png
new file mode 100755
index 0000000000..0ad5f7c720
Binary files /dev/null and b/website/client/assets/images/home/health-fitness.png differ
diff --git a/website/client/assets/images/home/health-fitness@2x.png b/website/client/assets/images/home/health-fitness@2x.png
new file mode 100755
index 0000000000..d27db69210
Binary files /dev/null and b/website/client/assets/images/home/health-fitness@2x.png differ
diff --git a/website/client/assets/images/home/health-fitness@3x.png b/website/client/assets/images/home/health-fitness@3x.png
new file mode 100755
index 0000000000..81bbd97daa
Binary files /dev/null and b/website/client/assets/images/home/health-fitness@3x.png differ
diff --git a/website/client/assets/images/home/home-main.png b/website/client/assets/images/home/home-main.png
new file mode 100755
index 0000000000..f28102ccef
Binary files /dev/null and b/website/client/assets/images/home/home-main.png differ
diff --git a/website/client/assets/images/home/home-main@2x.png b/website/client/assets/images/home/home-main@2x.png
new file mode 100755
index 0000000000..23a022cb90
Binary files /dev/null and b/website/client/assets/images/home/home-main@2x.png differ
diff --git a/website/client/assets/images/home/home-main@3x.png b/website/client/assets/images/home/home-main@3x.png
new file mode 100755
index 0000000000..8b5163a935
Binary files /dev/null and b/website/client/assets/images/home/home-main@3x.png differ
diff --git a/website/client/assets/images/home/ios-app-store.svg b/website/client/assets/images/home/ios-app-store.svg
new file mode 100644
index 0000000000..7c3f49e39a
--- /dev/null
+++ b/website/client/assets/images/home/ios-app-store.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" viewBox="0 0 135 40">
+    <g fill="none" fill-rule="nonzero">
+        <path fill="#BDA8FF" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/>
+        <path fill="#36205D" d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/>
+        <g fill="#D5C8FF">
+            <path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/>
+        </g>
+        <g fill="#D5C8FF">
+            <path d="M53.645 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.662 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768.428.481.984.721 1.668.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.699 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.039 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.088 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.691 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401-.836-.934-1.254-2.113-1.254-3.534 0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zM112.621 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.156 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441v.001z"/>
+        </g>
+        <g fill="#D5C8FF">
+            <path d="M49.05 10.009c0 1.177-.353 2.063-1.058 2.658-.653.549-1.581.824-2.783.824-.596 0-1.106-.026-1.533-.078V6.982c.557-.09 1.157-.136 1.805-.136 1.145 0 2.008.249 2.59.747.652.563.979 1.368.979 2.416zm-1.105.029c0-.763-.202-1.348-.606-1.756-.404-.407-.994-.611-1.771-.611-.33 0-.611.022-.844.068v4.889c.129.02.365.029.708.029.802 0 1.421-.223 1.857-.669.436-.446.656-1.096.656-1.95zM54.909 11.037c0 .725-.207 1.319-.621 1.785-.434.479-1.009.718-1.727.718-.692 0-1.243-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794.424-.465.994-.698 1.712-.698.692 0 1.248.229 1.669.688.4.446.601 1.022.601 1.726zm-1.087.034c0-.435-.094-.808-.281-1.119-.22-.376-.533-.564-.94-.564-.421 0-.741.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .714-.191.94-.574.194-.317.291-.693.291-1.128zM62.765 8.719l-1.475 4.714h-.96l-.611-2.047a15.32 15.32 0 0 1-.379-1.523h-.019a11.15 11.15 0 0 1-.379 1.523l-.649 2.047h-.971l-1.387-4.714h1.077l.533 2.241c.129.53.235 1.035.32 1.513h.019c.078-.394.207-.896.389-1.503l.669-2.25h.854l.641 2.202c.155.537.281 1.054.378 1.552h.029c.071-.485.178-1.002.32-1.552l.572-2.202h1.029v-.001zM68.198 13.433H67.15v-2.7c0-.832-.316-1.248-.95-1.248a.946.946 0 0 0-.757.343 1.217 1.217 0 0 0-.291.808v2.796h-1.048v-3.366c0-.414-.013-.863-.038-1.349h.921l.049.737h.029c.122-.229.304-.418.543-.569.284-.176.602-.265.95-.265.44 0 .806.142 1.097.427.362.349.543.87.543 1.562v2.824zM71.088 13.433h-1.047V6.556h1.047zM77.258 11.037c0 .725-.207 1.319-.621 1.785-.434.479-1.01.718-1.727.718-.693 0-1.244-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794.424-.465.994-.698 1.711-.698.693 0 1.248.229 1.67.688.4.446.601 1.022.601 1.726zm-1.088.034c0-.435-.094-.808-.281-1.119-.219-.376-.533-.564-.939-.564-.422 0-.742.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .713-.191.939-.574.195-.317.291-.693.291-1.128zM82.33 13.433h-.941l-.078-.543h-.029c-.322.433-.781.65-1.377.65-.445 0-.805-.143-1.076-.427a1.339 1.339 0 0 1-.369-.96c0-.576.24-1.015.723-1.319.482-.304 1.16-.453 2.033-.446V10.3c0-.621-.326-.931-.979-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.232 0 1.85.65 1.85 1.95v1.736c0 .471.023.846.068 1.124zm-1.088-1.62v-.727c-1.156-.02-1.734.297-1.734.95 0 .246.066.43.201.553a.733.733 0 0 0 .512.184c.23 0 .445-.073.641-.218a.893.893 0 0 0 .38-.742zM88.285 13.433h-.93l-.049-.757h-.029c-.297.576-.803.864-1.514.864-.568 0-1.041-.223-1.416-.669-.375-.446-.562-1.025-.562-1.736 0-.763.203-1.381.611-1.853.395-.44.879-.66 1.455-.66.633 0 1.076.213 1.328.64h.02V6.556h1.049v5.607c0 .459.012.882.037 1.27zm-1.086-1.988v-.786a1.194 1.194 0 0 0-.408-.965 1.03 1.03 0 0 0-.701-.257c-.391 0-.697.155-.922.466-.223.311-.336.708-.336 1.193 0 .466.107.844.322 1.135.227.31.533.465.916.465.344 0 .619-.129.828-.388.202-.239.301-.527.301-.863zM97.248 11.037c0 .725-.207 1.319-.621 1.785-.434.479-1.008.718-1.727.718-.691 0-1.242-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794.424-.465.994-.698 1.713-.698.691 0 1.248.229 1.668.688.4.446.601 1.022.601 1.726zm-1.086.034c0-.435-.094-.808-.281-1.119-.221-.376-.533-.564-.941-.564-.42 0-.74.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .715-.191.941-.574.193-.317.291-.693.291-1.128zM102.883 13.433h-1.047v-2.7c0-.832-.316-1.248-.951-1.248a.942.942 0 0 0-.756.343 1.212 1.212 0 0 0-.291.808v2.796h-1.049v-3.366c0-.414-.012-.863-.037-1.349h.92l.049.737h.029a1.53 1.53 0 0 1 .543-.569c.285-.176.602-.265.951-.265.439 0 .805.142 1.096.427.363.349.543.87.543 1.562v2.824zM109.936 9.504h-1.154v2.29c0 .582.205.873.611.873.188 0 .344-.016.467-.049l.027.795c-.207.078-.479.117-.814.117-.414 0-.736-.126-.969-.378-.234-.252-.35-.676-.35-1.271V9.504h-.689v-.785h.689v-.864l1.027-.31v1.173h1.154v.786h.001zM115.484 13.433h-1.049v-2.68c0-.845-.316-1.268-.949-1.268-.486 0-.818.245-1 .735a1.317 1.317 0 0 0-.049.377v2.835h-1.047V6.556h1.047v2.841h.02c.33-.517.803-.775 1.416-.775.434 0 .793.142 1.078.427.355.355.533.883.533 1.581v2.803zM121.207 10.853c0 .188-.014.346-.039.475h-3.143c.014.466.164.821.455 1.067.266.22.609.33 1.029.33.465 0 .889-.074 1.271-.223l.164.728c-.447.194-.973.291-1.582.291-.73 0-1.305-.215-1.721-.645-.418-.43-.625-1.007-.625-1.731 0-.711.193-1.303.582-1.775.406-.504.955-.756 1.648-.756.678 0 1.193.252 1.541.756.281.4.42.895.42 1.483zm-1-.271a1.411 1.411 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.995.995 0 0 0-.834.427 1.586 1.586 0 0 0-.311.815h2.182z"/>
+        </g>
+    </g>
+</svg>
diff --git a/website/client/assets/images/home/iphones.svg b/website/client/assets/images/home/iphones.svg
new file mode 100644
index 0000000000..da70a7804f
--- /dev/null
+++ b/website/client/assets/images/home/iphones.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="444" height="528" viewBox="0 0 444 528">
+    <defs>
+        <linearGradient id="b" x1="100%" x2="0%" y1="100%" y2="0%">
+            <stop offset="0%" stop-color="#4F2A93"/>
+            <stop offset="100%" stop-color="#6133B4"/>
+        </linearGradient>
+        <rect id="a" width="216" height="384" rx="2"/>
+        <path id="c" d="M236.147 458.522c0 .69-.558 1.249-1.246 1.249H13.769a1.247 1.247 0 0 1-1.246-1.25V63.268c0-.69.557-1.249 1.246-1.249H234.9c.688 0 1.246.56 1.246 1.25v395.254z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(196 24)">
+            <rect width="243.6" height="480" fill="#D5C8FF" stroke="#9A62FF" stroke-width="8" rx="16"/>
+            <path fill="#9A62FF" d="M166.8 24a4.805 4.805 0 0 0-4.8 4.8c0 2.647 2.153 4.8 4.8 4.8s4.8-2.153 4.8-4.8-2.153-4.8-4.8-4.8m0 2.743a2.057 2.057 0 1 1 0 4.114 2.057 2.057 0 0 1 0-4.114"/>
+            <rect width="218.4" height="386.4" x="12.6" y="46.8" fill="#4F2A93" rx="2"/>
+            <rect width="42" height="4.8" x="100.8" y="14.4" fill="#9A62FF" rx="2.4"/>
+            <rect width="18" height="8.4" x="72" y="24.6" fill="#9A62FF" rx="4.2"/>
+            <rect width="42" height="4.8" x="100.8" y="460.8" fill="#9A62FF" rx="2.4"/>
+        </g>
+        <use fill="url(#b)" transform="translate(209.8 72)" xlink:href="#a"/>
+        <g fill="#FFF">
+            <path d="M347.027 292.118c1.58 2.1 1.695 3.312.125 3.312h-10.15c-3.058 0-3.692.362-3.644-.965.066-1.85.663-1.923 2.607-2.465 1.612-.451 1.033-3.32-.795-5.829-1.272-1.747-3.855-3.78-7.249-2.2-2.203 1.027-3.5 2.076-4.519 3.489-1.667 2.313-1.577 4.504 1.019 4.504 2.453 0 5.342-1.486 6.18.63 1.037 2.623.325 2.866-.182 2.866H314.15l.012.015c-8.715 0-17.42-.069-19.44-5.576-2.794-7.62 7.372-10.556 7.684-15.337.126-1.935-.961-2.83-2.318-2.83h-5.965v-3.626h-3.625V257.233h3.625v3.625h3.624v3.624h3.624v5.034s3.153 1.564 3.046 5.008c-.17 5.47-9.422 8.5-7.727 14.233 1.55 5.246 13.26 3.99 12.85.735l-.204-1.854c-.057-2.597-.462-6.071.08-9.147.853-4.836 3.861-9.02 9.102-9.058.955-.007 1.764-.203 1.764-1.006 0-.848-1.536-.828-2.617-.937-3.74-.381-8.394-1.634-12.46-4.979-2.408-1.98-6.158-8.227-3.706-7.77 1.514.284 2.849.4 4.023.396 1.23-.003 4.406-.348 4.406-1.1 0-1.04-1.836-.413-4.53-.677-3.22-.314-10.046-1.694-13.568-12.082-1.32-3.892-2.191-11.175-.048-8.818 12.357 13.59 16.555 11.377 23.642 16.024 3.12 2.045 5.15 6.93 6.969 6.523 1.185-.267.46-1.356.636-3.897.159-2.27 1.238-2.763-1.538-3.449-3.235-.799-6.464-4.345-4.353-4.295 2.11.051 3.637.045 5.487-.756 1.85-.8 6.372-4.244 9.108-2.865 2.735 1.38 5.035-.6 6.885-.25 2.686.51 3.378 4.207 3.03 6.37-.22 1.37-.22 1.368-1.97 1.267-3.585-.211-4.497 2.645-1.976 4.219 3.837 2.397 5.468 4.194 6.51 9.504.508 2.576.096 3.176-.758 2.702-.853-.474-2.322-.71-.284 3.983 2.038 4.693-1.28 10.195-2.37 10.811-1.091.617-.901 1.328-.901 1.328-.021 11.325 0 12.174 1.9 12.378 2.88.31 4.105-1.431 5.227.06z"/>
+            <path d="M286.875 256.725h3.624V253.1h-3.624z"/>
+        </g>
+        <g>
+            <g transform="translate(4 4)">
+                <path fill="#D5C8FF" d="M248.67 481.737c0 21.132-17.15 38.263-38.305 38.263H38.305C17.15 520 0 502.869 0 481.737V38.263C0 17.131 17.15 0 38.305 0h172.06c21.155 0 38.305 17.131 38.305 38.263v443.474z"/>
+                <path stroke="#9A62FF" stroke-width="8" d="M248.67 481.737c0 21.132-17.15 38.263-38.305 38.263H38.305C17.15 520 0 502.869 0 481.737V38.263C0 17.131 17.15 0 38.305 0h172.06c21.155 0 38.305 17.131 38.305 38.263v443.474z"/>
+                <path fill="#4F2A93" d="M237.34 459.707c0 .694-.564 1.256-1.26 1.256H12.59c-.696 0-1.26-.562-1.26-1.256V62.082c0-.694.564-1.256 1.26-1.256h223.49c.696 0 1.26.562 1.26 1.256v397.625z"/>
+                <path fill="#9A62FF" d="M145.505 32.202c0 1.317-.876 2.385-1.957 2.385h-37.83c-1.08 0-1.957-1.068-1.957-2.385 0-1.318.876-2.385 1.957-2.385h37.83c1.08 0 1.957 1.067 1.957 2.385M84.679 27.431c-2.63 0-4.77 2.14-4.77 4.77 0 2.632 2.14 4.771 4.77 4.771 2.63 0 4.77-2.14 4.77-4.77 0-2.63-2.14-4.77-4.77-4.77m0 2.725a2.044 2.044 0 1 1 0 4.09 2.044 2.044 0 0 1 0-4.09"/>
+                <path fill="#878190" d="M127.615 14.908a2.982 2.982 0 1 0-5.964 0 2.982 2.982 0 0 0 5.964 0"/>
+                <path stroke="#9A62FF" stroke-width="4" d="M140.734 487.798c0-8.892-7.209-16.1-16.101-16.1s-16.1 7.208-16.1 16.1c0 8.892 7.208 16.101 16.1 16.101 8.892 0 16.1-7.209 16.1-16.1"/>
+                <use fill="url(#b)" xlink:href="#c"/>
+            </g>
+            <g fill="#FFF">
+                <path d="M165.284 295.147c1.975 2.626 2.119 4.14.156 4.14h-12.688c-3.822 0-4.615.453-4.555-1.206.083-2.313.83-2.403 3.259-3.081 2.015-.564 1.292-4.15-.993-7.286-1.59-2.184-4.819-4.726-9.062-2.75-2.753 1.283-4.375 2.595-5.648 4.36-2.084 2.892-1.972 5.631 1.273 5.631 3.066 0 6.678-1.858 7.725.788 1.297 3.278.406 3.582-.228 3.582H124.19l.015.019c-10.894 0-21.776-.086-24.3-6.97-3.493-9.525 9.215-13.195 9.605-19.172.157-2.418-1.202-3.538-2.898-3.538h-7.456v-4.531h-4.532v-13.592h4.531v4.531h4.53v4.53h4.532V266.895s3.94 1.955 3.806 6.26c-.213 6.837-11.777 10.624-9.658 17.79 1.938 6.559 16.575 4.99 16.061.92l-.253-2.317c-.072-3.247-.579-7.59.099-11.434 1.067-6.045 4.827-11.275 11.378-11.323 1.194-.009 2.204-.254 2.204-1.257 0-1.06-1.92-1.035-3.271-1.172-4.675-.476-10.492-2.042-15.574-6.223-3.01-2.476-7.698-10.284-4.633-9.712 1.893.354 3.56.5 5.028.495 1.538-.004 5.508-.436 5.508-1.375 0-1.3-2.295-.517-5.661-.846-4.025-.393-12.559-2.118-16.962-15.103-1.65-4.865-2.739-13.97-.06-11.023 15.447 16.987 20.695 14.222 29.553 20.03 3.9 2.556 6.438 8.663 8.711 8.154 1.482-.334.575-1.695.796-4.871.198-2.84 1.547-3.454-1.923-4.311-4.044-.999-8.08-5.432-5.441-5.37 2.637.065 4.546.056 6.858-.945 2.313-1 7.966-5.305 11.385-3.58 3.42 1.724 6.294-.75 8.607-.312 3.357.637 4.222 5.257 3.786 7.96-.273 1.715-.273 1.712-2.46 1.584-4.482-.263-5.623 3.307-2.472 5.275 4.797 2.996 6.836 5.243 8.139 11.88.634 3.22.12 3.97-.948 3.378-1.066-.593-2.902-.89-.355 4.978 2.548 5.866-1.6 12.744-2.963 13.514-1.364.77-1.126 1.66-1.126 1.66-.026 14.156 0 15.217 2.374 15.472 3.601.388 5.132-1.789 6.535.076z"/>
+                <path d="M90.094 250.906h4.53v-4.53h-4.53z"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/website/client/assets/images/home/much-more.png b/website/client/assets/images/home/much-more.png
new file mode 100755
index 0000000000..0aa1f0f838
Binary files /dev/null and b/website/client/assets/images/home/much-more.png differ
diff --git a/website/client/assets/images/home/much-more@2x.png b/website/client/assets/images/home/much-more@2x.png
new file mode 100755
index 0000000000..c4d382b3a7
Binary files /dev/null and b/website/client/assets/images/home/much-more@2x.png differ
diff --git a/website/client/assets/images/home/much-more@3x.png b/website/client/assets/images/home/much-more@3x.png
new file mode 100755
index 0000000000..c0d2f78292
Binary files /dev/null and b/website/client/assets/images/home/much-more@3x.png differ
diff --git a/website/client/assets/images/home/pixel-horizontal-2.svg b/website/client/assets/images/home/pixel-horizontal-2.svg
new file mode 100644
index 0000000000..31c1a35fde
--- /dev/null
+++ b/website/client/assets/images/home/pixel-horizontal-2.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="180" viewBox="0 0 1440 180">
+    <path fill="#36205D" fill-rule="evenodd" d="M1440 90v90h-90V90h90zm-90 0v90h-90V90h90zm-90-90v90h-90V0h90zm-180 0v90h-90V0h90zm-90 90v90h-90V90h90zm-180 0v90h-90V90h90zm-90 0v90h-90V90h90zM630 0v90h-90V0h90zM360 90v90h-90V90h90zm180 0v90h-90V90h90zM180 0v90H90V0h90zM90 90v90H0V90h90z"/>
+</svg>
diff --git a/website/client/assets/images/home/pixel-horizontal-3.svg b/website/client/assets/images/home/pixel-horizontal-3.svg
new file mode 100644
index 0000000000..857f146055
--- /dev/null
+++ b/website/client/assets/images/home/pixel-horizontal-3.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="180" viewBox="0 0 1440 180">
+    <path fill="#271B3D" fill-rule="evenodd" d="M0 90h90v90H0V90zm90 0h90v90H90V90zm90-90h90v90h-90V0zm180 90h90v90h-90V90zm0-90h90v90h-90V0zm90 90h90v90h-90V90zm180 0h90v90h-90V90zm90 0h90v90h-90V90zm90-90h90v90h-90V0zm270 90h90v90h-90V90zm-180 0h90v90h-90V90zm360-90h90v90h-90V0zm90 90h90v90h-90V90z"/>
+</svg>
diff --git a/website/client/assets/images/home/pixel-horizontal.svg b/website/client/assets/images/home/pixel-horizontal.svg
new file mode 100644
index 0000000000..301e0bb0d1
--- /dev/null
+++ b/website/client/assets/images/home/pixel-horizontal.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="180" viewBox="0 0 1440 180">
+    <path fill-rule="evenodd" d="M1440 90h-90V0h90v90zm-270 0h-90V0h90v90zm90 90h-90V90h90v90zm-360 0h-90V90h90v90zm90-90h-90V0h90v90zm-180 0h-90V0h90v90zm-540 0h-90V0h90v90zm360 90h-90V90h90v90zM360 90h-90V0h90v90zm180 0h-90V0h90v90zm-360 90H90V90h90v90zM90 90H0V0h90v90z"/>
+</svg>
diff --git a/website/client/assets/images/home/school-work.png b/website/client/assets/images/home/school-work.png
new file mode 100755
index 0000000000..9fe1c2e308
Binary files /dev/null and b/website/client/assets/images/home/school-work.png differ
diff --git a/website/client/assets/images/home/school-work@2x.png b/website/client/assets/images/home/school-work@2x.png
new file mode 100755
index 0000000000..43b64b5c78
Binary files /dev/null and b/website/client/assets/images/home/school-work@2x.png differ
diff --git a/website/client/assets/images/home/school-work@3x.png b/website/client/assets/images/home/school-work@3x.png
new file mode 100755
index 0000000000..1c330bedf5
Binary files /dev/null and b/website/client/assets/images/home/school-work@3x.png differ
diff --git a/website/client/assets/images/home/spacer.svg b/website/client/assets/images/home/spacer.svg
new file mode 100644
index 0000000000..0c240f574c
--- /dev/null
+++ b/website/client/assets/images/home/spacer.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="32" viewBox="0 0 30 32">
+    <g fill="none" fill-rule="evenodd" stroke="#FFF" stroke-width="6">
+        <path d="M27 15L15 27 3 15M23 3l-8 8-8-8"/>
+    </g>
+</svg>
diff --git a/website/client/assets/images/home/track-habits.png b/website/client/assets/images/home/track-habits.png
new file mode 100755
index 0000000000..d84a6b5563
Binary files /dev/null and b/website/client/assets/images/home/track-habits.png differ
diff --git a/website/client/assets/images/home/track-habits@2x.png b/website/client/assets/images/home/track-habits@2x.png
new file mode 100755
index 0000000000..ae021b5cd4
Binary files /dev/null and b/website/client/assets/images/home/track-habits@2x.png differ
diff --git a/website/client/assets/images/home/track-habits@3x.png b/website/client/assets/images/home/track-habits@3x.png
new file mode 100755
index 0000000000..bfaa4f3b65
Binary files /dev/null and b/website/client/assets/images/home/track-habits@3x.png differ
diff --git a/website/client/assets/svg/amazonpay.svg b/website/client/assets/svg/amazonpay.svg
new file mode 100644
index 0000000000..76bd1f66c4
--- /dev/null
+++ b/website/client/assets/svg/amazonpay.svg
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-258 396.9 91.3 27.6" style="enable-background:new -258 396.9 91.3 27.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#333E48;}
+	.st1{fill:#F39719;}
+</style>
+<title>Zeichenfläche 1</title>
+<g id="amazon_pay">
+	<path class="st0" d="M-238.4,404.3c1.1,0.1,2,0.9,2.2,2c0,0.3,0,0.6,0,0.9c0,2.1,0,4.2,0,6.3c0,0.4-0.1,0.5-0.5,0.5h-1.4
+		c-0.3,0-0.4-0.1-0.4-0.4c0-2,0-3.9,0-5.9c0-0.1,0-0.2,0-0.4c0-0.6-0.5-1-1.1-0.9c-0.1,0-0.2,0-0.3,0.1c-0.5,0.2-0.8,0.7-0.8,1.2
+		c0,0.3,0,0.6,0,1c0,1.6,0,3.2,0,4.9c0,0.4-0.1,0.5-0.5,0.5h-1.6c-0.3,0-0.4-0.1-0.4-0.4c0-1.9,0-3.7,0-5.6c0-0.3,0-0.6-0.1-0.8
+		c-0.1-0.4-0.4-0.7-0.8-0.7c-0.5-0.1-0.9,0.1-1.1,0.6c-0.2,0.4-0.3,0.8-0.2,1.2c0,1.8,0,3.5,0,5.3c0,0.1,0,0.1,0,0.2
+		c0,0.2-0.1,0.3-0.3,0.4c0,0,0,0,0,0h-1.7c-0.2,0-0.3-0.1-0.3-0.3c0,0,0,0,0-0.1c0-3,0-5.9,0-8.8c0-0.2,0.1-0.3,0.3-0.4
+		c0,0,0.1,0,0.1,0h1.5c0.2,0,0.3,0.1,0.4,0.3c0,0,0,0.1,0,0.1c0,0.4,0,0.7,0,1.1l0.1-0.1c0.3-0.8,1.1-1.4,2-1.5c1-0.1,2,0.4,2.4,1.3
+		l0.1,0.3l0,0l0.1-0.1C-240.6,404.7-239.5,404.1-238.4,404.3z"/>
+	<path class="st0" d="M-230.2,404.3c0.5,0,0.9,0.1,1.3,0.3c1,0.3,1.6,1.2,1.7,2.2c0,0.4,0,0.7,0,1.1c0,1,0,2,0,3
+		c0,0.5,0.2,1.1,0.5,1.5c0.4,0.5,0.4,0.5-0.1,0.9l-1,0.9c-0.2,0.2-0.4,0.2-0.6,0c-0.2-0.2-0.5-0.5-0.7-0.8c-0.1-0.1-0.1-0.2-0.2-0.3
+		l-0.4,0.3c-0.9,0.8-2.1,1.2-3.3,0.8c-0.9-0.2-1.6-0.9-1.8-1.8c-0.3-1.1,0-2.2,0.8-3c0.5-0.5,1.1-0.8,1.8-0.9
+		c0.7-0.1,1.5-0.2,2.2-0.3c0.1,0,0.2-0.1,0.2-0.2c0-0.2,0-0.5,0-0.8c0-0.6-0.4-1-1-1c-0.7-0.1-1.4,0.3-1.6,1
+		c-0.1,0.3-0.2,0.3-0.4,0.3l-1.5-0.2c-0.3,0-0.4-0.2-0.3-0.4c0.3-1.3,1.3-2.2,2.5-2.4C-231.3,404.3-230.7,404.2-230.2,404.3z
+		 M-229.5,410.1c0-0.1,0-0.3,0-0.5c0-0.2,0-0.2-0.1-0.2c-0.3,0-0.7,0-1,0.1c-0.9,0.1-1.6,0.8-1.5,1.7c0,0.1,0,0.3,0.1,0.4
+		c0.1,0.5,0.6,0.9,1.2,0.8c0,0,0,0,0.1,0c0.4-0.1,0.8-0.4,1-0.8C-229.6,411.1-229.5,410.6-229.5,410.1z"/>
+	<path class="st0" d="M-253.1,404.2c0.3,0,0.6,0.1,0.9,0.2c0.5,0.1,1,0.4,1.4,0.7c0.5,0.5,0.8,1.1,0.8,1.8c0,1.2,0,2.5,0,3.7
+		c0,0.6,0.2,1.2,0.6,1.7l0.1,0.2c0.1,0.1,0.1,0.3,0,0.4c0,0,0,0-0.1,0.1l-1.2,1c-0.2,0.2-0.4,0.2-0.6,0c-0.2-0.2-0.6-0.7-0.9-1
+		l-0.1,0.1c-0.5,0.5-1.2,0.9-1.9,1c-0.5,0.1-1.1,0.1-1.7,0c-1-0.2-1.7-1.1-1.8-2.1c0-0.1,0-0.1,0-0.2v-0.6c0,0,0-0.1,0-0.1
+		c0.1-0.7,0.4-1.3,0.9-1.8c0.6-0.6,1.4-0.9,2.2-1c0.6-0.1,1.3-0.2,1.9-0.2c0.1,0,0.2-0.1,0.2-0.2c0-0.1,0-0.4,0-0.7
+		c0-0.4-0.2-0.7-0.5-0.9c-0.7-0.4-1.6-0.2-2,0.5c0,0.1-0.1,0.2-0.1,0.3c-0.1,0.4-0.2,0.4-0.5,0.4l-1.3-0.1c-0.3,0-0.4-0.2-0.4-0.5
+		c0.2-1.2,1.2-2.1,2.4-2.4c0.4-0.1,0.8-0.1,1.1-0.2L-253.1,404.2z M-252.5,409.4c-0.5,0-0.9,0-1.4,0.1c-0.8,0.2-1.4,1-1.3,1.8
+		c0,0.6,0.5,1.1,1.1,1.1c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.4-0.4,0.5-0.6C-252.5,410.9-252.4,410.2-252.5,409.4L-252.5,409.4z"/>
+	<path class="st0" d="M-203.3,404.3l0.4,0.1c0.9,0.2,1.6,1,1.7,2c0.1,0.5,0.1,0.9,0.1,1.4c0,2,0,4,0,6c0,0.3-0.1,0.4-0.4,0.4h-1.6
+		c-0.3,0-0.4-0.1-0.4-0.4c0-1.8,0-3.6,0-5.4c0-0.3,0-0.7-0.1-1c-0.1-0.5-0.6-0.9-1.2-0.8c-0.2,0-0.5,0.2-0.6,0.4
+		c-0.3,0.3-0.4,0.7-0.5,1.1c0,0.4-0.1,0.7-0.1,1.1c0,1.5,0,3,0,4.5c0,0.4-0.1,0.5-0.5,0.5h-1.4c-0.3,0-0.4-0.1-0.4-0.4
+		c0-2.9,0-5.8,0-8.8c0-0.3,0.1-0.4,0.4-0.4h1.5c0.3,0,0.4,0.1,0.4,0.4s0,0.8,0,1.2l0.1-0.1c0.2-0.3,0.3-0.6,0.5-0.9
+		C-204.9,404.4-204.1,404.1-203.3,404.3z"/>
+	<path class="st0" d="M-213.3,404.2c1.4,0.2,2.5,1,3.1,2.3c0.5,1.1,0.7,2.4,0.5,3.6c-0.1,1-0.4,1.9-1,2.6c-1.2,1.6-3.5,2-5.1,0.8
+		c-0.2-0.1-0.3-0.2-0.4-0.4c-0.6-0.7-1-1.6-1.2-2.5c-0.2-1.1-0.2-2.2,0.1-3.3c0.2-1.1,0.9-2.1,1.9-2.7
+		C-214.7,404.3-214,404.2-213.3,404.2z M-215,409.4c0,0.2,0,0.5,0,0.8c0,0.5,0.1,1.1,0.4,1.6c0.2,0.5,0.9,0.8,1.4,0.5
+		c0.2-0.1,0.4-0.3,0.5-0.5c0.2-0.3,0.3-0.6,0.3-0.9c0.1-0.9,0.2-1.7,0.1-2.6c0-0.5-0.1-1-0.3-1.5c-0.1-0.4-0.5-0.8-1-0.8
+		c-0.5,0-0.9,0.2-1.1,0.6c-0.1,0.2-0.2,0.3-0.2,0.5C-214.9,407.9-215,408.6-215,409.4L-215,409.4z"/>
+	<path class="st1" d="M-234.8,421.2c-0.8,0-1.7-0.1-2.5-0.1c-1.2-0.1-2.4-0.4-3.6-0.7c-2.2-0.6-4.3-1.6-6.2-2.9
+		c-0.8-0.6-1.6-1.2-2.4-1.8l-0.1-0.1c-0.1-0.1-0.1-0.2,0-0.3c0.1-0.1,0.2-0.1,0.3-0.1l1.1,0.6c2.1,1.1,4.3,1.9,6.6,2.5
+		c1.1,0.3,2.1,0.5,3.2,0.6c0.8,0.1,1.6,0.1,2.4,0.2c0.6,0,1.1,0.1,1.7,0.1c0.6,0,1.4,0,2.1-0.1c1.4-0.1,2.7-0.3,4.1-0.6
+		c1.7-0.4,3.4-0.9,5-1.6c0.1-0.1,0.2-0.1,0.4-0.1c0.2,0,0.3,0.1,0.4,0.3c0.1,0.2,0,0.4-0.1,0.4c-0.3,0.2-0.5,0.4-0.8,0.6
+		c-2,1.2-4.1,2.1-6.4,2.6c-1,0.3-2.1,0.4-3.2,0.5l-1.2,0.1L-234.8,421.2z"/>
+	<path class="st0" d="M-193.9,405.5c0.2-0.2,0.4-0.3,0.7-0.5c1.1-0.8,2.5-1,3.8-0.6c1.1,0.4,1.9,1.2,2.2,2.3
+		c0.4,1.1,0.5,2.2,0.3,3.3c-0.1,0.9-0.3,1.7-0.8,2.4c-0.6,1.1-1.8,1.8-3.1,1.8c-1.1,0.1-2.1-0.3-2.9-1l-0.1-0.1v0.2c0,1.3,0,2.7,0,4
+		c0,0.4-0.1,0.5-0.5,0.5h-0.8c-0.4,0-0.5-0.1-0.5-0.5c0-3.3,0-6.5,0-9.8c0-0.9,0-1.8,0-2.7c0-0.4,0.1-0.5,0.5-0.5h0.7
+		c0.2,0,0.4,0.1,0.4,0.3c0,0,0,0,0,0C-194,405.1-194,405.3-193.9,405.5z M-193.8,409.3c0,0.8,0,1.6,0,2.5c0,0.1,0,0.2,0.1,0.2
+		c0.7,0.5,1.5,0.8,2.3,0.8c1.1,0.1,2.1-0.5,2.4-1.6c0.4-1.2,0.4-2.6,0-3.8c-0.2-0.9-0.9-1.5-1.8-1.6c-1-0.1-2.1,0.1-2.9,0.8
+		c-0.1,0.1-0.1,0.1-0.1,0.2C-193.8,407.6-193.8,408.4-193.8,409.3z"/>
+	<path class="st0" d="M-222,410.9c0.4,0,0.7,0,1.1,0.1c0.8,0.1,1.5,0.3,2.2,0.6c0.2,0.1,0.4,0.4,0.4,0.6c0,0.4,0,0.8,0,1.2
+		c0,0.4-0.2,0.5-0.5,0.3c-1.7-0.8-3.7-0.9-5.5-0.2c-0.2,0.1-0.3,0.1-0.5,0.2c-0.1,0.1-0.3,0-0.4-0.1c0,0,0-0.1,0-0.1
+		c0-0.6,0-1.2,0-1.8c0-0.2,0.1-0.4,0.3-0.6c1.1-1.5,2.1-3.1,3.2-4.6l0.1-0.2h-2.9c-0.3,0-0.4-0.1-0.4-0.4c0-0.3,0-0.7,0-1.1
+		c0-0.4,0.1-0.4,0.4-0.4h5.6c0.3,0,0.4,0.1,0.4,0.4s0,0.5,0,0.7c0,0.4-0.1,0.7-0.3,1c-1,1.4-2,2.8-2.9,4.2L-222,410.9z"/>
+	<path class="st0" d="M-179.4,408.8c0-0.7,0-1.4-0.1-2.1c-0.2-0.6-0.7-1-1.4-1c-1.2-0.1-2.3,0.1-3.4,0.4c-0.4,0.1-0.5,0-0.5-0.4
+		c0-0.1,0-0.3,0-0.4c0-0.3,0.1-0.5,0.4-0.6c0.7-0.3,1.5-0.5,2.3-0.5c0.8-0.1,1.6-0.1,2.4,0.1c1.1,0.2,2,1.2,2,2.3c0,0.3,0,0.5,0,0.8
+		c0,2,0,4.1,0,6.1c0,0.4-0.1,0.5-0.5,0.5h-0.7c-0.2,0-0.4-0.1-0.4-0.3c0,0,0,0,0,0c0-0.1,0-0.2,0-0.3l-0.1-0.3l-0.2,0.2
+		c-0.9,0.7-2,1.1-3.2,1.1c-1.3,0-2.4-0.9-2.6-2.2c-0.3-1.5,0.6-3.1,2.1-3.4c0.9-0.2,1.8-0.3,2.7-0.1
+		C-180.2,408.7-179.8,408.7-179.4,408.8z M-179.4,411c0-0.3,0-0.5,0-0.8c0-0.1,0-0.2-0.1-0.2c0,0,0,0,0,0c-0.5-0.1-1-0.2-1.4-0.2
+		c-0.5-0.1-1.1,0-1.6,0.1c-0.5,0.2-0.9,0.6-1,1.2c0,0.2,0,0.4,0,0.6c0,0.6,0.5,1.1,1,1.2c0.2,0,0.5,0,0.7,0c0.8-0.1,1.6-0.4,2.2-0.9
+		c0.1-0.1,0.1-0.1,0.1-0.2C-179.4,411.5-179.4,411.3-179.4,411L-179.4,411z"/>
+	<path class="st0" d="M-171.8,412.4l1-2.7l1.6-4.6c0-0.1,0.1-0.2,0.1-0.3c0.1-0.2,0.3-0.3,0.5-0.3h1.2c0.2,0,0.3,0.1,0.2,0.3
+		c0,0.1,0,0.2-0.1,0.3l-4.3,10.9c-0.2,0.5-0.5,1-0.9,1.4c-0.4,0.5-1,0.8-1.6,0.8c-0.5,0.1-1,0-1.4-0.1c-0.3,0-0.4-0.2-0.4-0.5
+		c0,0,0,0,0,0c0-0.2,0-0.4,0-0.6s0.1-0.3,0.3-0.3c0.2,0,0.7,0.1,1,0c0.5,0,1-0.2,1.2-0.7c0.3-0.6,0.5-1.2,0.7-1.8c0-0.1,0-0.1,0-0.2
+		l-3.6-8.8c-0.1-0.1-0.1-0.3-0.1-0.4c0-0.2,0-0.3,0.2-0.3h1.3c0.2,0,0.4,0.2,0.4,0.4l0.8,2.1l1.8,5.1L-171.8,412.4z"/>
+	<path class="st1" d="M-221.7,414.6c0.5,0,0.9,0.1,1.4,0.2c0.5,0.1,0.5,0.2,0.5,0.7c0,1.6-0.6,3.1-1.7,4.3c-0.1,0.1-0.2,0.2-0.3,0.2
+		c-0.1,0-0.2,0-0.2,0c0,0,0-0.1,0-0.2c0.1-0.4,0.3-0.9,0.5-1.3c0.2-0.6,0.3-1.2,0.5-1.8c0-0.1,0-0.2,0-0.3c0-0.3-0.2-0.5-0.5-0.6
+		c0,0,0,0,0,0c-0.5-0.1-1-0.1-1.5-0.1c-0.6,0-1.1,0.1-1.7,0.1c-0.1,0-0.3,0-0.4,0c-0.2,0-0.2-0.1-0.1-0.3c0.1-0.1,0.1-0.1,0.2-0.2
+		c0.6-0.4,1.4-0.7,2.1-0.8C-222.5,414.5-222.1,414.5-221.7,414.6z"/>
+</g>
+</svg>
diff --git a/website/client/assets/svg/group.svg b/website/client/assets/svg/group.svg
new file mode 100644
index 0000000000..4bfabce2e3
--- /dev/null
+++ b/website/client/assets/svg/group.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="34" height="24" viewBox="0 0 34 24">
+    <g fill="#4E4A57" fill-rule="nonzero">
+        <path d="M0 20.776c0 1.646 1.182 2.98 2.641 2.98H31.11c1.459 0 2.641-1.333 2.641-2.98V8.818H0v11.958zM31.109.244H2.64C1.182.244 0 1.577 0 3.224v.892h33.75v-.892c0-1.647-1.182-2.98-2.641-2.98z"/>
+    </g>
+</svg>
diff --git a/website/client/components/appMenu.vue b/website/client/components/appMenu.vue
index ff5f15c83c..41d7052758 100644
--- a/website/client/components/appMenu.vue
+++ b/website/client/components/appMenu.vue
@@ -3,10 +3,10 @@ div
   inbox-modal
   creator-intro
   profile
-  nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
+  nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-lg
     .navbar-header
       .logo.svg-icon(v-html="icons.logo")
-    .collapse.navbar-collapse
+    b-collapse#nav_collapse.collapse.navbar-collapse(is-nav)
       ul.navbar-nav.mr-auto
         router-link.nav-item(tag="li", :to="{name: 'tasks'}", exact)
           a.nav-link(v-once) {{ $t('tasks') }}
@@ -75,12 +75,27 @@ div
           a.dropdown-item(@click='showProfile("profile")') {{ $t('profile') }}
           router-link.dropdown-item(:to="{name: 'site'}") {{ $t('settings') }}
           a.nav-link.dropdown-item(to="/", @click.prevent='logout()') {{ $t('logout') }}
+    b-nav-toggle(target='nav_collapse')
 </template>
 
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
   @import '~client/assets/scss/utils.scss';
 
+  /* Less than Desktops and laptops ----------- */
+  @media only screen  and (max-width : 1224px) {
+    #nav_collapse {
+      background: $purple-100;
+      margin-top: 1em;
+      margin-left: 70%;
+      padding-bottom: 1em;
+
+      a {
+        padding: .5em !important;
+      }
+    }
+  }
+
   nav.navbar {
     background: $purple-100 url(~assets/svg/for-css/bits.svg) right no-repeat;
     padding-left: 25px;
@@ -223,6 +238,9 @@ div
 </style>
 
 <script>
+import bNavToggle from 'bootstrap-vue/lib/components/nav-toggle';
+import bCollapse from 'bootstrap-vue/lib/components/collapse';
+
 import { mapState, mapGetters } from 'client/libs/store';
 import * as Analytics from 'client/libs/analytics';
 import gemIcon from 'assets/svg/gem.svg';
@@ -241,6 +259,8 @@ export default {
     notificationMenu,
     creatorIntro,
     profile,
+    bNavToggle,
+    bCollapse,
   },
   data () {
     return {
diff --git a/website/client/components/auth/registerLogin.vue b/website/client/components/auth/registerLogin.vue
index a78693c6c5..ea7296b50f 100644
--- a/website/client/components/auth/registerLogin.vue
+++ b/website/client/components/auth/registerLogin.vue
@@ -290,6 +290,11 @@ export default {
         passwordConfirm: this.passwordConfirm,
       });
 
+      if (this.$store.state.afterLoginRedirect) {
+        window.location.href = this.$store.state.afterLoginRedirect;
+        return;
+      }
+
       // @TODO do not reload entire page
       // problem is that app.vue created hook should be called again
       // after user is logged in / just signed up
@@ -302,6 +307,11 @@ export default {
         password: this.password,
       });
 
+      if (this.$store.state.afterLoginRedirect) {
+        window.location.href = this.$store.state.afterLoginRedirect;
+        return;
+      }
+
       // @TODO do not reload entire page
       // problem is that app.vue created hook should be called again
       // after user is logged in / just signed up
diff --git a/website/client/components/challenges/challengeDetail.vue b/website/client/components/challenges/challengeDetail.vue
index d97cb1b7c6..cb820acc14 100644
--- a/website/client/components/challenges/challengeDetail.vue
+++ b/website/client/components/challenges/challengeDetail.vue
@@ -336,9 +336,7 @@ export default {
     async joinChallenge () {
       this.user.challenges.push(this.searchId);
       await this.$store.dispatch('challenges:joinChallenge', {challengeId: this.searchId});
-      // @TODO: this doesn't work because of asyncresource
-      let tasks = await this.$store.dispatch('tasks:fetchUserTasks');
-      this.$store.state.tasks.data = tasks.data;
+      await this.$store.dispatch('tasks:fetchUserTasks', {forceLoad: true});
     },
     async leaveChallenge () {
       let keepChallenge = confirm('Do you want to keep challenge tasks?');
@@ -353,6 +351,7 @@ export default {
         challengeId: this.searchId,
         keep,
       });
+      await this.$store.dispatch('tasks:fetchUserTasks', {forceLoad: true});
     },
     closeChallenge () {
       this.$root.$emit('show::modal', 'close-challenge-modal');
diff --git a/website/client/components/challenges/groupChallenges.vue b/website/client/components/challenges/groupChallenges.vue
index 08dc4f6b85..90434284f1 100644
--- a/website/client/components/challenges/groupChallenges.vue
+++ b/website/client/components/challenges/groupChallenges.vue
@@ -106,14 +106,20 @@ export default {
       groupIdForChallenges: '',
     };
   },
+  mounted () {
+    this.loadChallenges();
+  },
   watch: {
     async groupId () {
+      this.loadChallenges();
+    },
+  },
+  methods: {
+    async loadChallenges () {
       this.groupIdForChallenges = this.groupId;
       if (this.groupId === 'party' && this.user.party._id) this.groupIdForChallenges = this.user.party._id;
       this.challenges = await this.$store.dispatch('challenges:getGroupChallenges', {groupId: this.groupIdForChallenges});
     },
-  },
-  methods: {
     createChallenge () {
       this.$root.$emit('show::modal', 'challenge-modal');
     },
diff --git a/website/client/components/creatorIntro.vue b/website/client/components/creatorIntro.vue
index 500014540e..d550907ec8 100644
--- a/website/client/components/creatorIntro.vue
+++ b/website/client/components/creatorIntro.vue
@@ -46,15 +46,21 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
       .row(v-if='activeSubPage === "size"')
         .col-12.customize-options.size-options
           .option(v-for='option in ["slim", "broad"]', :class='{active: user.preferences.size === option}')
-            .sprite(:class="`${option}_shirt_black`", @click='set({"preferences.size": option})')
+            .sprite.customize-option(:class="`${option}_shirt_black`", @click='set({"preferences.size": option})')
       .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}')
-            .sprite(:class="`slim_shirt_${option}`", @click='set({"preferences.shirt": option})')
-        .col-12.customize-options(v-if='editing')
-          .option(v-for='option in ["convict", "cross", "fire", "horizon", "ocean", "purple", "rainbow", "redblue", "thunder", "tropical", "zombie"]',
+          .option(v-for='option in ["black", "blue", "green", "pink", "white", "yellow"]',
             :class='{active: user.preferences.shirt === option}')
-            .sprite(:class="`broad_shirt_${option}`", @click='set({"preferences.shirt": option})')
+            .sprite.customize-option(:class="`slim_shirt_${option}`", @click='set({"preferences.shirt": option})')
+        .col-12.customize-options(v-if='editing')
+          .option(v-for='option in specialShirts',
+            :class='{active: user.preferences.shirt === option, locked: !user.purchased.shirt[option]}')
+            .sprite.customize-option(:class="`broad_shirt_${option}`", @click='user.purchased.shirt[option] ? set({"preferences.shirt": option}) : unlock(`shirt.${option}`)')
+            .gem-lock(v-if='!user.purchased.shirt[option]')
+              .svg-icon.gem(v-html='icons.gem')
+              span 2
+        .col-12.text-center
+          button.btn.btn-secondary(@click='unlock(`shirt.${specialShirts.join(",shirt.")}`)') Purchase All
 
     .section.customize-section(v-if='activeTopPage === "skin"')
       .row.sub-menu.col-6.offset-3.text-center
@@ -64,19 +70,25 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
         .col-12.customize-options
           .option(v-for='option in ["ddc994", "f5a76e", "ea8349", "c06534", "98461a", "915533", "c3e1dc", "6bd049"]',
             :class='{active: user.preferences.skin === option}')
-            .skin.sprite(:class="`skin_${option}`", @click='set({"preferences.skin": option})')
+            .skin.sprite.customize-option(:class="`skin_${option}`", @click='set({"preferences.skin": option})')
       .row(v-if='editing')
         .col-12.customize-options
           .option(v-for='option in ["eb052b", "f69922", "f5d70f", "0ff591", "2b43f6", "d7a9f7", "800ed0", "rainbow"]',
-            :class='{active: user.preferences.skin === option}')
-            .skin.sprite(:class="`skin_${option}`", @click='set({"preferences.skin": option})')
+            :class='{active: user.preferences.skin === option, locked: !user.purchased.skin[option]}')
+            .skin.sprite.customize-option(:class="`skin_${option}`", @click='user.purchased.skin[option] ? set({"preferences.skin": option}) : unlock(`skin.${option}`)')
+            .gem-lock(v-if='!user.purchased.skin[option]')
+              .svg-icon.gem(v-html='icons.gem')
+              span 2
       .row(v-if='editing')
         .col-12.customize-options
           .option(v-for='option in ["bear", "cactus", "fox", "lion", "panda", "pig", "tiger", "wolf"]',
-            :class='{active: user.preferences.skin === option}')
-            .skin.sprite(:class="`skin_${option}`", @click='set({"preferences.skin": option})')
+            :class='{active: user.preferences.skin === option, locked: !user.purchased.skin[option]}')
+            .skin.sprite.customize-option(:class="`skin_${option}`", @click='user.purchased.skin[option] ? set({"preferences.skin": option}) : unlock(`skin.${option}`)')
+            .gem-lock(v-if='!user.purchased.skin[option]')
+              .svg-icon.gem(v-html='icons.gem')
+              span 2
 
-    .section.customize-section(v-if='activeTopPage === "hair"')
+    #hair.section.customize-section(v-if='activeTopPage === "hair"')
       .row.sub-menu.col-6.offset-3.text-center
           .col-2.offset-3.text-center.sub-menu-item(@click='changeSubPage("color")', :class='{active: activeSubPage === "color"}')
             strong(v-once) {{$t('color')}}
@@ -88,45 +100,62 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
         .col-12.customize-options
           .option(v-for='option in ["white", "brown", "blond", "red", "black"]',
             :class='{active: user.preferences.hair.color === option}')
-            .color-bangs.sprite(:class="`hair_bangs_1_${option}`", @click='set({"preferences.hair.color": option})')
+            .color-bangs.sprite.customize-option(:class="`hair_bangs_1_${option}`", @click='set({"preferences.hair.color": option})')
         .col-12.customize-options(v-if='editing')
           .option(v-for='option in ["rainbow", "yellow", "green", "purple", "blue", "TRUred"]',
-            :class='{active: user.preferences.hair.color === option}')
-            .color-bangs.sprite(:class="`hair_bangs_1_${option}`", @click='set({"preferences.hair.color": option})')
-
-      .row(v-if='activeSubPage === "bangs"')
+            :class='{active: user.preferences.hair.color === option, locked: !user.purchased.hair.color || !user.purchased.hair.color[option]}')
+            .color-bangs.sprite.customize-option(:class="`hair_bangs_1_${option}`", @click='user.purchased.hair.color && user.purchased.hair.color[option] ? set({"preferences.hair.color": option}) : unlock(`skin.${option}`)')
+            .gem-lock(v-if='!user.purchased.hair.color || !user.purchased.hair.color[option]')
+              .svg-icon.gem(v-html='icons.gem')
+              span 2
+      #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}')
-            .bangs.sprite(:class="`hair_bangs_${option}_${user.preferences.hair.color}`", @click='set({"preferences.hair.bangs": option})')
-      .row(v-if='activeSubPage === "ponytail"')
+            .bangs.sprite.customize-option(:class="`hair_bangs_${option}_${user.preferences.hair.color}`", @click='set({"preferences.hair.bangs": option})')
+      #base-hair.row(v-if='activeSubPage === "ponytail"')
         .col-12.customize-options
           .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 ["1", "3"]',
             :class='{active: user.preferences.hair.base === option}')
-            .base.sprite(:class="`hair_base_${option}_${user.preferences.hair.color}`", @click='set({"preferences.hair.base": option})')
+            .base.sprite.customize-option(:class="`hair_base_${option}_${user.preferences.hair.color}`", @click='set({"preferences.hair.base": option})')
         .col-12.customize-options(v-if='editing')
           .option(v-for='option in ["2", "4", "5", "6", "7", "8"]',
-            :class='{active: user.preferences.hair.base === option}')
-            .base.sprite(:class="`hair_base_${option}_${user.preferences.hair.color}`", @click='set({"preferences.hair.base": option})')
+            :class='{active: user.preferences.hair.base === option, locked: !user.purchased.hair.base || !user.purchased.hair.base[option]}')
+            .base.sprite.customize-option(:class="`hair_base_${option}_${user.preferences.hair.color}`", @click='set({"preferences.hair.base": option})')
+            .gem-lock(v-if='!user.purchased.hair.base || !user.purchased.hair.base[option]')
+              .svg-icon.gem(v-html='icons.gem')
+              span 2
         .col-12.customize-options(v-if='editing')
           .option(v-for='option in ["9", "10", "11", "12", "13", "14"]',
-            :class='{active: user.preferences.hair.base === option}')
-            .base.sprite(:class="`hair_base_${option}_${user.preferences.hair.color}`", @click='set({"preferences.hair.base": option})')
+            :class='{active: user.preferences.hair.base === option, locked: !user.purchased.hair.base || !user.purchased.hair.base[option]}')
+            .base.sprite.customize-option(:class="`hair_base_${option}_${user.preferences.hair.color}`", @click='set({"preferences.hair.base": option})')
+            .gem-lock(v-if='!user.purchased.hair.base || !user.purchased.hair.base[option]')
+              .svg-icon.gem(v-html='icons.gem')
+              span 2
         .col-12.customize-options(v-if='editing')
           .option(v-for='option in ["15", "16", "17", "18", "19", "20"]',
-            :class='{active: user.preferences.hair.base === option}')
-            .base.sprite(:class="`hair_base_${option}_${user.preferences.hair.color}`", @click='set({"preferences.hair.base": option})')
+            :class='{active: user.preferences.hair.base === option, locked: !user.purchased.hair.base || !user.purchased.hair.base[option]}')
+            .base.sprite.customize-option(:class="`hair_base_${option}_${user.preferences.hair.color}`", @click='set({"preferences.hair.base": option})')
+            .gem-lock(v-if='!user.purchased.hair.base || !user.purchased.hair.base[option]')
+              .svg-icon.gem(v-html='icons.gem')
+              span 2
         .col-12.customize-options(v-if='editing')
           .option(v-for='option in ["1", "2", "3"]',
-            :class='{active: user.preferences.hair.beard === option}')
-            .base.sprite(:class="`hair_beard_${option}_${user.preferences.hair.color}`", @click='set({"preferences.hair.beard": option})')
+            :class='{active: user.preferences.hair.beard === option, locked: !user.purchased.hair.base || !user.purchased.hair.base[option]}')
+            .base.sprite.customize-option(:class="`hair_beard_${option}_${user.preferences.hair.color}`", @click='set({"preferences.hair.beard": option})')
+            .gem-lock(v-if='!user.purchased.hair.base || !user.purchased.hair.base[option]')
+              .svg-icon.gem(v-html='icons.gem')
+              span 2
         .col-12.customize-options(v-if='editing')
           .option(v-for='option in ["1", "2"]',
-            :class='{active: user.preferences.hair.mustache === option}')
-            .base.sprite(:class="`hair_mustache_${option}_${user.preferences.hair.color}`", @click='set({"preferences.hair.mustache": option})')
+            :class='{active: user.preferences.hair.mustache === option, locked: !user.purchased.hair.base || !user.purchased.hair.base[option]}')
+            .base.sprite.customize-option(:class="`hair_mustache_${option}_${user.preferences.hair.color}`", @click='set({"preferences.hair.mustache": option})')
+            .gem-lock(v-if='!user.purchased.hair.base || !user.purchased.hair.base[option]')
+              .svg-icon.gem(v-html='icons.gem')
+              span 2
 
     .section.container.customize-section(v-if='activeTopPage === "extra"')
       .row.sub-menu.col-6.offset-3.text-center
@@ -145,24 +174,27 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
           .eyewear_special_redTopFrame.option(@click='equip("eyewear_special_redTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_redTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_redTopFrame"}')
           .eyewear_special_whiteTopFrame.option(@click='equip("eyewear_special_whiteTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_whiteTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_whiteTopFrame"}')
           .eyewear_special_yellowTopFrame.option(@click='equip("eyewear_special_yellowTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_yellowTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_yellowTopFrame"}')
-        .col-12.customize-options(v-if='editing')
+        #animal-ears.col-12.customize-options(v-if='editing')
           .option(v-for='option in ["bearEars", "cactusEars", "foxEars", "lionEars", "pandaEars", "pigEars", "tigerEars", "wolfEars"]',
-            :class='{active: user.preferences.costume ? user.items.gear.costume.headAccessory === `eyewear_special_${option}` : user.items.gear.equipped.headAccessory === `eyewear_special_${option}`}')
-            .sprite(:class="`.eyewear_special_${option}`", @click='equip(`eyewear_special_${option}`)')
+            :class='[{active: user.preferences.costume ? user.items.gear.costume.headAccessory === `headAccessory_special_${option}` : user.items.gear.equipped.headAccessory === `headAccessory_special_${option}`}, {locked: !user.purchased.headAccessory || !user.purchased.headAccessory[option]}]')
+            .sprite.customize-option(:class="`headAccessory_special_${option}`", @click='equip(`headAccessory_special_${option}`)')
+            .gem-lock(v-if='!user.purchased.headAccessory || !user.purchased.headAccessory[option]')
+              .svg-icon.gem(v-html='icons.gem')
+              span 2
 
-      .row(v-if='activeSubPage === "wheelchair"')
+      #wheelchairs.row(v-if='activeSubPage === "wheelchair"')
         .col-12.customize-options.weelchairs
           .option(@click='set({"preferences.chair": "none"})', :class='{active: user.preferences.chair === "none"}')
             | None
           .option(v-for='option in ["black", "blue", "green", "pink", "red", "yellow"]',
             :class='{active: user.preferences.chair === option}')
-            .chair.sprite(:class="`button_chair_${option}`", @click='set({"preferences.chair": option})')
-      .row(v-if='activeSubPage === "flower"')
+            .chair.sprite.customize-option(:class="`button_chair_${option}`", @click='set({"preferences.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"]',
             :class='{active: user.preferences.hair.flower === option}')
-            .sprite(:class="`hair_flower_${option}`", @click='set({"preferences.hair.flower": option})')
+            .sprite.customize-option(:class="`hair_flower_${option}`", @click='set({"preferences.hair.flower": option})')
       .row(v-if='activeSubPage === "flower"')
         .col-12.customize-options
           // button.customize-option(ng-repeat='item in ::getGearArray("animal")', class='{{::item.key}}',
@@ -445,52 +477,44 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
 
   .customize-section {
     text-align: center;
+    padding-bottom: 2em;
+  }
+
+  .option.locked {
+    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);
   }
 
   .customize-options .option {
     display: inline-block;
     vertical-align: bottom;
-    width: 90px;
-    height: 90px;
+    padding: .5em;
+    height: 100px;
+    width: 100px;
+    margin-bottom: .5em;
+    margin-right: .5em;
 
-    .sprite {
-      margin-top: -2em;
-      margin-left: -1em;
+    .gem-lock {
+      .svg-icon {
+        width: 16px;
+      }
+
+      span {
+        color: #24cc8f;
+        font-weight: bold;
+        margin-left: .5em;
+      }
+
+      .svg-icon, span {
+        display: inline-block;
+        vertical-align: bottom;
+      }
     }
 
-    .skin {
-      margin-top: -.5em;
+    .sprite.customize-option {
+      margin: 0 auto;
     }
-
-    .chair {
-      margin-top: 1em;
-      margin-left: 1em;
-    }
-
-    .hair {
-      margin-top: 0em;
-      margin-left: -2em;
-    }
-
-    .color-bangs {
-      margin-top: 0em;
-      margin-left: -1em;
-    }
-
-    .bangs {
-      margin-top: 0em;
-      margin-left: -1em;
-    }
-
-    .base {
-      margin-top: -1em;
-      margin-left: -2em;
-    }
-  }
-
-  .weelchairs .option {
-    width: 90px;
-    height: 90px;
   }
 
   .option.active {
@@ -879,6 +903,7 @@ export default {
       loading: false,
       backgroundShopSets,
       backgroundUpdate: new Date(),
+      specialShirts: ['convict', 'cross', 'fire', 'horizon', 'ocean', 'purple', 'rainbow', 'redblue', 'thunder', 'tropical', 'zombie'],
       icons: Object.freeze({
         logoPurple,
         bodyIcon,
diff --git a/website/client/components/groups/group.vue b/website/client/components/groups/group.vue
index 586389b2a2..d3ab6edb9a 100644
--- a/website/client/components/groups/group.vue
+++ b/website/client/components/groups/group.vue
@@ -33,6 +33,11 @@
           button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
           button.btn.btn-secondary.float-left(v-once, @click='fetchRecentMessages()') {{ $t('fetchRecentMessages') }}
 
+        .row.community-guidelines(v-if='!communityGuidelinesAccepted')
+          div.col-8(v-once, v-html="$t('communityGuidelinesIntro')")
+          div.col-4
+            button.btn.btn-info(@click='acceptCommunityGuidelines()', v-once) {{ $t('acceptCommunityGuidelines') }}
+
         .row
           .col-12.hr
           chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name')
@@ -267,6 +272,19 @@
   .chat-row {
     margin-top: 2em;
 
+    .community-guidelines {
+      background-color: rgba(135, 129, 144, 0.84);
+      padding: 1em;
+      color: $white;
+      position: absolute;
+      top: 0;
+      height: 150px;
+      padding-top: 3em;
+      margin-top: 2.3em;
+      width: 100%;
+      border-radius: 4px;
+    }
+
     .new-message-row {
       position: relative;
     }
@@ -496,6 +514,9 @@ export default {
   },
   computed: {
     ...mapState({user: 'user.data'}),
+    communityGuidelinesAccepted () {
+      return this.user.flags.communityGuidelinesAccepted;
+    },
     partyStore () {
       return this.$store.state.party;
     },
@@ -585,12 +606,14 @@ export default {
     },
   },
   methods: {
+    acceptCommunityGuidelines () {
+      this.$store.dispatch('user:set', {'flags.communityGuidelinesAccepted': true});
+    },
     load () {
       if (this.isParty) {
         this.searchId = 'party';
         // @TODO: Set up from old client. Decide what we need and what we don't
         // Check Desktop notifs
-        // Mark Chat seen
         // Load invites
       }
       this.fetchGuild();
diff --git a/website/client/components/groups/groupPlan.vue b/website/client/components/groups/groupPlan.vue
index 264d80c7da..3811832388 100644
--- a/website/client/components/groups/groupPlan.vue
+++ b/website/client/components/groups/groupPlan.vue
@@ -29,26 +29,31 @@ div
             h2 In-Game Benefits
             p Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly equipment sets and the ability to buy gems with gold.
 
-    .container.payment-options(v-if='upgradingGroup._id')
+    #upgrading-group.container.payment-options(v-if='upgradingGroup._id')
       h1.text-center.purple-header Are you ready to upgrade?
       .row
-        .col-6.offset-3.text-center
+        .col-12.text-center
           .purple-box
-            .dollar $
-            .number 9
-            .name Group Owner Subscription
-            .plus +
-            .dollar $
-            .number 3
-            .name Each Individual Group Member
+            .amount-section
+              .dollar $
+              .number 9
+              .name Group Owner Subscription
+            .plus
+              .svg-icon(v-html="icons.positiveIcon")
+            .amount-section
+              .dollar $
+              .number 3
+              .name Each Individual Group Member
 
           .box.payment-providers
             h3 Choose your payment method
-            .box.payment-button(@click='createGroup(PAYMENTS.STRIPE)')
-              p Credit Card
+            .box.payment-button(@click='pay(PAYMENTS.STRIPE)')
+              div
+                .svg-icon.credit-card-icon(v-html="icons.group")
+                p.credit-card Credit Card
               p Powered by Stripe
-            .box.payment-button(@click='createGroup(PAYMENTS.AMAZON)')
-              | Amazon Pay
+            .box.payment-button(@click='pay(PAYMENTS.AMAZON)')
+              .svg-icon.amazon-pay-icon(v-html="icons.amazonpay")
 
     .container.col-6.offset-3.create-option(v-if='!upgradingGroup._id')
       .row
@@ -117,6 +122,62 @@ div
 </template>
 
 <style lang="scss" scoped>
+  #upgrading-group {
+    .amount-section {
+      position: relative;
+    }
+
+    .dollar {
+      position: absolute;
+      left: -1em;
+      top: 1em;
+    }
+
+    .purple-box {
+      color: #bda8ff;
+      margin-bottom: 2em;
+    }
+
+    .number {
+      font-weight: bold;
+      color: #fff;
+    }
+
+    .payment-button {
+      display: block;
+      margin: 0 auto;
+      margin-bottom: 1em;
+    }
+
+    .plus .svg-icon{
+      width: 24px;
+    }
+
+    .payment-providers {
+      width: 350px;
+    }
+
+    .credit-card {
+      font-size: 20px;
+      font-weight: bold;
+      margin-bottom: 0;
+      margin-top: .5em;
+      display: inline-block;
+    }
+
+    .credit-card-icon {
+      width: 25px;
+      display: inline-block;
+      margin-right: .5em;
+    }
+
+    .amazon-pay-icon {
+      width: 150px;
+      margin: 0 auto;
+      margin-top: .5em;
+    }
+  }
+
   .header {
     margin-bottom: 3em;
     margin-top: 4em;
@@ -225,10 +286,9 @@ div
       padding: .5em;
       border-radius: 8px;
       width: 200px;
-      height: 200px;
+      height: 215px;
 
       .dollar {
-        margin-left: 1.2em;
       }
 
       .number {
@@ -236,7 +296,7 @@ div
       }
 
       .name {
-        width: 120px;
+        width: 100px;
         margin-left: .3em;
       }
 
@@ -263,6 +323,10 @@ div
     padding: .5em;
     display: block;
   }
+
+  .payment-button:hover {
+    cursor: pointer;
+  }
 </style>
 
 <script>
@@ -270,6 +334,9 @@ import paymentsMixin from '../../mixins/payments';
 import amazonPaymentsModal from '../payments/amazonModal';
 import { mapState } from 'client/libs/store';
 import bModal from 'bootstrap-vue/lib/components/modal';
+import group from 'assets/svg/group.svg';
+import amazonpay from 'assets/svg/amazonpay.svg';
+import positiveIcon from 'assets/svg/positive.svg';
 
 export default {
   mixins: [paymentsMixin],
@@ -279,8 +346,12 @@ export default {
   },
   data () {
     return {
-      StripeCheckout: {},
       amazonPayments: {},
+      icons: Object.freeze({
+        group,
+        amazonpay,
+        positiveIcon,
+      }),
       PAGES: {
         CREATE_GROUP: 'create-group',
         UPGRADE_GROUP: 'upgrade-group',
@@ -306,16 +377,6 @@ export default {
   },
   mounted () {
     this.activePage = this.PAGES.BENEFITS;
-    // @TODO: have to handle this better because sub pages have hidden header
-    // @TODO: I think we can remove this
-    // this.$store.state.hideHeader = true;
-
-    // @TODO: can this be in a mixin?
-    this.StripeCheckout = window.StripeCheckout;
-  },
-  destroyed () {
-    // @TODO: going from the page back to party modal does not show
-    // this.$store.state.hideHeader = false;
   },
   computed: {
     newGroupIsReady () {
diff --git a/website/client/components/groups/membersModal.vue b/website/client/components/groups/membersModal.vue
index 67fc98b999..74fe34e944 100644
--- a/website/client/components/groups/membersModal.vue
+++ b/website/client/components/groups/membersModal.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 div
-  b-modal#members-modal(:title="$t('createGuild')", size='lg')
+  b-modal#members-modal(:title="$t('createGuild')", size='md')
     .header-wrap(slot="modal-header")
       .row
         .col-6
@@ -11,15 +11,16 @@ div
       .row
         .form-group.col-6
           input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
-        .col-4.offset-2
+        .col-5.offset-1
           span.dropdown-label {{ $t('sortBy') }}
           b-dropdown(:text="$t('sort')", right=true)
             b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption.value)', :key='sortOption.value') {{sortOption.text}}
     .row(v-for='member in sortedMembers')
-      .col-8.offset-1
+      .col-11.no-padding-left
         member-details(:member='member')
-      .col-3.actions
-        b-dropdown(text="...", right=true)
+      .col-1.actions
+        b-dropdown(right=true)
+          .svg-icon.inline.dots(slot='button-content', v-html="icons.dots")
           b-dropdown-item(@click='sort(option.value)', v-if='isLeader')
             span.dropdown-icon-item
               .svg-icon.inline(v-html="icons.removeIcon", v-if='isLeader')
@@ -43,6 +44,26 @@ div
     .row.gradient(v-if='members.length > 3')
 </template>
 
+<style lang='scss'>
+  #members-modal {
+    .small-text, .character-name {
+      color: #878190;
+    }
+
+    .no-padding-left, .modal-body {
+      padding-left: 0;
+    }
+
+    .member-details {
+      margin: 0;
+    }
+
+    .actions .dropdown-toggle::after {
+      content: none !important;
+    }
+  }
+</style>
+
 <style lang='scss' scoped>
   header {
     background-color: #edecee;
@@ -60,6 +81,16 @@ div
   .actions {
     padding-top: 5em;
 
+    .dots {
+      height: 16px;
+      width: 4px;
+    }
+
+    .btn-group {
+      margin-left: -2em;
+      margin-top: -2em;
+    }
+
     .action-icon {
       margin-right: 1em;
     }
@@ -110,6 +141,7 @@ import MemberDetails from '../memberDetails';
 import removeIcon from 'assets/members/remove.svg';
 import messageIcon from 'assets/members/message.svg';
 import starIcon from 'assets/members/star.svg';
+import dots from 'assets/svg/dots.svg';
 
 export default {
   props: ['hideBadge'],
@@ -148,6 +180,7 @@ export default {
         removeIcon,
         messageIcon,
         starIcon,
+        dots,
       }),
       userIdToMessage: '',
     };
diff --git a/website/client/components/groups/publicGuildItem.vue b/website/client/components/groups/publicGuildItem.vue
index fa60ab2cac..49db639037 100644
--- a/website/client/components/groups/publicGuildItem.vue
+++ b/website/client/components/groups/publicGuildItem.vue
@@ -13,7 +13,8 @@ router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
             .col-md-8
                 router-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
                   h3 {{ guild.name }}
-                p {{ guild.summary }}
+                p(v-if='guild.summary') {{ guild.summary }}
+                p(v-else) {{ guild.name }}
             .col-md-2.cta-container
               button.btn.btn-danger(v-if='isMember && displayLeave' @click='leave()', v-once) {{ $t('leave') }}
               button.btn.btn-success(v-if='!isMember'  @click='join()', v-once) {{ $t('join') }}
diff --git a/website/client/components/memberDetails.vue b/website/client/components/memberDetails.vue
index 3bc053e2b7..ba5b3cf219 100644
--- a/website/client/components/memberDetails.vue
+++ b/website/client/components/memberDetails.vue
@@ -1,12 +1,13 @@
 <template lang="pug">
 div
-  .d-flex.member-details(:class="{ condensed, expanded }", @click='showMemberModal(member)')
-    avatar(:member="member",
-      @click.native="$emit('click')",
-      @mouseover.native="$emit('onHover')",
-      @mouseout.native="$emit('onHover')",
-    )
-    .member-stats
+  .row.member-details(:class="{ condensed, expanded }", @click='showMemberModal(member)')
+    .col-4
+      avatar(:member="member",
+        @click.native="$emit('click')",
+        @mouseover.native="$emit('onHover')",
+        @mouseout.native="$emit('onHover')",
+      )
+    .member-stats(:class="{'col-8': !expanded}")
       h3.character-name
         | {{member.profile.name}}
         .is-buffed(v-if="isBuffed")
diff --git a/website/client/components/payments/amazonModal.vue b/website/client/components/payments/amazonModal.vue
index 56d86c97ff..bba90657ba 100644
--- a/website/client/components/payments/amazonModal.vue
+++ b/website/client/components/payments/amazonModal.vue
@@ -43,68 +43,67 @@ export default {
     ...mapState({user: 'user.data'}),
   },
   mounted () {
-    // @TODO:
-    // window.onAmazonLoginReady = function() {
-    //   amazon.Login.setClientId('CLIENT-ID');
-    // };
-    // window.onAmazonPaymentsReady = function() {
-    //             showButton();
-    // };
+    window.onAmazonLoginReady = () => {
+      window.amazon.Login.setClientId(AMAZON_PAYMENTS.CLIENT_ID);
+    };
+
     this.OffAmazonPayments = window.OffAmazonPayments;
     this.isAmazonReady = true;
-    window.amazon.Login.setClientId(AMAZON_PAYMENTS.CLIENT_ID);
-
-
-    // @TODO: prevent modal close form clicking outside
-    let amazonButton = this.OffAmazonPayments.Button( // eslint-disable-line
-      'AmazonPayButton',
-      AMAZON_PAYMENTS.SELLER_ID,
-      {
-        type: 'PwA',
-        color: 'Gold',
-        size: 'small',
-        agreementType: 'BillingAgreement',
-
-        onSignIn: async (contract) => {
-          this.amazonPaymentsbillingAgreementId = contract.getAmazonBillingAgreementId();
-
-          if (this.amazonPayments.type === 'subscription') {
-            this.amazonPayments.loggedIn = true;
-            this.amazonPaymentsinitWidgets();
-          } else {
-            let url = '/amazon/createOrderReferenceId';
-            let response = await axios.post(url, {
-              billingAgreementId: this.amazonPaymentsbillingAgreementId,
-            });
-
-            // @TODO: Success
-            this.amazonPayments.loggedIn = true;
-            this.amazonPaymentsorderReferenceId = response.data.orderReferenceId;
-            this.OffAmazonPayments.amazonPaymentsinitWidgets();
-            // @TODO: error
-            alert(response.message);
-          }
-        },
-
-        authorization: () => {
-          window.amazon.Login.authorize({
-            scope: 'payments:widget',
-            popup: true,
-          }, function amazonSuccess (response) {
-            if (response.error) return alert(response.error);
-
-            let url = '/amazon/verifyAccessToken';
-            axios.post(url, response)
-              .catch((e) => {
-                alert(e.message);
-              });
-          });
-        },
-
-        onError: this.amazonOnError,
-      });
+    this.showButton();
+    // window.onAmazonPaymentsReady = () => {
+    // };
   },
   methods: {
+    showButton () {
+      // @TODO: prevent modal close form clicking outside
+      let amazonButton = this.OffAmazonPayments.Button( // eslint-disable-line
+        'AmazonPayButton',
+        AMAZON_PAYMENTS.SELLER_ID,
+        {
+          type: 'PwA',
+          color: 'Gold',
+          size: 'small',
+          agreementType: 'BillingAgreement',
+
+          onSignIn: async (contract) => {
+            this.amazonPaymentsbillingAgreementId = contract.getAmazonBillingAgreementId();
+
+            if (this.amazonPayments.type === 'subscription') {
+              this.amazonPayments.loggedIn = true;
+              this.amazonPaymentsinitWidgets();
+            } else {
+              let url = '/amazon/createOrderReferenceId';
+              let response = await axios.post(url, {
+                billingAgreementId: this.amazonPaymentsbillingAgreementId,
+              });
+
+              // @TODO: Success
+              this.amazonPayments.loggedIn = true;
+              this.amazonPaymentsorderReferenceId = response.data.orderReferenceId;
+              this.amazonPaymentsinitWidgets();
+              // @TODO: error
+              alert(response.message);
+            }
+          },
+
+          authorization: () => {
+            window.amazon.Login.authorize({
+              scope: 'payments:widget',
+              popup: true,
+            }, function amazonSuccess (response) {
+              if (response.error) return alert(response.error);
+
+              let url = '/amazon/verifyAccessToken';
+              axios.post(url, response)
+                .catch((e) => {
+                  alert(e.message);
+                });
+            });
+          },
+
+          onError: this.amazonOnError,
+        });
+    },
     amazonPaymentsCanCheckout () {
       if (this.amazonPayments.type === 'single') {
         return this.amazonPaymentspaymentSelected === true;
diff --git a/website/client/components/payments/buyGemsModal.vue b/website/client/components/payments/buyGemsModal.vue
index 567d11b14c..0c446af1fa 100644
--- a/website/client/components/payments/buyGemsModal.vue
+++ b/website/client/components/payments/buyGemsModal.vue
@@ -1,90 +1,102 @@
 <template lang="pug">
-b-modal#buy-gems(title="Buy Gems", :hide-footer="true", size='lg')
-  .modal-body
-      div(v-if='userReachedGemCap')
-        h2 {{ $t('buyGemsGold') }}
-        p {{ $t('maxBuyGems') }}
-
-      .row(v-if='!userReachedGemCap')
-        .col-12
+div(v-if='user')
+  amazon-payments-modal(:amazon-payments='amazonPayments')
+  b-modal#buy-gems(title="Buy Gems", :hide-footer="true", size='lg')
+    .modal-body
+        div(v-if='userReachedGemCap')
           h2 {{ $t('buyGemsGold') }}
-          p {{ $t('subGemPop') }}
+          p {{ $t('maxBuyGems') }}
 
-        .col-4
-          button.btn.btn-primary(@click='purchase({type: "gems", key: "gem"})')
-            | Buy Gems for 20 Gold each
-            span.Pet_Currency_Gem.inline-gems
-             .badge.badge-success.stack-count {{planGemLimits.convCap + user.purchased.plan.consecutive.gemCapExtra - user.purchased.plan.gemsBought}}
-        .col-8
-          p {{ $t('buyGemsAllow1') }}
-            | &nbsp; {{planGemLimits.convCap + user.purchased.plan.consecutive.gemCapExtra - user.purchased.plan.gemsBought}}&nbsp;
-            | {{ $t('buyGemsAllow2') }}
-        .col-12
-          p(v-html="$t('seeSubscriptionDetails')")
+        .row(v-if='!userReachedGemCap')
+          .col-12
+            h2 {{ $t('buyGemsGold') }}
+            p {{ $t('subGemPop') }}
 
-      .row(v-if='user.purchased.plan.customerId')
-        .col-12
-          h2 {{ $t('purchaseGemsSeparately') }}
-        .col-12.alert.alert-info
-            | $5 {{ $t('USD') }}  = +20
-        .col-12
-            h3 {{ $t('paymentMethods') }}
-            button.purchase.btn.btn-primary(ng-click='Payments.showStripe({})') {{ $t('card') }}
-            a.purchase(href='/paypal/checkout?_id=${user._id}&apiToken=${User.settings.auth.apiToken}')
-              img(src='https://www.paypalobjects.com/webstatic/en_US/i/buttons/pp-acceptance-small.png',alt='Pay now with Paypal')
-            a.purchase(ng-click="Payments.amazonPayments.init({type: 'single'})")
-              img(src='https://payments.amazon.com/gp/cba/button', alt='Pay now with Amazon Payments')
+          .col-4
+            button.btn.btn-primary(@click='purchase({type: "gems", key: "gem"})')
+              | Buy Gems for 20 Gold each
+              span.Pet_Currency_Gem.inline-gems
+               .badge.badge-success.stack-count {{planGemLimits.convCap + user.purchased.plan.consecutive.gemCapExtra - user.purchased.plan.gemsBought}}
+          .col-8
+            p {{ $t('buyGemsAllow1') }}
+              | &nbsp; {{planGemLimits.convCap + user.purchased.plan.consecutive.gemCapExtra - user.purchased.plan.gemsBought}}&nbsp;
+              | {{ $t('buyGemsAllow2') }}
+          .col-12
+            p(v-html="$t('seeSubscriptionDetails')")
 
-      .row(v-if='!user.purchased.plan.customerId')
-        .col-12
-          h2 {{ $t('purchaseGems') }}
-          .small
-            span.dashed-underline(popover="$t('donateText3')", popover-trigger='mouseenter', popover-placement='bottom')
-              | $5 {{ $t('USD') }}
-              span#TotalGemPrice.dashed-underline(popover="$t('donateText1')",
-                popover-trigger='mouseenter', ement='bottom')
-                  | +20
-                  span(class="Pet_Currency_Gem1x inline-gems")
-              .container-fluid
-                  p
-                    small.muted {{ $t('paymentMethods') }}
-                  a.purchase.btn.btn-primary(ng-click='Payments.showStripe({})') {{ $t('card') }}
-                  a.purchase(href='/paypal/checkout?_id=${user._id}&apiToken=${User.settings.auth.apiToken}')
-                    img(src='https://www.paypalobjects.com/webstatic/en_US/i/buttons/pp-acceptance-small.png',
-                      alt='Pay now with Paypal')
-                  a.purchase(ng-click="Payments.amazonPayments.init({type: 'single'})")
-                    img(src='https://payments.amazon.com/gp/cba/button', alt='Pay now with Amazon Payments')
+        .row(v-if='user.purchased.plan.customerId')
+          .col-12
+            h2 {{ $t('purchaseGemsSeparately') }}
+          .col-12.alert.alert-info
+              | $5 {{ $t('USD') }}  = +20
+          .col-12
+              h3 {{ $t('paymentMethods') }}
+              .row.text-center
+                .col-md-4
+                  button.purchase.btn.btn-primary(@click='showStripe({})') {{ $t('card') }}
+                .col-md-4
+                  a.purchase(:href='paypalCheckoutLink', target='_blank')
+                    img(src='https://www.paypalobjects.com/webstatic/en_US/i/buttons/pp-acceptance-small.png', :alt="$t('paypal')")
+                .col-md-4
+                  a.purchase(@click="amazonPaymentsInit({type: 'single'})")
+                    img(src='https://payments.amazon.com/gp/cba/button', :alt="$t('amazonPayments')")
 
-        .container-fluid
-          h2 {{ $t('freeGemsTitle') }}
-          p {{ $t('subFreeGemsHow') }}
+        .row(v-if='!user.purchased.plan.customerId')
+          .col-12
+            h2 {{ $t('purchaseGems') }}
+            .small
+              span.dashed-underline(popover="$t('donateText3')", popover-trigger='mouseenter', popover-placement='bottom')
+                | $5 {{ $t('USD') }}
+                span#TotalGemPrice.dashed-underline(popover="$t('donateText1')",
+                  popover-trigger='mouseenter', ement='bottom')
+                    | +20
+                    span(class="Pet_Currency_Gem1x inline-gems")
+                .container-fluid
+                  .subscribe-pay
+                    h3 {{ $t('paymentMethods') }}
+                    .row.text-center
+                      .col-md-4
+                        button.purchase.btn.btn-primary(@click='showStripe({})') {{ $t('card') }}
+                      .col-md-4
+                        a.purchase(:href='paypalCheckoutLink', target='_blank')
+                          img(src='https://www.paypalobjects.com/webstatic/en_US/i/buttons/pp-acceptance-small.png', :alt="$t('paypal')")
+                      .col-md-4
+                        a.purchase(@click="amazonPaymentsInit({type: 'single'})")
+                          img(src='https://payments.amazon.com/gp/cba/button', :alt="$t('amazonPayments')")
 
-        .well
-          h3
-            .small {{ $t('buyGemsGoldTitle') }}
-          h3 {{ $t('becomeSubscriber') }}
+          .container-fluid
+            h2 {{ $t('freeGemsTitle') }}
+            p {{ $t('subFreeGemsHow') }}
 
-          div(ng-include="'partials/options.settings.subscription.html'", ng-controller='SettingsCtrl')
+          .well
+            h3
+              .small {{ $t('buyGemsGoldTitle') }}
+            h3 {{ $t('becomeSubscriber') }}
 
-      .row(v-if='user.purchased.plan.customerId')
-        .col-12
-          p(v-html="$t('seeSubscriptionDetails')")
-  .modal-footer
-    .col-12.text-center
-      button.btn.btn-secondary(@click='close()') {{ $t('close') }}
+        .row(v-if='user.purchased.plan.customerId')
+          .col-12
+            p(v-html="$t('seeSubscriptionDetails')")
+    .modal-footer
+      .col-12.text-center
+        button.btn.btn-secondary(@click='close()') {{ $t('close') }}
 </template>
 
 <script>
 import bModal from 'bootstrap-vue/lib/components/modal';
 import { mapState } from 'client/libs/store';
 import planGemLimits from '../../../common/script/libs/planGemLimits';
+import paymentsMixin from '../../mixins/payments';
+import amazonPaymentsModal from '../payments/amazonModal';
 
 export default {
+  mixins: [paymentsMixin],
   components: {
     bModal,
+    amazonPaymentsModal,
   },
   data () {
     return {
+      amazonPayments: {},
       planGemLimits,
     };
   },
diff --git a/website/client/components/settings/subscription.vue b/website/client/components/settings/subscription.vue
index 33755d1308..a8bb7b8dae 100644
--- a/website/client/components/settings/subscription.vue
+++ b/website/client/components/settings/subscription.vue
@@ -119,9 +119,6 @@ import planGemLimits from '../../../common/script/libs/planGemLimits';
 import amazonPaymentsModal from '../payments/amazonModal';
 import paymentsMixin from '../../mixins/payments';
 
-// TODO
-const STRIPE_PUB_KEY = 'pk_test_6pRNASCoBOKtIshFeQd4XMUh';
-
 export default {
   mixins: [paymentsMixin],
   components: {
@@ -137,7 +134,6 @@ export default {
         key: 'basic_earned',
       },
       amazonPayments: {},
-      StripeCheckout: {},
       paymentMethods: {
         AMAZON_PAYMENTS: 'Amazon Payments',
         STRIPE: 'Stripe',
@@ -148,9 +144,6 @@ export default {
       },
     };
   },
-  mounted () {
-    this.StripeCheckout = window.StripeCheckout;
-  },
   filters: {
     date (value) {
       if (!value) return '';
@@ -254,30 +247,6 @@ export default {
       subs.basic_6mo.discount = true;
       subs.google_6mo.discount = false;
     },
-    showStripeEdit (config) {
-      let groupId;
-      if (config && config.groupId) {
-        groupId = config.groupId;
-      }
-
-      this.StripeCheckout.open({
-        key: STRIPE_PUB_KEY,
-        address: false,
-        name: this.$t('subUpdateTitle'),
-        description: this.$t('subUpdateDescription'),
-        panelLabel: this.$t('subUpdateCard'),
-        token: async (data) => {
-          data.groupId = groupId;
-          let url = '/stripe/subscribe/edit';
-          let response = await axios.post(url, data);
-
-          // Succss
-          window.location.reload(true);
-          // error
-          alert(response.message);
-        },
-      });
-    },
     canCancelSubscription () {
       return (
         this.user.purchased.plan.paymentMethod !== this.paymentMethods.GOOGLE &&
diff --git a/website/client/components/static/groupPlans.vue b/website/client/components/static/groupPlans.vue
index ad4a9cf92a..83aeb36227 100644
--- a/website/client/components/static/groupPlans.vue
+++ b/website/client/components/static/groupPlans.vue
@@ -1,12 +1,10 @@
 <template lang="pug">
-  div
-    // @TODO: Replace with Zeplin  +groupPlansBenefits
-
-    br
-    br
+div
+  static-header
+  .container-fluid.main
     .row
       .col-6.offset-3
-        button.btn.btn-primary.btn-lg.btn-block(ng-click="goToNewGroupPage()") {{ $t('getAGroupPlanToday') }}
+        button.btn.btn-primary.btn-lg.btn-block(@click="goToNewGroupPage()") {{ $t('getAGroupPlanToday') }}
 
     .row
       .col-6.offset-3
@@ -19,7 +17,7 @@
       .row.row-margin(style="font-size: 2rem;")
         span {{ $t('enterprisePlansDescription') }}
       .row.row-margin
-        // TODO 
+        // TODO
         a.btn.btn-primary.btn-lg.btn-block(:href="'mailto:vicky@habitica.com?subject=' + $t('enterprisePlansEmailSubject')") {{ $t('enterprisePlansButton') }}
 
       br
@@ -30,21 +28,40 @@
         a.btn.btn-primary.btn-lg.btn-block(href="https://docs.google.com/forms/d/e/1FAIpQLSerMKkaCg3UcgpcMvBJtlNgnF9DNY8sxCebpAT-GHeDAQASPQ/viewform?usp=sf_link") {{ $t('familyPlansButton') }}
 </template>
 
+<style lang='scss' scoped>
+  .main {
+    margin-top: 6em;
+  }
+</style>
+
 <script>
-import * as Analytics from 'client/libs/analytics';
+  import StaticHeader from './header.vue';
+  import * as Analytics from 'client/libs/analytics';
 
-export default {
-  methods: {
-    contactUs () {
-      Analytics.track({
-        hitType: 'event',
-        eventCategory: 'button',
-        eventAction: 'click',
-        eventLabel: 'Contact Us (Plans)',
-      });
-
-      window.location.href = `mailto:vicky@habitica.com?subject=${this.$t('enterprisePlansEmailSubject')}`;
+  export default {
+    components: {
+      StaticHeader,
     },
-  },
-};
+    methods: {
+      goToNewGroupPage () {
+        if (!this.$store.state.isUserLoggedIn) {
+          this.$store.state.afterLoginRedirect = '/group-plans';
+          this.$router.push('/register');
+          return;
+        }
+
+        this.$router.push('/group-plans');
+      },
+      contactUs () {
+        Analytics.track({
+          hitType: 'event',
+          eventCategory: 'button',
+          eventAction: 'click',
+          eventLabel: 'Contact Us (Plans)',
+        });
+
+        window.location.href = `mailto:vicky@habitica.com?subject=${this.$t('enterprisePlansEmailSubject')}`;
+      },
+    },
+  };
 </script>
diff --git a/website/client/components/static/home.vue b/website/client/components/static/home.vue
index ddafea71f9..5ca770f4ae 100644
--- a/website/client/components/static/home.vue
+++ b/website/client/components/static/home.vue
@@ -1,607 +1,458 @@
 <template lang="pug">
-  div
+  #front
     noscript.banner {{ $t('jsDisabledHeadingFull') }}
       br
       a(href='http://www.enable-javascript.com/', target='_blank') {{ $t('jsDisabledLink') }}
 
     static-header
 
-    #intro.container-fluid
-      .row
-        h1.col-12.text-center {{ $t('motivate1') }}
-      .row
-        .col-6.offset-3
-          img.img-rendering-auto.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/intro.png', alt='')
-          // The empty alt attribute isn't a mistake, it's part of the spec for purely decorative images that add no information
-          // insert intro images
-      .row
-        .introcall.bg-success.col-12.text-center.cta
-          h2 {{ $t('joinOthers', {userCount}) }}
-            small
-              button#play-btn.btn.btn-primary.btn-lg.gamifybutton(@click='playButtonClick()') {{ $t('free') }}
-      .row
-        .col-12.presslogos.text-center.img-rendering-auto
-          h2 {{ $t('featuredIn') }}
-          br
-          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/lifehacker.png', alt="$t(altAttrLifehacker)")
-          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/nyt-logo.png', alt="$t(altAttrNewYorkTimes)")
-          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/makeuseof.png', alt="$t(altAttrMakeUseOf)")
-          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/Forbes_logo.png', alt="$t(altAttrForbes)")
-          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/Cnetlogo.png', alt="$t(altAttrCnet)")
-          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/Fast-Company-logo.png', alt="$t(altAttrFastCompany)")
-          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/kickstarter-logo.png', alt="$t(altAttrKickstarter)")
-          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/discover-logo.png', alt="$t(altAttrDiscover)")
-    #intro-text.container-fluid
-      .row
-        .col-8.offset-2
-          p.lead.text-center
-            | {{ $t('leadText') }}
-    section#testimonial-carousel.bg-info.container-fluid
-      .row
-        .col-3.offset-1
-          h2 {{ $t('testimonialHeading') }}
-          img.img-say.img-responsive.visible-lg-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/publicSpaces.png', alt='')
-        .col-8
-          #quote-carousel.container-fluid(data-interval='10000', data-ride='carousel')
-            .row.text-center
-              .item.col-12.active
-                blockquote
-                  p
-                  | {{ $t('dragonsilverQuote') }}
-                  small Drag0nsilver
-              .item.col-12
-                blockquote
-                  p
-                  | {{ $t('frabjabulousQuote') }}
-                  small frabjabulous
-              .item.col-12
-                blockquote
-                  p
-                  | {{ $t('andeeliaoQuote') }}
-                  small AndeeLiao
-              .item.col-12
-                blockquote
-                  p
-                  | {{ $t('alexandraQuote') }}
-                  small _AlexandraSo_
-            .row
-              .col-6.offset-3.text-center.user-selector
-                .user-icon.active(data-target='#quote-carousel', data-slide-to='0')
-                  img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Drag0nsilver.png', alt='')
-                .user-icon(data-target='#quote-carousel', data-slide-to='1')
-                  img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/frabjabulous.png', alt='')
-                .user-icon(data-target='#quote-carousel', data-slide-to='2')
-                  img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/AndeeLiao.png', alt='')
-                .user-icon(data-target='#quote-carousel', data-slide-to='3')
-                  img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/AlexandraSo.png', alt='')
-        .col-12.text-center
-          button.btn.btn-primary.btn-lg.gamifybutton.fixedcta(@click='playButtonClick()') {{ $t('gamifyButton') }}
-    section#uses.container-fluid
-      .row
-        h2.col-12.text-center {{ $t('examplesHeading') }}
-      .row
-        #myCarousel.col-12.carousel.slide(data-interval='10000', data-ride='carousel')
-          ul.nav.nav-pills.nav-fill
-            li.nav-item.active(data-target='#myCarousel', data-slide-to='0')
-              a(href='#') {{ $t('work') }}
-            li.nav-item(data-target='#myCarousel', data-slide-to='1')
-              a(href='#') {{ $t('wellness') }}
-            li.nav-item(data-target='#myCarousel', data-slide-to='2')
-              a(href='#') {{ $t('teams') }}
-            li.nav-item(data-target='#myCarousel', data-slide-to='3')
-              a(href='#') {{ $t('school') }}
-            li.nav-item(data-target='#myCarousel', data-slide-to='4')
-              a(href='#') {{ $t('goals') }}
-            li.nav-item(data-target='#myCarousel', data-slide-to='5')
-              a(href='#') {{ $t('chores') }}
-          .carousel-inner(style='z-index:0;display:none')
-            .item.active.work-use
-              h3
-                | {{ $t('work') }}
-                br
-                small
-                  a(href='/static/plans') {{ $t('businessText') }}
-              .carousel-content.row
-                .sampletasks.col-lg-4.col-6.col-xs-12
-                  h4 {{ $t('sampleHabits') }}
-                  div(style='width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                    | &nbsp;
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('businessSample1') }}
-                  br
-                  div(style='width:100%; background-color: rgb(201, 218, 248); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(90, 98, 223); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                    | &nbsp;
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('businessSample2') }}
-                  br
-                  div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                    | &nbsp;
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('businessSample3') }}
-                  br
-                  div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                    | &nbsp;
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('businessSample4') }}
-                  br
-                  div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(220, 93, 93); border-right: 0px none;') -
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('businessSample5') }}
-                img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/coding.png', alt='')
-                .usetweet-groups.col-lg-5.col-6.visible-lg-inline-block.visible-inline-block
-                  .usetweet-group
-                    img(data-toggle='tooltip', data-placement='top', title='frabjabulous', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/frabjabulous.png', alt="$t(altAttrFrabjabulous)")
-                    .usetweet.tweet.popover.right
-                      .arrow
-                      .popover-content
-                        | {{ $t('frabjabulousQuote') }}
-                  .usetweet-group
-                    img(data-toggle='tooltip', data-placement='top', title='_AlexandraSo_', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/AlexandraSo.png', alt="$t(altAttrAlexandraSo)")
-                    .usetweet.tweet.popover.right
-                      .arrow
-                      .popover-content
-                        | {{ $t('alexandraQuote') }}
-            .item.health-use
-              h3 {{ $t('health') }}
-              .carousel-content.row
-                .sampletasks.col-lg-4.col-6.col-xs-12
-                  h4 {{ $t('sampleHabits') }}
-                  div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(113, 176, 91); border-right: 0px none;') -
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('healthSample1') }}
-                  br
-                  div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(220, 93, 93); border-right: 0px none;') -
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('healthSample2') }}
-                  br
-                  div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(113, 176, 91); border-right: 0px none;') -
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('healthSample3') }}
-                  br
-                  div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(255, 207, 66); border-right: 0px none;') -
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('healthSample4') }}
-                  br
-                  div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                    | &nbsp;
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('healthSample5') }}
-                img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/clipart-rosemonkeyct-meditation.png', alt='')
-                .usetweet-groups.col-lg-5.col-6.visible-lg-inline-block.visible-inline-block
-                  .usetweet-group
-                    img(data-toggle='tooltip', data-placement='top', title='EvaGantz', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/EvaGantz.png', alt="$t(altAttrEvaGantz)")
-                    .usetweet.tweet.popover.right
-                      .arrow
-                      .popover-content
-                        | {{ $t('evagantzQuote') }}
-                  .usetweet-group
-                    img(data-toggle='tooltip', data-placement='top', title='supermouse35', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/supermouse35.png', :alt="$t('altAttrSupermouse35')")
-                    .usetweet.tweet.popover.right
-                      .arrow
-                      .popover-content
-                      |  {{ $t('supermouse35Quote') }}
-            .item.team-use
-              h3 {{ $t('teams') }}
-              .carousel-content.row
-                .sampletasks.col-lg-4.col-6.col-xs-12
-                  h4 {{ $t('sampleToDo') }}
-                  div(style='width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
-                      span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
-                    | &nbsp;
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('teamSample1') }}
-                  br
-                  div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
-                      span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
-                    | &nbsp;
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('teamSample2') }}
-                  br
-                  div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);')
-                      span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
-                    | &nbsp;
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('teamSample3') }}
-                  br
-                img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/publicSpaces.png', alt='')
-                .usetweet-groups.col-lg-5.col-6.visible-lg-inline-block.visible-inline-block
-                  .usetweet-group
-                    img(data-toggle='tooltip', data-placement='top', title='Althaire', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Althaire.png', alt="$t(altAttrAlthaire)")
-                    .usetweet.tweet.popover.right
-                      .arrow
-                      .popover-content
-                        | {{ $t('althaireQuote') }}
-            .item.school-use
-              h3 {{ $t('school') }}
-              .carousel-content.row
-                .sampletasks.col-lg-4.col-6.col-xs-12
-                  h4 {{ $t('sampleHabits') }}
-                  div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                    | &nbsp;
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('schoolSample1') }}
-                  br
-                  div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                    | &nbsp;
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('schoolSample2') }}
-                  br
-                  div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                    | &nbsp;
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('schoolSample3') }}
-                  br
-                  div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(220, 93, 93); border-right: 0px none;') -
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('schoolSample4') }}
-                  br
-                  div(style='width:100%; background-color: rgb(201, 218, 248); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(90, 98, 223); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(90, 98, 223); border-right: 0px none;') -
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('schoolSample5') }}
-                img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/reading.png', alt='')
-                .usetweet-groups.col-lg-5.col-6.visible-lg-inline-block.visible-inline-block
-                  .usetweet-group
-                    img(data-toggle='tooltip', data-placement='top', title='InfH', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/InfH.png', alt="$t(altAttrInfH)")
-                    .usetweet.tweet.popover.right
-                      .arrow
-                      .popover-content {{ $t('infhQuote') }}
-                  .usetweet-group
-                    img(data-toggle='tooltip', data-placement='top', title='Drei-M', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Drei-M.png', alt="$t(altAttrDreiM)")
-                    .usetweet.tweet.popover.right
-                      .arrow
-                      .popover-content
-                        | {{ $t('dreimQuote') }}
-            .item.improvement-use
-              h3 {{ $t('goals') }}
-              .carousel-content.row
-                .sampletasks.col-lg-4.col-6.col-xs-12
-                  h4 {{ $t('sampleDailies') }}
-                  div(style='width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
-                      span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
-                    | &nbsp;
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('goalSample1') }}
-                  br
-                  div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
-                      span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
-                    | &nbsp;
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('goalSample2') }}
-                  br
-                  div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);')
-                      span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
-                    | &nbsp;
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('goalSample3') }}
-                  br
-                img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/gaining_an_achievement_by_cosmic_caterpillar-d7uyv5z.png', alt='')
-                .usetweet-groups.col-lg-5.col-6.visible-lg-inline-block.visible-inline-block
-                  .usetweet-group
-                    img(data-toggle='tooltip', data-placement='top', title='Kazui', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Kazui.png', alt="$t(altAttrKazui)")
-                    .usetweet.tweet.popover.right
-                      .arrow
-                      .popover-content
-                        | {{ $t('kazuiQuote') }}
-            .item.housework-use
-              h3 {{ $t('chores') }}
-              .carousel-content.row
-                .sampletasks.col-lg-4.col-6.col-xs-12
-                  h4 {{ $t('sampleDailies') }}
-                  div(style='width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
-                      span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
-                    | &nbsp;
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('choreSample1') }}
-                  br
-                  div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
-                      span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
-                    | &nbsp;
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('choreSample2') }}
-                  br
-                  div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);')
-                      span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
-                    | &nbsp;
-                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('choreSample3') }}
-                  br
-                img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/dusting_by_leephon.png', alt='')
-                .usetweet-groups.col-lg-5.col-6.visible-lg-inline-block.visible-inline-block
-                  .usetweet-group
-                    img(data-toggle='tooltip', data-placement='top', title='autumnesquirrel', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/autumnesquirrel.png', :alt="$t('altAttrAutumnesquirrel')")
-                    .usetweet.tweet.popover.right
-                      .arrow
-                      .popover-content {{ $t('autumnesquirrelQuote') }}
-                  .usetweet-group
-                    img(data-toggle='tooltip', data-placement='top', title='irishfeet123', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/irishfeet123.png', :alt="$t('altAttrIrishfeet123')")
-                    .usetweet.tweet.popover.right
-                      .arrow
-                      .popover-content
-                        | {{ $t('irishfeet123Quote') }}
-      .row
-        .col-6.offset-3.text-center
-          button.btn.btn-primary.btn-lg.gamifybutton.fixedcta(@click='playButtonClick()') {{ $t('gamifyButton') }}
-    section#rewards.bg-warning.container-fluid
-      .row
-        .col-6
-          h2.headline {{ $t('rewardHeading') }}
-          p.sectioninfo
-            | {{ $t('rewardByline1') }}
-            br
-            br
-            | {{ $t('rewardByline2') }}
-          .scrolltweet.hidden-xs.hidden-sm
-            img.img-rendering-auto.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='Elmi', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Elmi.png', alt="$t(altAttrElmi)")
-            .tweet.popover.right.pull-right
-              .arrow
-              .popover-content {{ $t('elmiQuote') }}
-        .col-6
-          .avatarscroll
-            h2
-              span.glyphicon.glyphicon-check
-            h2
-              span.glyphicon.glyphicon-arrow-down
-            img.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/misc/shop_gold.png', alt='')
-            img.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/misc/shop_gold.png', alt='')
-            img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/misc/shop_gold.png', alt='')
-            h2
-              span.glyphicon.glyphicon-arrow-down
-            img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/TVreward.png', alt='')
-        .col-12
-          button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(@click='playButtonClick()') {{ $t('gamifyButton') }}
-    section#levels.container-fluid
-      .row
-        .col-6.text-center
-          h2.headline {{ $t('unlockHeadline') }}
-          p.sectioninfo
-            | {{ $t('unlockByline1') }}
-            br
-            br
-            | {{ $t('unlockByline2') }}
-          .scrolltweet.hidden-xs.hidden-sm
-            img.img-rendering-auto.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='16bitFil', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/16bitFil.png', :alt="$t('altAttr16bitFil')")
-            .tweet.popover.right.pull-right
-              .arrow
-              .popover-content
-                | {{ $t('sixteenBitFilQuote') }}
-        .col-6
-          .avatarscroll
-            img.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/avatar/avatarstatic.png', alt='')
-            h2
-              span.glyphicon.glyphicon-arrow-down
-            img.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/SAMPLEadventurers.png', alt='')
-        .col-12
-          button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(@click='playButtonClick()') {{ $t('gamifyButton') }}
-    section#health.bg-danger.container-fluid
-      .row
-        .col-6
-          h2.headline {{ $t('punishHeading1') }}
-          h2 {{ $t('punishHeading2') }}
-          p.sectioninfo {{ $t('punishByline') }}
-          .scrolltweet.hidden-xs.hidden-sm
-            img.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='Zelah Meyer', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Zelah_Meyer.png', alt="$t(altAttrZelahMeyer)")
-            .tweet.popover.right.pull-right
-              .arrow
-              .popover-content
-                | {{ $t('zelahQuote') }}
-        .col-6
-          h2
-            span.glyphicon.glyphicon-unchecked
-          .health-progress
-            .meter-label(tooltip='Health')
-              span.glyphicon.glyphicon-heart
-            .meter.health
-              .bar
-                div(style='width:100%;') &nbsp;
-          h2
-            span.glyphicon.glyphicon-arrow-down
-          .health-progress
-            .meter-label(tooltip='Health')
-              span.glyphicon.glyphicon-heart
-            .meter.health
-              .bar
-                div(style='width:50%;') &nbsp;
-        button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(@click='playButtonClick()') {{ $t('gamifyButton') }}
-    section#quest.container-fluid
-      .row
-        .col-6
-          h2.headline {{ $t('questHeading1') }}
-          h2 {{ $t('questHeading2') }}
-          p.sectioninfo
-            | {{ $t('questByline1') }}
-            br
-            | {{ $t('questByline2') }}
-          .scrolltweet.hidden-xs.hidden-sm
-            img.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='skysailor', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/skysailor.png', alt="$t(altAttrSkysailor)")
-            .tweet.popover.right.pull-right
-              .arrow
-              .popover-content
-                | {{ $t('skysailorQuote') }}
-        .col-6
-          img.clearfix.img-responsive.center-block(style='padding-bottom:30px;', src="https://d2afqr2xdmyzvu.cloudfront.net/front/images/Quest_dilatory_dragonSmall.png", alt='')
-          .row
-            .col-lg-5.col-5.offset-0.col-xs-5.col-xs-offset-0
-              .health-progress
-                .meter-label(tooltip='Health')
-                  span.glyphicon.glyphicon-heart
-                .meter.health
-                  .bar
-                    div(style='width:20%;') &nbsp;
-              .quest-friend-img
-                img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/party/AnnaCosplay.png', alt='')
-            .col-1.col-xs-1
-              h2
-                span.glyphicon.glyphicon-arrow-right
-            .col-lg-5.col-offset-1.col-5.offset-0.col-xs-5.col-xs-offset-0
-              .health-progress
-                .meter-label(tooltip='Health')
-                  span.glyphicon.glyphicon-heart
-                .meter.health
-                  .bar
-                    div(style='width:0%;') &nbsp;
-              .quest-friend-img
-                img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/party/GrimReaper.png', alt='')
-        .col-12
-          button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(@click='playButtonClick()') {{ $t('gamifyButton') }}
-    section#features.bg-info.container-fluid
-      .row
-        h2.col-12.text-center {{ $t('featuresHeading') }}
-      .row
-        .col-6
-          .feature-img
-            img.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/Mount.png', alt='')
-          .featuretext
-            h4 {{ $t('featurePetHeading') }}
-            p
-              | {{ $t('featurePetByline') }}
-        .col-6
-          .feature-img.center-block
-            img.img-rendering-auto(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/achievement-triadbingo.png', alt='')
-            img.img-rendering-auto(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/achievement-perfect.png', alt='')
-          .featuretext
-            h4 {{ $t('featureAchievementHeading') }}
-            p {{ $t('featureAchievementByline') }}
-      .row
-        .col-6
-          .feature-img
-            img.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/Promo_springclasses2015.png', alt='')
-          .featuretext
-            h4 {{ $t('featureEquipHeading') }}
-            p
-              | {{ $t('featureEquipByline') }}
-        .col-6
-          .feature-img
-            img.img-rendering-auto.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/Party-Header.png', alt='')
-          .featuretext
-            h4 {{ $t('featureSocialHeading') }}
-            p
-              | {{ $t('featureSocialByline') }}
-        button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(@click='playButtonClick()') {{ $t('gamifyButton') }}
-    #footercall.container-fluid
-      .row
-        h3.col-12.text-center {{ $t('joinOthers', {userCount}) }}
-      .row
-        .col-6.offset-3
-          button.btn.btn-primary.btn-lg.btn-block(@click='playButtonClick()') {{ $t('free') }}
-    footer.footer.container-fluid
-      .shoutout
-        h4 {{ $t('contribUse') }}
+    #intro-signup.purple-1
+      .container
         .row
-          .col-lg-2.col-2.col-offset-1.offset-1.col-xs-6.col-xs-offset-1
-            a(href='http://ionicframework.com/')
-              img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/ionic-logo-horizontal-transparent.png', alt="$t(altAttrIonic)")
-          .col-lg-2.col-lg-offset-0.col-2.col-offset-0.offset-1.col-xs-6.col-xs-offset-1
-            a(href='https://www.jetbrains.com/webstorm/')
-              img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/logo_webstorm.png', alt="$t(altAttrWebstorm)")
-          .col-lg-2.col-lg-offset-0.col-2.col-offset-0.offset-1.col-xs-6.col-xs-offset-1
-            a(href='http://github.com/')
-              img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/GitHub_Logo.png', alt="$t(altAttrGithub)")
-          .col-lg-2.col-lg-offset-0.col-2.col-offset-0.offset-1.col-xs-6.col-xs-offset-1
-            a(href='https://trello.com/')
-              img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/trello-logo-blue.png', alt="$t(altAttrTrello)")
-          .col-lg-2.col-lg-offset-0.col-2.col-offset-0.offset-1.col-xs-6.col-xs-offset-1
-            a(href='https://slack.com/')
-              img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/landing_slack_hash_wordmark_logo.png', alt="$t(altAttrSlack)")
+          .col-6
+            img(src='~assets/images/home/home-main@3x.png', width='357px')
+            h1 Motivate yourself to achieve your goals.
+            p.section-main It's time to have fun when you get things done! Join over 2 million Habiticans and improve your life one task at a time.
+          .col-6
+            h3.text-center Sign  Up For Free
+            div.text-center
+              button.social-button(@click='socialAuth("facebook")')
+                .svg-icon.social-icon(v-html="icons.facebookIcon")
+                span {{$t('signUpWithSocial', {social: 'Facebook'})}}
+              button.social-button(@click='socialAuth("facebook")')
+                .svg-icon.social-icon(v-html="icons.googleIcon")
+                span {{$t('signUpWithSocial', {social: 'Google'})}}
+            .strike
+              span OR
+            .form
+              input.form-control(type='text', placeholder='Username', v-model='username')
+              input.form-control(type='email', placeholder='Email', v-model='email')
+              input.form-control(type='password', placeholder='Password', v-model='password')
+              input.form-control(type='password', placeholder='Confirm Password', v-model='passwordConfirm')
+              p By clicking the button below, you are indicating that you have read and agree to the Terms of Service and Privacy Policy.
+              button.sign-up(@click='register()') Sign Up
+          .col-12
+            .spacer.svg-icon(v-html='icons.spacer')
 
+    #gamify-life.purple-2
+      .container-fluid
+        .pixel-horizontal.svg-icon(v-html='icons.pixelHorizontal')
+      .container
+        .row
+          .col-6.offset-3.text-center
+            h2 Gamify Your Life
+            p.section-main Habitica is a free habit-building and productivity app that treats your real life like a game. With in-game rewards and punishments to motivate you and a strong social network to inspire you, Habitica can help you achieve your goals to become healthy, hard-working, and happy.
+        .row
+          .col-4
+            img.track-habits(src='~assets/images/home/track-habits@3x.png', width='354px', height='228px')
+            strong Track Your Habits and Goals
+            p Stay accountable by tracking and managing your Habits, Daily goals, and To-Do list with Habitica’s easy-to-use mobile apps and web interface.
+          .col-4
+            img(src='~assets/images/home/earn-rewards@3x.png', width='316px', height='244px')
+            strong Earn Rewards for Your Goals
+            p Check off tasks to level up your Avatar and unlock in-game features such as battle armor, mysterious pets, magic skills, and even quests!
+          .col-4
+            img(src='~assets/images/home/battle-monsters@3x.png', width='303px', height='244px')
+            strong Battle Monsters with Friends
+            p Fight monsters with other Habiticans! Use the Gold that you earn to buy in-game or custom rewards, like watching an episode of your favorite TV show.
+      .col-12
+        .spacer.svg-icon(v-html='icons.spacer')
+
+    #use-cases.purple-2
+      .container.text-center
+        .row
+          .col-12
+            h2 Players Use Habitica to Improve
+        .row
+          .col-4
+            img(src='~assets/images/home/health-fitness@3x.png', width='300px', height='300px')
+            strong Health and Fitness
+            p Never motivated to floss? Can't seem to get to the gym? Habitica finally makes it fun to get healthy.
+          .col-4
+            img(src='~assets/images/home/school-work@3x.png', width='300px', height='300px')
+            strong School and Work
+            p Whether you're preparing a report for your teacher or your boss, it's easy to keep track of your progress as you tackle your toughest tasks.
+          .col-4
+            img(src='~assets/images/home/much-more@3x.png', width='300px', height='300px')
+            strong And much, much more!
+            p Our fully customizable task list means that you can shape Habitica to fit your personal goals. Work on creative projects, emphasize self-care, or pursue a different dream -- it's all up to you.
+      .col-12
+        .spacer.svg-icon(v-html='icons.spacer')
+      .container-fluid
+        .pixel-horizontal-2.svg-icon(v-html='icons.pixelHorizontal2')
+
+    #level-up-anywhere.purple-3
+      .container
+        .row
+          .col-6
+            .iphones.svg-icon(v-html='icons.iphones')
+          .col-6.text-column
+            h2 Level Up Anywhere
+            p Our mobile apps make it simple to keep track of your tasks on-the-go. Accomplish your goals with a single tap, no matter where you are.
+            a.app.svg-icon(v-html='icons.googlePlay', href='https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica', target='_blank')
+            a.app.svg-icon(v-html='icons.iosAppStore', href='https://itunes.apple.com/us/app/habitica-gamified-task-manager/id994882113?mt=8', target='_blank')
+      .container-fluid
+        .pixel-horizontal-3.svg-icon(v-html='icons.pixelHorizontal3')
+
+    #call-to-action.purple-4
+      .container.featured
+        .row.text-center
+          h3.col-12 Join over 2,000,000 people having fun while accomplishing their goals!
+        .row
+          .col-12.text-center
+            button.btn.btn-primary(@click='playButtonClick()') Join Habitica Today
+        .row.featured
+          .col-12.text-center
+            strong Featured in
+      .container-fluid
+        .seamless_stars_varied_opacity_repeat
+      .container-fluid.featured
+        .row
+          .col-12
+            img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/lifehacker.png', alt="$t(altAttrLifehacker)")
+            img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/nyt-logo.png', alt="$t(altAttrNewYorkTimes)")
+            img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/makeuseof.png', alt="$t(altAttrMakeUseOf)")
+            img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/Forbes_logo.png', alt="$t(altAttrForbes)")
+            img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/Cnetlogo.png', alt="$t(altAttrCnet)")
+            img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/Fast-Company-logo.png', alt="$t(altAttrFastCompany)")
+            img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/kickstarter-logo.png', alt="$t(altAttrKickstarter)")
+            img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/discover-logo.png', alt="$t(altAttrDiscover)")
+
+    #purple-footer
       app-footer
+
+    #bottom-wrap.purple-4
+      #bottom-background
+        .seamless_mountains_demo_repeat
+        .midground_foreground_extended2
 </template>
 
+<style lang="scss">
+  #purple-footer {
+    background-color: #271b3d;
+
+    footer, footer a {
+      background: transparent;
+      color: #d5c8ff;
+    }
+
+    .logo {
+      color: #bda8ff;
+    }
+
+    .social-circle, .btn-donate {
+      background: #36205d;
+      color: #bda8ff;
+
+      .svg-icon {
+        color: #bda8ff;
+      }
+    }
+  }
+</style>
+
 <style lang="scss" scoped>
   @import '~client/assets/scss/static.scss';
 
-  .logo {
-    width: 128px;
-    height: 28px;
-    color: purple;
-  }
-
-  #intro {
-    background: #fff;
-    padding-top: 1em;
-    padding-bottom: 1em;
-
-    .cta {
-      color: #fff;
-      padding: 2em;
+  #front {
+    .container-fluid {
+      margin: 0;
     }
 
-    .presslogos {
-      padding: 2em;
+    .container {
+      padding-top: 5em;
+      padding-bottom: 5em;
+    }
+
+    .logo {
+      width: 128px;
+      height: 28px;
+      color: purple;
+    }
+
+    .purple-1, .purple-2, .purple-3, .purple-4, h1, h2, h3, h4, h5 {
+      color: #fff;
+    }
+
+    .purple-1 {
+      background-color: #6133b4;
+    }
+
+    .purple-2 {
+      background-color: #432874;
+    }
+
+    .purple-3 {
+      background-color: #36205d;
+    }
+
+    .purple-4 {
+      background-color: #271b3d;
+    }
+
+    p.section-main {
+      font-size: 18px;
+      line-height: 1.33;
+    }
+
+    h2 {
+      font-size: 48px;
+      line-height: 1.33;
+    }
+
+    .spacer {
+      width: 24px;
+      height: 24px;
+      margin: 0 auto;
+      margin-top: 2em;
+    }
+
+    .pixel-horizontal {
+      color: #6133b4;
+    }
+
+    .pixel-horizontal-2 {
+      color: #432874;
+    }
+
+    .pixel-horizontal-3 {
+      color: #271b3d;
+    }
+  }
+
+  #intro-signup {
+    margin-top: 4em;
+
+    img {
+      margin: 0 auto;
+      display: block;
+    }
+
+    h1 {
+      font-size: 56px;
+      line-height: 1.14;
+    }
+
+    h3 {
+      font-size: 24px;
+    }
+
+    .social-button {
+      border-radius: 2px;
+      border: solid 2px #bda8ff;
+      width: 206px;
+      height: 40px;
+      background: transparent;
+      margin-right: .5em;
+      color: #fff;
+    }
+
+    .social-icon {
+      margin-right: 1em;
+      width: 18px;
+      height: 18px;
+      display: inline-block;
+      vertical-align: top;
+      margin-top: .2em;
+    }
+
+    .strike {
+      display: block;
+      text-align: center;
+      overflow: hidden;
+      white-space: nowrap;
+      margin-top: 1.5em;
+      margin-bottom: 1.5em;
+    }
+
+    .strike > span {
+      position: relative;
+      display: inline-block;
+    }
+
+    .strike > span:before,
+    .strike > span:after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      width: 9999px;
+      height: 1px;
+      background: #fff;
+    }
+
+    .strike > span:before {
+      right: 100%;
+      margin-right: 15px;
+    }
+
+    .strike > span:after {
+      left: 100%;
+      margin-left: 15px;
+    }
+
+    input {
+      margin-bottom: 1em;
+      border-radius: 2px;
+      background-color: #432874;
+      border-color: #432874;
+    }
+
+    button.sign-up {
+      width: 100%;
+      height: 48px;
+      color: #fff;
+      border: none;
+      border-radius: 2px;
+      background-color: #2995cd;
+      font-size: 16px;
+    }
+  }
+
+  #gamify-life {
+    text-align: center;
+
+    img {
+      margin-top: 1em;
+      margin-bottom: 1.5em;
+    }
+
+    .track-habits {
+      margin-bottom: 2.5em;
+    }
+
+    strong {
+      font-size: 20px;
+    }
+  }
+
+  #use-cases {
+    strong {
+      font-size: 20px;
+    }
+
+    img {
+      display: block;
+      height: 200px;
+      width: 200px;
+      margin: 0 auto;
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+  }
+
+  #level-up-anywhere {
+    .app {
+      display: inline-block;
+      width: 135px;
+      margin-right: .5em;
+    }
+
+    .iphones {
+      width: 436px
+    }
+
+    .text-column {
+      padding-top: 9em;
+    }
+  }
+
+  #call-to-action {
+    .row {
+      margin-top: 1em;
+      margin-bottom: 1em;
+    }
+
+    h3 {
+      font-size: 32px;
+    }
+
+    .btn-primary {
+      width: 411px;
+      height: 48px;
+      border-radius: 2px;
+      background-color: #9a62ff;
+      box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.24), 0 1px 4px 0 rgba(26, 24, 29, 0.16);
+      margin-bottom: 5em;
+    }
+
+    .container.featured {
+      padding-bottom: 0;
+    }
+
+    .container-fluid.featured {
+      padding-bottom: 5em;
+    }
+
+    .featured .row {
+      margin-top: 0;
+    }
+
+    .featured {
+      text-align: center;
 
       img {
         max-height: 30px;
         max-width: 120px;
-        filter: grayscale(100%);
-        -moz-filter: grayscale(100%);
-        -ms-filter: grayscale(100%);
-        -o-filter: grayscale(100%);
-        filter: gray;
-        -webkit-filter: grayscale(100%);
-        margin-right: 2em;
+        vertical-align: middle;
+        margin: 20px;
+        -moz-filter: brightness(0) invert(1);
+        -ms-filter: brightness(0) invert(1);
+        -o-filter: brightness(0) invert(1);
+        filter: brightness(0) invert(1);
+        -webkit-filter: brightness(0) invert(1);
       }
     }
 
-    .bg-success {
-      background-color: #dff0d8 !important;
+    .seamless_stars_varied_opacity_repeat {
+      background-image: url('~assets/images/auth/seamless_stars_varied_opacity.png');
+      background-repeat: repeat-x;
+      position: absolute;
+      height: 500px;
+      width: 100%;
     }
   }
 
-  #intro-text {
-    .lead {
-      padding: 2em;
-    }
+  #bottom-wrap {
+    padding-top: 10em;
   }
 
-  #testimonial-carousel {
-    padding: 2em;
-    background-color: #d9edf7 !important;
+  #bottom-background {
+    position: relative;
 
-    h2 {
-      margin-top: 2em;
-      margin-bottom: 3em;
+    .seamless_mountains_demo_repeat {
+      background-image: url('~assets/images/auth/seamless_mountains_demo.png');
+      background-repeat: repeat-x;
+      width: 100%;
+      height: 500px;
+      position: absolute;
+      z-index: 0;
+      bottom: 0;
     }
 
-    .item {
-      display: none;
+    .midground_foreground_extended2 {
+      background-image: url('~assets/images/auth/midground_foreground_extended2.png');
+      position: relative;
+      width: 1500px;
+      max-width: 100%;
+      height: 150px;
+      margin: 0 auto;
     }
-
-    .item.active {
-      display: block;
-    }
-
-    #quote-carousel {
-      margin-top: 7em;
-
-      .user-selector {
-        margin-top: 2em;
-      }
-
-      .user-icon {
-        display: inline-block;
-        vertical-align: bottom;
-
-        img {
-          width: 80px;
-        }
-      }
-    }
-  }
-
-  #uses {
-    padding: 2em;
   }
 </style>
 
 <script>
+  import hello from 'hellojs';
   import AppFooter from 'client/components/appFooter';
   import StaticHeader from './header.vue';
+  import googlePlay from 'assets/images/home/google-play-badge.svg';
+  import iosAppStore from 'assets/images/home/ios-app-store.svg';
+  import iphones from 'assets/images/home/iphones.svg';
+  import spacer from 'assets/images/home/spacer.svg';
+  import pixelHorizontal from 'assets/images/home/pixel-horizontal.svg';
+  import pixelHorizontal2 from 'assets/images/home/pixel-horizontal-2.svg';
+  import pixelHorizontal3 from 'assets/images/home/pixel-horizontal-3.svg';
+  import facebookSquareIcon from 'assets/svg/facebook-square.svg';
+  import googleIcon from 'assets/svg/google.svg';
   import * as Analytics from 'client/libs/analytics';
 
   export default {
@@ -611,7 +462,22 @@
     },
     data () {
       return {
+        icons: Object.freeze({
+          googlePlay,
+          iosAppStore,
+          iphones,
+          spacer,
+          pixelHorizontal,
+          pixelHorizontal2,
+          pixelHorizontal3,
+          facebookIcon: facebookSquareIcon,
+          googleIcon,
+        }),
         userCount: 1000000,
+        username: '',
+        password: '',
+        passwordConfirm: '',
+        email: '',
       };
     },
     mounted () {
@@ -621,8 +487,34 @@
         eventAction: 'landing page',
         page: '/home',
       });
+
+      hello.init({
+        facebook: process.env.FACEBOOK_KEY, // eslint-disable-line
+        // windows: WINDOWS_CLIENT_ID,
+        google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line
+      });
     },
     methods: {
+      async register () {
+        if (this.password !== this.passwordConfirm) {
+          alert('Passwords must match');
+          return;
+        }
+
+        await this.$store.dispatch('auth:register', {
+          username: this.username,
+          email: this.email,
+          password: this.password,
+          passwordConfirm: this.passwordConfirm,
+        });
+
+        if (this.$store.state.afterLoginRedirect) {
+          window.location.href = this.$store.state.afterLoginRedirect;
+          return;
+        }
+
+        window.location.href = '/';
+      },
       playButtonClick () {
         Analytics.track({
           hitType: 'event',
@@ -632,6 +524,21 @@
         });
         this.$router.push('/register');
       },
+      async socialAuth (network) {
+        const url = window.location.href;
+
+        let auth = await hello(network).login({
+          scope: 'email',
+          // explicitly pass the redirect url or it might redirect to /home
+          redirect_uri: url, // eslint-disable-line camelcase
+        });
+
+        await this.$store.dispatch('auth:socialAuth', {
+          auth,
+        });
+
+        window.location.href = '/';
+      },
     },
   };
 </script>
diff --git a/website/client/mixins/payments.js b/website/client/mixins/payments.js
index 67f4618f2d..255936f3f3 100644
--- a/website/client/mixins/payments.js
+++ b/website/client/mixins/payments.js
@@ -1,9 +1,23 @@
 import axios from 'axios';
 
+let AUTH_SETTINGS = localStorage.getItem('habit-mobile-settings');
+let API_TOKEN = '';
+if (AUTH_SETTINGS) {
+  AUTH_SETTINGS = JSON.parse(AUTH_SETTINGS);
+  API_TOKEN = AUTH_SETTINGS.auth.apiToken;
+}
+
 const STRIPE_PUB_KEY = process.env.STRIPE_PUB_KEY; // eslint-disable-line
 import subscriptionBlocks from '../../common/script/content/subscriptionBlocks';
 
+let StripeCheckout = window.StripeCheckout;
+
 export default {
+  computed: {
+    paypalCheckoutLink () {
+      return `/paypal/checkout?_id=${this.user._id}&apiToken=${API_TOKEN}`;
+    },
+  },
   methods: {
     showStripe (data) {
       if (!this.checkGemAmount(data)) return;
@@ -23,7 +37,7 @@ export default {
       if (data.gift && data.gift.type === 'gems') amount = data.gift.gems.amount / 4 * 100;
       if (data.group) amount = (sub.price + 3 * (data.group.memberCount - 1)) * 100;
 
-      this.StripeCheckout.open({
+      StripeCheckout.open({
         key: STRIPE_PUB_KEY,
         address: false,
         amount,
@@ -65,6 +79,30 @@ export default {
         },
       });
     },
+    showStripeEdit (config) {
+      let groupId;
+      if (config && config.groupId) {
+        groupId = config.groupId;
+      }
+
+      StripeCheckout.open({
+        key: STRIPE_PUB_KEY,
+        address: false,
+        name: this.$t('subUpdateTitle'),
+        description: this.$t('subUpdateDescription'),
+        panelLabel: this.$t('subUpdateCard'),
+        token: async (data) => {
+          data.groupId = groupId;
+          let url = '/stripe/subscribe/edit';
+          let response = await axios.post(url, data);
+
+          // Succss
+          window.location.reload(true);
+          // error
+          alert(response.message);
+        },
+      });
+    },
     checkGemAmount (data) {
       let isGem = data && data.gift && data.gift.type === 'gems';
       let notEnoughGem = isGem && (!data.gift.gems.amount || data.gift.gems.amount === 0);
diff --git a/website/client/store/index.js b/website/client/store/index.js
index f5b95045de..8c8cf9358e 100644
--- a/website/client/store/index.js
+++ b/website/client/store/index.js
@@ -114,6 +114,7 @@ export default function () {
       upgradingGroup: {},
       notificationStore: [],
       modalStack: [],
+      afterLoginRedirect: '',
     },
   });
 
diff --git a/website/common/script/ops/unlock.js b/website/common/script/ops/unlock.js
index dbbb01352e..036fa9bbd7 100644
--- a/website/common/script/ops/unlock.js
+++ b/website/common/script/ops/unlock.js
@@ -94,9 +94,12 @@ module.exports = function unlock (user, req = {}, analytics) {
       // Using Object so path[1] won't create an array but an object {path: {1: value}}
       setWith(user, `purchased.${path}`, true, Object);
 
-      let backgroundContent = content.backgroundsFlat[value];
-      let itemInfo = getItemInfo(user, 'background', backgroundContent);
-      removeItemByPath(user, itemInfo.path);
+      // @TODO: Test and check test coverage
+      if (isBackground) {
+        let backgroundContent = content.backgroundsFlat[value];
+        let itemInfo = getItemInfo(user, 'background', backgroundContent);
+        removeItemByPath(user, itemInfo.path);
+      }
     }
   }