diff --git a/app/assets/javascripts/discourse/app/controllers/create-account.js b/app/assets/javascripts/discourse/app/controllers/create-account.js
index 57b41f44493..b2e9622923b 100644
--- a/app/assets/javascripts/discourse/app/controllers/create-account.js
+++ b/app/assets/javascripts/discourse/app/controllers/create-account.js
@@ -237,7 +237,7 @@ export default Controller.extend(
       "authOptions.email",
       "authOptions.email_valid"
     )
-    emailValidated() {
+    emailDisabled() {
       return (
         this.get("authOptions.email") === this.accountEmail &&
         this.get("authOptions.email_valid")
diff --git a/app/assets/javascripts/discourse/app/templates/modal/create-account.hbs b/app/assets/javascripts/discourse/app/templates/modal/create-account.hbs
index 7cef048619a..846bee341d3 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/create-account.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/create-account.hbs
@@ -15,37 +15,28 @@
         {{#if showCreateForm}}
 
           <div class="login-form">
-
             <form>
               <div class="input-group create-account-email">
-                {{#if emailValidated}}
-                  <span class="value">{{accountEmail}}</span>
-                {{else}}
-                  {{input type="email" value=accountEmail id="new-account-email" name="email" class=(value-entered accountEmail) autofocus="autofocus" focusOut=(action "checkEmailAvailability")}}
-                  <label class="alt-placeholder" for="new-account-email">
-                    {{i18n "user.email.title"}}
-                    {{~#if userFields~}}
-                      <span class="required">*</span>
-                    {{/if}}
-                  </label>
-                {{/if}}
+                {{input type="email" disabled=emailDisabled value=accountEmail id="new-account-email" name="email" class=(value-entered accountEmail) autofocus="autofocus" focusOut=(action "checkEmailAvailability")}}
+                <label class="alt-placeholder" for="new-account-email">
+                  {{i18n "user.email.title"}}
+                  {{~#if userFields~}}
+                    <span class="required">*</span>
+                  {{/if}}
+                </label>
                 {{input-tip validation=emailValidation id="account-email-validation"}}
                 <span class="more-info">{{i18n "user.email.instructions"}}</span>
               </div>
 
               <div class="input-group">
-                {{#if usernameDisabled}}
-                  <span class="value">{{accountUsername}}</span>
-                {{else}}
-                  {{input value=accountUsername class=(value-entered accountUsername) id="new-account-username" name="username" maxlength=maxUsernameLength
-                  autocomplete="discourse"}}
-                  <label class="alt-placeholder" for="new-account-username">
-                    {{i18n "user.username.title"}}
-                    {{~#if userFields~}}
-                      <span class="required">*</span>
-                    {{/if}}
-                  </label>
-                {{/if}}
+                {{input value=accountUsername disabled=usernameDisabled class=(value-entered accountUsername) id="new-account-username" name="username" maxlength=maxUsernameLength
+                autocomplete="discourse"}}
+                <label class="alt-placeholder" for="new-account-username">
+                  {{i18n "user.username.title"}}
+                  {{~#if userFields~}}
+                    <span class="required">*</span>
+                  {{/if}}
+                </label>
 
                 {{input-tip validation=usernameValidation id="username-validation"}}
                 <span class="more-info">{{i18n "user.username.instructions"}}</span>
@@ -53,20 +44,15 @@
 
               <div class="input-group">
                 {{#if fullnameRequired}}
-
-                  {{#if nameDisabled}}
-                    <span class="value">{{accountName}}</span>
-                  {{else}}
-                    {{text-field value=accountName id="new-account-name" class=(value-entered accountName)}}
-                    <label class="alt-placeholder" for="new-account-name">
-                      {{i18n "user.name.title"}}
-                      {{#if siteSettings.full_name_required}}
-                        {{~#if userFields~}}
-                          <span class="required">*</span>
-                        {{/if}}
+                  {{text-field disabled=nameDisabled value=accountName id="new-account-name" class=(value-entered accountName)}}
+                  <label class="alt-placeholder" for="new-account-name">
+                    {{i18n "user.name.title"}}
+                    {{#if siteSettings.full_name_required}}
+                      {{~#if userFields~}}
+                        <span class="required">*</span>
                       {{/if}}
-                    </label>
-                  {{/if}}
+                    {{/if}}
+                  </label>
 
                   {{input-tip validation=nameValidation}}
                   <span class="more-info">{{nameInstructions}}</span>
diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index 671106a7ade..d042e13b203 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -141,6 +141,9 @@
         border: 1px solid var(--tertiary);
         box-shadow: 0 0 0 2px rgba(var(--tertiary-rgb), 0.25);
       }
+      input:disabled {
+        background-color: var(--primary-low);
+      }
       span.more-info {
         color: var(--primary-medium);
         min-height: 1.4em; // prevents height increase due to tips
@@ -154,6 +157,7 @@
         left: 1em;
         top: 10px;
         box-shadow: 0 0 0 0px rgba(var(--tertiary-rgb), 0);
+        border-radius: 0.25em;
         transition: 0.2s ease all;
       }
       input:focus + label.alt-placeholder,