diff --git a/app/assets/javascripts/import/bitbucket_server/import_from_bitbucket_server_app.vue b/app/assets/javascripts/import/bitbucket_server/import_from_bitbucket_server_app.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ae37256e619162dfee5b09904cd56497c8264fb4
--- /dev/null
+++ b/app/assets/javascripts/import/bitbucket_server/import_from_bitbucket_server_app.vue
@@ -0,0 +1,147 @@
+<script>
+import { GlButton, GlFormGroup, GlFormInput } from '@gitlab/ui';
+import validation, { initForm } from '~/vue_shared/directives/validation';
+import csrf from '~/lib/utils/csrf';
+import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
+
+export default {
+  components: {
+    GlButton,
+    GlFormGroup,
+    GlFormInput,
+    MultiStepFormTemplate,
+  },
+  directives: {
+    validation: validation(),
+  },
+  props: {
+    backButtonPath: {
+      type: String,
+      required: true,
+    },
+    formPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    const form = initForm({
+      fields: {
+        bitbucket_server_url: { value: null },
+        bitbucket_server_username: { value: null },
+        personal_access_token: { value: null },
+      },
+    });
+    return {
+      form,
+    };
+  },
+  methods: {
+    onSubmit() {
+      if (!this.form.state) {
+        this.form.showValidation = true;
+        return;
+      }
+
+      this.$refs.form.submit();
+    },
+  },
+  csrf,
+  placeholders: {
+    url: 'https://your-bitbucket-server.com',
+    token: '8d3f016698e...',
+    username: 'username',
+  },
+};
+</script>
+
+<template>
+  <form ref="form" method="post" :action="formPath" @submit.prevent="onSubmit">
+    <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
+    <multi-step-form-template
+      :title="s__('ProjectsNew|Import repositories from Bitbucket Server')"
+      :current-step="3"
+      :steps-total="4"
+    >
+      <template #form>
+        <gl-form-group
+          :label="s__('ProjectsNew|Bitbucket Server URL')"
+          label-for="bitbucket_server_url"
+          :invalid-feedback="form.fields.bitbucket_server_url.feedback"
+          data-testid="url-group"
+        >
+          <gl-form-input
+            id="bitbucket_server_url"
+            v-model="form.fields.bitbucket_server_url.value"
+            v-validation:[form.showValidation]
+            :validation-message="s__('ProjectsNew|Please enter a valid Bitbucket Server URL.')"
+            :state="form.fields.bitbucket_server_url.state"
+            name="bitbucket_server_url"
+            type="url"
+            required
+            :placeholder="$options.placeholders.url"
+            data-testid="url-input"
+          />
+        </gl-form-group>
+        <gl-form-group
+          :label="__('Username')"
+          label-for="bitbucket_server_username"
+          :invalid-feedback="form.fields.bitbucket_server_username.feedback"
+          data-testid="username-group"
+        >
+          <gl-form-input
+            id="bitbucket_server_username"
+            v-model="form.fields.bitbucket_server_username.value"
+            v-validation:[form.showValidation]
+            :validation-message="s__('ProjectsNew|Please enter a valid username.')"
+            :state="form.fields.bitbucket_server_username.state"
+            name="bitbucket_server_username"
+            required
+            :placeholder="$options.placeholders.username"
+            data-testid="username-input"
+          />
+        </gl-form-group>
+        <gl-form-group
+          :label="s__('ProjectsNew|Password/Personal access token')"
+          label-for="personal_access_token"
+          :invalid-feedback="form.fields.personal_access_token.feedback"
+          data-testid="token-group"
+        >
+          <gl-form-input
+            id="personal_access_token"
+            v-model="form.fields.personal_access_token.value"
+            v-validation:[form.showValidation]
+            :validation-message="s__('ProjectsNew|Please enter a valid token.')"
+            :state="form.fields.personal_access_token.state"
+            name="personal_access_token"
+            required
+            type="password"
+            :placeholder="$options.placeholders.token"
+            data-testid="token-input"
+          />
+        </gl-form-group>
+      </template>
+      <template #back>
+        <gl-button
+          category="primary"
+          variant="default"
+          :href="backButtonPath"
+          data-testid="back-button"
+        >
+          {{ __('Go back') }}
+        </gl-button>
+      </template>
+      <template #next>
+        <gl-button
+          type="submit"
+          category="primary"
+          variant="confirm"
+          data-testid="next-button"
+          @click.prevent="onSubmit"
+        >
+          {{ __('Next step') }}
+        </gl-button>
+      </template>
+    </multi-step-form-template>
+  </form>
+</template>
diff --git a/app/assets/javascripts/import/bitbucket_server/index.js b/app/assets/javascripts/import/bitbucket_server/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e13a2dfa4201c1ffbf5ecac480f7bb1236246b76
--- /dev/null
+++ b/app/assets/javascripts/import/bitbucket_server/index.js
@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import importFromBitbucketServerApp from './import_from_bitbucket_server_app.vue';
+
+export function initBitbucketServerImportProjectForm() {
+  const el = document.getElementById('js-vue-import-bitbucket-server-project-root');
+
+  if (!el) {
+    return null;
+  }
+
+  const { backButtonPath, formPath } = el.dataset;
+
+  const props = { backButtonPath, formPath };
+
+  return new Vue({
+    el,
+    name: 'ImportFromBitbucketServerRoot',
+    render(h) {
+      return h(importFromBitbucketServerApp, { props });
+    },
+  });
+}
diff --git a/app/assets/javascripts/import/gitlab_project/import_from_gitlab_export_app.vue b/app/assets/javascripts/import/gitlab_project/import_from_gitlab_export_app.vue
index 4c261a59377a5a8a68b22dd933e1ae6c273f84e9..4eddd30880bc6f962322a9c667ca9159270f096f 100644
--- a/app/assets/javascripts/import/gitlab_project/import_from_gitlab_export_app.vue
+++ b/app/assets/javascripts/import/gitlab_project/import_from_gitlab_export_app.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlButton, GlFormGroup, GlFormInput, GlAnimatedUploadIcon } from '@gitlab/ui';
 import { kebabCase } from 'lodash';
+import { s__ } from '~/locale';
 import validation from '~/vue_shared/directives/validation';
 import csrf from '~/lib/utils/csrf';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
@@ -12,6 +13,7 @@ import NewProjectDestinationSelect from '~/projects/new_v2/components/project_de
 const feedbackMap = {
   valueMissing: {
     isInvalid: (el) => el.validity?.valueMissing,
+    message: s__('ProjectsNew|Please enter a valid project name.'),
   },
   nameStartPattern: {
     isInvalid: (el) => el.validity?.patternMismatch && !START_RULE.reg.test(el.value),
@@ -167,7 +169,6 @@ export default {
             id="name"
             v-model="form.fields.name.value"
             v-validation:[form.showValidation]
-            :validation-message="s__('ProjectsNew|Please enter a valid project name.')"
             :state="form.fields.name.state"
             :pattern="$options.projectNamePattern"
             name="name"
diff --git a/app/assets/javascripts/pages/import/bitbucket_server/new/index.js b/app/assets/javascripts/pages/import/bitbucket_server/new/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..d9e73477919bb96c3e83d1b409170143f817b492
--- /dev/null
+++ b/app/assets/javascripts/pages/import/bitbucket_server/new/index.js
@@ -0,0 +1,3 @@
+import { initBitbucketServerImportProjectForm } from '~/import/bitbucket_server';
+
+initBitbucketServerImportProjectForm();
diff --git a/app/assets/javascripts/vue_shared/directives/validation.js b/app/assets/javascripts/vue_shared/directives/validation.js
index 2aeaacc2ab14422dff3b55e199484a528d0f68fe..075cda3e19cad2a3ce6a932d3083f575ba749262 100644
--- a/app/assets/javascripts/vue_shared/directives/validation.js
+++ b/app/assets/javascripts/vue_shared/directives/validation.js
@@ -28,7 +28,7 @@ const getFeedbackForElement = (feedbackMap, el) => {
     elMessage = el.getAttribute('validation-message');
   }
 
-  return field?.message || elMessage || el.validationMessage;
+  return elMessage || field?.message || el.validationMessage;
 };
 
 const focusFirstInvalidInput = (e) => {
diff --git a/app/views/import/bitbucket_server/new.html.haml b/app/views/import/bitbucket_server/new.html.haml
index c981c859602e257e46fe528bb6005fbf7d0ccaf7..19205733fa8ec4b6ab58685b70b8fcbf568309c3 100644
--- a/app/views/import/bitbucket_server/new.html.haml
+++ b/app/views/import/bitbucket_server/new.html.haml
@@ -2,27 +2,33 @@
 - header_title _("New project"), new_project_path
 - add_to_breadcrumbs s_('ProjectsNew|Import project'), new_project_path(anchor: 'import_project')
 
-= render ::Layouts::PageHeadingComponent.new('') do |c|
-  - c.with_heading do
-    %span.gl-inline-flex.gl-items-center.gl-gap-3
-      = sprite_icon('bitbucket', size: 32)
-      = _('Import repositories from Bitbucket Server')
-  - c.with_description do
-    = _('Enter in your Bitbucket Server URL and personal access token below')
+- if Feature.enabled?(:new_project_creation_form, @user)
+  #js-vue-import-bitbucket-server-project-root{ data: {
+    back_button_path: new_project_path(anchor: 'import_project'),
+    form_path: configure_import_bitbucket_server_path(namespace_id: params[:namespace_id])
+  } }
+- else
+  = render ::Layouts::PageHeadingComponent.new('') do |c|
+    - c.with_heading do
+      %span.gl-inline-flex.gl-items-center.gl-gap-3
+        = sprite_icon('bitbucket', size: 32)
+        = _('Import repositories from Bitbucket Server')
+    - c.with_description do
+      = _('Enter in your Bitbucket Server URL and personal access token below')
 
-= form_tag configure_import_bitbucket_server_path(namespace_id: params[:namespace_id]), method: :post do
-  .form-group.row
-    = label_tag :bitbucket_server_url, 'Bitbucket Server URL', class: 'col-form-label col-md-2'
-    .col-md-4
-      = text_field_tag :bitbucket_server_url, '', class: 'form-control gl-form-input gl-mr-3', placeholder: _('https://your-bitbucket-server'), size: 40
-  .form-group.row
-    = label_tag :bitbucket_server_url, 'Username', class: 'col-form-label col-md-2'
-    .col-md-4
-      = text_field_tag :bitbucket_server_username, '', class: 'form-control gl-form-input gl-mr-3', placeholder: _('username'), size: 40
-  .form-group.row
-    = label_tag :personal_access_token, 'Password/Personal access token', class: 'col-form-label col-md-2'
-    .col-md-4
-      = password_field_tag :personal_access_token, '', class: 'form-control gl-form-input gl-mr-3', placeholder: _('Personal access token'), size: 40
-  .col-sm-12.gl-mt-5
-    = render Pajamas::ButtonComponent.new(type: 'submit', variant: :confirm) do
-      = _('List your Bitbucket Server repositories')
+  = form_tag configure_import_bitbucket_server_path(namespace_id: params[:namespace_id]), method: :post do
+    .form-group.row
+      = label_tag :bitbucket_server_url, 'Bitbucket Server URL', class: 'col-form-label col-md-2'
+      .col-md-4
+        = text_field_tag :bitbucket_server_url, '', class: 'form-control gl-form-input gl-mr-3', placeholder: _('https://your-bitbucket-server'), size: 40
+    .form-group.row
+      = label_tag :bitbucket_server_url, 'Username', class: 'col-form-label col-md-2'
+      .col-md-4
+        = text_field_tag :bitbucket_server_username, '', class: 'form-control gl-form-input gl-mr-3', placeholder: _('username'), size: 40
+    .form-group.row
+      = label_tag :personal_access_token, 'Password/Personal access token', class: 'col-form-label col-md-2'
+      .col-md-4
+        = password_field_tag :personal_access_token, '', class: 'form-control gl-form-input gl-mr-3', placeholder: _('Personal access token'), size: 40
+    .col-sm-12.gl-mt-5
+      = render Pajamas::ButtonComponent.new(type: 'submit', variant: :confirm) do
+        = _('List your Bitbucket Server repositories')
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 7cde08c11df18530aee4736c97fd4dd37c50bf98..472fe406737f7a4b491f5df8e23b550186120516 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -46021,6 +46021,9 @@ msgstr ""
 msgid "ProjectsNew|Available only for projects within groups"
 msgstr ""
 
+msgid "ProjectsNew|Bitbucket Server URL"
+msgstr ""
+
 msgid "ProjectsNew|Choose a group"
 msgstr ""
 
@@ -46090,6 +46093,9 @@ msgstr ""
 msgid "ProjectsNew|Import projects from Gitea"
 msgstr ""
 
+msgid "ProjectsNew|Import repositories from Bitbucket Server"
+msgstr ""
+
 msgid "ProjectsNew|Include a Getting Started README"
 msgstr ""
 
@@ -46120,12 +46126,18 @@ msgstr ""
 msgid "ProjectsNew|No import options available"
 msgstr ""
 
+msgid "ProjectsNew|Password/Personal access token"
+msgstr ""
+
 msgid "ProjectsNew|Pick a group or namespace"
 msgstr ""
 
 msgid "ProjectsNew|Pick a group or namespace where you want to create this project."
 msgstr ""
 
+msgid "ProjectsNew|Please enter a valid Bitbucket Server URL."
+msgstr ""
+
 msgid "ProjectsNew|Please enter a valid Gitea host URL."
 msgstr ""
 
@@ -46138,6 +46150,12 @@ msgstr ""
 msgid "ProjectsNew|Please enter a valid project slug."
 msgstr ""
 
+msgid "ProjectsNew|Please enter a valid token."
+msgstr ""
+
+msgid "ProjectsNew|Please enter a valid username."
+msgstr ""
+
 msgid "ProjectsNew|Please upload a valid GitLab project export file."
 msgstr ""
 
diff --git a/spec/controllers/import/bitbucket_server_controller_spec.rb b/spec/controllers/import/bitbucket_server_controller_spec.rb
index 777c1ccdbf57ce845cf40400d82ba01f91e3feda..010fcd770d5b9778fb714e8d568b116450099bf3 100644
--- a/spec/controllers/import/bitbucket_server_controller_spec.rb
+++ b/spec/controllers/import/bitbucket_server_controller_spec.rb
@@ -17,6 +17,7 @@ def assign_session_tokens
   end
 
   before do
+    stub_feature_flags(new_project_creation_form: false)
     sign_in(user)
     stub_application_setting(import_sources: ['bitbucket_server'])
   end
diff --git a/spec/frontend/import/bitbucket_server/import_from_bitbucket_server_app_spec.js b/spec/frontend/import/bitbucket_server/import_from_bitbucket_server_app_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..105ff19a9edfac46da60ca4e929382d9e8bcf737
--- /dev/null
+++ b/spec/frontend/import/bitbucket_server/import_from_bitbucket_server_app_spec.js
@@ -0,0 +1,117 @@
+import { nextTick } from 'vue';
+import { GlFormInput } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import importFromBitbucketServerApp from '~/import/bitbucket_server/import_from_bitbucket_server_app.vue';
+import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
+
+jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
+
+describe('Import from Bitbucket Server app', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(importFromBitbucketServerApp, {
+      propsData: {
+        backButtonPath: '/projects/new#import_project',
+        formPath: '/import/bitbucket_server/configure',
+      },
+      stubs: {
+        GlFormInput,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  const findMultiStepForm = () => wrapper.findComponent(MultiStepFormTemplate);
+  const findForm = () => wrapper.find('form');
+  const findUrlInput = () => wrapper.findByTestId('url-input');
+  const findUsernameInput = () => wrapper.findByTestId('username-input');
+  const findTokenInput = () => wrapper.findByTestId('token-input');
+  const findBackButton = () => wrapper.findByTestId('back-button');
+  const findNextButton = () => wrapper.findByTestId('next-button');
+
+  describe('form', () => {
+    it('renders the multi step form correctly', () => {
+      expect(findMultiStepForm().props()).toMatchObject({
+        currentStep: 3,
+        stepsTotal: 4,
+      });
+    });
+
+    it('renders the form element correctly', () => {
+      const form = findForm();
+
+      expect(form.attributes('action')).toBe('/import/bitbucket_server/configure');
+      expect(form.find('input[type=hidden][name=authenticity_token]').attributes('value')).toBe(
+        'mock-csrf-token',
+      );
+    });
+
+    it('does not submit the form without required fields', () => {
+      const submitSpy = jest.spyOn(findForm().element, 'submit');
+
+      findForm().trigger('submit');
+      expect(submitSpy).not.toHaveBeenCalled();
+    });
+
+    it('submits the form with valid form data', async () => {
+      const submitSpy = jest.spyOn(findForm().element, 'submit');
+
+      await findUrlInput().setValue('https://your-bitbucket-server');
+      await findUsernameInput().setValue('username');
+      await findTokenInput().setValue('863638293ddkdl29');
+      await nextTick();
+
+      findForm().trigger('submit');
+      expect(submitSpy).toHaveBeenCalledWith();
+    });
+  });
+
+  describe('validation', () => {
+    it('shows an error message when url is cleared', async () => {
+      findUrlInput().setValue('');
+      findUrlInput().trigger('blur');
+      await nextTick();
+
+      const formGroup = wrapper.findByTestId('url-group');
+      expect(formGroup.attributes('invalid-feedback')).toBe(
+        'Please enter a valid Bitbucket Server URL.',
+      );
+    });
+
+    it('shows an error message when username is cleared', async () => {
+      findUsernameInput().setValue('');
+      findUsernameInput().trigger('blur');
+      await nextTick();
+
+      const formGroup = wrapper.findByTestId('username-group');
+      expect(formGroup.attributes('invalid-feedback')).toBe('Please enter a valid username.');
+    });
+
+    it('shows an error message when token is cleared', async () => {
+      findTokenInput().setValue('');
+      findTokenInput().trigger('blur');
+      await nextTick();
+
+      const formGroup = wrapper.findByTestId('token-group');
+      expect(formGroup.attributes('invalid-feedback')).toBe('Please enter a valid token.');
+    });
+  });
+
+  describe('back button', () => {
+    it('renders a back button', () => {
+      expect(findBackButton().exists()).toBe(true);
+      expect(findBackButton().attributes('href')).toBe('/projects/new#import_project');
+    });
+  });
+
+  describe('next button', () => {
+    it('renders a button', () => {
+      expect(findNextButton().exists()).toBe(true);
+      expect(findNextButton().attributes('type')).toBe('submit');
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/directives/validation_spec.js b/spec/frontend/vue_shared/directives/validation_spec.js
index 72a348c1a798498cf5ac053227c95259b22e9678..80fb673d11dd4a40ddddb59398953c4c4cd0a625 100644
--- a/spec/frontend/vue_shared/directives/validation_spec.js
+++ b/spec/frontend/vue_shared/directives/validation_spec.js
@@ -280,6 +280,7 @@ describe('validation directive', () => {
       const feedbackMap = {
         valueMissing: {
           isInvalid: (el) => el.validity?.valueMissing,
+          feedback: 'Please fill out the name field.',
         },
       };