diff --git a/frontend/src/Editor/ManageAppUsers.jsx b/frontend/src/Editor/ManageAppUsers.jsx
index ed1dc38524..bb9d810748 100644
--- a/frontend/src/Editor/ManageAppUsers.jsx
+++ b/frontend/src/Editor/ManageAppUsers.jsx
@@ -138,6 +138,7 @@ class ManageAppUsers extends React.Component {
       const appId = app.id;
       const appLink = `${window.location.origin}/applications/`;
       const shareableLink = appLink + (this.props.slug || appId);
+      const slugButtonClass = isSlugVerificationInProgress? '' : slugError !== null ? 'is-invalid' : 'is-valid';
 
       return (
       <div>
@@ -183,13 +184,13 @@ class ManageAppUsers extends React.Component {
                     <span className="input-group-text">{appLink}</span>
                     <div className="input-with-icon">
                       <input type="text"
-                            className={`form-control form-control-sm ${ slugError !== null && !isSlugVerificationInProgress ? 'is-invalid' : 'is-valid'}`}
+                            className={`form-control form-control-sm ${slugButtonClass}`}
                             placeholder={appId}
                             onChange={(e) => { e.persist(); this.delayedSlugChange(e); }}
                             defaultValue={this.props.slug} />
                       { isSlugVerificationInProgress && (
                         <div className="icon-container">
-                          <i className="custom-spinner"></i>
+                          <div class="spinner-border text-azure spinner-border-sm" role="status"></div>
                         </div>
                       )}                            
                     </div>
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 0f0ad11d0c..94fcd6ca62 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -1634,42 +1634,3 @@ input:focus-visible {
     z-index: 3;
   }
 }
-
-.custom-spinner {
-  position: relative;
-  height: 20px;
-  width: 20px;
-  display: inline-block;
-  animation: around 5.4s infinite;
-}
-
-@keyframes around {
-  0% {
-    transform: rotate(0deg)
-  }
-  100% {
-    transform: rotate(360deg)
-  }
-}
-
-.custom-spinner::after, .custom-spinner::before {
-  content: "";
-  background: white;
-  position: absolute;
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-  border-width: 2px;
-  border-color: #4299e1 #4299e1 transparent transparent;
-  border-style: solid;
-  border-radius: 20px;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  animation: around 0.7s ease-in-out infinite;
-}
-
-.custom-spinner::after {
-  animation: around 0.7s ease-in-out 0.1s infinite;
-  background: transparent;
-}