diff --git a/ui/src/landingpage.vue b/ui/src/landingpage.vue
index 9720833..d3135ce 100644
--- a/ui/src/landingpage.vue
+++ b/ui/src/landingpage.vue
@@ -3,66 +3,119 @@
 		<carbon-ads placement="InboxKittenLanding"></carbon-ads>
 		<!-- <div><a href="/kittenrouter" class="product-hunt">Introducing Kitten Router 🐱 </a></div> -->
 		<div class="landing-navigation">
-			<img class="landing-nav-main-logo" src="@/assets/kitten_router.png" @click="goToKittenRouter"/>
+			<router-link to="/kittenrouter">
+				<img class="landing-nav-main-logo" src="@/assets/kitten_router.png" />
+			</router-link>
 		</div>
 		<div class="header-gradient-background">
 			<div class="header">
-				<img class="logo" src="@/assets/inbox_kitten.png"/>
-				<h1>Open-Source <a></a> Disposable Email</h1>
+				<img class="logo" src="@/assets/inbox_kitten.png" />
+				<h1>
+					Open-Source
+					<a></a> Disposable Email
+				</h1>
 				<h2>(Served by Serverless Kittens)</h2>
 			</div>
 			<div class="email-selection">
 				<form v-on:submit.prevent="goToInbox">
 					<div class="input-box">
-						<input class="input-email" name="email" aria-label="email" type="text" v-model="randomName" id="email-input"/>
+						<input
+							class="input-email"
+							name="email"
+							aria-label="email"
+							type="text"
+							v-model="randomName"
+							id="email-input"
+						/>
 						<div class="input-suffix" id="div-domain" data-clipboard-target="#email-input">@{{domain}}</div>
 					</div>
-					<div class="submit-box"><input type="submit" class="submit" value="Get Mail Nyow!"/></div>
+					<div class="submit-box">
+						<input type="submit" class="submit" value="Get Mail Nyow!" />
+					</div>
 				</form>
 			</div>
 		</div>
-		<div class="info-guide">
-			<div class="features" style="max-width:1100px">
-				<div class="feature-card">
-					<h3><i class="fas fa-mail-bulk"></i> Use any inbox to avoid spam</h3>
-					<p>
-						Use inboxkitten when you don't want to get spammed by revealing your real email address.
-					</p>
+		<div class="info-guide mx-a my-0 p-2" style="max-width: 1240px; ">
+
+			<div class="pure-g mx-a my-1" style="max-width: 1000px;">
+				<div class="pure-u-1-2">
+					<section class="p-1">
+						<h3>
+							<i class="fas fa-mail-bulk"></i> Use any inbox to avoid spam
+						</h3>
+						<p>Use inboxkitten when you don't want to get spammed by revealing your real email address.</p>
+					</section>
 				</div>
-				<div class="feature-card">
-					<h3><i class="fas fa-trash-alt"></i> Email Auto-Deletes</h3>
-					<p>inboxkitten.com emails are in the public domain, and auto deletes after several hours. (officially 3 days according to mailgun)</p>
+				<div class="pure-u-1-2">
+					<section class="p-1">
+						<h3>
+							<i class="fas fa-trash-alt"></i> Email Auto-Deletes
+						</h3>
+						<p>Inboxkitten.com emails are in the public domain, and auto deletes after several hours. (officially 3 days according to mailgun)</p>
+					</section>
 				</div>
 			</div>
-			<div class="snippet">
-				<a href="https://snippet.uilicious.com/test/public/DKf5ZaxMWa15v47LEboF9F" class="article-body-image-wrapper" target="_blank" style="text-decoration:none; color: inherit; cursor:pointer;">
-				<div class="features">
-					<div class="feature-card">
-						<h3><i class="fas fa-clipboard-check"></i> Ideal for UI / QA Testing</h3>
-						<p>
-							Test your web application user signup flows, and email notification.<br/>
-							<a href="https://test.uilicious.com/test/public/7t74nVS828weKMtzGgJppF" target="_blank">Or even better, automate testing with uilicious!</a><br/>
-						</p>
-<pre class="hljs"><span class="hljs-comment" style="color: rgb(117, 113, 94);">// Let's go to inbox kitten</span>
-<span class="hljs-selector-tag" style="color: rgb(249, 38, 114);">I</span><span class="hljs-selector-class" style="color: rgb(166, 226, 46);">.goTo</span>(<span class="hljs-string" style="color: rgb(230, 219, 116);">"https://inboxkitten.com"</span>)
-<span class="hljs-selector-tag" style="color: rgb(249, 38, 114);">I</span><span class="hljs-selector-class" style="color: rgb(166, 226, 46);">.see</span>(<span class="hljs-string" style="color: rgb(230, 219, 116);">"Open-Source Disposable Email"</span>)
-
-<span class="hljs-comment" style="color: rgb(117, 113, 94);">// Let's fill up the email form, and click on a button</span>
-<span class="hljs-selector-tag" style="color: rgb(249, 38, 114);">I</span><span class="hljs-selector-class" style="color: rgb(166, 226, 46);">.fill</span>(<span class="hljs-string" style="color: rgb(230, 219, 116);">"email"</span>, <span class="hljs-string" style="color: rgb(230, 219, 116);">"ik-reciever-f7s1g28"</span>)
-<span class="hljs-selector-tag" style="color: rgb(249, 38, 114);">I</span><span class="hljs-selector-class" style="color: rgb(166, 226, 46);">.click</span>(<span class="hljs-string" style="color: rgb(230, 219, 116);">"Get Mail Nyow!"</span>)
-
-<span class="hljs-comment" style="color: rgb(117, 113, 94);">// See an email we expect, nyow</span>
-<span class="hljs-selector-tag" style="color: rgb(249, 38, 114);">I</span><span class="hljs-selector-class" style="color: rgb(166, 226, 46);">.see</span>(<span class="hljs-string" style="color: rgb(230, 219, 116);">"Testing inboxkitten subject"</span>)
+
+			<section class="my-1 p-1" style="background-color: #eee;">
+				<div class="mb-1">
+					<h3>
+						<i class="fas fa-clipboard-check"></i> Ideal for UI / QA Testing
+					</h3>
+					<p>
+						Test your web application user signup flows, and email notification.
+						<br />
+						<a
+							href="https://test.uilicious.com/test/public/7t74nVS828weKMtzGgJppF"
+							target="_blank"
+						>Or even better, automate testing with uilicious!</a>
+					</p>
+				</div>
+				<div class="flex-row">
+					<div class="code mb-0" style="flex: 1 0 auto;">
+						<pre style="margin: 0; line-height: 125%"><span style="color: #66d9ef">let</span> <span style="color: #a6e22e">email</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">"death-flew-61"</span>
+
+<span style="color: #d5cccc">// Go to inbox</span>
+<span style="color: #a6e22e">I</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">goTo</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">"https://inboxkitten.com/inbox/"</span> <span style="color: #f92672">+</span> <span style="color: #a6e22e">email</span> <span style="color: #f92672">+</span> <span style="color: #e6db74">"/list"</span><span style="color: #f8f8f2">)</span>
+
+<span style="color: #d5cccc">// Wait for some time for the email to arrive</span>
+<span style="color: #a6e22e">I</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">see</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">"@inboxkitten"</span><span style="color: #f8f8f2">)</span>
+<span style="color: #a6e22e">I</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">wait</span><span style="color: #f8f8f2">(</span><span style="color: #ae81ff">15</span><span style="color: #f8f8f2">)</span>
+
+<span style="color: #d5cccc">// Open the mail</span>
+<span style="color: #a6e22e">I</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">see</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">"Reset your password"</span><span style="color: #f8f8f2">)</span>
+<span style="color: #a6e22e">I</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">click</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">"Reset your password"</span><span style="color: #f8f8f2">)</span>
+
+<span style="color: #d5cccc">// click on the "reset password" button </span>
+<span style="color: #a6e22e">UI</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">context</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">"#message-content"</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span><span style="color: #f92672">=&gt;</span><span style="color: #f8f8f2">{</span>
+    <span style="color: #a6e22e">I</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">see</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">"Here's your magic link"</span><span style="color: #f8f8f2">)</span>
+    <span style="color: #a6e22e">I</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">click</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">"Reset password"</span><span style="color: #f8f8f2">)</span>
+<span style="color: #f8f8f2">})</span>
+
+<span style="color: #d5cccc">// Check that I'm at the "Reset password" page</span>
+<span style="color: #a6e22e">I</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">amAt</span><span style="color: #f8f8f2">(</span><span
+	style="color: #e6db74"
+>"https://user.uilicious.com/resetPassword"</span><span
+	style="color: #f8f8f2"
+>)</span>
 </pre>
 					</div>
-					<div class="feature-gif">
-						<img src="@/assets/snippet.gif" alt="uilicious test" >
-					</div>
+
+					<iframe
+						src="https://snippet.uilicious.com/embed/test/public/FPNPw6BRyc4agxP5SV1nry?step=2&autoplay=1"
+						frameborder="0"
+						width="600px"
+						height="400px;"
+						class="ml-1"
+						style="flex: 1 0 auto; border-radius: 5px; overflow: hidden;"
+					></iframe>
+
 				</div>
-				</a>
-			</div>
-			<div class="deploy-segmet">
-				<h3><i class="fas fa-user-secret"></i> Need a private / secure / selfhosted version?</h3>
+			</section>
+
+			<div class="deploy-segmet my-1 p-2">
+				<h3>
+					<i class="fas fa-user-secret"></i> Need a private / secure / selfhosted version?
+				</h3>
 				<p>Clone and adopt your own inboxkitten using our self-hosting package</p>
 
 				<a href="https://github.com/uilicious/inboxkitten" class="self-host-tier-link">
@@ -71,34 +124,38 @@
 							<h3>Self-Host</h3>
 						</div>
 						<div class="price">
-							<h3>$0</h3>
-							(*per month)
+							<h3>$0</h3>(*per month)
 						</div>
 					</div>
 				</a>
 
 				<p>All you need to do is the following steps</p>
-				<p class="code deploy-code">
-					git clone "https://github.com/uilicious/inboxkitten.git"<br/>
-					cd inboxkitten<br/>
-					./config.sh<br/>
-					./build.sh<br/>
-					firebase login<br/>
-					./deploy/firebase/deploy.sh
-				</p>
-				<br/>
+				<div class="code mx-a mb-1" style="max-width: 600px"><pre>git clone "https://github.com/uilicious/inboxkitten.git"
+cd inboxkitten
+./config.sh
+./build.sh
+firebase login
+./deploy/firebase/deploy.sh
+</pre></div>
 				<p class="disclaimer">
-					*You will need to have signed up to firebase and mailgun, where you can deploy on their "free" tier. <br/>
-					We take zero responsiblity over your email, laptop, or life (or lack of)<br/><br/>
-					Optionally you should have some basic programming knowledge<br/>
-					For more details (or other deplyment options) see our <a href="https://github.com/uilicious/inboxkitten">github repository</a>
+					*You will need to have signed up to firebase and mailgun, where you can deploy on their "free" tier.
+					<br />We take zero responsiblity over your email, laptop, or life (or lack of)
+					<br />
+					<br />Optionally you should have some basic programming knowledge
+					<br />For more details (or other deplyment options) see our
+					<a
+						href="https://github.com/uilicious/inboxkitten"
+					>github repository</a>
 				</p>
 			</div>
 			<div class="line-break"></div>
 		</div>
 		<div class="love-notes">
 			<p>
-				made with <span style="color: #e25555;">&hearts;</span> by <a href="https://uilicious.com">uilicious</a> in <a href="https://www.google.com.sg/search?q=singapore">Singapore</a>
+				made with
+				<span style="color: #e25555;">&hearts;</span> by
+				<a href="https://uilicious.com">uilicious</a> in
+				<a href="https://www.google.com.sg/search?q=singapore">Singapore</a>
 			</p>
 		</div>
 		<!--
@@ -114,84 +171,87 @@
 	</div>
 </template>
 <script>
-	import $ from 'jquery'
-	import config from '@/../config/apiconfig.js'
-	import 'normalize.css'
-	import ClipboardJS from 'clipboard'
+import $ from 'jquery'
+import config from '@/../config/apiconfig.js'
+import 'normalize.css'
+import ClipboardJS from 'clipboard'
 
-	import CarbonAds from '@/components/CarbonAds'
+import CarbonAds from '@/components/CarbonAds'
 
-	export default {
-		name: 'LandingPage',
-		components: {
-			CarbonAds: CarbonAds
-		},
-		data () {
-			return {
-				msg: 'Welcome to Your Vue.js App',
-				randomName: ''
-			}
-		},
-		mounted () {
-			this.randomName = this.generateRandomName().toString()
+export default {
+	name: 'LandingPage',
+	components: {
+		CarbonAds: CarbonAds
+	},
+	data () {
+		return {
+			randomName: ''
+		}
+	},
+	mounted () {
+		this.randomName = this.generateRandomName().toString()
 
-			this.$clipboard = []
+		this.$clipboard = []
 
-			let self = this
+		let self = this
 
-			this.$clipboard[0] = new ClipboardJS('#div-domain', {
-				text: function (trigger) {
-					if (self.randomName.includes('@' + config.domain)) {
-						return self.randomName
-					}
-					return self.randomName + '@' + config.domain
+		this.$clipboard[0] = new ClipboardJS('#div-domain', {
+			text: function (trigger) {
+				if (self.randomName.includes('@' + config.domain)) {
+					return self.randomName
 				}
-			})
+				return self.randomName + '@' + config.domain
+			}
+		})
 
-			this.$clipboard[0].on('success', function (e) {
-				$('#email-input').select()
-				$('#div-domain').addClass('tooltipped tooltipped-s')
-				$('#div-domain').attr('aria-label', 'Copied!')
-				$('#div-domain').on('mouseleave', function () {
-					$('#div-domain').removeClass('tooltipped tooltipped-s')
-					$('#div-domain').removeAttr('aria-label')
-				})
+		this.$clipboard[0].on('success', function (e) {
+			$('#email-input').select()
+			$('#div-domain').addClass('tooltipped tooltipped-s')
+			$('#div-domain').attr('aria-label', 'Copied!')
+			$('#div-domain').on('mouseleave', function () {
+				$('#div-domain').removeClass('tooltipped tooltipped-s')
+				$('#div-domain').removeAttr('aria-label')
 			})
-		},
-		beforeDestroy () {
-			if (this.$clipboard !== null) {
-				this.$clipboard.forEach((cb) => {
-					cb.destroy()
+		})
+	},
+	beforeDestroy () {
+		if (this.$clipboard !== null) {
+			this.$clipboard.forEach(cb => {
+				cb.destroy()
 			})
-			}
-		},
-		computed: {
-			domain () {
-				return config.domain
-			}
-		},
-		methods: {
-			generateRandomName () {
-				var randomWords = require('random-words')
-				return randomWords({
+		}
+	},
+	computed: {
+		domain () {
+			return config.domain
+		}
+	},
+	methods: {
+		generateRandomName () {
+			var randomWords = require('random-words')
+			return (
+				randomWords({
 					exactly: 1,
 					wordsPerString: 2,
 					separator: '-'
-				}) + '-' + Math.floor(Math.random() * 90 + 10)
-			},
-			goToInbox () {
-				this.$router.push({
-					name: 'Inbox',
-					params: {
-						email: this.randomName
-					}
-				})
-			},
-			goToKittenRouter () {
-				location.href = '/kittenrouter'
-			}
+				}) +
+				'-' +
+				Math.floor(Math.random() * 90 + 10)
+			)
+		},
+		goToInbox () {
+			this.$router.push({
+				name: 'Inbox',
+				params: {
+					email: this.randomName
+				}
+			})
+		},
+		goToKittenRouter () {
+			location.href = '/kittenrouter'
 		}
 	}
+}
 </script>
 
 <style lang="scss" rel="stylesheet/scss">
@@ -200,40 +260,39 @@
 	@import "primer-tooltips/index.scss";
 
 	.landing-navigation {
-		display:flex;
+		display: flex;
 		justify-content: flex-end;
 		align-items: center;
-		float:right;
+		float: right;
 		width: 100vw;
 		height: 1rem;
 		text-align: left;
 
 		.landing-nav-main-logo {
-			width:8rem;
-			padding-top:7rem;
+			width: 8rem;
+			padding-top: 7rem;
 			padding-right: 4rem;
 			z-index: 2;
-			cursor: pointer;
 		}
 
 		.landing-nav-header {
-			padding-top:6rem;
+			padding-top: 6rem;
 			padding-right: 3rem;
 			cursor: pointer;
 		}
 	}
 
-	@media only screen and (max-width:470px) {
+	@media only screen and (max-width: 470px) {
 		.landing-navigation .landing-nav-main-logo {
 			padding-right: 4rem;
-			width:5rem;
+			width: 5rem;
 			z-index: 3;
 		}
 		.landing-nav-header {
 			display: none;
 		}
 	}
-	@media only screen and (max-width:800px){
+	@media only screen and (max-width: 800px) {
 		.landing-navigation {
 			padding-top: 140px;
 		}
diff --git a/ui/src/scss/_common.scss b/ui/src/scss/_common.scss
index 0fa1f21..4320875 100644
--- a/ui/src/scss/_common.scss
+++ b/ui/src/scss/_common.scss
@@ -1,11 +1,162 @@
-
 // Fix scroll alignment issues
-html, body, #app {
-	min-height: 100%;
-	height: 100%;
-	position: relative;
+html,
+body,
+#app {
+  min-height: 100%;
+  height: 100%;
+  position: relative;
 }
 
 html {
-	min-height: 600px;
-}
\ No newline at end of file
+  min-height: 600px;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+
+// Flex
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+// Text alignment
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+// Code
+
+.code,
+.code pre {
+  font-family: monospace;
+
+  text-align: left;
+
+  background: #272822;
+  color: white;
+
+  overflow: auto;
+
+  width: auto;
+
+  border-radius: 5px;
+
+  padding: 1em;
+  margin-bottom: 1em;
+}
+
+// Margins
+
+.m-0 {
+  margin: 0;
+}
+
+.m-1 {
+  margin: 1rem;
+}
+
+.ml-1 {
+  margin-left: 1rem;
+}
+
+.mr-1 {
+  margin-right: 1rem;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-1 {
+  margin-bottom: 1rem;
+}
+
+.mb-2 {
+  margin-bottom: 1rem;
+}
+
+.mx-a {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mx-1 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.my-0 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.my-1 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.my-2 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+// Padding
+.p-0 {
+  padding: 0;
+}
+
+.p-1 {
+  padding: 1rem;
+}
+
+.p-2 {
+  padding: 2rem;
+}
+
+.pl-1 {
+  padding-left: 1rem;
+}
+
+.pr-1 {
+  padding-right: 1rem;
+}
+
+.pb-1 {
+  padding-bottom: 1rem;
+}
+
+.px-a {
+  padding-left: auto;
+  padding-right: auto;
+}
+
+.px-1 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-0 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.py-1 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.py-2 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
diff --git a/ui/src/scss/landingpage.scss b/ui/src/scss/landingpage.scss
index 6454ad4..58f4b05 100644
--- a/ui/src/scss/landingpage.scss
+++ b/ui/src/scss/landingpage.scss
@@ -375,13 +375,6 @@ body {
 	// margin-bottom:4rem;
 }
 
-.code {
-	font-family:monospace;
-	background:black;
-	color:white;
-	padding:1rem;
-}
-
 .deploy-code {
 	width: 30rem;
 	max-width:90%;