diff --git a/app/assets/javascripts/projects/new_v2/components/app.vue b/app/assets/javascripts/projects/new_v2/components/app.vue
index 7de862a21aeafe1ebbf15cb74502219fe156f8ad..a446c3cdcbb9f73fbf6fd1c475958c98b35d9169 100644
--- a/app/assets/javascripts/projects/new_v2/components/app.vue
+++ b/app/assets/javascripts/projects/new_v2/components/app.vue
@@ -10,10 +10,6 @@ import { OPTIONS } from '../constants';
 import NewProjectDestinationSelect from './project_destination_select.vue';
 import Breadcrumb from './form_breadcrumb.vue';
 import CommandLine from './command_line.vue';
-import BlankProjectForm from './blank_project_form.vue';
-import TemplateProjectForm from './template_project_form.vue';
-import CiCdProjectForm from './ci_cd_project_form.vue';
-import ImportProjectForm from './import_project_form.vue';
 
 export default {
   OPTIONS,
@@ -29,10 +25,6 @@ export default {
     NewProjectDestinationSelect,
     Breadcrumb,
     CommandLine,
-    BlankProjectForm,
-    TemplateProjectForm,
-    CiCdProjectForm,
-    ImportProjectForm,
   },
   directives: {
     SafeHtml,
@@ -113,6 +105,8 @@ export default {
     return {
       selectedNamespace:
         this.namespaceId && this.canSelectNamespace ? this.namespaceId : this.userNamespaceId,
+      selectedProjectType: OPTIONS.blank.value,
+      currentStep: 1,
       rootUrl: this.rootPath,
     };
   },
@@ -149,6 +143,12 @@ export default {
         OPTIONS.transfer,
       ];
     },
+    selectedProjectOption() {
+      return this.availableProjectTypes.find((type) => type.value === this.selectedProjectType);
+    },
+    step2Component() {
+      return this.selectedProjectOption.component;
+    },
   },
 
   methods: {
@@ -158,6 +158,15 @@ export default {
     chooseGroupNamespace() {
       this.selectedNamespace = null;
     },
+    selectProjectType(value) {
+      this.selectedProjectType = value;
+    },
+    onBack() {
+      this.currentStep -= 1;
+    },
+    onNext() {
+      this.currentStep += 1;
+    },
   },
 };
 </script>
@@ -166,7 +175,12 @@ export default {
   <div>
     <breadcrumb />
 
-    <multi-step-form-template :title="__('Create new project')" :current-step="1">
+    <multi-step-form-template
+      v-if="currentStep === 1"
+      :title="__('Create new project')"
+      :current-step="1"
+      data-testid="new-project-step1"
+    >
       <template #form>
         <gl-form-group :label="s__('ProjectNew|What do you want to create?')">
           <gl-button-group class="gl-w-full">
@@ -206,7 +220,11 @@ export default {
           />
         </gl-form-group>
 
-        <single-choice-selector v-if="canChooseOption" checked="blank_project">
+        <single-choice-selector
+          v-if="canChooseOption"
+          :checked="selectedProjectType"
+          @change="selectProjectType"
+        >
           <single-choice-selector-item
             v-for="type in availableProjectTypes"
             v-bind="type"
@@ -223,7 +241,12 @@ export default {
         </gl-alert>
       </template>
       <template #next>
-        <gl-button category="primary" variant="confirm" size="medium">
+        <gl-button
+          category="primary"
+          variant="confirm"
+          data-testid="new-project-next"
+          @click="onNext"
+        >
           {{ __('Next step') }}
         </gl-button>
       </template>
@@ -233,9 +256,13 @@ export default {
       </template>
     </multi-step-form-template>
 
-    <blank-project-form :title="$options.OPTIONS.blank.title" />
-    <template-project-form :title="$options.OPTIONS.template.title" />
-    <ci-cd-project-form :title="$options.OPTIONS.ci.title" />
-    <import-project-form :title="$options.OPTIONS.import.title" />
+    <component
+      :is="step2Component"
+      v-if="currentStep === 2"
+      :key="selectedProjectOption.key"
+      :option="selectedProjectOption"
+      data-testid="new-project-step2"
+      @back="onBack"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/projects/new_v2/components/blank_project_form.vue b/app/assets/javascripts/projects/new_v2/components/blank_project_form.vue
index c7a98d71ab745f0ae30dbd39d90e3c0fef04a32a..eef9745372c6f7eec09e639065d828a068e4503d 100644
--- a/app/assets/javascripts/projects/new_v2/components/blank_project_form.vue
+++ b/app/assets/javascripts/projects/new_v2/components/blank_project_form.vue
@@ -8,23 +8,24 @@ export default {
     MultiStepFormTemplate,
   },
   props: {
-    title: {
-      type: String,
-      required: true,
+    option: {
+      type: Object,
+      required: false,
+      default: () => ({}),
     },
   },
 };
 </script>
 
 <template>
-  <multi-step-form-template :title="title" :current-step="2" :steps-total="2">
+  <multi-step-form-template :title="option.title" :current-step="2" :steps-total="2">
     <template #next>
-      <gl-button category="primary" variant="confirm" size="medium" :disabled="true">
+      <gl-button category="primary" variant="confirm" :disabled="true">
         {{ __('Create project') }}
       </gl-button>
     </template>
     <template #back>
-      <gl-button category="primary" variant="default" size="medium">
+      <gl-button category="primary" variant="default" @click="$emit('back')">
         {{ __('Go back') }}
       </gl-button>
     </template>
diff --git a/app/assets/javascripts/projects/new_v2/components/ci_cd_project_form.vue b/app/assets/javascripts/projects/new_v2/components/ci_cd_project_form.vue
index c7a98d71ab745f0ae30dbd39d90e3c0fef04a32a..eef9745372c6f7eec09e639065d828a068e4503d 100644
--- a/app/assets/javascripts/projects/new_v2/components/ci_cd_project_form.vue
+++ b/app/assets/javascripts/projects/new_v2/components/ci_cd_project_form.vue
@@ -8,23 +8,24 @@ export default {
     MultiStepFormTemplate,
   },
   props: {
-    title: {
-      type: String,
-      required: true,
+    option: {
+      type: Object,
+      required: false,
+      default: () => ({}),
     },
   },
 };
 </script>
 
 <template>
-  <multi-step-form-template :title="title" :current-step="2" :steps-total="2">
+  <multi-step-form-template :title="option.title" :current-step="2" :steps-total="2">
     <template #next>
-      <gl-button category="primary" variant="confirm" size="medium" :disabled="true">
+      <gl-button category="primary" variant="confirm" :disabled="true">
         {{ __('Create project') }}
       </gl-button>
     </template>
     <template #back>
-      <gl-button category="primary" variant="default" size="medium">
+      <gl-button category="primary" variant="default" @click="$emit('back')">
         {{ __('Go back') }}
       </gl-button>
     </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 e3d7df53a68c7ee8da0aaa5f0dcf6bc687ab6195..ae16dfffbaf437806fbfbe709737cac1f85298b8 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
@@ -8,23 +8,24 @@ export default {
     MultiStepFormTemplate,
   },
   props: {
-    title: {
-      type: String,
-      required: true,
+    option: {
+      type: Object,
+      required: false,
+      default: () => ({}),
     },
   },
 };
 </script>
 
 <template>
-  <multi-step-form-template :title="title" :current-step="2">
+  <multi-step-form-template :title="option.title" :current-step="2">
     <template #next>
-      <gl-button category="primary" variant="confirm" size="medium" :disabled="true">
+      <gl-button category="primary" variant="confirm" :disabled="true">
         {{ __('Next step') }}
       </gl-button>
     </template>
     <template #back>
-      <gl-button category="primary" variant="default" size="medium">
+      <gl-button category="primary" variant="default" @click="$emit('back')">
         {{ __('Go back') }}
       </gl-button>
     </template>
diff --git a/app/assets/javascripts/projects/new_v2/components/template_project_form.vue b/app/assets/javascripts/projects/new_v2/components/template_project_form.vue
index 97bf6d5744adc9509a0da2843c71f88e911051c9..6bbbb97fd5765a808194f73e66879ece0e6bac64 100644
--- a/app/assets/javascripts/projects/new_v2/components/template_project_form.vue
+++ b/app/assets/javascripts/projects/new_v2/components/template_project_form.vue
@@ -8,23 +8,24 @@ export default {
     MultiStepFormTemplate,
   },
   props: {
-    title: {
-      type: String,
-      required: true,
+    option: {
+      type: Object,
+      required: false,
+      default: () => ({}),
     },
   },
 };
 </script>
 
 <template>
-  <multi-step-form-template :title="title" :current-step="2" :steps-total="3">
+  <multi-step-form-template :title="option.title" :current-step="2" :steps-total="3">
     <template #next>
       <gl-button category="primary" variant="confirm" :disabled="true">
         {{ __('Next step') }}
       </gl-button>
     </template>
     <template #back>
-      <gl-button category="primary" variant="default">
+      <gl-button category="primary" variant="default" @click="$emit('back')">
         {{ __('Go back') }}
       </gl-button>
     </template>
diff --git a/app/assets/javascripts/projects/new_v2/constants.js b/app/assets/javascripts/projects/new_v2/constants.js
index 5aed0d15bce68d26d6823d27c3492df551a05a59..05846855dcb3c89e42904416724694519020953a 100644
--- a/app/assets/javascripts/projects/new_v2/constants.js
+++ b/app/assets/javascripts/projects/new_v2/constants.js
@@ -4,6 +4,7 @@ export const OPTIONS = {
   blank: {
     key: 'blank',
     value: 'blank_project',
+    component: () => import('./components/blank_project_form.vue'),
     selector: '#blank-project-pane',
     title: s__('ProjectsNew|Create blank project'),
     description: s__(
@@ -13,6 +14,7 @@ export const OPTIONS = {
   template: {
     key: 'template',
     value: 'create_from_template',
+    component: () => import('./components/template_project_form.vue'),
     selector: '#create-from-template-pane',
     title: s__('ProjectsNew|Create from template'),
     description: s__(
@@ -22,6 +24,7 @@ export const OPTIONS = {
   ci: {
     key: 'ci',
     value: 'cicd_for_external_repo',
+    component: () => import('./components/ci_cd_project_form.vue'),
     selector: '#ci-cd-project-pane',
     title: s__('ProjectsNew|Run CI/CD for external repository'),
     description: s__('ProjectsNew|Connect your external repository to GitLab CI/CD.'),
@@ -29,6 +32,7 @@ export const OPTIONS = {
   import: {
     key: 'import',
     value: 'import_project',
+    component: () => import('./components/import_project_form.vue'),
     selector: '#import-project-pane',
     title: s__('ProjectsNew|Import project'),
     description: s__(
diff --git a/spec/frontend/projects/new_v2/components/app_spec.js b/spec/frontend/projects/new_v2/components/app_spec.js
index b8b3ada84a8e3fbeef9d207e12285cb7697c4ab7..b9dec19e872868190cfd0533545299372c473999 100644
--- a/spec/frontend/projects/new_v2/components/app_spec.js
+++ b/spec/frontend/projects/new_v2/components/app_spec.js
@@ -3,7 +3,6 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import App from '~/projects/new_v2/components/app.vue';
 import FormBreadcrumb from '~/projects/new_v2/components/form_breadcrumb.vue';
 import CommandLine from '~/projects/new_v2/components/command_line.vue';
-import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
 import SingleChoiceSelector from '~/vue_shared/components/single_choice_selector.vue';
 
 describe('New project creation app', () => {
@@ -23,14 +22,19 @@ describe('New project creation app', () => {
         canCreateProject: true,
         ...provide,
       },
+      stubs: {
+        Component: { template: '<div></div>', props: ['option'] },
+      },
     });
   };
 
-  const findMultiStepForm = () => wrapper.findComponent(MultiStepFormTemplate);
+  const findStep1 = () => wrapper.findByTestId('new-project-step1');
   const findBreadcrumbs = () => wrapper.findComponent(FormBreadcrumb);
   const findSingleChoiceSelector = () => wrapper.findComponent(SingleChoiceSelector);
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findCommandLine = () => wrapper.findComponent(CommandLine);
+  const findNextButton = () => wrapper.findByTestId('new-project-next');
+  const findStep2 = () => wrapper.findByTestId('new-project-step2');
 
   it('renders breadcrumbs', () => {
     createComponent();
@@ -38,13 +42,25 @@ describe('New project creation app', () => {
     expect(findBreadcrumbs().exists()).toBe(true);
   });
 
-  it('renders a form', () => {
+  it('renders step 1 form', () => {
     createComponent();
 
-    expect(findMultiStepForm().exists()).toBe(true);
+    expect(findStep1().exists()).toBe(true);
     expect(findAlert().exists()).toBe(false);
   });
 
+  it('does not render step 2', () => {
+    createComponent();
+
+    expect(findStep2().exists()).toBe(false);
+  });
+
+  it('uses blank_project as default projectType', () => {
+    createComponent();
+
+    expect(findSingleChoiceSelector().props('checked')).toBe('blank_project');
+  });
+
   describe('personal namespace project', () => {
     it('starts with personal namespace when no namespaceId provided', () => {
       createComponent();
@@ -91,4 +107,45 @@ describe('New project creation app', () => {
       expect(findCommandLine().exists()).toBe(false);
     });
   });
+
+  describe('when projectType is changed', () => {
+    beforeEach(() => {
+      createComponent();
+
+      findSingleChoiceSelector().vm.$emit('change', 'create_from_template');
+    });
+
+    it('updates the selected projectType', () => {
+      expect(findSingleChoiceSelector().props('checked')).toBe('create_from_template');
+    });
+
+    describe('and "Next" button is clicked', () => {
+      beforeEach(() => {
+        findNextButton().vm.$emit('click');
+      });
+
+      it('hides step 1', () => {
+        expect(findStep1().exists()).toBe(false);
+      });
+
+      it('shows step 2 component', () => {
+        expect(findStep2().exists()).toBe(true);
+        expect(findStep2().props('option').value).toBe('create_from_template');
+      });
+
+      describe('and "Back" event is emitted from step 2', () => {
+        beforeEach(() => {
+          findStep2().vm.$emit('back');
+        });
+
+        it('shows step 1', () => {
+          expect(findStep1().exists()).toBe(true);
+        });
+
+        it('hides step 2 component', () => {
+          expect(findStep2().exists()).toBe(false);
+        });
+      });
+    });
+  });
 });