diff --git a/app/assets/javascripts/projects/new_v2/components/app.vue b/app/assets/javascripts/projects/new_v2/components/app.vue
index 8176c11c4e9b4d425de112260d1e290e78b87155..f851a37f1dcfb709705570fc02fd69899e2f614f 100644
--- a/app/assets/javascripts/projects/new_v2/components/app.vue
+++ b/app/assets/javascripts/projects/new_v2/components/app.vue
@@ -11,6 +11,7 @@ import { OPTIONS } from '../constants';
 import NewProjectDestinationSelect from './project_destination_select.vue';
 import Breadcrumb from './form_breadcrumb.vue';
 import CommandLine from './command_line.vue';
+import ImportByUrlForm from './import_by_url_form.vue';
 
 export default {
   OPTIONS,
@@ -26,79 +27,49 @@ export default {
     NewProjectDestinationSelect,
     Breadcrumb,
     CommandLine,
+    ImportByUrlForm,
   },
   directives: {
     SafeHtml,
   },
-  inject: ['userNamespaceId', 'canCreateProject'],
-  props: {
+  inject: {
     rootPath: {
-      type: String,
-      required: false,
       default: '/',
     },
     projectsUrl: {
-      type: String,
-      required: false,
       default: null,
     },
-    parentGroupUrl: {
-      type: String,
-      required: false,
+    userNamespaceId: {
       default: null,
     },
-    parentGroupName: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    hasErrors: {
-      type: Boolean,
-      required: false,
+    isCiCdAvailable: {
       default: false,
     },
-    isCiCdAvailable: {
-      type: Boolean,
-      required: false,
+    canCreateProject: {
       default: false,
     },
     canImportProjects: {
-      type: Boolean,
-      required: false,
       default: false,
     },
     importSourcesEnabled: {
-      type: Boolean,
-      required: false,
       default: false,
     },
     canSelectNamespace: {
-      type: Boolean,
-      required: false,
       default: false,
     },
     namespaceFullPath: {
-      type: String,
-      required: false,
       default: null,
     },
     namespaceId: {
-      type: String,
-      required: false,
       default: null,
     },
     trackLabel: {
-      type: String,
-      required: false,
       default: null,
     },
     userProjectLimit: {
-      type: Number,
-      required: true,
+      default: 0,
     },
     newProjectGuidelines: {
-      type: String,
-      required: false,
       default: null,
     },
   },
@@ -280,8 +251,12 @@ export default {
       v-if="currentStep === 2"
       :key="selectedProjectOption.key"
       :option="selectedProjectOption"
+      :namespace-id="selectedNamespace"
       data-testid="new-project-step2"
       @back="onBack"
+      @next="onNext"
     />
+
+    <import-by-url-form v-if="currentStep === 3" @back="onBack" />
   </div>
 </template>
diff --git a/app/assets/javascripts/projects/new_v2/components/import_by_url_form.vue b/app/assets/javascripts/projects/new_v2/components/import_by_url_form.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b0cd6b9e9018b7c297439dd92e92cbd0cbcad23d
--- /dev/null
+++ b/app/assets/javascripts/projects/new_v2/components/import_by_url_form.vue
@@ -0,0 +1,39 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
+
+export default {
+  components: {
+    GlButton,
+    MultiStepFormTemplate,
+  },
+};
+</script>
+
+<template>
+  <multi-step-form-template
+    :title="s__('ProjectImport|Import repository by URL')"
+    :current-step="3"
+  >
+    <template #next>
+      <gl-button
+        category="primary"
+        variant="confirm"
+        :disabled="true"
+        data-testid="import-project-by-url-next-button"
+      >
+        {{ __('Next step') }}
+      </gl-button>
+    </template>
+    <template #back>
+      <gl-button
+        category="primary"
+        variant="default"
+        data-testid="import-project-by-url-back-button"
+        @click="$emit('back')"
+      >
+        {{ __('Go back') }}
+      </gl-button>
+    </template>
+  </multi-step-form-template>
+</template>
diff --git a/app/assets/javascripts/projects/new_v2/components/import_project_form.vue b/app/assets/javascripts/projects/new_v2/components/import_project_form.vue
index 340e91a10718b1615bb8c8908b447a8efd1e1b8c..3824ab085f47c80d92d09dc9fcaef0731a9e81c7 100644
--- a/app/assets/javascripts/projects/new_v2/components/import_project_form.vue
+++ b/app/assets/javascripts/projects/new_v2/components/import_project_form.vue
@@ -1,11 +1,71 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlFormGroup, GlIcon } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
+import SingleChoiceSelector from '~/vue_shared/components/single_choice_selector.vue';
+import SingleChoiceSelectorItem from '~/vue_shared/components/single_choice_selector_item.vue';
 
 export default {
   components: {
     GlButton,
+    GlFormGroup,
+    GlIcon,
     MultiStepFormTemplate,
+    SingleChoiceSelector,
+    SingleChoiceSelectorItem,
+  },
+  inject: {
+    importGitlabEnabled: {
+      default: false,
+    },
+    importGitlabImportPath: {
+      default: null,
+    },
+    importGithubEnabled: {
+      default: false,
+    },
+    importGithubImportPath: {
+      default: null,
+    },
+    importBitbucketEnabled: {
+      default: false,
+    },
+    importBitbucketImportPath: {
+      default: null,
+    },
+    importBitbucketImportConfigured: {
+      default: false,
+    },
+    importBitbucketDisabledMessage: {
+      default: null,
+    },
+    importBitbucketServerEnabled: {
+      default: false,
+    },
+    importBitbucketServerImportPath: {
+      default: null,
+    },
+    importFogbugzEnabled: {
+      default: false,
+    },
+    importFogbugzImportPath: {
+      default: null,
+    },
+    importGiteaEnabled: {
+      default: false,
+    },
+    importGiteaImportPath: {
+      default: null,
+    },
+    importGitEnabled: {
+      default: false,
+    },
+    importManifestEnabled: {
+      default: false,
+    },
+    importManifestImportPath: {
+      default: null,
+    },
   },
   props: {
     option: {
@@ -13,18 +73,150 @@ export default {
       required: false,
       default: () => ({}),
     },
+    namespaceId: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      selectedImport: null,
+    };
+  },
+  computed: {
+    importOptions() {
+      return [
+        {
+          isAvailable: this.importGitlabEnabled,
+          path: this.namespaceId
+            ? `${this.importGitlabImportPath}?namespace_id=${this.namespaceId}`
+            : this.importGitlabImportPath,
+          icon: 'tanuki',
+          title: s__('ProjectImport|GitLab'),
+          name: 'gitlab',
+          stepsTotal: 3,
+        },
+        {
+          isAvailable: this.importGithubEnabled,
+          path: this.importGithubImportPath,
+          icon: 'github',
+          title: s__('ProjectImport|GitHub'),
+          name: 'github',
+          stepsTotal: 4,
+        },
+        {
+          isAvailable: this.importBitbucketEnabled,
+          path: this.importBitbucketImportPath,
+          icon: 'bitbucket',
+          title: s__('ProjectImport|Bitbucket Cloud'),
+          name: 'bitbucket-cloud',
+          disabled: !this.importBitbucketImportConfigured,
+          disabledMessage: this.importBitbucketDisabledMessage,
+          stepsTotal: 4,
+        },
+        {
+          isAvailable: this.importBitbucketServerEnabled,
+          path: this.importBitbucketServerImportPath,
+          icon: 'bitbucket',
+          title: s__('ProjectImport|Bitbucket Server'),
+          name: 'bitbucket-server',
+          stepsTotal: 4,
+        },
+        {
+          isAvailable: this.importFogbugzEnabled,
+          path: this.importFogbugzImportPath,
+          icon: 'bug',
+          title: s__('ProjectImport|FogBugz'),
+          name: 'fogbugz',
+          stepsTotal: 4,
+        },
+        {
+          isAvailable: this.importGiteaEnabled,
+          path: this.importGiteaImportPath,
+          icon: 'gitea',
+          title: s__('ProjectImport|Gitea'),
+          name: 'gitea',
+          stepsTotal: 4,
+        },
+        {
+          isAvailable: this.importManifestEnabled,
+          path: this.importManifestImportPath,
+          icon: 'doc-text',
+          title: s__('ProjectImport|Manifest file'),
+          name: 'manifest',
+          stepsTotal: 3,
+        },
+        {
+          isAvailable: this.importGitEnabled,
+          path: null,
+          icon: 'link',
+          title: s__('ProjectImport|Project URL'),
+          name: 'url',
+          stepsTotal: 3,
+        },
+      ];
+    },
+    availableImportOptions() {
+      return this.importOptions.filter((option) => option.isAvailable) || [];
+    },
+    selectedImportPath() {
+      return this.selectedImport?.path;
+    },
+    selectedImportStepsTotal() {
+      return this.selectedImport?.stepsTotal;
+    },
+  },
+  created() {
+    [this.selectedImport] = this.availableImportOptions;
+  },
+  methods: {
+    selectImport(name) {
+      this.selectedImport = this.availableImportOptions.find((option) => option.name === name);
+    },
   },
 };
 </script>
 
 <template>
-  <multi-step-form-template :title="option.title" :current-step="2" :steps-total="2">
+  <multi-step-form-template
+    :title="option.title"
+    :current-step="2"
+    :steps-total="selectedImportStepsTotal"
+  >
+    <template #form>
+      <gl-form-group :label="s__('ProjectsNew|Import project from')">
+        <single-choice-selector :checked="selectedImport.name" @change="selectImport">
+          <template v-for="item in availableImportOptions">
+            <single-choice-selector-item
+              :key="item.name"
+              :value="item.name"
+              :disabled="item.disabled"
+              :disabled-message="item.disabledMessage"
+            >
+              <gl-icon :name="item.icon" />
+              {{ item.title }}
+            </single-choice-selector-item>
+          </template>
+        </single-choice-selector>
+      </gl-form-group>
+    </template>
     <template #next>
       <gl-button
+        v-if="selectedImportPath"
+        category="primary"
+        variant="confirm"
+        data-testid="import-project-next-button"
+        :href="selectedImportPath"
+      >
+        {{ __('Next step') }}
+      </gl-button>
+      <gl-button
+        v-else
         category="primary"
         variant="confirm"
-        :disabled="true"
         data-testid="import-project-next-button"
+        @click="$emit('next')"
       >
         {{ __('Next step') }}
       </gl-button>
diff --git a/app/assets/javascripts/projects/new_v2/index.js b/app/assets/javascripts/projects/new_v2/index.js
index 204451672e9524ac300b053caef0ff7c378063d3..c35ba8d2e3507d51417e3e77d75dc6f3e943d405 100644
--- a/app/assets/javascripts/projects/new_v2/index.js
+++ b/app/assets/javascripts/projects/new_v2/index.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import createDefaultClient from '~/lib/graphql';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import createDefaultClient from '~/lib/graphql';
 import NewProjectFormApp from './components/app.vue';
 
 export function initNewProjectForm() {
@@ -12,63 +12,90 @@ export function initNewProjectForm() {
   }
 
   const {
+    namespaceFullPath,
+    namespaceId,
+    userNamespaceId,
+    newProjectGuidelines,
     pushToCreateProjectCommand,
-    projectHelpPath,
-    hasErrors,
-    isCiCdAvailable,
-    parentGroupUrl,
-    parentGroupName,
     rootPath,
     projectsUrl,
+    parentGroupUrl,
+    parentGroupName,
+    projectHelpPath,
+    isCiCdAvailable,
     canImportProjects,
     importSourcesEnabled,
-    namespaceFullPath,
-    namespaceId,
-    userNamespaceId,
     trackLabel,
     canSelectNamespace,
     canCreateProject,
     userProjectLimit,
-    newProjectGuidelines,
+    importHistoryPath,
+    importGitlabEnabled,
+    importGitlabImportPath,
+    importGithubEnabled,
+    importGithubImportPath,
+    importBitbucketEnabled,
+    importBitbucketImportPath,
+    importBitbucketImportConfigured,
+    importBitbucketDisabledMessage,
+    importBitbucketServerEnabled,
+    importBitbucketServerImportPath,
+    importFogbugzEnabled,
+    importFogbugzImportPath,
+    importGiteaEnabled,
+    importGiteaImportPath,
+    importGitEnabled,
+    importManifestEnabled,
+    importManifestImportPath,
   } = el.dataset;
 
-  const props = {
-    hasErrors: parseBoolean(hasErrors),
-    isCiCdAvailable: parseBoolean(isCiCdAvailable),
-    parentGroupUrl,
-    parentGroupName,
-    rootPath,
-    projectsUrl,
-    canImportProjects: parseBoolean(canImportProjects),
-    importSourcesEnabled: parseBoolean(importSourcesEnabled),
+  const provide = {
     namespaceFullPath,
     namespaceId,
-    trackLabel,
-    canSelectNamespace: parseBoolean(canSelectNamespace),
-    userProjectLimit: parseInt(userProjectLimit, 10),
+    userNamespaceId,
     newProjectGuidelines,
-  };
-
-  const provide = {
-    canCreateProject: parseBoolean(canCreateProject),
-    projectHelpPath,
     pushToCreateProjectCommand,
-    namespaceId,
-    userNamespaceId,
     rootPath,
+    projectsUrl,
     parentGroupUrl,
     parentGroupName,
-    projectsUrl,
+    projectHelpPath,
+    trackLabel,
+    isCiCdAvailable: parseBoolean(isCiCdAvailable),
+    importSourcesEnabled: parseBoolean(importSourcesEnabled),
+    canImportProjects: parseBoolean(canImportProjects),
+    canSelectNamespace: parseBoolean(canSelectNamespace),
+    canCreateProject: parseBoolean(canCreateProject),
+    userProjectLimit,
+    importHistoryPath,
+    importGitlabEnabled: parseBoolean(importGitlabEnabled),
+    importGitlabImportPath,
+    importGithubEnabled: parseBoolean(importGithubEnabled),
+    importGithubImportPath,
+    importBitbucketEnabled: parseBoolean(importBitbucketEnabled),
+    importBitbucketImportPath,
+    importBitbucketImportConfigured: parseBoolean(importBitbucketImportConfigured),
+    importBitbucketDisabledMessage,
+    importBitbucketServerEnabled: parseBoolean(importBitbucketServerEnabled),
+    importBitbucketServerImportPath,
+    importFogbugzEnabled: parseBoolean(importFogbugzEnabled),
+    importFogbugzImportPath,
+    importGiteaEnabled: parseBoolean(importGiteaEnabled),
+    importGiteaImportPath,
+    importGitEnabled: parseBoolean(importGitEnabled),
+    importManifestEnabled: parseBoolean(importManifestEnabled),
+    importManifestImportPath,
   };
 
   return new Vue({
     el,
+    name: 'NewProjectFormRoot',
     apolloProvider: new VueApollo({
       defaultClient: createDefaultClient(),
     }),
     provide,
     render(h) {
-      return h(NewProjectFormApp, { props });
+      return h(NewProjectFormApp);
     },
   });
 }
diff --git a/app/assets/javascripts/vue_shared/components/multiple_choice_selector_item.vue b/app/assets/javascripts/vue_shared/components/multiple_choice_selector_item.vue
index 9ae9263f1059b18a93a3531eb865dfa346098653..651b7b6f355d31f21fc47f838e802d0e68f4a445 100644
--- a/app/assets/javascripts/vue_shared/components/multiple_choice_selector_item.vue
+++ b/app/assets/javascripts/vue_shared/components/multiple_choice_selector_item.vue
@@ -1,8 +1,12 @@
 <script>
 import { GlFormCheckbox } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 
 export default {
   components: { GlFormCheckbox },
+  directives: {
+    SafeHtml,
+  },
   props: {
     value: {
       type: String,
@@ -44,9 +48,11 @@ export default {
           {{ title }}
         </slot>
       </div>
-      <p v-if="disabled && disabledMessage" class="help-text !gl-text-warning">
-        {{ disabledMessage }}
-      </p>
+      <p
+        v-if="disabled && disabledMessage"
+        v-safe-html="disabledMessage"
+        class="help-text !gl-text-warning"
+      ></p>
       <p v-if="description" class="help-text">
         {{ description }}
       </p>
diff --git a/app/assets/javascripts/vue_shared/components/single_choice_selector_item.vue b/app/assets/javascripts/vue_shared/components/single_choice_selector_item.vue
index f67066e92af57714b5ee5ff8de11421bc508cd3f..8042c178ab4535e5c4cde39be031fb28e7a2788f 100644
--- a/app/assets/javascripts/vue_shared/components/single_choice_selector_item.vue
+++ b/app/assets/javascripts/vue_shared/components/single_choice_selector_item.vue
@@ -1,8 +1,12 @@
 <script>
 import { GlFormRadio } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 
 export default {
   components: { GlFormRadio },
+  directives: {
+    SafeHtml,
+  },
   props: {
     value: {
       type: String,
@@ -42,9 +46,11 @@ export default {
           {{ title }}
         </slot>
       </div>
-      <p v-if="disabled && disabledMessage" class="help-text !gl-text-warning">
-        {{ disabledMessage }}
-      </p>
+      <p
+        v-if="disabled && disabledMessage"
+        v-safe-html="disabledMessage"
+        class="help-text !gl-text-warning"
+      ></p>
       <p v-if="description" class="help-text">
         {{ description }}
       </p>
diff --git a/app/assets/stylesheets/components/multiple_choice_selector.scss b/app/assets/stylesheets/components/multiple_choice_selector.scss
index cd0b18ddd9921fe4e1d87e909db9d31d29702088..082e93861b8fc64be0c0e1d423738d298470ae4c 100644
--- a/app/assets/stylesheets/components/multiple_choice_selector.scss
+++ b/app/assets/stylesheets/components/multiple_choice_selector.scss
@@ -48,6 +48,10 @@
     &:last-child:has(input:checked) {
       margin: -1px;
     }
+
+    .custom-control {
+      min-height: auto;
+    }
   }
 
   &-click-area {
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index bc8a31207bce51ce29d9f2474af7aec3dde6fb9a..69bf9adef419a2add97112ebd524f3f5460e2bdf 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -8,9 +8,8 @@
 - if Feature.enabled?(:new_project_creation_form, @user)
   #js-vue-new-project-app{ data: {
     namespace_full_path: GroupFinder.new(current_user).execute(id: namespace_id_from(params))&.full_path || @current_user_group&.full_path,
-    namespace_id: namespace_id_from(params) || @current_user_group&.id,
-    user_namespace_id: current_user.namespace_id,
-    has_errors: @project.errors.any?.to_s,
+    namespace_id: namespace_id_from(params).to_s || @current_user_group&.id.to_s,
+    user_namespace_id: current_user.namespace_id.to_s,
     new_project_guidelines: brand_new_project_guidelines,
     push_to_create_project_command: push_to_create_project_command,
     root_path: root_path,
@@ -24,7 +23,25 @@
     track_label: local_assigns.fetch(:track_label, 'blank_project'),
     can_select_namespace: current_user.can_select_namespace?.to_s,
     can_create_project: current_user.can_create_project?.to_s,
-    user_project_limit: current_user.projects_limit } }
+    user_project_limit: current_user.projects_limit,
+    import_history_path: import_history_index_path,
+    import_gitlab_enabled: gitlab_project_import_enabled?.to_s,
+    import_gitlab_import_path: new_import_gitlab_project_path,
+    import_github_enabled: github_import_enabled?.to_s,
+    import_github_import_path: new_import_github_path(namespace_id: @namespace&.id),
+    import_bitbucket_enabled: bitbucket_import_enabled?.to_s,
+    import_bitbucket_import_path: status_import_bitbucket_path(namespace_id: @namespace&.id),
+    import_bitbucket_import_configured: bitbucket_import_configured?.to_s,
+    import_bitbucket_disabled_message: import_from_bitbucket_message,
+    import_bitbucket_server_enabled: bitbucket_server_import_enabled?.to_s,
+    import_bitbucket_server_import_path: status_import_bitbucket_server_path(namespace_id: @namespace&.id),
+    import_fogbugz_enabled: fogbugz_import_enabled?.to_s,
+    import_fogbugz_import_path: new_import_fogbugz_path(namespace_id: @namespace&.id),
+    import_gitea_enabled: gitea_import_enabled?.to_s,
+    import_gitea_import_path: new_import_gitea_path(namespace_id: @namespace&.id),
+    import_git_enabled: git_import_enabled?.to_s,
+    import_manifest_enabled: manifest_import_enabled?.to_s,
+    import_manifest_import_path: new_import_manifest_path(namespace_id: @namespace&.id) } }
 - else
   .project-edit-container
     .project-edit-errors
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 339fdfa515f783033160865e7f0ca48175389de1..c4df3cf988cc816caef8d9b03e887d7a3a5aeb79 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -45342,6 +45342,33 @@ msgstr ""
 msgid "ProjectFileTree|Show more"
 msgstr ""
 
+msgid "ProjectImport|Bitbucket Cloud"
+msgstr ""
+
+msgid "ProjectImport|Bitbucket Server"
+msgstr ""
+
+msgid "ProjectImport|FogBugz"
+msgstr ""
+
+msgid "ProjectImport|GitHub"
+msgstr ""
+
+msgid "ProjectImport|GitLab"
+msgstr ""
+
+msgid "ProjectImport|Gitea"
+msgstr ""
+
+msgid "ProjectImport|Import repository by URL"
+msgstr ""
+
+msgid "ProjectImport|Manifest file"
+msgstr ""
+
+msgid "ProjectImport|Project URL"
+msgstr ""
+
 msgid "ProjectList|Starred"
 msgstr ""
 
@@ -46568,6 +46595,9 @@ msgstr ""
 msgid "ProjectsNew|Import project"
 msgstr ""
 
+msgid "ProjectsNew|Import project from"
+msgstr ""
+
 msgid "ProjectsNew|Import projects from FogBugz"
 msgstr ""
 
diff --git a/spec/frontend/projects/new_v2/components/app_spec.js b/spec/frontend/projects/new_v2/components/app_spec.js
index 548ef33311f1d7556fa90c946cbcb7f44d137d96..eadab1dc6ab0fffafb6913f071c1b1c955038295 100644
--- a/spec/frontend/projects/new_v2/components/app_spec.js
+++ b/spec/frontend/projects/new_v2/components/app_spec.js
@@ -11,18 +11,18 @@ jest.mock('~/lib/utils/url_utility');
 describe('New project creation app', () => {
   let wrapper;
 
-  const createComponent = (props = {}, provide = {}) => {
+  const createComponent = (provide = {}) => {
     wrapper = shallowMountExtended(App, {
-      propsData: {
+      provide: {
+        userNamespaceId: '1',
+        canCreateProject: true,
         rootPath: '/',
         projectsUrl: '/dashboard/projects',
         userProjectLimit: 10000,
         canSelectNamespace: true,
-        ...props,
-      },
-      provide: {
-        userNamespaceId: '1',
-        canCreateProject: true,
+        isCiCdAvailable: true,
+        canImportProjects: true,
+        importSourcesEnabled: true,
         ...provide,
       },
       stubs: {
@@ -110,7 +110,7 @@ describe('New project creation app', () => {
     });
 
     it('renders error when user reached a limit of projects', () => {
-      createComponent({}, { canCreateProject: false });
+      createComponent({ canCreateProject: false });
 
       expect(findSingleChoiceSelector().exists()).toBe(false);
       expect(findAlert().text()).toBe(
@@ -119,7 +119,7 @@ describe('New project creation app', () => {
     });
 
     it('renders error when user can not create personal projects', () => {
-      createComponent({ userProjectLimit: 0 }, { canCreateProject: false });
+      createComponent({ userProjectLimit: 0, canCreateProject: false });
 
       expect(findSingleChoiceSelector().exists()).toBe(false);
       expect(findAlert().text()).toBe(
diff --git a/spec/frontend/projects/new_v2/components/import_by_url_form_spec.js b/spec/frontend/projects/new_v2/components/import_by_url_form_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..4de369d07c1424325a8f5730c5bbb2ea71953965
--- /dev/null
+++ b/spec/frontend/projects/new_v2/components/import_by_url_form_spec.js
@@ -0,0 +1,26 @@
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import ImportByUrlForm from '~/projects/new_v2/components/import_by_url_form.vue';
+
+describe('Import Project by URL Form', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = mountExtended(ImportByUrlForm);
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  const findNextButton = () => wrapper.findByTestId('import-project-by-url-next-button');
+  const findBackButton = () => wrapper.findByTestId('import-project-by-url-back-button');
+
+  it('renders the option to move to Next Step', () => {
+    expect(findNextButton().text()).toBe('Next step');
+  });
+
+  it(`emits the "back" event when the back button is clicked`, () => {
+    findBackButton().trigger('click');
+    expect(wrapper.emitted('back')).toHaveLength(1);
+  });
+});
diff --git a/spec/frontend/projects/new_v2/components/import_project_form_spec.js b/spec/frontend/projects/new_v2/components/import_project_form_spec.js
index 42b0c43b93f22efffbef4d3947b77577cde0a01d..b39de1edc8b9b85b0421fc2a5b3dc930a84f7bf3 100644
--- a/spec/frontend/projects/new_v2/components/import_project_form_spec.js
+++ b/spec/frontend/projects/new_v2/components/import_project_form_spec.js
@@ -8,14 +8,17 @@ describe('Import Project Form', () => {
   const defaultProps = {
     option: {
       title: 'Import project',
+      namespaceId: '',
     },
   };
 
-  const createComponent = (props = {}) => {
+  const createComponent = () => {
     wrapper = shallowMountExtended(ImportProjectForm, {
       propsData: {
         ...defaultProps,
-        ...props,
+      },
+      provide: {
+        importGitlabEnabled: true,
       },
     });
   };
@@ -32,7 +35,7 @@ describe('Import Project Form', () => {
     expect(findMultiStepFormTemplate().props()).toMatchObject({
       title: defaultProps.option.title,
       currentStep: 2,
-      stepsTotal: 2,
+      stepsTotal: 3,
     });
   });