diff --git a/app/assets/javascripts/projects/new_v2/components/app.vue b/app/assets/javascripts/projects/new_v2/components/app.vue
index f851a37f1dcfb709705570fc02fd69899e2f614f..86aaa3d75ac0ff02dd5dd24b38553ef409494c45 100644
--- a/app/assets/javascripts/projects/new_v2/components/app.vue
+++ b/app/assets/javascripts/projects/new_v2/components/app.vue
@@ -42,6 +42,9 @@ export default {
     userNamespaceId: {
       default: null,
     },
+    userNamespaceFullPath: {
+      default: null,
+    },
     isCiCdAvailable: {
       default: false,
     },
@@ -61,7 +64,7 @@ export default {
       default: null,
     },
     namespaceId: {
-      default: null,
+      default: '',
     },
     trackLabel: {
       default: null,
@@ -72,23 +75,30 @@ export default {
     newProjectGuidelines: {
       default: null,
     },
+    visibilityLevel: {
+      default: null,
+    },
   },
   data() {
     return {
-      selectedNamespace:
-        this.namespaceId && this.canSelectNamespace ? this.namespaceId : this.userNamespaceId,
+      rootUrl: this.rootPath,
+      namespace: {
+        id: this.namespaceId && this.canSelectNamespace ? this.namespaceId : this.userNamespaceId,
+        visibility: this.visibilityLevel,
+        fullPath:
+          this.namespaceFullPath && this.canSelectNamespace
+            ? this.namespaceFullPath
+            : this.userNamespaceFullPath,
+        isPersonal: this.namespaceId === '',
+      },
       selectedProjectType: OPTIONS.blank.value,
       currentStep: 1,
-      rootUrl: this.rootPath,
     };
   },
 
   computed: {
-    isPersonalProject() {
-      return this.selectedNamespace === this.userNamespaceId;
-    },
     canChooseOption() {
-      if (!this.isPersonalProject) return true;
+      if (!this.namespace.isPersonal) return true;
       return this.canCreateProject && this.userProjectLimit > 0;
     },
     errorMessage() {
@@ -131,11 +141,18 @@ export default {
   },
 
   methods: {
-    choosePersonalNamespace() {
-      this.selectedNamespace = this.userNamespaceId;
-    },
-    chooseGroupNamespace() {
-      this.selectedNamespace = null;
+    onSelectNamespaceType(isPersonal) {
+      if (isPersonal) {
+        this.namespace.id = this.userNamespaceId;
+        this.namespace.visibility = this.visibilityLevel;
+        this.namespace.fullPath = this.userNamespaceFullPath;
+        this.namespace.isPersonal = true;
+      } else {
+        this.namespace.id = this.namespaceId || null;
+        this.namespace.visibility = this.namespaceId !== null ? this.visibilityLevel : null;
+        this.namespace.fullPath = this.namespaceFullPath;
+        this.namespace.isPersonal = false;
+      }
     },
     selectProjectType(value) {
       this.selectedProjectType = value;
@@ -145,9 +162,16 @@ export default {
       setLocationHash();
     },
     onNext() {
+      if (this.namespace.id === null) return;
+
       this.currentStep += 1;
       setLocationHash(this.selectedProjectType);
     },
+    onSelectNamespace(newNamespace) {
+      this.namespace.id = newNamespace.id;
+      this.namespace.visibility = newNamespace.visibility;
+      this.namespace.fullPath = newNamespace.fullPath;
+    },
     setStepFromLocationHash() {
       const hash = getLocationHash();
       if (this.availableProjectTypes.some((type) => type.value === hash)) {
@@ -178,10 +202,10 @@ export default {
               category="primary"
               variant="default"
               size="medium"
-              :selected="isPersonalProject"
+              :selected="namespace.isPersonal"
               class="gl-w-full"
               data-testid="personal-namespace-button"
-              @click="choosePersonalNamespace"
+              @click="onSelectNamespaceType(true)"
             >
               {{ s__('ProjectsNew|A personal project') }}
             </gl-button>
@@ -189,24 +213,32 @@ export default {
               category="primary"
               variant="default"
               size="medium"
-              :selected="!isPersonalProject"
+              :selected="!namespace.isPersonal"
               class="gl-w-full"
               data-testid="group-namespace-button"
-              @click="chooseGroupNamespace"
+              @click="onSelectNamespaceType(false)"
             >
               {{ s__('ProjectsNew|A project within a group') }}
             </gl-button>
           </gl-button-group>
         </gl-form-group>
 
-        <gl-form-group v-if="!isPersonalProject" :label="s__('ProjectsNew|Choose a group')">
+        <gl-form-group
+          v-if="!namespace.isPersonal"
+          :label="s__('ProjectsNew|Choose a group')"
+          :invalid-feedback="
+            s__('ProjectsNew|Pick a group or namespace where you want to create this project.')
+          "
+          :state="namespace.id !== null"
+        >
           <new-project-destination-select
-            :namespace-full-path="namespaceFullPath"
-            :namespace-id="namespaceId"
+            :namespace-full-path="namespace.fullPath"
+            :namespace-id="namespace.id"
             :track-label="trackLabel"
             :root-url="rootUrl"
             :groups-only="true"
             data-testid="group-selector"
+            @onSelectNamespace="onSelectNamespace"
           />
         </gl-form-group>
 
@@ -242,7 +274,7 @@ export default {
       </template>
       <template #footer>
         <div v-if="newProjectGuidelines" v-safe-html="newProjectGuidelines" class="gl-mb-6"></div>
-        <command-line v-if="isPersonalProject" />
+        <command-line v-if="namespace.isPersonal" />
       </template>
     </multi-step-form-template>
 
@@ -251,7 +283,7 @@ export default {
       v-if="currentStep === 2"
       :key="selectedProjectOption.key"
       :option="selectedProjectOption"
-      :namespace-id="selectedNamespace"
+      :namespace="namespace"
       data-testid="new-project-step2"
       @back="onBack"
       @next="onNext"
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 8b67a233b2f96a95f55060f4200b314bead58640..eba77e93d1298c876474269a470d340387bf78e5 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
@@ -1,11 +1,72 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import {
+  GlFormGroup,
+  GlFormSelect,
+  GlButton,
+  GlFormInput,
+  GlLink,
+  GlSprintf,
+  GlExperimentBadge,
+  GlIcon,
+} from '@gitlab/ui';
+import { kebabCase } from 'lodash';
+import csrf from '~/lib/utils/csrf';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import validation, { initForm } from '~/vue_shared/directives/validation';
 import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
+import MultipleChoiceSelector from '~/vue_shared/components/multiple_choice_selector.vue';
+import MultipleChoiceSelectorItem from '~/vue_shared/components/multiple_choice_selector_item.vue';
+import SingleChoiceSelector from '~/vue_shared/components/single_choice_selector.vue';
+import SingleChoiceSelectorItem from '~/vue_shared/components/single_choice_selector_item.vue';
+import {
+  PROJECT_VISIBILITY_TYPE,
+  VISIBILITY_LEVEL_LABELS,
+  VISIBILITY_LEVEL_PRIVATE_INTEGER,
+  VISIBILITY_TYPE_ICON,
+  VISIBILITY_LEVELS_INTEGER_TO_STRING,
+} from '~/visibility_level/constants';
+import { DEPLOYMENT_TARGET_SELECTIONS, K8S_OPTION } from '../form_constants';
+import NewProjectDestinationSelect from './project_destination_select.vue';
 
 export default {
   components: {
+    GlFormGroup,
+    GlFormSelect,
     GlButton,
+    GlFormInput,
+    GlLink,
+    GlSprintf,
+    GlExperimentBadge,
+    GlIcon,
     MultiStepFormTemplate,
+    MultipleChoiceSelector,
+    MultipleChoiceSelectorItem,
+    SingleChoiceSelector,
+    SingleChoiceSelectorItem,
+    NewProjectDestinationSelect,
+  },
+  directives: {
+    validation: validation(),
+  },
+  inject: {
+    deplymentTarget: {
+      default: null,
+    },
+    displaySha256Repository: {
+      default: null,
+    },
+    allVisibilityLevels: {
+      default: null,
+    },
+    formPath: {
+      default: null,
+    },
+    restrictedVisibilityLevels: {
+      default: null,
+    },
+    userNamespaceFullPath: {
+      default: null,
+    },
   },
   props: {
     option: {
@@ -13,32 +74,313 @@ export default {
       required: false,
       default: () => ({}),
     },
+    namespace: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    const form = initForm({
+      fields: {
+        'project[name]': { value: null },
+        'project[path]': { value: null },
+      },
+    });
+    return {
+      form,
+      selectedNamespace: this.namespace,
+      selectedTarget: null,
+      configurationReadme: true,
+      configurationSast: false,
+      configurationSha256: false,
+    };
+  },
+  computed: {
+    isK8sOptionSelected() {
+      return this.selectedTarget === K8S_OPTION.value;
+    },
+    visibilityLevelsOptions() {
+      const visibilityList = this.allVisibilityLevels
+        .substring(1, this.allVisibilityLevels.length - 1)
+        .split(', ');
+      const restrictedLevels = this.restrictedVisibilityLevels
+        .substring(1, this.restrictedVisibilityLevels.length - 1)
+        .split(', ');
+
+      return visibilityList.map((item) => {
+        const levelNumber = Number(item);
+        const LevelName = VISIBILITY_LEVELS_INTEGER_TO_STRING[levelNumber];
+        let ifRestricted = false;
+
+        if (restrictedLevels.find((level) => level === item)) ifRestricted = true;
+        else if (this.namespace.isPersonal) ifRestricted = false;
+        else ifRestricted = levelNumber > this.selectedNamespace.visibility;
+
+        return {
+          title: VISIBILITY_LEVEL_LABELS[LevelName],
+          description: PROJECT_VISIBILITY_TYPE[LevelName],
+          icon: VISIBILITY_TYPE_ICON[LevelName],
+          value: String(levelNumber),
+          level: levelNumber,
+          disabled: ifRestricted,
+          id: `project_visibility_level_${levelNumber}`,
+        };
+      });
+    },
   },
+  methods: {
+    updateSlug() {
+      this.form.fields['project[path]'].value = kebabCase(this.form.fields['project[name]'].value);
+    },
+    onSelectNamespace(newNamespace) {
+      this.selectedNamespace.visibility =
+        newNamespace.visibility || VISIBILITY_LEVEL_PRIVATE_INTEGER;
+      this.selectedNamespace.isPersonal = newNamespace.fullPath === this.userNamespaceFullPath;
+      this.selectedNamespace.id = newNamespace.id;
+      this.selectedNamespace.fullPath = newNamespace.fullPath;
+    },
+    onSubmit() {
+      if (!this.form.state) {
+        this.form.showValidation = true;
+        return;
+      }
+
+      this.$refs.form.submit();
+    },
+    onConfigurationChange(selected) {
+      this.configurationReadme = selected.includes('readme');
+      this.configurationSast = selected.includes('sast');
+      this.configurationSha256 = selected.includes('sha256');
+    },
+  },
+  helpPageK8s: helpPagePath('user/clusters/agent/_index'),
+  helpPageSast: helpPagePath('user/application_security/sast/_index'),
+  projectConfigurationDefaultOptions: ['readme'],
+  csrf,
+  K8S_OPTION,
+  DEPLOYMENT_TARGET_SELECTIONS,
 };
 </script>
 
 <template>
-  <multi-step-form-template :title="option.title" :current-step="2" :steps-total="2">
-    <template #next>
-      <gl-button
-        category="primary"
-        variant="confirm"
-        :disabled="true"
-        data-testid="create-project-button"
-        @click="$emit('create-project')"
-      >
-        {{ __('Create project') }}
-      </gl-button>
-    </template>
-    <template #back>
-      <gl-button
-        category="primary"
-        data-testid="create-project-back-button"
-        variant="default"
-        @click="$emit('back')"
-      >
-        {{ __('Go back') }}
-      </gl-button>
-    </template>
-  </multi-step-form-template>
+  <form ref="form" method="post" :action="formPath" @submit.prevent="onSubmit">
+    <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
+    <input :value="false" type="hidden" name="project[ci_cd_only]" />
+
+    <multi-step-form-template :title="option.title" :current-step="2" :steps-total="2">
+      <template #form>
+        <gl-form-group
+          :label="s__('ProjectsNew|Project name')"
+          label-for="project[name]"
+          :description="
+            s__(
+              'ProjectsNew|Must start with a lowercase or uppercase letter, digit, emoji, or underscore. Can also contain dots, pluses, dashes, or spaces.',
+            )
+          "
+          :invalid-feedback="form.fields['project[name]'].feedback"
+          data-testid="project-name-group"
+        >
+          <gl-form-input
+            id="project[name]"
+            v-model="form.fields['project[name]'].value"
+            v-validation:[form.showValidation]
+            :validation-message="s__('ProjectsNew|Please enter project name.')"
+            :state="form.fields['project[name]'].state"
+            name="project[name]"
+            required
+            :placeholder="s__('ProjectsNew|My awesome project')"
+            data-testid="project-name-input"
+            @keyup="updateSlug"
+          />
+        </gl-form-group>
+
+        <div class="gl-flex gl-flex-col gl-gap-4 sm:gl-flex-row">
+          <gl-form-group
+            :label="s__('ProjectsNew|Choose a group or namespace')"
+            class="sm:gl-w-1/2"
+            label-for="namespace"
+            :invalid-feedback="
+              s__('ProjectsNew|Pick a group or namespace where you want to create this project.')
+            "
+            :state="selectedNamespace.id !== null"
+            data-testid="project-namespace-group"
+          >
+            <new-project-destination-select
+              toggle-aria-labelled-by="namespace"
+              :namespace-id="selectedNamespace.id"
+              :namespace-full-path="selectedNamespace.fullPath"
+              @onSelectNamespace="onSelectNamespace"
+            />
+          </gl-form-group>
+
+          <div class="gl-mt-2 gl-hidden gl-pt-6 sm:gl-block">{{ __('/') }}</div>
+
+          <gl-form-group
+            :label="s__('ProjectsNew|Project slug')"
+            label-for="project[path]"
+            class="sm:gl-w-1/2"
+            :invalid-feedback="form.fields['project[path]'].feedback"
+            data-testid="project-slug-group"
+          >
+            <gl-form-input
+              id="project[path]"
+              v-model="form.fields['project[path]'].value"
+              v-validation:[form.showValidation]
+              :validation-message="s__('ProjectsNew|Please enter project slug.')"
+              :state="form.fields['project[path]'].state"
+              name="project[path]"
+              required
+              :placeholder="s__('ProjectsNew|my-awesome-project')"
+              data-testid="project-slug-input"
+            />
+          </gl-form-group>
+        </div>
+
+        <gl-form-group
+          :label="s__('Deployment Target|Project deployment target (optional)')"
+          label-for="deployment-target-select"
+        >
+          <gl-form-select
+            id="deployment-target-select"
+            v-model="selectedTarget"
+            :options="$options.DEPLOYMENT_TARGET_SELECTIONS"
+            class="gl-w-full"
+          >
+            <template #first>
+              <option :value="null" disabled>
+                {{ s__('Deployment Target|Select the deployment target') }}
+              </option>
+            </template>
+          </gl-form-select>
+
+          <template v-if="isK8sOptionSelected" #description>
+            <gl-sprintf
+              :message="
+                s__(
+                  'Deployment Target|%{linkStart}How to provision or deploy to Kubernetes clusters from GitLab?%{linkEnd}',
+                )
+              "
+            >
+              <template #link="{ content }">
+                <gl-link
+                  :href="$options.helpPageK8s"
+                  data-track-action="visit_docs"
+                  data-track-label="new_project_deployment_target"
+                  >{{ content }}</gl-link
+                >
+              </template>
+            </gl-sprintf>
+          </template>
+        </gl-form-group>
+
+        <gl-form-group :label="s__('ProjectsNew|Visibility Level')">
+          <single-choice-selector
+            :checked="String(selectedNamespace.visibility)"
+            name="project[visibility_level]"
+          >
+            <single-choice-selector-item
+              v-for="{ title, description, icon, value, disabled, id } in visibilityLevelsOptions"
+              :id="id"
+              :key="value"
+              :value="value"
+              :description="description"
+              :disabled="disabled"
+            >
+              <gl-icon :name="icon" />
+              {{ title }}
+            </single-choice-selector-item>
+          </single-choice-selector>
+        </gl-form-group>
+
+        <gl-form-group :label="s__('ProjectsNew|Project Configuration')">
+          <multiple-choice-selector
+            :selected="$options.projectConfigurationDefaultOptions"
+            @change="onConfigurationChange"
+          >
+            <multiple-choice-selector-item
+              value="readme"
+              :title="s__('ProjectsNew|Initialize repository with a README')"
+            >
+              <template #description>
+                {{
+                  s__(
+                    'ProjectsNew|Allows you to immediately clone this project’s repository. Skip this if you plan to push up an existing repository.',
+                  )
+                }}
+                <input
+                  type="hidden"
+                  name="project[initialize_with_readme]"
+                  :value="configurationReadme"
+                />
+              </template>
+            </multiple-choice-selector-item>
+            <multiple-choice-selector-item
+              value="sast"
+              :title="s__('ProjectsNew|Enable Static Application Security Testing (SAST)')"
+            >
+              <template #description>
+                <gl-sprintf
+                  :message="
+                    s__(
+                      'ProjectsNew|Analyze your source code for known security vulnerabilities. %{linkStart}Learn more.%{linkEnd}',
+                    )
+                  "
+                >
+                  <template #link="{ content }">
+                    <gl-link :href="$options.helpPageSast">{{ content }}</gl-link>
+                  </template>
+                </gl-sprintf>
+                <input
+                  type="hidden"
+                  name="project[initialize_with_sast]"
+                  :value="configurationSast"
+                />
+              </template>
+            </multiple-choice-selector-item>
+            <multiple-choice-selector-item
+              v-if="displaySha256Repository"
+              value="sha256"
+              :description="
+                s__(
+                  'ProjectsNew|Might break existing functionality with other repositories or APIs. It is not possible to change SHA-256 repositories back to the default SHA-1 hashing algorithm.',
+                )
+              "
+            >
+              {{ s__('ProjectsNew|Use SHA-256 for repository hashing algorithm') }}
+              <gl-experiment-badge />
+              <input
+                type="hidden"
+                name="project[use_sha256_repository]"
+                :value="configurationSha256"
+              />
+            </multiple-choice-selector-item>
+          </multiple-choice-selector>
+        </gl-form-group>
+
+        <!-- here should be two checkboxes from JiHu, see details in https://jihulab.com/gitlab-cn/gitlab/-/merge_requests/675 -->
+      </template>
+
+      <template #next>
+        <gl-button
+          category="primary"
+          variant="confirm"
+          type="submit"
+          data-testid="create-project-button"
+          @click.prevent="onSubmit"
+        >
+          {{ __('Create project') }}
+        </gl-button>
+      </template>
+      <template #back>
+        <gl-button
+          category="primary"
+          variant="default"
+          data-testid="create-project-back-button"
+          @click="$emit('back')"
+        >
+          {{ __('Go back') }}
+        </gl-button>
+      </template>
+    </multi-step-form-template>
+  </form>
 </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 3824ab085f47c80d92d09dc9fcaef0731a9e81c7..441cc4a88017f73e8c35214e766001c122f5fa9a 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
@@ -73,10 +73,10 @@ export default {
       required: false,
       default: () => ({}),
     },
-    namespaceId: {
-      type: String,
+    namespace: {
+      type: Object,
       required: false,
-      default: null,
+      default: () => ({}),
     },
   },
   data() {
@@ -89,8 +89,8 @@ export default {
       return [
         {
           isAvailable: this.importGitlabEnabled,
-          path: this.namespaceId
-            ? `${this.importGitlabImportPath}?namespace_id=${this.namespaceId}`
+          path: this.namespace.id
+            ? `${this.importGitlabImportPath}?namespace_id=${this.namespace.id}`
             : this.importGitlabImportPath,
           icon: 'tanuki',
           title: s__('ProjectImport|GitLab'),
diff --git a/app/assets/javascripts/projects/new_v2/components/project_destination_select.vue b/app/assets/javascripts/projects/new_v2/components/project_destination_select.vue
index 7675e1c9ed3facb5f7f3e43d779703765029a5ea..8b93ce1812ab73ebd46d95ce146bad469f3b59e8 100644
--- a/app/assets/javascripts/projects/new_v2/components/project_destination_select.vue
+++ b/app/assets/javascripts/projects/new_v2/components/project_destination_select.vue
@@ -1,13 +1,13 @@
 <script>
 import { GlCollapsibleListbox } from '@gitlab/ui';
-import { joinPaths, PATH_SEPARATOR } from '~/lib/utils/url_utility';
+import { PATH_SEPARATOR } from '~/lib/utils/url_utility';
 import { MINIMUM_SEARCH_LENGTH } from '~/graphql_shared/constants';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import Tracking from '~/tracking';
 import { DEBOUNCE_DELAY } from '~/vue_shared/components/filtered_search_bar/constants';
 import { __, s__, n__ } from '~/locale';
+import { VISIBILITY_LEVELS_STRING_TO_INTEGER } from '~/visibility_level/constants';
 import searchNamespacesWhereUserCanCreateProjectsQuery from '~/projects/new/queries/search_namespaces_where_user_can_create_projects.query.graphql';
-import eventHub from '../event_hub';
 
 export default {
   components: {
@@ -30,7 +30,7 @@ export default {
       debounce: DEBOUNCE_DELAY,
     },
   },
-  inject: ['userNamespaceId', 'canCreateProject'],
+  inject: ['userNamespaceId', 'userNamespaceFullPath', 'canCreateProject'],
   props: {
     namespaceFullPath: {
       type: String,
@@ -159,16 +159,14 @@ export default {
       }
     },
     handleDropdownItemClick(namespaceId) {
-      const namespace = this.allItems.find((item) => item.id === namespaceId);
-
-      if (namespace) {
-        eventHub.$emit('update-visibility', {
-          name: namespace.name,
-          visibility: namespace.visibility,
-          showPath: namespace.webUrl,
-          editPath: joinPaths(namespace.webUrl, '-', 'edit'),
-        });
-      }
+      let namespace = this.allItems.find((item) => item.id === namespaceId);
+      namespace = {
+        id: namespace.id,
+        fullPath: namespace.fullPath,
+        isPersonal: namespace.fullPath === this.userNamespaceFullPath,
+        visibility: VISIBILITY_LEVELS_STRING_TO_INTEGER[namespace.visibility],
+      };
+      this.$emit('onSelectNamespace', namespace);
       this.setNamespace(namespace);
     },
     handleSelectTemplate(id, fullPath) {
@@ -229,7 +227,7 @@ export default {
     <input
       id="project[namespace_id]"
       type="hidden"
-      name="namespace_id"
+      name="project[namespace_id]"
       :value="selectedNamespace.id || userNamespaceUniqueId"
     />
   </div>
diff --git a/app/assets/javascripts/projects/new_v2/event_hub.js b/app/assets/javascripts/projects/new_v2/event_hub.js
deleted file mode 100644
index e31806ad199a1105985ed7045009d84e33856386..0000000000000000000000000000000000000000
--- a/app/assets/javascripts/projects/new_v2/event_hub.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import createEventHub from '~/helpers/event_hub_factory';
-
-export default createEventHub();
diff --git a/app/assets/javascripts/projects/new_v2/form_constants.js b/app/assets/javascripts/projects/new_v2/form_constants.js
new file mode 100644
index 0000000000000000000000000000000000000000..e0000e26344061e91822d6b67e376be6e0cdfa62
--- /dev/null
+++ b/app/assets/javascripts/projects/new_v2/form_constants.js
@@ -0,0 +1,64 @@
+import { s__ } from '~/locale';
+
+export const K8S_OPTION = {
+  value: 'kubernetes',
+  text: s__('DeploymentTarget|Kubernetes (GKE, EKS, OpenShift, and so on)'),
+};
+
+export const DEPLOYMENT_TARGET_SELECTIONS = [
+  K8S_OPTION,
+  {
+    value: 'managed_container_runtime',
+    text: s__('DeploymentTarget|Managed container runtime (Fargate, Cloud Run, DigitalOcean App)'),
+  },
+  {
+    value: 'self_managed_container_runtime',
+    text: s__(
+      'DeploymentTarget|Self-managed container runtime (Podman, Docker Swarm, Docker Compose)',
+    ),
+  },
+  {
+    value: 'heroku',
+    text: s__('DeploymentTarget|Heroku'),
+  },
+  {
+    value: 'virtual_machine',
+    text: s__('DeploymentTarget|Virtual machine (for example, EC2)'),
+  },
+  {
+    value: 'mobile_app_store',
+    text: s__('DeploymentTarget|Mobile app store'),
+  },
+  {
+    value: 'registry',
+    text: s__('DeploymentTarget|Registry (package or container)'),
+  },
+  {
+    value: 'infrastructure_provider',
+    text: s__('DeploymentTarget|Infrastructure provider (Terraform, Cloudformation, and so on)'),
+  },
+  {
+    value: 'serverless_backend',
+    text: s__('DeploymentTarget|Serverless backend (Lambda, Cloud functions)'),
+  },
+  {
+    value: 'edge_computing',
+    text: s__('DeploymentTarget|Edge Computing (e.g. Cloudflare Workers)'),
+  },
+  {
+    value: 'web_deployment_platform',
+    text: s__('DeploymentTarget|Web Deployment Platform (Netlify, Vercel, Gatsby)'),
+  },
+  {
+    value: 'gitlab_pages',
+    text: s__('DeploymentTarget|GitLab Pages'),
+  },
+  {
+    value: 'other_hosting_service',
+    text: s__('DeploymentTarget|Other hosting service'),
+  },
+  {
+    value: 'no_deployment',
+    text: s__('DeploymentTarget|No deployment planned'),
+  },
+];
diff --git a/app/assets/javascripts/projects/new_v2/index.js b/app/assets/javascripts/projects/new_v2/index.js
index c35ba8d2e3507d51417e3e77d75dc6f3e943d405..20f3e1a4ba66333d767298b53ed25e61889f85c9 100644
--- a/app/assets/javascripts/projects/new_v2/index.js
+++ b/app/assets/javascripts/projects/new_v2/index.js
@@ -12,9 +12,11 @@ export function initNewProjectForm() {
   }
 
   const {
+    formPath,
     namespaceFullPath,
     namespaceId,
     userNamespaceId,
+    userNamespaceFullPath,
     newProjectGuidelines,
     pushToCreateProjectCommand,
     rootPath,
@@ -29,6 +31,11 @@ export function initNewProjectForm() {
     canSelectNamespace,
     canCreateProject,
     userProjectLimit,
+    deplymentTarget,
+    displaySha256Repository,
+    visibilityLevel,
+    allVisibilityLevels,
+    restrictedVisibilityLevels,
     importHistoryPath,
     importGitlabEnabled,
     importGitlabImportPath,
@@ -50,9 +57,11 @@ export function initNewProjectForm() {
   } = el.dataset;
 
   const provide = {
+    formPath,
     namespaceFullPath,
     namespaceId,
     userNamespaceId,
+    userNamespaceFullPath,
     newProjectGuidelines,
     pushToCreateProjectCommand,
     rootPath,
@@ -67,6 +76,11 @@ export function initNewProjectForm() {
     canSelectNamespace: parseBoolean(canSelectNamespace),
     canCreateProject: parseBoolean(canCreateProject),
     userProjectLimit,
+    deplymentTarget: parseBoolean(deplymentTarget),
+    displaySha256Repository: parseBoolean(displaySha256Repository),
+    visibilityLevel: parseInt(visibilityLevel, 10),
+    allVisibilityLevels,
+    restrictedVisibilityLevels,
     importHistoryPath,
     importGitlabEnabled: parseBoolean(importGitlabEnabled),
     importGitlabImportPath,
diff --git a/app/assets/javascripts/vue_shared/components/multiple_choice_selector.vue b/app/assets/javascripts/vue_shared/components/multiple_choice_selector.vue
index f0090417206345f14f764a2ab01e4f9b40fa2c02..935742e397fcff4c3e9099f617e2f6761fc9e6fa 100644
--- a/app/assets/javascripts/vue_shared/components/multiple_choice_selector.vue
+++ b/app/assets/javascripts/vue_shared/components/multiple_choice_selector.vue
@@ -21,6 +21,7 @@ export default {
   <gl-form-checkbox-group
     v-model="selectedOptions"
     class="multiple-choice-selector gl-border gl-block gl-rounded-base"
+    @change="$emit('change', selectedOptions)"
   >
     <slot></slot>
   </gl-form-checkbox-group>
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 651b7b6f355d31f21fc47f838e802d0e68f4a445..aeca0ca0e132107092e193c4831b580d9c533ab4 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
@@ -53,9 +53,11 @@ export default {
         v-safe-html="disabledMessage"
         class="help-text !gl-text-warning"
       ></p>
-      <p v-if="description" class="help-text">
-        {{ description }}
-      </p>
+      <slot name="description">
+        <p v-if="description" class="help-text">
+          {{ description }}
+        </p>
+      </slot>
     </gl-form-checkbox>
   </div>
 </template>
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 8042c178ab4535e5c4cde39be031fb28e7a2788f..b58a52507f704ef679456b10b373ee047a519753 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
@@ -51,9 +51,11 @@ export default {
         v-safe-html="disabledMessage"
         class="help-text !gl-text-warning"
       ></p>
-      <p v-if="description" class="help-text">
-        {{ description }}
-      </p>
+      <slot name="description">
+        <p v-if="description" class="help-text">
+          {{ description }}
+        </p>
+      </slot>
     </gl-form-radio>
   </div>
 </template>
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 69bf9adef419a2add97112ebd524f3f5460e2bdf..803264cd1de5892efd10e5c536f20273c3aa914e 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -7,9 +7,11 @@
 
 - if Feature.enabled?(:new_project_creation_form, @user)
   #js-vue-new-project-app{ data: {
+    form_path: "/projects",
     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).to_s || @current_user_group&.id.to_s,
     user_namespace_id: current_user.namespace_id.to_s,
+    user_namespace_full_path: current_user.namespace.full_path,
     new_project_guidelines: brand_new_project_guidelines,
     push_to_create_project_command: push_to_create_project_command,
     root_path: root_path,
@@ -24,6 +26,11 @@
     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,
+    deplyment_target: Gitlab::CurrentSettings.current_application_settings.hide_third_party_offers? || !Gitlab.com?,
+    display_sha256_repository: Feature.enabled?(:support_sha256_repositories, current_user),
+    visibility_level: selected_visibility_level(@project, params.dig(:project, :visibility_level)),
+    all_visibility_levels: all_visibility_levels,
+    restricted_visibility_levels: Gitlab::CurrentSettings.restricted_visibility_levels.to_json,
     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,
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 10040eb049ba224e48db03b783a177d2e4bdd409..def1f1f64078f4f8a0a4c63782e9ed26c6903b89 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -47019,6 +47019,9 @@ msgstr ""
 msgid "ProjectsNew|Analyze your source code for known security vulnerabilities."
 msgstr ""
 
+msgid "ProjectsNew|Analyze your source code for known security vulnerabilities. %{linkStart}Learn more.%{linkEnd}"
+msgstr ""
+
 msgid "ProjectsNew|Authenticate through GitHub"
 msgstr ""
 
@@ -47034,6 +47037,9 @@ msgstr ""
 msgid "ProjectsNew|Choose a group"
 msgstr ""
 
+msgid "ProjectsNew|Choose a group or namespace"
+msgstr ""
+
 msgid "ProjectsNew|Connect your external repository to GitLab CI/CD."
 msgstr ""
 
@@ -47112,6 +47118,9 @@ msgstr ""
 msgid "ProjectsNew|Initialize repository with a README"
 msgstr ""
 
+msgid "ProjectsNew|Might break existing functionality with other repositories or APIs. It is not possible to change SHA-256 repositories back to the default SHA-1 hashing algorithm."
+msgstr ""
+
 msgid "ProjectsNew|Might break existing functionality with other repositories or APIs. It's not possible to change SHA-256 repositories back to the default SHA-1 hashing algorithm."
 msgstr ""
 
@@ -47166,6 +47175,12 @@ msgstr ""
 msgid "ProjectsNew|Please enter a valid username."
 msgstr ""
 
+msgid "ProjectsNew|Please enter project name."
+msgstr ""
+
+msgid "ProjectsNew|Please enter project slug."
+msgstr ""
+
 msgid "ProjectsNew|Please upload a valid GitLab project export file."
 msgstr ""
 
diff --git a/spec/frontend/projects/new_v2/components/blank_project_form_spec.js b/spec/frontend/projects/new_v2/components/blank_project_form_spec.js
index 2e5b09a40a6841dded82d5bbf5399150b95fe186..8ab9f02f7cb7bc5f11c83c1d6f6381001442d971 100644
--- a/spec/frontend/projects/new_v2/components/blank_project_form_spec.js
+++ b/spec/frontend/projects/new_v2/components/blank_project_form_spec.js
@@ -1,13 +1,24 @@
+import { nextTick } from 'vue';
+import { GlFormInput } from '@gitlab/ui';
 import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import BlankProjectForm from '~/projects/new_v2/components/blank_project_form.vue';
 
+jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
+
 describe('Blank Project Form', () => {
   let wrapper;
 
   const defaultProps = {
     option: {
-      title: 'Import project',
+      title: 'Create blank project',
+    },
+    namespace: {
+      id: '1',
+      visibility: 20,
+      fullPath: 'root',
+      type: 'blank_project',
+      isPersonal: true,
     },
   };
 
@@ -17,6 +28,16 @@ describe('Blank Project Form', () => {
         ...defaultProps,
         ...props,
       },
+      provide: {
+        userNamespaceFullPath: 'root',
+        deplymentTarget: false,
+        displaySha256Repository: true,
+        allVisibilityLevels: '[0, 10, 20]',
+        restrictedVisibilityLevels: '[0]',
+      },
+      stubs: {
+        GlFormInput,
+      },
     });
   };
 
@@ -24,21 +45,74 @@ describe('Blank Project Form', () => {
     createComponent();
   });
 
+  const findForm = () => wrapper.find('form');
   const findMultiStepFormTemplate = () => wrapper.findComponent(MultiStepFormTemplate);
   const findCreateButton = () => wrapper.findByTestId('create-project-button');
   const findBackButton = () => wrapper.findByTestId('create-project-back-button');
+  const findProjectNameInput = () => wrapper.findByTestId('project-name-input');
+  const findProjectSlugInput = () => wrapper.findByTestId('project-slug-input');
+
+  describe('form', () => {
+    it('passes the correct props to MultiStepFormTemplate', () => {
+      expect(findMultiStepFormTemplate().props()).toMatchObject({
+        title: defaultProps.option.title,
+        currentStep: 2,
+        stepsTotal: 2,
+      });
+    });
+
+    it('renders the form element correctly', () => {
+      const form = findForm();
+
+      expect(form.attributes('action')).toBe('/projects');
+      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 findProjectNameInput().setValue('Project 1');
+      await findProjectNameInput().trigger('blur');
+      await findProjectSlugInput().setValue('project-1');
+      await findProjectSlugInput().trigger('blur');
+      await nextTick();
+
+      findForm().trigger('submit');
+      expect(submitSpy).toHaveBeenCalledWith();
+    });
+  });
+
+  describe('validation', () => {
+    it('shows an error message when project name is cleared', async () => {
+      findProjectNameInput().setValue('');
+      findProjectNameInput().trigger('blur');
+      await nextTick();
+
+      const formGroup = wrapper.findByTestId('project-name-group');
+      expect(formGroup.vm.$attrs['invalid-feedback']).toBe('Please enter project name.');
+    });
+
+    it('shows an error message when slug is cleared', async () => {
+      findProjectSlugInput().setValue('');
+      findProjectSlugInput().trigger('blur');
+      await nextTick();
 
-  it('passes the correct props to MultiStepFormTemplate', () => {
-    expect(findMultiStepFormTemplate().props()).toMatchObject({
-      title: defaultProps.option.title,
-      currentStep: 2,
-      stepsTotal: 2,
+      const formGroup = wrapper.findByTestId('project-slug-group');
+      expect(formGroup.vm.$attrs['invalid-feedback']).toBe('Please enter project slug.');
     });
   });
 
-  it('renders the option to Create Project as disabled', () => {
+  it('renders the option to Create Project', () => {
     expect(findCreateButton().text()).toBe('Create project');
-    expect(findCreateButton().props('disabled')).toBe(true);
   });
 
   it(`emits the "back" event when the back button is clicked`, () => {