diff --git a/html/index.html b/html/index.html
index 37b236b..891abe0 100644
--- a/html/index.html
+++ b/html/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">
     <script>
 
 		(function (PageType) {
@@ -30,43 +31,63 @@
 					jsonData = {
 						pages: [
 							//*** Tutorial ***//
+							{
+								id: "ASsdgASD#$5F",
+								type: PageType.ImageAndText,
+								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/images/kin-logo.svg",
+								title: "What is Kin?",
+								bodyHtml: "Kin is a new currency for use in everyday digital services. In our Marketplace you\’ll be able to earn Kin by completing tasks and spend Kin on top brands",
+								rewardText: "Finish the tutorial and earn",
+								rewardValue: 6000,
+								buttonText: "Next",
+							},
+							{
+								id: "3e#$5F",
+								type: PageType.ImageAndText,
+								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/images/globehands.svg",
+								title: "Kin Marketplace",
+								bodyHtml: "The Kin Marketplace experience provides you with a core wallet functionally which includes a place to view your balance as well as incoming/outgoing payments. The Marketplace is a home base where you can engage in the earn/spend opportunities.",
+								rewardText: "Finish the tutorial and earn",
+								rewardValue: 6000,
+								buttonText: "Next",
+							},
+							{
+								id: "ASDFASD#$5F",
+								type: PageType.ImageAndText,
+								image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/images/kin-club.svg",
+								title: "How to earn/spend Kin?",
+								bodyHtml: "You can earn Kin by investing a little time to complete tasks such as answering short surveys, watching a video or reading a tutorial just like this one.",
+								rewardText: "Finish the tutorial and earn",
+								rewardValue: 6000,
+								buttonText: "Got It",
+							},
+							{
+								type: PageType.EarnThankYou,
+								rewardValue: "4,500"
+							},
+
+							//*** Poll ***//
 							// {
-							// 	type: PageType.ImageAndText,
-							// 	id: "ASsdgASD#$5F",
-							// 	image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kinlogoTut%403x.png",
-							// 	title: "What is Kin?",
-							// 	bodyHtml: "Kin is a new currency for use in everyday digital services. In our Marketplace you\’ll be able to earn Kin by completing tasks and spend Kin on top brands",
-							// 	footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
-							// 	buttonText: "Next",
-							// },
-							// {
-							// 	id: "3e#$5F",
-							// 	type: PageType.ImageAndText,
-							// 	image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/kinMarketplaceIcon%403x.png",
-							// 	title: "Kin Marketplace",
-							// 	bodyHtml: "The Kin Marketplace experience provides you with a core wallet functionally which includes a place to view your balance as well as incoming/outgoing payments. The Marketplace is a home base where you can engage in the earn/spend opportunities.",
-							// 	footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
-							// 	buttonText: "Next",
-							// },
-							// {
-							// 	id: "ASDFASD#$5F",
-							// 	type: PageType.ImageAndText,
-							// 	image: "https://s3.amazonaws.com/htmlpoll.kinecosystem.com/walletsIcon%403x.png",
-							// 	title: "How to earn/spend Kin?",
-							// 	bodyHtml: "You can earn Kin by investing a little time to complete tasks such as answering short surveys, watching a video or reading a tutorial just like this one.",
-							// 	footerHtml: "Finish the tutorial and earn <span style='color:#047cfc;'>6,000</span> Kin",
-							// 	buttonText: "Got It",
-							// },
-							// {
-							// 	type: PageType.EarnThankYou,
-							//    description: "4,500"
+							// 	type: PageType.FullPageMultiChoice,
+							// 	title: "Who do you primarily chat with on Kik?",
+							// 	rewardText: "Finish the poll to earn",
+							// 	rewardValue: 6000,
+							// 	question: {
+							// 		id: "G@#$",
+							// 		answers: [
+							// 			"New friends I’ve met on Kik",
+							// 			"Friends I’ve met elsewhere online",
+							// 			"Friends I know from real life",
+							// 			"An equal mix of all three!",
+							// 			"An equal mix of all four!",
+							// 		],
+							// 	},
 							// },
-							//
-							//*** Poll ***//
 							// {
 							// 	type: PageType.FullPageMultiChoice,
 							// 	title: "Who do you primarily chat with on Kik?",
-							// 	description: "Finish the poll to earn <span style='color:#047cfc;'>6,000</span> Kin",
+							// 	rewardText: "Finish the poll to earn",
+							// 	rewardValue: 6000,
 							// 	question: {
 							// 		id: "G@#$",
 							// 		answers: [
@@ -74,20 +95,24 @@
 							// 			"Friends I’ve met elsewhere online",
 							// 			"Friends I know from real life",
 							// 			"An equal mix of all three!",
+							// 			"An equal mix of all four!",
 							// 		],
 							// 	},
 							// },
 							// {
 							// 	type: PageType.EarnThankYou,
-							// 	description: "4,500"
+							// 	description: "4,500",
+							// 	rewardValue: "4,500",
 							// },
 
 							//*** Quiz ***//
 							// {
 							// 	type: PageType.TimedFullPageMultiChoice,
-							// 	description: "What was the name of the substance that Star Wars hero Han Solo was encased in?",
+							// 	title: "What was the name of the substance that Star Wars hero Han Solo was encased in?",
 							// 	amount: 15,
 							// 	rightAnswer: 3,
+							// 	rewardText: "Finish the poll to earn",
+							// 	rewardValue: 6000,
 							// 	question: {
 							// 		id: "erthwt",
 							// 		answers: [
@@ -95,57 +120,67 @@
 							// 			"Argonite",
 							// 			"Carbonite",
 							// 			"Kryptonite",
+							// 			"Kryptonite-2",
 							// 		],
 							// 	},
 							// },
-							{
-								type: PageType.TimedFullPageMultiChoice,
-								description: "How much wood could a woodchuck chuck?",
-								amount: 15,
-								rightAnswer: 2,
-								question: {
-									id: "question-1",
-									answers: [
-										"Not a lot, they are very small",
-										"A woodchuck would chuck as much wood as a woodchuck could chuck",
-										"320 kg",
-										"361.9237001 cm3",
-									],
-								},
-							},
-							{
-								type: PageType.TimedFullPageMultiChoice,
-								description: "Yes?",
-								amount: 20,
-								rightAnswer: 3,
-								question: {
-									id: "question-2",
-									answers: [
-										"Of course",
-										"no",
-										"320 kg",
-										"Camel",
-									],
-								},
-							},
-							{
-								type: PageType.TimedFullPageMultiChoice,
-								description: "Color?",
-								amount: 15,
-								rightAnswer: 4,
-								question: {
-									id: "question-3",
-									answers: [
-										"Yellow",
-										"Red",
-										"Crimson",
-										"Dorothy",
-									],
-								},
-							},
-							{
-								type: PageType.SuccessBasedThankYou,
-							},
+							// {
+							// 	type: PageType.TimedFullPageMultiChoice,
+							// 	title: "How much wood could a woodchuck chuck?",
+							// 	amount: 15,
+							// 	rightAnswer: 2,
+							// 	rewardText: "Finish the poll to earn",
+							// 	rewardValue: 6000,
+							// 	question: {
+							// 		id: "question-1",
+							// 		answers: [
+							// 			"Not a lot, they are very small",
+							// 			"A woodchuck would chuck as much wood as a woodchuck could chuck",
+							// 			"320 kg",
+							// 			"361.9237001 cm3",
+							// 			"361.9237001 cm3-2",
+							// 		],
+							// 	},
+							// },
+							// {
+							// 	type: PageType.TimedFullPageMultiChoice,
+							// 	title: "Yes?",
+							// 	amount: 20,
+							// 	rightAnswer: 3,
+							// 	rewardText: "Finish the poll to earn",
+							// 	rewardValue: 6000,
+							// 	question: {
+							// 		id: "question-2",
+							// 		answers: [
+							// 			"Of course",
+							// 			"no",
+							// 			"320 kg",
+							// 			"Camel",
+							// 			"Camel-2",
+							// 		],
+							// 	},
+							// },
+							// {
+							// 	type: PageType.TimedFullPageMultiChoice,
+							// 	title: "Color?",
+							// 	amount: 15,
+							// 	rightAnswer: 4,
+							// 	rewardText: "Finish the poll to earn",
+							// 	rewardValue: 6000,
+							// 	question: {
+							// 		id: "question-3",
+							// 		answers: [
+							// 			"Yellow",
+							// 			"Red",
+							// 			"Crimson",
+							// 			"Dorothy",
+							// 			"Dorothy-2",
+							// 		],
+							// 	},
+							// },
+							// {
+							// 	type: PageType.SuccessBasedThankYou,
+							// },
 						]
 					}
 				}
diff --git a/images/cheering-hands.svg b/images/cheering-hands.svg
new file mode 100644
index 0000000..41e12bc
--- /dev/null
+++ b/images/cheering-hands.svg
@@ -0,0 +1,86 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360" height="213" viewBox="0 0 360 213">
+    <defs>
+        <path id="a" d="M50.926 0l15.875 83.423-50.907 9.687L.02 9.687c.816 4.292 12.874 5.602 26.931 2.927C41.009 9.939 51.743 4.293 50.926 0"/>
+        <path id="c" d="M82.47 25.193L15.943 50.612c-4.691 1.792-9.994-.58-11.786-5.27L1.482 38.34c-1.792-4.69.579-9.994 5.269-11.786l66.528-25.42c4.69-1.791 9.994.58 11.786 5.27l2.675 7.003c1.792 4.69-.58 9.994-5.27 11.786"/>
+        <path id="e" d="M55.047-49.122h47.077v113.35H55.047z"/>
+        <path id="f" d="M.394.322h6.638v6.637H.394z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#DF78E8" d="M102.816 160.37l.717-7.262c.347-3.513-1.531-7.454-4.824-8.723l-6.61-4.259-3.764 6.352-2.331 13.985 16.812-.094z"/>
+        <path stroke="#DF78E8" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M100.357 137.064c-.464-4.362-2.506-7.823-7.61-8.446-14.766-1.805-16.084 27.98-16.325 33.239"/>
+        <path stroke="#DF78E8" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M104.999 140.2c-.464-4.364-2.506-7.824-7.612-8.448-14.764-1.805-16.082 27.981-16.324 33.24"/>
+        <path stroke="#DF78E8" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M92.674 134.858c-.464-4.363-2.506-7.823-7.612-8.447-14.764-1.804-16.082 27.98-16.324 33.24"/>
+        <path stroke="#1F1F1F" stroke-linecap="round" stroke-linejoin="round" d="M91.951 119.566c3.438 2.107 6.607 5.604 8.036 9.533 1.377 3.787 1.41 8.127-1.123 11.44-1.296 1.695-3.054 2.77-5.152 3.104-1.823.29-3.85.133-5.477-.803a4.987 4.987 0 0 1-1.343-1.11"/>
+        <path stroke="#1F1F1F" stroke-linecap="round" stroke-linejoin="round" d="M99.68 121.367c3.372 2.2 6.531 5.863 7.972 9.636 1.484 3.887 1.4 8.448-1.135 11.761-1.296 1.694-3.054 2.77-5.152 3.104-1.823.29-3.85.133-5.477-.804a4.999 4.999 0 0 1-1.343-1.109M103.1 148.469a9.502 9.502 0 0 1-2.873-1.046 6.64 6.64 0 0 1-1.543-1.292"/>
+        <path stroke="#DF78E8" stroke-width="42" d="M76.771 217.212l5.268-60.056"/>
+        <path stroke="#149E83" stroke-width="2" d="M100.733 184.454c5.543.539 5.89 2.216 5.886 3.608-.163 4.32-12.008 7.383-26.458 6.838-14.448-.546-26.03-4.491-25.866-8.814.06-1.572 1.25-3.006 4.36-2.713"/>
+        <path stroke="#F1BD19" stroke-width="2" d="M101.201 173.235c3.8.327 4.989 3.304 4.525 5.071-1.098 4.183-13.325 4.6-27.31.931-13.987-3.67-24.435-10.036-23.337-14.219.39-1.486 1.457-2.884 5.399-2.558"/>
+        <path fill="#F28433" d="M101.913 86.208l18.103 7.25c.938.375.889 1.72-.073 2.026L74.86 109.877a1.077 1.077 0 0 1-1.354-.698l-8.058-25.24a1.077 1.077 0 0 1 .698-1.355l45.12-14.405c.964-.307 1.783.761 1.235 1.611l-10.59 16.418z"/>
+        <path fill="#DF78E8" d="M64.2 83.107l16.056 50.292"/>
+        <path stroke="#DB497B" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M64.2 83.107l16.056 50.292"/>
+        <path fill="#DF78E8" d="M68.898 146.31c.08-.695.735-3.638 1.161-4.72 1.082-2.752 2.57-5.568 5.095-7.251 2.645-1.762 6.376-2.2 9.194-.588a8 8 0 0 1 2.976 10.915c-2.607 4.562-2.65 7.982-2.66 8.008"/>
+        <path stroke="#1F1F1F" stroke-linecap="round" stroke-linejoin="round" d="M68.898 146.31c.08-.695.735-3.638 1.161-4.72 1.082-2.752 2.57-5.568 5.095-7.251 2.645-1.762 6.376-2.2 9.194-.588a8 8 0 0 1 2.976 10.915c-2.607 4.562-2.65 7.982-2.66 8.008"/>
+        <path fill="#6F41E8" d="M216.834 218.63l-50.904 9.686-15.882-83.46 50.904-9.688z"/>
+        <g transform="translate(153.207 151.883)">
+            <mask id="b" fill="#fff">
+                <use xlink:href="#a"/>
+            </mask>
+            <use fill="#936BFB" xlink:href="#a"/>
+            <path fill="#FFD654" d="M44.984 29.814c1.177 6.182-2.881 12.147-9.063 13.322-6.181 1.177-12.146-2.88-13.323-9.062-1.176-6.181 2.882-12.146 9.064-13.322 6.18-1.176 12.146 2.88 13.322 9.063M69.75 12.454c1.176 6.182-2.882 12.146-9.064 13.323-6.18 1.176-12.146-2.882-13.323-9.063-1.176-6.18 2.882-12.146 9.064-13.323 6.181-1.175 12.146 2.882 13.322 9.063M73.627 43.077c1.177 6.182-2.88 12.146-9.063 13.322-6.18 1.176-12.146-2.88-13.323-9.062-1.176-6.182 2.882-12.147 9.064-13.323 6.181-1.176 12.146 2.881 13.322 9.063M24.995 54.865c1.176 6.182-2.882 12.146-9.063 13.322-6.182 1.177-12.147-2.88-13.323-9.062-1.176-6.182 2.881-12.147 9.063-13.323 6.181-1.176 12.146 2.881 13.323 9.063M13.588 25.652c1.177 6.182-2.88 12.146-9.063 13.323-6.18 1.176-12.146-2.882-13.322-9.063C-9.974 23.73-5.916 17.765.266 16.59c6.181-1.176 12.146 2.881 13.322 9.063" mask="url(#b)"/>
+        </g>
+        <path fill="#1F1F1F" d="M163.302 148.703c-2.77 0-5.202-.208-7.229-.617-3.289-.675-5.252-1.845-5.527-3.293-.305-1.585 1.387-3.234 2.859-4.337 4.18-3.153 11.922-6.03 20.712-7.699 4.732-.9 9.417-1.377 13.552-1.377 3.222 0 6.069.294 8.231.85 2.695.683 4.316 1.77 4.564 3.061.294 1.563-1.34 3.183-2.762 4.267-4.105 3.14-12.079 6.116-20.81 7.766-4.742.902-9.442 1.38-13.59 1.38"/>
+        <path fill="#6F41E8" d="M187.67 130.88c-4.037 0-8.72.448-13.646 1.386-9.12 1.73-16.849 4.72-20.919 7.79-2.2 1.65-3.34 3.32-3.05 4.83.33 1.74 2.51 2.99 5.92 3.69 2.045.413 4.532.627 7.33.627 4.045 0 8.738-.447 13.68-1.387 9.2-1.74 16.98-4.77 21.02-7.86 2.14-1.63 3.23-3.27 2.95-4.76-.3-1.56-2.09-2.73-4.93-3.45-2.216-.569-5.072-.866-8.355-.866m.001 0v1c3.18 0 5.982.29 8.108.835 2.458.624 3.988 1.597 4.193 2.666.193 1.026-.72 2.368-2.574 3.78-4.046 3.095-11.939 6.034-20.6 7.672-4.71.897-9.376 1.37-13.493 1.37-2.739 0-5.138-.204-7.129-.606-3.035-.623-4.908-1.68-5.139-2.9-.199-1.037.748-2.4 2.67-3.842 4.06-3.063 11.917-5.978 20.505-7.607 4.7-.894 9.354-1.368 13.458-1.368l.001-1"/>
+        <path fill="#FFD654" d="M197.715 138.916c-.1.08-.21.17-.32.25-4.04 3.09-11.94 6.03-20.6 7.67-4.71.89-9.37 1.37-13.49 1.37-2.74 0-5.14-.21-7.13-.61-.22-.04-.43-.09-.63-.14a79.68 79.68 0 0 1-2.14-6.37c-.1-.34-.2-.68-.3-1.03-2.42-8.57-4.55-20.98-2.59-34.74.1 0 43.34-6.62 43.34-6.62s-1.21 15.85 2.17 33.05c.07.36.15.73.23 1.1.41 2.01.9 4.05 1.46 6.07"/>
+        <path stroke="#FFD654" stroke-linecap="round" stroke-linejoin="round" stroke-width="14" d="M168.05 100.19c-.743-4.25-1.958-5.802-4.049-7.49-.98-.79-2.479-.82-3.31.13-2.173 2.478-3.58 10.567-3.998 20.868 0 0-.383 8.042 1.148 14.17"/>
+        <path fill="#B23E66" d="M116.145 119.625c-.71-1.839.836-3.758 2.784-3.453l8.908 1.39 8.91 1.39c1.948.305 2.835 2.604 1.598 4.14l-5.658 7.018-5.66 7.02c-1.236 1.535-3.671 1.155-4.382-.684l-3.25-8.41-3.25-8.41zM226.297 77.538c-.696-1.845-3.129-2.243-4.378-.718l-5.71 6.978-5.713 6.976c-1.249 1.526-.378 3.831 1.568 4.15l8.898 1.458 8.898 1.458c1.945.32 3.506-1.588 2.81-3.433l-3.186-8.434-3.187-8.435z"/>
+        <g transform="translate(129.825 81.122)">
+            <mask id="d" fill="#fff">
+                <use xlink:href="#c"/>
+            </mask>
+            <use fill="#DB497B" xlink:href="#c"/>
+            <path fill="#1DC2A4" d="M33.918 1.95l-17.6 92.97c-.933 4.933-5.734 8.206-10.668 7.271l-11.219-2.124c-4.933-.933-8.206-5.734-7.272-10.668L4.76-3.57c.933-4.933 5.734-8.206 10.668-7.27l11.22 2.122c4.932.935 8.205 5.734 7.271 10.668M101.965-36.17l-17.6 92.968c-.933 4.933-5.734 8.206-10.668 7.271l-11.219-2.123c-4.933-.934-8.205-5.735-7.272-10.668l17.6-92.97c.933-4.933 5.734-8.206 10.668-7.27l11.22 2.123c4.932.934 8.205 5.734 7.271 10.668" mask="url(#d)"/>
+        </g>
+        <path fill="#FFD654" d="M196.531 93.4c-.943-5.403-2.78-8.693-6.548-11.73-3.782-3.053-9.11-2.821-12.456.43-3.548-1.294-7.6-.41-10.18 2.529-.378.432-.687.9-.942 1.388-3.725-1.75-8.207-.966-10.979 2.199-2.548 2.908-1.578 6.182 1.331 8.73 1.363 1.195 5.52 10.355 11.284 10.245a7.97 7.97 0 0 0 1.212-.105 6.995 6.995 0 0 0 5.677-5.652c1.293 1.347 3.088 2.173 5.03 2.173a6.97 6.97 0 0 0 5.854-3.164c1.113.729 2.424 1.163 3.814 1.163a7 7 0 0 0 6.903-8.205"/>
+        <path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M164.216 84.457c3.44 1.043 6.372 3.655 8.22 6.702 1.253 2.066 2.42 4.495 2.821 6.887.24 1.431.397 3.2.027 4.501M176.245 81.036c3.44 1.043 6.401 3.581 8.25 6.628 1.252 2.065 2.312 4.47 2.713 6.861.388 2.315.1 4.766-1.154 6.503"/>
+        <path fill="#FFD654" d="M168.894 128.326c.008-.032.314-3.38 2.229-7.62a8 8 0 0 0-4.001-10.583c-3.2-1.443-7.494-.603-9.534 2.358-1.714 2.488-2.975 5.47-3.646 8.384-.717 3.114-1.047 6.273-1.047 9.483"/>
+        <path stroke="#1F1F1F" stroke-linecap="round" stroke-linejoin="round" d="M168.894 128.326c.008-.032.314-3.38 2.229-7.62a8 8 0 0 0-4.001-10.583c-3.2-1.443-7.494-.603-9.534 2.358-1.714 2.488-2.975 5.47-3.646 8.384-.717 3.114-1.047 6.273-1.047 9.483"/>
+        <path fill="#FFD654" stroke="#FFD654" d="M280.347 199.317c4.019.747 17.298 4.266 17.017 18.068a.917.917 0 0 1-.9.89c-3.445.073-16.064-.84-17.196-18.003a.916.916 0 0 1 1.079-.955z"/>
+        <path fill="#FFD654" stroke="#FFD654" d="M282.026 200.216c1.305-3.873 6.655-16.525 20.282-14.306a.915.915 0 0 1 .754 1.015c-.412 3.422-3.09 15.787-20.242 14.495a.917.917 0 0 1-.794-1.204z"/>
+        <path fill="#F28433" d="M287.507 199.519a4.623 4.623 0 1 1-9.246 0 4.623 4.623 0 0 1 9.246 0"/>
+        <path fill="#1DC2A4" d="M308.207 143.273a8 8 0 0 0-11.16 1.857l-10.798 15.112 9.868-20.425a8 8 0 1 0-14.406-6.961l-8.45 17.49 3.878-16.814a7.999 7.999 0 0 0-5.997-9.593 7.997 7.997 0 0 0-9.593 5.997l-5.983 25.938-.2-.468a8 8 0 0 0-10.505-4.202 8.002 8.002 0 0 0-4.202 10.505l5.592 13.047a7.97 7.97 0 0 0 4.011 4.117l-.142.616a7.999 7.999 0 0 0 7.802 9.8 7.952 7.952 0 0 0 3.141-.652 7.973 7.973 0 0 0 1.943 1.323 7.984 7.984 0 0 0 3.002.772 7.984 7.984 0 0 0 3.331 6.935 7.993 7.993 0 0 0 11.16-1.858l29.565-41.376a7.998 7.998 0 0 0-1.857-11.16"/>
+        <path fill="#1DC2A4" d="M308.207 143.273a8 8 0 0 0-11.16 1.857l-10.798 15.112 9.868-20.425a8 8 0 1 0-14.406-6.961l-8.45 17.49 3.878-16.814a7.999 7.999 0 0 0-5.997-9.593 7.997 7.997 0 0 0-9.593 5.997l-5.983 25.938-.2-.468a8 8 0 0 0-10.505-4.202 8.002 8.002 0 0 0-4.202 10.505l5.592 13.047c.043.1.096.196.143.294l-16.725 46.56 39.527 14.198 17.402-48.445-.05-.018 23.516-32.912a7.998 7.998 0 0 0-1.857-11.16"/>
+        <path stroke="#1F1F1F" stroke-linecap="round" stroke-linejoin="round" d="M254.845 151.562c.901 4.17 2.805 8.085 6.253 10.468 1.575 1.089 3.546 1.909 5.273 2.599"/>
+        <path fill="#1DC2A4" d="M245.135 172.203s1.388 2.717.211 5.75c.053.018 1.81-1.179 1.81-1.179l1.302-2.215-2.831-2.954-.492.598z"/>
+        <path fill="#FFD654" d="M243.298 180.593c5.272 3.961 18.303 12.065 41.814 14.156-.846 1.32-2.47 6.237-3.108 8.325-.184.601-.714 1.035-1.34 1.177-5.278 1.203-30.057 5.952-43.669-7.288a1.729 1.729 0 0 1-.402-1.853c1.06-2.824 3.857-10.718 4.976-13.883.246-.695 1.132-1.082 1.73-.634"/>
+        <path stroke="#DB497B" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="2" d="M61.515 60.22c2.104.926 3.553 3.139 3.374 5.43-.05.628-.267 1.38-.624 1.897-.297.432-.716.766-1.164 1.035-.835.502-1.816.8-2.784.695-.968-.106-1.909-.658-2.353-1.524-.444-.866-.3-2.035.431-2.677.85-.745 2.254-.586 3.098.167.843.753 1.18 1.95 1.138 3.08-.07 1.924-1.19 3.779-2.86 4.739"/>
+        <path stroke="#6F41E8" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="2" d="M13.572 154.76c-1.583-1.667-2.063-4.269-1.011-6.312.287-.56.778-1.169 1.307-1.509.441-.283.957-.429 1.474-.504.964-.141 1.986-.036 2.836.436.851.472 1.506 1.344 1.581 2.315.075.97-.51 1.993-1.433 2.302-1.072.359-2.306-.332-2.792-1.352-.486-1.021-.335-2.254.141-3.279.81-1.748 2.56-3.026 4.471-3.266"/>
+        <path stroke="#DC650F" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="2" d="M223.927 134.57c-1.889 1.31-4.533 1.39-6.394.037-.508-.37-1.036-.946-1.292-1.522-.211-.478-.278-1.01-.273-1.534.008-.972.267-1.965.862-2.736.597-.77 1.558-1.284 2.529-1.21.97.073 1.892.807 2.057 1.766.192 1.114-.677 2.228-1.76 2.553-1.083.327-2.28-.01-3.221-.637-1.604-1.067-2.601-2.99-2.546-4.916"/>
+        <path fill="#F28433" d="M148.642 72.99c.452-1.24 1.812-3.938 5.437-5.751.18-.092.28-.28.173-.452-.618-.984-2.327-3.91-2.821-4.759a.307.307 0 0 0-.386-.131c-1.156.486-5.952 2.753-6.69 7.119a.317.317 0 0 0 .092.28c.545.538 2.799 2.882 3.68 3.801.16.168.436.11.515-.106"/>
+        <path fill="#A6A6A6" d="M44.797 117.674c.57 1.19 1.545 4.052.303 7.909-.06.193.004.397.201.44 1.136.247 4.423 1.075 5.374 1.315a.308.308 0 0 0 .365-.184c.461-1.167 2.198-6.178-.405-9.76a.318.318 0 0 0-.263-.132c-.766.014-4.019-.018-5.292-.03a.307.307 0 0 0-.283.442M342.46 108.47c-1.307-.18-4.233-.937-6.772-4.097-.126-.157-.333-.214-.477-.073-.83.813-3.33 3.103-4.055 3.765a.308.308 0 0 0-.047.405c.721 1.027 3.952 5.234 8.374 5.03a.316.316 0 0 0 .255-.147c.41-.648 2.225-3.347 2.936-4.404a.307.307 0 0 0-.214-.48"/>
+        <path fill="#936BFB" d="M243.083 117.001c-.219 1.302-1.063 4.204-4.296 6.648-.16.122-.225.327-.088.475.788.855 3.002 3.421 3.643 4.164a.308.308 0 0 0 .404.06c1.048-.69 5.35-3.795 5.276-8.222a.32.32 0 0 0-.14-.26c-.634-.428-3.279-2.322-4.315-3.064a.306.306 0 0 0-.484.2"/>
+        <path fill="#FFD654" d="M319.508 26.405c-.219 1.302-1.062 4.204-4.296 6.648-.16.123-.224.328-.087.476.787.854 3.002 3.42 3.643 4.163a.307.307 0 0 0 .403.06c1.05-.69 5.35-3.794 5.277-8.222a.32.32 0 0 0-.14-.26c-.635-.427-3.279-2.322-4.315-3.064a.307.307 0 0 0-.485.2M244.508 68.406c-.219 1.301-1.062 4.203-4.296 6.647-.16.123-.224.328-.087.475.787.855 3.002 3.421 3.643 4.164a.307.307 0 0 0 .403.06c1.05-.69 5.35-3.794 5.277-8.221a.32.32 0 0 0-.14-.26c-.635-.428-3.279-2.323-4.315-3.064a.307.307 0 0 0-.485.199M230.855 171.291c-.568 1.19-1.545 4.051-.303 7.91.062.192-.004.396-.201.438-1.136.247-4.423 1.075-5.374 1.316a.308.308 0 0 1-.364-.184c-.462-1.167-2.2-6.178.404-9.76a.317.317 0 0 1 .264-.132c.765.013 4.018-.018 5.292-.03a.307.307 0 0 1 .282.442"/>
+        <path fill="#F28433" d="M38.545 173.035c-1.317.071-4.334-.117-7.427-2.737-.154-.13-.367-.148-.482.018-.662.956-2.68 3.68-3.266 4.466a.307.307 0 0 0 .03.407c.903.871 4.873 4.39 9.177 3.35a.322.322 0 0 0 .223-.194c.28-.713 1.55-3.708 2.046-4.88a.307.307 0 0 0-.3-.43"/>
+        <path fill="#FFD654" d="M51.545 29.355c-1.317.07-4.334-.117-7.427-2.737-.154-.13-.367-.148-.482.018-.662.956-2.68 3.679-3.266 4.466a.307.307 0 0 0 .03.407c.903.87 4.873 4.389 9.177 3.35a.322.322 0 0 0 .223-.194c.28-.713 1.55-3.708 2.046-4.88a.307.307 0 0 0-.3-.43"/>
+        <path fill="#DB497B" d="M303.396 111.011c-1.308-.177-4.235-.928-6.782-4.081-.127-.157-.333-.214-.478-.072-.83.814-3.323 3.109-4.045 3.773a.307.307 0 0 0-.046.405c.723 1.027 3.962 5.226 8.385 5.012a.319.319 0 0 0 .255-.148c.409-.649 2.217-3.352 2.926-4.41a.307.307 0 0 0-.215-.479"/>
+        <path fill="#DF78E8" d="M19.075 110.123a3.318 3.318 0 1 1-6.636 0 3.318 3.318 0 0 1 6.636 0"/>
+        <path fill="#FFD654" d="M108.693 114.08a3.319 3.319 0 1 1-6.638 0 3.319 3.319 0 0 1 6.638 0"/>
+        <path fill="#936BFB" d="M39.458 83.654a3.319 3.319 0 1 1-6.638 0 3.319 3.319 0 0 1 6.638 0"/>
+        <path fill="#B041BA" d="M24.522 199.91a3.318 3.318 0 1 1-6.636 0 3.318 3.318 0 0 1 6.636 0"/>
+        <path fill="#A6A6A6" d="M97.118 32.378a3.319 3.319 0 1 1-6.638 0 3.319 3.319 0 0 1 6.638 0"/>
+        <path fill="#F28433" d="M319.969 196.804a3.319 3.319 0 1 1-6.64-.002 3.319 3.319 0 0 1 6.64.002"/>
+        <path fill="#B041BA" d="M149.288 194.378a3.319 3.319 0 1 1-6.638 0 3.319 3.319 0 0 1 6.638 0M299.139 69.825a3.319 3.319 0 1 1-6.64-.002 3.319 3.319 0 0 1 6.64.002M217.628 25.059a3.318 3.318 0 1 1-6.637.001 3.318 3.318 0 0 1 6.637-.001"/>
+        <path fill="#6F41E8" d="M147.671 4.123a3.318 3.318 0 1 1-6.636 0 3.318 3.318 0 0 1 6.636 0M332.926 142.335a3.319 3.319 0 1 1-6.638 0 3.319 3.319 0 0 1 6.638 0"/>
+        <path fill="#A6A6A6" d="M270.437 95.952a3.319 3.319 0 1 1-6.638 0 3.319 3.319 0 0 1 6.638 0"/>
+        <g transform="translate(340 58.993)">
+            <mask id="g" fill="#fff">
+                <use xlink:href="#f"/>
+            </mask>
+            <path fill="#F28433" d="M7.032 3.641a3.319 3.319 0 1 1-6.64-.002 3.319 3.319 0 0 1 6.64.002" mask="url(#g)"/>
+        </g>
+        <path fill="#DB497B" d="M248.48 46.165a3.319 3.319 0 1 1-6.638 0 3.319 3.319 0 0 1 6.638 0"/>
+        <path stroke="#936BFB" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M119.06 163.825c2.065.531 3.77 2.134 4.522 3.965 1.004 2.443 1.111 6.345-2.036 7.263-.958.28-2.063.07-2.803-.6-1.359-1.23-.968-3.42.623-4.224 2.527-1.277 5.527.53 6.617 2.894.782 1.696.96 4.206 0 5.807"/>
+        <path stroke="#1DC2A4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M192.197 45.18c.018 2.135-1.094 4.193-2.67 5.39-2.103 1.597-5.847 2.703-7.541-.103-.517-.854-.599-1.976-.14-2.864.84-1.63 3.056-1.813 4.242-.483 1.882 2.117.907 5.48-1.1 7.14-1.438 1.19-3.817 2.007-5.612 1.49"/>
+        <path stroke="#DF78E8" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M276.051 35.93c-2.108.327-4.307-.474-5.72-1.86-1.885-1.851-3.522-5.393-.992-7.477.772-.635 1.869-.878 2.814-.554 1.733.595 2.237 2.76 1.092 4.126-1.819 2.17-5.289 1.695-7.223-.05-1.386-1.25-2.539-3.488-2.289-5.337"/>
+        <path stroke="#B041BA" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="2" d="M339.283 165.46c-1.132 1.343-1.938 3.025-1.944 4.782-.005 1.756.894 3.562 2.457 4.361 1.692.864 4.959.14 4.968-2.196.005-1.45-1.55-2.254-2.848-2.07-.776.11-1.51.48-2.062 1.037-.688.696-1.065 1.647-1.27 2.605-.346 1.626-.137 3.541 1.142 4.601.88.73 2.086.91 3.228.958M135.282 31.46c-1.132 1.343-1.937 3.025-1.943 4.782-.006 1.756.893 3.562 2.458 4.361 1.691.864 4.958.14 4.966-2.196.005-1.45-1.549-2.254-2.846-2.07-.776.11-1.512.48-2.063 1.037-.688.696-1.066 1.647-1.27 2.605-.346 1.626-.138 3.541 1.142 4.601.88.73 2.085.91 3.228.958"/>
+    </g>
+</svg>
diff --git a/images/ic-back.svg b/images/ic-back.svg
new file mode 100644
index 0000000..b9f1ad8
--- /dev/null
+++ b/images/ic-back.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#A6A6A6" fill-rule="evenodd" d="M15 5.93L13.635 4.5 6 12.5l7.635 8L15 19.07 8.73 12.5z"/>
+</svg>
diff --git a/images/kin-coin.svg b/images/kin-coin.svg
new file mode 100644
index 0000000..bd087f2
--- /dev/null
+++ b/images/kin-coin.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6">
+    <g fill="#6F41E8" fill-rule="evenodd">
+        <text font-family="Sailec-Medium, Sailec" font-size="14" font-weight="400" transform="translate(-9 -13)">
+            <tspan x="0" y="11">+ 30</tspan>
+        </text>
+        <path d="M5.446 2.009A.548.548 0 0 0 6 1.467V0H4.473a.548.548 0 0 0-.554.542v.482c0 .544-.423 1.012-.979 1.012s-1.035-.468-1.035-1.012V.522A.528.528 0 0 0 1.37 0H0v6h1.36a.54.54 0 0 0 .545-.533v-.452c0-.573.432-1.054.989-1.054.556.002 1.025.46 1.025 1.005v.496c0 .297.246.538.55.538H6V4.517a.544.544 0 0 0-.55-.538h-.457c-.557 0-1.074-.441-1.074-.985a1 1 0 0 1 1.01-.985h.517z"/>
+    </g>
+</svg>
diff --git a/package-lock.json b/package-lock.json
index d803476..486c5dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,30 @@
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
+		"@babel/runtime": {
+			"version": "7.5.5",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+			"integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+			"requires": {
+				"regenerator-runtime": "^0.13.2"
+			},
+			"dependencies": {
+				"regenerator-runtime": {
+					"version": "0.13.2",
+					"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
+					"integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
+				}
+			}
+		},
+		"@types/i18next-xhr-backend": {
+			"version": "1.4.2",
+			"resolved": "https://registry.npmjs.org/@types/i18next-xhr-backend/-/i18next-xhr-backend-1.4.2.tgz",
+			"integrity": "sha512-uykS5BvdSoN+G7j7D19xzR12pEVkWmUrIEIxMsj2brVVzjc3gIthWCQKYqbe/b1q87SLbWb/ZHN9bR4qxi1H6A==",
+			"dev": true,
+			"requires": {
+				"i18next-xhr-backend": "*"
+			}
+		},
 		"@types/node": {
 			"version": "10.0.6",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-10.0.6.tgz",
@@ -224,6 +248,15 @@
 			"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
 			"dev": true
 		},
+		"accept-language": {
+			"version": "3.0.18",
+			"resolved": "https://registry.npmjs.org/accept-language/-/accept-language-3.0.18.tgz",
+			"integrity": "sha1-9QJfF79lpGaoRYOMz5jNuHfYM4Q=",
+			"requires": {
+				"bcp47": "^1.1.2",
+				"stable": "^0.1.6"
+			}
+		},
 		"accepts": {
 			"version": "1.3.5",
 			"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
@@ -626,6 +659,11 @@
 			"integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
 			"dev": true
 		},
+		"bcp47": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/bcp47/-/bcp47-1.1.2.tgz",
+			"integrity": "sha1-NUvjMH/9CEM6ePXh4glYRfifx/4="
+		},
 		"bcrypt-pbkdf": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
@@ -2743,7 +2781,8 @@
 				"ansi-regex": {
 					"version": "2.1.1",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"aproba": {
 					"version": "1.2.0",
@@ -2764,12 +2803,14 @@
 				"balanced-match": {
 					"version": "1.0.0",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"brace-expansion": {
 					"version": "1.1.11",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"balanced-match": "^1.0.0",
 						"concat-map": "0.0.1"
@@ -2784,17 +2825,20 @@
 				"code-point-at": {
 					"version": "1.1.0",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"concat-map": {
 					"version": "0.0.1",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"console-control-strings": {
 					"version": "1.1.0",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"core-util-is": {
 					"version": "1.0.2",
@@ -2911,7 +2955,8 @@
 				"inherits": {
 					"version": "2.0.3",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"ini": {
 					"version": "1.3.5",
@@ -2923,6 +2968,7 @@
 					"version": "1.0.0",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"number-is-nan": "^1.0.0"
 					}
@@ -2937,6 +2983,7 @@
 					"version": "3.0.4",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"brace-expansion": "^1.1.7"
 					}
@@ -2944,12 +2991,14 @@
 				"minimist": {
 					"version": "0.0.8",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"minipass": {
 					"version": "2.2.4",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"safe-buffer": "^5.1.1",
 						"yallist": "^3.0.0"
@@ -2968,6 +3017,7 @@
 					"version": "0.5.1",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"minimist": "0.0.8"
 					}
@@ -3048,7 +3098,8 @@
 				"number-is-nan": {
 					"version": "1.0.1",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"object-assign": {
 					"version": "4.1.1",
@@ -3060,6 +3111,7 @@
 					"version": "1.4.0",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"wrappy": "1"
 					}
@@ -3145,7 +3197,8 @@
 				"safe-buffer": {
 					"version": "5.1.1",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"safer-buffer": {
 					"version": "2.1.2",
@@ -3181,6 +3234,7 @@
 					"version": "1.0.2",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"code-point-at": "^1.0.0",
 						"is-fullwidth-code-point": "^1.0.0",
@@ -3200,6 +3254,7 @@
 					"version": "3.0.1",
 					"bundled": true,
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"ansi-regex": "^2.0.0"
 					}
@@ -3243,12 +3298,14 @@
 				"wrappy": {
 					"version": "1.0.2",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"yallist": {
 					"version": "3.0.2",
 					"bundled": true,
-					"dev": true
+					"dev": true,
+					"optional": true
 				}
 			}
 		},
@@ -3576,6 +3633,14 @@
 				"uglify-js": "3.3.x"
 			}
 		},
+		"html-parse-stringify2": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz",
+			"integrity": "sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=",
+			"requires": {
+				"void-elements": "^2.0.1"
+			}
+		},
 		"html-webpack-plugin": {
 			"version": "3.2.0",
 			"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
@@ -3710,6 +3775,27 @@
 			"integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
 			"dev": true
 		},
+		"i18next": {
+			"version": "17.0.6",
+			"resolved": "https://registry.npmjs.org/i18next/-/i18next-17.0.6.tgz",
+			"integrity": "sha512-bdNhzhcM6RG5m82RypVguCrAQNie/ycxW0Q5C6K9UDWD5hqApZfdJFbj4Ikz9jxIR+Ja1eg0yCQLhlCT+opwIg==",
+			"requires": {
+				"@babel/runtime": "^7.3.1"
+			}
+		},
+		"i18next-browser-languagedetector": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-3.0.1.tgz",
+			"integrity": "sha512-WFjPLNPWl62uu07AHY2g+KsC9qz0tyMq+OZEB/H7N58YKL/JLiCz9U709gaR20Mule/Ppn+uyfVx5REJJjn1HA=="
+		},
+		"i18next-xhr-backend": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/i18next-xhr-backend/-/i18next-xhr-backend-3.0.0.tgz",
+			"integrity": "sha512-Pi/X91Zk2nEqdEHTV+FG6VeMHRcMcPKRsYW/A0wlaCfKsoJc3TI7A75Tqse/d5LVGN2Ymzx0FT+R+gLag9Eb2g==",
+			"requires": {
+				"@babel/runtime": "^7.4.5"
+			}
+		},
 		"iconv-lite": {
 			"version": "0.4.23",
 			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
@@ -6221,25 +6307,69 @@
 			}
 		},
 		"react": {
-			"version": "16.3.2",
-			"resolved": "https://registry.npmjs.org/react/-/react-16.3.2.tgz",
-			"integrity": "sha512-o5GPdkhciQ3cEph6qgvYB7LTOHw/GB0qRI6ZFNugj49qJCFfgHwVNjZ5u+b7nif4vOeMIOuYj3CeYe2IBD74lg==",
+			"version": "16.8.6",
+			"resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz",
+			"integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==",
 			"requires": {
-				"fbjs": "^0.8.16",
 				"loose-envify": "^1.1.0",
 				"object-assign": "^4.1.1",
-				"prop-types": "^15.6.0"
+				"prop-types": "^15.6.2",
+				"scheduler": "^0.13.6"
+			},
+			"dependencies": {
+				"prop-types": {
+					"version": "15.7.2",
+					"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+					"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+					"requires": {
+						"loose-envify": "^1.4.0",
+						"object-assign": "^4.1.1",
+						"react-is": "^16.8.1"
+					},
+					"dependencies": {
+						"loose-envify": {
+							"version": "1.4.0",
+							"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+							"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+							"requires": {
+								"js-tokens": "^3.0.0 || ^4.0.0"
+							}
+						}
+					}
+				}
 			}
 		},
 		"react-dom": {
-			"version": "16.3.2",
-			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.3.2.tgz",
-			"integrity": "sha512-MMPko3zYncNrz/7gG17wJWUREZDvskZHXOwbttzl0F0L3wDmToyuETuo/r8Y5yvDejwYcRyWI1lvVBjLJWFwKA==",
+			"version": "16.8.6",
+			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
+			"integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==",
 			"requires": {
-				"fbjs": "^0.8.16",
 				"loose-envify": "^1.1.0",
 				"object-assign": "^4.1.1",
-				"prop-types": "^15.6.0"
+				"prop-types": "^15.6.2",
+				"scheduler": "^0.13.6"
+			},
+			"dependencies": {
+				"prop-types": {
+					"version": "15.7.2",
+					"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+					"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+					"requires": {
+						"loose-envify": "^1.4.0",
+						"object-assign": "^4.1.1",
+						"react-is": "^16.8.1"
+					},
+					"dependencies": {
+						"loose-envify": {
+							"version": "1.4.0",
+							"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+							"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+							"requires": {
+								"js-tokens": "^3.0.0 || ^4.0.0"
+							}
+						}
+					}
+				}
 			}
 		},
 		"react-event-listener": {
@@ -6253,6 +6383,20 @@
 				"warning": "^3.0.0"
 			}
 		},
+		"react-i18next": {
+			"version": "10.11.4",
+			"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-10.11.4.tgz",
+			"integrity": "sha512-/CWXaf3a5BLNeVnBGxzWOIZLQgSNEc2LWHX4ZaJb7ww0xgY0S5K9HRAMzJIHeHGe7jfpSraprD66VDblWb4ZXA==",
+			"requires": {
+				"@babel/runtime": "^7.3.1",
+				"html-parse-stringify2": "2.0.1"
+			}
+		},
+		"react-is": {
+			"version": "16.8.6",
+			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
+			"integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
+		},
 		"react-swipeable-views": {
 			"version": "0.12.13",
 			"resolved": "https://registry.npmjs.org/react-swipeable-views/-/react-swipeable-views-0.12.13.tgz",
@@ -6598,6 +6742,15 @@
 			"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
 			"dev": true
 		},
+		"scheduler": {
+			"version": "0.13.6",
+			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
+			"integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
+			"requires": {
+				"loose-envify": "^1.1.0",
+				"object-assign": "^4.1.1"
+			}
+		},
 		"schema-utils": {
 			"version": "0.4.5",
 			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.5.tgz",
@@ -7154,6 +7307,11 @@
 				"safe-buffer": "^5.1.1"
 			}
 		},
+		"stable": {
+			"version": "0.1.8",
+			"resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+			"integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w=="
+		},
 		"static-extend": {
 			"version": "0.1.2",
 			"resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
@@ -8271,6 +8429,11 @@
 				"indexof": "0.0.1"
 			}
 		},
+		"void-elements": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
+			"integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w="
+		},
 		"warning": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
diff --git a/package.json b/package.json
index 1607c5d..8d4658d 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
 		"@types/react": "^16.0.38",
 		"@types/react-dom": "^16.0.4",
 		"@types/react-swipeable-views": "^0.12.1",
+		"accept-language": "^3.0.18",
 		"babel-polyfill": "^6.26.0",
 		"react": "^16.2.0",
 		"react-dom": "^16.2.0",
diff --git a/scripts/src/app.tsx b/scripts/src/app.tsx
index ccc2609..0f9fceb 100644
--- a/scripts/src/app.tsx
+++ b/scripts/src/app.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-
 import Carousel from "./ui/container/carousel";
 import * as  bridge from "./bridge";
 import ImageAndTextPage from "./ui/page/imageAndText";
@@ -47,7 +46,10 @@ export interface CommonProps {
 	totalPagesCount: number;
 	currentPage: number;
 	sharedData: SharedData;
+	rewardText?: string;
+	rewardValue?: number;
 	updateSharedDate(data: any): void;
+	close(): void;
 }
 
 const sharedPageData = {};
@@ -84,6 +86,7 @@ class App extends React.Component {
 			data: {},
 		};
 		this.onPageCompleteHandler = this.onPageCompleteHandler.bind(this);
+		this.close = this.close.bind(this);
 	}
 
 	public render() {
@@ -99,20 +102,20 @@ class App extends React.Component {
 	}
 
 	private onPageCompleteHandler(answerData: any) {
+		const navigationStep = 1;
+		const newPageIndex = this.navigate(navigationStep);
+
 		const allData: any = Object.assign({}, this.state.data, answerData);  // todo pollyfill Object.assign
-		const newPageIndex = this.state.currentPage + 1;
-		const isComplete = this.state.currentPage === (this.state.pages.length - 1);
-		console.log("current: %s, new page: %s, isComplete: %s", this.state.currentPage, newPageIndex, isComplete);
 
+		const isComplete = this.state.currentPage === (this.state.pages.length - 1);
 		if (isComplete) {
 			if (Object.keys(allData)) {
-				console.log("submit " + JSON.stringify(allData));
-				bridge.submitResult(allData);
-				bridge.close();
+				console.log("submit " + JSON.stringify(this.state.data));
+				bridge.submitResult(this.state.data);
+				this.close();
 			}
 			return;
 		}
-
 		this.setState({
 			currentPage: newPageIndex,
 			data: allData,
@@ -120,6 +123,19 @@ class App extends React.Component {
 		});
 	}
 
+	private close() {
+		console.log("exit " + JSON.stringify(this.state.data));
+		bridge.close();
+		return;
+	}
+
+	private navigate(pageStep: number): number {
+		const newPageIndex = this.state.currentPage + pageStep;
+		console.log("current: %s, new page: %s", this.state.currentPage, newPageIndex);
+
+		return newPageIndex;
+	}
+
 	private updateSharedData(data: any) {
 		Object.assign(sharedPageData, data);
 	}
@@ -132,24 +148,41 @@ class App extends React.Component {
 				pageIndex: index,
 				id: page.question && page.question.id,
 				title: page.title,
+				rewardText: page.rewardText,
+				rewardValue: page.rewardValue,
 				isDisplayed: this.state.currentPage === index,
 				totalPagesCount: this.state.pages.length,
 				currentPage: this.state.currentPage,
 				sharedData: sharedPageData,
 				updateSharedDate: this.updateSharedData,
+				close: this.close,
 			};
 
 			switch (page.type) {
 				case PageType.FullPageMultiChoice:
-					return <MultichoiceQuestion {...commonProps} choices={page.question.choices} description={page.description} onSelected={this.onPageCompleteHandler} rightAnswer={page.rightAnswer}/>;
+					return <MultichoiceQuestion
+						{...commonProps}
+						choices={page.question.choices}
+						rewardText={page.rewardText}
+						rewardValue={page.rewardValue}
+						onSelected={this.onPageCompleteHandler}
+						rightAnswer={page.rightAnswer}/>;
 				case PageType.ImageAndText:
 					return <ImageAndTextPage {...commonProps} image={page.image} footerHtml={page.footerHtml} bodyHtml={page.bodyHtml} buttonText={page.buttonText} onBtnClick={this.onPageCompleteHandler}/>;
 				case PageType.EarnThankYou:
-					return <EarnThankYou {...commonProps} isDisplayed={this.state.currentPage === index} closeHandler={this.onPageCompleteHandler} hideTopBarHandler={bridge.hideTopBar} amount={page.description}/>;
+					return <EarnThankYou {...commonProps} isDisplayed={this.state.currentPage === index} closeHandler={this.onPageCompleteHandler} amount={page.rewardValue}/>;
 				case PageType.TimedFullPageMultiChoice:
-					return <TimedMultichoiceQuestion {...commonProps} choices={page.question.choices} title={page.description} onSelected={this.onPageCompleteHandler} amount={page.amount} rightAnswer={page.rightAnswer}/>;
+					return <TimedMultichoiceQuestion
+						{...commonProps}
+						choices={page.question.choices}
+						title={page.title}
+						rewardText={page.rewardText}
+						rewardValue={page.rewardValue}
+						onSelected={this.onPageCompleteHandler}
+						amount={page.amount}
+						rightAnswer={page.rightAnswer}/>;
 				case PageType.SuccessBasedThankYou:
-					return <SuccessBasedThankYou {...commonProps} isDisplayed={this.state.currentPage === index} closeHandler={this.onPageCompleteHandler} hideTopBarHandler={bridge.hideTopBar}/>;
+					return <SuccessBasedThankYou {...commonProps} isDisplayed={this.state.currentPage === index} closeHandler={this.onPageCompleteHandler} />;
 			}
 		});
 	}
diff --git a/scripts/src/language.ts b/scripts/src/language.ts
new file mode 100644
index 0000000..375c9c6
--- /dev/null
+++ b/scripts/src/language.ts
@@ -0,0 +1,47 @@
+import acceptLanguage from "accept-language";
+
+acceptLanguage.languages(["en", "pt"]);
+const language: string = acceptLanguage.get(window.navigator.language) || "en";
+
+export type LocalizedStrings = {
+	yay_youve_earned: string;
+	better_luck_next_time: string;
+	well_done: string;
+	perfect_score: string;
+	thanks_for_trying: string;
+	for_the_effort: string;
+	youve_earned: string;
+};
+
+export type Languages = {
+	[key: string]: LocalizedStrings;
+};
+
+const en: LocalizedStrings = {
+	yay_youve_earned: "Yay! You've earned",
+	better_luck_next_time: "Better Luck Next Time!",
+	well_done: "Well Done!",
+	perfect_score: "High Five!",
+	thanks_for_trying: "Thanks for trying, you've earned",
+	for_the_effort: "for the effort",
+	youve_earned: "You've earned",
+};
+
+const pt: LocalizedStrings = {
+	yay_youve_earned: "Eba! Você ganhou",
+	better_luck_next_time: "Mais Sorte na Próxima Vez!",
+	well_done: "Muito bem!",
+	perfect_score: "Pontuação Perfeita!",
+	thanks_for_trying: "Obrigado por tentar, você ganhou",
+	for_the_effort: "pelo esforço",
+	youve_earned: "Você ganhou",
+};
+
+export const languages: Languages = {
+	en,
+	pt,
+};
+
+export function translate(key: keyof LocalizedStrings): string {
+	return languages[language][key];
+}
diff --git a/scripts/src/ui/container/carousel.tsx b/scripts/src/ui/container/carousel.tsx
index ffbe3c9..3f24a80 100644
--- a/scripts/src/ui/container/carousel.tsx
+++ b/scripts/src/ui/container/carousel.tsx
@@ -9,7 +9,7 @@ const carouselSettings: any = {
 class Carousel extends React.Component<any, {}> {
 	public render(): any {
 		return (
-			<SwipeableViews className={"carouselWrapper"} index={this.props.selectedItem} {...carouselSettings} >
+			<SwipeableViews className={"carouselWrapper"} slideStyle={{ height: "100%" }} index={this.props.selectedItem} {...carouselSettings} >
 				{this.props.children}
 			</SwipeableViews>
 		);
diff --git a/scripts/src/ui/page/earnThankYou.tsx b/scripts/src/ui/page/earnThankYou.tsx
index b7d7be1..8e306ae 100644
--- a/scripts/src/ui/page/earnThankYou.tsx
+++ b/scripts/src/ui/page/earnThankYou.tsx
@@ -8,34 +8,30 @@ export interface EarnThankYouProps extends CommonProps {
 	amount: number;
 	isDisplayed: boolean;  // is this the currently displayed page
 	closeHandler(answerData: any): void;
-	hideTopBarHandler(): void;
+	// hideTopBarHandler(): void;
 }
 
 const getImageUrl = (imageName: string) => `https://s3.amazonaws.com/htmlpoll.kinecosystem.com/images/${imageName}.svg`;
 
+import { translate } from "../../language";
+
 export class EarnThankYou extends React.Component<EarnThankYouProps> {
 	public componentDidUpdate() {
 		if (this.props.isDisplayed) {
-			this.props.hideTopBarHandler();
+			// this.props.hideTopBarHandler();
 			setTimeout(this.props.closeHandler, 3000);
 		}
 	}
 
 	public render() {
-		const diamonds = [ "l-1", "l-2", "l-3", "l-4", "c-1", "c-2", "r-3", "r-2", "r-1" ]
-			.map((name, index) => <img key={index} src={getImageUrl("diamond-" + name)} className={"diamond-" + name + " diamonds"}/>);
 		return (
 			<BasePage className="earnThankYou">
-
 				<div className="text">
-					<div>Yay! You've earned</div>
-					<div className="amount">{this.props.amount}</div>
-					<img src={getImageUrl("kin-type")} className="kin-type"/>
+					<div>{ translate("yay_youve_earned") }</div>
+					<span className="amount"><img src={ getImageUrl("plus-small") } className="plus-sign" /><img src={ getImageUrl("kin-coin") } /><span className="amount-value" >{this.props.amount}</span></span>
 				</div>
 				<div className={"footer"}>
-					<img src={getImageUrl("coins")} className="coins"/>
-					<img src={getImageUrl("sparks")} className="sparks"/>
-					{diamonds}
+					<img src={ getImageUrl("cheering-hands") } className="cheering-hands"/>
 				</div>
 			</BasePage>
 		);
diff --git a/scripts/src/ui/page/imageAndText.tsx b/scripts/src/ui/page/imageAndText.tsx
index bd270ac..d8d0a40 100644
--- a/scripts/src/ui/page/imageAndText.tsx
+++ b/scripts/src/ui/page/imageAndText.tsx
@@ -1,29 +1,60 @@
 import * as React from "react";
 import BasePage from "./base";
+import { CommonProps } from "../../app";
 
 import "../../../../styles/src/page/imageAndText.styl";
 
-export interface ImageAndTextProps {
+export interface ImageAndTextProps extends CommonProps {
 	image: string;
-	title: string;
-	onBtnClick?: () => void;
-	btnText: string;
+	onBtnClick: (answerData: any) => void;
 	footerHtml: string;
+	bodyHtml: string;
+	buttonText: string;
 }
 
-class ImageAndText extends React.Component<any, ImageAndTextProps> {
+const getImageUrl = (imageName: string) => `https://s3.amazonaws.com/htmlpoll.kinecosystem.com/images/${imageName}.svg`;
+
+class ImageAndText extends React.Component<ImageAndTextProps> {
 	public render() {
+		const currentPage = this.props.pageIndex + 1;
+		/* the list is 0 based */
+		const totalQuestionPages = this.props.totalPagesCount - 1;
+		/* the list contains a Thank you page --- a better solution is better */
+
+		const imgSpecialClass = setSpecialClassForHeroImage(currentPage);
 		return (<BasePage className="imageAndText">
+			<div className="header-controls">
+				<button className="close-btn" onClick={this.props.close}><img src={ getImageUrl("close-btn") } /></button>
+				<span></span>
+				<div className={"pageProgress"}>{currentPage}/{totalQuestionPages}</div>
+			</div>
 			<div className="header">
-				<img src={this.props.image}/>
+				<img src={this.props.image} className={imgSpecialClass} />
 				<div className="title">{this.props.title}</div>
 			</div>
 			<div className="body" dangerouslySetInnerHTML={{ __html: this.props.bodyHtml }}></div>
-			<div className="footer" dangerouslySetInnerHTML={{ __html: this.props.footerHtml }}></div>
+			<div className="footer">
+				<div className="description">{ this.props.rewardText }
+				{ this.props.rewardValue &&
+					<span className="description-price"><img src={ getImageUrl("plus-small") } className="plus-sign" /><img src={ getImageUrl("kin-coin") } />{ this.props.rewardValue }</span>
+				}
+				</div>
+			</div>
 			<button className={"btn " + (!this.props.onBtnClick ? "hidden" : "")}
 					onClick={this.props.onBtnClick.bind(this.props, { })}>{this.props.buttonText}</button>
 		</BasePage>);
 	}
 }
 
+function setSpecialClassForHeroImage(page: number) {
+	switch (page) {
+		case 1: return "";
+		case 2: return "full-width";
+		case 3: return "right-aligned";
+
+		default:
+			return "";
+	}
+}
+
 export default ImageAndText;
diff --git a/scripts/src/ui/page/multichoice.question.tsx b/scripts/src/ui/page/multichoice.question.tsx
index fd6d4e9..07fc9d4 100644
--- a/scripts/src/ui/page/multichoice.question.tsx
+++ b/scripts/src/ui/page/multichoice.question.tsx
@@ -20,6 +20,8 @@ export interface FullPageMultiChoiceState {
 	wrongAnswer: number | null;
 }
 
+const getImageUrl = (imageName: string) => `https://s3.amazonaws.com/htmlpoll.kinecosystem.com/images/${imageName}.svg`;
+
 export class MultichoiceQuestion<P extends FullPageMultiChoiceProps = FullPageMultiChoiceProps, S extends FullPageMultiChoiceState = FullPageMultiChoiceState> extends React.Component<P, S> {
 	protected additionalClasses = new Set(" ");
 	protected highlightRightWrong = false;
@@ -52,10 +54,23 @@ export class MultichoiceQuestion<P extends FullPageMultiChoiceProps = FullPageMu
 	}
 
 	protected getHeader() {
+		const currentPage = this.props.pageIndex + 1;
+		/* the list is 0 based */
+		const totalQuestionPages = this.props.totalPagesCount - 1;
+		/* the list contains a Thank you page --- a better solution is better */
 		return (
 			<React.Fragment>
-				<div className="title">{this.props.title}</div>
-				<div className="description" dangerouslySetInnerHTML={{ __html: this.props && this.props.description! }}/>
+				<div className="header-controls">
+					<button className="close-btn" onClick={this.props.close}><img src={ getImageUrl("close-btn") } /></button>
+					<span></span>
+					<div className="pageProgress">{currentPage}/{totalQuestionPages}</div>
+				</div>
+				<span className="title">{this.props.title}</span>
+				<div className="description">{ this.props.rewardText }
+				{ this.props.rewardValue &&
+					<span className="description-price"><img src={ getImageUrl("plus-small") } className="plus-sign" /><img src={ getImageUrl("kin-coin") } />{ this.props.rewardValue }</span>
+				}
+				</div>
 			</React.Fragment>
 		);
 	}
diff --git a/scripts/src/ui/page/successBasedThankYou.tsx b/scripts/src/ui/page/successBasedThankYou.tsx
index 36fd500..4d5da66 100644
--- a/scripts/src/ui/page/successBasedThankYou.tsx
+++ b/scripts/src/ui/page/successBasedThankYou.tsx
@@ -4,11 +4,13 @@ import { CommonProps } from "../../app";
 
 import "../../../../styles/src/page/earnThankYou.styl";
 
+import { translate } from "../../language";
+
 export interface EarnThankYouProps extends CommonProps {
 	isDisplayed: boolean;  // is this the currently displayed page
 	closeHandler(answerData: any): void;
 
-	hideTopBarHandler(): void;
+	// hideTopBarHandler(): void;
 }
 
 const getImageUrl = (imageName: string) => `https://s3.amazonaws.com/htmlpoll.kinecosystem.com/images/${imageName}.svg`;
@@ -19,7 +21,7 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 
 	public componentDidUpdate() {
 		if (this.props.isDisplayed) {
-			this.props.hideTopBarHandler();
+			// this.props.hideTopBarHandler();
 			setTimeout(this.props.closeHandler, 3000);
 		}
 	}
@@ -46,16 +48,12 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 		return (
 			<React.Fragment>
 				<div className="text">
-					<h1 className={ "" }>Better Luck Next Time!</h1>
-					<h2>Thanks for trying, you've earned</h2>
-					<div className="amount">1</div>
-					<img src={ getImageUrl("kin-type") } className="kin-type"/>
-					<h2>for the effort</h2>
+					<h1>{ translate("better_luck_next_time") }</h1>
+					<h2>{ translate("youve_earned") }:</h2>
+					<span className="amount"><img src={ getImageUrl("plus-small") } className="plus-sign" /><img src={ getImageUrl("kin-coin") } /><span>1</span></span>
 				</div>
-				<div className={ "footer" }>
-					<img src={ getImageUrl("coins") } className="coins"/>
-					<img src={ getImageUrl("sparks") } className="sparks"/>
-					{ SuccessBasedThankYou.diamondElements }
+				<div className="footer">
+					<img src={ getImageUrl("cheering-hands") } className="cheering-hands"/>
 				</div>
 			</React.Fragment>
 		);
@@ -65,15 +63,12 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 		return (
 			<React.Fragment>
 				<div className="text">
-					<h1 className={ "" }>Well Done!</h1>
-					<h2>Yay! You've earned</h2>
-					<div className="amount">{ this.props.sharedData.earnedAmount }</div>
-					<img src={ getImageUrl("kin-type") } className="kin-type"/>
+					<h1>{ translate("well_done") }</h1>
+					<h2>{ translate("yay_youve_earned") }:</h2>
+					<span className="amount"><img src={ getImageUrl("plus-small") } className="plus-sign" /><img src={ getImageUrl("kin-coin") } /><span className="amount">{ this.props.sharedData.earnedAmount }</span></span>
 				</div>
-				<div className={ "footer" }>
-					<img src={ getImageUrl("coins") } className="coins"/>
-					<img src={ getImageUrl("sparks") } className="sparks"/>
-					{ SuccessBasedThankYou.diamondElements }
+				<div className="footer">
+					<img src={ getImageUrl("cheering-hands") } className="cheering-hands"/>
 				</div>
 			</React.Fragment>
 		);
@@ -83,15 +78,12 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
 		return (
 			<React.Fragment>
 				<div className="text">
-					<h1 className={ "" }>Perfect Score!</h1>
-					<h2>Yay! You've earned</h2>
-					<div className="amount">{ this.props.sharedData.earnedAmount }</div>
-					<img src={ getImageUrl("kin-type") } className="kin-type"/>
+					<h1>{ translate("perfect_score") }</h1>
+					<h2>{ translate("yay_youve_earned") }:</h2>
+					<span className="amount"><img src={ getImageUrl("plus-small") } className="plus-sign" /><img src={ getImageUrl("kin-coin") } /><span className="amount">{ this.props.sharedData.earnedAmount }</span></span>
 				</div>
-				<div className={ "footer" }>
-					<img src={ getImageUrl("coins") } className="coins"/>
-					<img src={ getImageUrl("sparks") } className="sparks"/>
-					{ SuccessBasedThankYou.diamondElements }
+				<div className="footer">
+					<img src={ getImageUrl("cheering-hands") } className="cheering-hands"/>
 				</div>
 			</React.Fragment>
 		);
diff --git a/scripts/src/ui/page/timed.multichoice.question.tsx b/scripts/src/ui/page/timed.multichoice.question.tsx
index 1b8400d..715910a 100644
--- a/scripts/src/ui/page/timed.multichoice.question.tsx
+++ b/scripts/src/ui/page/timed.multichoice.question.tsx
@@ -19,6 +19,8 @@ interface TimerState {
 	time: number;
 }
 
+const getImageUrl = (imageName: string) => `https://s3.amazonaws.com/htmlpoll.kinecosystem.com/images/${imageName}.svg`;
+
 class Timer extends React.Component<TimerProps, TimerState> {
 	constructor(props: TimerProps) {
 		super(props);
@@ -39,7 +41,7 @@ class Timer extends React.Component<TimerProps, TimerState> {
 		);
 	}
 
-	public componentDidMount() {  // First timer won't get componentDidUpdate
+	public componentDidMount() {  // First timer won"t get componentDidUpdate
 		setTimeout(this.updateTime, 1000);
 	}
 
@@ -67,9 +69,17 @@ class TimedMultichoiceQuestion extends MultichoiceQuestion {
 		/* the list contains a Thank you page --- a better solution is better */
 		return (
 			<React.Fragment>
-				<Timer parent={this.props.pageIndex} pause={!this.props.isDisplayed} time={quizTimerTime} callback={this.onSelect.bind(this, null, -1)}/>
-				<div className={"pageProgress"}>{currentPage}/{totalQuestionPages}</div>
-				<div className="title">{this.props.title}</div>
+				<div className="header-controls">
+					<button className="close-btn" onClick={this.props.close}><img src={ getImageUrl("close-btn") } /></button>
+					<Timer parent={this.props.pageIndex} pause={!this.props.isDisplayed} time={quizTimerTime} callback={this.onSelect.bind(this, null, -1)}/>
+					<div className="pageProgress">{currentPage}/{totalQuestionPages}</div>
+				</div>
+				<p className="title">{this.props.title}</p>
+				<div className="description">{ this.props.rewardText }
+				{ this.props.rewardValue &&
+				 <span className="description-price"><img src={ getImageUrl("plus-small") } className="plus-sign" /><img src={ getImageUrl("kin-coin") } />{ this.props.rewardValue }</span>
+				}
+				</div>
 			</React.Fragment>
 		);
 	}
diff --git a/styles/src/app.styl b/styles/src/app.styl
index 1f9a21b..db2711a 100644
--- a/styles/src/app.styl
+++ b/styles/src/app.styl
@@ -1,13 +1,18 @@
-html, body, #root, .app,  .slider-wrapper, .slider-wrapper .slider.animated
-	width: 100%
-	height: 100%
-	padding: 0
-	margin: 0
-
-.carouselWrapper, .react-swipeable-view-container
-	width: 100%
-	height: 100%
-
-.react-swipeable-view-container > div
-	position relative
-
+html, body, #root, .app,  .slider-wrapper, .slider-wrapper .slider.animated
+	width: 100%
+	height: 100%
+	padding: 0
+	margin: 0
+	text-align: center
+
+.app
+	background-color #fff
+	color #1f1f1f
+
+.carouselWrapper, .react-swipeable-view-container
+	width: 100%
+	height: 100%
+
+.react-swipeable-view-container > div
+	position relative
+
diff --git a/styles/src/common.styl b/styles/src/common.styl
index 16dfd0d..daf6658 100644
--- a/styles/src/common.styl
+++ b/styles/src/common.styl
@@ -1,45 +1,49 @@
-/*** Colors ***/
-$deep-sky-blue = #047cfc
-$blue-grey = #7884a5
-$bright-sky-blue = #08c6f1
-$bright-blue = #0262ff
-$green-blue = #00d093
-$watermelon = #ff4b67
-
-/*** Mixins ***/
-flex-box($direction = row, $justify = flex-start, $align = stretch)
-	// $align only supports stretch and center
-	// $direction only supports row and column
-	display: -webkit-box
-	display: -webkit-flex
-	display: flex
-	-webkit-justify-content: $justify
-	justify-content: $justify
-	-webkit-flex-direction: $direction
-	flex-direction: $direction
-	-webkit-align-items: $align
-	align-items: $align
-
-font-roboto()
-	font-family: 'Roboto', 'San Francisco', sans-serif
-	font-weight: normal
-	font-style: normal
-	font-stretch: normal
-	line-height: normal
-
-btn()
-	border-radius: 60px
-	width: 80vw
-	height: 11.7vw
-	padding: 2vw
-	font-size: 4.2vw
-	border: solid 1px #7884a5
-	outline none
-
-btn-active()
-	background-color: #047cfc
-	border-color: #047cfc
-	color white
-
-.hidden
-	display: none
+/*** Colors ***/
+$deep-sky-blue = #047cfc
+$blue-grey = #7884a5
+$bright-sky-blue = #08c6f1
+$bright-blue = #0262ff
+$green-blue = #00d093
+$watermelon = #ff4b67
+$kin-purple = #6F41E8;
+
+/*** Mixins ***/
+flex-box($direction = row, $justify = flex-start, $align = stretch)
+	// $align only supports stretch and center
+	// $direction only supports row and column
+	display: -webkit-box
+	display: -webkit-flex
+	display: flex
+	-webkit-justify-content: $justify
+	justify-content: $justify
+	-webkit-flex-direction: $direction
+	flex-direction: $direction
+	-webkit-align-items: $align
+	align-items: $align
+
+font-roboto()
+	font-family: 'Roboto', 'San Francisco', sans-serif
+	font-weight: normal
+	font-style: normal
+	font-stretch: normal
+	line-height: normal
+
+btn()
+	border-radius: 5px
+	width: 86vw
+	height: 50px
+	padding 0
+	font-size: 4.2vw
+	border: solid 1px #3d3d3d
+	outline none
+
+btn-active()
+	background-color: $kin-purple
+	color white
+
+.hidden
+	display: none
+
+.kin-purple
+	color: $kin-purple;
+
diff --git a/styles/src/page/base.styl b/styles/src/page/base.styl
index 8ccfbef..85d5418 100644
--- a/styles/src/page/base.styl
+++ b/styles/src/page/base.styl
@@ -1,15 +1,15 @@
-.page-container
-	width: 100%
-	height: 100%
-	padding: 0
-	margin: 0
-	.page
-		width: 100%
-		height: 100%
-		margin: 0
-		position relative
-		.header
-			border: none
-			border-bottom: solid 1px #d7dce9
-			flex-box(column)
-
+.page-container
+	width: 100%
+	height: 100%
+	padding: 0
+	margin: 0
+	.page
+		width: 100%
+		height: 100%
+		margin: 0
+		position relative
+		.header
+			border: none
+			border-bottom: solid 1px #3d3d3d
+			flex-box(column)
+
diff --git a/styles/src/page/earnThankYou.styl b/styles/src/page/earnThankYou.styl
index b45b955..aa3213c 100644
--- a/styles/src/page/earnThankYou.styl
+++ b/styles/src/page/earnThankYou.styl
@@ -7,20 +7,20 @@
 	width: 100%
 	height: 100%
 	flex-box(column)  // This is kind of a hack to make it full screen
-	background-image: linear-gradient(7deg, $bright-sky-blue, $bright-blue)
+	background-image: #1f1f1f
 	.text
 		font-roboto()
-		color: white
+		// color: white
 		width: 100%
 		text-align: center
 		font-size: 8vw
 		margin: 30vh 0 0
 		h1
-			font-size: 10vw
-			margin: 6vh 0 0;
+			font-size: 1.2rem
+			margin: 6vh 0 .5rem;
 			font-roboto()
 		h2
-			font-size: 6vw
+			font-size: 1.2rem
 			margin: 0;
 			font-roboto()
 		.standAloneText
@@ -28,55 +28,22 @@
 			font-size: 8vw
 			font-roboto()
 		.amount
-			font-weight: bold
-			font-size: 16vw
-		.kin-type
-			width: 16vw
+			font-weight: 500
+			font-size: 12vw
+			color: $kin-purple
+			& > *
+				vertical-align: middle
+			img
+				width 1.3rem
+				margin-right .2rem
+				&.plus-sign
+					margin-right .3rem
+			.amount-value
+				line-height 1
 	.footer
 		img
 			position: absolute
-		.diamonds
-			width: 7vw;
-		.coins
-			bottom: 0
-			left: 0
-			width: 100%
-		.sparks
-			bottom: 0
-			left: 0
-			width: 100%
-			object-fit: contain
-		.diamond-l-1
-			left: 1vw;
-			bottom: 9.4vw;
-		.diamond-l-2
-			left: 11vw;
-			bottom: 19vw;
-		.diamond-l-3
-			left: 18vw;
-			bottom: 30vw;
-			width: 10vw
-		.diamond-l-4
-			left: 39vw;
-			bottom: 28vw;
-		.diamond-c-1
-			left: 37.5vw;
-			bottom: 6vw;
-		.diamond-c-2
-			left: 53vw;
-			bottom: 17vw;
-			width: 8vw
-		.diamond-r-3
-			left: 68.3vw;
-			bottom: 22.3vw;
-			width: 8.3vw
-		.diamond-r-2
-			left: 83vw;
-			bottom: 25vw;
-			width: 9.1vw
-		.diamond-r-1
-			left: 84vw;
-			bottom: 13.3vw;
-			width: 8.2vw
-
-
+			&.cheering-hands
+				width: 100%
+				left: 0
+				bottom: 0
diff --git a/styles/src/page/imageAndText.styl b/styles/src/page/imageAndText.styl
index 1a503f0..e340943 100644
--- a/styles/src/page/imageAndText.styl
+++ b/styles/src/page/imageAndText.styl
@@ -9,40 +9,80 @@ $text-font-size()
 	height: 100%
 	font-roboto()
 
+	.header-controls
+		width: 86%
+		margin: 7% auto 0
+		flex-box()
+		justify-content: space-between
+		align-items: center
+		font-size: 6.2vw
+	.title
+		display: inline-block
+		width: 72vw
+		margin: 0.1rem auto 8%
+		font-weight: 500
+	button.close-btn
+		-webkit-appearance: none
+		border: none
+		background: none
+		padding: 0
+
 	.header
-		padding 5vh 0 5vh
+		padding 5vh 0 3vh
 		flex-box(column)
-		min-height 22vh
+		border none
 		img
-			height: 31.7vw
 			margin: 0 auto 0
+			&.full-width
+				width 100%
+			&.right-aligned
+				margin-right 0
 		.title
 			font-roboto()
-			color: $deep-sky-blue
-			margin: 3vh auto 0
+			// color: #f9f9f9
+			margin: 8vh auto 0
 			letter-spacing: -0.5px
-			font-size 5.6vw
+			font-size 1.25rem
 			text-align center
 	.body
 		flex-box(column)
-		height: 36vh
-		margin 5vw auto 0
+		margin 0 auto 0
 		font-roboto()
+		font-weight 300
 		line-height: 1.7
 		$text-font-size()
-		color $blue-grey
+		// color #f9f9f9
 		width 70vw
 		text-align center
 	.footer
 		margin: auto auto 3vh
 		text-align: center
 		$text-font-size()
-		color $blue-grey
+		// color #f9f9f9
+
+		.description
+			margin: 0 auto
+			font-size: .8rem
+			.description-price
+				display: -webkit-inline-flex
+				display: -moz-inline-flex
+				display: -ms-inline-flex
+				display: -o-inline-flex
+				display: inline-flex
+				align-items: center
+				margin-left .3rem
+				vertical-align: middle
+				color: $kin-purple
+				line-height: 90%
+				img
+					width: 7px
+					margin-right: 1px
+
 	.btn
 		btn()
 		border-width 0
 		font-roboto()
 		color white
-		background-color $deep-sky-blue
+		background-color $kin-purple
 		margin: 0 auto 5vw
 
diff --git a/styles/src/page/multichoice.question.styl b/styles/src/page/multichoice.question.styl
index 89cab24..bd58b23 100644
--- a/styles/src/page/multichoice.question.styl
+++ b/styles/src/page/multichoice.question.styl
@@ -1,39 +1,62 @@
-@require "../common.styl"
-
-.page.question.multichoice
-	width: 100%
-	font-roboto()
-	.header
-		.title
-			text-align: center
-			width: 72vw
-			font-size: 6.2vw
-			letter-spacing: -0.5px
-			color: #047cfc
-			margin: 10% auto 1%
-
-		.description
-			text-align: center
-			margin: 3vh auto
-			color: #7884a5
-			font-size: 3.5vw
-
-	.choices
-		margin: 6% auto 0
-		flex-box(column)
-	.choice
-		position relative
-		btn()
-		margin: 5% 11%
-		background: white
-		color: #7884a5
-		outline none
-		&.rightAnswer
-			btn-active()
-		&.wrongAnswer
-			border solid 3px $watermelon
-	&:not(.highlightRightWrong)
-		.choices
-			.choice
-				&.selected
-					btn-active()
+@require "../common.styl"
+
+.page.question.multichoice
+	width: 100%
+	font-roboto()
+	.header
+		width: 86%
+		margin: 7% auto 0
+		.header-controls
+			flex-box()
+			justify-content: space-between
+			align-items: center
+			font-size: 6.2vw
+		.title
+			display: inline-block
+			width: 72vw
+			margin: 0.1rem auto 8%
+			font-weight: 500
+		button.close-btn
+			-webkit-appearance: none
+			border: none
+			background: none
+			padding: 0
+
+		.description
+			margin: 3vh auto
+			font-size: .9rem
+			.description-price
+				display: -webkit-inline-flex
+				display: -moz-inline-flex
+				display: -ms-inline-flex
+				display: -o-inline-flex
+				display: inline-flex
+				align-items: center
+				margin-left .3rem
+				vertical-align: middle
+				color: $kin-purple
+				line-height: 90%
+				img
+					width: 7px
+					margin-right: 1px
+
+	.choices
+		margin: 6% auto 0
+		flex-box(column)
+	.choice
+		position relative
+		btn()
+		margin: 4% auto
+		background: inherit
+		color: currentColor
+		outline none
+		font-size:.9rem
+		&.rightAnswer
+			btn-active()
+		&.wrongAnswer
+			border solid 1px $watermelon
+	&:not(.highlightRightWrong)
+		.choices
+			.choice
+				&.selected
+					btn-active()
diff --git a/styles/src/page/timed.multichoice.question.styl b/styles/src/page/timed.multichoice.question.styl
index dd3f9bc..926020b 100644
--- a/styles/src/page/timed.multichoice.question.styl
+++ b/styles/src/page/timed.multichoice.question.styl
@@ -1,37 +1,35 @@
-@require "../common.styl"
-
-.page.question.multichoice.timed
-	.header
-		.timer
-			width: 15vw
-			font-size: 6.2vw
-			text-align: center
-			letter-spacing: -0.5px
-			margin: 10% auto 1%
-			font-roboto()
-			color: $green-blue
-			&.warn
-				color: $watermelon
-
-		.pageProgress
-			font-roboto()
-			font-weight: bold;
-			width: 12vw
-			font-size: 4.5vw
-			text-align: center
-			letter-spacing: -0.5px
-			margin: 5% auto 1%
-			color: $deep-sky-blue
-
-		.title
-			margin: 2% auto 10%
-	.choices
-		.choice
-			.receivedAmount
-				opacity 0
-				transition: all .5s ease;
-				position absolute
-				right 5vw
-			&.selected.rightAnswer
-				.receivedAmount
-					opacity 1
+@require "../common.styl"
+
+.page.question.multichoice.timed
+	.header
+		.timer
+			//width: 15vw
+			font-size: 1.3rem
+			//text-align: center
+			letter-spacing: -0.5px
+			color: #ea690b
+			font-roboto()
+			&.warn
+				color: $watermelon
+
+		.pageProgress
+			font-roboto()
+			font-weight: bold;
+			width: 12vw
+			font-size: 4.5vw
+			text-align: center
+			letter-spacing: -0.5px
+			// margin: 5% auto 1%
+
+		.title
+			margin: 2% auto 10%
+	.choices
+		.choice
+			.receivedAmount
+				opacity 0
+				transition: all .5s ease;
+				position absolute
+				right 5vw
+			&.selected.rightAnswer
+				.receivedAmount
+					opacity 1
diff --git a/updateJsonSchema.js b/updateJsonSchema.js
new file mode 100644
index 0000000..f373368
--- /dev/null
+++ b/updateJsonSchema.js
@@ -0,0 +1,43 @@
+/**
+ * make console-docker -> .admin -> const offer_contents = (await OfferContent.find())
+ *
+ * @return     {OfferContent[]}  repl can resolve promises
+ */
+const offer_contents = (await OfferContent.find())
+
+async function updatePolls() {
+	for (let i = 0; i < offer_contents.length; i++) {
+		const oc = offer_contents[i];
+		const pageTypeNum = 0;
+		if (oc.contentType !== 'poll') { continue; }; // I divided polls and quizzes to two separate calls
+		const content = JSON.parse(oc.content);
+		content.pages.forEach(page => {
+			if (page.type !== pageTypeNum) { return false; }
+			page.rewardText = 'Complete the poll to earn'
+			page.rewardValue = '${amount}';
+		});
+		oc.content = JSON.stringify(content);
+		await oc.save();
+	}
+}
+
+async function updateQuizzes() {
+	for (let i = 0; i < offer_contents.length; i++) {
+		const oc = offer_contents[i];
+		const pageTypeNum = 3;
+		if (oc.contentType !== 'quiz') { continue; }; // I divided polls and quizzes to two separate calls
+		const content = JSON.parse(oc.content);
+		content.pages.forEach(page => {
+			if (page.type !== pageTypeNum) { return false; }
+			page.title = page.description.replace(/ \${amount}.*/, '');
+			page.rewardText = 'Complete the quiz to earn'
+			page.rewardValue = '${amount}';
+			page.description = '';
+		});
+		oc.content = JSON.stringify(content);
+		await oc.save();
+	}
+}
+
+await updatePolls();
+await updateQuizzes();
