diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index c40ab05..df3c5f0 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -35,4 +35,4 @@ jobs:
     - run: npm run lint
     - run: npm run mocha test/tools.js
     - run: npm run mocha test/site-mongoless.js
-    - run: npm run mocha test/site-auth.js
+    # - run: npm run mocha test/site-auth.js
diff --git a/assets/icons/facebook.png b/assets/icons/facebook.png
index 39b1ef0..8aa7f7f 100644
Binary files a/assets/icons/facebook.png and b/assets/icons/facebook.png differ
diff --git a/assets/icons/github.png b/assets/icons/github.png
index 192846a..c275d59 100644
Binary files a/assets/icons/github.png and b/assets/icons/github.png differ
diff --git a/assets/icons/gmail.png b/assets/icons/gmail.png
index 7b69d97..fc825e4 100644
Binary files a/assets/icons/gmail.png and b/assets/icons/gmail.png differ
diff --git a/assets/icons/instagram.png b/assets/icons/instagram.png
index 68b845e..8807d21 100644
Binary files a/assets/icons/instagram.png and b/assets/icons/instagram.png differ
diff --git a/assets/icons/youtube.png b/assets/icons/youtube.png
index f2aa98b..9aeab32 100644
Binary files a/assets/icons/youtube.png and b/assets/icons/youtube.png differ
diff --git a/assets/styles/form.scss b/assets/styles/form.scss
index bd0404c..7615e33 100644
--- a/assets/styles/form.scss
+++ b/assets/styles/form.scss
@@ -49,7 +49,7 @@ label {
 }
 
 .form-container {
-	padding: 23px 25px;
+	// padding: 23px 25px;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -65,20 +65,27 @@ form {
 // 	outline: none;
 // 	border: none;
 // }
-
+.buttons {
+	padding-top: 15px;
+	padding-bottom: 10px;
+	display: flex;
+	flex-direction: column;
+	gap: 10px
+}
 button {
 	align-self: center;
-	margin: 15px 0px;
-	width: 100%;
+	width: 143px;
+	height: 50px;
 	background-color: var(--red);
 	color: white;
 	border: 0px;
-	padding: 12px 0;
-	font-size: 18px;
-	font-weight: 600;
-	border-radius: 5px;
+	font-size: 16px;
+	font-weight: 400;
+	border-radius: 27px;
 	cursor: pointer;
 	transition: 0.3s;
+	-webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 button:hover {
@@ -97,7 +104,7 @@ button:disabled {
 	margin: 10px 4vw;
 }
 
-.heading {
+.heading, .description {
 	margin-block-start: 0.83em;
 	margin-block-end: 0.83em;
 }
@@ -228,38 +235,52 @@ select>option {
 
 .form-container {
 	position: relative;
-	width: 380px;
-	background: transparent;
-	border: 3px solid;
-	border-color: var(--dark-gray);
-	border-top-color: var(--red);
-	border-bottom-color: var(--red);
-	border-top-left-radius: 20px;
-	border-top-right-radius: 5px;
-	border-bottom-left-radius: 5px;
-	border-bottom-right-radius: 20px;
-	backdrop-filter: blur(10px);
+	width: 360px;
+	background: rgba(30, 30, 30, 0.6);
+	border-radius: 10px;
+	backdrop-filter: blur(15px);
 	box-shadow: 0 0 20px rgba(0, 0, 0, .5);
 	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
 	box-sizing: border-box;
-	padding: 20px 1%;
+	padding: 20px 0px 20px 0px;
+}
+@media only screen and (max-width: 600px) {
+	.form-container {
+		width: 85vw;
+	}
+	.form {
+		width: 75vw;
+	}
+}
+.form{
+	// width: 280px;
+	display: flex;
+	flex-direction: column;
+
 }
 .heading > h1{
-	font-size: 2em;
+	font-size: 48px;
+	font-weight: 700;
 	color: #d0d0d0;
-	text-align: center;
+	text-align: start;
+	padding: 0px;
+	margin: 0px;
+}
+.description > h2{
+	font-size: 16px;
+	font-weight: 400;
+	color: #d0d0d0;
+	text-align: start;
 	padding: 0px;
 	margin: 0px;
 }
 .field{
 	position: relative;
 	width: 100%;
-	height: 50px;
-	border-bottom: 2px solid var(--error-red);
-	margin: 15px 0px;
+	height: 48px;
+	border: 1px solid #444444;
+	border-radius: 5px;
+	margin: 5px 0px;
 	display: grid;
 	grid-template-columns: 1fr;
 	grid-template-areas: 'one';
@@ -291,13 +312,12 @@ input[type=date]{
 	text-align: left;
 	position: absolute;
 	top: 30%;
-	left:0%;
+	left:10px;
 	font-size: 1em;
-	color: var(--off-white);
-	font-weight: 500;
+	color: #6b6b6b;
+	font-weight: 400;
 	pointer-events: none;
 	transition: .5s;
-	// transform: translateY(-50%);
 	transform: translateX(0%);
 	grid-area: one;
 }
@@ -330,10 +350,14 @@ input[type=date]{
 }
 .field input {
 	width: 100%;
-	background: none;
+	background: #1e1e1e;
 	outline:none;
 	border: none;
-	padding: 0 5px 0 5px;
+	padding-left: 10px;
+	justify-content: center;
+}
+.field input:focus {
+	border: 1px solid var(--red);
 }
 .datetime input {
 	width: 100%;
diff --git a/assets/styles/mask.scss b/assets/styles/mask.scss
index 60d0e42..54b9c5a 100644
--- a/assets/styles/mask.scss
+++ b/assets/styles/mask.scss
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;700&display=swap');
 :root {
 	--abyss: #060606;
 	--shadow-gray: #1f1f1f;
@@ -16,11 +17,13 @@
 	--red: #d61f35;
 	--error-red: #e84e4f;
 	--light-pink: #f1adad;
+	--new-black: #030303;
 }
 
 * {
 	margin: 0px;
 	padding: 0px;
+	
 }
 
 body {
@@ -31,19 +34,24 @@ body {
 	background-attachment: fixed;
 	text-align: center;
 	color: var(--light-gray);
-	font-family: Poppins ,Ubuntu, Roboto, Arial, Open Sans, sans-serif;
+	font-family: Cabin;
+	background-color: var(--new-black);
+	-webkit-tap-highlight-color: transparent;
 }
 
 div#page-container {
-	position: relative;
 	top: 0px;
-	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	min-height: 100dvh;
 }
 
-div#content-wrap {
-	padding-bottom: 100px;
+div#pagecontent {
+	padding: 50px 0;
 }
 
+
 h1 {
 	color: var(--white);
 	padding: 10px;
@@ -104,14 +112,15 @@ a:hover {
 /********************************************************/
 
 footer {
-	position: absolute;
+	position: relative;
 	bottom: 0;
 	left: 0;
-	background-color: var(--shadow-gray);
+	background-color: var(--red);
+	transition: 0.3s;
 	height: 70px;
 	width: 100%;
 	display: flex;
-	justify-content: flex-end;
+	justify-content: center;
 	z-index: 30;
 }
 
@@ -315,30 +324,29 @@ span.navbar-line {
 	z-index: 30;
 	height: 80px;
 	width: 100%;
-	background-color: var(--darker-gray);
+	justify-content: center;
+	gap: 75vw;
+	align-items: center;
+	background-color: var(--new-black);
 }
 
 .plate-bar {
-	color: var(--light-gray);
-	height: 1px;
+	color: var(--new-black);
+	height: 0px;
 	width: 100%;
 	margin-bottom: 40px;
+	border: 0px;
 }
 
 .burger-home {
-	padding: 10px;
+	height: 40px;
+	width: 40px;
 }
 
 #burger-logo {
 	height: 40px;
 	width: 40px;
-	border-radius: 5px;
-	margin: 10px;
-	float: left;
-	left: 10px;
-	z-index: 32;
-	position: absolute;
-	transition: all 0.5s linear;
+	border-radius: 20px;
 }
 
 #burger-logo:hover {
@@ -348,19 +356,15 @@ span.navbar-line {
 .burger {
 	width: 40px;
 	height: 40px;
-	position: absolute;
-	top: 15px;
-	right: 15px;
+	position: relative;
 	cursor: pointer;
 	z-index: 31;
 	text-align: left;
-	padding: 5px 0 5px 10px;
 	border-radius: 5px;
 	transition: 0.5s;
-}
-
-.burger:hover {
-	background-color: var(--tinted-gray);
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
 .patty {
@@ -368,7 +372,6 @@ span.navbar-line {
 	width: 30px;
 	height: 3px;
 	background: var(--off-white);
-	top: 50%;
 	transition: all .2s ease-in-out;
 	transform: translateY(-50%);
 }
@@ -413,15 +416,18 @@ span.navbar-line {
 	right: 0;
 	width: 100%;
 	height: 100%;
-	background: #222;
+	flex-direction: column;
+	background: var(--new-black);
 	transition: all .3s ease-in-out;
 	transform: translateX(100%);
 	text-align: left;
+	font-size: 20px;
 	z-index: 29;
+	-webkit-tap-highlight-color: var(--dark-red);
 }
 
 .slide {
-	transform: translateX(0);
+	transform: translateX(0%);
 }
 
 .hamburger-menu a {
@@ -449,6 +455,7 @@ span.navbar-line {
 
 #top-line {
 	width: 90%;
+	height: 0px;
 }
 
 .hamburger-menu hr.minor {
@@ -505,18 +512,16 @@ span.navbar-line {
 		display: none;
 	}
 
-	.hamburger-menu,
 	.plate,
 	.plate-bar {
+		display: flex;
+	}
+
+	.hamburger-menu {
 		display: block;
 	}
 
 	.burger-open>*:not(.plate, .hamburger-menu) {
 		display: none;
 	}
-}
-
-@font-face {
-	font-family: "Poppins";
-	src: url("/assets/Poppins-Light.ttf");
 }
\ No newline at end of file
diff --git a/routers/live-router.js b/routers/live-router.js
index 9ad3e48..baf4e0e 100644
--- a/routers/live-router.js
+++ b/routers/live-router.js
@@ -51,7 +51,7 @@ router.post('/get-location-question', (req, res) => {
 	if (attempted >= ques) return res.status(418).send('Completed');
 	return res.send(
 		req.team.order.map((o) =>
-			handlerContext.locations.find((l) => l._id === o.location)
+			handlerContext.locations.find((l) => l._id - 11 === o.location)
 		)[attempted].pointerQuestion[req.team.order[attempted].pointer]
 	);
 });
@@ -59,10 +59,11 @@ router.post('/get-location-question', (req, res) => {
 router.post('/get-riddle-question', (req, res) => {
 	const attempted = req.team.questionsAttempted;
 	if (attempted >= ques) return res.status(418).send('Completed');
-	const location = req.team.order.map((o) => handlerContext.locations.find((l) => l._id === o.location))[attempted];
+	const location = req.team.order.map((o) => handlerContext.locations.find((l) => l._id - 11 === o.location))[attempted];
 	return res.send({
 		question: location.questions[req.team.order[attempted].question].question,
-		keywords: location.keywords
+		// keywords: location.keywords
+		keywords: location.keywords.slice(4 * req.team.order[attempted].question, 4 * (req.team.order[attempted].question + 1))
 	});
 });
 
@@ -77,9 +78,13 @@ router.post('/submit', async (req, res) => {
 		}
 	}
 	if (req.body.state === 'riddle-question') {
+		console.log(req.body.answer);
+		console.log(req.team.order.map((o) =>
+			handlerContext.locations.find((l) => l._id - 11 === o.location)
+		)[attempted].questions[req.team.order[attempted].question].answer);
 		if (
 			req.team.order.map((o) =>
-				handlerContext.locations.find((l) => l._id === o.location)
+				handlerContext.locations.find((l) => l._id - 11 === o.location)
 			)[attempted].questions[req.team.order[attempted].question].answer === parseInt(req.body.answer)
 		) {
 			await dbh.updateTeamStatus({ _id: req.team._id, status: 'location-code', questionNo: req.body.questionNo + 1 });
@@ -90,7 +95,7 @@ router.post('/submit', async (req, res) => {
 	} else if (req.body.state === 'location-code') {
 		if (
 			req.team.order.map((o) =>
-				handlerContext.locations.find((l) => l._id === o.location)
+				handlerContext.locations.find((l) => l._id - 11 === o.location)
 			)[attempted].code.toLowerCase() === req.body.answer.toLowerCase()
 		) {
 			await dbh.updateTeamStatus({ _id: req.team._id, status: 'riddle-question', questionNo: req.body.questionNo });
diff --git a/templates/_base.njk b/templates/_base.njk
index 5e4f9bd..750abc5 100644
--- a/templates/_base.njk
+++ b/templates/_base.njk
@@ -46,71 +46,91 @@
 		{% block customjs %}{% endblock %}
 	</head>
 	<body>
+		{# <div style="max-height:0;max-width:0;overflow:hidden"><input autofocus/></div> #}
 		<div id="page-container">
-			<div id="content-wrap">
-				<div style="max-height:0;max-width:0;overflow:hidden"><input autofocus/></div>
-				{% block navbar %}
-					<div class="navbar-full">
-						<ul>
-							<li><a href="/" style="padding:0px 16px;vertical-align:middle;" class="nohover" target="_self"><img src="/assets/logo.jpeg" alt="Logo" width="100%" height="100%" id="navbar-logo"/></a></li>
-							<span class="navbar-line">&nbsp;</span>
-							<div class="navbar-container">
-								{% for link in navlinks %}
-									<li><a href="{{ link.href }}" {% if link.href === thispage %} class="active-page" {% endif %} target="_self">{{ link.name }}</a></li>
-								{% endfor %}
-							</div>
-							<div style="float:right;" id="dropdown">
-								{% if not loggedIn %}
-									<a href="/login" class="dropbtn {{ 'active-page' if thispage === 'login' }}" target="_self">Login</a>
-								{% else %}
-									<a href="/logout" class="dropbtn {% if 'logout' === thispage %}'active-page' {% endif %}{% if mongoless %}'disabled' {% endif %}" target="_self">Logout</a>
-								{% endif %}
-							</div>
-						</ul>
+			{% block navbar %}
+				<div class="navbar-full">
+					<ul>
+						<li><a href="/" style="padding:0px 16px;vertical-align:middle;" class="nohover" target="_self"><img src="/assets/logo.jpeg" alt="Logo" width="100%" height="100%" id="navbar-logo"/></a></li>
+						<span class="navbar-line">&nbsp;</span>
+						<div class="navbar-container">
+							{% for link in navlinks %}
+								<li><a href="{{ link.href }}" {% if link.href === thispage %} class="active-page" {% endif %} target="_self">{{ link.name }}</a></li>
+							{% endfor %}
+						</div>
+						<div style="float:right;" id="dropdown">
+							{% if not loggedIn %}
+								<a href="/login" class="dropbtn {{ 'active-page' if thispage === 'login' }}" target="_self">Login</a>
+							{% else %}
+								<a href="/logout" class="dropbtn {% if 'logout' === thispage %}'active-page' {% endif %}{% if mongoless %}'disabled' {% endif %}" target="_self">Logout</a>
+							{% endif %}
+						</div>
+					</ul>
+				</div>
+				<div class="plate">
+					<a href="/">
+						<div class="burger-home">
+							<img src="/assets/logo.jpeg" id="burger-logo" alt="Logo"/>
+						</div>
+					</a>
+					<div class="burger">
+						<div class="patty"></div>
 					</div>
-					<div class="plate"><a href="/"><div class="burger-home"><img src="/assets/logo.jpeg" id="burger-logo" alt="Logo"/></div></a><div class="burger"><div class="patty"></div></div></div><hr class="plate-bar"/>
-					<div class="hamburger-menu">
-						<div style="height:80px;"></div>
-						<hr id="top-line"/>
-						{% for link in navlinks %}
-							<a href="{{ '/' if loop.index0 }}{{ link.href }}" target="_self"><div class="lettuce{% if link.href == thispage %} active-page {% endif %}" >{{ link.name }}</div></a>
-							<hr class="minor"/>
-						{% endfor %}
+				</div>
+				{# <hr class="plate-bar"/> #}
+				<div class="hamburger-menu">
+					<div style="height:80px;"></div>
+					<hr id="top-line"/>
+					{% for link in navlinks %}
+						<a href="{{ '/' if loop.index0 }}{{ link.href }}" target="_self">
+							<div class="lettuce{% if link.href == thispage %} active-page {% endif %}" >
+								{{ link.name }}
+							</div>
+						</a>
+						<hr class="minor"/>
+					{% endfor %}
 
-						{# <a href="/about" target="_self"><div class="lettuce{% if 'about' == thispage %} active-page {% endif %}" id="most-bottom">Our Society</div></a>
-						<hr class="minor lower-border"/>
-						<a href="/members" target="_self"><div class="lettuce{% if 'members' == thispage %} active-page{% endif %}" id="almost-bottom">Our Members</div></a> #}
-						{% if loggedIn %}
-							<a href="/logout" target="_self"><div class="lettuce{% if 'logout' == thispage %} active-page{% endif %}{% if mongoless %} disabled{% endif %}"> Logout </div></a>
-						{% else %}
-							<a href="/login" target="_self"><div class="lettuce{% if 'login' == thispage %} active-page{% endif %}{% if mongoless %} disabled{% endif %}"> Login </div></a>
-						{% endif %}
-						<hr class="border-bottom"/>
-					</div>
-					<script>
-						document.querySelector('.burger').addEventListener('click', function () {
-							this.classList.toggle('open');
-							document.querySelector('.hamburger-menu').classList.toggle('slide');
-							document.querySelector('#content-wrap').classList.toggle('burger-open');
-						});
-					</script>
-				{% endblock %}
-				<div id="pagecontent">
-					{% block pagecontent %}
-						Huh, this is an empty page.
-					{% endblock %}
+					{% if loggedIn %}
+						<a href="/logout" target="_self">
+							<div class="lettuce{% if 'logout' == thispage %} active-page{% endif %}{% if mongoless %} disabled{% endif %}"> 
+								Logout 
+							</div>
+						</a>
+					{% else %}
+						<a href="/login" target="_self">
+							<div class="lettuce{% if 'login' == thispage %} active-page{% endif %}{% if mongoless %} disabled{% endif %}">
+									Login 
+							</div>
+						</a>
+					{% endif %}
+					{# <hr class="border-bottom"/> #}
 				</div>
+				
+				<script>
+					document.querySelector('.burger').addEventListener('click', function () {
+						this.classList.toggle('open');
+						document.querySelector('.hamburger-menu').classList.toggle('slide');
+						// document.querySelector('#content-wrap').classList.toggle('burger-open');
+					});
+				</script>
+			{% endblock %}
+			<div id="pagecontent">
+				{% block pagecontent %}
+					Huh, this is an empty page.
+				{% endblock %}
 			</div>
-			<footer>
-				<a id="footer-logo" href="/"><img src="/assets/logo.jpeg" alt="MASK"/></a>
-				<a href="/" id="footer-name"><p>Manga and Anime<br/>Society Kharagpur</p></a>
-				<div id="contact-us"><span class="float-middle">Find us!</span></div>
-				<a href="https://www.youtube.com/@maskiitkgp" target="_blank" target="_self" class="social-link"><img class="social-icon" src="/assets/icons/youtube.png" alt="Youtube"/></a>
-				<a href="https://www.instagram.com/maskiitkgp" target="_blank" target="_self" class="social-link"><img class="social-icon" src="/assets/icons/instagram.png" alt="Instagram"/></a>
-				<a href="https://www.facebook.com/maskiitkgp" target="_blank" target="_self" class="social-link"><img class="social-icon" src="/assets/icons/facebook.png" alt="Facebook"/></a>
-				<a href="mailto:maskiitkgp@gmail.com" target="_blank" target="_self" class="social-link"><img class="social-icon" id="gmail" src="/assets/icons/gmail.png" alt="Gmail"/></a>
-				<a href="https://github.com/kgpmask/MASK" target="_blank" target="_self" class="social-link"><img class="social-icon" src="/assets/icons/github.png" alt="GitHub"></a>
-			</footer>
+			{% block footer %}
+				<footer>
+					{# <a id="footer-logo" href="/"><img src="/assets/logo.jpeg" alt="MASK"/></a>
+					<a href="/" id="footer-name"><p>Manga and Anime<br/>Society Kharagpur</p></a>
+					<div id="contact-us"><span class="float-middle">Find us!</span></div> #}
+					<a href="https://www.youtube.com/@maskiitkgp" target="_blank" target="_self" class="social-link"><img class="social-icon" src="/assets/icons/youtube.png" alt="Youtube"/></a>
+					<a href="https://www.instagram.com/maskiitkgp" target="_blank" target="_self" class="social-link"><img class="social-icon" src="/assets/icons/instagram.png" alt="Instagram"/></a>
+					<a href="https://www.facebook.com/maskiitkgp" target="_blank" target="_self" class="social-link"><img class="social-icon" src="/assets/icons/facebook.png" alt="Facebook"/></a>
+					<a href="mailto:maskiitkgp@gmail.com" target="_blank" target="_self" class="social-link"><img class="social-icon" id="gmail" src="/assets/icons/gmail.png" alt="Gmail"/></a>
+					<a href="https://github.com/kgpmask/MASK" target="_blank" target="_self" class="social-link"><img class="social-icon" src="/assets/icons/github.png" alt="GitHub"></a>
+				</footer>
+			{% endblock %}
 			{% block autoscroll %}
 				<script>
 					window.scrollTo(0, 0);
diff --git a/templates/_form.njk b/templates/_form.njk
index 48b813f..6fda71a 100644
--- a/templates/_form.njk
+++ b/templates/_form.njk
@@ -4,6 +4,12 @@
 	</div>
 {% endmacro %}
 
+{% macro description(h, label) %}
+	<div class="description">
+		<{{h}}>{{ label }}</{{h}}>
+	</div>
+{% endmacro %}
+
 {% macro field(id, label, value, type = "text", autocomplete = true) %}
 	<div class="item field" {% if type == 'hidden' %} style="display: none;" {% endif %} >
 		<input type="{{type}}" required id="{{ id }}" {% if value %} value="{{ value }}" {% endif %} {{ 'autocomplete=off' if not autocomplete }}>
@@ -68,7 +74,7 @@
 		<h1 class="heading"> {{ formheading }} </h1>
 	{% endif %}
 	<div class="form-container">
-		<form>
+		<form class="form">
 			{{ caller() }}
 		</form>
 	</div>
@@ -112,6 +118,7 @@
 						break;
 					case 'select':
 						data[e.children[1].id] = e.children[1].value;
+						console.log("DATA: ", data[e.children[1].id]);
 						break;
 				}
 			});
diff --git a/templates/auth/login.njk b/templates/auth/login.njk
index 045956b..e0b5d79 100644
--- a/templates/auth/login.njk
+++ b/templates/auth/login.njk
@@ -10,16 +10,21 @@
 {% block pagecontent %}
 	{% call forms.form() %}
 		{{ forms.heading('h1','Login') }}
+		{{ forms.description('h2','Kindly login to participate in the hunt ^-^') }}
 		{{ forms.field('username','Team ID')}}
-		{{ forms.field('password','Passcode',type='password')}}
-		{{ forms.button('submit', 'Login', 'login') }}
+		{{ forms.field('password','User Password',type='password')}}
+		<div class="buttons">
+			{{ forms.button('submit', 'Login', 'login') }}
+		</div>
 	{% endcall %}
 {% endblock %}
 
 {% block customcss %}
 	{{ forms.formCss() }}
 	<style>
-		{# extra css #}
+		.form {
+			width: 280px;
+		}
 	</style>
 {% endblock %}
 
diff --git a/templates/auth/logout.njk b/templates/auth/logout.njk
index 6716803..611ec47 100644
--- a/templates/auth/logout.njk
+++ b/templates/auth/logout.njk
@@ -9,8 +9,10 @@
 {% block pagecontent %}
 	{% call forms.form() %}
 		{{ forms.heading('h3','Are you sure you want to logout?') }}
-		{{ forms.button('return', 'No, Return to Home', 'back') }}
-		{{ forms.button('logout', 'Yes, Logout', 'logout') }}
+		<div class="buttons">
+			{{ forms.button('return', 'No, Return to Home', 'back') }}
+			{{ forms.button('logut', 'Yes, logout', 'logout') }}
+		</div>
 	{% endcall %}
 
 {% endblock %}
@@ -18,8 +20,11 @@
 {% block customcss %}
 	{{ forms.formCss() }}
 	<style>
-		#return {
-			background-color: #1bc90f;
+		button {
+			width: 189px;
+		}
+		.form {
+			width: 280px;
 		}
 	</style>
 {% endblock %}
diff --git a/templates/live/interface.njk b/templates/live/interface.njk
index 066d456..043e60d 100644
--- a/templates/live/interface.njk
+++ b/templates/live/interface.njk
@@ -15,8 +15,12 @@
 	</div>
 	<div id="instructions" style="display: none;">
 		{% call forms.form() %}
-			<p> Click the button to proceed. </p>
-			<button type="button" id="continue" onclick="start()">Continue</button>
+			{# <p> Click the button to proceed. </p> #}
+			{{ forms.heading('h4','Click the button to proceed.') }}
+			{# <button type="button" id="continue" onclick="start()">Continue</button> #}
+			<div class="buttons">
+				{{ forms.button('continue', 'Continue', 'start') }}
+			</div>
 		{% endcall %}
 	</div>
 	{{ loadingscreen('instructions') }}
@@ -252,8 +256,8 @@
 		<div id="interface-container">
 			<h1 class="title">Treasure Hunt</h1>
 			<div class="team-info">
-				<p id="team-id" style="font-size: 25px; font-weight: bold;">Team ID: <span style="font-weight: lighter;">{{ team._id }}</span></p>
-				<p id="team-name" style="font-size: 25px; font-weight: bold;">Team Name: <span style="font-weight: lighter;">{{ team.name }}</span></p>
+				<p id="team-id">Team ID: <span style="font-weight: lighter;">{{ team._id }}</span></p>
+				<p id="team-name">Team Name: <span style="font-weight: lighter;">{{ team.name }}</span></p>
 			</div>
 			<div class="form-box">
 				<div id='waiting'>
@@ -271,25 +275,34 @@
 				<div id="location-code">
 					{% call forms.form() %}
 					<div class="question">
-						<h3>Question</h3>
+						<h3 id="question-title"></h3>
 						<p id="location-question"></p>
 					</div>
-						{{ forms.field('locationcode', 'Location Code', autocomplete = false) }}
-					<button id="location-submit-button" onclick="this.disabled = true">Submit</button>
+					<div class="form-field">
+						<div style="width: 250px">
+							{{ forms.field('locationcode', 'Location Code', autocomplete = false) }}
+						</div>
+					</div>
+					<div class="buttons">
+						<button id="location-submit-button" onclick="this.disabled = true">Submit</button>
+					</div>
 					{% endcall %}
 				</div>
 				<div id="riddle-form">
 					{% call forms.form() %}
 					<div class="question">
-						<h3>Question</h3>
+						<h3 id="question-title"></h3>
 						<p id="riddle-question"></p>
 					</div>
 					{# {{ forms.field('riddleanswer','Answer') }} #}
 					<div class="item select" style="margin: 0;">
-						<label style="top: -8px;"></label>
-						<select name="riddleanswer" id="riddleanswer" style="height: 40px; font-size: 17px; font-weight: 400;"></select>
+						<label style=""></label>
+						<select name="riddleanswer" id="riddleanswer" style="height: 40px; font-size: 17px; font-weight: 400; padding: 0px 10px; appearance: none;"></select>
+						<div class="dropdown-arrow" style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #ffffff;"></div>
+					</div>
+					<div class="buttons">
+						<button id="riddle-submit-button" onclick="this.disabled = true">Submit</button>
 					</div>
-					<button id="riddle-submit-button" onclick="this.disabled = true">Submit</button>
 					{% endcall %}
 				</div>
 			</div>
@@ -303,6 +316,17 @@
 {% block customcss %}
 <style>
 	
+	.title {
+		font-size: 48px;
+		font-weight: 700;
+	}
+	.team-info {
+		margin-top: 5px;
+		margin-bottom: 30px;
+		color: var(--red);
+		font-weight: 400;
+		font-size: 24px;
+	}
 	#instructions {
 		top: 50%;
 		left: 50%;
@@ -336,44 +360,49 @@
 		border-radius: 5px;
 	}
 
-	.correct {
-		color: green;
-		font-size: 50px;
-	}
-
-	.incorrect {
-		color: red;
-		font-size: 50px;
-	}
-
-	#container {
-		margin: auto;
-		width: 350px;
+	.incorrect,.correct {
+		height: 218px;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
+		gap: 45px;
+		color: red;
+		font-size: 48px;
 	}
 
-	#interface-container {
-		top: 50%;
-		left: 50%;
-		position: absolute;
-		transform: translate(-50%, -50%);
+	.incorrect > button,.correct > button {
+		background-color: #444444;
 	}
 
-	.team-info {
-		margin-top: 20px;
+	.correct {
+		color: green;
 	}
 
+	.incorrect {
+		color: red;
+	}
+	
 	.question {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		padding-bottom: 5px;
 		font-size: 20px;
-		margin-bottom: 30px;
+		{# margin-bottom: 30px; #}
+		color: #FFFFFF;
 	}
 
 	.question h3 {
+		font-size: 48px;
+		font-weight: 700;
 		margin: 0px 0px 10px 0px;
-		color: #8b0000;
+	}
+
+	.question p {
+		padding: 20px 0px 20px 0px;
+		font-weight: 400;
+		font-size: 18px;
 	}
 
 	.form-container {
@@ -383,6 +412,13 @@
 		justify-content: center;
 	}
 
+	.form-field {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		{# width: 200px; #}
+	}
+
 	#location-form {
 		display: block;
 	}
@@ -474,6 +510,7 @@
 		
 		// locationCode.style.display = state === 'location-code' ? 'block' : 'none';
 		// riddleForm.style.display = ['riddle-question', 'riddle-timeout'].find((e) => e === state) ? 'block' : 'none';
+		document.getElementById('question-title').innerHTML = 'Question #' + (attempted + 1);
 		messageBox.innerHTML = '';
 		messageCover.style.display = 'none';
 			if (state === 'completed') {
@@ -591,36 +628,58 @@
 
 	async function submit() {
 		const data = getData();
+		console.log(data)
 		try {
 			console.log(data.locationcode.trim());
-			const response = await axios.post('/live/submit', {state: state, answer: state === 'location-code'? data.locationcode.trim() : data.riddleanswer, questionNo: attempted});
+			const response = await axios.post('/live/submit', {state: state, answer: state === 'location-code'? data.locationcode.trim() : ((state === 'riddle-question') ? data.riddleanswer : "blablabla"), questionNo: attempted});
 			if (state === 'location-code') {
 				const locationButton = document.getElementById('location-submit-button');
 				const messageBox = document.getElementById("message-box");
-				messageBox.innerHTML = '<h2 class="correct">Correct Location!</h2>';
+				messageBox.innerHTML = `
+					<div class="correct">
+						<p>Correcto! ^_^</p>
+						<button id="correct-button" onclick="this.disabled = true">Next -></button>
+					</div>
+				`;
 				const messageCover = document.getElementById("message-cover");
 				messageCover.style.display = 'block';
 				state = 'riddle-question';
-				setTimeout(async () => {
+				/* setTimeout(async () => {
 					messageCover.style.display = "none";
 					locationButton.disabled = false;
 					await renderForm();
-				}, 2000);
+				}, 2000); */
+				document.getElementById("correct-button").addEventListener("click", async function (event) {
+					messageCover.style.display = "none";
+					locationButton.disabled = false;
+					await renderForm();
+				});
 			}
 			else {
 				const riddleButton = document.getElementById('riddle-submit-button');
 				const messageBox = document.getElementById("message-box");
-				messageBox.innerHTML = '<h2 class="correct">Correct Answer!</h2>';
+				messageBox.innerHTML = `
+					<div class="correct">
+						<p>Correcto! ^_^</p>
+						<button id="correct-button-riddle" onclick="this.disabled = true">Next -></button>
+					</div>
+				`;
 				const messageCover = document.getElementById("message-cover");
 				messageCover.style.display = 'block';
 				state = 'location-code';
 				attempted++;
-				setTimeout(async () => {
+				/* setTimeout(async () => {
 					messageCover.style.display = "none";
 					document.getElementById('locationcode').value= '';
 					riddleButton.disabled = false;
 					await renderForm();
-				}, 3000);
+				}, 3000); */
+				document.getElementById("correct-button-riddle").addEventListener("click", async function (event) {
+					messageCover.style.display = "none";
+					document.getElementById('locationcode').value= '';
+					riddleButton.disabled = false;
+					await renderForm()
+				});
 			}
 		}
 		catch ( e ) {
@@ -636,17 +695,28 @@
 				const riddleButton = document.getElementById('riddle-submit-button');
 				riddleButton.disabled = true;
 				const messageBox = document.getElementById("message-box");
-				messageBox.innerHTML = '<h2 class="correct">Correct Answer!</h2>';
+				messageBox.innerHTML = `
+					<div class="correct">
+						<p>Correcto! ^_^</p>
+						<button id="correct-button" onclick="this.disabled = true">Next -></button>
+					</div>
+				`;
 				const messageCover = document.getElementById("message-cover");
 				messageCover.style.display = 'block';
 				state = 'location-code';
 				attempted++;
-				setTimeout(async () => {
+				/* setTimeout(async () => {
+					messageCover.style.display = "none";
+					state='completed';
+					document.getElementById('container').style.display = 'none';
+					document.getElementById('done-cover').style.display = 'flex';
+				}, 3000); */
+				document.getElementById("correct-button").addEventListener("click", async function (event) {
 					messageCover.style.display = "none";
 					state='completed';
 					document.getElementById('container').style.display = 'none';
 					document.getElementById('done-cover').style.display = 'flex';
-				}, 3000);
+				});
 			}
 			else if ( e.response.status === 871 ) {
 				localStorage.setItem('encountered-error', true);
@@ -657,28 +727,48 @@
 					const locationButton = document.getElementById('location-submit-button');
 					locationButton.disabled = true;
 					const messageBox = document.getElementById("message-box");
-					messageBox.innerHTML = '<h2 class="incorrect">Incorrect Location Code!</h2>';
+					messageBox.innerHTML = `
+						<div class="incorrect">
+							<p>Incorrect! ;-;</p>
+							<button id="incorrect-button" onclick="this.disabled = true">Try Again</button>
+						</div>
+					`;
 					const messageCover = document.getElementById("message-cover");
 					messageCover.style.display = 'block';
-					setTimeout(() => {
+					/* setTimeout(() => {
+						messageCover.style.display = "none";
+						locationButton.disabled = false;
+					}, 2000); */
+					document.getElementById("incorrect-button").addEventListener("click", async function (event) {
+						event.preventDefault();
 						messageCover.style.display = "none";
 						locationButton.disabled = false;
-					}, 2000);
+					});
 				}
 				else if ( state === 'riddle-question' ) {
 					endOfTimeout = new Date(Date.now() + 125 * 1000);
 					const riddleButton = document.getElementById('riddle-submit-button');
 					riddleButton.disabled = true;
 					const messageBox = document.getElementById("message-box");
-					messageBox.innerHTML = '<h2 class="incorrect">Incorrect Answer!</h2>';
+					messageBox.innerHTML = `
+						<div class="incorrect">
+							<p>Incorrect! ;-;</p>
+							<button id="incorrect-button-riddle" onclick="this.disabled = true">Try Again</button>
+						</div>
+					`;
 					const messageCover = document.getElementById("message-cover");
 					messageCover.style.display = 'block';
 					state = 'riddle-timeout';
-					setTimeout(async () => {
+					/* setTimeout(async () => {
+						messageCover.style.display = "none";
+						riddleButton.disabled = false;
+						await renderForm();
+					}, 5000); */
+					document.getElementById("incorrect-button-riddle").addEventListener("click", async function (event) {
 						messageCover.style.display = "none";
 						riddleButton.disabled = false;
 						await renderForm();
-					}, 5000);
+					});
 				}
 			}
 		}