diff --git a/app/assets/javascripts/new_branch_form.js b/app/assets/javascripts/new_branch_form.js
index 9d07f4356208bbfc032d34a5462861966a420c9e..34383cb8ada706ddaa3dcb1e066ab245b3ebb79e 100644
--- a/app/assets/javascripts/new_branch_form.js
+++ b/app/assets/javascripts/new_branch_form.js
@@ -1,4 +1,7 @@
 /* eslint-disable func-names, no-return-assign, @gitlab/require-i18n-strings */
+
+const NAME_ERROR_CLASS = 'gl-border-red-500';
+
 export default class NewBranchForm {
   constructor(form) {
     this.validate = this.validate.bind(this);
@@ -77,7 +80,10 @@ export default class NewBranchForm {
     const errors = this.restrictions.reduce(validator, []);
     if (errors.length > 0) {
       this.branchNameError.textContent = errors.join(', ');
+      this.name.classList.add(NAME_ERROR_CLASS);
       this.name.focus();
+    } else {
+      this.name.classList.remove(NAME_ERROR_CLASS);
     }
   }
 }
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index 7f6a37fc2108b917bf74d2a2804a2cdb397d251d..5c35864cf0f28436e56586415c5811d6c570d4d8 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -12,7 +12,7 @@
   .form-group.gl-max-w-80
     = label_tag :branch_name, _('Branch name')
     = text_field_tag :branch_name, params[:branch_name], required: true, autofocus: true, class: 'form-control js-branch-name monospace'
-    .form-text.text-muted.text-danger.js-branch-name-error{ 'aria-live': 'assertive' }
+    .form-text.text-danger.js-branch-name-error{ 'aria-live': 'assertive' }
   .form-group.gl-max-w-80
     = label_tag :ref, _('Create from')
     .js-new-branch-ref-selector{ data: { project_id: @project.id, default_branch_name: default_ref, hidden_input_name: 'ref' } }
diff --git a/spec/features/projects/branches/user_creates_branch_spec.rb b/spec/features/projects/branches/user_creates_branch_spec.rb
index 70a387e3ceb94b542dc5f651fa2d939dc3abe122..85fedffd879af23f4424f2d579f75d463e08f3ff 100644
--- a/spec/features/projects/branches/user_creates_branch_spec.rb
+++ b/spec/features/projects/branches/user_creates_branch_spec.rb
@@ -87,6 +87,7 @@
 
             expect(page).to have_content('Branch name is invalid')
             expect(page).to have_content("can't contain spaces")
+            expect(page).to have_selector('.js-branch-name.gl-border-red-500')
           end
         end