diff --git a/src/app/core/constants/nav-items.constant.ts b/src/app/core/constants/nav-items.constant.ts
index 9058c3655..7a86051e0 100644
--- a/src/app/core/constants/nav-items.constant.ts
+++ b/src/app/core/constants/nav-items.constant.ts
@@ -32,7 +32,20 @@ export const NAV_ITEMS: NavItem[] = [
     path: '/preprints',
     label: 'navigation.preprints',
     icon: 'preprints',
-    useExactMatch: true,
+    isCollapsible: true,
+    useExactMatch: false,
+    items: [
+      {
+        path: '/preprints',
+        label: 'navigation.preprintsSubRoutes.overview',
+        useExactMatch: false,
+      },
+      {
+        path: '/my-preprints',
+        label: 'navigation.preprintsSubRoutes.myPreprints',
+        useExactMatch: true,
+      },
+    ],
   },
   {
     path: '/my-profile',
diff --git a/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.html b/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.html
index a5a0c4749..b782dab1e 100644
--- a/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.html
+++ b/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.html
@@ -21,7 +21,7 @@ <h1 class="preprint-provider-name">{{ preprintProvider()!.name }}</h1>
       <p-button
         class="ml-auto w-full md:w-auto preprints-branding-button"
         styleClass="w-full md:w-auto"
-        [label]="'preprints.addPreprint' | translate: { preprintWord: preprintProvider()!.preprintWord }"
+        [label]="'preprints.addPreprint' | translate: { preprintWord: preprintProvider()!.preprintWord } | titlecase"
         (click)="addPreprint()"
       />
     }
@@ -41,21 +41,29 @@ <h1 class="preprint-provider-name">{{ preprintProvider()!.name }}</h1>
     }
   </div>
 
-  <div class="search-input-container">
-    <osf-search-input
-      class="w-full"
-      [showHelpIcon]="true"
-      [placeholder]="'preprints.searchPlaceholder' | translate"
-      [control]="searchControl()"
-      (triggerSearch)="onTriggerSearch($event)"
-      (helpClicked)="openHelpDialog()"
-    />
-  </div>
+  @if (isPreprintProviderLoading()) {
+    <p-skeleton class="w-full" height="3rem" />
+  } @else {
+    <div class="search-input-container">
+      <osf-search-input
+        class="w-full"
+        [showHelpIcon]="true"
+        [placeholder]="
+          'preprints.searchPlaceholder' | translate: { preprintWord: preprintProvider()!.preprintWord } | titlecase
+        "
+        [control]="searchControl()"
+        (triggerSearch)="onTriggerSearch($event)"
+        (helpClicked)="openHelpDialog()"
+      />
+    </div>
+  }
 
   <!-- [Rni] TODO: add link to an example preprint -->
   @if (isPreprintProviderLoading()) {
     <p-skeleton width="10%" height="1rem" />
   } @else {
-    <a class="link font-bold">{{ 'preprints.showExample' | translate }}</a>
+    <p>
+      <a class="font-bold">{{ 'preprints.showExample' | translate }}</a>
+    </p>
   }
 </section>
diff --git a/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.ts b/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.ts
index 32494fd67..1ace7b354 100644
--- a/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.ts
+++ b/src/app/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.ts
@@ -4,6 +4,7 @@ import { Button } from 'primeng/button';
 import { DialogService } from 'primeng/dynamicdialog';
 import { Skeleton } from 'primeng/skeleton';
 
+import { TitleCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, input, output } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { RouterLink } from '@angular/router';
@@ -15,7 +16,7 @@ import { DecodeHtmlPipe } from '@shared/pipes';
 
 @Component({
   selector: 'osf-preprint-provider-hero',
-  imports: [Button, RouterLink, SearchInputComponent, Skeleton, TranslatePipe, DecodeHtmlPipe],
+  imports: [Button, RouterLink, SearchInputComponent, Skeleton, TranslatePipe, DecodeHtmlPipe, TitleCasePipe],
   templateUrl: './preprint-provider-hero.component.html',
   styleUrl: './preprint-provider-hero.component.scss',
   providers: [DialogService],
diff --git a/src/app/features/preprints/components/preprint-services/preprint-services.component.ts b/src/app/features/preprints/components/preprint-services/preprint-services.component.ts
index 565d7f54a..5e7b99120 100644
--- a/src/app/features/preprints/components/preprint-services/preprint-services.component.ts
+++ b/src/app/features/preprints/components/preprint-services/preprint-services.component.ts
@@ -3,7 +3,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 
-import { PreprintProviderToAdvertise } from '@osf/features/preprints/models';
+import { PreprintProviderShortInfo } from '@osf/features/preprints/models';
 
 @Component({
   selector: 'osf-preprint-services',
@@ -13,5 +13,5 @@ import { PreprintProviderToAdvertise } from '@osf/features/preprints/models';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PreprintServicesComponent {
-  preprintProvidersToAdvertise = input.required<PreprintProviderToAdvertise[]>();
+  preprintProvidersToAdvertise = input.required<PreprintProviderShortInfo[]>();
 }
diff --git a/src/app/features/preprints/components/preprints-help-dialog/preprints-help-dialog.component.html b/src/app/features/preprints/components/preprints-help-dialog/preprints-help-dialog.component.html
index e19556eda..ef1b931d3 100644
--- a/src/app/features/preprints/components/preprints-help-dialog/preprints-help-dialog.component.html
+++ b/src/app/features/preprints/components/preprints-help-dialog/preprints-help-dialog.component.html
@@ -1,7 +1,7 @@
 <div class="dialog-content">
   <p class="py-3">
     {{ 'preprints.helpDialog.message' | translate }}
-    <a class="font-bold" href="https://help.osf.io/article/181-search-and-discover-preprints" target="_blank"
+    <a class="font-bold" href="https://help.osf.io/article/376-preprints-home-page" target="_blank"
       >{{ 'preprints.helpDialog.linkText' | translate }}.</a
     >
   </p>
diff --git a/src/app/features/preprints/constants/preprints.routes.ts b/src/app/features/preprints/constants/preprints.routes.ts
index bdca37437..4832d5795 100644
--- a/src/app/features/preprints/constants/preprints.routes.ts
+++ b/src/app/features/preprints/constants/preprints.routes.ts
@@ -7,6 +7,7 @@ import { PreprintsState } from '@osf/features/preprints/store/preprints';
 import { PreprintsDiscoverState } from '@osf/features/preprints/store/preprints-discover';
 import { PreprintsResourcesFiltersState } from '@osf/features/preprints/store/preprints-resources-filters';
 import { PreprintsResourcesFiltersOptionsState } from '@osf/features/preprints/store/preprints-resources-filters-options';
+import { SubmitPreprintState } from '@osf/features/preprints/store/submit-preprint';
 
 export const preprintsRoutes: Routes = [
   {
@@ -18,6 +19,7 @@ export const preprintsRoutes: Routes = [
         PreprintsDiscoverState,
         PreprintsResourcesFiltersState,
         PreprintsResourcesFiltersOptionsState,
+        SubmitPreprintState,
       ]),
     ],
     children: [
@@ -47,6 +49,13 @@ export const preprintsRoutes: Routes = [
             (c) => c.PreprintProviderDiscoverComponent
           ),
       },
+      {
+        path: 'select',
+        loadComponent: () =>
+          import('@osf/features/preprints/pages/select-preprint-service/select-preprint-service.component').then(
+            (c) => c.SelectPreprintServiceComponent
+          ),
+      },
     ],
   },
 ];
diff --git a/src/app/features/preprints/mappers/preprints.mapper.ts b/src/app/features/preprints/mappers/preprints.mapper.ts
index 5370489cb..aff80c2ee 100644
--- a/src/app/features/preprints/mappers/preprints.mapper.ts
+++ b/src/app/features/preprints/mappers/preprints.mapper.ts
@@ -1,7 +1,7 @@
 import {
   PreprintProviderDetails,
   PreprintProviderDetailsGetResponse,
-  PreprintProviderToAdvertise,
+  PreprintProviderShortInfo,
   Subject,
   SubjectGetResponse,
 } from '@osf/features/preprints/models';
@@ -29,19 +29,20 @@ export class PreprintsMapper {
         secondaryColor: brandRaw.attributes.secondary_color,
       },
       iri: response.links.iri,
+      faviconUrl: response.attributes.assets.favicon,
     };
   }
 
-  static fromPreprintProvidersToAdvertiseGetResponse(
+  static toPreprintProviderShortInfoFromGetResponse(
     response: PreprintProviderDetailsGetResponse[]
-  ): PreprintProviderToAdvertise[] {
-    return response
-      .filter((item) => !item.id.includes('osf'))
-      .map((item) => ({
-        id: item.id,
-        name: item.attributes.name,
-        whiteWideImageUrl: item.attributes.assets.wide_white,
-      }));
+  ): PreprintProviderShortInfo[] {
+    return response.map((item) => ({
+      id: item.id,
+      descriptionHtml: item.attributes.description,
+      name: item.attributes.name,
+      whiteWideImageUrl: item.attributes.assets?.wide_white,
+      squareColorNoTransparentImageUrl: item.attributes.assets?.square_color_no_transparent,
+    }));
   }
 
   static fromSubjectsGetResponse(providerId: string, response: SubjectGetResponse[]): Subject[] {
diff --git a/src/app/features/preprints/models/preprints.models.ts b/src/app/features/preprints/models/preprints.models.ts
index 3c6fba4a6..26280982c 100644
--- a/src/app/features/preprints/models/preprints.models.ts
+++ b/src/app/features/preprints/models/preprints.models.ts
@@ -24,12 +24,15 @@ export interface PreprintProviderDetails {
   brand: Brand;
   lastFetched?: number;
   iri: string;
+  faviconUrl: string;
 }
 
-export interface PreprintProviderToAdvertise {
+export interface PreprintProviderShortInfo {
   id: string;
   name: string;
+  descriptionHtml: string;
   whiteWideImageUrl: string;
+  squareColorNoTransparentImageUrl: string;
 }
 
 export interface Subject {
@@ -53,6 +56,8 @@ export interface PreprintProviderDetailsGetResponse {
     preprint_word: string;
     assets: {
       wide_white: string;
+      square_color_no_transparent: string;
+      favicon: string;
     };
     allow_submissions: boolean;
   };
diff --git a/src/app/features/preprints/pages/landing/preprints-landing.component.html b/src/app/features/preprints/pages/landing/preprints-landing.component.html
index 5021901d2..ab5d2de10 100644
--- a/src/app/features/preprints/pages/landing/preprints-landing.component.html
+++ b/src/app/features/preprints/pages/landing/preprints-landing.component.html
@@ -10,8 +10,8 @@ <h1>{{ 'preprints.title' | translate }}</h1>
       <p-button
         class="ml-auto w-full md:w-auto"
         styleClass="w-full md:w-auto"
-        [label]="'preprints.addPreprint' | translate: { preprintWord: osfPreprintProvider()?.preprintWord }"
-        (click)="addPreprint()"
+        [label]="'preprints.addPreprint' | translate: { preprintWord: osfPreprintProvider()?.preprintWord } | titlecase"
+        routerLink="/preprints/select"
       />
     }
   </div>
@@ -31,7 +31,7 @@ <h1>{{ 'preprints.title' | translate }}</h1>
   <osf-search-input
     class="w-full"
     [control]="searchControl"
-    [placeholder]="'preprints.searchPlaceholder' | translate"
+    [placeholder]="'preprints.searchPlaceholder' | translate: { preprintWord: 'preprint' } | titlecase"
     (triggerSearch)="redirectToSearchPageWithValue()"
   />
 
@@ -76,7 +76,7 @@ <h2 class="text-2xl">{{ 'preprints.createServer.title' | translate }}</h2>
     </p>
   </div>
 
-  <p-button severity="success" link="true">
+  <p-button severity="success" class="link-button">
     <a href="mailto:support@osf.io">{{ 'preprints.createServer.contactUs' | translate }}</a>
   </p-button>
 </section>
diff --git a/src/app/features/preprints/pages/landing/preprints-landing.component.scss b/src/app/features/preprints/pages/landing/preprints-landing.component.scss
index 59c5ab2a5..8cae1f8ce 100644
--- a/src/app/features/preprints/pages/landing/preprints-landing.component.scss
+++ b/src/app/features/preprints/pages/landing/preprints-landing.component.scss
@@ -12,3 +12,11 @@
 .blue-dark-gradient {
   background: url("/assets/images/dark-blue-gradient.png") center;
 }
+
+.link-button {
+  a,
+  a:hover {
+    color: var(--p-button-success-color);
+    text-decoration: none;
+  }
+}
diff --git a/src/app/features/preprints/pages/landing/preprints-landing.component.ts b/src/app/features/preprints/pages/landing/preprints-landing.component.ts
index 4eaa63df4..808e62662 100644
--- a/src/app/features/preprints/pages/landing/preprints-landing.component.ts
+++ b/src/app/features/preprints/pages/landing/preprints-landing.component.ts
@@ -5,6 +5,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { Button } from 'primeng/button';
 import { Skeleton } from 'primeng/skeleton';
 
+import { TitleCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, effect, HostBinding, inject, OnDestroy, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
@@ -35,6 +36,7 @@ import { ResourceTab } from '@shared/enums';
     BrowseBySubjectsComponent,
     Skeleton,
     TranslateModule,
+    TitleCasePipe,
   ],
   templateUrl: './preprints-landing.component.html',
   styleUrl: './preprints-landing.component.scss',
@@ -59,10 +61,6 @@ export class PreprintsLandingComponent implements OnInit, OnDestroy {
   highlightedSubjectsByProviderId = select(PreprintsSelectors.getHighlightedSubjectsForProvider);
   areSubjectsLoading = select(PreprintsSelectors.areSubjectsLoading);
 
-  addPreprint() {
-    // [RNi] TODO: Implement the logic to add a preprint.
-  }
-
   constructor() {
     effect(() => {
       const provider = this.osfPreprintProvider();
diff --git a/src/app/features/preprints/pages/preprint-provider-discover/preprint-provider-discover.component.ts b/src/app/features/preprints/pages/preprint-provider-discover/preprint-provider-discover.component.ts
index 41689ad64..b9d5b1a70 100644
--- a/src/app/features/preprints/pages/preprint-provider-discover/preprint-provider-discover.component.ts
+++ b/src/app/features/preprints/pages/preprint-provider-discover/preprint-provider-discover.component.ts
@@ -41,7 +41,7 @@ import {
 } from '@osf/features/preprints/store/preprints-resources-filters';
 import { GetAllOptions } from '@osf/features/preprints/store/preprints-resources-filters-options';
 import { FilterLabelsModel, ResourceFilterLabel } from '@shared/models';
-import { HeaderStyleHelper } from '@shared/utils';
+import { BrowserTabHelper, HeaderStyleHelper } from '@shared/utils';
 
 @Component({
   selector: 'osf-preprint-provider-discover',
@@ -110,6 +110,7 @@ export class PreprintProviderDiscoverComponent implements OnInit, OnDestroy {
           provider.brand.secondaryColor,
           provider.brand.heroBackgroundImageUrl
         );
+        BrowserTabHelper.updateTabStyles(provider.faviconUrl, provider.name);
       }
     });
 
@@ -187,6 +188,7 @@ export class PreprintProviderDiscoverComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     HeaderStyleHelper.resetToDefaults();
     BrandService.resetBranding();
+    BrowserTabHelper.resetToDefaults();
     this.actions.resetFiltersState();
     this.actions.resetDiscoverState();
   }
diff --git a/src/app/features/preprints/pages/preprint-provider-overview/preprint-provider-overview.component.ts b/src/app/features/preprints/pages/preprint-provider-overview/preprint-provider-overview.component.ts
index ade20c7e1..a00d94d17 100644
--- a/src/app/features/preprints/pages/preprint-provider-overview/preprint-provider-overview.component.ts
+++ b/src/app/features/preprints/pages/preprint-provider-overview/preprint-provider-overview.component.ts
@@ -15,7 +15,7 @@ import {
   GetPreprintProviderById,
   PreprintsSelectors,
 } from '@osf/features/preprints/store/preprints';
-import { HeaderStyleHelper } from '@shared/utils';
+import { BrowserTabHelper, HeaderStyleHelper } from '@shared/utils';
 
 @Component({
   selector: 'osf-provider-overview',
@@ -55,6 +55,7 @@ export class PreprintProviderOverviewComponent implements OnInit, OnDestroy {
           provider.brand.secondaryColor,
           provider.brand.heroBackgroundImageUrl
         );
+        BrowserTabHelper.updateTabStyles(provider.faviconUrl, provider.name);
       }
     });
   }
@@ -67,6 +68,7 @@ export class PreprintProviderOverviewComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     HeaderStyleHelper.resetToDefaults();
     BrandService.resetBranding();
+    BrowserTabHelper.resetToDefaults();
   }
 
   redirectToDiscoverPageWithValue(searchValue: string) {
diff --git a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html
new file mode 100644
index 000000000..c03758447
--- /dev/null
+++ b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.html
@@ -0,0 +1,62 @@
+<osf-sub-header [title]="'preprints.selectService.title' | translate" />
+
+<section class="flex flex-1 flex-column bg-white p-3 md:p-4">
+  <h2>{{ 'preprints.selectService.sectionTitle' | translate }}</h2>
+  <p class="m-t-12">
+    <span>
+      {{ 'preprints.selectService.description' | translate }}
+    </span>
+    <a href="https://help.osf.io/article/376-preprints-home-page">{{
+      'preprints.selectService.learnMore' | translate
+    }}</a>
+  </p>
+  <section class="m-t-48 grid justify-content-center align-items-start gap-4">
+    @if (areProvidersLoading()) {
+      @for (_ of skeletonArray; track $index) {
+        <p-card>
+          <div class="h-10rem w-13rem grid-item flex flex-column align-items-center justify-content-end">
+            <p-skeleton width="60px" height="60px" />
+            <p-skeleton class="m-t-12" width="5rem" height="1rem" />
+            <p-skeleton class="m-t-24" width="8rem" height="2rem" />
+          </div>
+        </p-card>
+      }
+    } @else {
+      @for (provider of preprintProvidersAllowingSubmissions(); track $index) {
+        <p-card
+          [ngClass]="{ active: selectedProviderId() === provider.id }"
+          class="provider-card"
+          [pTooltip]="descriptionTooltip"
+          tooltipPosition="bottom"
+          autoHide="false"
+          (click)="selectDeselectProvider(provider)"
+        >
+          <div class="h-10rem w-13rem grid-item flex flex-column align-items-center justify-content-end">
+            <img
+              height="60"
+              [src]="provider.squareColorNoTransparentImageUrl"
+              [alt]="'preprints.selectService.providerLogoImageAlt' | translate"
+            />
+
+            <h4 class="m-t-12">{{ provider.name }}</h4>
+            <p-button
+              class="m-t-24"
+              [label]="
+                selectedProviderId() === provider.id
+                  ? ('common.buttons.deselect' | translate)
+                  : ('common.buttons.select' | translate)
+              "
+              severity="secondary"
+            />
+          </div>
+        </p-card>
+        <ng-template #descriptionTooltip>
+          <div [innerHTML]="provider.descriptionHtml | decodeHtml"></div>
+        </ng-template>
+      }
+    }
+  </section>
+  <section class="m-t-48 flex flex-row justify-content-end">
+    <p-button [label]="'common.buttons.next' | translate" (click)="nextStep()" [disabled]="!selectedProviderId()" />
+  </section>
+</section>
diff --git a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.scss b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.scss
new file mode 100644
index 000000000..e4df0f6af
--- /dev/null
+++ b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.scss
@@ -0,0 +1,14 @@
+@use "assets/styles/mixins" as mix;
+
+.grid-item {
+  width: mix.rem(260px);
+  height: mix.rem(200px);
+}
+
+.active,
+.provider-card:hover {
+  --p-card-background: var(--bg-blue-3);
+  cursor: pointer;
+
+  --p-button-secondary-background: var(--white);
+}
diff --git a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.spec.ts b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.spec.ts
new file mode 100644
index 000000000..d78af628a
--- /dev/null
+++ b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SelectPreprintServiceComponent } from './select-preprint-service.component';
+
+describe('SelectPreprintServiceComponent', () => {
+  let component: SelectPreprintServiceComponent;
+  let fixture: ComponentFixture<SelectPreprintServiceComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SelectPreprintServiceComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SelectPreprintServiceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.ts b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.ts
new file mode 100644
index 000000000..e8cadaed8
--- /dev/null
+++ b/src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.ts
@@ -0,0 +1,55 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslateModule } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { Card } from 'primeng/card';
+import { Skeleton } from 'primeng/skeleton';
+import { Tooltip } from 'primeng/tooltip';
+
+import { NgClass } from '@angular/common';
+import { ChangeDetectionStrategy, Component, HostBinding, OnInit } from '@angular/core';
+
+import { PreprintProviderShortInfo } from '@osf/features/preprints/models';
+import { GetPreprintProvidersAllowingSubmissions, PreprintsSelectors } from '@osf/features/preprints/store/preprints';
+import { SetSelectedPreprintProviderId, SubmitPreprintSelectors } from '@osf/features/preprints/store/submit-preprint';
+import { SubHeaderComponent } from '@shared/components';
+import { DecodeHtmlPipe } from '@shared/pipes';
+
+@Component({
+  selector: 'osf-select-preprint-service',
+  imports: [SubHeaderComponent, Card, Button, NgClass, Tooltip, DecodeHtmlPipe, Skeleton, TranslateModule],
+  templateUrl: './select-preprint-service.component.html',
+  styleUrl: './select-preprint-service.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectPreprintServiceComponent implements OnInit {
+  @HostBinding('class') classes = 'flex-1 flex flex-column w-full';
+
+  private actions = createDispatchMap({
+    getPreprintProvidersAllowingSubmissions: GetPreprintProvidersAllowingSubmissions,
+    setSelectedPreprintProviderId: SetSelectedPreprintProviderId,
+  });
+
+  preprintProvidersAllowingSubmissions = select(PreprintsSelectors.getPreprintProvidersAllowingSubmissions);
+  areProvidersLoading = select(PreprintsSelectors.arePreprintProvidersAllowingSubmissionsLoading);
+  selectedProviderId = select(SubmitPreprintSelectors.getSelectedProviderId);
+  skeletonArray = Array.from({ length: 8 }, (_, i) => i + 1);
+
+  ngOnInit(): void {
+    this.actions.getPreprintProvidersAllowingSubmissions();
+  }
+
+  selectDeselectProvider(provider: PreprintProviderShortInfo) {
+    if (provider.id === this.selectedProviderId()) {
+      this.actions.setSelectedPreprintProviderId(null);
+      return;
+    }
+
+    this.actions.setSelectedPreprintProviderId(provider.id);
+  }
+
+  nextStep() {
+    //[RNi] TODO: redirect to first step of submitting preprint
+  }
+}
diff --git a/src/app/features/preprints/services/preprints.service.ts b/src/app/features/preprints/services/preprints.service.ts
index d83cce72b..9d5981aa8 100644
--- a/src/app/features/preprints/services/preprints.service.ts
+++ b/src/app/features/preprints/services/preprints.service.ts
@@ -8,7 +8,7 @@ import { PreprintsMapper } from '@osf/features/preprints/mappers';
 import {
   PreprintProviderDetails,
   PreprintProviderDetailsGetResponse,
-  PreprintProviderToAdvertise,
+  PreprintProviderShortInfo,
   Subject,
   SubjectGetResponse,
 } from '@osf/features/preprints/models';
@@ -32,14 +32,28 @@ export class PreprintsService {
       );
   }
 
-  getPreprintProvidersToAdvertise(): Observable<PreprintProviderToAdvertise[]> {
+  getPreprintProvidersToAdvertise(): Observable<PreprintProviderShortInfo[]> {
     return this.jsonApiService
       .get<
         JsonApiResponse<PreprintProviderDetailsGetResponse[], null>
       >(`${this.baseUrl}?filter[advertise_on_discover_page]=true&reload=true`)
       .pipe(
         map((response) => {
-          return PreprintsMapper.fromPreprintProvidersToAdvertiseGetResponse(response.data);
+          return PreprintsMapper.toPreprintProviderShortInfoFromGetResponse(
+            response.data.filter((item) => !item.id.includes('osf'))
+          );
+        })
+      );
+  }
+
+  getPreprintProvidersAllowingSubmissions(): Observable<PreprintProviderShortInfo[]> {
+    return this.jsonApiService
+      .get<
+        JsonApiResponse<PreprintProviderDetailsGetResponse[], null>
+      >(`${this.baseUrl}?filter[allow_submissions]=true`)
+      .pipe(
+        map((response) => {
+          return PreprintsMapper.toPreprintProviderShortInfoFromGetResponse(response.data);
         })
       );
   }
diff --git a/src/app/features/preprints/store/preprints/preprints.actions.ts b/src/app/features/preprints/store/preprints/preprints.actions.ts
index 5fc7c95fb..9254138a9 100644
--- a/src/app/features/preprints/store/preprints/preprints.actions.ts
+++ b/src/app/features/preprints/store/preprints/preprints.actions.ts
@@ -13,3 +13,7 @@ export class GetHighlightedSubjectsByProviderId {
 export class GetPreprintProvidersToAdvertise {
   static readonly type = '[Preprints] Get Preprint Providers To Advertise';
 }
+
+export class GetPreprintProvidersAllowingSubmissions {
+  static readonly type = '[Preprints] Get Preprint Providers That Allows Submissions';
+}
diff --git a/src/app/features/preprints/store/preprints/preprints.model.ts b/src/app/features/preprints/store/preprints/preprints.model.ts
index 4a39aca96..d9bc5680d 100644
--- a/src/app/features/preprints/store/preprints/preprints.model.ts
+++ b/src/app/features/preprints/store/preprints/preprints.model.ts
@@ -1,8 +1,9 @@
-import { PreprintProviderDetails, PreprintProviderToAdvertise, Subject } from '@osf/features/preprints/models';
+import { PreprintProviderDetails, PreprintProviderShortInfo, Subject } from '@osf/features/preprints/models';
 import { AsyncStateModel } from '@shared/models';
 
 export interface PreprintsStateModel {
   preprintProvidersDetails: AsyncStateModel<PreprintProviderDetails[]>;
-  preprintProvidersToAdvertise: AsyncStateModel<PreprintProviderToAdvertise[]>;
+  preprintProvidersToAdvertise: AsyncStateModel<PreprintProviderShortInfo[]>;
+  preprintProvidersAllowingSubmissions: AsyncStateModel<PreprintProviderShortInfo[]>;
   highlightedSubjectsForProvider: AsyncStateModel<Subject[]>;
 }
diff --git a/src/app/features/preprints/store/preprints/preprints.selectors.ts b/src/app/features/preprints/store/preprints/preprints.selectors.ts
index 29f3e15a0..7c3ac8de3 100644
--- a/src/app/features/preprints/store/preprints/preprints.selectors.ts
+++ b/src/app/features/preprints/store/preprints/preprints.selectors.ts
@@ -19,6 +19,16 @@ export class PreprintsSelectors {
     return state.preprintProvidersToAdvertise.data;
   }
 
+  @Selector([PreprintsState])
+  static getPreprintProvidersAllowingSubmissions(state: PreprintsStateModel) {
+    return state.preprintProvidersAllowingSubmissions.data;
+  }
+
+  @Selector([PreprintsState])
+  static arePreprintProvidersAllowingSubmissionsLoading(state: PreprintsStateModel) {
+    return state.preprintProvidersAllowingSubmissions.isLoading;
+  }
+
   @Selector([PreprintsState])
   static getHighlightedSubjectsForProvider(state: PreprintsStateModel) {
     return state.highlightedSubjectsForProvider.data;
diff --git a/src/app/features/preprints/store/preprints/preprints.state.ts b/src/app/features/preprints/store/preprints/preprints.state.ts
index 45cc5dba1..d7a0b237a 100644
--- a/src/app/features/preprints/store/preprints/preprints.state.ts
+++ b/src/app/features/preprints/store/preprints/preprints.state.ts
@@ -10,6 +10,7 @@ import { PreprintsService } from '@osf/features/preprints/services';
 import {
   GetHighlightedSubjectsByProviderId,
   GetPreprintProviderById,
+  GetPreprintProvidersAllowingSubmissions,
   GetPreprintProvidersToAdvertise,
 } from '@osf/features/preprints/store/preprints/preprints.actions';
 
@@ -28,6 +29,11 @@ import { PreprintsStateModel } from './';
       isLoading: false,
       error: null,
     },
+    preprintProvidersAllowingSubmissions: {
+      data: [],
+      isLoading: false,
+      error: null,
+    },
     highlightedSubjectsForProvider: {
       data: [],
       isLoading: false,
@@ -91,6 +97,25 @@ export class PreprintsState {
     );
   }
 
+  @Action(GetPreprintProvidersAllowingSubmissions)
+  getPreprintProvidersAllowingSubmissions(ctx: StateContext<PreprintsStateModel>) {
+    ctx.setState(patch({ preprintProvidersAllowingSubmissions: patch({ isLoading: true }) }));
+
+    return this.#preprintsService.getPreprintProvidersAllowingSubmissions().pipe(
+      tap((data) => {
+        ctx.setState(
+          patch({
+            preprintProvidersAllowingSubmissions: patch({
+              data: data,
+              isLoading: false,
+            }),
+          })
+        );
+      }),
+      catchError((error) => this.handleError(ctx, 'preprintProvidersAllowingSubmissions', error))
+    );
+  }
+
   @Action(GetHighlightedSubjectsByProviderId)
   getHighlightedSubjectsByProviderId(
     ctx: StateContext<PreprintsStateModel>,
diff --git a/src/app/features/preprints/store/submit-preprint/index.ts b/src/app/features/preprints/store/submit-preprint/index.ts
new file mode 100644
index 000000000..cdae9c5e8
--- /dev/null
+++ b/src/app/features/preprints/store/submit-preprint/index.ts
@@ -0,0 +1,4 @@
+export * from './submit-preprint.actions';
+export * from './submit-preprint.model';
+export * from './submit-preprint.selectors';
+export * from './submit-preprint.state';
diff --git a/src/app/features/preprints/store/submit-preprint/submit-preprint.actions.ts b/src/app/features/preprints/store/submit-preprint/submit-preprint.actions.ts
new file mode 100644
index 000000000..a7235bac2
--- /dev/null
+++ b/src/app/features/preprints/store/submit-preprint/submit-preprint.actions.ts
@@ -0,0 +1,7 @@
+import { StringOrNull } from '@core/helpers';
+
+export class SetSelectedPreprintProviderId {
+  static readonly type = '[Submit Preprint] Set Selected Preprint Provider Id';
+
+  constructor(public id: StringOrNull) {}
+}
diff --git a/src/app/features/preprints/store/submit-preprint/submit-preprint.model.ts b/src/app/features/preprints/store/submit-preprint/submit-preprint.model.ts
new file mode 100644
index 000000000..4fa5cc4b4
--- /dev/null
+++ b/src/app/features/preprints/store/submit-preprint/submit-preprint.model.ts
@@ -0,0 +1,5 @@
+import { StringOrNull } from '@core/helpers';
+
+export interface SubmitPreprintStateModel {
+  selectedProviderId: StringOrNull;
+}
diff --git a/src/app/features/preprints/store/submit-preprint/submit-preprint.selectors.ts b/src/app/features/preprints/store/submit-preprint/submit-preprint.selectors.ts
new file mode 100644
index 000000000..ea13a8568
--- /dev/null
+++ b/src/app/features/preprints/store/submit-preprint/submit-preprint.selectors.ts
@@ -0,0 +1,10 @@
+import { Selector } from '@ngxs/store';
+
+import { SubmitPreprintState, SubmitPreprintStateModel } from '@osf/features/preprints/store/submit-preprint';
+
+export class SubmitPreprintSelectors {
+  @Selector([SubmitPreprintState])
+  static getSelectedProviderId(state: SubmitPreprintStateModel) {
+    return state.selectedProviderId;
+  }
+}
diff --git a/src/app/features/preprints/store/submit-preprint/submit-preprint.state.ts b/src/app/features/preprints/store/submit-preprint/submit-preprint.state.ts
new file mode 100644
index 000000000..3c89163f4
--- /dev/null
+++ b/src/app/features/preprints/store/submit-preprint/submit-preprint.state.ts
@@ -0,0 +1,18 @@
+import { Action, State, StateContext } from '@ngxs/store';
+
+import { Injectable } from '@angular/core';
+
+import { SetSelectedPreprintProviderId, SubmitPreprintStateModel } from './';
+
+@State<SubmitPreprintStateModel>({
+  name: 'submitPreprint',
+})
+@Injectable()
+export class SubmitPreprintState {
+  @Action(SetSelectedPreprintProviderId)
+  setSelectedPreprintProviderId(ctx: StateContext<SubmitPreprintStateModel>, action: SetSelectedPreprintProviderId) {
+    ctx.patchState({
+      selectedProviderId: action.id,
+    });
+  }
+}
diff --git a/src/app/shared/utils/browser-tab.helper.ts b/src/app/shared/utils/browser-tab.helper.ts
new file mode 100644
index 000000000..f0df8afef
--- /dev/null
+++ b/src/app/shared/utils/browser-tab.helper.ts
@@ -0,0 +1,22 @@
+export class BrowserTabHelper {
+  private static readonly DEFAULT_FAVICON = '/favicon.ico';
+  private static readonly DEFAULT_TITLE = 'OSF';
+
+  static updateTabStyles(faviconUrl: string, title: string) {
+    if (faviconUrl) {
+      const faviconElement = document.querySelector("link[rel*='icon']") as HTMLLinkElement;
+      faviconElement.href = faviconUrl;
+    }
+
+    if (title) {
+      document.title = title;
+    }
+  }
+
+  static resetToDefaults() {
+    const faviconElement = document.querySelector("link[rel*='icon']") as HTMLLinkElement;
+    faviconElement.href = this.DEFAULT_FAVICON;
+
+    document.title = this.DEFAULT_TITLE;
+  }
+}
diff --git a/src/app/shared/utils/index.ts b/src/app/shared/utils/index.ts
index ec1ea68b3..38d45729d 100644
--- a/src/app/shared/utils/index.ts
+++ b/src/app/shared/utils/index.ts
@@ -1,6 +1,7 @@
 export { HeaderStyleHelper } from '../utils/header-style.helper';
 export * from './add-filters-params.helper';
 export * from './breakpoints.tokens';
+export { BrowserTabHelper } from './browser-tab.helper';
 export * from './custom-form-validators.helper';
 export * from './default-confirmation-config.helper';
 export * from './find-changed-items.helper';
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index e9d9261df..6200dede0 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -13,7 +13,9 @@
       "rename": "Rename",
       "next": "Next",
       "skip": "Skip",
-      "done": "Done"
+      "done": "Done",
+      "select": "Select",
+      "deselect": "Deselect"
     },
     "search": {
       "title": "Search",
@@ -44,6 +46,10 @@
     "meetings": "Meetings",
     "myProjects": "My Projects",
     "preprints": "Preprints",
+    "preprintsSubRoutes": {
+      "overview": "Overview",
+      "myPreprints": "My Preprints"
+    },
     "collections": "Collections",
     "moderation": "Moderation",
     "donate": "Donate",
@@ -1216,7 +1222,7 @@
     "title": "Preprints",
     "addPreprint": "Add a {{preprintWord}}",
     "poweredBy": "Powered by OSF Preprints",
-    "searchPlaceholder": "Search Preprints",
+    "searchPlaceholder": "Search {{preprintWord}}...",
     "showExample": "Show an example",
     "browseBySubjects": {
       "title": "Browse By Subjects"
@@ -1238,6 +1244,13 @@
       "header": "Search help",
       "message": "OSF Search provides a powerful discovery tool to help you find data, papers, analysis plans, and more content across the research lifecycle. OSF Preprints has some specialized filters, which you can learn more about on our",
       "linkText": "help guides"
+    },
+    "selectService": {
+      "title": "Add A Preprint",
+      "sectionTitle": "Select a preprint service",
+      "description": "A preprint is a version of a scholarly or scientific paper that is posted online before it has undergone formal peer review and published in a scientific journal.",
+      "learnMore": "Learn more",
+      "providerLogoImageAlt": "Provider Logo"
     }
   },
   "truncatedText": {
diff --git a/src/assets/styles/components/preprints.scss b/src/assets/styles/components/preprints.scss
index db2b59aca..88fae462e 100644
--- a/src/assets/styles/components/preprints.scss
+++ b/src/assets/styles/components/preprints.scss
@@ -15,6 +15,12 @@
     line-height: mix.rem(24px);
   }
 
+  .search-container {
+    .search-input:hover {
+      border-color: var(--preprints-branding-primary-color);
+    }
+  }
+
   a {
     color: var(--preprints-branding-primary-color);
   }
@@ -23,6 +29,7 @@
     .p-button {
       color: var(--preprints-branding-secondary-color);
       background-color: var(--preprints-branding-primary-color);
+      border-color: var(--preprints-branding-secondary-color);
     }
   }
 }
diff --git a/src/assets/styles/overrides/select.scss b/src/assets/styles/overrides/select.scss
index c294057d3..144800069 100644
--- a/src/assets/styles/overrides/select.scss
+++ b/src/assets/styles/overrides/select.scss
@@ -77,7 +77,6 @@
 
   .p-select {
     border: none;
-    font-size: mix.rem(14px);
     box-shadow: none;
     height: 2rem;
 
@@ -109,7 +108,6 @@
 .filter {
   .p-select {
     .p-select-label {
-      font-size: 1.2rem;
       font-weight: 400;
       color: var.$dark-blue-1;
       padding-right: 0.5rem;