diff --git a/templates/signup.tmpl b/templates/signup.tmpl
index 70e81bd..ab97b51 100644
--- a/templates/signup.tmpl
+++ b/templates/signup.tmpl
@@ -18,15 +18,15 @@
 						<span class="absolute" role="img" aria-label="person outline icon for username">
 							{{ template "svg-user.tmpl" }}
 						</span>
-						<input name="username" type="text" placeholder="Username" required class="block w-full py-3 text-gray-700 bg-white border rounded-lg px-11 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
+						<input name="username" type="text" placeholder="Username" required class="block w-full py-3 valid:border-green-300 required:border-blue-300 text-gray-700 bg-white border rounded-lg px-11 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
 					</div>
 					<div class="relative flex items-center mt-4">
 						<!-- <label class="block"> -->
 						<span class="absolute" role="img" aria-label="email icon">
 							{{ template "svg-email.tmpl" }}
 						</span>
-						<input name="email" type="email" placeholder="Email address" required class="peer block w-full px-10 py-3 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
-						<p class="mt-2 mx-4 hidden peer-invalid:block text-pink-600 text-sm">
+						<input name="email" type="email" placeholder="Email address" required class="peer block w-full px-10 py-3 valid:border-green-300 required:border-blue-300 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
+						<p class="mt-2 mx-4 peer-placeholder-shown:collapse peer-invalid:block text-pink-600 text-sm">
 							Please provide a valid email address.
 						</p>
 						<!-- </label> -->
@@ -35,7 +35,7 @@
 						<span class="absolute" role="img" aria-label="password lock icon">
 							{{ template "svg-password.tmpl" }}
 						</span>
-						<input name="password" type="password" placeholder="Password" required class="block w-full px-10 py-3 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
+						<input name="password" type="password" placeholder="Password" required class="block w-full px-10 py-3 required:border-blue-300 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
 					</div>
 					<div class="mt-8 md:flex md:items-center">
 						<button class="w-full px-6 py-3 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-lg md:w-1/2 hover:bg-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-50">