diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
index 4c6d01496..037ced3b2 100644
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/app/javascript/styles/mastodon/basics.scss
@@ -145,6 +145,10 @@ body {
   }
 }
 
+b, strong {
+  font-weight: bold;
+}
+
 button {
   font-family: inherit;
   cursor: pointer;
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index 9b098f943..7459e2f17 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -383,7 +383,6 @@ code {
     font-family: inherit;
     resize: vertical;
     background: darken($ui-base-color, 10%);
-    text-align: center;
     border: 2px solid #d5d5d5;
     border-radius: 4px;
     padding: 10px;
diff --git a/app/views/auth/registrations/new.html.haml b/app/views/auth/registrations/new.html.haml
index 6981195ed..f1a71745a 100644
--- a/app/views/auth/registrations/new.html.haml
+++ b/app/views/auth/registrations/new.html.haml
@@ -14,10 +14,10 @@
 
   = f.simple_fields_for :account do |ff|
     .fields-group
-      = ff.input :username, wrapper: :with_label, autofocus: true, label: t('simple_form.labels.defaults.username'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username'), :autocomplete => 'off', pattern: '[a-zA-Z0-9_]+', maxlength: 30 }, append: "@#{site_hostname}", hint: t('simple_form.hints.defaults.username', domain: site_hostname)
+      = ff.input :username, wrapper: :with_label, autofocus: true, label: t('simple_form.labels.defaults.username'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username'), :autocomplete => 'off', pattern: '[a-zA-Z0-9_]+', maxlength: 30, onkeyup: "return window.playWithHandle(this)"}, append: "<b>pablo</b>@#{site_hostname}", hint: false
 
   .fields-group
-    = f.input :email, wrapper: :with_label, label: t('simple_form.labels.defaults.email'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.email'), :autocomplete => 'off' }
+    = f.input :email, wrapper: :with_label, label: t('simple_form.labels.defaults.email'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.email'), :autocomplete => 'off' }, hint: false
 
   .fields-group
     = f.input :password, wrapper: :with_label, label: t('simple_form.labels.defaults.password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.password'), :autocomplete => 'off', :minlength => User.password_length.first, :maxlength => User.password_length.last }
@@ -41,4 +41,23 @@
   .actions
     = f.button :button, @invite.present? ? t('auth.register') : sign_up_message, type: :submit
 
+:javascript
+  var originalHandle = null;
+  function playWithHandle(e) {
+    const inputValue   = e.value.trim();
+    const placeHolder  = e.parentElement.querySelector('.label_input__append');
+    var placeHolderStr = placeHolder.innerHTML.trim();
+    if (originalHandle === null)
+      originalHandle = placeHolderStr;
+    if (inputValue === '') {
+      if (originalHandle === null)
+        return;
+      placeHolder.innerHTML = originalHandle;
+      console.log('empty');
+    } else if (placeHolderStr.substr(0,1) !== '@') {
+      placeHolderStr = placeHolderStr.substr(placeHolderStr.indexOf('@'));
+      placeHolder.innerHTML = placeHolderStr;
+    }
+  }
+
 .form-footer= render 'auth/shared/links'