diff --git a/app/views/groups/milestones/_form.html.haml b/app/views/groups/milestones/_form.html.haml
deleted file mode 100644
index ea36aae1c2fa902f82d0057d568c5ed8eb9d5bd0..0000000000000000000000000000000000000000
--- a/app/views/groups/milestones/_form.html.haml
+++ /dev/null
@@ -1,35 +0,0 @@
-= gitlab_ui_form_for [@group, @milestone], html: { class: 'milestone-form common-note-form js-quick-submit js-requires-input' } do |f|
-  = form_errors(@milestone)
-
-  - if @conflict
-    = render 'shared/model_version_conflict', model_name: _('milestone'), link_path: group_milestone_path(@group, @milestone)
-
-  .form-group
-    = f.label :title, _("Title")
-    = f.text_field :title, maxlength: 255, class: "form-control", data: { testid: "milestone-title-field" }, required: true, autofocus: true
-  = render "shared/milestones/form_dates", f: f
-  .form-group
-    = f.label :description, _("Description")
-    - @gfm_form = true
-    .js-markdown-editor{ data: { render_markdown_path: group_preview_markdown_path,
-                               markdown_docs_path: help_page_path('user/markdown'),
-                               testid: 'milestone-description-field',
-                               form_field_placeholder: _('Write milestone description...'),
-                               supports_quick_actions: 'false',
-                               enable_autocomplete: 'true',
-                               autofocus: 'false',
-                               form_field_classes: 'note-textarea js-gfm-input markdown-area' } }
-      = f.hidden_field :description
-      .clearfix
-      .error-alert
-
-  = f.hidden_field :lock_version
-
-  - if @milestone.new_record?
-    = f.submit _('Create milestone'), data: { testid: "create-milestone-button" }, class: 'gl-mr-2', pajamas_button: true
-    = render Pajamas::ButtonComponent.new(href: group_milestones_path(@group)) do
-      = _("Cancel")
-  - else
-    = f.submit _('Save changes'), class: 'gl-mr-2', pajamas_button: true
-    = render Pajamas::ButtonComponent.new(href: group_milestone_path(@group, @milestone)) do
-      = _("Cancel")
diff --git a/app/views/groups/milestones/edit.html.haml b/app/views/groups/milestones/edit.html.haml
index bde7ec15994c5bcafb5019dc8bfcc1bd69a6ed63..666df8b4491f3070c0ef0786bb20b3bae88f3b34 100644
--- a/app/views/groups/milestones/edit.html.haml
+++ b/app/views/groups/milestones/edit.html.haml
@@ -1,9 +1,9 @@
 - breadcrumb_title _("Edit")
-- page_title _("Milestones")
-
-- render "header_title"
+- add_to_breadcrumbs _('Milestones'), group_milestones_path(@group)
+- add_to_breadcrumbs @milestone.title, milestone_path(@milestone)
+- page_title _('Edit'), @milestone.title, _('Milestones')
 
 %h1.page-title.gl-font-size-h-display
   = _('Edit milestone')
 
-= render "form"
+= render 'shared/milestones/form', type: :group
diff --git a/app/views/groups/milestones/new.html.haml b/app/views/groups/milestones/new.html.haml
index f817beebe0fc50d36e1a31d066959e4baee10f85..16309bfc95507b25d99101fcc9d0014b6fb77a09 100644
--- a/app/views/groups/milestones/new.html.haml
+++ b/app/views/groups/milestones/new.html.haml
@@ -1,9 +1,20 @@
 - add_to_breadcrumbs _("Milestones"), group_milestones_path(@group)
 - breadcrumb_title _("New milestone")
-- page_title _("Milestones"), @milestone.name, _("Milestones")
+- page_title _("New milestone")
 
 %h1.page-title.gl-font-size-h-display
-  = _("New Milestone")
+  = _("New milestone")
 
-.gl-mt-3
-  = render "form"
+.gl-mb-4
+  .gl-font-bold
+    = _("Group")
+  %div
+    = @group.name
+    %span.sr-only
+      = _("This milestone will be created in the %{group} group.") % { group: @group.name }
+  .gl-text-subtle
+    = _("This milestone will be available for all subgroups and projects within %{group}.") % { group: @group.name }
+
+
+
+= render 'shared/milestones/form', type: :group
diff --git a/app/views/projects/milestones/edit.html.haml b/app/views/projects/milestones/edit.html.haml
index 013afd4cc23ce53272bdbcca67f1ccd642a9067d..ad9dde61e261595e33fcca566a4f52132889a231 100644
--- a/app/views/projects/milestones/edit.html.haml
+++ b/app/views/projects/milestones/edit.html.haml
@@ -1,8 +1,9 @@
 - breadcrumb_title _('Edit')
 - add_to_breadcrumbs _('Milestones'), project_milestones_path(@project)
+- add_to_breadcrumbs @milestone.title, milestone_path(@milestone)
 - page_title _('Edit'), @milestone.title, _('Milestones')
 
 %h1.page-title.gl-font-size-h-display
   = _('Edit milestone')
 
-= render 'form'
+= render 'shared/milestones/form', type: :project
diff --git a/app/views/projects/milestones/new.html.haml b/app/views/projects/milestones/new.html.haml
index 70ec1b0008ab98567043eed0c330fd9e60bf88dc..b2ab26e43a0f2dc5418356aa49631f7b5a5c45e4 100644
--- a/app/views/projects/milestones/new.html.haml
+++ b/app/views/projects/milestones/new.html.haml
@@ -1,10 +1,17 @@
 - add_to_breadcrumbs _('Milestones'), project_milestones_path(@project)
-- breadcrumb_title _('New')
-- page_title _('New Milestone')
+- breadcrumb_title _('New milestone')
+- page_title _('New milestone')
 
 %h1.page-title.gl-font-size-h-display
-  = _('New Milestone')
+  = _('New milestone')
 
-%hr
+.gl-mb-4
+  .gl-font-bold
+    = _("Project")
+  %div
+    = @project.name
+    %span.sr-only
+      = _("This milestone will be created in the %{project} project.") % { project: @project.name }
 
-= render 'form'
+
+= render 'shared/milestones/form', type: :project
diff --git a/app/views/projects/milestones/_form.html.haml b/app/views/shared/milestones/_form.html.haml
similarity index 51%
rename from app/views/projects/milestones/_form.html.haml
rename to app/views/shared/milestones/_form.html.haml
index 954bd48fb4103a2432d4f3ce92254d44d016019e..19fad3e6a2e363f5cc4447898193f6c84a91a0f0 100644
--- a/app/views/projects/milestones/_form.html.haml
+++ b/app/views/shared/milestones/_form.html.haml
@@ -1,19 +1,33 @@
-= gitlab_ui_form_for [@project, @milestone], html: { class: 'milestone-form common-note-form js-quick-submit js-requires-input' } do |f|
-  = form_errors(@milestone)
+- title_error = @milestone.errors.full_messages_for(:title)
+- has_title_error = title_error.present?
+- if type == :project
+  - entity = @project
+  - if @milestone.id
+    - entity_milestone_path = project_milestone_path(@project, @milestone)
+  - entity_milestones_path = project_milestones_path(@project)
+- if type == :group
+  - entity = @group
+  - if @milestone.id
+    - entity_milestone_path = group_milestone_path(@group, @milestone)
+  - entity_milestones_path = group_milestones_path(@group)
 
+= gitlab_ui_form_for [entity, @milestone], html: { class: 'milestone-form common-note-form js-quick-submit js-requires-input' } do |f|
   - if @conflict
-    = render 'shared/model_version_conflict', model_name: _('milestone'), link_path: project_milestone_path(@project, @milestone)
+    = render 'shared/model_version_conflict', model_name: _('milestone'), link_path: entity_milestone_path
 
   - if @redirect_path.present?
     = f.hidden_field(:redirect_path, name: :redirect_path, id: :redirect_path, value: @redirect_path)
-  .form-group
+  .gl-form-group
     = f.label :title, _('Title')
-    = f.text_field :title, maxlength: 255, class: 'form-control gl-form-input', data: { testid: 'milestone-title-field' }, required: true, autofocus: true
+    = f.text_field :title, maxlength: 255, class: "form-control gl-form-input#{has_title_error ? ' is-invalid' : ''}", data: { testid: 'milestone-title-field'}, required: true, autofocus: true, aria: { invalid: has_title_error, describedby: has_title_error ? 'title-error' : nil }
+    - if has_title_error
+      #title-error.invalid-feedback
+        = title_error.to_sentence
   = render 'shared/milestones/form_dates', f: f
-  .form-group
+  .gl-form-group
     = f.label :description, _('Description')
     - @gfm_form = true
-    .js-markdown-editor{ data: { render_markdown_path: preview_markdown_path(@project),
+    .js-markdown-editor{ data: { render_markdown_path: preview_markdown_path(entity),
                                markdown_docs_path: help_page_path('user/markdown'),
                                testid: 'milestone-description-field',
                                form_field_placeholder: _('Write milestone description...'),
@@ -29,7 +43,7 @@
 
   - if @milestone.new_record?
     = f.submit _('Create milestone'), data: { testid: 'create-milestone-button' }, class: 'gl-mr-2', pajamas_button: true
-    = link_button_to _('Cancel'), project_milestones_path(@project)
+    = link_button_to _('Cancel'), entity_milestones_path
   - else
     = f.submit _('Save changes'), class: 'gl-mr-2', pajamas_button: true
-    = link_button_to _('Cancel'), project_milestone_path(@project, @milestone)
+    = link_button_to _('Cancel'), entity_milestone_path
diff --git a/app/views/shared/milestones/_form_dates.html.haml b/app/views/shared/milestones/_form_dates.html.haml
index 08bc4e2a8c7f236f1be9f7bfd1ed36ecc01ad32f..9203e390234057ff89c5d6eaedd0c82992171381 100644
--- a/app/views/shared/milestones/_form_dates.html.haml
+++ b/app/views/shared/milestones/_form_dates.html.haml
@@ -1,14 +1,25 @@
+- start_date_error = @milestone.errors.full_messages_for(:start_date)
+- has_start_date_error = start_date_error.present?
+- due_date_error = @milestone.errors.full_messages_for(:due_date)
+- has_due_date_error = due_date_error.present?
+
 .gl-form-group
   %div
     = f.label :start_date, _('Start Date')
   %div
-    .issuable-form-select-holder
-      = f.gitlab_ui_datepicker :start_date, data: { testid: "start-date-field" }, placeholder: _('Select start date'), autocomplete: 'off'
-    %a.gl-whitespace-nowrap.gl-pl-4.js-clear-start-date{ href: "#" }= _('Clear start date')
+    .issuable-form-select-holder{ class: has_start_date_error ? 'is-invalid' : nil }
+      = f.gitlab_ui_datepicker :start_date, data: { testid: "start-date-field" }, placeholder: _('Select start date'), autocomplete: 'off', aria: { invalid: has_start_date_error, describedby: has_start_date_error ? 'start-date-error' : nil }, class: has_start_date_error ? 'is-invalid': nil
+    %a.gl-whitespace-nowrap.js-clear-start-date{ href: "#" }= _('Clear start date')
+    - if has_start_date_error
+      #start-date-error.invalid-feedback
+        = start_date_error.to_sentence
 .gl-form-group
   %div
     = f.label :due_date, _('Due Date')
   %div
-    .issuable-form-select-holder
-      = f.gitlab_ui_datepicker :due_date, data: { testid: "due-date-field" }, placeholder: _('Select due date'), autocomplete: 'off'
-    %a.gl-whitespace-nowrap.gl-pl-4.js-clear-due-date{ href: "#" }= _('Clear due date')
+    .issuable-form-select-holder{ class: has_due_date_error ? 'is-invalid' : nil }
+      = f.gitlab_ui_datepicker :due_date, data: { testid: "due-date-field" }, placeholder: _('Select due date'), autocomplete: 'off', aria: { invalid: has_due_date_error, describedby: has_due_date_error ? 'due-date-error' : nil }, class: has_due_date_error ? 'is-invalid': nil
+    %a.gl-whitespace-nowrap.js-clear-due-date{ href: "#" }= _('Clear due date')
+    - if has_due_date_error
+      #due-date-error.invalid-feedback
+        = due_date_error.to_sentence
diff --git a/lib/gitlab/form_builders/gitlab_ui_form_builder.rb b/lib/gitlab/form_builders/gitlab_ui_form_builder.rb
index d89eaebdcb7f05eb568c72f738289371cbd3bd2b..d6efb17dea9faa2ab5ccea1dd8e61b0dfd549a2f 100644
--- a/lib/gitlab/form_builders/gitlab_ui_form_builder.rb
+++ b/lib/gitlab/form_builders/gitlab_ui_form_builder.rb
@@ -62,7 +62,8 @@ def gitlab_ui_radio_component(
       end
 
       def gitlab_ui_datepicker(method, options = {})
-        @template.text_field @object_name, method, options.merge(class: "datepicker form-control gl-form-input")
+        @template.text_field @object_name, method,
+          options.merge(class: "datepicker form-control gl-form-input #{options[:class]}".strip)
       end
 
       private
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 41f71ad88acea70cbd36e52f0599724435c92b9a..c0c750443618dca95505d2d76e24f2b850814a3a 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -34138,9 +34138,6 @@ msgstr ""
 msgid "New Label"
 msgstr ""
 
-msgid "New Milestone"
-msgstr ""
-
 msgid "New Pipeline Schedule"
 msgstr ""
 
@@ -53899,6 +53896,15 @@ msgstr ""
 msgid "This merge request was merged. To apply this suggestion, edit this file directly."
 msgstr ""
 
+msgid "This milestone will be available for all subgroups and projects within %{group}."
+msgstr ""
+
+msgid "This milestone will be created in the %{group} group."
+msgstr ""
+
+msgid "This milestone will be created in the %{project} project."
+msgstr ""
+
 msgid "This only applies to repository indexing operations."
 msgstr ""
 
diff --git a/qa/qa/page/group/milestone/new.rb b/qa/qa/page/group/milestone/new.rb
index 50965769c9e16f6f7aba174678b226cc7a725603..b7525d64faa2c1d7773d1c7a6fd4d519441ba694 100644
--- a/qa/qa/page/group/milestone/new.rb
+++ b/qa/qa/page/group/milestone/new.rb
@@ -5,7 +5,7 @@ module Page
     module Group
       module Milestone
         class New < Page::Milestone::New
-          view 'app/views/groups/milestones/_form.html.haml' do
+          view 'app/views/shared/milestones/_form.html.haml' do
             element 'create-milestone-button'
             element 'milestone-description-field'
             element 'milestone-title-field'
diff --git a/qa/qa/page/project/milestone/new.rb b/qa/qa/page/project/milestone/new.rb
index a14e1e6b071e0f431364716c3106912c5c3e831f..728961a549b9dbf40cea6586e57d7dd2e96e6cb9 100644
--- a/qa/qa/page/project/milestone/new.rb
+++ b/qa/qa/page/project/milestone/new.rb
@@ -5,7 +5,7 @@ module Page
     module Project
       module Milestone
         class New < Page::Milestone::New
-          view 'app/views/projects/milestones/_form.html.haml' do
+          view 'app/views/shared/milestones/_form.html.haml' do
             element 'create-milestone-button'
             element 'milestone-description-field'
             element 'milestone-title-field'
diff --git a/spec/features/milestone_spec.rb b/spec/features/milestone_spec.rb
index 620e966938ed1fd619b9b2af87e85314e64ff65d..74a21827a522f3f43c106c769977f44989d57e71 100644
--- a/spec/features/milestone_spec.rb
+++ b/spec/features/milestone_spec.rb
@@ -56,7 +56,7 @@
       end
       click_button 'Create milestone'
 
-      expect(find('.gl-alert-danger')).to have_content('already being used for another group or project milestone.')
+      expect(find('#title-error')).to have_content('already being used for another group or project milestone.')
     end
 
     it 'displays validation message when there is a group milestone with same title' do
@@ -69,7 +69,7 @@
       end
       click_button 'Create milestone'
 
-      expect(find('.gl-alert-danger')).to have_content('already being used for another group or project milestone.')
+      expect(find('#title-error')).to have_content('already being used for another group or project milestone.')
     end
   end