diff --git a/css/demo.css b/css/demo.css
index d127e10..cf373f6 100644
--- a/css/demo.css
+++ b/css/demo.css
@@ -36,7 +36,7 @@ a:focus {
 	width: 1.5em;
 	height: 1.5em;
 	margin: 0 auto;
-	fill: currentColor;
+	fill: red;
 }
 
 .view {
diff --git a/css/test.html b/css/test.html
new file mode 100644
index 0000000..b6bf4bf
--- /dev/null
+++ b/css/test.html
@@ -0,0 +1,599 @@
+<style>
+*,
+*::after,
+*::before {
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+body {
+	font-family: 'Avenir Next', Avenir, Helvetica, Arial, sans-serif;
+	color: #393a3e;
+	background: lavender;
+}
+
+a {
+	text-decoration: none;
+	color: #000;
+	outline: none;
+}
+
+a:hover,
+a:focus {
+	color: #1d48f3;
+}
+
+.hidden {
+	position: absolute;
+	overflow: hidden;
+	width: 0;
+	height: 0;
+	pointer-events: none;
+}
+
+/* Icons */
+.icon {
+	display: block;
+	width: 1.5em;
+	height: 1.5em;
+	margin: 0 auto;
+	fill: red;
+}
+
+.view {
+	position: relative;
+	display: flex;
+	justify-content: flex-end;
+	overflow: hidden;
+	height: 100vh;
+	margin: 0 0 0 215px;
+}
+
+.content {
+	z-index: 1;
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+	height: 100%;
+	padding: 25px 50px;
+	background: url(../img/bg_lavender.jpg) no-repeat top left;
+	background-size: auto 100%;
+}
+
+.deco__text {
+	font-size: 0.8em;
+	line-height: 1;
+	margin: 0;
+	color: #bcb8e8;
+}
+
+/* Header */
+.codrops-header {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	height: 100%;
+	text-align: right;
+}
+
+.codrops-header__info {
+	font-family: 'Playfair Display', serif;
+	font-size: 2.5em;
+	font-weight: 700;
+	/*font-style: italic;*/
+	position: relative;
+	max-width: 400px;
+	margin: auto;
+}
+
+.codrops-header__info::after {
+	font-family: 'Avenir Next', Avenir, Helvetica, Arial, sans-serif;
+	font-size: 8em;
+	font-weight: bold;
+	font-style: normal;
+	position: absolute;
+	z-index: -1;
+	top: 0%;
+	right: 52.5%;
+	letter-spacing: -0.05em;
+	color: #fff;
+}
+
+.codrops-header__deco {
+	font-size: 2em;
+	line-height: 1;
+	padding: 1em 0;
+	color: #1d48f3;
+
+	writing-mode: vertical-rl;
+}
+
+.codrops-header__title {
+	font-size: 8.5em;
+	line-height: 0.8;
+	margin: 0 -7px 0;
+	padding: 0;
+}
+
+.codrops-header__tagline {
+	width: 50%;
+	margin: 0 0 0 auto;
+	padding: 0;
+}
+
+/* Top Navigation Style */
+.codrops-links {
+	position: relative;
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	white-space: nowrap;
+}
+
+.codrops-icon {
+	display: block;
+}
+
+.codrops-icon:last-child {
+	margin: 0 0 0 2em;
+}
+
+.btn {
+	border: none;
+	background: none;
+}
+
+.btn:focus {
+	outline: none;
+}
+
+.btn--back {
+	font-size: 1.5em;
+	position: absolute;
+	z-index: 1002;
+	top: 1em;
+	right: 1em;
+	opacity: 0;
+	color: #1d48f3;
+}
+
+.btn--menu {
+	font-size: 0.85em;
+	position: absolute;
+	z-index: 1000;
+	top: 0;
+	left: 0;
+	display: none;
+	margin: 10px 0 0 6px;
+}
+
+.btn--menu-active .icon--menu,
+.icon--cross {
+	display: none;
+}
+
+.btn--menu-active .icon--cross {
+	display: block;
+}
+
+/* Demo links */
+.demos {
+	display: flex;
+	align-items: center;
+	margin: 2em 0 0 auto;
+}
+
+.demos__text {
+	font-size: 0.8em;
+	display: block;
+	margin: 0 2em 0 0;
+	color: #bcb8e8;
+}
+
+.demo {
+	position: relative;
+	display: block;
+	margin: 0 0 0 1.5em;
+}
+
+.demo:hover,
+.demo:focus {
+	outline: none;
+}
+
+.demo--current {
+	pointer-events: none;
+	color: #fff;
+}
+
+.demo--current::before {
+	content: '';
+	position: absolute;
+	z-index: -1;
+	top: 50%;
+	left: 50%;
+	width: 32px;
+	height: 32px;
+	margin: -17px 0 0 -16px;
+	border-radius: 50%;
+	background: #1d48f3;
+}
+/* Content */
+.tabscontent {
+	pointer-events: none;
+}
+
+.tabscontent__item {
+	position: fixed;
+	z-index: 1001;
+	top: 0;
+	left: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	overflow: hidden;
+	width: 100%;
+	height: 100vh;
+	opacity: 0;
+}
+
+.tabscontent__item--current,
+.tabscontent__item--current ~ .btn--back {
+	pointer-events: auto;
+}
+
+.poster {
+	position: relative;
+	height: 80vh;
+	margin: 10vh auto;
+	padding: 0 50px;
+	pointer-events: none;
+}
+
+.poster__img {
+	position: relative;
+	display: block;
+	max-width: 100%;
+	max-height: 100%;
+	margin: 0 auto;
+}
+
+.poster__caption {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: flex;
+	width: 100%;
+	height: 100%;
+	padding: 0 50px;
+}
+
+.poster__box {
+	position: absolute;
+	top: -50px;
+	left: 0;
+	width: 50%;
+	height: 40%;
+	border: 10px solid;
+}
+
+.poster__number {
+	font-size: 5em;
+	font-weight: bold;
+	line-height: 0.7;
+	position: absolute;
+	bottom: 0;
+	left: calc(100% - 50px + 5px);
+	color: lavender;
+}
+
+.poster__title {
+	font-size: 6em;
+	line-height: 0.7;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+	margin: 0 0 -0.25em 0.15em;
+	text-indent: -0.75em;
+}
+
+.poster__deco {
+	font-size: 2em;
+	line-height: 1;
+	margin: 0 -1.25em 0 auto;
+	color: #1d48f3;
+
+	writing-mode: vertical-rl;
+}
+
+.column {
+	width: 30vw;
+}
+
+.column__title {
+	color: #ff764b;
+}
+
+.column__text {
+	font-size: 2em;
+	font-weight: normal;
+	margin: 0;
+	color: #fff4d7;
+}
+
+/* Individual demos */
+.demo-2 {
+	background: #fff4d7;
+}
+
+.demo-2 .view {
+	margin-left: 150px;
+}
+
+.demo-2 .content {
+	background-image: url(../img/bg_yellow.jpg);
+}
+
+.demo-2 .codrops-header__info::after {
+	color: #fff;
+}
+
+.demo-2 .codrops-header__deco,
+.demo-2 a:hover,
+.demo-2 a:focus {
+	color: #ff764b;
+}
+
+.demo-2 .deco__text,
+.demo-2 .demos__text {
+	color: #d8c184;
+}
+
+.demo-2 .demo--current::before {
+	background: #ff764b;
+}
+
+.demo-2 .btn--back {
+	color: #ff764b;
+}
+
+.demo-3 {
+	color: #fc0;
+	background: #2a3137;
+}
+
+.demo-3 a {
+	color: #fff;
+}
+
+.demo-3 a:hover,
+.demo-3 a:focus,
+.demo-3 .btn--menu:hover {
+	color: #fc0;
+}
+
+.demo-3 .view {
+	margin: 0;
+	padding: 5vw 5vw calc(10vw + 1em);
+}
+
+.demo-3 .content {
+	padding: 0;
+}
+
+.demo-3 .codrops-header {
+	justify-content: flex-end;
+	align-items: flex-start;
+	width: 100%;
+	height: calc(100% + 3.25em);
+	text-align: left;
+}
+
+.demo-3 .codrops-header__title {
+	font-family: 'Poppins', sans-serif;
+	font-size: 7em;
+	line-height: 0.6;
+	margin: auto 0 0 -40px;
+	padding: 0.2em 0 0 0;
+}
+
+.demo-3 .codrops-header__tagline {
+	font-size: 1.5em;
+	margin: 0.25em 0 0 -0.3em;
+}
+
+.demo-3 .btn--menu {
+	font-size: 1em;
+	top: auto;
+	bottom: 0;
+	left: 50%;
+	display: block;
+	margin: 0 -0.75em 1em;
+	color: #fbf9fa;
+}
+
+.demo-3 .content {
+	background: url(../img/img4.jpg) no-repeat 50% 20%;
+	background-size: cover;
+}
+
+.demo-3 .codrops-links {
+	align-self: flex-end;
+	margin: 1.5em 1.5em auto;
+}
+
+.demo-3 .demos {
+	margin: 1em 0 0;
+}
+
+.demo-3 .demo:first-child {
+	margin: 0;
+}
+
+.demo-3 .demo.demo--current {
+	color: #2a3137;
+}
+
+.demo-3 .demo--current::before {
+	background: #fc0;
+}
+
+.demo-3 .btn--back {
+	color: #6c7d8c;
+	top: 0.5em;
+	right: 0.5em;
+}
+
+.demo-3 .btn--back .icon {
+	transform: rotate(-90deg);
+}
+
+.demo-3 .codrops-header__deco {
+	font-size: 2.25em;
+	position: absolute;
+	right: -0.575em;
+	bottom: 2em;
+	color: #fc0;
+}
+
+.demo-3 .codrops-header::after {
+	content: '03';
+	font-size: 5em;
+	font-weight: bold;
+	position: absolute;
+	top: 0;
+	left: -40px;
+	color: #fff;
+}
+
+.box {
+	position: relative;
+	width: 40vw;
+	min-width: 300px;
+	height: calc(90vh - 120px);
+	margin-top: 40px;
+	background-size: cover;
+	background-position: 50% 0;
+}
+
+.box__title {
+	font-size: 6em;
+	position: absolute;
+	bottom: 0;
+	left: -1em;
+	margin: 0;
+	color: #fff;
+}
+
+.tabscontent__item:first-child .box {
+	background-image: url(../img/portrait1.jpg);
+}
+
+.tabscontent__item:nth-child(2) .box {
+	background-image: url(../img/portrait2.jpg);
+}
+
+.tabscontent__item:nth-child(3) .box {
+	background-image: url(../img/portrait3.jpg);
+}
+
+@media screen and (max-width: 40em) {
+	.view {
+		overflow: auto;
+		height: auto;
+		min-height: calc(100vh - 69px);
+		margin: 0;
+	}
+	.demo-3 .view {
+		height: calc(100vh - 69px);
+	}
+	.content {
+		flex-direction: column;
+		padding: 10px;
+	}
+	.codrops-header__info {
+		font-size: 1.15em;
+	}
+	.deco__text,
+	.demos__text {
+		display: none;
+	}
+	.codrops-links {
+		margin: 0 0 1em;
+	}
+	.codrops-icon {
+		font-size: 1em;
+	}
+	.codrops-header__deco {
+		font-size: 1.25em;
+	}
+	.codrops-header__title {
+		font-size: 5.5em;
+		margin: 0 -4px;
+	}
+	.codrops-header__tagline {
+		width: auto;
+	}
+	.demos {
+		align-items: flex-start;
+		margin-top: 1em;
+	}
+	.codrops-header__info::after {
+		font-size: 7em;
+	}
+	.poster__box {
+		top: -20px;
+		left: 30px;
+		width: 30%;
+		height: 30%;
+		border: 7px solid;
+	}
+	.poster__deco {
+		font-size: 1em;
+	}
+	.poster__number {
+		font-size: 2em;
+		left: calc(100% - 90px);
+	}
+	.poster__title {
+		font-size: 3em;
+	}
+	.btn--back {
+		top: 0;
+		right: 0;
+	}
+	.btn--menu {
+		display: block;
+	}
+	.demo-2 .btn--menu {
+		position: relative;
+		margin: 0 2em 0 0;
+	}
+	.demo-2 .tabscontent__item {
+		font-size: 0.575em;
+		flex-direction: column;
+	}
+	.column__title {
+		margin: 1em 0 0;
+	}
+	.demo-3 .codrops-header__title {
+		font-size: 2em;
+		margin: 0;
+	}
+	.demo-3 .codrops-header__tagline {
+		font-size: 1em;
+		margin-left: 0;
+	}
+	.demo-3 .codrops-header::after {
+		font-size: 3em;
+		left: 10px;
+	}
+	.demo-3 .codrops-header__deco {
+		font-size: 0.85em;
+	}
+}
+
+</style>
+
+<div class="btn--back">Hello</div>
diff --git a/index2.html b/index2.html
index 5934797..c200c5d 100644
--- a/index2.html
+++ b/index2.html
@@ -7,7 +7,6 @@
 		<meta name="description" content="" />
 		<meta name="keywords" content="" />
 		<meta name="author" content="Ranchi Mall" />
-		<link rel="shortcut icon" href="favicon.ico">
 		<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700i" rel="stylesheet">
 		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
 		<link rel="stylesheet" type="text/css" href="css/demo.css" />
@@ -81,14 +80,8 @@
 	</head>
 	<body class="demo-2">
 		<svg class="hidden">
-			<symbol id="icon-arrow" viewBox="0 0 24 24">
-				<title>arrow</title>
-				<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
-			</symbol>
-			<symbol id="icon-drop" viewBox="0 0 24 24">
-				<title>drop</title>
-				<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
-			</symbol>
+			
+			
 			<symbol id="icon-caret" viewBox="0 0 24 24">
 				<title>caret</title>
 				<polygon points="15.7,16.6 11.1,12 15.7,7.4 14.3,6 8.3,12 14.3,18"/>
@@ -109,12 +102,11 @@
 				</div>
 				<header class="codrops-header">
 					<div class="codrops-links">
-						<button class="btn btn--menu">
+						<button class="btn btn--menu" style="background-color: pink">
 							<svg class="icon icon--menu"><use xlink:href="#icon-menu"></use></svg>
 							<svg class="icon icon--cross"><use xlink:href="#icon-cross"></use></svg>
 						</button>
-						<a class="codrops-icon codrops-icon--prev" href="https://tympanus.net/Development/StackMotionHoverEffects/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
-						<a class="codrops-icon codrops-icon--drop" href="https://tympanus.net/codrops/?p=30460" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
+					
 					</div>
 					<p id="contractText" class="codrops-header__info"></p>
 					<nav class="demos">
@@ -142,6 +134,9 @@
 				</div>
 			</nav>
 			<div class="tabscontent">
+				<div class="tabscontent__item">
+						<!-- This is where the code for webwallet will be up -->
+				</div>
 				<div class="tabscontent__item">
 					<div class="column">
 						<h3 class="column__title">03/09/2017</h3>
@@ -160,9 +155,6 @@
 						<h4 class="column__text">energetic</h4>
 					</div>
 				</div>
-				<div class="tabscontent__item">
-						<!-- This is where the code for webwallet will be up -->
-				</div>
 				<div class="tabscontent__item">
 					<!-- Token Tracking -->
 					<div id='token_column1' class="column">
@@ -198,21 +190,12 @@
 					</div>
 					<div id='contract_column2' class="column">
 						<h3 class="column__title">Enter Address/Contract name</h3>
-						<div>
+						<div id="contract_form">
 							<input type="text" id='addressName' name="addressName">
 							<button type="submit" id='addressName_submit'>Submit</button>
 						</div>
-
-						<!--<form name="myForm" onsubmit="return validateForm()" method="post">
-							<input type="text" id='addressName' name="vivek">
-							<input type="submit" value="Submit">
-						</form>
-						<input class="form-control" id="contractAddInput" length="34" name="address" placeholder="Enter FLO address" required="" type="text" value="">
-						<h4 class="column__text">saponification</h4>
-						<h4 class="column__text">velocity</h4>
-						<h4 class="column__text">ionization</h4>
-						<h4 class="column__text">geocentric</h4>
-						<h4 class="column__text">magnitude</h4>-->
+						<div id="data_output"></div>
+				
 					</div>		
 				</div>
 				<button class="btn btn--back"><svg class="icon icon--caret"><use xlink:href="#icon-caret"></use></svg></button>
@@ -224,12 +207,13 @@
 		<script src="js/demo2.js"></script>
 
 		<script>
-			const contractForm = {
+			var contractForm = {
 				addressName: document.getElementById('addressName'),
 				submit: document.getElementById('addressName_submit')
         	};
 
 			contractForm.submit.addEventListener('click', () => {
+				
 				console.log('button press');
 				contractForm['addressName'] = document.getElementById('addressName');
 
@@ -240,10 +224,11 @@
 					fetch(`https://ranchimallflo.duckdns.org/api/v1.0/getparticipantdetails?floaddress=${contractForm["addressName"].value}`)
 					.then(response => response.json())
 					.then((data) => {
-						console.log(data);
-						contractDetailColumn = document.getElementById('contract_column2');
-
+						//console.log(data);
+						contractDetailColumn = document.getElementById('data_output');
+						contractDetailColumn.innerHTML = "";
 						// Check which type of address it is 
+						// debugger;
 						if (data['result']=='ok' && data['type']=='participant'){
 							for (i = 0; i < data['participatedContracts'].length; i++) {
 								contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract name: '+ data['participatedContracts'][i]['contractName'] +'</h4>' ;
@@ -253,12 +238,12 @@
 								}
 						}
 						else if (data['result']=='ok' && data['type']=='contract'){
-							for (i = 0; i < data['contractInfo'].length; i++) {
-								contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract name: '+ data['contractInfo'][i]['contractName'] +'</h4>' ;
-								contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract address: '+ data['contractInfo'][i]['contractAddress'] +'</h4>' ;
-								contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Type:'+ data['contractInfo'][i]['contractType'] +'</h4>' ;
-								contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Expiry time:'+ data['contractInfo'][i]['expiryTime'] +'</h4><br>' ;
-								}														
+							/*for (i = 0; i < data['contractInfo'].length; i++) {*/
+								contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract name: '+ data['contractInfo']['contractName'] +'</h4>' ;
+								contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract address: '+ data['contractInfo']['contractAddress'] +'</h4>' ;
+								contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Type:'+ data['contractInfo']['contractType'] +'</h4>' ;
+								contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Expiry time:'+ data['contractInfo']['expiryTime'] +'</h4><br>' ;
+								/*}*/														
 						}
 						else if (data['result'] == 'error'){
 							alert("error");
@@ -273,7 +258,7 @@
 					fetch(`https://ranchimallflo.duckdns.org/api/v1.0/getsmartContractlist?contractName=${contractForm["addressName"].value}`)
 					.then(response => response.json())
 					.then((data) => {
-						console.log(data);
+						//console.log(data);
 						contractDetailColumn = document.getElementById('contract_column2');
 						if (data['smartContracts'].length == 1){
 							contractDetailColumn.innerHTML = contractDetailColumn.innerHTML + '<h4 class="column__text">Contract name: '+ data['smartContracts'][0]['contractName'] +'</h4>' ;
@@ -294,7 +279,7 @@
         	});
 
 
-			const tokenForm = {
+			var tokenForm = {
 				tokenName: document.getElementById('tokenName'),
 				submit: document.getElementById('tokenName_submit')
         	};
@@ -304,13 +289,13 @@
 				tokenForm['tokenName'] = document.getElementById('tokenName');
 
 				// Find out if it is a contract name or FLO address 
-				console.log(tokenForm['tokenName'].value);
+				//console.log(tokenForm['tokenName'].value);
 
 				if (tokenForm['tokenName'].value.slice(0,1) == 'F' && tokenForm['tokenName'].value.length == 34){
 					fetch(`https://ranchimallflo.duckdns.org/api/v1.0/gettokeninfo?floaddress=${tokenForm["tokenName"].value}`)
 					.then(response => response.json())
 					.then((data) => {
-						console.log(data);
+						//console.log(data);
 						contractDetailColumn = document.getElementById('contract_column2');
 
 						// Check which type of address it is 
@@ -343,7 +328,7 @@
 					fetch(`https://ranchimallflo.duckdns.org/api/v1.0/gettokeninfo?token=${tokenForm["tokenName"].value}`)
 					.then(response => response.json())
 					.then((data) => {
-						console.log(data);
+						//console.log(data);
 						tokenDetailColumn = document.getElementById('token_column2');
 			
 						tokenDetailColumn.innerHTML = tokenDetailColumn.innerHTML + '<h4 class="column__text">Token name: '+ data['token'] +'</h4>' ;
@@ -432,10 +417,10 @@
 				}
 			}
 			
-			var es = new EventSource('https://ranchimallflo.duckdns.org/sse');
+	/*		var es = new EventSource('https://ranchimallflo.duckdns.org/sse');
 			es.onmessage = function (event) {
 				console.log(event.data);
-			};
+			};*/
 		</script>
 	</body>
 </html>
\ No newline at end of file
diff --git a/js/tabsnav.js b/js/tabsnav.js
index 0b30ed6..6f80c76 100644
--- a/js/tabsnav.js
+++ b/js/tabsnav.js
@@ -138,9 +138,11 @@
 		}
 		this.isAnimating = true;
 
+
 		// Update current value (index of the current tab).
 		this.current = this.DOM.tabs.indexOf(tab);
 
+
 		var bounds = tab.getBoundingClientRect(),
 			currentDimensions = { left: bounds.left, top: bounds.top, width: bounds.width, height: bounds.height },
 			self = this;
@@ -302,7 +304,7 @@
 
 		this.DOM.el.classList.remove('tabsnav--hidden');
 		
-		// Animate bars.
+		// Animate bars
 		anime.remove(this.DOM.bars);
 		var animeBars = {
 			targets: this.DOM.bars,
@@ -344,6 +346,8 @@
 
 		this.isVisible = false;
 
+		console.log(this.DOM);
+
 		this.DOM.bars.forEach(function(bar) {
 			// Set transform origin.
 			bar.style.transformOrigin = '50% 50%';