diff --git a/static/styles/portico/portico-signin.css b/static/styles/portico/portico-signin.css
index 01d5d8573d..33dba90de2 100644
--- a/static/styles/portico/portico-signin.css
+++ b/static/styles/portico/portico-signin.css
@@ -402,6 +402,7 @@ html {
         input[type="email"],
         input[type="password"] {
             padding: 10px 32px 10px 12px;
+            margin: 25px 0 5px;
 
             font-family: "Source Sans Pro";
             font-size: 1.2rem;
@@ -426,6 +427,20 @@ html {
             }
         }
 
+        input[type="email"] {
+            margin-bottom: 10px;
+        }
+
+        label {
+            position: absolute;
+            top: 0;
+            left: 0;
+
+            margin-top: 1px;
+
+            transition: all 0.3s ease;
+        }
+
         &.moving-label {
             input[type="text"]:invalid + label,
             input[type="email"]:invalid + label,
@@ -471,8 +486,8 @@ html {
 
         label.text-error {
             display: block;
-            position: relative;
-            top: -8px;
+
+            top: 66px;
             color: hsl(0, 54%, 61%);
             font-size: 0.7em;
             font-weight: 600;
diff --git a/templates/zerver/login.html b/templates/zerver/login.html
index 9efccab154..c85e3c8892 100644
--- a/templates/zerver/login.html
+++ b/templates/zerver/login.html
@@ -52,6 +52,10 @@ page can be easily identified in it's respective JavaScript file. -->
                             <!-- .no-validation is for removing the red star in CSS -->
                             {% if not two_factor_authentication_enabled or wizard.steps.current == 'auth' %}
                             <div class="input-box no-validation">
+                                <input id="id_username" type="{% if not require_email_format_usernames %}text{% else %}email{% endif %}"
+                                  name="username" class="{% if require_email_format_usernames %}email {% endif %}required"
+                                  {% if email %} value="{{ email }}" {% else %} value="" autofocus {% endif %}
+                                  maxlength="72" required />
                                 <label for="id_username">
                                     {% if not require_email_format_usernames and email_auth_enabled %}
                                     {{ _('Email or username') }}
@@ -61,17 +65,13 @@ page can be easily identified in it's respective JavaScript file. -->
                                     {{ _('Email') }}
                                     {% endif %}
                                 </label>
-                                <input id="id_username" type="{% if not require_email_format_usernames %}text{% else %}email{% endif %}"
-                                  name="username" class="{% if require_email_format_usernames %}email {% endif %}required"
-                                  {% if email %} value="{{ email }}" {% else %} value="" autofocus {% endif %}
-                                  maxlength="72" required />
                             </div>
 
                             <div class="input-box no-validation">
-                                <label for="id_password" class="control-label">{{ _('Password') }}</label>
                                 <input id="id_password" name="password" class="required" type="password"
                                   {% if email %} autofocus {% endif %}
                                   required />
+                                <label for="id_password" class="control-label">{{ _('Password') }}</label>
                             </div>
                             {% else %}
                             {% include "two_factor/_wizard_forms.html" %}