diff --git a/static/registration/css/login_css.css b/static/registration/css/login_css.css
index 9043a38..5184236 100644
--- a/static/registration/css/login_css.css
+++ b/static/registration/css/login_css.css
@@ -84,6 +84,7 @@ input[type=text]{
     border: 1px solid #ced4da;
     border-radius: 0.25rem;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    text-align: center;
 }
 input[type=password]{
     display: block;
@@ -98,7 +99,8 @@ input[type=password]{
     background-clip: padding-box;
     border: 1px solid #ced4da;
     border-radius: 0.25rem;
-    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    text-align: center;
 }
 
 input[type=text]:focus {
diff --git a/static/registration/css/signup_css.css b/static/registration/css/signup_css.css
index 372ff35..8d82e60 100644
--- a/static/registration/css/signup_css.css
+++ b/static/registration/css/signup_css.css
@@ -35,15 +35,10 @@ div button{
 
 }
 
-input[type=text]{
-background-color: #fff3e0;
-  border-radius: 0px;
-
-}
-input[type=password]{
-background-color: #fff3e0;
-  border-radius: 0px;
- 
+input[type=text], input[type=password], input[type=email]{
+	background-color: #fff3e0;
+	border-radius: 0px;
+	text-align: center;
 }
 
 input[type=text]:focus {
diff --git a/static/sherlocked/css/main.css b/static/sherlocked/css/main.css
index d12bca0..728c7d0 100644
--- a/static/sherlocked/css/main.css
+++ b/static/sherlocked/css/main.css
@@ -38,7 +38,7 @@ input::placeholder {
 	background-color:#6F4242;
 	border-radius: 2px;
 	border:none;
-	margin: 5%;
+	margin-top: 5vh;
 	padding: 0.8%;
 	box-shadow: none; 
 	margin-left: 0;
@@ -149,6 +149,8 @@ li:active {
 	background-position: bottom;
 	background-size: contain;
 	background-repeat: no-repeat;
+	padding: 5vw;
+	overflow-x: auto;
 }
 
 #table-head {
@@ -174,12 +176,13 @@ li:active {
     border: none;
     color: #6F4242;
     outline:none;
-    width: 70%;
+    width: 25%;
     box-shadow:none;
     border-bottom: 1px solid black;
     border-radius: none;
-    display: block;
+    display: inline-block;
     margin: auto;
+    margin-left: 32px;
 }
 
 #answer:focus {
@@ -188,8 +191,24 @@ li:active {
 
 }
 
-
+.question_story{
+	height: 35vh;
+	max-height: 35vh;
+	overflow-y: auto;
+}
+#ques-img img{
+	height: 40vh;
+	width: auto;
+}
 @media only screen and (max-width: 768px){
+	.btn1{
+		margin-right: auto;
+		margin-left: auto;
+	}
+	#ques-img img{
+		width: 70vw;
+		height: auto;
+	}
 	#divOne {
 		width: 100%;
 		height: 53vh;
@@ -227,6 +246,8 @@ li:active {
 
 	#divTwo{
 		width: 100%;
+		padding: 10vw;
+		text-align: center;
 	}
 
 	#menu-table {
@@ -244,7 +265,11 @@ h4{
 .dash a{
 	margin-top: 15% !important;
 }
-
+.question_story{
+	height: 55vh;
+	max-height: 55vh;
+	overflow-y: auto;
+}
 	
 }
 
diff --git a/templates/registration/signup.html b/templates/registration/signup.html
index ec601f0..92efdbf 100644
--- a/templates/registration/signup.html
+++ b/templates/registration/signup.html
@@ -24,9 +24,6 @@
                             <div class="form-container">
                                 <label for="id_username"></label>
                                 {{ form.username }}
-                                {% for error in form.username.errors %}
-                                    <p style="color: red; margin-bottom: 0;">{{ error }}</p>
-                                {% endfor %}
                             </div>
                         </div>
                     </div>
@@ -38,18 +35,14 @@
                             <div class="form-container">
                                 <label for="id_firstname"></label>
                                 {{ form.firstname }}
-                                {% for error in form.firstname.errors %}
-                                    <p style="color: red; margin-bottom: 0;">{{ error }}</p>
-                                {% endfor %}
+                                
                             </div>
                         </div>
                         <div class="col-6">
                             <div class="form-container">
                                 <label for="id_lastname"></label>
                                 {{ form.lastname }}
-                                {% for error in form.lastname.errors %}
-                                    <p style="color: red; margin-bottom: 0;">{{ error }}</p>
-                                {% endfor %}
+                                
                             </div>
                         </div>
                     </div>
@@ -60,9 +53,7 @@
                             <div class="form-container">
                                 <label for="id_email"></label>
                                 {{ form.email }}
-                                {% for error in form.email.errors %}
-                                    <p style="color: red; margin-bottom: 0;">{{ error }}</p>
-                                {% endfor %}
+                                
                             </div>
                         </div>
                     </div>
@@ -73,16 +64,12 @@
                             <div class="col-6">
                                 <label for="id_password1"></label>
                                 {{ form.password1 }}
-                                {% for error in form.password1.errors %}
-                                    <p style="color: red; margin-bottom: 0;">{{ error }}</p>
-                                {% endfor %}
+                                
                             </div>
                             <div class="col-6">
                                 <label for="id_password2"></label>
                                 {{ form.password2}}
-                                {% for error in form.password2.errors %}
-                                    <p style="color: red; margin-bottom: 0;">{{ error }}</p>
-                                {% endfor %}
+                                
                             </div>
                         </div>
                     </div>
@@ -92,9 +79,7 @@
                                 <div class="form-container">
                                     <label forvalidate-message="id_college_name"></label>
                                     {{ form.college_name }}
-                                    {% for error in form.college_name.errors %}
-                                        <p style="color: red; margin-bottom: 0;">{{ error }}</p>
-                                    {% endfor %}
+                                    
                                 </div>
                             </div>
                         </div>
@@ -105,16 +90,10 @@
                                 <div class="col-6">
                                     <label forvalidate-message="zealid"></label>
                                     {{ form.zeal_Id }}
-                                    {% for error in form.zeal_Id.errors %}
-                                        <p style="color: red; margin-bottom: 0;">{{ error }}</p>
-                                    {% endfor %}
                                 </div>
                                 <div class="col-6">
                                     <label for="id_contact_no"></label>
                                     {{ form.contact_no }}
-                                    {% for error in form.contact_no.errors %}
-                                        <p style="color: red; margin-bottom: 0;">{{ error }}</p>
-                                    {% endfor %}
                                 </div>
                             </div></div></div>
                         </div>
@@ -122,6 +101,33 @@
                             <button type="submit" class="button display-block">Signup</button>
                         </div>
                         <p><span id="validate-message"></span></p>
+                        {% for error in form.username.errors %}
+                            <p style="color: red; margin-bottom: 0;">{{ error }}</p>
+                        {% endfor %}
+                        {% for error in form.zeal_Id.errors %}
+                            <p style="color: red; margin-bottom: 0;">{{ error }}</p>
+                        {% endfor %}
+                        {% for error in form.firstname.errors %}
+                            <p style="color: red; margin-bottom: 0;">{{ error }}</p>
+                        {% endfor %}
+                        {% for error in form.contact_no.errors %}
+                            <p style="color: red; margin-bottom: 0;">{{ error }}</p>
+                        {% endfor %}
+                        {% for error in form.password2.errors %}
+                            <p style="color: red; margin-bottom: 0;">{{ error }}</p>
+                        {% endfor %}
+                        {% for error in form.college_name.errors %}
+                                        <p style="color: red; margin-bottom: 0;">{{ error }}</p>
+                        {% endfor %}
+                        {% for error in form.password1.errors %}
+                                    <p style="color: red; margin-bottom: 0;">{{ error }}</p>
+                        {% endfor %}
+                        {% for error in form.email.errors %}
+                                    <p style="color: red; margin-bottom: 0;">{{ error }}</p>
+                        {% endfor %}
+                        {% for error in form.lastname.errors %}
+                                    <p style="color: red; margin-bottom: 0;">{{ error }}</p>
+                        {% endfor %}
                 </form>
             </div>
         </div>
diff --git a/templates/sherlocked/play.html b/templates/sherlocked/play.html
index 6459474..5411c8f 100644
--- a/templates/sherlocked/play.html
+++ b/templates/sherlocked/play.html
@@ -5,18 +5,18 @@
 {% block title %}Solve Mystery{% endblock %}
 
 {% block content %}
-    <h1>{{ user.username }}</h1>
+    <h3>{{ user.username }}</h3>
 
     <!-- Question story. -->
-    <h2>You're at question {{ question.question_level }}</h2>
-    <div id="story" style="margin-top: 5%;">
-            <h3>Story</h3>
-        <p>{{ question.question_story }}</p>
+    <h5>You're at question {{ question.question_level }}</h5>
+    <div id="story" style="margin-top: 5vh;">
+            <h1>Story</h1>
+        <p class="question_story">{{ question.question_story }}</p>
     </div>
 
     <!-- Question content. Hidden by default -->
-    <div id="question" style="display: none; margin-top: 5%;">
-        <h3>Question</h3>
+    <div id="question" style="display: none; margin-top: 5vh;">
+        <h1>Question</h1>
         {% if question.image %}
             <div id="ques-img">
                     <img src="{{ question.image.url }}" alt="Question Image">
@@ -27,9 +27,9 @@ <h3>Question</h3>
         <!-- Submission form -->
         <form action="{% url 'submit' %}" method="POST" id="ans-form">
             {% csrf_token %}
-            <label for="answer">Answer:</label>
+            <span>Answer:</span>
             <input name="answer" id = "answer" type="text">
-            <p><input class="btn1 d-block mx-auto" type="submit" style="margin-top: 5%;"></p>
+            <p><input class="btn1 d-block" type="submit" style="margin-top: 5%;"></p>
         </form>
     </div>