diff --git a/src/app/core/components/nav-menu/nav-menu.component.html b/src/app/core/components/nav-menu/nav-menu.component.html
index 5958a21cb..8a0cb1716 100644
--- a/src/app/core/components/nav-menu/nav-menu.component.html
+++ b/src/app/core/components/nav-menu/nav-menu.component.html
@@ -1,5 +1,5 @@
 <nav class="nav-menu">
-  <p-panelMenu [model]="mainMenuItems" [multiple]="false">
+  <p-panelMenu [model]="mainMenuItems()" [multiple]="false">
     <ng-template #item let-item>
       <a
         [routerLink]="item.routerLink"
diff --git a/src/app/core/components/nav-menu/nav-menu.component.ts b/src/app/core/components/nav-menu/nav-menu.component.ts
index 035c14c66..78ea01bb3 100644
--- a/src/app/core/components/nav-menu/nav-menu.component.ts
+++ b/src/app/core/components/nav-menu/nav-menu.component.ts
@@ -24,7 +24,6 @@ export class NavMenuComponent {
   private readonly route = inject(ActivatedRoute);
   protected readonly navItems = NAV_ITEMS;
   protected readonly myProjectMenuItems = PROJECT_MENU_ITEMS;
-  protected readonly mainMenuItems = this.navItems.map((item) => this.convertToMenuItem(item));
 
   closeMenu = output<void>();
 
@@ -40,8 +39,17 @@ export class NavMenuComponent {
 
   protected readonly currentProjectId = computed(() => this.currentRoute().projectId);
   protected readonly isProjectRoute = computed(() => !!this.currentProjectId());
+  protected readonly isCollectionsRoute = computed(() => this.currentRoute().isCollectionsWithId);
 
-  convertToMenuItem(item: NavItem): MenuItem {
+  protected readonly mainMenuItems = computed(() => {
+    const filteredItems = this.isCollectionsRoute()
+      ? this.navItems
+      : this.navItems.filter((item) => item.path !== '/collections');
+
+    return filteredItems.map((item) => this.convertToMenuItem(item));
+  });
+
+  private convertToMenuItem(item: NavItem): MenuItem {
     const currentUrl = this.router.url;
     const isExpanded =
       item.isCollapsible &&
@@ -57,11 +65,20 @@ export class NavMenuComponent {
     };
   }
 
-  getRouteInfo() {
+  private getRouteInfo() {
+    const url = this.router.url;
+    const urlSegments = url.split('/').filter((segment) => segment);
+
     const projectId = this.route.firstChild?.snapshot.params['id'] || null;
     const section = this.route.firstChild?.firstChild?.snapshot.url[0]?.path || 'overview';
 
-    return { projectId, section };
+    const isCollectionsWithId = urlSegments[0] === 'collections' && urlSegments[1] && urlSegments[1] !== '';
+
+    return {
+      projectId,
+      section,
+      isCollectionsWithId,
+    };
   }
 
   goToLink(item: MenuItem) {
diff --git a/src/app/core/services/json-api.service.ts b/src/app/core/services/json-api.service.ts
index 496aff0f1..351949b06 100644
--- a/src/app/core/services/json-api.service.ts
+++ b/src/app/core/services/json-api.service.ts
@@ -38,11 +38,9 @@ export class JsonApiService {
   }
 
   post<T>(url: string, body?: unknown, params?: Record<string, unknown>): Observable<T> {
-    return this.http
-      .post<JsonApiResponse<T, null>>(url, body, {
-        params: this.buildHttpParams(params),
-      })
-      .pipe(map((response) => response.data));
+    return this.http.post<T>(url, body, {
+      params: this.buildHttpParams(params),
+    });
   }
 
   patch<T>(url: string, body: unknown): Observable<T> {
diff --git a/src/app/features/collections/collections.component.html b/src/app/features/collections/collections.component.html
index 7599339c8..3c453bfa4 100644
--- a/src/app/features/collections/collections.component.html
+++ b/src/app/features/collections/collections.component.html
@@ -1,23 +1,33 @@
-<section class="collections flex flex-column flex-1 mt-0 sm:mt-5 xl:mt-7">
-  <div class="collections-sub-header flex justify-content-between flex-column gap-4 mb-4 sm:mb-6 sm:gap-0 sm:flex-row">
-    <div class="flex gap-3">
-      <i class="collections-icon text-white osf-icon-collections"></i>
-      <h1 class="flex align-items-center text-white">Collection Title</h1>
-    </div>
+@if (!isProviderLoading()) {
+  <section class="collections flex flex-column flex-1 pt-0 xl:pt-5">
+    <div
+      class="collections-sub-header flex justify-content-between flex-column gap-4 mb-4 sm:mb-6 sm:gap-0 sm:flex-row"
+    >
+      <div class="flex gap-3">
+        <i class="collections-icon text-white osf-icon-collections"></i>
+        <h1 class="flex align-items-center text-white">{{ collectionProvider()?.name }}</h1>
+      </div>
 
-    <p-button class="collections-heading-btn" [label]="'collections.buttons.addToCollection' | translate" />
-  </div>
+      <p-button class="collections-heading-btn" [label]="'collections.buttons.addToCollection' | translate" />
+    </div>
 
-  <div class="search-input-container">
-    <osf-search-input
-      [control]="searchControl"
-      [showHelpIcon]="true"
-      [placeholder]="'collections.searchInput.placeholder' | translate"
-      (helpClicked)="openHelpDialog()"
-    />
-  </div>
+    <div class="search-input-container">
+      <osf-search-input
+        [control]="searchControl"
+        [showHelpIcon]="true"
+        [placeholder]="'collections.searchInput.placeholder' | translate"
+        (helpClicked)="openHelpDialog()"
+        (triggerSearch)="onSearchTriggered($event)"
+      />
+      @if (collectionProvider()?.description) {
+        <div class="mt-6 text-white" [innerHTML]="collectionProvider()?.description"></div>
+      }
+    </div>
 
-  <div class="content-container flex-1">
-    <osf-collections-main-content />
-  </div>
-</section>
+    <div class="content-container flex-1">
+      <osf-collections-main-content />
+    </div>
+  </section>
+} @else {
+  <osf-loading-spinner />
+}
diff --git a/src/app/features/collections/collections.component.scss b/src/app/features/collections/collections.component.scss
index 1b8a768d2..8130f60ee 100644
--- a/src/app/features/collections/collections.component.scss
+++ b/src/app/features/collections/collections.component.scss
@@ -3,38 +3,36 @@
 
 :host {
   --collection-bg-color: #013b5c;
-  display: flex;
-  flex-direction: column;
+  @include mix.flex-column;
   flex: 1;
+}
 
-  .collections {
-    background: var(--collection-bg-color);
-    border: 2px solid var.$white;
-    border-top: none;
+.collections {
+  background: var(--collection-bg-color);
+  border-top: none;
 
-    .collections-sub-header {
-      margin: mix.rem(48px) mix.rem(28px);
+  .collections-sub-header {
+    margin: mix.rem(48px) mix.rem(28px);
 
-      .collections-icon {
-        font-size: mix.rem(42px);
-      }
+    .collections-icon {
+      font-size: mix.rem(42px);
     }
+  }
 
-    .search-input-container {
-      margin: 0 mix.rem(28px) mix.rem(48px) mix.rem(28px);
-      position: relative;
+  .search-input-container {
+    margin: 0 mix.rem(28px) mix.rem(48px) mix.rem(28px);
+    position: relative;
 
-      img {
-        position: absolute;
-        right: mix.rem(4px);
-        top: mix.rem(4px);
-        z-index: 1;
-      }
+    img {
+      position: absolute;
+      right: mix.rem(4px);
+      top: mix.rem(4px);
+      z-index: 1;
     }
+  }
 
-    .content-container {
-      background: var.$white;
-      padding: mix.rem(28px);
-    }
+  .content-container {
+    background: var.$white;
+    padding: mix.rem(28px);
   }
 }
diff --git a/src/app/features/collections/collections.component.ts b/src/app/features/collections/collections.component.ts
index 84fa26121..a67424424 100644
--- a/src/app/features/collections/collections.component.ts
+++ b/src/app/features/collections/collections.component.ts
@@ -1,28 +1,77 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { DialogService } from 'primeng/dynamicdialog';
 
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { debounceTime } from 'rxjs';
+
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, effect, inject, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import { CollectionsHelpDialogComponent, CollectionsMainContentComponent } from '@osf/features/collections/components';
-import { SearchInputComponent } from '@shared/components';
+import { CollectionsFilters } from '@osf/features/collections/models';
+import { CollectionsQuerySyncService } from '@osf/features/collections/services';
+import {
+  ClearCollections,
+  ClearCollectionSubmissions,
+  CollectionsSelectors,
+  GetCollectionDetails,
+  GetCollectionProvider,
+  GetCollectionSubmissions,
+  SetPageNumber,
+  SetSearchValue,
+} from '@osf/features/collections/store';
+import { LoadingSpinnerComponent, SearchInputComponent } from '@shared/components';
 
 @Component({
   selector: 'osf-collections',
-  imports: [SearchInputComponent, TranslatePipe, Button, CollectionsMainContentComponent],
+  imports: [SearchInputComponent, TranslatePipe, Button, CollectionsMainContentComponent, LoadingSpinnerComponent],
   templateUrl: './collections.component.html',
   styleUrl: './collections.component.scss',
-  providers: [DialogService],
+  providers: [DialogService, CollectionsQuerySyncService],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CollectionsComponent {
-  protected dialogService = inject(DialogService);
-  protected translateService = inject(TranslateService);
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+  private dialogService = inject(DialogService);
+  private translateService = inject(TranslateService);
+  private querySyncService = inject(CollectionsQuerySyncService);
+  private destroyRef = inject(DestroyRef);
+
   protected searchControl = new FormControl('');
+  protected providerId = signal<string>('');
+
+  protected collectionProvider = select(CollectionsSelectors.getCollectionProvider);
+  protected collectionDetails = select(CollectionsSelectors.getCollectionDetails);
+  protected selectedFilters = select(CollectionsSelectors.getAllSelectedFilters);
+  protected sortBy = select(CollectionsSelectors.getSortBy);
+  protected searchText = select(CollectionsSelectors.getSearchText);
+  protected pageNumber = select(CollectionsSelectors.getPageNumber);
+  protected isProviderLoading = select(CollectionsSelectors.getCollectionProviderLoading);
+  protected primaryCollectionId = computed(() => this.collectionProvider()?.primaryCollection?.id);
 
-  openHelpDialog() {
+  protected actions = createDispatchMap({
+    getCollectionProvider: GetCollectionProvider,
+    getCollectionDetails: GetCollectionDetails,
+    setSearchValue: SetSearchValue,
+    getCollectionSubmissions: GetCollectionSubmissions,
+    setPageNumber: SetPageNumber,
+    clearCollections: ClearCollections,
+    clearCollectionsSubmissions: ClearCollectionSubmissions,
+  });
+
+  constructor() {
+    this.initializeProvider();
+    this.setupEffects();
+    this.setupSearchBinding();
+  }
+
+  protected openHelpDialog(): void {
     this.dialogService.open(CollectionsHelpDialogComponent, {
       focusOnShow: false,
       header: this.translateService.instant('collections.helpDialog.header'),
@@ -31,4 +80,95 @@ export class CollectionsComponent {
       closable: true,
     });
   }
+
+  protected onSearchTriggered(searchValue: string): void {
+    this.actions.setSearchValue(searchValue);
+    this.actions.setPageNumber('1');
+  }
+
+  private initializeProvider(): void {
+    const id = this.route.snapshot.paramMap.get('id');
+    if (!id) {
+      this.router.navigate(['/not-found']);
+      return;
+    }
+
+    this.providerId.set(id);
+    this.actions.getCollectionProvider(id);
+  }
+
+  private setupEffects(): void {
+    this.querySyncService.initializeFromUrl();
+
+    effect(() => {
+      const collectionId = this.primaryCollectionId();
+      if (collectionId) {
+        this.actions.getCollectionDetails(collectionId);
+      }
+    });
+
+    effect(() => {
+      const searchText = this.searchText();
+      const sortBy = this.sortBy();
+      const selectedFilters = this.selectedFilters();
+      const pageNumber = this.pageNumber();
+
+      if (searchText !== undefined && sortBy !== undefined && selectedFilters && pageNumber) {
+        this.querySyncService.syncStoreToUrl(searchText, sortBy, selectedFilters, pageNumber);
+      }
+    });
+
+    effect(() => {
+      const searchText = this.searchText();
+      const sortBy = this.sortBy();
+      const selectedFilters = this.selectedFilters();
+      const pageNumber = this.pageNumber();
+      const providerId = this.providerId();
+      const collectionDetails = this.collectionDetails();
+
+      if (searchText !== undefined && selectedFilters && pageNumber && providerId && collectionDetails) {
+        const activeFilters = this.getActiveFilters(selectedFilters);
+        this.actions.clearCollectionsSubmissions();
+        this.actions.getCollectionSubmissions(providerId, searchText, activeFilters, pageNumber, sortBy);
+      }
+    });
+
+    effect(() => {
+      this.destroyRef.onDestroy(() => {
+        this.actions.clearCollections();
+      });
+    });
+  }
+
+  private getActiveFilters(filters: CollectionsFilters): Record<string, string[]> {
+    return Object.entries(filters)
+      .filter(([key, value]) => value.length)
+      .reduce(
+        (acc, [key, value]) => {
+          acc[key] = value;
+          return acc;
+        },
+        {} as Record<string, string[]>
+      );
+  }
+
+  private setupSearchBinding(): void {
+    effect(() => {
+      const storeSearchText = this.searchText();
+      const currentControlValue = this.searchControl.value;
+
+      if (storeSearchText !== currentControlValue) {
+        this.searchControl.setValue(storeSearchText, { emitEvent: false });
+      }
+    });
+
+    this.searchControl.valueChanges
+      .pipe(debounceTime(300), takeUntilDestroyed(this.destroyRef))
+      .subscribe((searchValue) => {
+        const trimmedValue = searchValue?.trim() || '';
+        if (trimmedValue !== this.searchText()) {
+          this.actions.setSearchValue(trimmedValue);
+        }
+      });
+  }
 }
diff --git a/src/app/features/collections/collections.routes.ts b/src/app/features/collections/collections.routes.ts
index 5b3337107..92e1ce67e 100644
--- a/src/app/features/collections/collections.routes.ts
+++ b/src/app/features/collections/collections.routes.ts
@@ -2,8 +2,6 @@ import { provideStates } from '@ngxs/store';
 
 import { Routes } from '@angular/router';
 
-import { CollectionsComponent } from '@osf/features/collections/collections.component';
-
 import { ModerationState } from '../moderation/store';
 
 export const collectionsRoutes: Routes = [
@@ -13,10 +11,18 @@ export const collectionsRoutes: Routes = [
       {
         path: '',
         pathMatch: 'full',
-        component: CollectionsComponent,
+        loadComponent: () =>
+          import('@core/components/page-not-found/page-not-found.component').then((mod) => mod.PageNotFoundComponent),
+        data: { skipBreadcrumbs: true },
+      },
+      {
+        path: ':id',
+        pathMatch: 'full',
+        loadComponent: () =>
+          import('@osf/features/collections/collections.component').then((mod) => mod.CollectionsComponent),
       },
       {
-        path: 'moderation',
+        path: ':id/moderation',
         loadComponent: () =>
           import('@osf/features/moderation/pages/collection-moderation/collection-moderation.component').then(
             (m) => m.CollectionModerationComponent
diff --git a/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.html b/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.html
index fc3376e45..8ca68fb59 100644
--- a/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.html
+++ b/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.html
@@ -1,23 +1,13 @@
 <div class="mb-4 mt-4 flex gap-3 flex-wrap">
-  @if (activeFilters().programArea.length) {
-    @for (filter of activeFilters().programArea; track filter) {
+  @for (filterEntry of activeFilterEntries(); track filterEntry.key) {
+    @for (filter of filterEntry.filters; track filter) {
       <p-chip
         [label]="filter"
         removeIcon="fas fa-close"
-        removable
-        (onRemove)="onRemoveProgramAreaFilter(filter)"
-      ></p-chip>
-    }
-  }
-
-  @if (activeFilters().collectedType.length) {
-    @for (filter of activeFilters().collectedType; track filter) {
-      <p-chip
-        [label]="filter"
-        removeIcon="fas fa-close"
-        removable
-        (onRemove)="onRemoveProgramAreaFilter(filter)"
-      ></p-chip>
+        [removable]="true"
+        (onRemove)="onRemoveFilter(filterEntry.key, filter)"
+      >
+      </p-chip>
     }
   }
 </div>
diff --git a/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.ts b/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.ts
index 71f89cf53..d57452e8d 100644
--- a/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.ts
+++ b/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.ts
@@ -2,9 +2,23 @@ import { createDispatchMap, select } from '@ngxs/store';
 
 import { Chip } from 'primeng/chip';
 
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
 
-import { CollectionsSelectors, SetCollectedTypeFilters, SetProgramAreaFilters } from '@osf/features/collections/store';
+import { collectionFilterTypes } from '@osf/features/collections/constants/filter-types.const';
+import { CollectionFilterType } from '@osf/features/collections/enums';
+import {
+  CollectionsSelectors,
+  SetCollectedTypeFilters,
+  SetDataTypeFilters,
+  SetDiseaseFilters,
+  SetGradeLevelsFilters,
+  SetIssueFilters,
+  SetProgramAreaFilters,
+  SetSchoolTypeFilters,
+  SetStatusFilters,
+  SetStudyDesignFilters,
+  SetVolumeFilters,
+} from '@osf/features/collections/store';
 
 @Component({
   selector: 'osf-collections-filter-chips',
@@ -14,19 +28,67 @@ import { CollectionsSelectors, SetCollectedTypeFilters, SetProgramAreaFilters }
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CollectionsFilterChipsComponent {
-  protected activeFilters = select(CollectionsSelectors.getAllFilters);
+  protected activeFilters = select(CollectionsSelectors.getAllSelectedFilters);
+
+  private readonly filterTypes = collectionFilterTypes;
+
   protected actions = createDispatchMap({
-    setProgramAreaFilters: SetProgramAreaFilters,
-    setCollectedTypeFilters: SetCollectedTypeFilters,
+    programArea: SetProgramAreaFilters,
+    collectedType: SetCollectedTypeFilters,
+    status: SetStatusFilters,
+    dataType: SetDataTypeFilters,
+    disease: SetDiseaseFilters,
+    gradeLevels: SetGradeLevelsFilters,
+    issue: SetIssueFilters,
+    schoolType: SetSchoolTypeFilters,
+    studyDesign: SetStudyDesignFilters,
+    volume: SetVolumeFilters,
   });
 
-  protected onRemoveProgramAreaFilter(removedFilter: string): void {
-    const currentFilters = this.activeFilters().programArea.filter((filter) => filter !== removedFilter);
-    this.actions.setProgramAreaFilters(currentFilters);
-  }
+  protected activeFilterEntries = computed(() => {
+    const filters = this.activeFilters();
+    return this.filterTypes
+      .map((key) => ({
+        key,
+        filters: filters[key] || [],
+      }))
+      .filter((entry) => entry.filters.length);
+  });
+
+  protected onRemoveFilter(filterType: CollectionFilterType, removedFilter: string): void {
+    const currentFilters = this.activeFilters()[filterType].filter((filter: string) => filter !== removedFilter);
 
-  protected onRemoveCollectedTypeFilter(removedFilter: string): void {
-    const currentFilters = this.activeFilters().collectedType.filter((filter) => filter !== removedFilter);
-    this.actions.setCollectedTypeFilters(currentFilters);
+    switch (filterType) {
+      case CollectionFilterType.ProgramArea:
+        this.actions.programArea(currentFilters);
+        break;
+      case CollectionFilterType.CollectedType:
+        this.actions.collectedType(currentFilters);
+        break;
+      case CollectionFilterType.Status:
+        this.actions.status(currentFilters);
+        break;
+      case CollectionFilterType.DataType:
+        this.actions.dataType(currentFilters);
+        break;
+      case CollectionFilterType.Disease:
+        this.actions.disease(currentFilters);
+        break;
+      case CollectionFilterType.GradeLevels:
+        this.actions.gradeLevels(currentFilters);
+        break;
+      case CollectionFilterType.Issue:
+        this.actions.issue(currentFilters);
+        break;
+      case CollectionFilterType.SchoolType:
+        this.actions.schoolType(currentFilters);
+        break;
+      case CollectionFilterType.StudyDesign:
+        this.actions.studyDesign(currentFilters);
+        break;
+      case CollectionFilterType.Volume:
+        this.actions.volume(currentFilters);
+        break;
+    }
   }
 }
diff --git a/src/app/features/collections/components/collections-filters/collections-filters.component.html b/src/app/features/collections/components/collections-filters/collections-filters.component.html
index 2602d55a8..81114d797 100644
--- a/src/app/features/collections/components/collections-filters/collections-filters.component.html
+++ b/src/app/features/collections/components/collections-filters/collections-filters.component.html
@@ -1,43 +1,25 @@
 <div class="filters">
   <p-accordion>
-    <p-accordion-panel value="0">
-      <p-accordion-header>{{ 'collections.filters.programArea.label' | translate }}</p-accordion-header>
-      <p-accordion-content>
-        <div class="content-body">
-          <p>{{ 'collections.filters.programArea.description' | translate }}</p>
-          <p-multi-select
-            id="program-area"
-            [options]="programAreaFilterOptions"
-            [ngModel]="selectedProgramAreaFilters()"
-            [placeholder]="'collections.filters.programArea.placeholder' | translate"
-            appendTo="body"
-            (onChange)="setProgramAreaFilters($event)"
-            (onClear)="clearProgramAreaFilters()"
-            [maxSelectedLabels]="1"
-            [showClear]="selectedProgramAreaFilters().length"
-          ></p-multi-select>
-        </div>
-      </p-accordion-content>
-    </p-accordion-panel>
-
-    <p-accordion-panel value="1">
-      <p-accordion-header>{{ 'collections.filters.collectedType.label' | translate }}</p-accordion-header>
-      <p-accordion-content>
-        <div class="content-body">
-          <p>{{ 'collections.filters.collectedType.description' | translate }}</p>
-          <p-multi-select
-            id="collected-type"
-            [options]="collectedTypeFilterOptions"
-            [ngModel]="selectedCollectedTypeFilters()"
-            [placeholder]="'collections.filters.collectedType.placeholder' | translate"
-            appendTo="body"
-            [maxSelectedLabels]="1"
-            (onChange)="setCollectedTypeFilters($event)"
-            (onClear)="clearCollectedTypeFilters()"
-            [showClear]="selectedCollectedTypeFilters().length"
-          ></p-multi-select>
-        </div>
-      </p-accordion-content>
-    </p-accordion-panel>
+    @for (filterEntry of availableFilterEntries(); track filterEntry.key) {
+      <p-accordion-panel [value]="filterEntry.value">
+        <p-accordion-header>{{ filterEntry.translationKeys.label | translate }}</p-accordion-header>
+        <p-accordion-content>
+          <div class="content-body filter dropdown-filter">
+            <p>{{ filterEntry.translationKeys.description | translate }}</p>
+            <p-multi-select
+              [id]="filterEntry.key"
+              [options]="filterEntry.options"
+              [ngModel]="filterEntry.selectedFilters"
+              [placeholder]="filterEntry.translationKeys.placeholder | translate"
+              appendTo="body"
+              [maxSelectedLabels]="1"
+              (onChange)="setFilters(filterEntry.key, $event)"
+              (onClear)="clearFilters(filterEntry.key)"
+              [showClear]="filterEntry.selectedFilters.length"
+            ></p-multi-select>
+          </div>
+        </p-accordion-content>
+      </p-accordion-panel>
+    }
   </p-accordion>
 </div>
diff --git a/src/app/features/collections/components/collections-filters/collections-filters.component.scss b/src/app/features/collections/components/collections-filters/collections-filters.component.scss
index 70e03e0e1..26925ce05 100644
--- a/src/app/features/collections/components/collections-filters/collections-filters.component.scss
+++ b/src/app/features/collections/components/collections-filters/collections-filters.component.scss
@@ -1,16 +1,12 @@
 @use "assets/styles/variables" as var;
 @use "assets/styles/mixins" as mix;
 
-:host {
-  width: 35%;
-
-  .filters {
-    border: 1px solid var.$grey-2;
-    border-radius: mix.rem(12px);
-    padding: 0 mix.rem(20px);
-    display: flex;
-    flex-direction: column;
-    gap: mix.rem(12px);
-    height: fit-content;
-  }
+.filters {
+  border: 1px solid var.$grey-2;
+  border-radius: mix.rem(12px);
+  padding: 0 mix.rem(20px);
+  display: flex;
+  flex-direction: column;
+  gap: mix.rem(12px);
+  height: fit-content;
 }
diff --git a/src/app/features/collections/components/collections-filters/collections-filters.component.ts b/src/app/features/collections/components/collections-filters/collections-filters.component.ts
index fa84205e9..dac9d23d2 100644
--- a/src/app/features/collections/components/collections-filters/collections-filters.component.ts
+++ b/src/app/features/collections/components/collections-filters/collections-filters.component.ts
@@ -5,11 +5,24 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { Accordion, AccordionContent, AccordionHeader, AccordionPanel } from 'primeng/accordion';
 import { MultiSelect, MultiSelectChangeEvent } from 'primeng/multiselect';
 
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { CollectionsSelectors, SetCollectedTypeFilters, SetProgramAreaFilters } from '@osf/features/collections/store';
-import { COLLECTED_TYPE_FILTERS_OPTIONS, PROGRAM_AREA_FILTERS_OPTIONS } from '@osf/features/collections/utils';
+import { collectionFilterTypes } from '@osf/features/collections/constants/filter-types.const';
+import { CollectionFilterType } from '@osf/features/collections/enums';
+import {
+  CollectionsSelectors,
+  SetCollectedTypeFilters,
+  SetDataTypeFilters,
+  SetDiseaseFilters,
+  SetGradeLevelsFilters,
+  SetIssueFilters,
+  SetProgramAreaFilters,
+  SetSchoolTypeFilters,
+  SetStatusFilters,
+  SetStudyDesignFilters,
+  SetVolumeFilters,
+} from '@osf/features/collections/store';
 
 @Component({
   selector: 'osf-collections-filters',
@@ -19,32 +32,81 @@ import { COLLECTED_TYPE_FILTERS_OPTIONS, PROGRAM_AREA_FILTERS_OPTIONS } from '@o
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CollectionsFiltersComponent {
-  protected selectedProgramAreaFilters = select(CollectionsSelectors.getProgramAreaFilters);
-  protected selectedCollectedTypeFilters = select(CollectionsSelectors.getCollectedTypeFilters);
+  private readonly filterTypes = collectionFilterTypes;
+
+  protected filtersOptions = select(CollectionsSelectors.getAllFiltersOptions);
+  protected selectedFilters = select(CollectionsSelectors.getAllSelectedFilters);
+
   protected actions = createDispatchMap({
-    setProgramAreaFilters: SetProgramAreaFilters,
-    setCollectedTypeFilters: SetCollectedTypeFilters,
+    programArea: SetProgramAreaFilters,
+    collectedType: SetCollectedTypeFilters,
+    status: SetStatusFilters,
+    dataType: SetDataTypeFilters,
+    disease: SetDiseaseFilters,
+    gradeLevels: SetGradeLevelsFilters,
+    issue: SetIssueFilters,
+    schoolType: SetSchoolTypeFilters,
+    studyDesign: SetStudyDesignFilters,
+    volume: SetVolumeFilters,
   });
 
-  // Mocked filter options data
-  protected readonly programAreaFilterOptions = PROGRAM_AREA_FILTERS_OPTIONS;
-  protected readonly collectedTypeFilterOptions = COLLECTED_TYPE_FILTERS_OPTIONS;
+  protected availableFilterEntries = computed(() => {
+    const options = this.filtersOptions();
+    const selectedFilters = this.selectedFilters();
 
-  setProgramAreaFilters($event: MultiSelectChangeEvent): void {
-    const filters = $event.value;
-    this.actions.setProgramAreaFilters(filters);
-  }
+    return this.filterTypes
+      .map((key, index) => ({
+        key,
+        value: index.toString(),
+        options: options[key] || [],
+        selectedFilters: selectedFilters[key] || [],
+        translationKeys: {
+          label: `collections.filters.${key}.label`,
+          description: `collections.filters.${key}.description`,
+          placeholder: `collections.filters.${key}.placeholder`,
+        },
+      }))
+      .filter((entry) => entry.options.length > 0);
+  });
 
-  setCollectedTypeFilters($event: MultiSelectChangeEvent): void {
+  protected setFilters(filterType: CollectionFilterType, $event: MultiSelectChangeEvent): void {
     const filters = $event.value;
-    this.actions.setCollectedTypeFilters(filters);
-  }
 
-  clearProgramAreaFilters(): void {
-    this.actions.setProgramAreaFilters([]);
+    switch (filterType) {
+      case CollectionFilterType.ProgramArea:
+        this.actions.programArea(filters);
+        break;
+      case CollectionFilterType.CollectedType:
+        this.actions.collectedType(filters);
+        break;
+      case CollectionFilterType.Status:
+        this.actions.status(filters);
+        break;
+      case CollectionFilterType.DataType:
+        this.actions.dataType(filters);
+        break;
+      case CollectionFilterType.Disease:
+        this.actions.disease(filters);
+        break;
+      case CollectionFilterType.GradeLevels:
+        this.actions.gradeLevels(filters);
+        break;
+      case CollectionFilterType.Issue:
+        this.actions.issue(filters);
+        break;
+      case CollectionFilterType.SchoolType:
+        this.actions.schoolType(filters);
+        break;
+      case CollectionFilterType.StudyDesign:
+        this.actions.studyDesign(filters);
+        break;
+      case CollectionFilterType.Volume:
+        this.actions.volume(filters);
+        break;
+    }
   }
 
-  clearCollectedTypeFilters(): void {
-    this.actions.setCollectedTypeFilters([]);
+  protected clearFilters(filterType: CollectionFilterType): void {
+    this.setFilters(filterType, { value: [] } as MultiSelectChangeEvent);
   }
 }
diff --git a/src/app/features/collections/components/collections-help-dialog/collections-help-dialog.component.html b/src/app/features/collections/components/collections-help-dialog/collections-help-dialog.component.html
index b1380cba9..4cd774891 100644
--- a/src/app/features/collections/components/collections-help-dialog/collections-help-dialog.component.html
+++ b/src/app/features/collections/components/collections-help-dialog/collections-help-dialog.component.html
@@ -1,5 +1,5 @@
 <div class="dialog-content">
-  <p class="py-3">
+  <p class="py-3 max-w-30rem">
     {{ 'collections.helpDialog.message' | translate }}
     <a href="https://help.osf.io/article/398-osf-collections" target="_blank"
       >{{ 'collections.helpDialog.linkText' | translate }}.</a
diff --git a/src/app/features/collections/components/collections-main-content/collections-main-content.component.html b/src/app/features/collections/components/collections-main-content/collections-main-content.component.html
index e6cbb9b46..b098a0dd5 100644
--- a/src/app/features/collections/components/collections-main-content/collections-main-content.component.html
+++ b/src/app/features/collections/components/collections-main-content/collections-main-content.component.html
@@ -1,9 +1,11 @@
 <div class="flex justify-content-between align-items-center mb-4 column-gap-3">
   <div class="flex flex-1 flex-column gap-7 results-count-heading">
-    @if (searchCount() > 10000) {
+    @if (collectionSubmissions().length) {
+      <h3 class="highlight">
+        {{ collectionSubmissions().length }} {{ 'collections.searchResults.results' | translate }}
+      </h3>
+    } @else if (collectionSubmissions().length > 10000) {
       <h3 class="highlight">{{ 'collections.searchResults.10000results' | translate }}</h3>
-    } @else if (searchCount() > 0) {
-      <h3 class="highlight">{{ searchCount() }} {{ 'collections.searchResults.results' | translate }}</h3>
     } @else {
       <h3 class="highlight">{{ 'collections.searchResults.noResults' | translate }}</h3>
     }
@@ -11,17 +13,27 @@ <h3 class="highlight">{{ 'collections.searchResults.noResults' | translate }}</h
 
   <div class="flex align-items-center gap-2">
     @if (isWeb()) {
-      <h3 class="font-normal">{{ 'collections.filters.sort.label' | translate }}</h3>
+      <p>{{ 'collections.filters.sort.label' | translate }}</p>
       <p-select
-        class="no-border-dropdown"
+        class="no-border-dropdown font-bold"
         [options]="sortOptions"
         optionLabel="label"
         optionValue="value"
-        [(ngModel)]="selectedSort"
-      ></p-select>
+        [ngModel]="selectedSort()"
+        (ngModelChange)="handleSortBy($event)"
+        appendTo="body"
+      >
+        <ng-template #selectedItem let-selectedOption>
+          {{ selectedOption.label | translate }}
+        </ng-template>
+        <ng-template #item let-option>
+          {{ option.label | translate }}
+        </ng-template>
+      </p-select>
     } @else {
       <img
         ngSrc="assets/icons/colored/filter.svg"
+        class="custom-dark-hover cursor-pointer"
         tabindex="0"
         role="button"
         alt="filter by"
@@ -38,7 +50,7 @@ <h3 class="font-normal">{{ 'collections.filters.sort.label' | translate }}</h3>
         alt="sort by"
         width="44"
         height="44"
-        class="ml-2"
+        class="custom-dark-hover cursor-pointer ml-2"
         (keydown.enter)="openSorting()"
         (click)="openSorting()"
       />
@@ -58,22 +70,26 @@ <h3 class="font-normal">{{ 'collections.filters.sort.label' | translate }}</h3>
         tabindex="0"
         role="button"
         [class]="{ 'card-selected': selectedSort() === option.value }"
-        (click)="selectSort(option.value)"
-        (keydown.enter)="selectSort(option.value)"
+        (click)="handleSortBy(option.value)"
+        (keydown.enter)="handleSortBy(option.value)"
       >
-        {{ option.label }}
+        {{ option.label | translate }}
       </div>
     }
   </div>
 } @else {
-  @if (isAnyFilterSelected()) {
+  @if (hasAnySelectedFilters()) {
     <osf-collections-filter-chips />
   }
 }
 
 <div class="flex column-gap-4 filters-resources-web">
   @if (isWeb()) {
-    <osf-collections-filters />
+    @if (!isCollectionLoading()) {
+      <osf-collections-filters />
+    } @else {
+      <p-skeleton width="23.9rem" height="30rem" />
+    }
   }
 
   <osf-collections-search-results />
diff --git a/src/app/features/collections/components/collections-main-content/collections-main-content.component.ts b/src/app/features/collections/components/collections-main-content/collections-main-content.component.ts
index 2d8a090ac..ad011abec 100644
--- a/src/app/features/collections/components/collections-main-content/collections-main-content.component.ts
+++ b/src/app/features/collections/components/collections-main-content/collections-main-content.component.ts
@@ -1,19 +1,20 @@
-import { select } from '@ngxs/store';
+import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { Select } from 'primeng/select';
+import { Skeleton } from 'primeng/skeleton';
 
 import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 
-import { CollectionsSelectors } from '@osf/features/collections/store';
-import { SORT_OPTIONS } from '@osf/features/collections/utils';
+import { CollectionsFilterChipsComponent } from '@osf/features/collections/components';
+import { collectionsSortOptions } from '@osf/features/collections/constants';
+import { CollectionsSelectors, SetSortBy } from '@osf/features/collections/store';
 import { IS_WEB } from '@shared/utils';
 
-import { CollectionsFilterChipsComponent } from '../collections-filter-chips/collections-filter-chips.component';
 import { CollectionsFiltersComponent } from '../collections-filters/collections-filters.component';
 import { CollectionsSearchResultsComponent } from '../collections-search-results/collections-search-results.component';
 
@@ -27,56 +28,40 @@ import { CollectionsSearchResultsComponent } from '../collections-search-results
     CollectionsFilterChipsComponent,
     CollectionsFiltersComponent,
     CollectionsSearchResultsComponent,
+    Skeleton,
   ],
   templateUrl: './collections-main-content.component.html',
   styleUrl: './collections-main-content.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CollectionsMainContentComponent {
-  protected readonly sortOptions = SORT_OPTIONS;
-  protected selectedSort = signal('-relevance');
-  protected searchCount = signal(3);
-
+  protected readonly sortOptions = collectionsSortOptions;
   protected isWeb = toSignal(inject(IS_WEB));
+  protected selectedSort = select(CollectionsSelectors.getSortBy);
+  protected collectionSubmissions = select(CollectionsSelectors.getCollectionSubmissions);
 
   protected isFiltersOpen = signal(false);
   protected isSortingOpen = signal(false);
 
-  protected filters = select(CollectionsSelectors.getAllFilters);
-  protected filtersOptions = select(CollectionsSelectors.getAllFiltersOptions);
+  protected selectedFilters = select(CollectionsSelectors.getAllSelectedFilters);
+  protected isCollectionProviderLoading = select(CollectionsSelectors.getCollectionProviderLoading);
+  protected isCollectionDetailsLoading = select(CollectionsSelectors.getCollectionDetailsLoading);
 
-  protected isAnyFilterSelected = computed(() => {
-    const currentFilters = this.filters();
-    return (
-      currentFilters.programArea.length ||
-      currentFilters.status.length ||
-      currentFilters.collectedType.length ||
-      currentFilters.dataType.length ||
-      currentFilters.disease.length ||
-      currentFilters.gradeLevels.length ||
-      currentFilters.issue.length ||
-      currentFilters.reviewsState.length ||
-      currentFilters.schoolType.length ||
-      currentFilters.studyDesign.length ||
-      currentFilters.volume.length
-    );
+  protected isCollectionLoading = computed(() => {
+    return this.isCollectionProviderLoading() || this.isCollectionDetailsLoading();
   });
 
-  protected isAnyFilterOptions = computed(() => {
-    const currentOptions = this.filtersOptions();
-    return (
-      currentOptions.programArea.length ||
-      currentOptions.status.length ||
-      currentOptions.collectedType.length ||
-      currentOptions.dataType.length ||
-      currentOptions.disease.length ||
-      currentOptions.gradeLevels.length ||
-      currentOptions.issue.length ||
-      currentOptions.reviewsState.length ||
-      currentOptions.schoolType.length ||
-      currentOptions.studyDesign.length ||
-      currentOptions.volume.length
-    );
+  protected hasAnySelectedFilters = computed(() => {
+    const currentFilters = this.selectedFilters();
+    const hasSelectedFiltersOptions = Object.values(currentFilters).some((value) => {
+      return value.length;
+    });
+
+    return hasSelectedFiltersOptions;
+  });
+
+  protected actions = createDispatchMap({
+    setSortBy: SetSortBy,
   });
 
   protected openFilters(): void {
@@ -89,8 +74,8 @@ export class CollectionsMainContentComponent {
     this.isFiltersOpen.set(false);
   }
 
-  protected selectSort(value: string): void {
-    this.selectedSort.set(value);
-    this.openSorting();
+  protected handleSortBy(value: string): void {
+    this.actions.setSortBy(value);
+    this.isSortingOpen.set(false);
   }
 }
diff --git a/src/app/features/collections/components/collections-search-result-card/collections-search-result-card.component.html b/src/app/features/collections/components/collections-search-result-card/collections-search-result-card.component.html
index 4af5f67c1..e8c7b3834 100644
--- a/src/app/features/collections/components/collections-search-result-card/collections-search-result-card.component.html
+++ b/src/app/features/collections/components/collections-search-result-card/collections-search-result-card.component.html
@@ -1,11 +1,13 @@
 @let item = cardItem();
 
 <div class="card w-full flex flex-column gap-3 p-5">
-  <p class="card-title font-bold">{{ item?.title }}</p>
+  <a [href]="item.nodeUrl">
+    <p class="card-title font-bold">{{ item?.title }}</p>
+  </a>
   <p>
-    by
+    {{ 'collections.common.by' | translate }}
     @for (contributor of item?.contributors; track contributor.id) {
-      <a class="font-bold cursor-pointer">{{ contributor.name }}{{ $last ? '' : ', ' }}</a>
+      <a [href]="contributor.url" class="font-bold cursor-pointer">{{ contributor.name }}{{ $last ? '' : ', ' }}</a>
     }
   </p>
   <p class="card-description">{{ item?.description }}</p>
diff --git a/src/app/features/collections/components/collections-search-result-card/collections-search-result-card.component.ts b/src/app/features/collections/components/collections-search-result-card/collections-search-result-card.component.ts
index d1e1bdc7a..f0427835f 100644
--- a/src/app/features/collections/components/collections-search-result-card/collections-search-result-card.component.ts
+++ b/src/app/features/collections/components/collections-search-result-card/collections-search-result-card.component.ts
@@ -3,8 +3,8 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
-import { CollectionSearchResultCard } from '@osf/features/collections/models';
-import { SUBMISSION_ATTRIBUTES } from '@osf/features/collections/utils';
+import { collectionFilterNames } from '@osf/features/collections/constants';
+import { CollectionSubmission } from '@osf/features/collections/models';
 
 @Component({
   selector: 'osf-collections-search-result-card',
@@ -14,15 +14,17 @@ import { SUBMISSION_ATTRIBUTES } from '@osf/features/collections/utils';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CollectionsSearchResultCardComponent {
-  cardItem = input.required<CollectionSearchResultCard>();
+  cardItem = input.required<CollectionSubmission>();
 
   protected presentSubmissionAttributes = computed(() => {
     const item = this.cardItem();
     if (!item) return [];
 
-    return SUBMISSION_ATTRIBUTES.map((attribute) => ({
-      ...attribute,
-      value: item[attribute.key as keyof CollectionSearchResultCard] as string,
-    })).filter((attribute) => attribute.value);
+    return collectionFilterNames
+      .map((attribute) => ({
+        ...attribute,
+        value: item[attribute.key as keyof CollectionSubmission] as string,
+      }))
+      .filter((attribute) => attribute.value);
   });
 }
diff --git a/src/app/features/collections/components/collections-search-results/collections-search-results.component.html b/src/app/features/collections/components/collections-search-results/collections-search-results.component.html
index 70326a14d..6cb8f6ee6 100644
--- a/src/app/features/collections/components/collections-search-results/collections-search-results.component.html
+++ b/src/app/features/collections/components/collections-search-results/collections-search-results.component.html
@@ -1,13 +1,30 @@
-<p-dataview [value]="searchResults" class="w-full" [rows]="10">
+<p-dataView [value]="searchResults()" class="collection-search-results w-full" [rows]="10">
   <ng-template #list let-items>
     <div class="flex flex-column gap-3">
-      @if (items.length) {
-        @for (item of items; track item.id) {
-          <osf-collections-search-result-card [cardItem]="item"></osf-collections-search-result-card>
-        }
+      @if (isLoading()) {
+        <p-skeleton width="100%" height="12rem" />
+        <p-skeleton width="100%" height="12rem" />
+        <p-skeleton width="100%" height="12rem" />
+      } @else {
+        @if (items.length) {
+          @for (item of items; track item.id) {
+            <osf-collections-search-result-card [cardItem]="item"></osf-collections-search-result-card>
+          }
 
-        <p-paginator class="collections-paginator" />
+          <osf-custom-paginator
+            class="collections-paginator"
+            [totalCount]="totalSubmissions()"
+            [rows]="10"
+            [first]="firstIndex()"
+            (pageChanged)="onPageChange($event)"
+          />
+        } @else {
+          <h2 class="text-center">
+            {{ 'collections.searchResults.noResultsFound' | translate }}
+          </h2>
+          <p class="text-center">{{ 'collections.searchResults.noResultsFoundMessage' | translate }}</p>
+        }
       }
     </div>
   </ng-template>
-</p-dataview>
+</p-dataView>
diff --git a/src/app/features/collections/components/collections-search-results/collections-search-results.component.ts b/src/app/features/collections/components/collections-search-results/collections-search-results.component.ts
index 1c816c7bb..5786279ed 100644
--- a/src/app/features/collections/components/collections-search-results/collections-search-results.component.ts
+++ b/src/app/features/collections/components/collections-search-results/collections-search-results.component.ts
@@ -1,20 +1,46 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
 import { DataView } from 'primeng/dataview';
-import { Paginator } from 'primeng/paginator';
+import { PaginatorState } from 'primeng/paginator';
+import { Skeleton } from 'primeng/skeleton';
 
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
 
-import { CollectionSearchResultCard } from '@osf/features/collections/models';
-import { SEARCH_RESULT_CARDS_DATA } from '@osf/features/collections/utils';
+import { CollectionsSelectors, SetPageNumber } from '@osf/features/collections/store';
+import { CustomPaginatorComponent } from '@osf/shared/components';
 
 import { CollectionsSearchResultCardComponent } from '../collections-search-result-card/collections-search-result-card.component';
 
 @Component({
   selector: 'osf-collections-search-results',
-  imports: [DataView, Paginator, CollectionsSearchResultCardComponent],
+  imports: [DataView, CustomPaginatorComponent, CollectionsSearchResultCardComponent, TranslatePipe, Skeleton],
   templateUrl: './collections-search-results.component.html',
   styleUrl: './collections-search-results.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CollectionsSearchResultsComponent {
-  protected searchResults: CollectionSearchResultCard[] = SEARCH_RESULT_CARDS_DATA;
+  protected searchResults = select(CollectionsSelectors.getCollectionSubmissions);
+  protected isCollectionDetailsLoading = select(CollectionsSelectors.getCollectionDetailsLoading);
+  protected isCollectionSubmissionsLoading = select(CollectionsSelectors.getCollectionSubmissionsLoading);
+  protected totalSubmissions = select(CollectionsSelectors.getTotalSubmissions);
+  protected pageNumber = select(CollectionsSelectors.getPageNumber);
+
+  protected actions = createDispatchMap({
+    setPageNumber: SetPageNumber,
+  });
+
+  protected isLoading = computed(() => {
+    return this.isCollectionDetailsLoading() || this.isCollectionSubmissionsLoading();
+  });
+
+  protected firstIndex = computed(() => (parseInt(this.pageNumber()) - 1) * 10);
+
+  protected onPageChange(event: PaginatorState): void {
+    if (event.page !== undefined) {
+      const pageNumber = (event.page + 1).toString();
+      this.actions.setPageNumber(pageNumber);
+    }
+  }
 }
diff --git a/src/app/features/collections/utils/submission-attributes.const.ts b/src/app/features/collections/constants/filter-names.const.ts
similarity index 82%
rename from src/app/features/collections/utils/submission-attributes.const.ts
rename to src/app/features/collections/constants/filter-names.const.ts
index a3aae7830..f5c055878 100644
--- a/src/app/features/collections/utils/submission-attributes.const.ts
+++ b/src/app/features/collections/constants/filter-names.const.ts
@@ -1,11 +1,10 @@
-export const SUBMISSION_ATTRIBUTES = [
+export const collectionFilterNames = [
   { key: 'programArea', label: 'Program Area' },
   { key: 'collectedType', label: 'Type' },
   { key: 'dataType', label: 'Data Type' },
   { key: 'disease', label: 'Disease' },
   { key: 'gradeLevels', label: 'Grade Levels' },
   { key: 'issue', label: 'Issue' },
-  { key: 'reviewsState', label: 'Reviews State' },
   { key: 'schoolType', label: 'School Type' },
   { key: 'status', label: 'Status' },
   { key: 'studyDesign', label: 'Study Design' },
diff --git a/src/app/features/collections/constants/filter-types.const.ts b/src/app/features/collections/constants/filter-types.const.ts
new file mode 100644
index 000000000..6645f4a75
--- /dev/null
+++ b/src/app/features/collections/constants/filter-types.const.ts
@@ -0,0 +1,14 @@
+import { CollectionFilterType } from '@osf/features/collections/enums';
+
+export const collectionFilterTypes: CollectionFilterType[] = [
+  CollectionFilterType.ProgramArea,
+  CollectionFilterType.CollectedType,
+  CollectionFilterType.Status,
+  CollectionFilterType.DataType,
+  CollectionFilterType.Disease,
+  CollectionFilterType.GradeLevels,
+  CollectionFilterType.Issue,
+  CollectionFilterType.SchoolType,
+  CollectionFilterType.StudyDesign,
+  CollectionFilterType.Volume,
+];
diff --git a/src/app/features/collections/constants/index.ts b/src/app/features/collections/constants/index.ts
new file mode 100644
index 000000000..f1e8192b6
--- /dev/null
+++ b/src/app/features/collections/constants/index.ts
@@ -0,0 +1,2 @@
+export * from './filter-names.const';
+export * from './sort-options.const';
diff --git a/src/app/features/collections/constants/query-params-keys.const.ts b/src/app/features/collections/constants/query-params-keys.const.ts
new file mode 100644
index 000000000..2f7804b21
--- /dev/null
+++ b/src/app/features/collections/constants/query-params-keys.const.ts
@@ -0,0 +1 @@
+export const queryParamsKeys = ['page', 'search', 'sort', 'activeFilters'];
diff --git a/src/app/features/collections/constants/sort-options.const.ts b/src/app/features/collections/constants/sort-options.const.ts
new file mode 100644
index 000000000..2a95d3a56
--- /dev/null
+++ b/src/app/features/collections/constants/sort-options.const.ts
@@ -0,0 +1,7 @@
+export const collectionsSortOptions = [
+  { label: 'common.sort.relevance', value: '' },
+  { label: 'common.sort.createdNewest', value: '-created' },
+  { label: 'common.sort.createdOldest', value: 'created' },
+  { label: 'common.sort.modifiedNewest', value: '-modified' },
+  { label: 'common.sort.modifiedOldest', value: 'modified' },
+];
diff --git a/src/app/features/collections/enums/collection-filter-type.enum.ts b/src/app/features/collections/enums/collection-filter-type.enum.ts
new file mode 100644
index 000000000..286ed507f
--- /dev/null
+++ b/src/app/features/collections/enums/collection-filter-type.enum.ts
@@ -0,0 +1,12 @@
+export enum CollectionFilterType {
+  ProgramArea = 'programArea',
+  CollectedType = 'collectedType',
+  Status = 'status',
+  DataType = 'dataType',
+  Disease = 'disease',
+  GradeLevels = 'gradeLevels',
+  Issue = 'issue',
+  SchoolType = 'schoolType',
+  StudyDesign = 'studyDesign',
+  Volume = 'volume',
+}
diff --git a/src/app/features/collections/enums/index.ts b/src/app/features/collections/enums/index.ts
new file mode 100644
index 000000000..a7d347984
--- /dev/null
+++ b/src/app/features/collections/enums/index.ts
@@ -0,0 +1 @@
+export * from './collection-filter-type.enum';
diff --git a/src/app/features/collections/mappers/collections.mapper.ts b/src/app/features/collections/mappers/collections.mapper.ts
new file mode 100644
index 000000000..1a4ab1764
--- /dev/null
+++ b/src/app/features/collections/mappers/collections.mapper.ts
@@ -0,0 +1,104 @@
+import {
+  CollectionContributor,
+  CollectionContributorJsonApi,
+  CollectionDetails,
+  CollectionDetailsResponseJsonApi,
+  CollectionProvider,
+  CollectionProviderResponseJsonApi,
+  CollectionSubmission,
+  CollectionSubmissionJsonApi,
+} from '@osf/features/collections/models';
+
+export class CollectionsMapper {
+  static fromGetCollectionContributorsResponse(response: CollectionContributorJsonApi[]): CollectionContributor[] {
+    return response.map((contributor) => ({
+      id: contributor.embeds.users.data.id,
+      name: contributor.embeds.users.data.attributes.full_name,
+      url: contributor.embeds.users.data.links.html,
+    }));
+  }
+
+  static fromGetCollectionProviderResponse(response: CollectionProviderResponseJsonApi): CollectionProvider {
+    return {
+      id: response.id,
+      type: response.type,
+      name: response.attributes.name,
+      description: response.attributes.description,
+      advisoryBoard: response.attributes.advisory_board,
+      example: response.attributes.example,
+      domain: response.attributes.domain,
+      domainRedirectEnabled: response.attributes.domain_redirect_enabled,
+      footerLinks: response.attributes.footer_links,
+      emailSupport: response.attributes.email_support,
+      facebookAppId: response.attributes.facebook_app_id,
+      allowSubmissions: response.attributes.allow_submissions,
+      allowCommenting: response.attributes.allow_commenting,
+      assets: {
+        style: response.attributes.assets.style,
+        squareColorTransparent: response.attributes.assets.square_color_transparent,
+        squareColorNoTransparent: response.attributes.assets.square_color_no_transparent,
+        favicon: response.attributes.assets.favicon,
+      },
+      shareSource: response.attributes.share_source,
+      sharePublishType: response.attributes.share_publish_type,
+      permissions: response.attributes.permissions,
+      reviewsWorkflow: response.attributes.reviews_workflow,
+      primaryCollection: {
+        id: response.relationships.primary_collection.data.id,
+        type: response.relationships.primary_collection.data.type,
+      },
+    };
+  }
+
+  static fromGetCollectionDetailsResponse(response: CollectionDetailsResponseJsonApi): CollectionDetails {
+    return {
+      id: response.id,
+      type: response.type,
+      title: response.attributes.title,
+      dateCreated: response.attributes.date_created,
+      dateModified: response.attributes.date_modified,
+      bookmarks: response.attributes.bookmarks,
+      isPromoted: response.attributes.is_promoted,
+      isPublic: response.attributes.is_public,
+      filters: {
+        status: response.attributes.status_choices,
+        collectedType: response.attributes.collected_type_choices,
+        volume: response.attributes.volume_choices,
+        issue: response.attributes.issue_choices,
+        programArea: response.attributes.program_area_choices,
+        schoolType: response.attributes.school_type_choices,
+        studyDesign: response.attributes.study_design_choices,
+        dataType: response.attributes.data_type_choices,
+        disease: response.attributes.disease_choices,
+        gradeLevels: response.attributes.grade_levels_choices,
+      },
+    };
+  }
+
+  static fromPostCollectionSubmissionsResponse(response: CollectionSubmissionJsonApi[]): CollectionSubmission[] {
+    return response.map((submission) => ({
+      id: submission.id,
+      type: submission.type,
+      nodeId: submission.embeds.guid.data.id,
+      nodeUrl: submission.embeds.guid.data.links.html,
+      title: submission.embeds.guid.data.attributes.title,
+      description: submission.embeds.guid.data.attributes.description,
+      category: submission.embeds.guid.data.attributes.category,
+      dateCreated: submission.embeds.guid.data.attributes.date_created,
+      dateModified: submission.embeds.guid.data.attributes.date_modified,
+      public: submission.embeds.guid.data.attributes.public,
+      reviewsState: submission.attributes.reviews_state,
+      collectedType: submission.attributes.collected_type,
+      status: submission.attributes.status,
+      volume: submission.attributes.volume,
+      issue: submission.attributes.issue,
+      programArea: submission.attributes.program_area,
+      schoolType: submission.attributes.school_type,
+      studyDesign: submission.attributes.study_design,
+      dataType: submission.attributes.data_type,
+      disease: submission.attributes.disease,
+      gradeLevels: submission.attributes.grade_levels,
+      contributors: [] as CollectionContributor[],
+    }));
+  }
+}
diff --git a/src/app/features/collections/mappers/index.ts b/src/app/features/collections/mappers/index.ts
new file mode 100644
index 000000000..0edb18c93
--- /dev/null
+++ b/src/app/features/collections/mappers/index.ts
@@ -0,0 +1 @@
+export * from './collections.mapper';
diff --git a/src/app/features/collections/models/collection-search-result-card.models.ts b/src/app/features/collections/models/collection-search-result-card.models.ts
deleted file mode 100644
index bf192de44..000000000
--- a/src/app/features/collections/models/collection-search-result-card.models.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export interface CollectionSearchResultCard {
-  id: string;
-  title: string;
-  description?: string;
-  dateCreated: Date;
-  dateModified: Date;
-  category: string;
-  contributors: Contributor[];
-  programArea: string;
-  collectedType: string;
-  dataType: string;
-  disease: string;
-  gradeLevels: string;
-  issue: string;
-  reviewsState: string;
-  schoolType: string;
-  status: string;
-  studyDesign: string;
-  volume: string;
-}
-
-interface Contributor {
-  id: string;
-  name: string;
-}
diff --git a/src/app/features/collections/models/collections-filters.model.ts b/src/app/features/collections/models/collections-filters.model.ts
index a46209d6c..706953351 100644
--- a/src/app/features/collections/models/collections-filters.model.ts
+++ b/src/app/features/collections/models/collections-filters.model.ts
@@ -6,7 +6,6 @@ export interface CollectionsFilters {
   disease: string[];
   gradeLevels: string[];
   issue: string[];
-  reviewsState: string[];
   schoolType: string[];
   studyDesign: string[];
   volume: string[];
diff --git a/src/app/features/collections/models/collections-json-api.models.ts b/src/app/features/collections/models/collections-json-api.models.ts
new file mode 100644
index 000000000..534bad4f1
--- /dev/null
+++ b/src/app/features/collections/models/collections-json-api.models.ts
@@ -0,0 +1,170 @@
+import { JsonApiResponse } from '@core/models';
+
+export interface CollectionProviderResponseJsonApi {
+  id: string;
+  type: string;
+  attributes: {
+    name: string;
+    description: string;
+    advisory_board: string;
+    example: string | null;
+    domain: string;
+    domain_redirect_enabled: boolean;
+    footer_links: string;
+    email_support: boolean | null;
+    facebook_app_id: string | null;
+    allow_submissions: boolean;
+    allow_commenting: boolean;
+    assets: {
+      style?: string;
+      square_color_transparent?: string;
+      square_color_no_transparent?: string;
+      favicon?: string;
+    };
+    share_source: string;
+    share_publish_type: string;
+    permissions: string[];
+    reviews_workflow: string;
+  };
+  relationships: {
+    primary_collection: {
+      data: {
+        id: string;
+        type: string;
+      };
+    };
+  };
+}
+
+export interface CollectionDetailsResponseJsonApi {
+  id: string;
+  type: string;
+  attributes: {
+    title: string;
+    date_created: string;
+    date_modified: string;
+    bookmarks: boolean;
+    is_promoted: boolean;
+    is_public: boolean;
+    status_choices: string[];
+    collected_type_choices: string[];
+    volume_choices: string[];
+    issue_choices: string[];
+    program_area_choices: string[];
+    school_type_choices: string[];
+    study_design_choices: string[];
+    data_type_choices: string[];
+    disease_choices: string[];
+    grade_levels_choices: string[];
+  };
+}
+
+export interface CollectionSubmissionJsonApi {
+  id: string;
+  type: string;
+  attributes: {
+    reviews_state: string;
+    collected_type: string;
+    status: string;
+    volume: string;
+    issue: string;
+    program_area: string;
+    school_type: string;
+    study_design: string;
+    data_type: string;
+    disease: string;
+    grade_levels: string;
+  };
+  embeds: {
+    guid: {
+      data: {
+        id: string;
+        type: string;
+        attributes: {
+          title: string;
+          description: string;
+          category: string;
+          date_created: string;
+          date_modified: string;
+          public: boolean;
+        };
+        links: {
+          html: string;
+        };
+        relationships: {
+          bibliographic_contributors: {
+            links: {
+              related: {
+                href: string;
+              };
+            };
+          };
+        };
+      };
+    };
+  };
+}
+
+export interface SparseCollectionAttributesJsonApi {
+  title: string;
+  bookmarks: boolean;
+}
+
+export interface SparseCollectionJsonAi {
+  id: string;
+  attributes: SparseCollectionAttributesJsonApi;
+}
+
+export interface SparseCollectionsResponseJsonApi {
+  data: SparseCollectionJsonAi[];
+}
+
+export interface CollectionProviderGetResponseJsonApi extends JsonApiResponse<CollectionProviderResponseJsonApi, null> {
+  data: CollectionProviderResponseJsonApi;
+}
+
+export interface CollectionDetailsGetResponseJsonApi extends JsonApiResponse<CollectionDetailsResponseJsonApi, null> {
+  data: CollectionDetailsResponseJsonApi;
+}
+
+export interface CollectionSubmissionsPayloadJsonApi {
+  data: {
+    attributes: {
+      provider: string[];
+      studyDesign?: string[];
+      schoolType?: string[];
+      status?: string[];
+      collectedType?: string[];
+      volume?: string[];
+      issue?: string[];
+      programArea?: string[];
+      dataType?: string[];
+      disease?: string[];
+      gradeLevels?: string[];
+      q?: string;
+    };
+  };
+  type: string;
+}
+
+export interface CollectionContributorJsonApi {
+  id: string;
+  type: string;
+  embeds: {
+    users: {
+      data: {
+        attributes: {
+          full_name: string;
+        };
+        id: string;
+        links: {
+          html: string;
+        };
+      };
+    };
+  };
+}
+
+export interface ContributorsResponseJsonApi extends JsonApiResponse<CollectionContributorJsonApi[], null> {
+  data: CollectionContributorJsonApi[];
+}
diff --git a/src/app/features/collections/models/collections-query-params.model.ts b/src/app/features/collections/models/collections-query-params.model.ts
new file mode 100644
index 000000000..f9e85635c
--- /dev/null
+++ b/src/app/features/collections/models/collections-query-params.model.ts
@@ -0,0 +1,6 @@
+export interface CollectionQueryParams {
+  page?: string;
+  search?: string;
+  sort?: string;
+  activeFilters?: string | null;
+}
diff --git a/src/app/features/collections/models/collections.models.ts b/src/app/features/collections/models/collections.models.ts
index e23886ee1..961654f4d 100644
--- a/src/app/features/collections/models/collections.models.ts
+++ b/src/app/features/collections/models/collections.models.ts
@@ -1,13 +1,85 @@
-export interface CollectionAttributes {
+export interface CollectionProvider {
+  id: string;
+  type: string;
+  name: string;
+  description: string;
+  advisoryBoard: string;
+  example: string | null;
+  domain: string;
+  domainRedirectEnabled: boolean;
+  footerLinks: string;
+  emailSupport: boolean | null;
+  facebookAppId: string | null;
+  allowSubmissions: boolean;
+  allowCommenting: boolean;
+  assets: {
+    style?: string;
+    squareColorTransparent?: string;
+    squareColorNoTransparent?: string;
+    favicon?: string;
+  };
+  shareSource: string;
+  sharePublishType: string;
+  permissions: string[];
+  reviewsWorkflow: string;
+  primaryCollection: {
+    id: string;
+    type: string;
+  };
+}
+
+export interface CollectionFilters {
+  status: string[];
+  collectedType: string[];
+  volume: string[];
+  issue: string[];
+  programArea: string[];
+  schoolType: string[];
+  studyDesign: string[];
+  dataType: string[];
+  disease: string[];
+  gradeLevels: string[];
+}
+
+export interface CollectionDetails {
+  id: string;
+  type: string;
   title: string;
+  dateCreated: string;
+  dateModified: string;
   bookmarks: boolean;
+  isPromoted: boolean;
+  isPublic: boolean;
+  filters: CollectionFilters;
 }
 
-export interface Collection {
+export interface CollectionContributor {
   id: string;
-  attributes: CollectionAttributes;
+  name: string;
+  url: string;
 }
 
-export interface SparseCollectionsResponse {
-  data: Collection[];
+export interface CollectionSubmission {
+  id: string;
+  type: string;
+  nodeId: string;
+  nodeUrl: string;
+  title: string;
+  description: string;
+  category: string;
+  dateCreated: string;
+  dateModified: string;
+  public: boolean;
+  reviewsState: string;
+  collectedType: string;
+  status: string;
+  volume: string;
+  issue: string;
+  programArea: string;
+  schoolType: string;
+  studyDesign: string;
+  dataType: string;
+  disease: string;
+  gradeLevels: string;
+  contributors: CollectionContributor[];
 }
diff --git a/src/app/features/collections/models/index.ts b/src/app/features/collections/models/index.ts
index 3f2eb70df..df5d4745f 100644
--- a/src/app/features/collections/models/index.ts
+++ b/src/app/features/collections/models/index.ts
@@ -1,3 +1,4 @@
-export * from './collection-search-result-card.models';
 export * from './collections.models';
 export * from './collections-filters.model';
+export * from './collections-json-api.models';
+export * from './collections-query-params.model';
diff --git a/src/app/features/collections/services/collections-query-sync.service.ts b/src/app/features/collections/services/collections-query-sync.service.ts
new file mode 100644
index 000000000..281365746
--- /dev/null
+++ b/src/app/features/collections/services/collections-query-sync.service.ts
@@ -0,0 +1,268 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { effect, inject, Injectable, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { collectionsSortOptions } from '@osf/features/collections/constants';
+import { queryParamsKeys } from '@osf/features/collections/constants/query-params-keys.const';
+import { CollectionQueryParams, CollectionsFilters } from '@osf/features/collections/models';
+import { CollectionsSelectors, SetAllFilters, SetSearchValue, SetSortBy } from '@osf/features/collections/store';
+import { SetPageNumber } from '@osf/features/collections/store/collections.actions';
+
+@Injectable()
+export class CollectionsQuerySyncService {
+  private readonly router = inject(Router);
+  private readonly route = inject(ActivatedRoute);
+
+  private readonly queryParams = toSignal(this.route.queryParams);
+  private readonly isInitialized = signal(false);
+  private readonly pendingFilters = signal<CollectionsFilters | null>(null);
+  private readonly pendingSort = signal<string | null>(null);
+
+  private readonly filtersOptions = select(CollectionsSelectors.getAllFiltersOptions);
+
+  private readonly actions = createDispatchMap({
+    setSortBy: SetSortBy,
+    setSearchValue: SetSearchValue,
+    setAllFilters: SetAllFilters,
+    setPageNumber: SetPageNumber,
+  });
+
+  constructor() {
+    this.setupFilterValidationEffect();
+    this.setupSortValidationEffect();
+  }
+
+  initializeFromUrl(): void {
+    this.initializeSearchAndSort();
+    this.initializeFilters();
+    this.isInitialized.set(true);
+  }
+
+  syncStoreToUrl(searchText: string, sortBy: string, selectedFilters: CollectionsFilters, page: string): void {
+    if (!this.isInitialized() || this.pendingFilters()) return;
+
+    const updates = this.calculateUrlUpdates(searchText, sortBy, selectedFilters, page);
+    if (this.hasUrlUpdates(updates)) {
+      this.updateUrlQueryParams(updates);
+    }
+  }
+
+  private setupFilterValidationEffect(): void {
+    effect(() => {
+      const options = this.filtersOptions();
+      const pending = this.pendingFilters();
+
+      if (pending && this.hasAvailableFilterOptions(options)) {
+        this.validateAndApplyPendingFilters(pending, options);
+      }
+    });
+  }
+
+  private setupSortValidationEffect(): void {
+    effect(() => {
+      const pending = this.pendingSort();
+
+      if (pending !== null && this.isInitialized()) {
+        this.validateAndApplyPendingSort(pending);
+      }
+    });
+  }
+
+  private initializeSearchAndSort(): void {
+    const params = this.queryParams();
+    if (!params) return;
+
+    if (params['search'] || params['q']) {
+      this.actions.setSearchValue(params['search'] || params['q']);
+    }
+
+    if (params['sort']) {
+      this.handleSortFromUrl(params['sort']);
+    }
+
+    if (params['page']) {
+      this.actions.setPageNumber(params['page'].toString());
+    }
+  }
+
+  private handleSortFromUrl(sortValue: string): void {
+    if (this.isValidSortValue(sortValue)) {
+      this.actions.setSortBy(sortValue);
+    } else {
+      this.pendingSort.set(sortValue);
+    }
+  }
+
+  private validateAndApplyPendingSort(sortValue: string): void {
+    if (this.isValidSortValue(sortValue)) {
+      this.actions.setSortBy(sortValue);
+    } else {
+      this.actions.setSortBy(collectionsSortOptions[0].value);
+    }
+    this.pendingSort.set(null);
+  }
+
+  private isValidSortValue(sortValue: string): boolean {
+    return collectionsSortOptions.some((option) => option.value === sortValue);
+  }
+
+  private initializeFilters(): void {
+    const params = this.queryParams();
+    const activeFilters = params?.['activeFilters'];
+
+    if (!activeFilters) return;
+
+    try {
+      const parsedFilters: CollectionsFilters = JSON.parse(activeFilters);
+      this.handleParsedFilters(parsedFilters);
+    } catch (error) {
+      console.error('Error parsing activeFilters from URL:', error);
+    }
+  }
+
+  private handleParsedFilters(filters: CollectionsFilters): void {
+    const options = this.filtersOptions();
+
+    if (this.hasAvailableFilterOptions(options)) {
+      this.validateAndApplyFiltersImmediately(filters, options);
+    } else {
+      this.pendingFilters.set(filters);
+    }
+  }
+
+  private validateAndApplyPendingFilters(filters: CollectionsFilters, options: CollectionsFilters): void {
+    const validatedFilters = this.validateFilters(filters, options);
+    const selectedFilters = this.getSelectedFilters(validatedFilters);
+
+    if (Object.keys(selectedFilters).length) {
+      this.actions.setAllFilters(selectedFilters);
+    }
+
+    this.pendingFilters.set(null);
+  }
+
+  private validateAndApplyFiltersImmediately(filters: CollectionsFilters, options: CollectionsFilters): void {
+    const validatedFilters = this.validateFilters(filters, options);
+    const selectedFilters = this.getSelectedFilters(validatedFilters);
+
+    if (Object.keys(selectedFilters).length) {
+      this.actions.setAllFilters(selectedFilters);
+    }
+  }
+
+  private validateFilters(filters: CollectionsFilters, availableOptions: CollectionsFilters): CollectionsFilters {
+    const validatedFilters: Partial<CollectionsFilters> = {};
+
+    Object.keys(filters).forEach((filterKey) => {
+      const key = filterKey as keyof CollectionsFilters;
+      const filterValues = filters[key];
+      const availableValues = availableOptions[key];
+
+      if (this.isValidFilterArray(filterValues, availableValues)) {
+        const validValues = this.getValidFilterValues(filterValues, availableValues);
+        if (validValues.length) {
+          validatedFilters[key] = validValues;
+        }
+      }
+    });
+
+    return validatedFilters as CollectionsFilters;
+  }
+
+  private calculateUrlUpdates(
+    searchText: string,
+    sortBy: string,
+    selectedFilters: CollectionsFilters,
+    page: string
+  ): Partial<CollectionQueryParams> {
+    const currentParams = this.queryParams();
+    if (!currentParams) return {};
+
+    const updates: Partial<CollectionQueryParams> = {};
+
+    if (searchText !== currentParams['search']) {
+      updates.search = searchText || undefined;
+    }
+
+    if (sortBy !== currentParams['sort']) {
+      updates.sort = sortBy;
+    }
+
+    if (page !== currentParams['page']) {
+      updates.page = page;
+    }
+
+    const activeFiltersParam = this.createActiveFiltersParam(selectedFilters);
+    if (activeFiltersParam !== currentParams['activeFilters']) {
+      updates.activeFilters = activeFiltersParam;
+    }
+
+    return updates;
+  }
+
+  private createActiveFiltersParam(selectedFilters: CollectionsFilters): string | null {
+    const hasFilters = this.hasActiveFilters(selectedFilters);
+    return hasFilters ? JSON.stringify(this.getSelectedFilters(selectedFilters)) : null;
+  }
+
+  private hasUrlUpdates(updates: Partial<CollectionQueryParams>): boolean {
+    return Object.keys(updates).length > 0;
+  }
+
+  private updateUrlQueryParams(updates: Partial<CollectionQueryParams>): void {
+    const currentParams = this.queryParams() || {};
+    const queryParams: Record<string, string | null> = {};
+
+    queryParamsKeys.forEach((key) => {
+      const updateValue = updates[key as keyof CollectionQueryParams];
+      const currentValue = currentParams[key];
+
+      if (key in updates) {
+        queryParams[key] = updateValue ? updateValue.toString() : null;
+      } else if (currentValue) {
+        queryParams[key] = currentValue;
+      }
+    });
+
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams,
+    });
+  }
+
+  private hasAvailableFilterOptions(options: CollectionsFilters): boolean {
+    return Object.values(options).some((filterArray) => Array.isArray(filterArray) && filterArray.length);
+  }
+
+  private isValidFilterArray(filterValues: unknown, availableValues: unknown): boolean {
+    return Array.isArray(filterValues) && Array.isArray(availableValues);
+  }
+
+  private getValidFilterValues(filterValues: string[], availableValues: (string | { value: string })[]): string[] {
+    return filterValues.filter((value) =>
+      availableValues.some((option: string | { value: string }) => {
+        return typeof option === 'string' ? option === value : option.value === value;
+      })
+    );
+  }
+
+  private getSelectedFilters(filters: CollectionsFilters): Partial<CollectionsFilters> {
+    const result: Partial<CollectionsFilters> = {};
+    const filterKeys = Object.keys(filters) as (keyof CollectionsFilters)[];
+
+    filterKeys.forEach((key) => {
+      const filterArray = filters[key];
+      if (Array.isArray(filterArray) && filterArray.length) {
+        result[key] = filterArray;
+      }
+    });
+
+    return result;
+  }
+
+  private hasActiveFilters(filters: CollectionsFilters): boolean {
+    return Object.values(filters).some((filterArray) => Array.isArray(filterArray) && filterArray.length);
+  }
+}
diff --git a/src/app/features/collections/services/collections.service.ts b/src/app/features/collections/services/collections.service.ts
index 24b90dae0..1d24bd07b 100644
--- a/src/app/features/collections/services/collections.service.ts
+++ b/src/app/features/collections/services/collections.service.ts
@@ -1,10 +1,26 @@
-import { map, Observable } from 'rxjs';
+import { createDispatchMap } from '@ngxs/store';
+
+import { forkJoin, map, Observable, of, switchMap } from 'rxjs';
 
 import { inject, Injectable } from '@angular/core';
 
+import { JsonApiResponseWithPaging } from '@core/models';
 import { JsonApiService } from '@osf/core/services';
+import { CollectionsMapper } from '@osf/features/collections/mappers';
+import { SetTotalSubmissions } from '@osf/features/collections/store';
 
-import { SparseCollectionsResponse } from '../models';
+import {
+  CollectionContributor,
+  CollectionDetails,
+  CollectionDetailsGetResponseJsonApi,
+  CollectionProvider,
+  CollectionProviderGetResponseJsonApi,
+  CollectionSubmission,
+  CollectionSubmissionJsonApi,
+  CollectionSubmissionsPayloadJsonApi,
+  ContributorsResponseJsonApi,
+  SparseCollectionsResponseJsonApi,
+} from '../models';
 
 import { environment } from 'src/environments/environment';
 
@@ -12,15 +28,18 @@ import { environment } from 'src/environments/environment';
   providedIn: 'root',
 })
 export class CollectionsService {
-  #jsonApiService = inject(JsonApiService);
+  private jsonApiService = inject(JsonApiService);
+  private actions = createDispatchMap({
+    setTotalSubmissions: SetTotalSubmissions,
+  });
 
   getBookmarksCollectionId(): Observable<string> {
     const params: Record<string, unknown> = {
       'fields[collections]': 'title,bookmarks',
     };
 
-    return this.#jsonApiService.get<SparseCollectionsResponse>(environment.apiUrl + '/collections/', params).pipe(
-      map((response: SparseCollectionsResponse) => {
+    return this.jsonApiService.get<SparseCollectionsResponseJsonApi>(environment.apiUrl + '/collections/', params).pipe(
+      map((response: SparseCollectionsResponseJsonApi) => {
         const bookmarksCollection = response.data.find(
           (collection) => collection.attributes.title === 'Bookmarks' && collection.attributes.bookmarks
         );
@@ -40,7 +59,7 @@ export class CollectionsService {
       ],
     };
 
-    return this.#jsonApiService.post<void>(url, payload);
+    return this.jsonApiService.post<void>(url, payload);
   }
 
   removeProjectFromBookmarks(bookmarksId: string, projectId: string): Observable<void> {
@@ -54,6 +73,88 @@ export class CollectionsService {
       ],
     };
 
-    return this.#jsonApiService.delete(url, payload);
+    return this.jsonApiService.delete(url, payload);
+  }
+
+  getCollectionProvider(collectionName: string): Observable<CollectionProvider> {
+    const url = `${environment.apiUrl}/providers/collections/${collectionName}/`;
+
+    return this.jsonApiService
+      .get<CollectionProviderGetResponseJsonApi>(url)
+      .pipe(map((response) => CollectionsMapper.fromGetCollectionProviderResponse(response.data)));
+  }
+
+  getCollectionDetails(collectionId: string): Observable<CollectionDetails> {
+    const url = `${environment.apiUrl}/collections/${collectionId}/`;
+
+    return this.jsonApiService
+      .get<CollectionDetailsGetResponseJsonApi>(url)
+      .pipe(map((response) => CollectionsMapper.fromGetCollectionDetailsResponse(response.data)));
+  }
+
+  getCollectionSubmissions(
+    providerId: string,
+    searchText: string,
+    activeFilters: Record<string, string[]>,
+    page = '1',
+    sortBy: string
+  ): Observable<CollectionSubmission[]> {
+    const url = `${environment.apiUrl}/search/collections/`;
+    const params: Record<string, string> = {
+      page,
+    };
+
+    if (sortBy) {
+      params['sort'] = sortBy;
+    }
+
+    const payload: CollectionSubmissionsPayloadJsonApi = {
+      data: {
+        attributes: {
+          provider: [providerId],
+          ...activeFilters,
+          q: searchText ? searchText : '*',
+        },
+      },
+      type: 'search',
+    };
+
+    return this.jsonApiService
+      .post<JsonApiResponseWithPaging<CollectionSubmissionJsonApi[], null>>(url, payload, params)
+      .pipe(
+        switchMap((response) => {
+          if (!response.data.length) {
+            return of([]);
+          }
+
+          const contributorUrls = response.data.map(
+            (submission) => submission.embeds.guid.data.relationships.bibliographic_contributors.links.related.href
+          );
+          const contributorRequests = contributorUrls.map((url) => this.getCollectionContributors(url));
+          const totalCount = response.links.meta?.total ?? 0;
+          this.actions.setTotalSubmissions(totalCount);
+
+          return forkJoin(contributorRequests).pipe(
+            map((contributorsArrays) => {
+              return response.data.map((submission, index) => ({
+                ...CollectionsMapper.fromPostCollectionSubmissionsResponse([submission])[0],
+                contributors: contributorsArrays[index],
+              }));
+            })
+          );
+        })
+      );
+  }
+
+  private getCollectionContributors(contributorsUrl: string): Observable<CollectionContributor[]> {
+    const params: Record<string, unknown> = {
+      'fields[users]': 'full_name',
+    };
+
+    return this.jsonApiService.get<ContributorsResponseJsonApi>(contributorsUrl, params).pipe(
+      map((response: ContributorsResponseJsonApi) => {
+        return CollectionsMapper.fromGetCollectionContributorsResponse(response.data);
+      })
+    );
   }
 }
diff --git a/src/app/features/collections/services/index.ts b/src/app/features/collections/services/index.ts
index db7cf83da..da877760a 100644
--- a/src/app/features/collections/services/index.ts
+++ b/src/app/features/collections/services/index.ts
@@ -1 +1,2 @@
 export * from './collections.service';
+export * from './collections-query-sync.service';
diff --git a/src/app/features/collections/store/collections.actions.ts b/src/app/features/collections/store/collections.actions.ts
index 036d0a3ed..71a33e3e1 100644
--- a/src/app/features/collections/store/collections.actions.ts
+++ b/src/app/features/collections/store/collections.actions.ts
@@ -1,3 +1,17 @@
+import { CollectionsFilters } from '@osf/features/collections/models';
+
+export class GetCollectionProvider {
+  static readonly type = '[Collections] Get Collection Provider';
+
+  constructor(public collectionName: string) {}
+}
+
+export class GetCollectionDetails {
+  static readonly type = '[Collections] Get Collection Details';
+
+  constructor(public collectionId: string) {}
+}
+
 export class GetBookmarksCollectionId {
   static readonly type = '[Collections] Get Bookmarks Collection Id';
 }
@@ -24,57 +38,108 @@ export class ClearCollections {
   static readonly type = '[Collections] Clear Collections';
 }
 
+export class ClearCollectionSubmissions {
+  static readonly type = '[Collections] Clear Collection Submissions';
+}
+
 export class SetProgramAreaFilters {
   static readonly type = '[Collections] Set Program Area Filters';
+
   constructor(public programAreaFilters: string[]) {}
 }
 
 export class SetCollectedTypeFilters {
   static readonly type = '[Collections] Set Collected Type Filters';
+
   constructor(public collectedTypeFilters: string[]) {}
 }
 
 export class SetStatusFilters {
   static readonly type = '[Collections] Set Status Filters';
+
   constructor(public statusFilters: string[]) {}
 }
 
 export class SetDataTypeFilters {
   static readonly type = '[Collections] Set Data Type Filters';
+
   constructor(public dataTypeFilters: string[]) {}
 }
 
 export class SetDiseaseFilters {
   static readonly type = '[Collections] Set Disease Filters';
+
   constructor(public diseaseFilters: string[]) {}
 }
 
 export class SetGradeLevelsFilters {
   static readonly type = '[Collections] Set Grade Levels Filters';
+
   constructor(public gradeLevelsFilters: string[]) {}
 }
 
 export class SetIssueFilters {
   static readonly type = '[Collections] Set Issue Filters';
-  constructor(public issueFilters: string[]) {}
-}
 
-export class SetReviewsStateFilters {
-  static readonly type = '[Collections] Set Reviews State Filters';
-  constructor(public reviewsStateFilters: string[]) {}
+  constructor(public issueFilters: string[]) {}
 }
 
 export class SetSchoolTypeFilters {
   static readonly type = '[Collections] Set School Type Filters';
+
   constructor(public schoolTypeFilters: string[]) {}
 }
 
 export class SetStudyDesignFilters {
   static readonly type = '[Collections] Set Study Design Filters';
+
   constructor(public studyDesignFilters: string[]) {}
 }
 
 export class SetVolumeFilters {
   static readonly type = '[Collections] Set Volume Filters';
+
   constructor(public volumeFilters: string[]) {}
 }
+
+export class SetSortBy {
+  static readonly type = '[Collections] Set Sort By';
+
+  constructor(public sortValue: string) {}
+}
+
+export class SetTotalSubmissions {
+  static readonly type = '[Collections] Set Total Submission';
+
+  constructor(public totalCount: number) {}
+}
+
+export class SetPageNumber {
+  static readonly type = '[Collections] Set Page Number';
+
+  constructor(public page: string) {}
+}
+
+export class SetSearchValue {
+  static readonly type = '[Collections] Set Search Value';
+
+  constructor(public searchValue: string) {}
+}
+
+export class SetAllFilters {
+  static readonly type = '[Collections] Set All Filters';
+
+  constructor(public filters: Partial<CollectionsFilters>) {}
+}
+
+export class GetCollectionSubmissions {
+  static readonly type = '[Collections] Get Collection Submissions';
+
+  constructor(
+    public providerId: string,
+    public searchText: string,
+    public activeFilters: Record<string, string[]>,
+    public page: string,
+    public sort: string
+  ) {}
+}
diff --git a/src/app/features/collections/store/collections.model.ts b/src/app/features/collections/store/collections.model.ts
index a83c87c5c..52ea3c4bd 100644
--- a/src/app/features/collections/store/collections.model.ts
+++ b/src/app/features/collections/store/collections.model.ts
@@ -1,8 +1,20 @@
-import { CollectionsFilters } from '@osf/features/collections/models';
+import {
+  CollectionDetails,
+  CollectionProvider,
+  CollectionsFilters,
+  CollectionSubmission,
+} from '@osf/features/collections/models';
 import { AsyncStateModel } from '@osf/shared/models/store';
 
 export interface CollectionsStateModel {
   bookmarksId: AsyncStateModel<string>;
-  filters: CollectionsFilters;
+  currentFilters: CollectionsFilters;
   filtersOptions: CollectionsFilters;
+  collectionProvider: AsyncStateModel<CollectionProvider | null>;
+  collectionDetails: AsyncStateModel<CollectionDetails | null>;
+  collectionSubmissions: AsyncStateModel<CollectionSubmission[]>;
+  totalSubmissions: number;
+  sortBy: string;
+  searchText: string;
+  page: string;
 }
diff --git a/src/app/features/collections/store/collections.selectors.ts b/src/app/features/collections/store/collections.selectors.ts
index 7f8c27039..76c1b68bb 100644
--- a/src/app/features/collections/store/collections.selectors.ts
+++ b/src/app/features/collections/store/collections.selectors.ts
@@ -22,67 +22,62 @@ export class CollectionsSelectors {
   }
 
   @Selector([CollectionsState])
-  static getAllFilters(state: CollectionsStateModel): CollectionsFilters {
-    return state.filters;
+  static getAllSelectedFilters(state: CollectionsStateModel): CollectionsFilters {
+    return state.currentFilters;
   }
 
   @Selector([CollectionsState])
-  static getStatusFilters(state: CollectionsStateModel): string[] {
-    return state.filters.status;
-  }
-
-  @Selector([CollectionsState])
-  static getProgramAreaFilters(state: CollectionsStateModel): string[] {
-    return state.filters.programArea;
+  static getAllFiltersOptions(state: CollectionsStateModel): CollectionsFilters {
+    return state.filtersOptions;
   }
 
   @Selector([CollectionsState])
-  static getCollectedTypeFilters(state: CollectionsStateModel): string[] {
-    return state.filters.collectedType;
+  static getCollectionProvider(state: CollectionsStateModel) {
+    return state.collectionProvider.data;
   }
 
   @Selector([CollectionsState])
-  static getDataTypeFilters(state: CollectionsStateModel): string[] {
-    return state.filters.dataType;
+  static getCollectionDetails(state: CollectionsStateModel) {
+    return state.collectionDetails.data;
   }
 
   @Selector([CollectionsState])
-  static getDiseaseFilters(state: CollectionsStateModel): string[] {
-    return state.filters.disease;
+  static getCollectionProviderLoading(state: CollectionsStateModel) {
+    return state.collectionProvider.isLoading;
   }
 
   @Selector([CollectionsState])
-  static getGradeLevelsFilters(state: CollectionsStateModel): string[] {
-    return state.filters.gradeLevels;
+  static getCollectionDetailsLoading(state: CollectionsStateModel) {
+    return state.collectionDetails.isLoading;
   }
 
   @Selector([CollectionsState])
-  static getIssueFilters(state: CollectionsStateModel): string[] {
-    return state.filters.issue;
+  static getCollectionSubmissions(state: CollectionsStateModel) {
+    return state.collectionSubmissions.data;
   }
 
   @Selector([CollectionsState])
-  static getReviewsStateFilters(state: CollectionsStateModel): string[] {
-    return state.filters.reviewsState;
+  static getCollectionSubmissionsLoading(state: CollectionsStateModel) {
+    return state.collectionSubmissions.isLoading;
   }
 
   @Selector([CollectionsState])
-  static getSchoolTypeFilters(state: CollectionsStateModel): string[] {
-    return state.filters.schoolType;
+  static getSortBy(state: CollectionsStateModel) {
+    return state.sortBy;
   }
 
   @Selector([CollectionsState])
-  static getStudyDesignFilters(state: CollectionsStateModel): string[] {
-    return state.filters.studyDesign;
+  static getSearchText(state: CollectionsStateModel) {
+    return state.searchText;
   }
 
   @Selector([CollectionsState])
-  static getVolumeFilters(state: CollectionsStateModel): string[] {
-    return state.filters.volume;
+  static getPageNumber(state: CollectionsStateModel) {
+    return state.page;
   }
 
   @Selector([CollectionsState])
-  static getAllFiltersOptions(state: CollectionsStateModel): CollectionsFilters {
-    return state.filtersOptions;
+  static getTotalSubmissions(state: CollectionsStateModel) {
+    return state.totalSubmissions;
   }
 }
diff --git a/src/app/features/collections/store/collections.state.ts b/src/app/features/collections/store/collections.state.ts
index 4319409db..c7e7c07ce 100644
--- a/src/app/features/collections/store/collections.state.ts
+++ b/src/app/features/collections/store/collections.state.ts
@@ -9,18 +9,26 @@ import { CollectionsService } from '../services';
 import {
   AddProjectToBookmarks,
   ClearCollections,
+  ClearCollectionSubmissions,
   GetBookmarksCollectionId,
+  GetCollectionDetails,
+  GetCollectionProvider,
+  GetCollectionSubmissions,
   RemoveProjectFromBookmarks,
+  SetAllFilters,
   SetCollectedTypeFilters,
   SetDataTypeFilters,
   SetDiseaseFilters,
   SetGradeLevelsFilters,
   SetIssueFilters,
+  SetPageNumber,
   SetProgramAreaFilters,
-  SetReviewsStateFilters,
   SetSchoolTypeFilters,
+  SetSearchValue,
+  SetSortBy,
   SetStatusFilters,
   SetStudyDesignFilters,
+  SetTotalSubmissions,
   SetVolumeFilters,
 } from './collections.actions';
 import { CollectionsStateModel } from './collections.model';
@@ -46,8 +54,29 @@ const COLLECTIONS_DEFAULTS: CollectionsStateModel = {
     isSubmitting: false,
     error: null,
   },
-  filters: FILTERS_DEFAULTS,
+  currentFilters: FILTERS_DEFAULTS,
   filtersOptions: FILTERS_DEFAULTS,
+  collectionProvider: {
+    data: null,
+    isLoading: false,
+    error: null,
+  },
+  collectionDetails: {
+    data: null,
+    isLoading: false,
+    isSubmitting: false,
+    error: null,
+  },
+  collectionSubmissions: {
+    data: [],
+    isLoading: false,
+    isSubmitting: false,
+    error: null,
+  },
+  totalSubmissions: 0,
+  sortBy: '',
+  searchText: '',
+  page: '1',
 };
 
 @State<CollectionsStateModel>({
@@ -58,6 +87,62 @@ const COLLECTIONS_DEFAULTS: CollectionsStateModel = {
 export class CollectionsState {
   constructor(private collectionsService: CollectionsService) {}
 
+  @Action(GetCollectionProvider)
+  getCollectionProvider(ctx: StateContext<CollectionsStateModel>, action: GetCollectionProvider) {
+    const state = ctx.getState();
+    ctx.patchState({
+      collectionProvider: {
+        ...state.collectionProvider,
+        isLoading: true,
+      },
+    });
+
+    return this.collectionsService.getCollectionProvider(action.collectionName).pipe(
+      tap((res) => {
+        ctx.patchState({
+          collectionProvider: {
+            data: res,
+            isLoading: false,
+            error: null,
+          },
+        });
+      })
+    );
+  }
+
+  @Action(GetCollectionDetails)
+  getCollectionDetails(ctx: StateContext<CollectionsStateModel>, action: GetCollectionDetails) {
+    const state = ctx.getState();
+
+    ctx.patchState({
+      collectionDetails: {
+        ...state.collectionDetails,
+        isLoading: true,
+      },
+    });
+
+    return this.collectionsService.getCollectionDetails(action.collectionId).pipe(
+      tap((res) => {
+        ctx.patchState({
+          collectionDetails: {
+            data: res,
+            isLoading: false,
+            isSubmitting: false,
+            error: null,
+          },
+        });
+
+        ctx.patchState({
+          filtersOptions: {
+            ...state.filtersOptions,
+            ...res.filters,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'collectionDetails', error))
+    );
+  }
+
   @Action(GetBookmarksCollectionId)
   getBookmarksCollectionId(ctx: StateContext<CollectionsStateModel>) {
     const state = ctx.getState();
@@ -133,13 +218,36 @@ export class CollectionsState {
     ctx.patchState(COLLECTIONS_DEFAULTS);
   }
 
-  // Filter Actions
+  @Action(ClearCollectionSubmissions)
+  clearCollectionSubmissions(ctx: StateContext<CollectionsStateModel>) {
+    ctx.patchState({
+      collectionSubmissions: {
+        data: [],
+        isLoading: false,
+        isSubmitting: false,
+        error: null,
+      },
+    });
+  }
+
+  @Action(SetAllFilters)
+  setAllFilters(ctx: StateContext<CollectionsStateModel>, action: SetAllFilters) {
+    const state = ctx.getState();
+    ctx.patchState({
+      currentFilters: {
+        ...state.currentFilters,
+        ...action.filters,
+      },
+      page: '1',
+    });
+  }
+
   @Action(SetProgramAreaFilters)
   setProgramAreaFilters(ctx: StateContext<CollectionsStateModel>, action: SetProgramAreaFilters) {
     const state = ctx.getState();
     ctx.patchState({
-      filters: {
-        ...state.filters,
+      currentFilters: {
+        ...state.currentFilters,
         programArea: action.programAreaFilters,
       },
     });
@@ -149,8 +257,8 @@ export class CollectionsState {
   setCollectedTypesFilters(ctx: StateContext<CollectionsStateModel>, action: SetCollectedTypeFilters) {
     const state = ctx.getState();
     ctx.patchState({
-      filters: {
-        ...state.filters,
+      currentFilters: {
+        ...state.currentFilters,
         collectedType: action.collectedTypeFilters,
       },
     });
@@ -160,8 +268,8 @@ export class CollectionsState {
   setStatusFilters(ctx: StateContext<CollectionsStateModel>, action: SetStatusFilters) {
     const state = ctx.getState();
     ctx.patchState({
-      filters: {
-        ...state.filters,
+      currentFilters: {
+        ...state.currentFilters,
         status: action.statusFilters,
       },
     });
@@ -171,8 +279,8 @@ export class CollectionsState {
   setDataTypeFilters(ctx: StateContext<CollectionsStateModel>, action: SetDataTypeFilters) {
     const state = ctx.getState();
     ctx.patchState({
-      filters: {
-        ...state.filters,
+      currentFilters: {
+        ...state.currentFilters,
         dataType: action.dataTypeFilters,
       },
     });
@@ -182,8 +290,8 @@ export class CollectionsState {
   setDiseaseFilters(ctx: StateContext<CollectionsStateModel>, action: SetDiseaseFilters) {
     const state = ctx.getState();
     ctx.patchState({
-      filters: {
-        ...state.filters,
+      currentFilters: {
+        ...state.currentFilters,
         disease: action.diseaseFilters,
       },
     });
@@ -193,8 +301,8 @@ export class CollectionsState {
   setGradeLevelsFilters(ctx: StateContext<CollectionsStateModel>, action: SetGradeLevelsFilters) {
     const state = ctx.getState();
     ctx.patchState({
-      filters: {
-        ...state.filters,
+      currentFilters: {
+        ...state.currentFilters,
         gradeLevels: action.gradeLevelsFilters,
       },
     });
@@ -204,30 +312,19 @@ export class CollectionsState {
   setIssueFilters(ctx: StateContext<CollectionsStateModel>, action: SetIssueFilters) {
     const state = ctx.getState();
     ctx.patchState({
-      filters: {
-        ...state.filters,
+      currentFilters: {
+        ...state.currentFilters,
         issue: action.issueFilters,
       },
     });
   }
 
-  @Action(SetReviewsStateFilters)
-  setReviewsStateFilters(ctx: StateContext<CollectionsStateModel>, action: SetReviewsStateFilters) {
-    const state = ctx.getState();
-    ctx.patchState({
-      filters: {
-        ...state.filters,
-        reviewsState: action.reviewsStateFilters,
-      },
-    });
-  }
-
   @Action(SetSchoolTypeFilters)
   setSchoolTypeFilters(ctx: StateContext<CollectionsStateModel>, action: SetSchoolTypeFilters) {
     const state = ctx.getState();
     ctx.patchState({
-      filters: {
-        ...state.filters,
+      currentFilters: {
+        ...state.currentFilters,
         schoolType: action.schoolTypeFilters,
       },
     });
@@ -237,8 +334,8 @@ export class CollectionsState {
   setStudyDesignFilters(ctx: StateContext<CollectionsStateModel>, action: SetStudyDesignFilters) {
     const state = ctx.getState();
     ctx.patchState({
-      filters: {
-        ...state.filters,
+      currentFilters: {
+        ...state.currentFilters,
         studyDesign: action.studyDesignFilters,
       },
     });
@@ -248,22 +345,81 @@ export class CollectionsState {
   setVolumeFilters(ctx: StateContext<CollectionsStateModel>, action: SetVolumeFilters) {
     const state = ctx.getState();
     ctx.patchState({
-      filters: {
-        ...state.filters,
+      currentFilters: {
+        ...state.currentFilters,
         volume: action.volumeFilters,
       },
     });
   }
 
-  private handleError(ctx: StateContext<CollectionsStateModel>, section: keyof CollectionsStateModel, error: Error) {
+  @Action(SetSortBy)
+  setSortBy(ctx: StateContext<CollectionsStateModel>, action: SetSortBy) {
     ctx.patchState({
-      [section]: {
-        ...ctx.getState()[section],
-        isLoading: false,
-        isSubmitting: false,
-        error: error.message,
+      sortBy: action.sortValue,
+    });
+  }
+
+  @Action(SetSearchValue)
+  setSearchValue(ctx: StateContext<CollectionsStateModel>, action: SetSearchValue) {
+    ctx.patchState({
+      searchText: action.searchValue,
+      page: '1',
+    });
+  }
+
+  @Action(SetPageNumber)
+  setPageNumber(ctx: StateContext<CollectionsStateModel>, action: SetPageNumber) {
+    ctx.patchState({
+      page: action.page,
+    });
+  }
+
+  @Action(SetTotalSubmissions)
+  setTotalSubmissions(ctx: StateContext<CollectionsStateModel>, action: SetTotalSubmissions) {
+    ctx.patchState({
+      totalSubmissions: action.totalCount,
+    });
+  }
+
+  @Action(GetCollectionSubmissions)
+  getCollectionSubmission(ctx: StateContext<CollectionsStateModel>, action: GetCollectionSubmissions) {
+    const state = ctx.getState();
+    ctx.patchState({
+      collectionSubmissions: {
+        ...state.collectionSubmissions,
+        isLoading: true,
       },
     });
+
+    return this.collectionsService
+      .getCollectionSubmissions(action.providerId, action.searchText, action.activeFilters, action.page, action.sort)
+      .pipe(
+        tap((res) => {
+          ctx.patchState({
+            collectionSubmissions: {
+              data: res,
+              isLoading: false,
+              error: null,
+            },
+          });
+        }),
+        catchError((error) => this.handleError(ctx, 'collectionSubmissions', error))
+      );
+  }
+
+  private handleError(ctx: StateContext<CollectionsStateModel>, section: keyof CollectionsStateModel, error: Error) {
+    const state = ctx.getState();
+    if (section !== 'sortBy' && section !== 'searchText' && section !== 'page' && section !== 'totalSubmissions') {
+      ctx.patchState({
+        [section]: {
+          ...state[section],
+          isLoading: false,
+          isSubmitting: false,
+          error: error.message,
+        },
+      });
+    }
+
     return throwError(() => error);
   }
 }
diff --git a/src/app/features/collections/utils/index.ts b/src/app/features/collections/utils/index.ts
deleted file mode 100644
index de5ab9ae8..000000000
--- a/src/app/features/collections/utils/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './mocked-data.const';
-export * from './sort-options.const';
-export * from './submission-attributes.const';
diff --git a/src/app/features/collections/utils/mocked-data.const.ts b/src/app/features/collections/utils/mocked-data.const.ts
deleted file mode 100644
index 0cb330780..000000000
--- a/src/app/features/collections/utils/mocked-data.const.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-export const SEARCH_RESULT_CARDS_DATA = [
-  {
-    id: '1',
-    title: 'Pseudo-Random Sonications For Brain HIFU',
-    description:
-      'While transcranial high intensity focused ultrasound is used in clinics for treating essential tremor and proposed for many other brain disorders, this promising treatment modality requires high energy resulting eventually in undesired transcranial high intensity focused ultrasound is used in clinics for treating essential tremor and proposed for many other brain disorders, this promising treatment modality requires high energy resulting eventually in undesired ',
-    dateCreated: new Date('2019-01-28'),
-    dateModified: new Date('2019-01-28'),
-    category: 'Research',
-    contributors: [
-      { id: '1', name: 'Lin Wang' },
-      { id: '2', name: 'Roman Nastyuk' },
-    ],
-    programArea: 'Technica',
-    status: 'Completed',
-    collectedType: '',
-    dataType: '',
-    disease: '',
-    gradeLevels: '',
-    issue: '',
-    reviewsState: '',
-    schoolType: '',
-    studyDesign: '',
-    volume: '',
-  },
-  {
-    id: '2',
-    title: 'Simulation Of Transcranial FUS Propagation',
-    description:
-      "While transcranial high intensity focused ultrasound is used in clinics for treating essential tremor and proposed for many other brain disorders, there are currently no precise tools for patient's selection and treatment planning. in this project, focused ultrasound is used in clinics for treating essential tremor and proposed for many other brain disorders",
-    dateCreated: new Date('2019-01-28'),
-    dateModified: new Date('2019-01-28'),
-    category: 'Research',
-    contributors: [{ id: '1', name: 'Lin Wang' }],
-    programArea: 'Technica',
-    status: 'Active',
-    collectedType: '',
-    dataType: '',
-    disease: '',
-    gradeLevels: '',
-    issue: '',
-    reviewsState: '',
-    schoolType: '',
-    studyDesign: '',
-    volume: '',
-  },
-  {
-    id: '3',
-    title: 'Sonications For Brain HIFU',
-    description:
-      'While transcranial high intensity focused ultrasound is used in clinics for treating essential tremor and proposed for many other brain disorders, this promising treatment modality requires high energy resulting eventually in undesired transcranial high intensity focused ultrasound is used in clinics for treating essential tremor and proposed for many other brain disorders, this promising treatment modality requires high energy resulting eventually in undesired ',
-    dateCreated: new Date('2019-01-28'),
-    dateModified: new Date('2019-01-28'),
-    category: 'Research',
-    contributors: [{ id: '2', name: 'Roman Nastyuk' }],
-    programArea: 'Technica',
-    status: 'Completed',
-    collectedType: '',
-    dataType: '',
-    disease: '',
-    gradeLevels: '',
-    issue: '',
-    reviewsState: '',
-    schoolType: '',
-    studyDesign: '',
-    volume: '',
-  },
-];
-
-export const PROGRAM_AREA_FILTERS_OPTIONS = [
-  { label: 'Public Policy', value: 'Public Policy' },
-  { label: 'Child Welfare', value: 'Child Welfare' },
-  { label: 'Criminal Justice', value: 'Criminal Justice' },
-  { label: 'Medicine', value: 'Medicine' },
-  { label: 'Public Health', value: 'Public Health' },
-  { label: 'Social Work', value: 'Social Work' },
-  { label: 'Nursing', value: 'Nursing' },
-  { label: 'Education', value: 'Education' },
-  { label: 'Law & Jurisprudence', value: 'Law & Jurisprudence' },
-  { label: 'N/A', value: 'N/A' },
-];
-
-export const COLLECTED_TYPE_FILTERS_OPTIONS = [
-  { label: 'Experiments', value: 'Experiments' },
-  { label: 'Interviews', value: 'Interviews' },
-  { label: 'Grounded Theory', value: 'Grounded Theory' },
-  { label: 'Action Research', value: 'Action Research' },
-  { label: 'Case Studies', value: 'Case Studies' },
-  { label: 'Direct Observation', value: 'Direct Observation' },
-  { label: 'Document Analysis', value: 'Document Analysis' },
-  { label: 'Interpretive Research', value: 'Interpretive Research' },
-  { label: 'Participatory Action Research', value: 'Participatory Action Research' },
-  { label: 'Event-Sampling', value: 'Event-Sampling' },
-  { label: 'Surveys', value: 'Surveys' },
-  { label: 'Quasi-Experiments', value: 'Quasi-Experiments' },
-  { label: 'Ethnography', value: 'Ethnography' },
-  { label: 'Social Network Analysis', value: 'Social Network Analysis' },
-  { label: 'Critical Research Methods', value: 'Critical Research Methods' },
-  { label: 'Design Research', value: 'Design Research' },
-  { label: 'Discourse Analysis', value: 'Discourse Analysis' },
-  { label: 'Research Synthesis', value: 'Research Synthesis' },
-];
diff --git a/src/app/features/collections/utils/sort-options.const.ts b/src/app/features/collections/utils/sort-options.const.ts
deleted file mode 100644
index 2b6377efc..000000000
--- a/src/app/features/collections/utils/sort-options.const.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const SORT_OPTIONS = [
-  { label: 'Relevance', value: '-relevance' },
-  { label: 'Date created (newest)', value: '-dateCreated' },
-  { label: 'Date created (oldest)', value: 'dateCreated' },
-  { label: 'Date modified (newest)', value: '-dateModified' },
-  { label: 'Date modified (oldest)', value: 'dateModified' },
-];
diff --git a/src/app/features/my-projects/my-projects.component.html b/src/app/features/my-projects/my-projects.component.html
index 670f88a75..b7499b273 100644
--- a/src/app/features/my-projects/my-projects.component.html
+++ b/src/app/features/my-projects/my-projects.component.html
@@ -37,7 +37,7 @@
             </ng-template>
           </p-select>
         }
-        <!--My projects-->
+
         <p-tabpanel [value]="0" class="flex flex-column gap-4 flex-1">
           <osf-my-projects-table
             [items]="projects()"
@@ -52,7 +52,6 @@
           />
         </p-tabpanel>
 
-        <!--My registrations-->
         <p-tabpanel [value]="1" class="flex flex-column gap-4 flex-1">
           <osf-my-projects-table
             [items]="registrations()"
@@ -67,7 +66,6 @@
           />
         </p-tabpanel>
 
-        <!--My preprints-->
         <p-tabpanel [value]="2" class="flex flex-column gap-4 flex-1">
           <osf-my-projects-table
             [items]="preprints()"
@@ -82,7 +80,6 @@
           />
         </p-tabpanel>
 
-        <!--Bookmarks-->
         <p-tabpanel [value]="3" class="flex flex-column gap-4 flex-1">
           @if (!bookmarks().length && !isLoading()) {
             <p>{{ 'myProjects.bookmarks.emptyState' | translate }}</p>
diff --git a/src/app/features/my-projects/services/my-projects.service.ts b/src/app/features/my-projects/services/my-projects.service.ts
index 3ad8cf027..0ffd9b6b3 100644
--- a/src/app/features/my-projects/services/my-projects.service.ts
+++ b/src/app/features/my-projects/services/my-projects.service.ts
@@ -3,8 +3,9 @@ import { map } from 'rxjs/operators';
 
 import { inject, Injectable } from '@angular/core';
 
+import { JsonApiResponse } from '@core/models';
 import { JsonApiService } from '@osf/core/services';
-import { SparseCollectionsResponse } from '@osf/features/collections/models';
+import { SparseCollectionsResponseJsonApi } from '@osf/features/collections/models';
 import { SortOrder } from '@osf/shared/enums';
 import { NodeResponseModel, UpdateNodeRequestModel } from '@shared/models';
 
@@ -90,7 +91,7 @@ export class MyProjectsService {
       'fields[collections]': 'title,bookmarks',
     };
 
-    return this.jsonApiService.get<SparseCollectionsResponse>(environment.apiUrl + '/collections/', params).pipe(
+    return this.jsonApiService.get<SparseCollectionsResponseJsonApi>(environment.apiUrl + '/collections/', params).pipe(
       map((response) => {
         const bookmarksCollection = response.data.find(
           (collection) => collection.attributes.title === 'Bookmarks' && collection.attributes.bookmarks
@@ -167,8 +168,8 @@ export class MyProjectsService {
     };
 
     return this.jsonApiService
-      .post<MyProjectsItemGetResponseJsonApi>(`${environment.apiUrl}/nodes/`, payload, params)
-      .pipe(map((response) => MyProjectsMapper.fromResponse(response)));
+      .post<JsonApiResponse<MyProjectsItemGetResponseJsonApi, null>>(`${environment.apiUrl}/nodes/`, payload, params)
+      .pipe(map((response) => MyProjectsMapper.fromResponse(response.data)));
   }
 
   getProjectById(projectId: string): Observable<NodeResponseModel> {
diff --git a/src/app/features/my-projects/store/my-projects.state.ts b/src/app/features/my-projects/store/my-projects.state.ts
index a1d38e119..630f4b9ae 100644
--- a/src/app/features/my-projects/store/my-projects.state.ts
+++ b/src/app/features/my-projects/store/my-projects.state.ts
@@ -70,7 +70,7 @@ export class MyProjectsState {
           totalProjects: res.links.meta.total,
         });
       }),
-      catchError((error) => this.handleError(ctx, ['projects', 'totalProjects'], error))
+      catchError((error) => this.handleError(ctx, 'projects', error))
     );
   }
 
@@ -95,7 +95,7 @@ export class MyProjectsState {
           totalRegistrations: res.links.meta.total,
         });
       }),
-      catchError((error) => this.handleError(ctx, ['registrations', 'totalRegistrations'], error))
+      catchError((error) => this.handleError(ctx, 'registrations', error))
     );
   }
 
@@ -120,7 +120,7 @@ export class MyProjectsState {
           totalPreprints: res.links.meta.total,
         });
       }),
-      catchError((error) => this.handleError(ctx, ['preprints', 'totalPreprints'], error))
+      catchError((error) => this.handleError(ctx, 'preprints', error))
     );
   }
 
@@ -148,7 +148,7 @@ export class MyProjectsState {
             totalBookmarks: res.links.meta.total,
           });
         }),
-        catchError((error) => this.handleError(ctx, ['bookmarks', 'totalBookmarks'], error))
+        catchError((error) => this.handleError(ctx, 'bookmarks', error))
       );
   }
 
@@ -205,23 +205,21 @@ export class MyProjectsState {
             totalProjects: state.totalProjects + 1,
           });
         }),
-        catchError((error) => this.handleError(ctx, ['projects', 'totalProjects'], error))
+        catchError((error) => this.handleError(ctx, 'projects', error))
       );
   }
 
-  private handleError(ctx: StateContext<MyProjectsStateModel>, sections: (keyof MyProjectsStateModel)[], error: Error) {
+  private handleError(ctx: StateContext<MyProjectsStateModel>, section: keyof MyProjectsStateModel, error: Error) {
     const state = ctx.getState();
-    sections.forEach((section) => {
-      if (section === 'projects' || section === 'registrations' || section === 'preprints' || section === 'bookmarks') {
-        ctx.patchState({
-          [section]: {
-            ...state[section],
-            isLoading: false,
-            error: error.message,
-          },
-        });
-      }
-    });
+    if (section === 'projects' || section === 'registrations' || section === 'preprints' || section === 'bookmarks') {
+      ctx.patchState({
+        [section]: {
+          ...state[section],
+          isLoading: false,
+          error: error.message,
+        },
+      });
+    }
 
     return throwError(() => error);
   }
diff --git a/src/app/features/preprints/components/advisory-board/advisory-board.component.ts b/src/app/features/preprints/components/advisory-board/advisory-board.component.ts
index 8471e964d..7e68ff8af 100644
--- a/src/app/features/preprints/components/advisory-board/advisory-board.component.ts
+++ b/src/app/features/preprints/components/advisory-board/advisory-board.component.ts
@@ -2,7 +2,7 @@ import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 import { StringOrNullOrUndefined } from '@core/helpers';
-import { Brand } from '@osf/features/preprints/models';
+import { Brand } from '@shared/models';
 
 @Component({
   selector: 'osf-advisory-board',
diff --git a/src/app/features/preprints/models/preprints.models.ts b/src/app/features/preprints/models/preprints.models.ts
index 26852812b..c1693a546 100644
--- a/src/app/features/preprints/models/preprints.models.ts
+++ b/src/app/features/preprints/models/preprints.models.ts
@@ -1,16 +1,7 @@
 import { StringOrNull } from '@core/helpers';
+import { Brand } from '@osf/shared/models';
 import { LicenseOptions, LicenseRecordJsonApi } from '@shared/models';
 
-export interface Brand {
-  id: string;
-  name: string;
-  heroLogoImageUrl: string;
-  heroBackgroundImageUrl: string;
-  topNavLogoImageUrl: string;
-  primaryColor: string;
-  secondaryColor: string;
-}
-
 export interface PreprintProviderDetails {
   id: string;
   name: string;
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 1bab48727..0990c38b5 100644
--- a/src/app/features/preprints/pages/landing/preprints-landing.component.ts
+++ b/src/app/features/preprints/pages/landing/preprints-landing.component.ts
@@ -15,7 +15,6 @@ import {
   BrowseBySubjectsComponent,
   PreprintServicesComponent,
 } from '@osf/features/preprints/components';
-import { BrandService } from '@osf/features/preprints/services';
 import {
   GetHighlightedSubjectsByProviderId,
   GetPreprintProviderById,
@@ -24,6 +23,7 @@ import {
 } from '@osf/features/preprints/store/preprints';
 import { SearchInputComponent } from '@shared/components';
 import { ResourceTab } from '@shared/enums';
+import { BrandService } from '@shared/services';
 
 @Component({
   selector: 'osf-overview',
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 b9d5b1a70..f1425fa2c 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
@@ -19,7 +19,6 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 import { PreprintsResourcesComponent } from '@osf/features/preprints/components';
 import { PreprintProviderHeroComponent } from '@osf/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component';
-import { BrandService } from '@osf/features/preprints/services';
 import { GetPreprintProviderById, PreprintsSelectors } from '@osf/features/preprints/store/preprints';
 import {
   GetResources,
@@ -41,6 +40,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 { BrandService } from '@shared/services';
 import { BrowserTabHelper, HeaderStyleHelper } from '@shared/utils';
 
 @Component({
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 a00d94d17..402bdd514 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
@@ -9,12 +9,12 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { AdvisoryBoardComponent, BrowseBySubjectsComponent } from '@osf/features/preprints/components';
 import { PreprintProviderFooterComponent } from '@osf/features/preprints/components/preprint-provider-footer/preprint-provider-footer.component';
 import { PreprintProviderHeroComponent } from '@osf/features/preprints/components/preprint-provider-hero/preprint-provider-hero.component';
-import { BrandService } from '@osf/features/preprints/services';
 import {
   GetHighlightedSubjectsByProviderId,
   GetPreprintProviderById,
   PreprintsSelectors,
 } from '@osf/features/preprints/store/preprints';
+import { BrandService } from '@shared/services';
 import { BrowserTabHelper, HeaderStyleHelper } from '@shared/utils';
 
 @Component({
diff --git a/src/app/features/preprints/pages/submit-preprint-stepper/submit-preprint-stepper.component.scss b/src/app/features/preprints/pages/submit-preprint-stepper/submit-preprint-stepper.component.scss
index 04a593751..93c65da0d 100644
--- a/src/app/features/preprints/pages/submit-preprint-stepper/submit-preprint-stepper.component.scss
+++ b/src/app/features/preprints/pages/submit-preprint-stepper/submit-preprint-stepper.component.scss
@@ -1,13 +1,13 @@
 .preprints-hero-container {
-  --stepper-step-background: var(--preprints-branding-secondary-color);
-  --stepper-active-step-background: var(--preprints-branding-primary-color);
+  --stepper-step-background: var(--branding-secondary-color);
+  --stepper-active-step-background: var(--branding-primary-color);
 
-  --stepper-step-color: var(--preprints-branding-primary-color);
-  --stepper-active-step-color: var(--preprints-branding-secondary-color);
+  --stepper-step-color: var(--branding-primary-color);
+  --stepper-active-step-color: var(--branding-secondary-color);
 
-  --stepper-space-line-color: color-mix(in srgb, var(--preprints-branding-primary-color), transparent 75%);
-  --stepper-active-space-line-color: var(--preprints-branding-primary-color);
+  --stepper-space-line-color: color-mix(in srgb, var(--branding-primary-color), transparent 75%);
+  --stepper-active-space-line-color: var(--branding-primary-color);
 
-  --stepper-step-border-color: color-mix(in srgb, var(--preprints-branding-primary-color), transparent 75%);
-  --stepper-active-step-border-color: var(--preprints-branding-primary-color);
+  --stepper-step-border-color: color-mix(in srgb, var(--branding-primary-color), transparent 75%);
+  --stepper-active-step-border-color: var(--branding-primary-color);
 }
diff --git a/src/app/features/preprints/pages/submit-preprint-stepper/submit-preprint-stepper.component.ts b/src/app/features/preprints/pages/submit-preprint-stepper/submit-preprint-stepper.component.ts
index 1b62fbbcc..fca7477e8 100644
--- a/src/app/features/preprints/pages/submit-preprint-stepper/submit-preprint-stepper.component.ts
+++ b/src/app/features/preprints/pages/submit-preprint-stepper/submit-preprint-stepper.component.ts
@@ -24,13 +24,13 @@ import {
 } from '@osf/features/preprints/components';
 import { submitPreprintSteps } from '@osf/features/preprints/constants';
 import { SubmitSteps } from '@osf/features/preprints/enums';
-import { BrandService } from '@osf/features/preprints/services';
 import { GetPreprintProviderById, PreprintsSelectors } from '@osf/features/preprints/store/preprints';
 import {
   ResetStateAndDeletePreprint,
   SetSelectedPreprintProviderId,
 } from '@osf/features/preprints/store/submit-preprint';
 import { StepperComponent } from '@shared/components/stepper/stepper.component';
+import { BrandService } from '@shared/services';
 import { BrowserTabHelper, HeaderStyleHelper, IS_WEB } from '@shared/utils';
 
 @Component({
diff --git a/src/app/features/preprints/services/brand.service.ts b/src/app/features/preprints/services/brand.service.ts
deleted file mode 100644
index e4f885566..000000000
--- a/src/app/features/preprints/services/brand.service.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Brand } from '@osf/features/preprints/models';
-
-export class BrandService {
-  static applyBranding(brand: Brand): void {
-    const root = document.documentElement;
-
-    root.style.setProperty('--preprints-branding-primary-color', brand.primaryColor);
-    root.style.setProperty('--preprints-branding-secondary-color', brand.secondaryColor);
-    root.style.setProperty('--preprints-branding-hero-logo-image-url', `url(${brand.topNavLogoImageUrl})`);
-    root.style.setProperty('--preprints-branding-hero-background-image-url', `url(${brand.heroBackgroundImageUrl})`);
-  }
-
-  static resetBranding(): void {
-    const root = document.documentElement;
-
-    root.style.setProperty('--preprints-branding-primary-color', '');
-    root.style.setProperty('--preprints-branding-secondary-color', '');
-    root.style.setProperty('--preprints-branding-hero-logo-image-url', '');
-    root.style.setProperty('--preprints-branding-hero-background-image-url', '');
-  }
-}
diff --git a/src/app/features/preprints/services/contributors.service.ts b/src/app/features/preprints/services/contributors.service.ts
index ace44a5f5..049393205 100644
--- a/src/app/features/preprints/services/contributors.service.ts
+++ b/src/app/features/preprints/services/contributors.service.ts
@@ -30,8 +30,8 @@ export class ContributorsService {
     const contributorData = { data: ContributorsMapper.toContributorAddRequest(data, type) };
 
     return this.jsonApiService
-      .post<ContributorResponse>(baseUrl, contributorData)
-      .pipe(map((contributor) => ContributorsMapper.fromContributorResponse(contributor)));
+      .post<JsonApiResponse<ContributorResponse, null>>(baseUrl, contributorData)
+      .pipe(map((contributor) => ContributorsMapper.fromContributorResponse(contributor.data)));
   }
 
   updateContributor(preprintId: string, data: ContributorModel): Observable<ContributorModel> {
diff --git a/src/app/features/preprints/services/index.ts b/src/app/features/preprints/services/index.ts
index 4c00c2c22..a88975c9e 100644
--- a/src/app/features/preprints/services/index.ts
+++ b/src/app/features/preprints/services/index.ts
@@ -1,4 +1,3 @@
-export { BrandService } from './brand.service';
 export { ContributorsService } from './contributors.service';
 export { PreprintsService } from './preprints.service';
 export { PreprintsFiltersOptionsService } from './preprints-resource-filters.service';
diff --git a/src/app/features/project/overview/models/project-overview.models.ts b/src/app/features/project/overview/models/project-overview.models.ts
index 3cf575259..44a8edcf7 100644
--- a/src/app/features/project/overview/models/project-overview.models.ts
+++ b/src/app/features/project/overview/models/project-overview.models.ts
@@ -259,6 +259,6 @@ export interface ProjectOverviewGetResponseJsoApi {
   };
 }
 
-export interface ProjectOverviewResponseJsoApi extends JsonApiResponse<ProjectOverviewGetResponseJsoApi, null> {
+export interface ProjectOverviewResponseJsonApi extends JsonApiResponse<ProjectOverviewGetResponseJsoApi, null> {
   data: ProjectOverviewGetResponseJsoApi;
 }
diff --git a/src/app/features/project/overview/services/project-overview.service.ts b/src/app/features/project/overview/services/project-overview.service.ts
index 2d7466491..e774a11f0 100644
--- a/src/app/features/project/overview/services/project-overview.service.ts
+++ b/src/app/features/project/overview/services/project-overview.service.ts
@@ -10,7 +10,7 @@ import {
   ComponentGetResponseJsoApi,
   ComponentOverview,
   ProjectOverview,
-  ProjectOverviewResponseJsoApi,
+  ProjectOverviewResponseJsonApi,
 } from '../models';
 
 import { environment } from 'src/environments/environment';
@@ -38,7 +38,7 @@ export class ProjectOverviewService {
     };
 
     return this.#jsonApiService
-      .get<ProjectOverviewResponseJsoApi>(`${environment.apiUrl}/nodes/${projectId}/`, params)
+      .get<ProjectOverviewResponseJsonApi>(`${environment.apiUrl}/nodes/${projectId}/`, params)
       .pipe(map((response) => ProjectOverviewMapper.fromGetProjectResponse(response.data)));
   }
 
diff --git a/src/app/features/project/settings/services/view-only-links.service.ts b/src/app/features/project/settings/services/view-only-links.service.ts
index bbc0f510e..574fca5f5 100644
--- a/src/app/features/project/settings/services/view-only-links.service.ts
+++ b/src/app/features/project/settings/services/view-only-links.service.ts
@@ -2,6 +2,7 @@ import { map, Observable } from 'rxjs';
 
 import { inject, Injectable } from '@angular/core';
 
+import { JsonApiResponse } from '@core/models';
 import { JsonApiService } from '@core/services';
 
 import { ViewOnlyLinksMapper } from '../mappers';
@@ -28,8 +29,10 @@ export class ViewOnlyLinksService {
     const params: Record<string, unknown> = { embed: 'creator' };
 
     return this.jsonApiService
-      .post<ViewOnlyLink>(`${environment.apiUrl}/nodes/${projectId}/view_only_links/`, data, params)
-      .pipe(map((response) => ViewOnlyLinksMapper.fromSingleResponse(response, projectId)));
+      .post<
+        JsonApiResponse<ViewOnlyLink, null>
+      >(`${environment.apiUrl}/nodes/${projectId}/view_only_links/`, data, params)
+      .pipe(map((response) => ViewOnlyLinksMapper.fromSingleResponse(response.data, projectId)));
   }
 
   deleteLink(projectId: string, linkId: string): Observable<void> {
diff --git a/src/app/features/project/wiki/services/wiki.service.ts b/src/app/features/project/wiki/services/wiki.service.ts
index 8d22a7b10..c326ca2c2 100644
--- a/src/app/features/project/wiki/services/wiki.service.ts
+++ b/src/app/features/project/wiki/services/wiki.service.ts
@@ -4,6 +4,7 @@ import { map, switchMap } from 'rxjs/operators';
 import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 
+import { JsonApiResponse } from '@core/models';
 import { JsonApiService } from '@osf/core/services';
 
 import { WikiMapper } from '../mappers';
@@ -36,11 +37,13 @@ export class WikiService {
         },
       },
     };
-    return this.#jsonApiService.post<WikiGetResponse>(environment.apiUrl + `/nodes/${projectId}/wikis/`, body).pipe(
-      map((response) => {
-        return WikiMapper.fromCreateWikiResponse(response);
-      })
-    );
+    return this.#jsonApiService
+      .post<JsonApiResponse<WikiGetResponse, null>>(environment.apiUrl + `/nodes/${projectId}/wikis/`, body)
+      .pipe(
+        map((response) => {
+          return WikiMapper.fromCreateWikiResponse(response.data);
+        })
+      );
   }
 
   deleteWiki(wikiId: string): Observable<void> {
@@ -106,11 +109,13 @@ export class WikiService {
         },
       },
     };
-    return this.#jsonApiService.post<WikiGetResponse>(environment.apiUrl + `/wikis/${wikiId}/versions/`, body).pipe(
-      map((response) => {
-        return WikiMapper.fromCreateWikiResponse(response);
-      })
-    );
+    return this.#jsonApiService
+      .post<JsonApiResponse<WikiGetResponse, null>>(environment.apiUrl + `/wikis/${wikiId}/versions/`, body)
+      .pipe(
+        map((response) => {
+          return WikiMapper.fromCreateWikiResponse(response.data);
+        })
+      );
   }
 
   getWikiVersionContent(wikiId: string, versionId: string): Observable<string> {
diff --git a/src/app/features/settings/developer-apps/services/developer-apps.service.ts b/src/app/features/settings/developer-apps/services/developer-apps.service.ts
index dad6a5f13..59c902f4a 100644
--- a/src/app/features/settings/developer-apps/services/developer-apps.service.ts
+++ b/src/app/features/settings/developer-apps/services/developer-apps.service.ts
@@ -35,8 +35,8 @@ export class DeveloperApplicationsService {
     const request = DeveloperAppMapper.toCreateRequest(developerAppCreate);
 
     return this.jsonApiService
-      .post<DeveloperAppGetResponse>(this.baseUrl, request)
-      .pipe(map((response) => DeveloperAppMapper.fromGetResponse(response)));
+      .post<JsonApiResponse<DeveloperAppGetResponse, null>>(this.baseUrl, request)
+      .pipe(map((response) => DeveloperAppMapper.fromGetResponse(response.data)));
   }
 
   updateApp(clientId: string, developerAppUpdate: DeveloperAppCreateUpdate): Observable<DeveloperApp> {
diff --git a/src/app/features/settings/tokens/services/tokens.service.ts b/src/app/features/settings/tokens/services/tokens.service.ts
index b0e38c2ba..3dad823c9 100644
--- a/src/app/features/settings/tokens/services/tokens.service.ts
+++ b/src/app/features/settings/tokens/services/tokens.service.ts
@@ -39,8 +39,8 @@ export class TokensService {
     const request = TokenMapper.toRequest(name, scopes);
 
     return this.jsonApiService
-      .post<TokenCreateResponseJsonApi>(`${environment.apiUrl}/tokens/`, request)
-      .pipe(map((response) => TokenMapper.fromCreateResponse(response)));
+      .post<JsonApiResponse<TokenCreateResponseJsonApi, null>>(environment.apiUrl + '/tokens/', request)
+      .pipe(map((response) => TokenMapper.fromCreateResponse(response.data)));
   }
 
   updateToken(tokenId: string, name: string, scopes: string[]): Observable<TokenModel> {
diff --git a/src/app/shared/components/contributors/services/contributors.service.ts b/src/app/shared/components/contributors/services/contributors.service.ts
index 7ecd09a8c..6601f55e9 100644
--- a/src/app/shared/components/contributors/services/contributors.service.ts
+++ b/src/app/shared/components/contributors/services/contributors.service.ts
@@ -41,8 +41,8 @@ export class ContributorsService {
     const contributorData = { data: ContributorsMapper.toContributorAddRequest(data, type) };
 
     return this.#jsonApiService
-      .post<ContributorResponse>(baseUrl, contributorData)
-      .pipe(map((contributor) => ContributorsMapper.fromContributorResponse(contributor)));
+      .post<JsonApiResponse<ContributorResponse, null>>(baseUrl, contributorData)
+      .pipe(map((contributor) => ContributorsMapper.fromContributorResponse(contributor.data)));
   }
 
   updateContributor(projectId: string, data: ContributorModel): Observable<ContributorModel> {
diff --git a/src/app/shared/components/search-input/search-input.component.ts b/src/app/shared/components/search-input/search-input.component.ts
index 92c5427bf..3c413597c 100644
--- a/src/app/shared/components/search-input/search-input.component.ts
+++ b/src/app/shared/components/search-input/search-input.component.ts
@@ -4,7 +4,7 @@ import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 
-import { IconComponent } from '../icon/icon.component';
+import { IconComponent } from '@shared/components';
 
 @Component({
   selector: 'osf-search-input',
diff --git a/src/app/shared/models/brand.model.ts b/src/app/shared/models/brand.model.ts
new file mode 100644
index 000000000..d0edbaa69
--- /dev/null
+++ b/src/app/shared/models/brand.model.ts
@@ -0,0 +1,9 @@
+export interface Brand {
+  id: string;
+  name: string;
+  heroLogoImageUrl: string;
+  heroBackgroundImageUrl: string;
+  topNavLogoImageUrl: string;
+  primaryColor: string;
+  secondaryColor: string;
+}
diff --git a/src/app/shared/models/index.ts b/src/app/shared/models/index.ts
index a41243b27..1448053ec 100644
--- a/src/app/shared/models/index.ts
+++ b/src/app/shared/models/index.ts
@@ -1,4 +1,5 @@
 export * from './addons';
+export * from './brand.model';
 export * from './charts';
 export * from './confirmation-options.model';
 export * from './create-component-form.model';
diff --git a/src/app/shared/services/addons/addons.service.ts b/src/app/shared/services/addons/addons.service.ts
index 7a0f4b369..70444279f 100644
--- a/src/app/shared/services/addons/addons.service.ts
+++ b/src/app/shared/services/addons/addons.service.ts
@@ -106,10 +106,11 @@ export class AddonsService {
     addonRequestPayload: AuthorizedAddonRequestJsonApi,
     addonType: string
   ): Observable<AuthorizedAddonResponseJsonApi> {
-    return this.jsonApiService.post<AuthorizedAddonResponseJsonApi>(
-      `${environment.addonsApiUrl}/authorized-${addonType}-accounts/`,
-      addonRequestPayload
-    );
+    return this.jsonApiService
+      .post<
+        JsonApiResponse<AuthorizedAddonResponseJsonApi, null>
+      >(`${environment.addonsApiUrl}/authorized-${addonType}-accounts/`, addonRequestPayload)
+      .pipe(map((response) => response.data));
   }
 
   updateAuthorizedAddon(
@@ -127,10 +128,11 @@ export class AddonsService {
     addonRequestPayload: ConfiguredAddonRequestJsonApi,
     addonType: string
   ): Observable<ConfiguredAddonResponseJsonApi> {
-    return this.jsonApiService.post<ConfiguredAddonResponseJsonApi>(
-      `${environment.addonsApiUrl}/configured-${addonType}-addons/`,
-      addonRequestPayload
-    );
+    return this.jsonApiService
+      .post<
+        JsonApiResponse<ConfiguredAddonResponseJsonApi, null>
+      >(`${environment.addonsApiUrl}/configured-${addonType}-addons/`, addonRequestPayload)
+      .pipe(map((response) => response.data));
   }
 
   updateConfiguredAddon(
@@ -148,13 +150,12 @@ export class AddonsService {
     invocationRequestPayload: OperationInvocationRequestJsonApi
   ): Observable<OperationInvocation> {
     return this.jsonApiService
-      .post<OperationInvocationResponseJsonApi>(
-        `${environment.addonsApiUrl}/addon-operation-invocations/`,
-        invocationRequestPayload
-      )
+      .post<
+        JsonApiResponse<OperationInvocationResponseJsonApi, null>
+      >(`${environment.addonsApiUrl}/addon-operation-invocations/`, invocationRequestPayload)
       .pipe(
         map((response) => {
-          return AddonMapper.fromOperationInvocationResponse(response);
+          return AddonMapper.fromOperationInvocationResponse(response.data);
         })
       );
   }
diff --git a/src/app/shared/services/brand.service.ts b/src/app/shared/services/brand.service.ts
new file mode 100644
index 000000000..da2f0bc46
--- /dev/null
+++ b/src/app/shared/services/brand.service.ts
@@ -0,0 +1,21 @@
+import { Brand } from '@shared/models';
+
+export class BrandService {
+  static applyBranding(brand: Brand): void {
+    const root = document.documentElement;
+
+    root.style.setProperty('--branding-primary-color', brand.primaryColor);
+    root.style.setProperty('--branding-secondary-color', brand.secondaryColor);
+    root.style.setProperty('--branding-hero-logo-image-url', `url(${brand.topNavLogoImageUrl})`);
+    root.style.setProperty('--branding-hero-background-image-url', `url(${brand.heroBackgroundImageUrl})`);
+  }
+
+  static resetBranding(): void {
+    const root = document.documentElement;
+
+    root.style.setProperty('--branding-primary-color', '');
+    root.style.setProperty('--branding-secondary-color', '');
+    root.style.setProperty('--branding-hero-logo-image-url', '');
+    root.style.setProperty('--branding-hero-background-image-url', '');
+  }
+}
diff --git a/src/app/shared/services/files.service.ts b/src/app/shared/services/files.service.ts
index fc6a8972f..fc63a2990 100644
--- a/src/app/shared/services/files.service.ts
+++ b/src/app/shared/services/files.service.ts
@@ -148,7 +148,9 @@ export class FilesService {
       resource: resourceId,
     };
 
-    return this.#jsonApiService.post<GetFileResponse>(link, body).pipe(map((response) => MapFile(response)));
+    return this.#jsonApiService
+      .post<JsonApiResponse<GetFileResponse, null>>(link, body)
+      .pipe(map((response) => MapFile(response.data)));
   }
 
   getFolderDownloadLink(resourceId: string, provider: string, folderId: string, isRootFolder: boolean): string {
diff --git a/src/app/shared/services/index.ts b/src/app/shared/services/index.ts
index 0bb43c091..f3b68a7a1 100644
--- a/src/app/shared/services/index.ts
+++ b/src/app/shared/services/index.ts
@@ -1,4 +1,5 @@
 export * from './addons';
+export { BrandService } from './brand.service';
 export { CustomConfirmationService } from './custom-confirmation.service';
 export { FilesService } from './files.service';
 export { FiltersOptionsService } from './filters-options.service';
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 0dadeba7c..e53639b1a 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -38,6 +38,13 @@
         "users": "Users"
       }
     },
+    "sort": {
+      "relevance": "Relevance",
+      "createdNewest": "Date created (newest)",
+      "createdOldest": "Date created (oldest)",
+      "modifiedNewest": "Date modified (newest)",
+      "modifiedOldest": "Date modified (oldest)"
+    },
     "labels": {
       "downloads": "Downloads",
       "year": "Year"
@@ -912,7 +919,7 @@
         "description": "Please select the status from the dropdown below or start typing to find it"
       },
       "collectedType": {
-        "label": "Collected Type",
+        "label": "Type",
         "placeholder": "Select collected types",
         "description": "Please select the collected type from the dropdown below or start typing to find it"
       },
@@ -963,11 +970,14 @@
     "searchResults": {
       "noResults": "0 results",
       "10000Results": "10,000+ results",
-      "results": "results"
+      "results": "results",
+      "noResultsFound": "No results found",
+      "noResultsFoundMessage": "Try broadening your search terms"
     },
     "common": {
       "dateCreated": "Date Created:",
-      "dateModified": "Date Modified:"
+      "dateModified": "Date Modified:",
+      "by": "by"
     }
   },
   "moderation": {
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index 07bfec294..2555b9ff5 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -164,8 +164,8 @@ $white-60: var(--white-60);
   --header-background-color: none;
   --header-background-image-url: none;
 
-  --preprints-branding-primary-color: var(--pr-blue-1);
-  --preprints-branding-secondary-color: var(--white);
-  --preprints-branding-hero-logo-image-url: none;
-  --preprints-branding-hero-background-image-url: none;
+  --branding-primary-color: var(--pr-blue-1);
+  --branding-secondary-color: var(--white);
+  --branding-hero-logo-image-url: none;
+  --branding-hero-background-image-url: none;
 }
diff --git a/src/assets/styles/components/preprints.scss b/src/assets/styles/components/preprints.scss
index 88fae462e..09a9c738e 100644
--- a/src/assets/styles/components/preprints.scss
+++ b/src/assets/styles/components/preprints.scss
@@ -2,13 +2,13 @@
 @use "assets/styles/variables" as var;
 
 .preprints-hero-container {
-  background-color: var(--preprints-branding-secondary-color);
-  background-image: var(--preprints-branding-hero-background-image-url);
+  background-color: var(--branding-secondary-color);
+  background-image: var(--branding-hero-background-image-url);
 
-  color: var(--preprints-branding-primary-color);
+  color: var(--branding-primary-color);
 
   .preprint-provider-name {
-    color: var(--preprints-branding-primary-color);
+    color: var(--branding-primary-color);
   }
 
   .provider-description {
@@ -17,25 +17,25 @@
 
   .search-container {
     .search-input:hover {
-      border-color: var(--preprints-branding-primary-color);
+      border-color: var(--branding-primary-color);
     }
   }
 
   a {
-    color: var(--preprints-branding-primary-color);
+    color: var(--branding-primary-color);
   }
 
   .preprints-branding-button {
     .p-button {
-      color: var(--preprints-branding-secondary-color);
-      background-color: var(--preprints-branding-primary-color);
-      border-color: var(--preprints-branding-secondary-color);
+      color: var(--branding-secondary-color);
+      background-color: var(--branding-primary-color);
+      border-color: var(--branding-secondary-color);
     }
   }
 }
 
 .preprints-advisory-board-section {
-  background: var(--preprints-branding-hero-background-image-url);
+  background: var(--branding-hero-background-image-url);
 
   h2 {
     font-size: mix.rem(24px);
@@ -82,21 +82,21 @@
 
   &.osf-preprint-service {
     background-image: none;
-    background-color: var(--preprints-branding-primary-color);
+    background-color: var(--branding-primary-color);
   }
 }
 
 .preprints-browse-by-subjects-section {
   .provider-subject {
     .p-button.p-button-secondary {
-      color: var(--preprints-branding-secondary-color);
-      background-color: var(--preprints-branding-primary-color);
-      border: 1px solid var(--preprints-branding-secondary-color);
+      color: var(--branding-secondary-color);
+      background-color: var(--branding-primary-color);
+      border: 1px solid var(--branding-secondary-color);
 
       &:hover {
-        color: var(--preprints-branding-primary-color);
-        border: 1px solid var(--preprints-branding-primary-color);
-        background-color: var(--preprints-branding-secondary-color);
+        color: var(--branding-primary-color);
+        border: 1px solid var(--branding-primary-color);
+        background-color: var(--branding-secondary-color);
       }
     }
   }
diff --git a/src/assets/styles/overrides/dataview.scss b/src/assets/styles/overrides/dataview.scss
index 1e6279f87..c38b76cd2 100644
--- a/src/assets/styles/overrides/dataview.scss
+++ b/src/assets/styles/overrides/dataview.scss
@@ -3,3 +3,9 @@
     text-align: center;
   }
 }
+
+.collection-search-results {
+  .p-dataview-emptymessage {
+    display: none;
+  }
+}