diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index b0a0f9301..cde88005f 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -102,6 +102,11 @@ export const routes: Routes = [
         path: 'my-projects/:id',
         loadChildren: () => import('./features/project/project.routes').then((mod) => mod.projectRoutes),
       },
+      {
+        path: 'registries',
+        loadChildren: () => import('./features/registries/registries.routes').then((mod) => mod.registriesRoutes),
+      },
+
       {
         path: 'settings',
         loadChildren: () => import('./features/settings/settings.routes').then((mod) => mod.settingsRoutes),
diff --git a/src/app/core/constants/ngxs-states.constant.ts b/src/app/core/constants/ngxs-states.constant.ts
index 271cd4d57..936f30cab 100644
--- a/src/app/core/constants/ngxs-states.constant.ts
+++ b/src/app/core/constants/ngxs-states.constant.ts
@@ -15,7 +15,6 @@ import { NotificationSubscriptionState } from '@osf/features/settings/notificati
 import { ProfileSettingsState } from '@osf/features/settings/profile-settings/store/profile-settings.state';
 import { AddonsState, InstitutionsState } from '@shared/stores';
 import { LicensesState } from '@shared/stores/licenses';
-import { SubjectsState } from '@shared/stores/subjects';
 
 export const STATES = [
   AuthState,
@@ -35,6 +34,5 @@ export const STATES = [
   MeetingsState,
   RegistrationsState,
   ProjectMetadataState,
-  SubjectsState,
   LicensesState,
 ];
diff --git a/src/app/features/registries/components/custom-step/custom-step.component.html b/src/app/features/registries/components/custom-step/custom-step.component.html
new file mode 100644
index 000000000..3b1a04f44
--- /dev/null
+++ b/src/app/features/registries/components/custom-step/custom-step.component.html
@@ -0,0 +1,123 @@
+<section class="flex flex-column bg-white flex-1 h-full p-5 gap-4 w-full">
+  @if (currentPage()) {
+    <h2>{{ currentPage().title }}</h2>
+
+    @let questions = currentPage().questions || [];
+
+    @if (currentPage().sections?.length) {
+      @for (section of currentPage().sections; track section.id) {
+        questions = section.questions;
+        <p-card>
+          <h3 class="mb-2">{{ section.title }}</h3>
+          @if (section.description) {
+            <p class="mb-3">{{ section.description }}</p>
+          }
+          <ng-container *ngTemplateOutlet="questionList"></ng-container>
+        </p-card>
+      }
+    } @else {
+      <ng-container *ngTemplateOutlet="questionList"></ng-container>
+    }
+
+    <ng-template #questionList>
+      @for (question of questions; track question.id) {
+        <p-card>
+          <label [for]="question.groupKey">
+            <h3 class="mb-2">
+              {{ question.displayText }}
+              @if (question.required) {
+                <span class="text-red-500">*</span>
+              }
+            </h3>
+            @if (question.helpText) {
+              <p class="mb-3">{{ question.helpText }}</p>
+            }
+            @if (question.paragraphText) {
+              <p class="mb-3">{{ question.paragraphText }}</p>
+            }
+          </label>
+          @if (question.exampleText) {
+            <p-inplace #inplaceRef styleClass="mb-4">
+              <ng-template #display>
+                <span class="text-primary">{{ 'common.links.showExample' | translate }} </span>
+              </ng-template>
+              <ng-template #content>
+                <div class="p-inplace-display">
+                  <button
+                    class="text-primary border-none cursor-pointer bg-transparent text-sm"
+                    tabindex="0"
+                    role="button"
+                    (click)="inplaceRef.deactivate()"
+                    (keyup.enter)="inplaceRef.deactivate()"
+                    (keyup.space)="inplaceRef.deactivate()"
+                  >
+                    {{ 'common.links.hideExample' | translate }}
+                  </button>
+                </div>
+                <p class="m-0">{{ question.exampleText }}</p>
+              </ng-template>
+            </p-inplace>
+          }
+
+          @switch (question.fieldType) {
+            @case (FieldType.TextArea) {
+              <textarea id="{{ question.groupKey }}" class="w-full" rows="5" cols="30" pTextarea></textarea>
+            }
+            @case (FieldType.Radio) {
+              <div class="flex flex-column gap-2">
+                @for (option of question.options; track option) {
+                  <div class="flex align -items-center gap-2">
+                    <p-radioButton
+                      [inputId]="option.value"
+                      [(ngModel)]="radio"
+                      [name]="question.groupKey || ''"
+                      [value]="option.value"
+                    ></p-radioButton>
+                    <label [for]="option.value" class="ml-2">{{ option.label }}</label>
+                    @if (option.helpText) {
+                      <osf-info-icon [tooltipText]="option.helpText"></osf-info-icon>
+                    }
+                  </div>
+                }
+              </div>
+            }
+            @case (FieldType.Checkbox) {
+              <div class="flex flex-column gap-2">
+                @for (option of question.options; track option) {
+                  <div class="flex align-items-center gap-2">
+                    <p-checkbox
+                      [inputId]="option.value"
+                      [name]="question.groupKey || ''"
+                      [value]="option.value"
+                    ></p-checkbox>
+                    <label [for]="option.value" class="ml-2">{{ option.label }}</label>
+                  </div>
+                }
+              </div>
+            }
+
+            @case (FieldType.Text) {
+              <input
+                id="{{ question.groupKey }}"
+                type="text"
+                class="w-full"
+                [placeholder]="question.exampleText"
+                pInputText
+              />
+            }
+            @case (FieldType.File) {
+              <h3 class="mb-2">Upload File</h3>
+              <p class="mb-1">You may attach up to 5 file(s) to this question. Files cannot total over 5GB in size.</p>
+              <p>
+                Uploaded files will automatically be archived in this registration. They will also be added to a related
+                project that will be created for this registration.
+              </p>
+
+              <p>File input is not implemented yet.</p>
+            }
+          }
+        </p-card>
+      }
+    </ng-template>
+  }
+</section>
diff --git a/src/app/features/registries/components/custom-step/custom-step.component.scss b/src/app/features/registries/components/custom-step/custom-step.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/registries/components/custom-step/custom-step.component.spec.ts b/src/app/features/registries/components/custom-step/custom-step.component.spec.ts
new file mode 100644
index 000000000..6c65cc772
--- /dev/null
+++ b/src/app/features/registries/components/custom-step/custom-step.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomStepComponent } from './custom-step.component';
+
+describe('CustomStepComponent', () => {
+  let component: CustomStepComponent;
+  let fixture: ComponentFixture<CustomStepComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CustomStepComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CustomStepComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/components/custom-step/custom-step.component.ts b/src/app/features/registries/components/custom-step/custom-step.component.ts
new file mode 100644
index 000000000..fa37803cf
--- /dev/null
+++ b/src/app/features/registries/components/custom-step/custom-step.component.ts
@@ -0,0 +1,56 @@
+import { select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Card } from 'primeng/card';
+import { Checkbox } from 'primeng/checkbox';
+import { Inplace } from 'primeng/inplace';
+import { InputText } from 'primeng/inputtext';
+import { RadioButton } from 'primeng/radiobutton';
+import { Textarea } from 'primeng/textarea';
+
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+
+import { InfoIconComponent } from '@osf/shared/components';
+
+import { FieldType } from '../../enums';
+import { RegistriesSelectors } from '../../store';
+
+@Component({
+  selector: 'osf-custom-step',
+  imports: [
+    Card,
+    Textarea,
+    RadioButton,
+    FormsModule,
+    Checkbox,
+
+    InputText,
+    NgTemplateOutlet,
+    Inplace,
+    TranslatePipe,
+    InfoIconComponent,
+  ],
+  templateUrl: './custom-step.component.html',
+  styleUrl: './custom-step.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CustomStepComponent {
+  private readonly route = inject(ActivatedRoute);
+  step = signal(this.route.snapshot.params['step'].split('-')[0]);
+  protected readonly pages = select(RegistriesSelectors.getPagesSchema);
+  currentPage = computed(() => this.pages()[this.step() - 1]);
+  protected readonly FieldType = FieldType;
+
+  radio = null;
+
+  constructor() {
+    this.route.params.pipe(takeUntilDestroyed()).subscribe((params) => {
+      this.step.set(+params['step'].split('-')[0]);
+    });
+  }
+}
diff --git a/src/app/features/registries/components/drafts/drafts.component.html b/src/app/features/registries/components/drafts/drafts.component.html
new file mode 100644
index 000000000..ca310305a
--- /dev/null
+++ b/src/app/features/registries/components/drafts/drafts.component.html
@@ -0,0 +1,9 @@
+<osf-sub-header [title]="'registries.new.addNewRegistry' | translate" />
+<osf-stepper
+  class="block ml-4 mb-4"
+  [steps]="steps()"
+  [linear]="false"
+  [currentStep]="currentStep()"
+  (currentStepChange)="stepChange($event)"
+/>
+<router-outlet></router-outlet>
diff --git a/src/app/features/registries/components/drafts/drafts.component.scss b/src/app/features/registries/components/drafts/drafts.component.scss
new file mode 100644
index 000000000..683ae23fa
--- /dev/null
+++ b/src/app/features/registries/components/drafts/drafts.component.scss
@@ -0,0 +1,3 @@
+:host {
+  height: 100%;
+}
diff --git a/src/app/features/registries/components/drafts/drafts.component.spec.ts b/src/app/features/registries/components/drafts/drafts.component.spec.ts
new file mode 100644
index 000000000..43a3cc2bb
--- /dev/null
+++ b/src/app/features/registries/components/drafts/drafts.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DraftsComponent } from './drafts.component';
+
+describe('DraftsComponent', () => {
+  let component: DraftsComponent;
+  let fixture: ComponentFixture<DraftsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DraftsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DraftsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/components/drafts/drafts.component.ts b/src/app/features/registries/components/drafts/drafts.component.ts
new file mode 100644
index 000000000..d99033fb4
--- /dev/null
+++ b/src/app/features/registries/components/drafts/drafts.component.ts
@@ -0,0 +1,102 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+
+import { tap } from 'rxjs';
+
+import { ChangeDetectionStrategy, Component, computed, effect, inject, Signal, signal } from '@angular/core';
+import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
+
+import { StepperComponent, SubHeaderComponent } from '@osf/shared/components';
+import { StepOption } from '@osf/shared/models';
+import { LoaderService } from '@osf/shared/services';
+
+import { defaultSteps } from '../../constants';
+import { FetchDraft, FetchSchemaBlocks, RegistriesSelectors } from '../../store';
+
+@Component({
+  selector: 'osf-drafts',
+  imports: [RouterOutlet, StepperComponent, SubHeaderComponent, TranslatePipe],
+  templateUrl: './drafts.component.html',
+  styleUrl: './drafts.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [TranslateService],
+})
+export class DraftsComponent {
+  private readonly router = inject(Router);
+  private readonly route = inject(ActivatedRoute);
+  private readonly loaderService = inject(LoaderService);
+  private readonly translateService = inject(TranslateService);
+
+  protected readonly pages = select(RegistriesSelectors.getPagesSchema);
+  protected readonly draftRegistration = select(RegistriesSelectors.getDraftRegistration);
+
+  private readonly actions = createDispatchMap({
+    getSchemaBlocks: FetchSchemaBlocks,
+    getDraftRegistration: FetchDraft,
+  });
+
+  get isReviewPage(): boolean {
+    return this.router.url.includes('/review');
+  }
+
+  defaultSteps: StepOption[] = defaultSteps.map((step) => ({
+    ...step,
+    label: this.translateService.instant(step.label),
+  }));
+
+  steps: Signal<StepOption[]> = computed(() => {
+    const customSteps = this.pages().map((page) => ({
+      label: page.title,
+      value: page.id,
+    }));
+    return [this.defaultSteps[0], ...customSteps, this.defaultSteps[1]];
+  });
+
+  currentStep = signal(
+    this.route.snapshot.children[0]?.params['step'] ? +this.route.snapshot.children[0]?.params['step'].split('-')[0] : 0
+  );
+
+  registrationId = this.route.snapshot.children[0]?.params['id'] || '';
+
+  constructor() {
+    this.loaderService.show();
+    if (!this.draftRegistration()) {
+      this.actions.getDraftRegistration(this.registrationId);
+    }
+    effect(() => {
+      const registrationSchemaId = this.draftRegistration()?.registrationSchemaId;
+      if (registrationSchemaId) {
+        this.actions
+          .getSchemaBlocks(registrationSchemaId || '')
+          .pipe(
+            tap(() => {
+              this.loaderService.hide();
+            })
+          )
+          .subscribe();
+      }
+    });
+
+    effect(() => {
+      const reviewStepNumber = this.pages().length + 1;
+      if (this.isReviewPage) {
+        this.currentStep.set(reviewStepNumber);
+      }
+    });
+  }
+
+  stepChange(step: number): void {
+    // [NM] TODO: before navigating, validate the current step
+    this.currentStep.set(step);
+    const pageStep = this.steps()[step];
+
+    let pageLink = '';
+    if (!pageStep.value) {
+      pageLink = `${pageStep.routeLink}`;
+    } else {
+      pageLink = `${step}-${pageStep.value}`;
+    }
+    this.router.navigate([`/registries/drafts/${this.registrationId}/`, pageLink]);
+  }
+}
diff --git a/src/app/features/registries/components/metadata/contributors/contributors.component.html b/src/app/features/registries/components/metadata/contributors/contributors.component.html
new file mode 100644
index 000000000..256af9e13
--- /dev/null
+++ b/src/app/features/registries/components/metadata/contributors/contributors.component.html
@@ -0,0 +1,25 @@
+<p-card class="w-full">
+  <h2 class="mb-2">{{ 'project.overview.metadata.contributors' | translate }}</h2>
+  <osf-contributors-list
+    (focusout)="onFocusOut()"
+    class="w-full"
+    [contributors]="contributors()"
+    [isLoading]="isContributorsLoading()"
+    (remove)="removeContributor($event)"
+    (showEducationHistory)="openEducationHistory($event)"
+    (showEmploymentHistory)="openEmploymentHistory($event)"
+  ></osf-contributors-list>
+  <div class="flex justify-content-end mt-3">
+    @if (hasChanges) {
+      <div class="flex gap-2 mr-4">
+        <p-button (click)="cancel()" text severity="info" [label]="'common.buttons.cancel' | translate"> </p-button>
+        <p-button (click)="save()" [label]="'common.buttons.save' | translate"> </p-button>
+      </div>
+    }
+    <p-button
+      [label]="'registries.metadata.addContributors' | translate"
+      type="submit"
+      (click)="openAddContributorDialog()"
+    ></p-button>
+  </div>
+</p-card>
diff --git a/src/app/features/registries/components/metadata/contributors/contributors.component.scss b/src/app/features/registries/components/metadata/contributors/contributors.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/registries/components/metadata/contributors/contributors.component.spec.ts b/src/app/features/registries/components/metadata/contributors/contributors.component.spec.ts
new file mode 100644
index 000000000..fb45f2cde
--- /dev/null
+++ b/src/app/features/registries/components/metadata/contributors/contributors.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContributorsComponent } from './contributors.component';
+
+describe('ContributorsComponent', () => {
+  let component: ContributorsComponent;
+  let fixture: ComponentFixture<ContributorsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ContributorsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ContributorsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/components/metadata/contributors/contributors.component.ts b/src/app/features/registries/components/metadata/contributors/contributors.component.ts
new file mode 100644
index 000000000..916180a12
--- /dev/null
+++ b/src/app/features/registries/components/metadata/contributors/contributors.component.ts
@@ -0,0 +1,212 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { Card } from 'primeng/card';
+import { DialogService } from 'primeng/dynamicdialog';
+import { TableModule } from 'primeng/table';
+
+import { filter, forkJoin, map, of } from 'rxjs';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, OnInit, signal } from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+
+import {
+  AddContributor,
+  DeleteContributor,
+  FetchContributors,
+  RegistriesSelectors,
+  UpdateContributor,
+} from '@osf/features/registries/store';
+import { EducationHistoryDialogComponent, EmploymentHistoryDialogComponent } from '@osf/shared/components';
+import {
+  AddContributorDialogComponent,
+  AddUnregisteredContributorDialogComponent,
+  ContributorsListComponent,
+} from '@osf/shared/components/contributors';
+import { BIBLIOGRAPHY_OPTIONS, PERMISSION_OPTIONS } from '@osf/shared/components/contributors/constants';
+import { AddContributorType, ContributorPermission } from '@osf/shared/components/contributors/enums';
+import { ContributorDialogAddModel, ContributorModel } from '@osf/shared/components/contributors/models';
+import { ContributorsSelectors } from '@osf/shared/components/contributors/store';
+import { SelectOption } from '@osf/shared/models';
+import { CustomConfirmationService, ToastService } from '@osf/shared/services';
+import { findChangedItems } from '@osf/shared/utils';
+
+@Component({
+  selector: 'osf-contributors',
+  imports: [FormsModule, TableModule, ContributorsListComponent, TranslatePipe, Card, Button],
+  templateUrl: './contributors.component.html',
+  styleUrl: './contributors.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [DialogService],
+})
+export class ContributorsComponent implements OnInit {
+  readonly destroyRef = inject(DestroyRef);
+  readonly translateService = inject(TranslateService);
+  readonly dialogService = inject(DialogService);
+  readonly toastService = inject(ToastService);
+  readonly customConfirmationService = inject(CustomConfirmationService);
+
+  private readonly route = inject(ActivatedRoute);
+  private readonly draftId = toSignal(this.route.params.pipe(map((params) => params['id'])) ?? of(undefined));
+
+  protected readonly selectedPermission = signal<ContributorPermission | null>(null);
+  protected readonly selectedBibliography = signal<boolean | null>(null);
+  protected readonly permissionsOptions: SelectOption[] = PERMISSION_OPTIONS;
+  protected readonly bibliographyOptions: SelectOption[] = BIBLIOGRAPHY_OPTIONS;
+
+  protected initialContributors = select(RegistriesSelectors.getContributors);
+  protected contributors = signal([]);
+
+  protected readonly isContributorsLoading = select(ContributorsSelectors.isContributorsLoading);
+
+  protected actions = createDispatchMap({
+    getContributors: FetchContributors,
+    deleteContributor: DeleteContributor,
+    updateContributor: UpdateContributor,
+    addContributor: AddContributor,
+  });
+
+  get hasChanges(): boolean {
+    return JSON.stringify(this.initialContributors()) !== JSON.stringify(this.contributors());
+  }
+
+  constructor() {
+    effect(() => {
+      this.contributors.set(JSON.parse(JSON.stringify(this.initialContributors())));
+    });
+  }
+
+  ngOnInit(): void {
+    const draftId = this.draftId();
+    if (draftId) {
+      this.actions.getContributors(draftId);
+    }
+  }
+
+  onFocusOut() {
+    // [NM] TODO: make request to update contributor if changed
+    console.log('Focus out event:', 'Changed:', this.hasChanges);
+  }
+
+  cancel() {
+    this.contributors.set(JSON.parse(JSON.stringify(this.initialContributors())));
+  }
+
+  save() {
+    const updatedContributors = findChangedItems(this.initialContributors(), this.contributors(), 'id');
+
+    const updateRequests = updatedContributors.map((payload) =>
+      this.actions.updateContributor(this.draftId(), payload)
+    );
+
+    forkJoin(updateRequests).subscribe(() => {
+      this.toastService.showSuccess('project.contributors.toastMessages.multipleUpdateSuccessMessage');
+    });
+  }
+
+  openEmploymentHistory(contributor: ContributorModel) {
+    this.dialogService.open(EmploymentHistoryDialogComponent, {
+      width: '552px',
+      data: contributor.employment,
+      focusOnShow: false,
+      header: this.translateService.instant('project.contributors.table.headers.employment'),
+      closeOnEscape: true,
+      modal: true,
+      closable: true,
+    });
+  }
+
+  openEducationHistory(contributor: ContributorModel) {
+    this.dialogService.open(EducationHistoryDialogComponent, {
+      width: '552px',
+      data: contributor.education,
+      focusOnShow: false,
+      header: this.translateService.instant('project.contributors.table.headers.education'),
+      closeOnEscape: true,
+      modal: true,
+      closable: true,
+    });
+  }
+
+  openAddContributorDialog() {
+    const addedContributorIds = this.initialContributors().map((x) => x.userId);
+
+    this.dialogService
+      .open(AddContributorDialogComponent, {
+        width: '448px',
+        data: addedContributorIds,
+        focusOnShow: false,
+        header: this.translateService.instant('project.contributors.addDialog.addRegisteredContributor'),
+        closeOnEscape: true,
+        modal: true,
+        closable: true,
+      })
+      .onClose.pipe(
+        filter((res: ContributorDialogAddModel) => !!res),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe((res: ContributorDialogAddModel) => {
+        if (res.type === AddContributorType.Unregistered) {
+          this.openAddUnregisteredContributorDialog();
+        } else {
+          const addRequests = res.data.map((payload) => this.actions.addContributor(this.draftId(), payload));
+
+          forkJoin(addRequests).subscribe(() => {
+            this.toastService.showSuccess('project.contributors.toastMessages.multipleAddSuccessMessage');
+          });
+        }
+      });
+  }
+
+  openAddUnregisteredContributorDialog() {
+    this.dialogService
+      .open(AddUnregisteredContributorDialogComponent, {
+        width: '448px',
+        focusOnShow: false,
+        header: this.translateService.instant('project.contributors.addDialog.addUnregisteredContributor'),
+        closeOnEscape: true,
+        modal: true,
+        closable: true,
+      })
+      .onClose.pipe(
+        filter((res: ContributorDialogAddModel) => !!res),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe((res: ContributorDialogAddModel) => {
+        if (res.type === AddContributorType.Registered) {
+          this.openAddContributorDialog();
+        } else {
+          const successMessage = this.translateService.instant('project.contributors.toastMessages.addSuccessMessage');
+          const params = { name: res.data[0].fullName };
+
+          this.actions.addContributor(this.draftId(), res.data[0]).subscribe({
+            next: () => this.toastService.showSuccess(successMessage, params),
+          });
+        }
+      });
+  }
+
+  removeContributor(contributor: ContributorModel) {
+    this.customConfirmationService.confirmDelete({
+      headerKey: 'project.contributors.removeDialog.title',
+      messageKey: 'project.contributors.removeDialog.message',
+      messageParams: { name: contributor.fullName },
+      acceptLabelKey: 'common.buttons.remove',
+      onConfirm: () => {
+        this.actions
+          .deleteContributor(this.draftId(), contributor.userId)
+          .pipe(takeUntilDestroyed(this.destroyRef))
+          .subscribe({
+            next: () =>
+              this.toastService.showSuccess('project.contributors.removeDialog.successMessage', {
+                name: contributor.fullName,
+              }),
+          });
+      },
+    });
+  }
+}
diff --git a/src/app/features/registries/components/metadata/metadata.component.html b/src/app/features/registries/components/metadata/metadata.component.html
new file mode 100644
index 000000000..5c44bd71e
--- /dev/null
+++ b/src/app/features/registries/components/metadata/metadata.component.html
@@ -0,0 +1,37 @@
+<section class="flex flex-column bg-white flex-1 h-full p-5 gap-4 w-full">
+  <section>
+    <h2 class="mb-2">{{ 'registries.metadata.title' | translate }}</h2>
+    <p class="mb-4">{{ 'registries.metadata.description' | translate }}</p>
+    <p-card class="w-full">
+      <form [formGroup]="metadataForm" (ngSubmit)="submitMetadata()" class="flex flex-column gap-4">
+        <osf-text-input
+          label="common.labels.title"
+          [control]="metadataForm.controls['title']"
+          [maxLength]="inputLimits.fullName.maxLength"
+        >
+        </osf-text-input>
+        <div>
+          <label for="project-description-id">{{ 'common.labels.description' | translate }}</label>
+          <textarea
+            id="project-description-id"
+            formControlName="description"
+            class="w-full"
+            rows="5"
+            cols="30"
+            pTextarea
+          ></textarea>
+        </div>
+        <div class="flex justify-content-end"></div>
+      </form>
+    </p-card>
+  </section>
+  <osf-contributors></osf-contributors>
+  <osf-registries-license></osf-registries-license>
+  <osf-registries-subjects></osf-registries-subjects>
+  <osf-registries-tags></osf-registries-tags>
+  <div class="flex justify-content-end">
+    <p-button [label]="'registries.deleteDraft' | translate" severity="danger" (click)="deleteDraft()" class="mr-2">
+    </p-button>
+    <p-button [label]="'common.buttons.next' | translate" type="submit" [disabled]="metadataForm.invalid"></p-button>
+  </div>
+</section>
diff --git a/src/app/features/registries/components/metadata/metadata.component.scss b/src/app/features/registries/components/metadata/metadata.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/registries/components/metadata/metadata.component.spec.ts b/src/app/features/registries/components/metadata/metadata.component.spec.ts
new file mode 100644
index 000000000..311ac4e9f
--- /dev/null
+++ b/src/app/features/registries/components/metadata/metadata.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MetadataComponent } from './metadata.component';
+
+describe('MetadataComponent', () => {
+  let component: MetadataComponent;
+  let fixture: ComponentFixture<MetadataComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MetadataComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MetadataComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/components/metadata/metadata.component.ts b/src/app/features/registries/components/metadata/metadata.component.ts
new file mode 100644
index 000000000..d7b289ec1
--- /dev/null
+++ b/src/app/features/registries/components/metadata/metadata.component.ts
@@ -0,0 +1,92 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { Card } from 'primeng/card';
+import { TextareaModule } from 'primeng/textarea';
+
+import { ChangeDetectionStrategy, Component, effect, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { TextInputComponent } from '@osf/shared/components';
+import { InputLimits } from '@osf/shared/constants';
+import { CustomConfirmationService, ToastService } from '@osf/shared/services';
+import { CustomValidators } from '@osf/shared/utils';
+
+import { DeleteDraft, RegistriesSelectors } from '../../store';
+
+import { ContributorsComponent } from './contributors/contributors.component';
+import { RegistriesLicenseComponent } from './registries-license/registries-license.component';
+import { RegistriesSubjectsComponent } from './registries-subjects/registries-subjects.component';
+import { RegistriesTagsComponent } from './registries-tags/registries-tags.component';
+
+@Component({
+  selector: 'osf-metadata',
+  imports: [
+    Card,
+    TextInputComponent,
+    ReactiveFormsModule,
+    Button,
+    TranslatePipe,
+    TextareaModule,
+    ContributorsComponent,
+    RegistriesSubjectsComponent,
+    RegistriesTagsComponent,
+    RegistriesLicenseComponent,
+  ],
+  templateUrl: './metadata.component.html',
+  styleUrl: './metadata.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MetadataComponent {
+  private readonly fb = inject(FormBuilder);
+  private readonly toastService = inject(ToastService);
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly customConfirmationService = inject(CustomConfirmationService);
+
+  private readonly draftId = this.route.snapshot.params['id'];
+  protected readonly draftRegistration = select(RegistriesSelectors.getDraftRegistration);
+
+  protected actions = createDispatchMap({
+    deleteDraft: DeleteDraft,
+  });
+  protected inputLimits = InputLimits;
+
+  metadataForm = this.fb.group({
+    title: ['', CustomValidators.requiredTrimmed()],
+    description: ['', CustomValidators.requiredTrimmed()],
+  });
+
+  constructor() {
+    effect(() => {
+      const draft = this.draftRegistration();
+      if (draft) {
+        this.metadataForm.patchValue({
+          title: draft.title,
+          description: draft.description,
+        });
+      }
+    });
+  }
+
+  submitMetadata(): void {
+    console.log('Metadata submitted');
+  }
+
+  deleteDraft(): void {
+    this.customConfirmationService.confirmDelete({
+      headerKey: 'registries.deleteDraft',
+      messageKey: 'registries.confirmDeleteDraft',
+      onConfirm: () => {
+        this.actions.deleteDraft(this.draftId).subscribe({
+          next: () => {
+            this.router.navigateByUrl('/registries/new');
+          },
+        });
+      },
+    });
+  }
+}
diff --git a/src/app/features/registries/components/metadata/registries-license/registries-license.component.html b/src/app/features/registries/components/metadata/registries-license/registries-license.component.html
new file mode 100644
index 000000000..cc5f9c25a
--- /dev/null
+++ b/src/app/features/registries/components/metadata/registries-license/registries-license.component.html
@@ -0,0 +1,47 @@
+<p-card class="w-full">
+  <h2 class="mb-2">{{ 'shared.license.title' | translate }}</h2>
+  <p class="mb-1">
+    {{ 'shared.license.description' | translate }}
+  </p>
+  <p>
+    {{ 'shared.license.helpText' | translate }}
+    <a href="https://help.osf.io/article/148-licensing">{{ 'common.links.helpGuide' | translate }}</a
+    >.
+  </p>
+  <p-select
+    [options]="licenses()"
+    [(ngModel)]="selectedLicense"
+    optionLabel="name"
+    (onChange)="onSelectLicense($event.value)"
+    class="w-6 mt-4"
+  />
+  @if (selectedLicense) {
+    <p-divider styleClass="mt-3 mb-3" />
+    @if (selectedLicense.requiredFields.length) {
+      <form [formGroup]="licenseForm" class="flex gap-3 mb-3 w-full">
+        <div class="w-6">
+          <label for="licenseYear"> {{ 'common.labels.year' | translate }} </label>
+          <p-datepicker
+            id="licenseYear"
+            formControlName="year"
+            [maxDate]="currentYear"
+            dataType="string"
+            view="year"
+            dateFormat="yy"
+          />
+        </div>
+        <osf-text-input
+          class="w-6"
+          label="shared.license.copyrightHolders"
+          [control]="licenseForm.controls['copyrightHolders']"
+          [maxLength]="inputLimits.fullName.maxLength"
+        >
+        </osf-text-input>
+      </form>
+    }
+
+    <p class="highlight-block">
+      <osf-truncated-text [text]="selectedLicense.text | interpolate: licenseForm.value" />
+    </p>
+  }
+</p-card>
diff --git a/src/app/features/registries/components/metadata/registries-license/registries-license.component.scss b/src/app/features/registries/components/metadata/registries-license/registries-license.component.scss
new file mode 100644
index 000000000..7f863186d
--- /dev/null
+++ b/src/app/features/registries/components/metadata/registries-license/registries-license.component.scss
@@ -0,0 +1,4 @@
+.highlight-block {
+  padding: 0.5rem;
+  background-color: var(--bg-blue-2);
+}
diff --git a/src/app/features/registries/components/metadata/registries-license/registries-license.component.spec.ts b/src/app/features/registries/components/metadata/registries-license/registries-license.component.spec.ts
new file mode 100644
index 000000000..b4f491478
--- /dev/null
+++ b/src/app/features/registries/components/metadata/registries-license/registries-license.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegistriesLicenseComponent } from './registries-license.component';
+
+describe('LicenseComponent', () => {
+  let component: RegistriesLicenseComponent;
+  let fixture: ComponentFixture<RegistriesLicenseComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RegistriesLicenseComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RegistriesLicenseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/components/metadata/registries-license/registries-license.component.ts b/src/app/features/registries/components/metadata/registries-license/registries-license.component.ts
new file mode 100644
index 000000000..d81e74502
--- /dev/null
+++ b/src/app/features/registries/components/metadata/registries-license/registries-license.component.ts
@@ -0,0 +1,63 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Card } from 'primeng/card';
+import { DatePicker } from 'primeng/datepicker';
+import { Divider } from 'primeng/divider';
+import { Select } from 'primeng/select';
+
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+
+import { License } from '@osf/features/registries/models';
+import { FetchLicenses, RegistriesSelectors } from '@osf/features/registries/store';
+import { TextInputComponent, TruncatedTextComponent } from '@osf/shared/components';
+import { InputLimits } from '@osf/shared/constants';
+import { InterpolatePipe } from '@osf/shared/pipes';
+import { CustomValidators } from '@osf/shared/utils';
+
+@Component({
+  selector: 'osf-registries-license',
+  imports: [
+    Card,
+    TranslatePipe,
+    Select,
+    FormsModule,
+    Divider,
+    TruncatedTextComponent,
+    DatePicker,
+    TextInputComponent,
+    InterpolatePipe,
+    ReactiveFormsModule,
+  ],
+  templateUrl: './registries-license.component.html',
+  styleUrl: './registries-license.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RegistriesLicenseComponent {
+  private readonly route = inject(ActivatedRoute);
+  private readonly draftId = this.route.snapshot.params['id'];
+  private readonly fb = inject(FormBuilder);
+
+  protected actions = createDispatchMap({ fetchLicenses: FetchLicenses });
+  protected licenses = select(RegistriesSelectors.getLicenses);
+  protected inputLimits = InputLimits;
+
+  selectedLicense: License | null = null;
+  currentYear = new Date();
+  licenseYear = this.currentYear;
+  licenseForm = this.fb.group({
+    year: [this.currentYear.getFullYear().toString(), CustomValidators.requiredTrimmed()],
+    copyrightHolders: ['', CustomValidators.requiredTrimmed()],
+  });
+
+  constructor() {
+    this.actions.fetchLicenses();
+  }
+
+  onSelectLicense(license: License): void {
+    console.log('Selected License:', license);
+  }
+}
diff --git a/src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.html b/src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.html
new file mode 100644
index 000000000..1e83c52cd
--- /dev/null
+++ b/src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.html
@@ -0,0 +1,10 @@
+<osf-subjects
+  [loading]="subjectsLoading() || isSubjectsUpdating()"
+  [isSearching]="isSearching()"
+  [list]="subjects()"
+  [selected]="selectedSubjects()"
+  [searchedSubjects]="searchedSubjects()"
+  (loadChildren)="getSubjectChildren($event)"
+  (searchChanged)="searchSubjects($event)"
+  (updateSelection)="updateSelectedSubjects($event)"
+></osf-subjects>
diff --git a/src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.scss b/src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.spec.ts b/src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.spec.ts
new file mode 100644
index 000000000..c6b0b212d
--- /dev/null
+++ b/src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegistriesSubjectsComponent } from './registries-subjects.component';
+
+describe('RegistriesSubjectsComponent', () => {
+  let component: RegistriesSubjectsComponent;
+  let fixture: ComponentFixture<RegistriesSubjectsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RegistriesSubjectsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RegistriesSubjectsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.ts b/src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.ts
new file mode 100644
index 000000000..719f8e668
--- /dev/null
+++ b/src/app/features/registries/components/metadata/registries-subjects/registries-subjects.component.ts
@@ -0,0 +1,57 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import {
+  FetchRegistrationSubjects,
+  RegistriesSelectors,
+  UpdateRegistrationSubjects,
+} from '@osf/features/registries/store';
+import { SubjectsComponent } from '@osf/shared/components';
+import { Subject } from '@osf/shared/models';
+import { FetchChildrenSubjects, FetchSubjects } from '@osf/shared/stores';
+import { SubjectsSelectors } from '@osf/shared/stores/subjects/subjects.selectors';
+
+@Component({
+  selector: 'osf-registries-subjects',
+  imports: [SubjectsComponent],
+  templateUrl: './registries-subjects.component.html',
+  styleUrl: './registries-subjects.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RegistriesSubjectsComponent {
+  private readonly route = inject(ActivatedRoute);
+  private readonly draftId = this.route.snapshot.params['id'];
+
+  protected subjects = select(SubjectsSelectors.getSubjects);
+  protected subjectsLoading = select(SubjectsSelectors.getSubjectsLoading);
+  protected searchedSubjects = select(SubjectsSelectors.getSearchedSubjects);
+  protected isSearching = select(SubjectsSelectors.getSearchedSubjectsLoading);
+  protected selectedSubjects = select(RegistriesSelectors.getSelectedSubjects);
+  protected isSubjectsUpdating = select(RegistriesSelectors.isSubjectsUpdating);
+
+  protected actions = createDispatchMap({
+    fetchSubjects: FetchSubjects,
+    fetchRegistrationSubjects: FetchRegistrationSubjects,
+    fetchChildrenSubjects: FetchChildrenSubjects,
+    updateRegistrationSubjects: UpdateRegistrationSubjects,
+  });
+
+  constructor() {
+    this.actions.fetchSubjects();
+    this.actions.fetchRegistrationSubjects(this.draftId);
+  }
+
+  getSubjectChildren(parentId: string) {
+    this.actions.fetchChildrenSubjects(parentId);
+  }
+
+  searchSubjects(search: string) {
+    this.actions.fetchSubjects(search);
+  }
+
+  updateSelectedSubjects(subjects: Subject[]) {
+    this.actions.updateRegistrationSubjects(this.draftId, subjects);
+  }
+}
diff --git a/src/app/features/registries/components/metadata/registries-tags/registries-tags.component.html b/src/app/features/registries/components/metadata/registries-tags/registries-tags.component.html
new file mode 100644
index 000000000..2d8798d8a
--- /dev/null
+++ b/src/app/features/registries/components/metadata/registries-tags/registries-tags.component.html
@@ -0,0 +1,7 @@
+<p-card>
+  <div class="flex flex-column gap-3">
+    <h2>{{ 'project.overview.metadata.tags' | translate }}</h2>
+
+    <osf-tags-input (tagsChanged)="onTagsChanged($event)" [tags]="[]"></osf-tags-input>
+  </div>
+</p-card>
diff --git a/src/app/features/registries/components/metadata/registries-tags/registries-tags.component.scss b/src/app/features/registries/components/metadata/registries-tags/registries-tags.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/registries/components/metadata/registries-tags/registries-tags.component.spec.ts b/src/app/features/registries/components/metadata/registries-tags/registries-tags.component.spec.ts
new file mode 100644
index 000000000..3ec731631
--- /dev/null
+++ b/src/app/features/registries/components/metadata/registries-tags/registries-tags.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegistriesTagsComponent } from './registries-tags.component';
+
+describe('TagsComponent', () => {
+  let component: RegistriesTagsComponent;
+  let fixture: ComponentFixture<RegistriesTagsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RegistriesTagsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RegistriesTagsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/components/metadata/registries-tags/registries-tags.component.ts b/src/app/features/registries/components/metadata/registries-tags/registries-tags.component.ts
new file mode 100644
index 000000000..bc0ca52f9
--- /dev/null
+++ b/src/app/features/registries/components/metadata/registries-tags/registries-tags.component.ts
@@ -0,0 +1,20 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Card } from 'primeng/card';
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+import { TagsInputComponent } from '@osf/shared/components';
+
+@Component({
+  selector: 'osf-registries-tags',
+  imports: [Card, TagsInputComponent, TranslatePipe],
+  templateUrl: './registries-tags.component.html',
+  styleUrl: './registries-tags.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RegistriesTagsComponent {
+  onTagsChanged(tags: string[]): void {
+    console.log('Tags changed:', tags);
+  }
+}
diff --git a/src/app/features/registries/components/new-registration/new-registration.component.html b/src/app/features/registries/components/new-registration/new-registration.component.html
new file mode 100644
index 000000000..d9b7ce6ef
--- /dev/null
+++ b/src/app/features/registries/components/new-registration/new-registration.component.html
@@ -0,0 +1,73 @@
+<osf-sub-header [title]="'registries.new.addNewRegistry' | translate" />
+<section class="flex flex-column lg:flex-row bg-white flex-1 h-full p-5 gap-4 w-full">
+  <p>
+    {{ 'registries.new.infoText1' | translate }}
+    <a href="https://help.osf.io/"> {{ 'common.links.clickHere' | translate }}</a>
+    {{ 'registries.new.infoText2' | translate }}
+  </p>
+</section>
+<section class="flex flex-column bg-white flex-1 h-full p-5 gap-4 w-full">
+  <p-card class="w-full">
+    <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + '1' }}</h2>
+    <p class="mb-4 text-lg font-bold">{{ 'registries.new.steps.step1' | translate }}</p>
+    <div class="flex gap-2">
+      <p-button
+        class="btn-full-width w-2 font-bold"
+        severity="info"
+        [label]="'common.buttons.yes' | translate"
+        [raised]="fromProject"
+        (click)="toggleFromProject()"
+      />
+      <p-button
+        class="btn-full-width w-2"
+        severity="info"
+        [label]="'common.buttons.no' | translate"
+        [raised]="!fromProject"
+        (click)="toggleFromProject()"
+      />
+    </div>
+  </p-card>
+  <form [formGroup]="draftForm" (ngSubmit)="createDraft()" class="flex flex-column gap-4">
+    @if (fromProject) {
+      <p-card class="w-full">
+        <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + '2' }}</h2>
+        <p class="mb-3 text-lg font-bold">{{ 'registries.new.steps.step2' | translate }}</p>
+        <p class="mb-4">{{ 'registries.new.steps.step2InfoText' | translate }}</p>
+        <div class="flex">
+          <p-select
+            formControlName="project"
+            [options]="projects()"
+            [placeholder]="'registries.new.selectProject' | translate"
+            optionLabel="title"
+            optionValue="id"
+            (onChange)="onSelectProject($event.value)"
+            class="w-6"
+          />
+        </div>
+      </p-card>
+    }
+    <p-card class="w-full">
+      <h2 class="mb-4">{{ ('registries.new.steps.title' | translate) + (fromProject ? '3' : '2') }}</h2>
+      <p class="mb-4 text-lg font-bold">{{ 'registries.new.steps.step3' | translate }}</p>
+      <div class="flex">
+        <p-select
+          formControlName="provider"
+          [options]="providers()"
+          optionLabel="name"
+          optionValue="id"
+          [loading]="isProvidersLoading()"
+          (onChange)="onSelectProvider($event.value)"
+          class="w-6"
+        />
+      </div>
+    </p-card>
+    <div class="flex justify-content-end">
+      <p-button
+        [label]="'registries.new.createDraft' | translate"
+        [disabled]="draftForm.invalid"
+        type="submit"
+        [loading]="isDraftSubmitting()"
+      />
+    </div>
+  </form>
+</section>
diff --git a/src/app/features/registries/components/new-registration/new-registration.component.scss b/src/app/features/registries/components/new-registration/new-registration.component.scss
new file mode 100644
index 000000000..da0c027b5
--- /dev/null
+++ b/src/app/features/registries/components/new-registration/new-registration.component.scss
@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
diff --git a/src/app/features/registries/components/new-registration/new-registration.component.spec.ts b/src/app/features/registries/components/new-registration/new-registration.component.spec.ts
new file mode 100644
index 000000000..b6c711a95
--- /dev/null
+++ b/src/app/features/registries/components/new-registration/new-registration.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewRegistrationComponent } from './new-registration.component';
+
+describe('NewRegistrationComponent', () => {
+  let component: NewRegistrationComponent;
+  let fixture: ComponentFixture<NewRegistrationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NewRegistrationComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NewRegistrationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/components/new-registration/new-registration.component.ts b/src/app/features/registries/components/new-registration/new-registration.component.ts
new file mode 100644
index 000000000..de7fbc31a
--- /dev/null
+++ b/src/app/features/registries/components/new-registration/new-registration.component.ts
@@ -0,0 +1,90 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { Card } from 'primeng/card';
+import { Select } from 'primeng/select';
+
+import { ChangeDetectionStrategy, Component, effect, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+
+import { SubHeaderComponent } from '@osf/shared/components';
+import { ToastService } from '@osf/shared/services';
+
+import { CreateDraft, GetProjects, GetProviders, RegistriesSelectors } from '../../store';
+
+@Component({
+  selector: 'osf-new-registration',
+  imports: [SubHeaderComponent, TranslatePipe, Card, Button, ReactiveFormsModule, Select],
+  templateUrl: './new-registration.component.html',
+  styleUrl: './new-registration.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NewRegistrationComponent {
+  private readonly fb = inject(FormBuilder);
+  private readonly toastService = inject(ToastService);
+  private readonly router = inject(Router);
+  protected readonly projects = select(RegistriesSelectors.getProjects);
+  protected readonly providers = select(RegistriesSelectors.getProviders);
+  protected readonly isDraftSubmitting = select(RegistriesSelectors.isDraftSubmitting);
+  protected readonly draftRegistration = select(RegistriesSelectors.getDraftRegistration);
+  protected readonly isProvidersLoading = select(RegistriesSelectors.isProvidersLoading);
+  protected actions = createDispatchMap({
+    getProjects: GetProjects,
+    getProviders: GetProviders,
+    createDraft: CreateDraft,
+  });
+  fromProject = false;
+
+  draftForm = this.fb.group({
+    provider: ['', Validators.required],
+    project: [''],
+  });
+
+  constructor() {
+    this.actions.getProjects();
+    this.actions.getProviders();
+    effect(() => {
+      const provider = this.draftForm.get('provider')?.value;
+      if (!provider) {
+        this.draftForm.get('provider')?.setValue(this.providers()[0]?.id);
+      }
+    });
+  }
+
+  onSelectProject(projectId: string) {
+    this.draftForm.patchValue({
+      project: projectId,
+    });
+  }
+
+  onSelectProvider(providerId: string) {
+    this.draftForm.patchValue({
+      provider: providerId,
+    });
+  }
+
+  toggleFromProject() {
+    this.fromProject = !this.fromProject;
+    this.draftForm.get('project')?.setValidators(this.fromProject ? Validators.required : null);
+    this.draftForm.get('project')?.updateValueAndValidity();
+  }
+
+  createDraft() {
+    const { provider, project } = this.draftForm.value;
+
+    if (this.draftForm.valid) {
+      this.actions
+        .createDraft({
+          registrationSchemaId: provider!,
+          projectId: this.fromProject ? (project ?? undefined) : undefined,
+        })
+        .subscribe(() => {
+          this.toastService.showSuccess('Draft created successfully');
+          this.router.navigate(['/registries/drafts/', this.draftRegistration()?.id, 'metadata']);
+        });
+    }
+  }
+}
diff --git a/src/app/features/registries/components/review/review.component.html b/src/app/features/registries/components/review/review.component.html
new file mode 100644
index 000000000..27a7cd2a1
--- /dev/null
+++ b/src/app/features/registries/components/review/review.component.html
@@ -0,0 +1 @@
+<p>review works!</p>
diff --git a/src/app/features/registries/components/review/review.component.scss b/src/app/features/registries/components/review/review.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/registries/components/review/review.component.spec.ts b/src/app/features/registries/components/review/review.component.spec.ts
new file mode 100644
index 000000000..f555378f7
--- /dev/null
+++ b/src/app/features/registries/components/review/review.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReviewComponent } from './review.component';
+
+describe('ReviewComponent', () => {
+  let component: ReviewComponent;
+  let fixture: ComponentFixture<ReviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReviewComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ReviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/registries/components/review/review.component.ts b/src/app/features/registries/components/review/review.component.ts
new file mode 100644
index 000000000..e38cb2e4e
--- /dev/null
+++ b/src/app/features/registries/components/review/review.component.ts
@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'osf-review',
+  imports: [],
+  templateUrl: './review.component.html',
+  styleUrl: './review.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ReviewComponent {}
diff --git a/src/app/features/registries/constants/defaultSteps.ts b/src/app/features/registries/constants/defaultSteps.ts
new file mode 100644
index 000000000..ba7808628
--- /dev/null
+++ b/src/app/features/registries/constants/defaultSteps.ts
@@ -0,0 +1,14 @@
+import { StepOption } from '@osf/shared/models';
+
+export const defaultSteps: StepOption[] = [
+  {
+    label: 'navigation.project.metadata',
+    value: '',
+    routeLink: 'metadata',
+  },
+  {
+    label: 'registries.review.step',
+    value: '',
+    routeLink: 'review',
+  },
+];
diff --git a/src/app/features/registries/constants/index.ts b/src/app/features/registries/constants/index.ts
new file mode 100644
index 000000000..92e572c61
--- /dev/null
+++ b/src/app/features/registries/constants/index.ts
@@ -0,0 +1 @@
+export * from './defaultSteps';
diff --git a/src/app/features/registries/enums/block-type.enum.ts b/src/app/features/registries/enums/block-type.enum.ts
new file mode 100644
index 000000000..4240e5321
--- /dev/null
+++ b/src/app/features/registries/enums/block-type.enum.ts
@@ -0,0 +1,13 @@
+export enum BlockType {
+  PageHeading = 'page-heading',
+  SubsectionHeading = 'subsection-heading',
+  QuestionLabel = 'question-label',
+  LongTextInput = 'long-text-input',
+  Paragraph = 'paragraph',
+  SingleSelectInput = 'single-select-input',
+  SelectInputOption = 'select-input-option',
+  FileInput = 'file-input',
+  MultiSelectInput = 'multi-select-input',
+  ShortTextInput = 'short-text-input',
+  SectionHeading = 'section-heading',
+}
diff --git a/src/app/features/registries/enums/field-type.enum.ts b/src/app/features/registries/enums/field-type.enum.ts
new file mode 100644
index 000000000..114128096
--- /dev/null
+++ b/src/app/features/registries/enums/field-type.enum.ts
@@ -0,0 +1,8 @@
+export enum FieldType {
+  Text = 'text',
+  TextArea = 'textarea',
+  Select = 'select',
+  Checkbox = 'checkbox',
+  Radio = 'radio',
+  File = 'file',
+}
diff --git a/src/app/features/registries/enums/index.ts b/src/app/features/registries/enums/index.ts
new file mode 100644
index 000000000..609b32864
--- /dev/null
+++ b/src/app/features/registries/enums/index.ts
@@ -0,0 +1,2 @@
+export * from './block-type.enum';
+export * from './field-type.enum';
diff --git a/src/app/features/registries/mappers/index.ts b/src/app/features/registries/mappers/index.ts
new file mode 100644
index 000000000..013703b21
--- /dev/null
+++ b/src/app/features/registries/mappers/index.ts
@@ -0,0 +1,4 @@
+export * from './licenses.mapper';
+export * from './page-schema.mapper';
+export * from './projects.mapper';
+export * from './providers.mapper';
diff --git a/src/app/features/registries/mappers/licenses.mapper.ts b/src/app/features/registries/mappers/licenses.mapper.ts
new file mode 100644
index 000000000..9ad0a8290
--- /dev/null
+++ b/src/app/features/registries/mappers/licenses.mapper.ts
@@ -0,0 +1,13 @@
+import { License, LicensesResponseJsonApi } from '../models';
+
+export class LicensesMapper {
+  static fromLicensesResponse(response: LicensesResponseJsonApi): License[] {
+    return response.data.map((item) => ({
+      id: item.id,
+      name: item.attributes.name,
+      requiredFields: item.attributes.required_fields,
+      url: item.attributes.url,
+      text: item.attributes.text,
+    }));
+  }
+}
diff --git a/src/app/features/registries/mappers/page-schema.mapper.ts b/src/app/features/registries/mappers/page-schema.mapper.ts
new file mode 100644
index 000000000..6bfd884fa
--- /dev/null
+++ b/src/app/features/registries/mappers/page-schema.mapper.ts
@@ -0,0 +1,139 @@
+import { BlockType, FieldType } from '../enums';
+import { PageSchema, Question, Section } from '../models';
+import { SchemaBlocksResponseJsonApi } from '../models/schema-blocks-json-api.model';
+
+export class PageSchemaMapper {
+  static fromSchemaBlocksResponse(response: SchemaBlocksResponseJsonApi): PageSchema[] {
+    const pages: PageSchema[] = [];
+    let currentPage!: PageSchema;
+    let currentQuestion: Question | null = null;
+    let currentSection: Section | null = null;
+    response.data.map((item) => {
+      switch (item.attributes.block_type) {
+        case BlockType.PageHeading:
+          currentPage = {
+            id: item.id,
+            title: item.attributes.display_text,
+            questions: [],
+          };
+          currentQuestion = null;
+          currentSection = null;
+          pages.push(currentPage);
+          break;
+        case BlockType.SectionHeading:
+          if (currentPage) {
+            currentSection = {
+              id: item.id,
+              title: item.attributes.display_text,
+              questions: [],
+            };
+            currentPage.sections = currentPage.sections || [];
+            currentPage.sections.push(currentSection);
+            currentQuestion = null;
+          }
+          break;
+
+        case BlockType.Paragraph:
+          if (currentQuestion) {
+            currentQuestion.paragraphText = item.attributes.display_text;
+          } else if (currentSection) {
+            currentSection.description = item.attributes.display_text;
+          } else {
+            currentPage.description = item.attributes.display_text;
+          }
+          break;
+
+        case BlockType.SubsectionHeading:
+          currentQuestion = {
+            id: item.id,
+            displayText: item.attributes.display_text,
+            helpText: item.attributes.help_text,
+            exampleText: item.attributes.example_text,
+            required: item.attributes.required,
+            groupKey: item.attributes.schema_block_group_key,
+            responseKey: item.attributes.registration_response_key || undefined,
+          };
+          if (currentSection) {
+            currentSection.questions = currentSection.questions || [];
+            currentSection.questions.push(currentQuestion);
+          } else if (currentPage) {
+            currentPage.questions = currentPage.questions || [];
+            currentPage.questions.push(currentQuestion);
+          }
+          break;
+
+        case BlockType.QuestionLabel:
+          currentQuestion = {
+            id: item.id,
+            displayText: item.attributes.display_text,
+            helpText: item.attributes.help_text,
+            exampleText: item.attributes.example_text,
+            required: item.attributes.required,
+            groupKey: item.attributes.schema_block_group_key,
+            responseKey: item.attributes.registration_response_key || undefined,
+          };
+          if (currentSection) {
+            currentSection.questions = currentSection.questions || [];
+            currentSection.questions.push(currentQuestion);
+          } else if (currentPage) {
+            currentPage.questions = currentPage.questions || [];
+            currentPage.questions.push(currentQuestion);
+          }
+          break;
+
+        case BlockType.SingleSelectInput:
+          if (currentQuestion) {
+            currentQuestion.fieldType = FieldType.Radio;
+            currentQuestion.required = item.attributes.required;
+            currentQuestion.responseKey = item.attributes.registration_response_key || undefined;
+          }
+          break;
+
+        case BlockType.MultiSelectInput:
+          if (currentQuestion) {
+            currentQuestion.fieldType = FieldType.Checkbox;
+            currentQuestion.required = item.attributes.required;
+            currentQuestion.responseKey = item.attributes.registration_response_key || undefined;
+          }
+          break;
+
+        case BlockType.SelectInputOption:
+          if (currentQuestion) {
+            currentQuestion.options = currentQuestion?.options || [];
+            currentQuestion?.options.push({
+              label: item.attributes.display_text,
+              value: item.attributes.display_text,
+              helpText: item.attributes.help_text,
+            });
+          }
+          break;
+
+        case BlockType.LongTextInput:
+          if (currentQuestion) {
+            currentQuestion.fieldType = FieldType.TextArea;
+            currentQuestion.required = item.attributes.required;
+            currentQuestion.responseKey = item.attributes.registration_response_key || undefined;
+          }
+          break;
+        case BlockType.ShortTextInput:
+          if (currentQuestion) {
+            currentQuestion.fieldType = FieldType.Text;
+            currentQuestion.required = item.attributes.required;
+            currentQuestion.responseKey = item.attributes.registration_response_key || undefined;
+          }
+          break;
+
+        case BlockType.FileInput:
+          if (currentQuestion) {
+            currentQuestion.fieldType = FieldType.File;
+          }
+          break;
+        default:
+          console.warn(`Unexpected block type: ${item.attributes.block_type}`);
+          return;
+      }
+    });
+
+    return pages;
+  }
+}
diff --git a/src/app/features/registries/mappers/projects.mapper.ts b/src/app/features/registries/mappers/projects.mapper.ts
new file mode 100644
index 000000000..df0729851
--- /dev/null
+++ b/src/app/features/registries/mappers/projects.mapper.ts
@@ -0,0 +1,10 @@
+import { Project, ProjectsResponseJsonApi } from '../models';
+
+export class ProjectsMapper {
+  static fromProjectsResponse(response: ProjectsResponseJsonApi): Project[] {
+    return response.data.map((item) => ({
+      id: item.id,
+      title: item.attributes.title,
+    }));
+  }
+}
diff --git a/src/app/features/registries/mappers/providers.mapper.ts b/src/app/features/registries/mappers/providers.mapper.ts
new file mode 100644
index 000000000..9442ade0a
--- /dev/null
+++ b/src/app/features/registries/mappers/providers.mapper.ts
@@ -0,0 +1,10 @@
+import { Provider, ProvidersResponseJsonApi } from '../models';
+
+export class ProvidersMapper {
+  static fromProvidersResponse(response: ProvidersResponseJsonApi): Provider[] {
+    return response.data.map((item) => ({
+      id: item.id,
+      name: item.attributes.name,
+    }));
+  }
+}
diff --git a/src/app/features/registries/mappers/registration.mapper.ts b/src/app/features/registries/mappers/registration.mapper.ts
new file mode 100644
index 000000000..9ae2e1bd2
--- /dev/null
+++ b/src/app/features/registries/mappers/registration.mapper.ts
@@ -0,0 +1,13 @@
+import { RegistrationDataJsonApi } from '../models';
+import { Registration } from '../models/registration.model';
+
+export class RegistrationMapper {
+  static fromRegistrationResponse(response: RegistrationDataJsonApi): Registration {
+    return {
+      id: response.id,
+      title: response.attributes.title,
+      description: response.attributes.description,
+      registrationSchemaId: response.relationships.registration_schema?.data?.id || '',
+    };
+  }
+}
diff --git a/src/app/features/registries/models/index.ts b/src/app/features/registries/models/index.ts
new file mode 100644
index 000000000..69c4c8b7c
--- /dev/null
+++ b/src/app/features/registries/models/index.ts
@@ -0,0 +1,10 @@
+export * from './license.model';
+export * from './licenses-json-api.model';
+export * from './page-schema.model';
+export * from './project';
+export * from './projects-json-api.model';
+export * from './provider.model';
+export * from './providers-json-api.model';
+export * from './registration.model';
+export * from './registration-json-api.model';
+export * from './schema-blocks-json-api.model';
diff --git a/src/app/features/registries/models/license.model.ts b/src/app/features/registries/models/license.model.ts
new file mode 100644
index 000000000..c4a243a7f
--- /dev/null
+++ b/src/app/features/registries/models/license.model.ts
@@ -0,0 +1,7 @@
+export interface License {
+  id: string;
+  name: string;
+  requiredFields: string[];
+  url: string;
+  text: string;
+}
diff --git a/src/app/features/registries/models/licenses-json-api.model.ts b/src/app/features/registries/models/licenses-json-api.model.ts
new file mode 100644
index 000000000..32e8fc049
--- /dev/null
+++ b/src/app/features/registries/models/licenses-json-api.model.ts
@@ -0,0 +1,16 @@
+import { ApiData, MetaJsonApi, PaginationLinksJsonApi } from '@osf/core/models';
+
+export interface LicensesResponseJsonApi {
+  data: LicenseDataJsonApi[];
+  meta: MetaJsonApi;
+  links: PaginationLinksJsonApi;
+}
+
+export type LicenseDataJsonApi = ApiData<LicenseAttributesJsonApi, null, null, null>;
+
+interface LicenseAttributesJsonApi {
+  name: string;
+  required_fields: string[];
+  url: string;
+  text: string;
+}
diff --git a/src/app/features/registries/models/page-schema.model.ts b/src/app/features/registries/models/page-schema.model.ts
new file mode 100644
index 000000000..84ad1f13d
--- /dev/null
+++ b/src/app/features/registries/models/page-schema.model.ts
@@ -0,0 +1,35 @@
+import { FieldType } from '../enums';
+
+export interface PageSchema {
+  id: string;
+  title: string;
+  description?: string;
+  questions?: Question[];
+  sections?: Section[];
+}
+
+export interface Section {
+  id: string;
+  title: string;
+  description?: string;
+  questions?: Question[];
+}
+
+export interface Question {
+  id: string;
+  displayText: string;
+  exampleText?: string;
+  helpText?: string;
+  paragraphText?: string;
+  fieldType?: FieldType;
+  options?: QuestionOption[];
+  required: boolean;
+  groupKey?: string;
+  responseKey?: string;
+}
+
+export interface QuestionOption {
+  label: string;
+  value: string;
+  helpText?: string;
+}
diff --git a/src/app/features/registries/models/project.ts b/src/app/features/registries/models/project.ts
new file mode 100644
index 000000000..870a40589
--- /dev/null
+++ b/src/app/features/registries/models/project.ts
@@ -0,0 +1,4 @@
+export interface Project {
+  id: string;
+  title: string;
+}
diff --git a/src/app/features/registries/models/projects-json-api.model.ts b/src/app/features/registries/models/projects-json-api.model.ts
new file mode 100644
index 000000000..0ce2e620a
--- /dev/null
+++ b/src/app/features/registries/models/projects-json-api.model.ts
@@ -0,0 +1,13 @@
+import { ApiData, MetaJsonApi, PaginationLinksJsonApi } from '@osf/core/models';
+
+export interface ProjectsResponseJsonApi {
+  data: ProjectsDataJsonApi[];
+  meta: MetaJsonApi;
+  links: PaginationLinksJsonApi;
+}
+
+export type ProjectsDataJsonApi = ApiData<ProjectsAttributesJsonApi, null, null, null>;
+
+interface ProjectsAttributesJsonApi {
+  title: string;
+}
diff --git a/src/app/features/registries/models/provider.model.ts b/src/app/features/registries/models/provider.model.ts
new file mode 100644
index 000000000..aa49d5327
--- /dev/null
+++ b/src/app/features/registries/models/provider.model.ts
@@ -0,0 +1,4 @@
+export interface Provider {
+  id: string;
+  name: string;
+}
diff --git a/src/app/features/registries/models/providers-json-api.model.ts b/src/app/features/registries/models/providers-json-api.model.ts
new file mode 100644
index 000000000..1b69240ff
--- /dev/null
+++ b/src/app/features/registries/models/providers-json-api.model.ts
@@ -0,0 +1,13 @@
+import { ApiData, MetaJsonApi, PaginationLinksJsonApi } from '@osf/core/models';
+
+export interface ProvidersResponseJsonApi {
+  data: ProviderDataJsonApi[];
+  meta: MetaJsonApi;
+  links: PaginationLinksJsonApi;
+}
+
+export type ProviderDataJsonApi = ApiData<ProviderAttributesJsonApi, null, null, null>;
+
+interface ProviderAttributesJsonApi {
+  name: string;
+}
diff --git a/src/app/features/registries/models/registration-json-api.model.ts b/src/app/features/registries/models/registration-json-api.model.ts
new file mode 100644
index 000000000..f581282e6
--- /dev/null
+++ b/src/app/features/registries/models/registration-json-api.model.ts
@@ -0,0 +1,37 @@
+import { ApiData, MetaJsonApi, PaginationLinksJsonApi } from '@osf/core/models';
+
+export interface RegistrationResponseJsonApi {
+  data: RegistrationDataJsonApi;
+  meta: MetaJsonApi;
+  links: PaginationLinksJsonApi;
+}
+
+export type RegistrationDataJsonApi = ApiData<
+  RegistrationAttributesJsonApi,
+  null,
+  RegistrationRelationshipsJsonApi,
+  null
+>;
+
+interface RegistrationAttributesJsonApi {
+  category: string;
+  current_user_permissions: string[];
+  date_created: string;
+  datetime_updated: string;
+  description: string;
+  has_project: boolean;
+  node_license: string | null;
+  registration_metadata: Record<string, unknown>;
+  registration_responses: Record<string, unknown>;
+  tags: string[];
+  title: string;
+}
+
+interface RegistrationRelationshipsJsonApi {
+  registration_schema: {
+    data: {
+      id: '58fd62fcda3e2400012ca5c1';
+      type: 'registration-schemas';
+    };
+  };
+}
diff --git a/src/app/features/registries/models/registration.model.ts b/src/app/features/registries/models/registration.model.ts
new file mode 100644
index 000000000..6a717fc94
--- /dev/null
+++ b/src/app/features/registries/models/registration.model.ts
@@ -0,0 +1,6 @@
+export interface Registration {
+  id: string;
+  title: string;
+  description: string;
+  registrationSchemaId: string;
+}
diff --git a/src/app/features/registries/models/schema-blocks-json-api.model.ts b/src/app/features/registries/models/schema-blocks-json-api.model.ts
new file mode 100644
index 000000000..796eab5d1
--- /dev/null
+++ b/src/app/features/registries/models/schema-blocks-json-api.model.ts
@@ -0,0 +1,22 @@
+import { ApiData, MetaJsonApi, PaginationLinksJsonApi } from '@osf/core/models';
+
+import { BlockType } from '../enums';
+
+export interface SchemaBlocksResponseJsonApi {
+  data: SchemaBlockJsonApi[];
+  meta: MetaJsonApi;
+  links: PaginationLinksJsonApi;
+}
+
+export type SchemaBlockJsonApi = ApiData<SchemaBlockAttributesJsonApi, null, null, null>;
+
+interface SchemaBlockAttributesJsonApi {
+  block_type: BlockType;
+  display_text: string;
+  example_text: string;
+  help_text: string;
+  index: number;
+  registration_response_key: string | null;
+  required: boolean;
+  schema_block_group_key: string;
+}
diff --git a/src/app/features/registries/pages/registries-landing/registries-landing.component.html b/src/app/features/registries/pages/registries-landing/registries-landing.component.html
index 475cedd14..506e40dcb 100644
--- a/src/app/features/registries/pages/registries-landing/registries-landing.component.html
+++ b/src/app/features/registries/pages/registries-landing/registries-landing.component.html
@@ -6,6 +6,7 @@
       [description]="'registries.description' | translate"
       [showButton]="true"
       [buttonLabel]="'registries.addRegistration' | translate"
+      (buttonClick)="goToCreateRegistration()"
     />
 
     <osf-search-input
diff --git a/src/app/features/registries/pages/registries-landing/registries-landing.component.ts b/src/app/features/registries/pages/registries-landing/registries-landing.component.ts
index 5cfefc8d5..aafc5fe65 100644
--- a/src/app/features/registries/pages/registries-landing/registries-landing.component.ts
+++ b/src/app/features/registries/pages/registries-landing/registries-landing.component.ts
@@ -62,4 +62,8 @@ export class RegistriesLandingComponent implements OnInit {
       queryParams: { resourceTab: ResourceTab.Registrations },
     });
   }
+
+  goToCreateRegistration(): void {
+    this.router.navigate(['/registries/new']);
+  }
 }
diff --git a/src/app/features/registries/registries.component.scss b/src/app/features/registries/registries.component.scss
index e69de29bb..da0c027b5 100644
--- a/src/app/features/registries/registries.component.scss
+++ b/src/app/features/registries/registries.component.scss
@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
diff --git a/src/app/features/registries/registries.routes.ts b/src/app/features/registries/registries.routes.ts
index 54383975c..c21f128e8 100644
--- a/src/app/features/registries/registries.routes.ts
+++ b/src/app/features/registries/registries.routes.ts
@@ -4,14 +4,25 @@ import { Routes } from '@angular/router';
 
 import { RegistriesComponent } from '@osf/features/registries/registries.component';
 import { RegistriesState } from '@osf/features/registries/store';
+import { ContributorsState } from '@osf/shared/components/contributors/store';
+import { SubjectsState } from '@osf/shared/stores';
+import { SUBJECTS_SERVICE } from '@osf/shared/tokens/subjects.token';
 
 import { ModerationState } from '../moderation/store';
 
+import { RegistrationSubjectsService } from './services';
+
 export const registriesRoutes: Routes = [
   {
     path: '',
     component: RegistriesComponent,
-    providers: [provideStates([RegistriesState])],
+    providers: [
+      provideStates([RegistriesState, ContributorsState, SubjectsState]),
+      {
+        provide: SUBJECTS_SERVICE,
+        useClass: RegistrationSubjectsService,
+      },
+    ],
     children: [
       {
         path: '',
@@ -30,6 +41,33 @@ export const registriesRoutes: Routes = [
           ),
         providers: [provideStates([ModerationState])],
       },
+      {
+        path: 'new',
+        loadComponent: () =>
+          import('./components/new-registration/new-registration.component').then(
+            (mod) => mod.NewRegistrationComponent
+          ),
+      },
+      {
+        path: 'drafts',
+        loadComponent: () => import('./components/drafts/drafts.component').then((mod) => mod.DraftsComponent),
+        children: [
+          {
+            path: ':id/metadata',
+            loadComponent: () =>
+              import('./components/metadata/metadata.component').then((mod) => mod.MetadataComponent),
+          },
+          {
+            path: ':id/review',
+            loadComponent: () => import('./components/review/review.component').then((mod) => mod.ReviewComponent),
+          },
+          {
+            path: ':id/:step',
+            loadComponent: () =>
+              import('./components/custom-step/custom-step.component').then((mod) => mod.CustomStepComponent),
+          },
+        ],
+      },
     ],
   },
 ];
diff --git a/src/app/features/registries/services/index.ts b/src/app/features/registries/services/index.ts
new file mode 100644
index 000000000..99fc8de16
--- /dev/null
+++ b/src/app/features/registries/services/index.ts
@@ -0,0 +1,5 @@
+export * from './licenses.service';
+export * from './projects.service';
+export * from './providers.service';
+export * from './registration-subjects.service';
+export * from './registries.service';
diff --git a/src/app/features/registries/services/licenses.service.ts b/src/app/features/registries/services/licenses.service.ts
new file mode 100644
index 000000000..8879ed1c7
--- /dev/null
+++ b/src/app/features/registries/services/licenses.service.ts
@@ -0,0 +1,52 @@
+import { map, Observable } from 'rxjs';
+
+import { inject, Injectable } from '@angular/core';
+
+import { JsonApiService } from '@osf/core/services';
+
+import { LicensesMapper } from '../mappers';
+import { License, LicensesResponseJsonApi } from '../models';
+
+import { environment } from 'src/environments/environment';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const data: any = {
+  data: [
+    {
+      id: '58fd62fdda3e2400012ca5d9',
+      type: 'licenses',
+      attributes: {
+        name: 'MIT License',
+        text: 'The MIT License (MIT)\n\nCopyright (c) {{year}} {{copyrightHolders}}\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the "Software"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n',
+        url: 'http://opensource.org/licenses/MIT',
+        required_fields: ['year', 'copyrightHolders'],
+      },
+      links: {
+        self: 'https://api.test.osf.io/v2/licenses/58fd62fdda3e2400012ca5d9/',
+      },
+    },
+  ],
+};
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LicensesService {
+  private apiUrl = environment.apiUrl;
+  private readonly jsonApiService = inject(JsonApiService);
+
+  getLicenses(): Observable<License[]> {
+    return this.jsonApiService
+      .get<LicensesResponseJsonApi>(`${this.apiUrl}/providers/registrations/osf/licenses/`, {
+        params: {
+          'page[size]': 100,
+        },
+      })
+      .pipe(
+        map((licenses) => {
+          licenses.data.unshift(data.data[0]); // For testing purposes, remove in production
+          return LicensesMapper.fromLicensesResponse(licenses);
+        })
+      );
+  }
+}
diff --git a/src/app/features/registries/services/projects.service.ts b/src/app/features/registries/services/projects.service.ts
new file mode 100644
index 000000000..414e5e497
--- /dev/null
+++ b/src/app/features/registries/services/projects.service.ts
@@ -0,0 +1,28 @@
+import { map, Observable } from 'rxjs';
+
+import { inject, Injectable } from '@angular/core';
+
+import { JsonApiService } from '@osf/core/services';
+
+import { ProjectsMapper } from '../mappers/projects.mapper';
+import { Project } from '../models';
+import { ProjectsResponseJsonApi } from '../models/projects-json-api.model';
+
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ProjectsService {
+  private apiUrl = environment.apiUrl;
+  private readonly jsonApiService = inject(JsonApiService);
+
+  getProjects(): Observable<Project[]> {
+    const params: Record<string, unknown> = {
+      'filter[current_user_permissions]': 'admin',
+    };
+    return this.jsonApiService
+      .get<ProjectsResponseJsonApi>(`${this.apiUrl}/users/me/nodes/`, params)
+      .pipe(map((response) => ProjectsMapper.fromProjectsResponse(response)));
+  }
+}
diff --git a/src/app/features/registries/services/providers.service.ts b/src/app/features/registries/services/providers.service.ts
new file mode 100644
index 000000000..721234bd8
--- /dev/null
+++ b/src/app/features/registries/services/providers.service.ts
@@ -0,0 +1,25 @@
+import { map, Observable } from 'rxjs';
+
+import { inject, Injectable } from '@angular/core';
+
+import { JsonApiService } from '@osf/core/services';
+
+import { ProvidersMapper } from '../mappers/providers.mapper';
+import { Provider } from '../models';
+import { ProvidersResponseJsonApi } from '../models/providers-json-api.model';
+
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ProvidersService {
+  private apiUrl = environment.apiUrl;
+  private readonly jsonApiService = inject(JsonApiService);
+
+  getProviders(): Observable<Provider[]> {
+    return this.jsonApiService
+      .get<ProvidersResponseJsonApi>(`${this.apiUrl}/providers/registrations/osf/schemas/`)
+      .pipe(map((response) => ProvidersMapper.fromProvidersResponse(response)));
+  }
+}
diff --git a/src/app/features/registries/services/registration-subjects.service.ts b/src/app/features/registries/services/registration-subjects.service.ts
new file mode 100644
index 000000000..7f6f4f618
--- /dev/null
+++ b/src/app/features/registries/services/registration-subjects.service.ts
@@ -0,0 +1,73 @@
+import { map, Observable } from 'rxjs';
+
+import { inject, Injectable } from '@angular/core';
+
+import { JsonApiService } from '@osf/core/services';
+import { SubjectMapper } from '@osf/shared/mappers';
+import { ISubjectsService, Subject, SubjectsResponseJsonApi } from '@osf/shared/models';
+
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class RegistrationSubjectsService implements ISubjectsService {
+  private apiUrl = environment.apiUrl;
+  private readonly jsonApiService = inject(JsonApiService);
+
+  getSubjects(search?: string): Observable<Subject[]> {
+    const params: Record<string, string> = {
+      'page[size]': '100',
+      sort: 'text',
+      related_counts: 'children',
+      'filter[parent]': 'null',
+    };
+    if (search) {
+      delete params['filter[parent]'];
+      params['filter[text]'] = search;
+      params['embed'] = 'parent';
+    }
+    return this.jsonApiService
+      .get<SubjectsResponseJsonApi>(`${this.apiUrl}/providers/registrations/osf/subjects/`, params)
+      .pipe(
+        map((response) => {
+          return SubjectMapper.fromSubjectsResponseJsonApi(response);
+        })
+      );
+  }
+
+  getChildrenSubjects(parentId: string): Observable<Subject[]> {
+    const params: Record<string, string> = {
+      'page[size]': '100',
+      page: '1',
+      sort: 'text',
+      related_counts: 'children',
+    };
+
+    return this.jsonApiService
+      .get<SubjectsResponseJsonApi>(`${this.apiUrl}/subjects/${parentId}/children/`, params)
+      .pipe(
+        map((response) => {
+          return SubjectMapper.fromSubjectsResponseJsonApi(response);
+        })
+      );
+  }
+
+  getRegistrationSubjects(draftId: string): Observable<Subject[]> {
+    return this.jsonApiService
+      .get<SubjectsResponseJsonApi>(`${this.apiUrl}/draft_registrations/${draftId}/subjects/`)
+      .pipe(
+        map((response) => {
+          return SubjectMapper.fromSubjectsResponseJsonApi(response);
+        })
+      );
+  }
+
+  updateRegistrationSubjects(draftId: string, subjects: Subject[]): Observable<void> {
+    const payload = {
+      data: subjects.map((item) => ({ id: item.id, type: 'subjects' })),
+    };
+
+    return this.jsonApiService.put(`${this.apiUrl}/draft_registrations/${draftId}/relationships/subjects/`, payload);
+  }
+}
diff --git a/src/app/features/registries/services/registries.service.ts b/src/app/features/registries/services/registries.service.ts
new file mode 100644
index 000000000..5a89f9e4c
--- /dev/null
+++ b/src/app/features/registries/services/registries.service.ts
@@ -0,0 +1,115 @@
+import { map, Observable } from 'rxjs';
+
+import { inject, Injectable } from '@angular/core';
+
+import { JsonApiResponse } from '@osf/core/models';
+import { JsonApiService } from '@osf/core/services';
+import { AddContributorType } from '@osf/shared/components/contributors/enums';
+import { ContributorsMapper } from '@osf/shared/components/contributors/mappers';
+import { ContributorAddModel, ContributorModel, ContributorResponse } from '@osf/shared/components/contributors/models';
+
+import { PageSchemaMapper } from '../mappers';
+import { RegistrationMapper } from '../mappers/registration.mapper';
+import {
+  PageSchema,
+  Registration,
+  RegistrationDataJsonApi,
+  RegistrationResponseJsonApi,
+  SchemaBlocksResponseJsonApi,
+} from '../models';
+
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class RegistriesService {
+  private apiUrl = environment.apiUrl;
+  private readonly jsonApiService = inject(JsonApiService);
+
+  createDraft(registrationSchemaId: string, projectId?: string | undefined): Observable<Registration> {
+    const payload = {
+      data: {
+        type: 'draft_registrations',
+        relationships: {
+          branched_from: projectId
+            ? {
+                data: {
+                  type: 'nodes',
+                  id: projectId,
+                },
+              }
+            : undefined,
+          registration_schema: {
+            data: {
+              type: 'registration-schemas',
+              id: registrationSchemaId,
+            },
+          },
+        },
+      },
+    };
+    return this.jsonApiService
+      .post<RegistrationDataJsonApi>(`${this.apiUrl}/draft_registrations/`, payload)
+      .pipe(map((response) => RegistrationMapper.fromRegistrationResponse(response)));
+  }
+
+  getDraft(draftId: string): Observable<Registration> {
+    return this.jsonApiService
+      .get<RegistrationResponseJsonApi>(`${this.apiUrl}/draft_registrations/${draftId}/`)
+      .pipe(map((response) => RegistrationMapper.fromRegistrationResponse(response.data)));
+  }
+
+  updateDraft(draftId: string, data: Registration): Observable<RegistrationDataJsonApi> {
+    const payload = {
+      data: {
+        id: draftId,
+        type: 'draft_registrations',
+        attributes: { ...data },
+        relationships: {},
+      },
+    };
+    return this.jsonApiService.patch(`${this.apiUrl}/draft_registrations/${draftId}/`, payload);
+  }
+
+  deleteDraft(draftId: string): Observable<void> {
+    return this.jsonApiService.delete(`${this.apiUrl}/draft_registrations/${draftId}/`);
+  }
+
+  getSchemaBlocks(registrationSchemaId: string): Observable<PageSchema[]> {
+    return this.jsonApiService
+      .get<SchemaBlocksResponseJsonApi>(`${this.apiUrl}/schemas/registrations/${registrationSchemaId}/schema_blocks/`)
+      .pipe(map((response) => PageSchemaMapper.fromSchemaBlocksResponse(response)));
+  }
+
+  getContributors(draftId: string): Observable<ContributorModel[]> {
+    return this.jsonApiService
+      .get<JsonApiResponse<ContributorResponse[], null>>(`${this.apiUrl}/draft_registrations/${draftId}/contributors/`)
+      .pipe(map((contributors) => ContributorsMapper.fromResponse(contributors.data)));
+  }
+
+  addContributor(draftId: string, data: ContributorAddModel): Observable<ContributorModel> {
+    const baseUrl = `${this.apiUrl}/draft_registrations/${draftId}/contributors/`;
+    const type = data.id ? AddContributorType.Registered : AddContributorType.Unregistered;
+
+    const contributorData = { data: ContributorsMapper.toContributorAddRequest(data, type) };
+
+    return this.jsonApiService
+      .post<ContributorResponse>(baseUrl, contributorData)
+      .pipe(map((contributor) => ContributorsMapper.fromContributorResponse(contributor)));
+  }
+
+  updateContributor(draftId: string, data: ContributorModel): Observable<ContributorModel> {
+    const baseUrl = `${environment.apiUrl}/draft_registrations/${draftId}/contributors/${data.userId}`;
+
+    const contributorData = { data: ContributorsMapper.toContributorAddRequest(data) };
+
+    return this.jsonApiService
+      .patch<ContributorResponse>(baseUrl, contributorData)
+      .pipe(map((contributor) => ContributorsMapper.fromContributorResponse(contributor)));
+  }
+
+  deleteContributor(draftId: string, contributorId: string): Observable<void> {
+    return this.jsonApiService.delete(`${this.apiUrl}/draft_registrations/${draftId}/contributors/${contributorId}`);
+  }
+}
diff --git a/src/app/features/registries/store/registries.actions.ts b/src/app/features/registries/store/registries.actions.ts
index 91edcdf7f..bc0e1579e 100644
--- a/src/app/features/registries/store/registries.actions.ts
+++ b/src/app/features/registries/store/registries.actions.ts
@@ -1,3 +1,84 @@
+import { ContributorAddModel, ContributorModel } from '@osf/shared/components/contributors/models';
+import { Subject } from '@osf/shared/models';
+
 export class GetRegistries {
   static readonly type = '[Registries] Get Registries';
 }
+
+export class GetProviders {
+  static readonly type = '[Registries]  Get Providers';
+}
+
+export class GetProjects {
+  static readonly type = '[Registries] Get Projects';
+}
+
+export class CreateDraft {
+  static readonly type = '[Registries]  Create Draft';
+  constructor(public payload: { registrationSchemaId: string; projectId?: string }) {}
+}
+
+export class FetchDraft {
+  static readonly type = '[Registries]  Fetch Draft';
+  constructor(public draftId: string) {}
+}
+
+export class DeleteDraft {
+  static readonly type = '[Registries]  Delete Draft';
+  constructor(public draftId: string) {}
+}
+
+export class FetchSchemaBlocks {
+  static readonly type = '[Registries] Fetch Schema Blocks';
+  constructor(public registrationSchemaId: string) {}
+}
+
+export class FetchContributors {
+  static readonly type = '[Registries] Fetch Contributors';
+
+  constructor(public draftId: string) {}
+}
+
+export class AddContributor {
+  static readonly type = '[Registries] Add Contributor';
+
+  constructor(
+    public draftId: string,
+    public contributor: ContributorAddModel
+  ) {}
+}
+
+export class UpdateContributor {
+  static readonly type = '[Registries] Update Contributor';
+
+  constructor(
+    public draftId: string,
+    public contributor: ContributorModel
+  ) {}
+}
+
+export class DeleteContributor {
+  static readonly type = '[Registries] Delete Contributor';
+
+  constructor(
+    public draftId: string,
+    public contributorId: string
+  ) {}
+}
+
+export class FetchLicenses {
+  static readonly type = '[Registries] Fetch Licenses';
+}
+
+export class FetchRegistrationSubjects {
+  static readonly type = '[Registries] Fetch Registration Subjects';
+  constructor(public registrationId: string) {}
+}
+
+export class UpdateRegistrationSubjects {
+  static readonly type = '[Registries] Update Registration Subject';
+  constructor(
+    public registrationId: string,
+    public subjects: Subject[]
+  ) {}
+}
diff --git a/src/app/features/registries/store/registries.model.ts b/src/app/features/registries/store/registries.model.ts
index 42de4eea6..2ce1f6202 100644
--- a/src/app/features/registries/store/registries.model.ts
+++ b/src/app/features/registries/store/registries.model.ts
@@ -1,5 +1,16 @@
-import { AsyncStateModel, Resource } from '@shared/models';
+import { ContributorModel } from '@osf/shared/components/contributors/models';
+import { AsyncStateModel, Resource, Subject } from '@shared/models';
+
+import { License, PageSchema, Project, Provider } from '../models';
+import { Registration } from '../models/registration.model';
 
 export interface RegistriesStateModel {
+  providers: AsyncStateModel<Provider[]>;
+  projects: AsyncStateModel<Project[]>;
+  draftRegistration: AsyncStateModel<Registration | null>;
+  contributorsList: AsyncStateModel<ContributorModel[]>;
   registries: AsyncStateModel<Resource[]>;
+  licenses: AsyncStateModel<License[]>;
+  registrationSubjects: AsyncStateModel<Subject[]>;
+  pagesSchema: AsyncStateModel<PageSchema[]>;
 }
diff --git a/src/app/features/registries/store/registries.selectors.ts b/src/app/features/registries/store/registries.selectors.ts
index 4a3812a4e..4ea91666a 100644
--- a/src/app/features/registries/store/registries.selectors.ts
+++ b/src/app/features/registries/store/registries.selectors.ts
@@ -1,10 +1,48 @@
 import { Selector } from '@ngxs/store';
 
-import { RegistriesStateModel } from '@osf/features/registries/store/registries.model';
-import { RegistriesState } from '@osf/features/registries/store/registries.state';
-import { Resource } from '@shared/models';
+import { Resource, Subject } from '@shared/models';
+
+import { License, PageSchema, Project, Provider, Registration } from '../models';
+
+import { RegistriesStateModel } from './registries.model';
+import { RegistriesState } from './registries.state';
 
 export class RegistriesSelectors {
+  @Selector([RegistriesState])
+  static getProviders(state: RegistriesStateModel): Provider[] {
+    return state.providers.data;
+  }
+
+  @Selector([RegistriesState])
+  static isProvidersLoading(state: RegistriesStateModel): boolean {
+    return state.providers.isLoading;
+  }
+
+  @Selector([RegistriesState])
+  static getProjects(state: RegistriesStateModel): Project[] {
+    return state.projects.data;
+  }
+
+  @Selector([RegistriesState])
+  static isDraftSubmitting(state: RegistriesStateModel): boolean {
+    return state.draftRegistration.isSubmitting ?? false;
+  }
+
+  @Selector([RegistriesState])
+  static getDraftRegistration(state: RegistriesStateModel): Registration | null {
+    return state.draftRegistration.data;
+  }
+
+  @Selector([RegistriesState])
+  static getRegistrationLoading(state: RegistriesStateModel): boolean {
+    return state.draftRegistration.isLoading || state.draftRegistration.isSubmitting || state.pagesSchema.isLoading;
+  }
+
+  @Selector([RegistriesState])
+  static getContributors(state: RegistriesStateModel) {
+    return state.contributorsList.data;
+  }
+
   @Selector([RegistriesState])
   static getRegistries(state: RegistriesStateModel): Resource[] {
     return state.registries.data;
@@ -14,4 +52,24 @@ export class RegistriesSelectors {
   static isRegistriesLoading(state: RegistriesStateModel): boolean {
     return state.registries.isLoading;
   }
+
+  @Selector([RegistriesState])
+  static getLicenses(state: RegistriesStateModel): License[] {
+    return state.licenses.data;
+  }
+
+  @Selector([RegistriesState])
+  static getPagesSchema(state: RegistriesStateModel): PageSchema[] {
+    return state.pagesSchema.data;
+  }
+
+  @Selector([RegistriesState])
+  static getSelectedSubjects(state: RegistriesStateModel): Subject[] {
+    return state.registrationSubjects.data;
+  }
+
+  @Selector([RegistriesState])
+  static isSubjectsUpdating(state: RegistriesStateModel): boolean {
+    return state.registrationSubjects.isLoading;
+  }
 }
diff --git a/src/app/features/registries/store/registries.state.ts b/src/app/features/registries/store/registries.state.ts
index f6b384660..9cf274cad 100644
--- a/src/app/features/registries/store/registries.state.ts
+++ b/src/app/features/registries/store/registries.state.ts
@@ -1,30 +1,97 @@
 import { Action, State, StateContext } from '@ngxs/store';
 
-import { tap, throwError } from 'rxjs';
-import { catchError } from 'rxjs/operators';
+import { throwError } from 'rxjs';
+import { catchError, tap } from 'rxjs/operators';
 
 import { inject, Injectable } from '@angular/core';
 
-import { ResourceTab } from '@shared/enums';
-import { SearchService } from '@shared/services';
-import { getResourceTypes } from '@shared/utils';
+import { ResourceTab } from '@osf/shared/enums';
+import { SearchService } from '@osf/shared/services';
+import { getResourceTypes } from '@osf/shared/utils';
 
-import { GetRegistries } from './registries.actions';
+import { Project } from '../models';
+import {
+  LicensesService,
+  ProjectsService,
+  ProvidersService,
+  RegistrationSubjectsService,
+  RegistriesService,
+} from '../services';
+
+import {
+  AddContributor,
+  CreateDraft,
+  DeleteContributor,
+  DeleteDraft,
+  FetchContributors,
+  FetchDraft,
+  FetchLicenses,
+  FetchRegistrationSubjects,
+  FetchSchemaBlocks,
+  GetProjects,
+  GetProviders,
+  GetRegistries,
+  UpdateContributor,
+  UpdateRegistrationSubjects,
+} from './registries.actions';
 import { RegistriesStateModel } from './registries.model';
 
-@Injectable()
+const DefaultState: RegistriesStateModel = {
+  providers: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
+  projects: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
+  draftRegistration: {
+    isLoading: false,
+    data: null,
+    isSubmitting: false,
+    error: null,
+  },
+  contributorsList: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
+  registries: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
+  licenses: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
+  registrationSubjects: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
+  pagesSchema: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
+};
+
 @State<RegistriesStateModel>({
   name: 'registries',
-  defaults: {
-    registries: {
-      data: [],
-      isLoading: false,
-      error: null,
-    },
-  },
+  defaults: { ...DefaultState },
 })
+@Injectable()
 export class RegistriesState {
   searchService = inject(SearchService);
+  providersService = inject(ProvidersService);
+  projectsService = inject(ProjectsService);
+  registriesService = inject(RegistriesService);
+  licensesService = inject(LicensesService);
+  subjectsService = inject(RegistrationSubjectsService);
 
   @Action(GetRegistries)
   getRegistries(ctx: StateContext<RegistriesStateModel>) {
@@ -52,7 +119,332 @@ export class RegistriesState {
     );
   }
 
-  private handleError(ctx: StateContext<RegistriesStateModel>, section: 'registries', error: Error) {
+  @Action(GetProjects)
+  getProjects({ patchState }: StateContext<RegistriesStateModel>) {
+    patchState({
+      projects: {
+        ...DefaultState.projects,
+        isLoading: true,
+      },
+    });
+    return this.projectsService.getProjects().subscribe({
+      next: (projects: Project[]) => {
+        patchState({
+          projects: {
+            data: projects,
+            isLoading: false,
+            error: null,
+          },
+        });
+      },
+      error: (error) => {
+        patchState({
+          projects: { ...DefaultState.projects, isLoading: false, error },
+        });
+      },
+    });
+  }
+
+  @Action(GetProviders)
+  getProviders({ patchState }: StateContext<RegistriesStateModel>) {
+    patchState({
+      providers: {
+        ...DefaultState.providers,
+        isLoading: true,
+      },
+    });
+    return this.providersService.getProviders().subscribe({
+      next: (providers) => {
+        patchState({
+          providers: {
+            data: providers,
+            isLoading: false,
+            error: null,
+          },
+        });
+      },
+      error: (error) => {
+        patchState({
+          providers: {
+            ...DefaultState.providers,
+            isLoading: false,
+            error,
+          },
+        });
+      },
+    });
+  }
+
+  @Action(CreateDraft)
+  createDraft(ctx: StateContext<RegistriesStateModel>, { payload }: CreateDraft) {
+    ctx.patchState({
+      draftRegistration: {
+        ...ctx.getState().draftRegistration,
+        isSubmitting: true,
+      },
+    });
+
+    return this.registriesService.createDraft(payload.registrationSchemaId, payload.projectId).pipe(
+      tap((registration) => {
+        ctx.patchState({
+          draftRegistration: {
+            data: { ...registration },
+            isLoading: false,
+            isSubmitting: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => {
+        ctx.patchState({
+          draftRegistration: {
+            ...ctx.getState().draftRegistration,
+            isSubmitting: false,
+            error: error.message,
+          },
+        });
+        return this.handleError(ctx, 'draftRegistration', error);
+      })
+    );
+  }
+
+  @Action(FetchDraft)
+  fetchDraft(ctx: StateContext<RegistriesStateModel>, { draftId }: FetchDraft) {
+    ctx.patchState({
+      draftRegistration: {
+        ...ctx.getState().draftRegistration,
+        isLoading: true,
+        error: null,
+      },
+    });
+
+    return this.registriesService.getDraft(draftId).pipe(
+      tap((draft) => {
+        ctx.patchState({
+          draftRegistration: {
+            data: { ...draft },
+            isLoading: false,
+            isSubmitting: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'draftRegistration', error))
+    );
+  }
+
+  @Action(DeleteDraft)
+  deleteDraft(ctx: StateContext<RegistriesStateModel>, { draftId }: DeleteDraft) {
+    ctx.patchState({
+      draftRegistration: {
+        ...ctx.getState().draftRegistration,
+        isSubmitting: true,
+      },
+    });
+
+    return this.registriesService.deleteDraft(draftId).pipe(
+      tap(() => {
+        ctx.patchState({
+          draftRegistration: {
+            ...ctx.getState().draftRegistration,
+            isSubmitting: false,
+            data: null,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'draftRegistration', error))
+    );
+  }
+
+  @Action(FetchSchemaBlocks)
+  fetchSchemaBlocks(ctx: StateContext<RegistriesStateModel>, action: FetchSchemaBlocks) {
+    const state = ctx.getState();
+    ctx.patchState({
+      pagesSchema: { ...state.pagesSchema, isLoading: true, error: null },
+    });
+    return this.registriesService.getSchemaBlocks(action.registrationSchemaId).pipe(
+      tap((schemaBlocks) => {
+        ctx.patchState({
+          pagesSchema: {
+            data: schemaBlocks,
+            isLoading: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'pagesSchema', error))
+    );
+  }
+
+  @Action(FetchContributors)
+  fetchContributors(ctx: StateContext<RegistriesStateModel>, action: FetchContributors) {
+    const state = ctx.getState();
+
+    ctx.patchState({
+      contributorsList: { ...state.contributorsList, isLoading: true, error: null },
+    });
+
+    return this.registriesService.getContributors(action.draftId).pipe(
+      tap((contributors) => {
+        ctx.patchState({
+          contributorsList: {
+            ...state.contributorsList,
+            data: contributors,
+            isLoading: false,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'contributorsList', error))
+    );
+  }
+
+  @Action(AddContributor)
+  addContributor(ctx: StateContext<RegistriesStateModel>, action: AddContributor) {
+    const state = ctx.getState();
+
+    ctx.patchState({
+      contributorsList: { ...state.contributorsList, isLoading: true, error: null },
+    });
+
+    return this.registriesService.addContributor(action.draftId, action.contributor).pipe(
+      tap((contributor) => {
+        const currentState = ctx.getState();
+
+        ctx.patchState({
+          contributorsList: {
+            ...currentState.contributorsList,
+            data: [...currentState.contributorsList.data, contributor],
+            isLoading: false,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'contributorsList', error))
+    );
+  }
+
+  @Action(UpdateContributor)
+  updateContributor(ctx: StateContext<RegistriesStateModel>, action: UpdateContributor) {
+    const state = ctx.getState();
+
+    ctx.patchState({
+      contributorsList: { ...state.contributorsList, isLoading: true, error: null },
+    });
+
+    return this.registriesService.updateContributor(action.draftId, action.contributor).pipe(
+      tap((updatedContributor) => {
+        const currentState = ctx.getState();
+
+        ctx.patchState({
+          contributorsList: {
+            ...currentState.contributorsList,
+            data: currentState.contributorsList.data.map((contributor) =>
+              contributor.id === updatedContributor.id ? updatedContributor : contributor
+            ),
+            isLoading: false,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'contributorsList', error))
+    );
+  }
+
+  @Action(DeleteContributor)
+  deleteContributor(ctx: StateContext<RegistriesStateModel>, action: DeleteContributor) {
+    const state = ctx.getState();
+
+    ctx.patchState({
+      contributorsList: { ...state.contributorsList, isLoading: true, error: null },
+    });
+
+    return this.registriesService.deleteContributor(action.draftId, action.contributorId).pipe(
+      tap(() => {
+        ctx.patchState({
+          contributorsList: {
+            ...state.contributorsList,
+            data: state.contributorsList.data.filter((contributor) => contributor.userId !== action.contributorId),
+            isLoading: false,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'contributorsList', error))
+    );
+  }
+
+  @Action(FetchLicenses)
+  fetchLicenses(ctx: StateContext<RegistriesStateModel>) {
+    ctx.patchState({
+      licenses: {
+        ...ctx.getState().licenses,
+        isLoading: true,
+      },
+    });
+
+    return this.licensesService.getLicenses().pipe(
+      tap((licenses) => {
+        ctx.patchState({
+          licenses: {
+            data: licenses,
+            isLoading: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'licenses', error))
+    );
+  }
+
+  @Action(FetchRegistrationSubjects)
+  fetchRegistrationSubjects(ctx: StateContext<RegistriesStateModel>, { registrationId }: FetchRegistrationSubjects) {
+    ctx.patchState({
+      registrationSubjects: {
+        ...ctx.getState().registrationSubjects,
+        isLoading: true,
+        error: null,
+      },
+    });
+
+    return this.subjectsService.getRegistrationSubjects(registrationId).pipe(
+      tap((subjects) => {
+        ctx.patchState({
+          registrationSubjects: {
+            data: subjects,
+            isLoading: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'registrationSubjects', error))
+    );
+  }
+
+  @Action(UpdateRegistrationSubjects)
+  updateRegistrationSubjects(
+    ctx: StateContext<RegistriesStateModel>,
+    { registrationId, subjects }: UpdateRegistrationSubjects
+  ) {
+    ctx.patchState({
+      registrationSubjects: {
+        ...ctx.getState().registrationSubjects,
+        isLoading: true,
+        error: null,
+      },
+    });
+    return this.subjectsService.updateRegistrationSubjects(registrationId, subjects).pipe(
+      tap(() => {
+        ctx.patchState({
+          registrationSubjects: {
+            data: subjects,
+            isLoading: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'registrationSubjects', error))
+    );
+  }
+
+  private handleError(ctx: StateContext<RegistriesStateModel>, section: keyof RegistriesStateModel, error: Error) {
     ctx.patchState({
       [section]: {
         ...ctx.getState()[section],
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index 4609a2226..5d97044c1 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -25,6 +25,7 @@ export { SearchInputComponent } from './search-input/search-input.component';
 export { SelectComponent } from './select/select.component';
 export { StepperComponent } from './stepper/stepper.component';
 export { SubHeaderComponent } from './sub-header/sub-header.component';
+export { SubjectsComponent } from './subjects/subjects.component';
 export { TagsInputComponent } from './tags-input/tags-input.component';
 export { TextInputComponent } from './text-input/text-input.component';
 export { ToastComponent } from './toast/toast.component';
diff --git a/src/app/shared/components/stepper/stepper.component.html b/src/app/shared/components/stepper/stepper.component.html
index b647786b1..39c6c28c5 100644
--- a/src/app/shared/components/stepper/stepper.component.html
+++ b/src/app/shared/components/stepper/stepper.component.html
@@ -1,9 +1,19 @@
 <div class="stepper-container">
   <div class="stepper-circles-lines-row">
     @for (step of steps(); track step.value; let i = $index) {
-      <button class="step-circle" [class.active]="i <= this.currentStep()" (click)="onStepClick(i)">
+      <button
+        class="step-circle"
+        [class.active]="i <= this.currentStep()"
+        [class.invalid]="step.invalid"
+        [class.current]="i === this.currentStep()"
+        (click)="onStepClick(i)"
+      >
         @if (i < this.currentStep()) {
-          <osf-icon iconClass="fas fa-check" />
+          @if (step.invalid) {
+            <osf-icon iconClass="fas fa-exclamation" />
+          } @else {
+            <osf-icon iconClass="fas fa-check" />
+          }
         } @else {
           <span>{{ i + 1 }}</span>
         }
diff --git a/src/app/shared/components/stepper/stepper.component.scss b/src/app/shared/components/stepper/stepper.component.scss
index da4dd05f8..0b15c5149 100644
--- a/src/app/shared/components/stepper/stepper.component.scss
+++ b/src/app/shared/components/stepper/stepper.component.scss
@@ -29,6 +29,12 @@
         color: var(--stepper-active-step-color);
         border: 1px solid var(--stepper-active-step-border-color);
       }
+
+      &.invalid:not(.current) {
+        background: var(--stepper-invalid-step-background);
+        color: var(--stepper-invalid-step-color);
+        border: 1px solid var(--stepper-invalid-step-border-color);
+      }
     }
 
     .step-line {
diff --git a/src/app/shared/components/stepper/stepper.component.ts b/src/app/shared/components/stepper/stepper.component.ts
index 3f31b0923..4844d1243 100644
--- a/src/app/shared/components/stepper/stepper.component.ts
+++ b/src/app/shared/components/stepper/stepper.component.ts
@@ -2,9 +2,8 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
 
-import { Primitive } from '@core/helpers';
 import { IconComponent } from '@shared/components';
-import { CustomOption } from '@shared/models';
+import { StepOption } from '@shared/models';
 
 @Component({
   selector: 'osf-stepper',
@@ -14,7 +13,7 @@ import { CustomOption } from '@shared/models';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StepperComponent {
-  steps = input.required<CustomOption<Primitive>[]>();
+  steps = input.required<StepOption[]>();
   currentStep = model.required<number>();
   linear = input<boolean>(true);
 
diff --git a/src/app/shared/components/subjects/subjects.component.html b/src/app/shared/components/subjects/subjects.component.html
new file mode 100644
index 000000000..2ab6c967b
--- /dev/null
+++ b/src/app/shared/components/subjects/subjects.component.html
@@ -0,0 +1,61 @@
+<p-card class="w-full">
+  <h2 class="mb-2">{{ 'shared.subjects.title' | translate }}</h2>
+  <p-card class="block text-base mb-3">
+    @if (!selected().length) {
+      <p class="text-500">{{ 'shared.subjects.noSelected' | translate }}</p>
+    } @else {
+      @for (subject of selected(); track subject.id) {
+        <p-chip [label]="subject.name" [removable]="true" class="mb-2 mr-2" (onRemove)="removeSubject(subject)" />
+      }
+    }
+  </p-card>
+  <osf-search-input
+    class="w-full"
+    [control]="searchControl"
+    [placeholder]="'shared.subjects.searchSubjects' | translate"
+  />
+  @if (searchControl.value) {
+    <div class="mt-4 pl-3">
+      @if (isSearching()) {
+        <p-skeleton width="100%" class="flex mb-2" height="1rem" borderRadius="0" />
+        <p-skeleton width="100%" class="flex mb-2" height="1rem" borderRadius="0" />
+        <p-skeleton width="100%" class="flex mb-2" height="1rem" borderRadius="0" />
+        <p-skeleton width="100%" class="flex mb-2" height="1rem" borderRadius="0" />
+      } @else {
+        @if (!searchedList().length) {
+          <p class="text-500">{{ 'shared.subjects.noSubject' | translate }}</p>
+        }
+        @for (subjects of searchedList(); track $index) {
+          <div class="flex mb-2">
+            <p-checkbox
+              [inputId]="'subjects-' + $index"
+              [value]="subjects"
+              (onChange)="selectSearched($event, subjects)"
+            />
+            <label for="subjects-{{ $index }}" class="flex flex-wrap ml-2">
+              @for (item of subjects; track item.id) {
+                <span [class]="$last ? 'font-bold' : ''">{{ item.name }}</span>
+                @if (!$last) {
+                  <span class="mx-1">/</span>
+                }
+              }
+            </label>
+          </div>
+        }
+      }
+    </div>
+  } @else {
+    <p-tree
+      [value]="subjectsTree()"
+      selectionMode="checkbox"
+      [selection]="selectedTree()"
+      [lazy]="true"
+      [loading]="loading()"
+      (onNodeExpand)="loadNode($event.node)"
+      (onNodeCollapse)="collapseNode($event.node)"
+      (onNodeSelect)="selectSubject($event.node.data)"
+      (onNodeUnselect)="removeSubject($event.node.data)"
+    >
+    </p-tree>
+  }
+</p-card>
diff --git a/src/app/shared/components/subjects/subjects.component.scss b/src/app/shared/components/subjects/subjects.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/shared/components/subjects/subjects.component.spec.ts b/src/app/shared/components/subjects/subjects.component.spec.ts
new file mode 100644
index 000000000..ba5495891
--- /dev/null
+++ b/src/app/shared/components/subjects/subjects.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubjectsComponent } from './subjects.component';
+
+describe('SubjectsComponent', () => {
+  let component: SubjectsComponent;
+  let fixture: ComponentFixture<SubjectsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SubjectsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SubjectsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/components/subjects/subjects.component.ts b/src/app/shared/components/subjects/subjects.component.ts
new file mode 100644
index 000000000..d6fc72244
--- /dev/null
+++ b/src/app/shared/components/subjects/subjects.component.ts
@@ -0,0 +1,117 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { TreeNode } from 'primeng/api';
+import { Card } from 'primeng/card';
+import { Checkbox, CheckboxChangeEvent } from 'primeng/checkbox';
+import { Chip } from 'primeng/chip';
+import { Skeleton } from 'primeng/skeleton';
+import { Tree, TreeModule } from 'primeng/tree';
+
+import { debounceTime, distinctUntilChanged } from 'rxjs';
+
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+import { Subject } from '@osf/shared/models';
+
+import { SearchInputComponent } from '../search-input/search-input.component';
+
+@Component({
+  selector: 'osf-subjects',
+  imports: [Card, TranslatePipe, Chip, SearchInputComponent, Tree, TreeModule, Checkbox, Skeleton],
+  templateUrl: './subjects.component.html',
+  styleUrl: './subjects.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SubjectsComponent {
+  list = input<Subject[]>([]);
+  searchedSubjects = input<Subject[]>([]);
+  loading = input<boolean>(false);
+  isSearching = input<boolean>(false);
+  selected = input<Subject[]>([]);
+  searchChanged = output<string>();
+  loadChildren = output<string>();
+  updateSelection = output<Subject[]>();
+
+  subjectsTree = computed(() => this.list().map((subject: Subject) => this.mapSubjectToTreeNode(subject)));
+  selectedTree = computed(() => this.selected().map((subject: Subject) => this.mapSubjectToTreeNode(subject)));
+  searchedList = computed(() => this.searchedSubjects().map((subject: Subject) => this.mapParentsSubject(subject)));
+  expanded: Record<string, boolean> = {};
+
+  protected searchControl = new FormControl<string>('');
+
+  constructor() {
+    this.searchControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged()).subscribe((value) => {
+      this.searchChanged.emit(value ?? '');
+    });
+  }
+
+  loadNode(event: TreeNode) {
+    this.expanded[event.data.id] = true;
+    if (event.data.children?.length === 0) {
+      this.loadChildren.emit(event.data.id);
+    }
+  }
+
+  collapseNode(event: TreeNode) {
+    this.expanded[event.data.id] = false;
+  }
+
+  selectSubject(subject: Subject) {
+    const childrenIds = this.getChildrenIds([subject]);
+    const updatedSelection = [...this.selected().filter((s) => !childrenIds.includes(s.id)), subject];
+    const parentSubjects = this.mapParentsSubject(subject.parent).filter(
+      (p) => !updatedSelection.some((s) => s.id === p.id)
+    );
+    if (parentSubjects.length) {
+      updatedSelection.push(...parentSubjects);
+    }
+    this.updateSelection.emit(updatedSelection);
+  }
+
+  removeSubject(subject: Subject) {
+    const updatedSelection = this.selected().filter(
+      (s) => s.id !== subject.id && !this.getChildrenIds([subject]).includes(s.id)
+    );
+    this.updateSelection.emit(updatedSelection);
+  }
+
+  selectSearched(event: CheckboxChangeEvent, subjects: Subject[]) {
+    if (event.checked) {
+      this.updateSelection.emit([...this.selected(), ...subjects]);
+    } else {
+      const updatedSelection = this.selected().filter((s) => !subjects.some((sub) => sub.id === s.id));
+      this.updateSelection.emit(updatedSelection);
+    }
+  }
+
+  private getChildrenIds(subjects: Subject[]): string[] {
+    return subjects.reduce((acc: string[], subject: Subject) => {
+      acc.push(subject.id);
+      if (subject.children) {
+        acc.push(...this.getChildrenIds(subject.children));
+      }
+      return acc;
+    }, []);
+  }
+
+  private mapSubjectToTreeNode(subject: Subject): TreeNode {
+    return {
+      label: subject.name,
+      data: subject,
+      key: subject.id,
+      children: subject.children?.map((child: Subject) => this.mapSubjectToTreeNode(child)),
+      leaf: !subject.children,
+      expanded: this.expanded[subject.id] ?? false,
+    };
+  }
+
+  private mapParentsSubject(subject: Subject | null | undefined, acc: Subject[] = []): Subject[] {
+    if (!subject) {
+      return acc.reverse();
+    }
+
+    acc.push(subject);
+    return this.mapParentsSubject(subject.parent, acc);
+  }
+}
diff --git a/src/app/shared/mappers/subjects/subject-mapper.ts b/src/app/shared/mappers/subjects/subject-mapper.ts
index 7ce077037..7f1e653a3 100644
--- a/src/app/shared/mappers/subjects/subject-mapper.ts
+++ b/src/app/shared/mappers/subjects/subject-mapper.ts
@@ -1,4 +1,4 @@
-import { NodeSubjectModel, SubjectData } from '@shared/models';
+import { NodeSubjectModel, Subject, SubjectData, SubjectDataJsonApi, SubjectsResponseJsonApi } from '@shared/models';
 
 export class SubjectMapper {
   static mapSubjectsResponse(subjectData: SubjectData[]): NodeSubjectModel[] {
@@ -95,4 +95,30 @@ export class SubjectMapper {
 
     return sortSubjects(rootSubjects);
   }
+
+  static fromSubjectsResponseJsonApi(response: SubjectsResponseJsonApi): Subject[] {
+    return response.data.map((data) => {
+      const subject: Subject = {
+        id: data.id,
+        name: data.attributes.text,
+        children: data.relationships.children?.links.related.meta.count > 0 ? [] : undefined,
+        parent: data.embeds?.parent?.data ? this.setSubjectParent(data.embeds.parent.data) : null,
+      };
+
+      return subject;
+    });
+  }
+
+  private static setSubjectParent(data: SubjectDataJsonApi): Subject | null {
+    if (!data) {
+      return null;
+    }
+
+    return {
+      id: data.id,
+      name: data.attributes.text,
+      children: data.relationships?.children?.links?.related?.meta?.count > 0 ? [] : undefined,
+      parent: data.embeds?.parent?.data ? this.setSubjectParent(data.embeds.parent.data) : null,
+    };
+  }
 }
diff --git a/src/app/shared/models/index.ts b/src/app/shared/models/index.ts
index a41243b27..cd88da3a3 100644
--- a/src/app/shared/models/index.ts
+++ b/src/app/shared/models/index.ts
@@ -25,7 +25,9 @@ export * from './resource-card';
 export * from './select-option.model';
 export * from './severity.type';
 export * from './social-icon.model';
+export * from './step-option.model';
 export * from './store';
+export * from './subject';
 export * from './tab-option.model';
 export * from './table-parameters.model';
 export * from './tooltip-position.model';
diff --git a/src/app/shared/models/step-option.model.ts b/src/app/shared/models/step-option.model.ts
new file mode 100644
index 000000000..90c18cae2
--- /dev/null
+++ b/src/app/shared/models/step-option.model.ts
@@ -0,0 +1,6 @@
+export interface StepOption {
+  label: string;
+  value: number | string;
+  invalid?: boolean;
+  routeLink?: string;
+}
diff --git a/src/app/shared/models/subject/index.ts b/src/app/shared/models/subject/index.ts
new file mode 100644
index 000000000..98738025a
--- /dev/null
+++ b/src/app/shared/models/subject/index.ts
@@ -0,0 +1,3 @@
+export * from './subject.model';
+export * from './subject-service.model';
+export * from './subjects-json-api.model';
diff --git a/src/app/shared/models/subject/subject-service.model.ts b/src/app/shared/models/subject/subject-service.model.ts
new file mode 100644
index 000000000..b9b5ae941
--- /dev/null
+++ b/src/app/shared/models/subject/subject-service.model.ts
@@ -0,0 +1,8 @@
+import { Observable } from 'rxjs';
+
+import { Subject } from './subject.model';
+
+export interface ISubjectsService {
+  getSubjects(search?: string): Observable<Subject[]>;
+  getChildrenSubjects(parentId: string): Observable<Subject[]>;
+}
diff --git a/src/app/shared/models/subject/subject.model.ts b/src/app/shared/models/subject/subject.model.ts
new file mode 100644
index 000000000..83e715e5e
--- /dev/null
+++ b/src/app/shared/models/subject/subject.model.ts
@@ -0,0 +1,7 @@
+export interface Subject {
+  id: string;
+  name: string;
+  children?: Subject[];
+  parent?: Subject | null;
+  expanded?: boolean;
+}
diff --git a/src/app/shared/models/subject/subjects-json-api.model.ts b/src/app/shared/models/subject/subjects-json-api.model.ts
new file mode 100644
index 000000000..81fd4f296
--- /dev/null
+++ b/src/app/shared/models/subject/subjects-json-api.model.ts
@@ -0,0 +1,50 @@
+import { ApiData, MetaJsonApi, PaginationLinksJsonApi } from '@osf/core/models';
+
+export interface SubjectsResponseJsonApi {
+  data: SubjectDataJsonApi[];
+  meta: MetaJsonApi;
+  links: PaginationLinksJsonApi;
+}
+
+export type SubjectDataJsonApi = ApiData<
+  SubjectAttributesJsonApi,
+  SubjectEmbedsJsonApi,
+  SubjectRelationshipsJsonApi,
+  null
+>;
+
+interface SubjectAttributesJsonApi {
+  text: string;
+  taxonomy_name: string;
+}
+
+interface SubjectRelationshipsJsonApi {
+  parent?: {
+    links: {
+      related: {
+        href: string;
+        meta: Record<string, unknown>;
+      };
+    };
+    data?: {
+      id: string;
+      type: 'subjects';
+    };
+  };
+  children: {
+    links: {
+      related: {
+        href: string;
+        meta: {
+          count: number;
+        };
+      };
+    };
+  };
+}
+
+interface SubjectEmbedsJsonApi {
+  parent?: {
+    data: SubjectDataJsonApi;
+  };
+}
diff --git a/src/app/shared/stores/subjects/subjects.actions.ts b/src/app/shared/stores/subjects/subjects.actions.ts
index f50abb52c..d2a92eda6 100644
--- a/src/app/shared/stores/subjects/subjects.actions.ts
+++ b/src/app/shared/stores/subjects/subjects.actions.ts
@@ -9,3 +9,13 @@ export class UpdateProjectSubjects {
     public subjectIds: string[]
   ) {}
 }
+
+export class FetchSubjects {
+  static readonly type = '[Subjects] Fetch Subjects';
+  constructor(public search?: string) {}
+}
+
+export class FetchChildrenSubjects {
+  static readonly type = '[Subjects] Fetch Children Subjects';
+  constructor(public parentId: string) {}
+}
diff --git a/src/app/shared/stores/subjects/subjects.model.ts b/src/app/shared/stores/subjects/subjects.model.ts
index 6dc26bd20..e24bd610d 100644
--- a/src/app/shared/stores/subjects/subjects.model.ts
+++ b/src/app/shared/stores/subjects/subjects.model.ts
@@ -1,5 +1,7 @@
-import { AsyncStateModel, NodeSubjectModel } from '@shared/models';
+import { AsyncStateModel, NodeSubjectModel, Subject } from '@shared/models';
 
 export interface SubjectsModel {
   highlightedSubjects: AsyncStateModel<NodeSubjectModel[]>;
+  subjects: AsyncStateModel<Subject[]>;
+  searchedSubjects: AsyncStateModel<Subject[]>;
 }
diff --git a/src/app/shared/stores/subjects/subjects.selectors.ts b/src/app/shared/stores/subjects/subjects.selectors.ts
index 9ffb7d9e7..558097696 100644
--- a/src/app/shared/stores/subjects/subjects.selectors.ts
+++ b/src/app/shared/stores/subjects/subjects.selectors.ts
@@ -1,5 +1,7 @@
 import { Selector } from '@ngxs/store';
 
+import { Subject } from '@osf/shared/models';
+
 import { SubjectsModel } from './subjects.model';
 import { SubjectsState } from './subjects.state';
 
@@ -13,4 +15,24 @@ export class SubjectsSelectors {
   static getHighlightedSubjectsLoading(state: SubjectsModel): boolean {
     return state.highlightedSubjects.isLoading;
   }
+
+  @Selector([SubjectsState])
+  static getSubjects(state: SubjectsModel): Subject[] {
+    return state.subjects.data;
+  }
+
+  @Selector([SubjectsState])
+  static getSubjectsLoading(state: SubjectsModel): boolean {
+    return state.subjects.isLoading;
+  }
+
+  @Selector([SubjectsState])
+  static getSearchedSubjects(state: SubjectsModel): Subject[] {
+    return state.searchedSubjects.data;
+  }
+
+  @Selector([SubjectsState])
+  static getSearchedSubjectsLoading(state: SubjectsModel): boolean {
+    return state.searchedSubjects.isLoading;
+  }
 }
diff --git a/src/app/shared/stores/subjects/subjects.state.ts b/src/app/shared/stores/subjects/subjects.state.ts
index d7e0351e8..c1cbfadf6 100644
--- a/src/app/shared/stores/subjects/subjects.state.ts
+++ b/src/app/shared/stores/subjects/subjects.state.ts
@@ -4,9 +4,12 @@ import { catchError, tap, throwError } from 'rxjs';
 
 import { inject, Injectable } from '@angular/core';
 
-import { NodeSubjectModel } from '@shared/models';
+import { SUBJECTS_SERVICE } from '@osf/shared/tokens/subjects.token';
+import { ISubjectsService, NodeSubjectModel, Subject } from '@shared/models';
 import { SubjectsService } from '@shared/services';
-import { GetSubjects, SubjectsModel, UpdateProjectSubjects } from '@shared/stores/subjects';
+
+import { FetchChildrenSubjects, FetchSubjects, GetSubjects, UpdateProjectSubjects } from './subjects.actions';
+import { SubjectsModel } from './subjects.model';
 
 const initialState: SubjectsModel = {
   highlightedSubjects: {
@@ -14,6 +17,16 @@ const initialState: SubjectsModel = {
     isLoading: false,
     error: null,
   },
+  subjects: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
+  searchedSubjects: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
 };
 
 @State<SubjectsModel>({
@@ -22,7 +35,73 @@ const initialState: SubjectsModel = {
 })
 @Injectable()
 export class SubjectsState {
-  private readonly subjectsService = inject(SubjectsService);
+  private readonly projectSubjectsService = inject(SubjectsService);
+  private readonly subjectsService = inject<ISubjectsService>(SUBJECTS_SERVICE);
+
+  @Action(FetchSubjects)
+  fetchSubjects(ctx: StateContext<SubjectsModel>, { search }: FetchSubjects) {
+    ctx.patchState({
+      subjects: {
+        ...ctx.getState().subjects,
+        isLoading: true,
+        error: null,
+      },
+      searchedSubjects: {
+        ...ctx.getState().searchedSubjects,
+        isLoading: search ? true : false,
+        error: null,
+      },
+    });
+
+    return this.subjectsService.getSubjects(search).pipe(
+      tap((subjects) => {
+        if (search) {
+          ctx.patchState({
+            searchedSubjects: {
+              data: subjects,
+              isLoading: false,
+              error: null,
+            },
+          });
+        } else {
+          ctx.patchState({
+            subjects: {
+              data: subjects,
+              isLoading: false,
+              error: null,
+            },
+          });
+        }
+      }),
+      catchError((error) => this.handleError(ctx, 'subjects', error))
+    );
+  }
+
+  @Action(FetchChildrenSubjects)
+  fetchSubjectsChildren(ctx: StateContext<SubjectsModel>, { parentId }: FetchChildrenSubjects) {
+    ctx.patchState({
+      subjects: {
+        ...ctx.getState().subjects,
+        isLoading: true,
+        error: null,
+      },
+    });
+
+    return this.subjectsService.getChildrenSubjects(parentId).pipe(
+      tap((children) => {
+        const state = ctx.getState();
+        const updatedSubjects = this.updateSubjectChildren(state.subjects.data, parentId, children);
+        ctx.patchState({
+          subjects: {
+            data: updatedSubjects,
+            isLoading: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'subjects', error))
+    );
+  }
 
   @Action(GetSubjects)
   getSubjects(ctx: StateContext<SubjectsModel>) {
@@ -33,7 +112,7 @@ export class SubjectsState {
         error: null,
       },
     });
-    return this.subjectsService.getSubjects().pipe(
+    return this.projectSubjectsService.getSubjects().pipe(
       tap({
         next: (subjects) => {
           ctx.patchState({
@@ -70,7 +149,7 @@ export class SubjectsState {
 
   @Action(UpdateProjectSubjects)
   updateProjectSubjects(ctx: StateContext<SubjectsModel>, action: UpdateProjectSubjects) {
-    return this.subjectsService.updateProjectSubjects(action.projectId, action.subjectIds).pipe(
+    return this.projectSubjectsService.updateProjectSubjects(action.projectId, action.subjectIds).pipe(
       tap({
         next: (result) => {
           const state = ctx.getState();
@@ -107,4 +186,32 @@ export class SubjectsState {
       })
     );
   }
+
+  private updateSubjectChildren(subjects: Subject[], parentId: string, newChildren: Subject[]): Subject[] {
+    return subjects.map((subject) => {
+      if (subject.id === parentId) {
+        return { ...subject, children: newChildren };
+      }
+
+      if (subject.children && subject.children.length > 0) {
+        return {
+          ...subject,
+          children: this.updateSubjectChildren(subject.children, parentId, newChildren),
+        };
+      }
+
+      return subject;
+    });
+  }
+
+  private handleError(ctx: StateContext<SubjectsModel>, section: keyof SubjectsModel, error: Error) {
+    ctx.patchState({
+      [section]: {
+        ...ctx.getState()[section],
+        isLoading: false,
+        error: error.message,
+      },
+    });
+    return throwError(() => error);
+  }
 }
diff --git a/src/app/shared/tokens/index.ts b/src/app/shared/tokens/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/shared/tokens/subjects.token.ts b/src/app/shared/tokens/subjects.token.ts
new file mode 100644
index 000000000..b189b9cd2
--- /dev/null
+++ b/src/app/shared/tokens/subjects.token.ts
@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core';
+
+import { ISubjectsService } from '../models';
+
+export const SUBJECTS_SERVICE = new InjectionToken<ISubjectsService>('SUBJECTS_SERVICE');
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 0dadeba7c..3dfe4b726 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -20,11 +20,14 @@
       "disconnect": "Disconnect",
       "revert": "Revert",
       "next": "Next",
+      "back": "Back",
       "continue": "Continue",
       "skip": "Skip",
       "done": "Done",
       "select": "Select",
-      "deselect": "Deselect"
+      "deselect": "Deselect",
+      "yes": "Yes",
+      "no": "No"
     },
     "search": {
       "title": "Search",
@@ -40,6 +43,8 @@
     },
     "labels": {
       "downloads": "Downloads",
+      "title": "Title",
+      "description": "Description",
       "year": "Year"
     },
     "deleteConfirmation": {
@@ -48,7 +53,9 @@
     },
     "links": {
       "clickHere": "Click here",
-      "helpGuide": "Help Guide"
+      "helpGuide": "Help Guide",
+      "showExample": "Show Example",
+      "hideExample": "Hide Example"
     },
     "placeholder": {
       "addTag": "Add tags"
@@ -351,6 +358,46 @@
       "updateProjectSettingsMessage": "Successfully updated project settings."
     }
   },
+  "registries": {
+    "title": "Registries",
+    "addRegistration": "Add a Registration",
+    "description": "The open registries network",
+    "searchPlaceholder": "Search Registrations",
+    "services": {
+      "title": "Registry Services",
+      "description": "Leading registry service providers use this open source infrastructure to support their communities.",
+      "contactUs": "Contact Us"
+    },
+    "browse": "Browse Registrations",
+    "seeMore": "See more",
+    "new": {
+      "addNewRegistry": "Add New Registration",
+      "infoText1": "You are submitting to OSF Registries.",
+      "infoText2": "to learn more about other hosted registries",
+      "steps": {
+        "title": "Step",
+        "step1": "Do you have content for registration in an existing OSF project?",
+        "step2": "Which project do you want to register?",
+        "step3": "Which type of registration would you like to create?",
+        "step2InfoText": "If your project includes components, you can select which components to include or exclude at the end of the registration."
+      },
+      "selectProject": "Select your project",
+
+      "createDraft": "Create draft",
+      "createdSuccessfully": "Draft created successfully"
+    },
+    "deleteDraft": "Delete Draft",
+    "confirmDeleteDraft": "Are you sure you want to delete this draft registration?",
+    "metadata": {
+      "title": "Registration  Metadata",
+      "description": "This metadata applies only to the registration you are creating, and will not be applied to your project.",
+      "addContributors": "Add Contributor By Search"
+    },
+    "review": {
+      "step": "Review",
+      "title": "Review Registration"
+    }
+  },
   "myProfile": {
     "editProfile": "Edit Profile"
   },
@@ -1538,19 +1585,6 @@
       "providerLogoImageAlt": "Provider Logo"
     }
   },
-  "registries": {
-    "title": "Registries",
-    "addRegistration": "Add a Registration",
-    "description": "The open registries network",
-    "searchPlaceholder": "Search Registrations",
-    "services": {
-      "title": "Registry Services",
-      "description": "Leading registry service providers use this open source infrastructure to support their communities.",
-      "contactUs": "Contact Us"
-    },
-    "browse": "Browse Registrations",
-    "seeMore": "See more"
-  },
   "truncatedText": {
     "readMore": "Read more",
     "hide": "Hide"
@@ -1591,6 +1625,12 @@
       "description": "A license tells others how they can use your work in the future and only applies to the information and files submitted with the registration.",
       "helpText": "For more information, see this ",
       "copyrightHolders": "Copyright Holders"
+    },
+    "subjects": {
+      "title": "Subjects",
+      "noSelected": "No subjects selected",
+      "searchSubjects": "Search subjects",
+      "noSubject": "No subjects found"
     }
   },
   "pageNotFound": {
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index 07bfec294..4a14ea025 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -158,6 +158,9 @@ $white-60: var(--white-60);
   --stepper-active-space-line-color: var(--pr-blue-1);
   --stepper-step-border-color: var(--white);
   --stepper-active-step-border-color: var(--pr-blue-1);
+  --stepper-invalid-step-background: var(--white);
+  --stepper-invalid-step-color: var(--red-1);
+  --stepper-invalid-step-border-color: var(--red-1);
 
   // White labeling
   --header-color: none;