diff --git a/openlibrary/i18n/messages.pot b/openlibrary/i18n/messages.pot
index 99b61dde84c..12a99a3b7c3 100644
--- a/openlibrary/i18n/messages.pot
+++ b/openlibrary/i18n/messages.pot
@@ -429,7 +429,8 @@ msgstr ""
 msgid "Library Explorer"
 msgstr ""
 
-#: books/custom_carousel.html login.html search/work_search_facets.html
+#: account/create.html books/custom_carousel.html login.html
+#: search/work_search_facets.html
 msgid "Loading..."
 msgstr ""
 
@@ -1033,6 +1034,10 @@ msgid ""
 "nonprofit Internet Archive"
 msgstr ""
 
+#: account/create.html type/author/view.html
+msgid "Success!"
+msgstr ""
+
 #: account/create.html
 msgid "Your URL"
 msgstr ""
@@ -6479,10 +6484,6 @@ msgstr ""
 msgid "Refresh the page?"
 msgstr ""
 
-#: type/author/view.html
-msgid "Success!"
-msgstr ""
-
 #: type/author/view.html
 msgid ""
 "OK. The merge is in motion. <i>It will take <u>a few minutes to "
diff --git a/openlibrary/plugins/openlibrary/js/signup.js b/openlibrary/plugins/openlibrary/js/signup.js
index 782f801d3cb..e3d8f16a31f 100644
--- a/openlibrary/plugins/openlibrary/js/signup.js
+++ b/openlibrary/plugins/openlibrary/js/signup.js
@@ -3,6 +3,10 @@ import { debounce } from './nonjquery_utils.js';
 export function initSignupForm() {
     const signupForm = document.querySelector('form[name=signup]');
     const i18nStrings = JSON.parse(signupForm.dataset.i18n);
+    const emailLoadingIcon = $('.ol-signup-form__input--emailAddr .ol-signup-form__icon--loading');
+    const usernameLoadingIcon = $('.ol-signup-form__input--username .ol-signup-form__icon--loading');
+    const emailSuccessIcon = $('.ol-signup-form__input--emailAddr .ol-signup-form__icon--success');
+    const usernameSuccessIcon = $('.ol-signup-form__input--username .ol-signup-form__icon--success');
 
     // Keep the same with openlibrary/plugins/upstream/forms.py
     const VALID_EMAIL_RE = /^.*@.*\..*$/;
@@ -60,6 +64,8 @@ export function initSignupForm() {
     function validateUsername() {
         const value_username = $('#username').val();
 
+        usernameSuccessIcon.hide();
+
         if (value_username === '') {
             clearError('#username', '#usernameMessage');
             return;
@@ -75,15 +81,20 @@ export function initSignupForm() {
             return;
         }
 
-        clearError('#username', '#usernameMessage');
+        usernameLoadingIcon.show();
 
         $.ajax({
             url: '/account/validate',
             data: { username: value_username },
             type: 'GET',
             success: function(errors) {
+                usernameLoadingIcon.hide();
+
                 if (errors.username) {
                     renderError('#username', '#usernameMessage', errors.username);
+                } else {
+                    clearError('#username', '#usernameMessage');
+                    usernameSuccessIcon.show();
                 }
             }
         });
@@ -92,6 +103,8 @@ export function initSignupForm() {
     function validateEmail() {
         const value_email = $('#emailAddr').val();
 
+        emailSuccessIcon.hide();
+
         if (value_email === '') {
             clearError('#emailAddr', '#emailAddrMessage');
             return;
@@ -102,15 +115,20 @@ export function initSignupForm() {
             return;
         }
 
-        clearError('#emailAddr', '#emailAddrMessage');
+        emailLoadingIcon.show();
 
         $.ajax({
             url: '/account/validate',
             data: { email: value_email },
             type: 'GET',
             success: function(errors) {
+                emailLoadingIcon.hide();
+
                 if (errors.email) {
                     renderError('#emailAddr', '#emailAddrMessage', errors.email);
+                } else {
+                    clearError('#emailAddr', '#emailAddrMessage');
+                    emailSuccessIcon.show();
                 }
             }
         });
diff --git a/openlibrary/templates/account/create.html b/openlibrary/templates/account/create.html
index 29828a0f954..2db12b20538 100644
--- a/openlibrary/templates/account/create.html
+++ b/openlibrary/templates/account/create.html
@@ -29,7 +29,7 @@ <h1 class="ol-signup-hero__title">$_("Sign Up")</h1>
         $# :param openlibrary.utils.form.Input input:
         $# :param str suffix: HTML to put at bottom of input
 
-        <div class="formElement ol-signup-form__input">
+        <div class="formElement ol-signup-form__input ol-signup-form__input--$(input.id)">
             <div class="label">
                 <label for="$input.id">$input.description</label>
                 $if input.help:
@@ -39,9 +39,14 @@ <h1 class="ol-signup-hero__title">$_("Sign Up")</h1>
             <div class="input">
                 $:input.render()
                 $if input.name == 'password':
-                    <a href="javascript:;" class="password-visibility-toggle">
+                    <a href="javascript:;" class="password-visibility-toggle ol-signup-form__icon-wrap">
                         <img src="/static/images/icons/icon_eye-closed.svg" title="$_('Toggle Password Visibility')" alt="$_('Toggle Password Visibility')"/>
                     </a>
+                $else:
+                    <div class="ol-signup-form__icon-wrap">
+                        <img src="/static/images/bubble-loader.svg" class="ol-signup-form__icon ol-signup-form__icon--loading" title="$_('Loading...')" alt="$_('Loading...')" style="display:none"/>
+                        <img src="/static/images/icons/icon_check-circle.svg" class="ol-signup-form__icon ol-signup-form__icon--success" title="$_('Success!')" alt="$_('Success!')" style="display:none" />
+                    </div>
             </div>
             <div class="ol-signup-form__suffix">$:suffix</div>
         </div>
diff --git a/static/css/page-signup.less b/static/css/page-signup.less
index 873f6dfb326..c76be8f2eb9 100644
--- a/static/css/page-signup.less
+++ b/static/css/page-signup.less
@@ -167,13 +167,13 @@
     position: relative;
   }
 
-  .password-visibility-toggle {
+  .ol-signup-form__icon-wrap {
     position: absolute;
     right: 5px;
     top: 5px;
   }
 
-  .password-visibility-toggle > img {
+  .ol-signup-form__icon-wrap > img {
     width: 22px;
     height: 22px;
   }
diff --git a/static/images/bubble-loader.svg b/static/images/bubble-loader.svg
new file mode 100644
index 00000000000..3dd35191723
--- /dev/null
+++ b/static/images/bubble-loader.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><circle cx="12" cy="3.5" r="1.5" fill="currentColor" opacity="0"><animateTransform attributeName="transform" calcMode="discrete" dur="1.2s" repeatCount="indefinite" type="rotate" values="0 12 12;90 12 12;180 12 12;270 12 12"/><animate attributeName="opacity" dur="0.3s" keyTimes="0;0.5;1" repeatCount="indefinite" values="1;1;0"/></circle><circle cx="12" cy="3.5" r="1.5" fill="currentColor" opacity="0"><animateTransform attributeName="transform" begin="0.1s" calcMode="discrete" dur="1.2s" repeatCount="indefinite" type="rotate" values="30 12 12;120 12 12;210 12 12;300 12 12"/><animate attributeName="opacity" begin="0.1s" dur="0.3s" keyTimes="0;0.5;1" repeatCount="indefinite" values="1;1;0"/></circle><circle cx="12" cy="3.5" r="1.5" fill="currentColor" opacity="0"><animateTransform attributeName="transform" begin="0.2s" calcMode="discrete" dur="1.2s" repeatCount="indefinite" type="rotate" values="60 12 12;150 12 12;240 12 12;330 12 12"/><animate attributeName="opacity" begin="0.2s" dur="0.3s" keyTimes="0;0.5;1" repeatCount="indefinite" values="1;1;0"/></circle></svg>
\ No newline at end of file
diff --git a/static/images/icons/icon_check-circle.svg b/static/images/icons/icon_check-circle.svg
new file mode 100644
index 00000000000..3c1c2b8ca81
--- /dev/null
+++ b/static/images/icons/icon_check-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22px" height="22px" viewBox="0 0 256 256"><g fill="hsl(130, 61%, 33%)"><path d="M224 128a96 96 0 1 1-96-96a96 96 0 0 1 96 96" opacity="0.2"/><path d="M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0M232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88"/></g></svg>
\ No newline at end of file