From 0cc74308d9947c65987a19ea1cda8bf5f3a5214b Mon Sep 17 00:00:00 2001
From: Kyrylo Petrov <kpetrov@exoft.net>
Date: Wed, 28 May 2025 20:04:31 +0300
Subject: [PATCH 01/18] chore(157): project-addons-ui

---
 src/app/app.routes.ts                         |   5 +
 src/app/core/constants/nav-items.constant.ts  |   4 +
 .../project/addons/addons.component.html      |  82 +++++++++++
 .../project/addons/addons.component.scss      |  11 ++
 .../project/addons/addons.component.spec.ts   |  22 +++
 .../project/addons/addons.component.ts        | 134 ++++++++++++++++++
 .../settings/addons/addons.component.spec.ts  |   2 +-
 .../settings/addons/addons.component.ts       |   2 +-
 .../settings/addons/components/index.ts       |   2 -
 .../addon-card-list.component.html            |   0
 .../addon-card-list.component.scss            |   0
 .../addon-card-list.component.spec.ts         |   2 +-
 .../addon-card-list.component.ts              |   4 +-
 .../addon-card/addon-card.component.html      |   0
 .../addon-card/addon-card.component.scss      |   2 +-
 .../addon-card/addon-card.component.spec.ts   |   4 +-
 .../addon-card/addon-card.component.ts        |   6 +-
 src/app/shared/components/addons/index.ts     |   2 +
 src/assets/i18n/en.json                       |   3 +-
 19 files changed, 273 insertions(+), 14 deletions(-)
 create mode 100644 src/app/features/project/addons/addons.component.html
 create mode 100644 src/app/features/project/addons/addons.component.scss
 create mode 100644 src/app/features/project/addons/addons.component.spec.ts
 create mode 100644 src/app/features/project/addons/addons.component.ts
 delete mode 100644 src/app/features/settings/addons/components/index.ts
 rename src/app/{features/settings/addons/components => shared/components/addons}/addon-card-list/addon-card-list.component.html (100%)
 rename src/app/{features/settings/addons/components => shared/components/addons}/addon-card-list/addon-card-list.component.scss (100%)
 rename src/app/{features/settings/addons/components => shared/components/addons}/addon-card-list/addon-card-list.component.spec.ts (88%)
 rename src/app/{features/settings/addons/components => shared/components/addons}/addon-card-list/addon-card-list.component.ts (74%)
 rename src/app/{features/settings/addons/components => shared/components/addons}/addon-card/addon-card.component.html (100%)
 rename src/app/{features/settings/addons/components => shared/components/addons}/addon-card/addon-card.component.scss (90%)
 rename src/app/{features/settings/addons/components => shared/components/addons}/addon-card/addon-card.component.spec.ts (89%)
 rename src/app/{features/settings/addons/components => shared/components/addons}/addon-card/addon-card.component.ts (90%)
 create mode 100644 src/app/shared/components/addons/index.ts

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index adbad36dd..5771b7b7a 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -153,6 +153,11 @@ export const routes: Routes = [
             loadComponent: () =>
               import('./features/project/settings/settings.component').then((mod) => mod.SettingsComponent),
           },
+          {
+            path: 'addons',
+            loadComponent: () =>
+              import('./features/project/addons/addons.component').then((mod) => mod.AddonsComponent),
+          },
         ],
       },
       {
diff --git a/src/app/core/constants/nav-items.constant.ts b/src/app/core/constants/nav-items.constant.ts
index c3c68d64f..3ad5ea87b 100644
--- a/src/app/core/constants/nav-items.constant.ts
+++ b/src/app/core/constants/nav-items.constant.ts
@@ -108,6 +108,10 @@ export const PROJECT_MENU_ITEMS: MenuItem[] = [
         label: 'navigation.project.settings',
         routerLink: 'settings',
       },
+      {
+        label: 'navigation.project.addons',
+        routerLink: 'addons',
+      },
     ],
   },
 ];
diff --git a/src/app/features/project/addons/addons.component.html b/src/app/features/project/addons/addons.component.html
new file mode 100644
index 000000000..8311510c6
--- /dev/null
+++ b/src/app/features/project/addons/addons.component.html
@@ -0,0 +1,82 @@
+<osf-sub-header [showButton]="false" [title]="'settings.addons.header.title' | translate" [icon]="'settings'" />
+<section class="flex-column flex flex-1">
+  <p-tabs [value]="selectedTab()" class="flex-1">
+    @if (!isMobile()) {
+      <p-tablist class="pr-5 pl-5">
+        <p-tab [value]="0">
+          {{ 'settings.addons.tabs.allAddons' | translate }}
+        </p-tab>
+        <p-tab [value]="1">
+          {{ 'settings.addons.tabs.connectedAddons' | translate }}
+        </p-tab>
+      </p-tablist>
+    }
+
+    <p-tabpanels class="p-3 sm:p-5 flex-1">
+      @if (isMobile()) {
+        <p-select
+          class="w-full mb-4"
+          [options]="tabOptions"
+          optionValue="value"
+          [ngModel]="selectedTab()"
+          (ngModelChange)="selectedTab.set($event)"
+        >
+          <ng-template #selectedItem let-selectedOption>
+            {{ selectedOption.label | translate }}
+          </ng-template>
+          <ng-template #item let-item>
+            {{ item.label | translate }}
+          </ng-template>
+        </p-select>
+      }
+      <p-tabpanel [value]="0" class="flex flex-column gap-5">
+        <p>
+          {{ 'settings.addons.description' | translate }}
+        </p>
+        <section class="grid">
+          <div class="col-12 md:col-6 lg:col-3">
+            <p-select
+              [placeholder]="'settings.addons.filters.addonType' | translate"
+              [options]="categoryOptions"
+              optionValue="value"
+              [ngModel]="selectedCategory()"
+              (ngModelChange)="onCategoryChange($event)"
+              class="w-full"
+            >
+              <ng-template #selectedItem let-selectedOption>
+                {{ selectedOption.label | translate }}
+              </ng-template>
+              <ng-template #item let-item>
+                {{ item.label | translate }}
+              </ng-template>
+            </p-select>
+          </div>
+          <div class="col-12 md:col-6 lg:col-9">
+            <osf-search-input
+              class="w-full"
+              [searchValue]="searchValue()"
+              (searchValueChange)="searchValue.set($event || '')"
+              [placeholder]="'settings.addons.filters.search' | translate"
+            />
+          </div>
+        </section>
+
+        <osf-addon-card-list [cards]="filteredAddonCards()" [showDangerButton]="false" />
+      </p-tabpanel>
+      <p-tabpanel [value]="1" class="flex flex-column gap-5">
+        <osf-search-input
+          class="flex-1"
+          [searchValue]="searchValue()"
+          (searchValueChange)="searchValue.set($event || '')"
+          [placeholder]="'settings.addons.filters.search' | translate"
+        />
+
+        <osf-addon-card-list
+          [cards]="allAuthorizedAddons()"
+          [cardButtonLabel]="'settings.addons.form.buttons.reconnect' | translate"
+          [showDangerButton]="true"
+        />
+      </p-tabpanel>
+    </p-tabpanels>
+  </p-tabs>
+</section>
diff --git a/src/app/features/project/addons/addons.component.scss b/src/app/features/project/addons/addons.component.scss
new file mode 100644
index 000000000..ef94601f7
--- /dev/null
+++ b/src/app/features/project/addons/addons.component.scss
@@ -0,0 +1,11 @@
+@use "assets/styles/mixins" as mix;
+@use "assets/styles/variables" as var;
+
+:host {
+  @include mix.flex-column;
+  flex: 1;
+
+  .tabs-container {
+    @include mix.flex-column;
+  }
+}
diff --git a/src/app/features/project/addons/addons.component.spec.ts b/src/app/features/project/addons/addons.component.spec.ts
new file mode 100644
index 000000000..4d1a6de4c
--- /dev/null
+++ b/src/app/features/project/addons/addons.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddonsComponent } from './addons.component';
+
+describe('AddonsComponent', () => {
+  let component: AddonsComponent;
+  let fixture: ComponentFixture<AddonsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AddonsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AddonsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/project/addons/addons.component.ts b/src/app/features/project/addons/addons.component.ts
new file mode 100644
index 000000000..d4205f3fd
--- /dev/null
+++ b/src/app/features/project/addons/addons.component.ts
@@ -0,0 +1,134 @@
+import { Store } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Select } from 'primeng/select';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primeng/tabs';
+
+import { ChangeDetectionStrategy, Component, computed, effect, inject, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { FormsModule } from '@angular/forms';
+
+import { UserSelectors } from '@core/store/user';
+import {
+  AddonsSelectors,
+  GetAddonsUserReference,
+  GetAuthorizedCitationAddons,
+  GetAuthorizedStorageAddons,
+  GetCitationAddons,
+  GetStorageAddons,
+} from '@osf/features/settings/addons/store';
+import { SearchInputComponent, SubHeaderComponent } from '@shared/components';
+import { AddonCardListComponent } from '@shared/components/addons';
+import { SelectOption } from '@shared/models';
+import { IS_XSMALL } from '@shared/utils';
+
+@Component({
+  selector: 'osf-addons',
+  imports: [
+    AddonCardListComponent,
+    SearchInputComponent,
+    Select,
+    SubHeaderComponent,
+    Tab,
+    TabList,
+    TabPanel,
+    TabPanels,
+    Tabs,
+    TranslatePipe,
+    FormsModule,
+  ],
+  templateUrl: './addons.component.html',
+  styleUrl: './addons.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AddonsComponent {
+  #store = inject(Store);
+  protected readonly defaultTabValue = 0;
+  protected readonly isMobile = toSignal(inject(IS_XSMALL));
+  protected readonly searchValue = signal('');
+  protected readonly selectedCategory = signal<string>('external-storage-services');
+  protected readonly selectedTab = signal<number>(this.defaultTabValue);
+  protected readonly currentUser = this.#store.selectSignal(UserSelectors.getCurrentUser);
+  protected readonly addonsUserReference = this.#store.selectSignal(AddonsSelectors.getAddonUserReference);
+  protected readonly storageAddons = this.#store.selectSignal(AddonsSelectors.getStorageAddons);
+  protected readonly citationAddons = this.#store.selectSignal(AddonsSelectors.getCitationAddons);
+  protected readonly authorizedStorageAddons = this.#store.selectSignal(AddonsSelectors.getAuthorizedStorageAddons);
+  protected readonly authorizedCitationAddons = this.#store.selectSignal(AddonsSelectors.getAuthorizedCitationAddons);
+  protected readonly allAuthorizedAddons = computed(() => {
+    const authorizedAddons = [...this.authorizedStorageAddons(), ...this.authorizedCitationAddons()];
+
+    const searchValue = this.searchValue().toLowerCase();
+    return authorizedAddons.filter((card) => card.displayName.includes(searchValue));
+  });
+
+  protected readonly userReferenceId = computed(() => {
+    return this.addonsUserReference()[0]?.id;
+  });
+
+  protected readonly currentAction = computed(() =>
+    this.selectedCategory() === 'external-storage-services' ? GetStorageAddons : GetCitationAddons
+  );
+
+  protected readonly currentAddonsState = computed(() =>
+    this.selectedCategory() === 'external-storage-services' ? this.storageAddons() : this.citationAddons()
+  );
+
+  protected readonly filteredAddonCards = computed(() => {
+    const searchValue = this.searchValue().toLowerCase();
+    return this.currentAddonsState().filter((card) => card.externalServiceName.includes(searchValue));
+  });
+
+  protected readonly tabOptions: SelectOption[] = [
+    {
+      label: 'settings.addons.tabs.allAddons',
+      value: 0,
+    },
+    {
+      label: 'settings.addons.tabs.connectedAddons',
+      value: 1,
+    },
+  ];
+
+  protected readonly categoryOptions: SelectOption[] = [
+    {
+      label: 'settings.addons.categories.additionalService',
+      value: 'external-storage-services',
+    },
+    {
+      label: 'settings.addons.categories.citationManager',
+      value: 'external-citation-services',
+    },
+  ];
+
+  protected onCategoryChange(value: string): void {
+    this.selectedCategory.set(value);
+  }
+
+  constructor() {
+    effect(() => {
+      // Only proceed if we have the current user
+      if (this.currentUser()) {
+        this.#store.dispatch(GetAddonsUserReference);
+      }
+    });
+
+    effect(() => {
+      // Only proceed if we have both current user and user reference
+      if (this.currentUser() && this.userReferenceId()) {
+        this.#loadAddonsIfNeeded(this.userReferenceId());
+      }
+    });
+  }
+
+  #loadAddonsIfNeeded(userReferenceId: string): void {
+    const action = this.currentAction();
+    const addons = this.currentAddonsState();
+
+    if (!addons?.length) {
+      this.#store.dispatch(action);
+      this.#store.dispatch(new GetAuthorizedStorageAddons(userReferenceId));
+      this.#store.dispatch(new GetAuthorizedCitationAddons(userReferenceId));
+    }
+  }
+}
diff --git a/src/app/features/settings/addons/addons.component.spec.ts b/src/app/features/settings/addons/addons.component.spec.ts
index b137bf14c..9ba6009f4 100644
--- a/src/app/features/settings/addons/addons.component.spec.ts
+++ b/src/app/features/settings/addons/addons.component.spec.ts
@@ -9,9 +9,9 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { UserSelectors } from '@osf/core/store/user';
 import { SearchInputComponent, SubHeaderComponent } from '@osf/shared/components';
 import { IS_XSMALL } from '@osf/shared/utils';
+import { AddonCardListComponent } from '@shared/components/addons';
 
 import { AddonsComponent } from './addons.component';
-import { AddonCardListComponent } from './components';
 import { AddonsSelectors } from './store';
 
 describe('AddonsComponent', () => {
diff --git a/src/app/features/settings/addons/addons.component.ts b/src/app/features/settings/addons/addons.component.ts
index c52bd8cde..a81adf4df 100644
--- a/src/app/features/settings/addons/addons.component.ts
+++ b/src/app/features/settings/addons/addons.component.ts
@@ -14,8 +14,8 @@ import { UserSelectors } from '@osf/core/store/user';
 import { SearchInputComponent, SubHeaderComponent } from '@osf/shared/components';
 import { SelectOption } from '@osf/shared/models';
 import { IS_XSMALL } from '@osf/shared/utils';
+import { AddonCardListComponent } from '@shared/components/addons';
 
-import { AddonCardListComponent } from './components';
 import {
   AddonsSelectors,
   GetAddonsUserReference,
diff --git a/src/app/features/settings/addons/components/index.ts b/src/app/features/settings/addons/components/index.ts
deleted file mode 100644
index 58c98ce7b..000000000
--- a/src/app/features/settings/addons/components/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { AddonCardComponent } from './addon-card/addon-card.component';
-export { AddonCardListComponent } from './addon-card-list/addon-card-list.component';
diff --git a/src/app/features/settings/addons/components/addon-card-list/addon-card-list.component.html b/src/app/shared/components/addons/addon-card-list/addon-card-list.component.html
similarity index 100%
rename from src/app/features/settings/addons/components/addon-card-list/addon-card-list.component.html
rename to src/app/shared/components/addons/addon-card-list/addon-card-list.component.html
diff --git a/src/app/features/settings/addons/components/addon-card-list/addon-card-list.component.scss b/src/app/shared/components/addons/addon-card-list/addon-card-list.component.scss
similarity index 100%
rename from src/app/features/settings/addons/components/addon-card-list/addon-card-list.component.scss
rename to src/app/shared/components/addons/addon-card-list/addon-card-list.component.scss
diff --git a/src/app/features/settings/addons/components/addon-card-list/addon-card-list.component.spec.ts b/src/app/shared/components/addons/addon-card-list/addon-card-list.component.spec.ts
similarity index 88%
rename from src/app/features/settings/addons/components/addon-card-list/addon-card-list.component.spec.ts
rename to src/app/shared/components/addons/addon-card-list/addon-card-list.component.spec.ts
index b6941e236..5bf262df1 100644
--- a/src/app/features/settings/addons/components/addon-card-list/addon-card-list.component.spec.ts
+++ b/src/app/shared/components/addons/addon-card-list/addon-card-list.component.spec.ts
@@ -2,7 +2,7 @@ import { MockComponent } from 'ng-mocks';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AddonCardComponent } from '../addon-card/addon-card.component';
+import { AddonCardComponent } from '@shared/components/addons/addon-card/addon-card.component';
 
 import { AddonCardListComponent } from './addon-card-list.component';
 
diff --git a/src/app/features/settings/addons/components/addon-card-list/addon-card-list.component.ts b/src/app/shared/components/addons/addon-card-list/addon-card-list.component.ts
similarity index 74%
rename from src/app/features/settings/addons/components/addon-card-list/addon-card-list.component.ts
rename to src/app/shared/components/addons/addon-card-list/addon-card-list.component.ts
index e2da2a260..a502c0ebb 100644
--- a/src/app/features/settings/addons/components/addon-card-list/addon-card-list.component.ts
+++ b/src/app/shared/components/addons/addon-card-list/addon-card-list.component.ts
@@ -1,7 +1,7 @@
 import { Component, input } from '@angular/core';
 
-import { Addon, AuthorizedAddon } from '../../models';
-import { AddonCardComponent } from '../addon-card/addon-card.component';
+import { Addon, AuthorizedAddon } from '@osf/features/settings/addons/models';
+import { AddonCardComponent } from '@shared/components/addons';
 
 @Component({
   selector: 'osf-addon-card-list',
diff --git a/src/app/features/settings/addons/components/addon-card/addon-card.component.html b/src/app/shared/components/addons/addon-card/addon-card.component.html
similarity index 100%
rename from src/app/features/settings/addons/components/addon-card/addon-card.component.html
rename to src/app/shared/components/addons/addon-card/addon-card.component.html
diff --git a/src/app/features/settings/addons/components/addon-card/addon-card.component.scss b/src/app/shared/components/addons/addon-card/addon-card.component.scss
similarity index 90%
rename from src/app/features/settings/addons/components/addon-card/addon-card.component.scss
rename to src/app/shared/components/addons/addon-card/addon-card.component.scss
index 288440f8d..d2c4ec4e3 100644
--- a/src/app/features/settings/addons/components/addon-card/addon-card.component.scss
+++ b/src/app/shared/components/addons/addon-card/addon-card.component.scss
@@ -1,4 +1,4 @@
-@use "assets/styles/variables" as var;
+@use "../../../../../assets/styles/variables" as var;
 
 :host {
   display: block;
diff --git a/src/app/features/settings/addons/components/addon-card/addon-card.component.spec.ts b/src/app/shared/components/addons/addon-card/addon-card.component.spec.ts
similarity index 89%
rename from src/app/features/settings/addons/components/addon-card/addon-card.component.spec.ts
rename to src/app/shared/components/addons/addon-card/addon-card.component.spec.ts
index 84446d41c..5b04c559d 100644
--- a/src/app/features/settings/addons/components/addon-card/addon-card.component.spec.ts
+++ b/src/app/shared/components/addons/addon-card/addon-card.component.spec.ts
@@ -5,8 +5,8 @@ import { MockPipe, MockProvider } from 'ng-mocks';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CredentialsFormat } from '../../enums';
-import { Addon } from '../../models';
+import { CredentialsFormat } from '../../../../features/settings/addons/enums';
+import { Addon } from '../../../../features/settings/addons/models';
 
 import { AddonCardComponent } from './addon-card.component';
 
diff --git a/src/app/features/settings/addons/components/addon-card/addon-card.component.ts b/src/app/shared/components/addons/addon-card/addon-card.component.ts
similarity index 90%
rename from src/app/features/settings/addons/components/addon-card/addon-card.component.ts
rename to src/app/shared/components/addons/addon-card/addon-card.component.ts
index 93308abe9..2fedde7cf 100644
--- a/src/app/features/settings/addons/components/addon-card/addon-card.component.ts
+++ b/src/app/shared/components/addons/addon-card/addon-card.component.ts
@@ -10,10 +10,10 @@ import { Component, computed, inject, input, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { Router } from '@angular/router';
 
-import { IS_XSMALL } from '@osf/shared/utils';
+import { IS_XSMALL } from '@shared/utils';
 
-import { Addon, AuthorizedAddon } from '../../models';
-import { DeleteAuthorizedAddon } from '../../store';
+import { Addon, AuthorizedAddon } from '../../../../features/settings/addons/models';
+import { DeleteAuthorizedAddon } from '../../../../features/settings/addons/store';
 
 @Component({
   selector: 'osf-addon-card',
diff --git a/src/app/shared/components/addons/index.ts b/src/app/shared/components/addons/index.ts
new file mode 100644
index 000000000..dee6639df
--- /dev/null
+++ b/src/app/shared/components/addons/index.ts
@@ -0,0 +1,2 @@
+export { AddonCardComponent } from '@shared/components/addons/addon-card/addon-card.component';
+export { AddonCardListComponent } from '@shared/components/addons/addon-card-list/addon-card-list.component';
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 5991a5a29..7d1ee9529 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -26,7 +26,8 @@
       "registrations": "Registrations",
       "settings": "Settings",
       "contributors": "Contributors",
-      "analytics": "Analytics"
+      "analytics": "Analytics",
+      "addons": "Add-ons"
     }
   },
   "auth": {

From 9797cb907fffde7f0bfdba6a38ad8066c9695a0f Mon Sep 17 00:00:00 2001
From: Kyrylo Petrov <kpetrov@exoft.net>
Date: Mon, 2 Jun 2025 18:36:00 +0300
Subject: [PATCH 02/18] fix(project-addons): minor fixes

---
 .../project/addons/addons.component.html      | 54 +++++++++----------
 .../project/addons/addons.component.scss      |  4 --
 .../project/addons/addons.component.ts        | 49 ++++++-----------
 .../project/addons/addons.constants.ts        | 33 ++++++++++++
 .../addon-card/addon-card.component.scss      |  2 +-
 .../addon-card/addon-card.component.spec.ts   |  4 +-
 .../addons/addon-card/addon-card.component.ts |  5 +-
 7 files changed, 80 insertions(+), 71 deletions(-)
 create mode 100644 src/app/features/project/addons/addons.constants.ts

diff --git a/src/app/features/project/addons/addons.component.html b/src/app/features/project/addons/addons.component.html
index 8311510c6..1beaf7a06 100644
--- a/src/app/features/project/addons/addons.component.html
+++ b/src/app/features/project/addons/addons.component.html
@@ -1,35 +1,31 @@
 <osf-sub-header [showButton]="false" [title]="'settings.addons.header.title' | translate" [icon]="'settings'" />
 <section class="flex-column flex flex-1">
-  <p-tabs [value]="selectedTab()" class="flex-1">
-    @if (!isMobile()) {
-      <p-tablist class="pr-5 pl-5">
-        <p-tab [value]="0">
-          {{ 'settings.addons.tabs.allAddons' | translate }}
-        </p-tab>
-        <p-tab [value]="1">
-          {{ 'settings.addons.tabs.connectedAddons' | translate }}
-        </p-tab>
-      </p-tablist>
-    }
+  <p-tabs [value]="selectedTab()" class="hidden md:flex md:flex-1">
+    <p-tablist class="pr-5 pl-5">
+      <p-tab [value]="AddonTabValue.ALL_ADDONS">
+        {{ 'settings.addons.tabs.allAddons' | translate }}
+      </p-tab>
+      <p-tab [value]="AddonTabValue.CONNECTED_ADDONS">
+        {{ 'settings.addons.tabs.connectedAddons' | translate }}
+      </p-tab>
+    </p-tablist>
 
     <p-tabpanels class="p-3 sm:p-5 flex-1">
-      @if (isMobile()) {
-        <p-select
-          class="w-full mb-4"
-          [options]="tabOptions"
-          optionValue="value"
-          [ngModel]="selectedTab()"
-          (ngModelChange)="selectedTab.set($event)"
-        >
-          <ng-template #selectedItem let-selectedOption>
-            {{ selectedOption.label | translate }}
-          </ng-template>
-          <ng-template #item let-item>
-            {{ item.label | translate }}
-          </ng-template>
-        </p-select>
-      }
-      <p-tabpanel [value]="0" class="flex flex-column gap-5">
+      <p-select
+        class="w-full mb-4 md:hidden"
+        [options]="tabOptions"
+        optionValue="value"
+        [ngModel]="selectedTab()"
+        (ngModelChange)="selectedTab.set($event)"
+      >
+        <ng-template #selectedItem let-selectedOption>
+          {{ selectedOption.label | translate }}
+        </ng-template>
+        <ng-template #item let-item>
+          {{ item.label | translate }}
+        </ng-template>
+      </p-select>
+      <p-tabpanel [value]="AddonTabValue.ALL_ADDONS" class="flex flex-column gap-5">
         <p>
           {{ 'settings.addons.description' | translate }}
         </p>
@@ -63,7 +59,7 @@
 
         <osf-addon-card-list [cards]="filteredAddonCards()" [showDangerButton]="false" />
       </p-tabpanel>
-      <p-tabpanel [value]="1" class="flex flex-column gap-5">
+      <p-tabpanel [value]="AddonTabValue.CONNECTED_ADDONS" class="flex flex-column gap-5">
         <osf-search-input
           class="flex-1"
           [searchValue]="searchValue()"
diff --git a/src/app/features/project/addons/addons.component.scss b/src/app/features/project/addons/addons.component.scss
index ef94601f7..93cd2d24b 100644
--- a/src/app/features/project/addons/addons.component.scss
+++ b/src/app/features/project/addons/addons.component.scss
@@ -4,8 +4,4 @@
 :host {
   @include mix.flex-column;
   flex: 1;
-
-  .tabs-container {
-    @include mix.flex-column;
-  }
 }
diff --git a/src/app/features/project/addons/addons.component.ts b/src/app/features/project/addons/addons.component.ts
index d4205f3fd..d4a356f7d 100644
--- a/src/app/features/project/addons/addons.component.ts
+++ b/src/app/features/project/addons/addons.component.ts
@@ -1,4 +1,4 @@
-import { Store } from '@ngxs/store';
+import { select, Store } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
@@ -20,9 +20,10 @@ import {
 } from '@osf/features/settings/addons/store';
 import { SearchInputComponent, SubHeaderComponent } from '@shared/components';
 import { AddonCardListComponent } from '@shared/components/addons';
-import { SelectOption } from '@shared/models';
 import { IS_XSMALL } from '@shared/utils';
 
+import { ADDON_CATEGORY_OPTIONS, ADDON_TAB_OPTIONS, AddonCategoryValue, AddonTabValue } from './addons.constants';
+
 @Component({
   selector: 'osf-addons',
   imports: [
@@ -43,17 +44,18 @@ import { IS_XSMALL } from '@shared/utils';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AddonsComponent {
+  protected readonly AddonTabValue = AddonTabValue;
   #store = inject(Store);
-  protected readonly defaultTabValue = 0;
+  protected readonly defaultTabValue = AddonTabValue.ALL_ADDONS;
   protected readonly isMobile = toSignal(inject(IS_XSMALL));
   protected readonly searchValue = signal('');
-  protected readonly selectedCategory = signal<string>('external-storage-services');
+  protected readonly selectedCategory = signal<string>(AddonCategoryValue.EXTERNAL_STORAGE_SERVICES);
   protected readonly selectedTab = signal<number>(this.defaultTabValue);
-  protected readonly currentUser = this.#store.selectSignal(UserSelectors.getCurrentUser);
-  protected readonly addonsUserReference = this.#store.selectSignal(AddonsSelectors.getAddonUserReference);
-  protected readonly storageAddons = this.#store.selectSignal(AddonsSelectors.getStorageAddons);
-  protected readonly citationAddons = this.#store.selectSignal(AddonsSelectors.getCitationAddons);
-  protected readonly authorizedStorageAddons = this.#store.selectSignal(AddonsSelectors.getAuthorizedStorageAddons);
+  protected readonly currentUser = select(UserSelectors.getCurrentUser);
+  protected readonly addonsUserReference = select(AddonsSelectors.getAddonUserReference);
+  protected readonly storageAddons = select(AddonsSelectors.getStorageAddons);
+  protected readonly citationAddons = select(AddonsSelectors.getCitationAddons);
+  protected readonly authorizedStorageAddons = select(AddonsSelectors.getAuthorizedStorageAddons);
   protected readonly authorizedCitationAddons = this.#store.selectSignal(AddonsSelectors.getAuthorizedCitationAddons);
   protected readonly allAuthorizedAddons = computed(() => {
     const authorizedAddons = [...this.authorizedStorageAddons(), ...this.authorizedCitationAddons()];
@@ -67,11 +69,13 @@ export class AddonsComponent {
   });
 
   protected readonly currentAction = computed(() =>
-    this.selectedCategory() === 'external-storage-services' ? GetStorageAddons : GetCitationAddons
+    this.selectedCategory() === AddonCategoryValue.EXTERNAL_STORAGE_SERVICES ? GetStorageAddons : GetCitationAddons
   );
 
   protected readonly currentAddonsState = computed(() =>
-    this.selectedCategory() === 'external-storage-services' ? this.storageAddons() : this.citationAddons()
+    this.selectedCategory() === AddonCategoryValue.EXTERNAL_STORAGE_SERVICES
+      ? this.storageAddons()
+      : this.citationAddons()
   );
 
   protected readonly filteredAddonCards = computed(() => {
@@ -79,27 +83,8 @@ export class AddonsComponent {
     return this.currentAddonsState().filter((card) => card.externalServiceName.includes(searchValue));
   });
 
-  protected readonly tabOptions: SelectOption[] = [
-    {
-      label: 'settings.addons.tabs.allAddons',
-      value: 0,
-    },
-    {
-      label: 'settings.addons.tabs.connectedAddons',
-      value: 1,
-    },
-  ];
-
-  protected readonly categoryOptions: SelectOption[] = [
-    {
-      label: 'settings.addons.categories.additionalService',
-      value: 'external-storage-services',
-    },
-    {
-      label: 'settings.addons.categories.citationManager',
-      value: 'external-citation-services',
-    },
-  ];
+  protected readonly tabOptions = ADDON_TAB_OPTIONS;
+  protected readonly categoryOptions = ADDON_CATEGORY_OPTIONS;
 
   protected onCategoryChange(value: string): void {
     this.selectedCategory.set(value);
diff --git a/src/app/features/project/addons/addons.constants.ts b/src/app/features/project/addons/addons.constants.ts
new file mode 100644
index 000000000..8d4941de7
--- /dev/null
+++ b/src/app/features/project/addons/addons.constants.ts
@@ -0,0 +1,33 @@
+import { SelectOption } from '@shared/models';
+
+export enum AddonTabValue {
+  ALL_ADDONS = 0,
+  CONNECTED_ADDONS = 1,
+}
+
+export enum AddonCategoryValue {
+  EXTERNAL_STORAGE_SERVICES = 'external-storage-services',
+  EXTERNAL_CITATION_SERVICES = 'external-citation-services',
+}
+
+export const ADDON_TAB_OPTIONS: SelectOption[] = [
+  {
+    label: 'settings.addons.tabs.allAddons',
+    value: AddonTabValue.ALL_ADDONS,
+  },
+  {
+    label: 'settings.addons.tabs.connectedAddons',
+    value: AddonTabValue.CONNECTED_ADDONS,
+  },
+];
+
+export const ADDON_CATEGORY_OPTIONS: SelectOption[] = [
+  {
+    label: 'settings.addons.categories.additionalService',
+    value: AddonCategoryValue.EXTERNAL_STORAGE_SERVICES,
+  },
+  {
+    label: 'settings.addons.categories.citationManager',
+    value: AddonCategoryValue.EXTERNAL_CITATION_SERVICES,
+  },
+];
diff --git a/src/app/shared/components/addons/addon-card/addon-card.component.scss b/src/app/shared/components/addons/addon-card/addon-card.component.scss
index d2c4ec4e3..288440f8d 100644
--- a/src/app/shared/components/addons/addon-card/addon-card.component.scss
+++ b/src/app/shared/components/addons/addon-card/addon-card.component.scss
@@ -1,4 +1,4 @@
-@use "../../../../../assets/styles/variables" as var;
+@use "assets/styles/variables" as var;
 
 :host {
   display: block;
diff --git a/src/app/shared/components/addons/addon-card/addon-card.component.spec.ts b/src/app/shared/components/addons/addon-card/addon-card.component.spec.ts
index 5b04c559d..eae6cf2b8 100644
--- a/src/app/shared/components/addons/addon-card/addon-card.component.spec.ts
+++ b/src/app/shared/components/addons/addon-card/addon-card.component.spec.ts
@@ -5,8 +5,8 @@ import { MockPipe, MockProvider } from 'ng-mocks';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CredentialsFormat } from '../../../../features/settings/addons/enums';
-import { Addon } from '../../../../features/settings/addons/models';
+import { CredentialsFormat } from '@osf/features/settings/addons/enums';
+import { Addon } from '@osf/features/settings/addons/models';
 
 import { AddonCardComponent } from './addon-card.component';
 
diff --git a/src/app/shared/components/addons/addon-card/addon-card.component.ts b/src/app/shared/components/addons/addon-card/addon-card.component.ts
index 2fedde7cf..6b832e0df 100644
--- a/src/app/shared/components/addons/addon-card/addon-card.component.ts
+++ b/src/app/shared/components/addons/addon-card/addon-card.component.ts
@@ -10,11 +10,10 @@ import { Component, computed, inject, input, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { Router } from '@angular/router';
 
+import { Addon, AuthorizedAddon } from '@osf/features/settings/addons/models';
+import { DeleteAuthorizedAddon } from '@osf/features/settings/addons/store';
 import { IS_XSMALL } from '@shared/utils';
 
-import { Addon, AuthorizedAddon } from '../../../../features/settings/addons/models';
-import { DeleteAuthorizedAddon } from '../../../../features/settings/addons/store';
-
 @Component({
   selector: 'osf-addon-card',
   imports: [Button, NgClass, DialogModule, TranslatePipe],

From 1e279f14164856a656eb2ace20556da24f4bbe82 Mon Sep 17 00:00:00 2001
From: Roman Nastyuk <rnastyuk@exoft.net>
Date: Tue, 3 Jun 2025 16:17:11 +0300
Subject: [PATCH 03/18] feat(project-addons-api): moved reusable addon files to
 the shared folder

---
 .../core/constants/ngxs-states.constant.ts    |  2 +-
 .../add-to-collection-form.component.html     |  1 +
 .../add-to-collection-form.component.scss     |  0
 .../add-to-collection-form.component.spec.ts  | 22 +++++++++++++++++
 .../add-to-collection-form.component.ts       | 10 ++++++++
 .../collections-main-content/index.ts         |  1 +
 .../project/addons/addons.component.html      |  6 ++---
 .../project/addons/addons.component.ts        | 24 +++++++++++--------
 .../addons/{ => utils}/addons.constants.ts    |  0
 .../settings/addons/addons.component.spec.ts  |  2 +-
 .../settings/addons/addons.component.ts       |  3 +--
 .../settings/addons/mappers/addon.mapper.ts   |  8 ++++++-
 .../features/settings/addons/models/index.ts  |  3 ---
 .../connect-addon.component.spec.ts           |  2 +-
 .../connect-addon/connect-addon.component.ts  |  4 ++--
 .../settings/addons/services/index.ts         |  1 -
 .../addon-card-list.component.ts              |  2 +-
 .../addons/addon-card/addon-card.component.ts |  4 ++--
 .../models/addons}/addon-form.model.ts        |  0
 .../models/addons}/addon-terms.model.ts       |  0
 .../models/addons}/addons.model.ts            |  0
 src/app/shared/models/addons/index.ts         |  3 +++
 src/app/shared/models/index.ts                |  1 +
 .../services/addons.service.ts                | 13 +++++-----
 src/app/shared/services/index.ts              |  1 +
 .../stores/addons}/addons.actions.ts          |  2 +-
 .../stores/addons}/addons.models.ts           |  2 +-
 .../stores/addons}/addons.selectors.ts        |  2 +-
 .../stores/addons}/addons.state.ts            |  4 ++--
 .../store => shared/stores/addons}/index.ts   |  0
 30 files changed, 82 insertions(+), 41 deletions(-)
 create mode 100644 src/app/features/collections/components/add-to-collection-form/add-to-collection-form.component.html
 create mode 100644 src/app/features/collections/components/add-to-collection-form/add-to-collection-form.component.scss
 create mode 100644 src/app/features/collections/components/add-to-collection-form/add-to-collection-form.component.spec.ts
 create mode 100644 src/app/features/collections/components/add-to-collection-form/add-to-collection-form.component.ts
 create mode 100644 src/app/features/collections/components/collections-main-content/index.ts
 rename src/app/features/project/addons/{ => utils}/addons.constants.ts (100%)
 delete mode 100644 src/app/features/settings/addons/services/index.ts
 rename src/app/{features/settings/addons/models => shared/models/addons}/addon-form.model.ts (100%)
 rename src/app/{features/settings/addons/models => shared/models/addons}/addon-terms.model.ts (100%)
 rename src/app/{features/settings/addons/models => shared/models/addons}/addons.model.ts (100%)
 create mode 100644 src/app/shared/models/addons/index.ts
 rename src/app/{features/settings/addons => shared}/services/addons.service.ts (90%)
 rename src/app/{features/settings/addons/store => shared/stores/addons}/addons.actions.ts (96%)
 rename src/app/{features/settings/addons/store => shared/stores/addons}/addons.models.ts (93%)
 rename src/app/{features/settings/addons/store => shared/stores/addons}/addons.selectors.ts (96%)
 rename src/app/{features/settings/addons/store => shared/stores/addons}/addons.state.ts (97%)
 rename src/app/{features/settings/addons/store => shared/stores/addons}/index.ts (100%)

diff --git a/src/app/core/constants/ngxs-states.constant.ts b/src/app/core/constants/ngxs-states.constant.ts
index 26e99f4a2..d8b23556d 100644
--- a/src/app/core/constants/ngxs-states.constant.ts
+++ b/src/app/core/constants/ngxs-states.constant.ts
@@ -11,11 +11,11 @@ import { RegistrationsState } from '@osf/features/project/registrations/store';
 import { SettingsState } from '@osf/features/project/settings/store';
 import { WikiState } from '@osf/features/project/wiki/store/wiki.state';
 import { AccountSettingsState } from '@osf/features/settings/account-settings/store/account-settings.state';
-import { AddonsState } from '@osf/features/settings/addons/store';
 import { DeveloperAppsState } from '@osf/features/settings/developer-apps/store';
 import { NotificationSubscriptionState } from '@osf/features/settings/notifications/store';
 import { ProfileSettingsState } from '@osf/features/settings/profile-settings/store/profile-settings.state';
 import { TokensState } from '@osf/features/settings/tokens/store';
+import { AddonsState } from '@shared/stores/addons';
 
 export const STATES = [
   AuthState,
diff --git a/src/app/features/collections/components/add-to-collection-form/add-to-collection-form.component.html b/src/app/features/collections/components/add-to-collection-form/add-to-collection-form.component.html
new file mode 100644
index 000000000..6b2db0376
--- /dev/null
+++ b/src/app/features/collections/components/add-to-collection-form/add-to-collection-form.component.html
@@ -0,0 +1 @@
+<p>add-to-collection-form works!</p>
diff --git a/src/app/features/collections/components/add-to-collection-form/add-to-collection-form.component.scss b/src/app/features/collections/components/add-to-collection-form/add-to-collection-form.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/collections/components/add-to-collection-form/add-to-collection-form.component.spec.ts b/src/app/features/collections/components/add-to-collection-form/add-to-collection-form.component.spec.ts
new file mode 100644
index 000000000..f1cd32c58
--- /dev/null
+++ b/src/app/features/collections/components/add-to-collection-form/add-to-collection-form.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddToCollectionFormComponent } from './add-to-collection-form.component';
+
+describe('AddToCollectionFormComponent', () => {
+  let component: AddToCollectionFormComponent;
+  let fixture: ComponentFixture<AddToCollectionFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AddToCollectionFormComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AddToCollectionFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/collections/components/add-to-collection-form/add-to-collection-form.component.ts b/src/app/features/collections/components/add-to-collection-form/add-to-collection-form.component.ts
new file mode 100644
index 000000000..38a7ebba4
--- /dev/null
+++ b/src/app/features/collections/components/add-to-collection-form/add-to-collection-form.component.ts
@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'osf-add-to-collection-form',
+  imports: [],
+  templateUrl: './add-to-collection-form.component.html',
+  styleUrl: './add-to-collection-form.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AddToCollectionFormComponent {}
diff --git a/src/app/features/collections/components/collections-main-content/index.ts b/src/app/features/collections/components/collections-main-content/index.ts
new file mode 100644
index 000000000..1dc736ffc
--- /dev/null
+++ b/src/app/features/collections/components/collections-main-content/index.ts
@@ -0,0 +1 @@
+export { CollectionsMainContentComponent } from './collections-main-content.component';
diff --git a/src/app/features/project/addons/addons.component.html b/src/app/features/project/addons/addons.component.html
index 1beaf7a06..fcd81e7e8 100644
--- a/src/app/features/project/addons/addons.component.html
+++ b/src/app/features/project/addons/addons.component.html
@@ -50,8 +50,7 @@
           <div class="col-12 md:col-6 lg:col-9">
             <osf-search-input
               class="w-full"
-              [searchValue]="searchValue()"
-              (searchValueChange)="searchValue.set($event || '')"
+              [control]="searchControl"
               [placeholder]="'settings.addons.filters.search' | translate"
             />
           </div>
@@ -62,8 +61,7 @@
       <p-tabpanel [value]="AddonTabValue.CONNECTED_ADDONS" class="flex flex-column gap-5">
         <osf-search-input
           class="flex-1"
-          [searchValue]="searchValue()"
-          (searchValueChange)="searchValue.set($event || '')"
+          [control]="searchControl"
           [placeholder]="'settings.addons.filters.search' | translate"
         />
 
diff --git a/src/app/features/project/addons/addons.component.ts b/src/app/features/project/addons/addons.component.ts
index d4a356f7d..e02d63fd7 100644
--- a/src/app/features/project/addons/addons.component.ts
+++ b/src/app/features/project/addons/addons.component.ts
@@ -7,9 +7,11 @@ import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primeng/tabs';
 
 import { ChangeDetectionStrategy, Component, computed, effect, inject, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { FormsModule } from '@angular/forms';
+import { FormControl, FormsModule } from '@angular/forms';
 
 import { UserSelectors } from '@core/store/user';
+import { SearchInputComponent, SubHeaderComponent } from '@shared/components';
+import { AddonCardListComponent } from '@shared/components/addons';
 import {
   AddonsSelectors,
   GetAddonsUserReference,
@@ -17,12 +19,10 @@ import {
   GetAuthorizedStorageAddons,
   GetCitationAddons,
   GetStorageAddons,
-} from '@osf/features/settings/addons/store';
-import { SearchInputComponent, SubHeaderComponent } from '@shared/components';
-import { AddonCardListComponent } from '@shared/components/addons';
+} from '@shared/stores/addons';
 import { IS_XSMALL } from '@shared/utils';
 
-import { ADDON_CATEGORY_OPTIONS, ADDON_TAB_OPTIONS, AddonCategoryValue, AddonTabValue } from './addons.constants';
+import { ADDON_CATEGORY_OPTIONS, ADDON_TAB_OPTIONS, AddonCategoryValue, AddonTabValue } from './utils/addons.constants';
 
 @Component({
   selector: 'osf-addons',
@@ -48,7 +48,7 @@ export class AddonsComponent {
   #store = inject(Store);
   protected readonly defaultTabValue = AddonTabValue.ALL_ADDONS;
   protected readonly isMobile = toSignal(inject(IS_XSMALL));
-  protected readonly searchValue = signal('');
+  protected readonly searchControl = new FormControl<string>('');
   protected readonly selectedCategory = signal<string>(AddonCategoryValue.EXTERNAL_STORAGE_SERVICES);
   protected readonly selectedTab = signal<number>(this.defaultTabValue);
   protected readonly currentUser = select(UserSelectors.getCurrentUser);
@@ -56,11 +56,11 @@ export class AddonsComponent {
   protected readonly storageAddons = select(AddonsSelectors.getStorageAddons);
   protected readonly citationAddons = select(AddonsSelectors.getCitationAddons);
   protected readonly authorizedStorageAddons = select(AddonsSelectors.getAuthorizedStorageAddons);
-  protected readonly authorizedCitationAddons = this.#store.selectSignal(AddonsSelectors.getAuthorizedCitationAddons);
+  protected readonly authorizedCitationAddons = select(AddonsSelectors.getAuthorizedCitationAddons);
   protected readonly allAuthorizedAddons = computed(() => {
     const authorizedAddons = [...this.authorizedStorageAddons(), ...this.authorizedCitationAddons()];
 
-    const searchValue = this.searchValue().toLowerCase();
+    const searchValue = this.searchControl.value?.toLowerCase() ?? '';
     return authorizedAddons.filter((card) => card.displayName.includes(searchValue));
   });
 
@@ -79,8 +79,12 @@ export class AddonsComponent {
   );
 
   protected readonly filteredAddonCards = computed(() => {
-    const searchValue = this.searchValue().toLowerCase();
-    return this.currentAddonsState().filter((card) => card.externalServiceName.includes(searchValue));
+    const searchValue = this.searchControl.value?.toLowerCase() ?? '';
+    return this.currentAddonsState().filter(
+      (card) =>
+        card.externalServiceName.toLowerCase().includes(searchValue) ||
+        card.displayName.toLowerCase().includes(searchValue)
+    );
   });
 
   protected readonly tabOptions = ADDON_TAB_OPTIONS;
diff --git a/src/app/features/project/addons/addons.constants.ts b/src/app/features/project/addons/utils/addons.constants.ts
similarity index 100%
rename from src/app/features/project/addons/addons.constants.ts
rename to src/app/features/project/addons/utils/addons.constants.ts
diff --git a/src/app/features/settings/addons/addons.component.spec.ts b/src/app/features/settings/addons/addons.component.spec.ts
index 9ba6009f4..36a5fc902 100644
--- a/src/app/features/settings/addons/addons.component.spec.ts
+++ b/src/app/features/settings/addons/addons.component.spec.ts
@@ -10,9 +10,9 @@ import { UserSelectors } from '@osf/core/store/user';
 import { SearchInputComponent, SubHeaderComponent } from '@osf/shared/components';
 import { IS_XSMALL } from '@osf/shared/utils';
 import { AddonCardListComponent } from '@shared/components/addons';
+import { AddonsSelectors } from '@shared/stores/addons';
 
 import { AddonsComponent } from './addons.component';
-import { AddonsSelectors } from './store';
 
 describe('AddonsComponent', () => {
   let component: AddonsComponent;
diff --git a/src/app/features/settings/addons/addons.component.ts b/src/app/features/settings/addons/addons.component.ts
index f05213516..2b459f22f 100644
--- a/src/app/features/settings/addons/addons.component.ts
+++ b/src/app/features/settings/addons/addons.component.ts
@@ -15,7 +15,6 @@ import { SearchInputComponent, SubHeaderComponent } from '@osf/shared/components
 import { SelectOption } from '@osf/shared/models';
 import { IS_XSMALL } from '@osf/shared/utils';
 import { AddonCardListComponent } from '@shared/components/addons';
-
 import {
   AddonsSelectors,
   GetAddonsUserReference,
@@ -23,7 +22,7 @@ import {
   GetAuthorizedStorageAddons,
   GetCitationAddons,
   GetStorageAddons,
-} from './store';
+} from '@shared/stores/addons';
 
 @Component({
   selector: 'osf-addons',
diff --git a/src/app/features/settings/addons/mappers/addon.mapper.ts b/src/app/features/settings/addons/mappers/addon.mapper.ts
index ec96cc839..d5cdab28f 100644
--- a/src/app/features/settings/addons/mappers/addon.mapper.ts
+++ b/src/app/features/settings/addons/mappers/addon.mapper.ts
@@ -1,4 +1,10 @@
-import { Addon, AddonGetResponse, AuthorizedAddon, AuthorizedAddonGetResponse, IncludedAddonData } from '../models';
+import {
+  Addon,
+  AddonGetResponse,
+  AuthorizedAddon,
+  AuthorizedAddonGetResponse,
+  IncludedAddonData,
+} from '@shared/models';
 
 export class AddonMapper {
   static fromResponse(response: AddonGetResponse): Addon {
diff --git a/src/app/features/settings/addons/models/index.ts b/src/app/features/settings/addons/models/index.ts
index 1da58de17..e69de29bb 100644
--- a/src/app/features/settings/addons/models/index.ts
+++ b/src/app/features/settings/addons/models/index.ts
@@ -1,3 +0,0 @@
-export * from './addon-form.model';
-export * from './addon-terms.model';
-export * from './addons.model';
diff --git a/src/app/features/settings/addons/pages/connect-addon/connect-addon.component.spec.ts b/src/app/features/settings/addons/pages/connect-addon/connect-addon.component.spec.ts
index dd91ebd93..32a7ddb8e 100644
--- a/src/app/features/settings/addons/pages/connect-addon/connect-addon.component.spec.ts
+++ b/src/app/features/settings/addons/pages/connect-addon/connect-addon.component.spec.ts
@@ -10,10 +10,10 @@ import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { ActivatedRoute, Navigation, Router, UrlTree } from '@angular/router';
 
 import { SubHeaderComponent } from '@osf/shared/components';
+import { AddonsSelectors } from '@shared/stores/addons';
 
 import { CredentialsFormat } from '../../enums';
 import { Addon } from '../../models';
-import { AddonsSelectors } from '../../store';
 
 import { ConnectAddonComponent } from './connect-addon.component';
 
diff --git a/src/app/features/settings/addons/pages/connect-addon/connect-addon.component.ts b/src/app/features/settings/addons/pages/connect-addon/connect-addon.component.ts
index f0f982545..7c212953b 100644
--- a/src/app/features/settings/addons/pages/connect-addon/connect-addon.component.ts
+++ b/src/app/features/settings/addons/pages/connect-addon/connect-addon.component.ts
@@ -15,11 +15,11 @@ import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators }
 import { Router, RouterLink } from '@angular/router';
 
 import { SubHeaderComponent } from '@osf/shared/components';
+import { Addon, AddonForm, AddonFormControls, AddonRequest, AddonTerm, AuthorizedAddon } from '@shared/models';
+import { AddonsSelectors, CreateAuthorizedAddon, UpdateAuthorizedAddon } from '@shared/stores/addons';
 
 import { ADDON_TERMS as addonTerms } from '../../constants';
 import { CredentialsFormat } from '../../enums';
-import { Addon, AddonForm, AddonFormControls, AddonRequest, AddonTerm, AuthorizedAddon } from '../../models';
-import { AddonsSelectors, CreateAuthorizedAddon, UpdateAuthorizedAddon } from '../../store';
 
 @Component({
   selector: 'osf-connect-addon',
diff --git a/src/app/features/settings/addons/services/index.ts b/src/app/features/settings/addons/services/index.ts
deleted file mode 100644
index a7914f93a..000000000
--- a/src/app/features/settings/addons/services/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { AddonsService } from './addons.service';
diff --git a/src/app/shared/components/addons/addon-card-list/addon-card-list.component.ts b/src/app/shared/components/addons/addon-card-list/addon-card-list.component.ts
index a502c0ebb..e5757ba68 100644
--- a/src/app/shared/components/addons/addon-card-list/addon-card-list.component.ts
+++ b/src/app/shared/components/addons/addon-card-list/addon-card-list.component.ts
@@ -1,7 +1,7 @@
 import { Component, input } from '@angular/core';
 
-import { Addon, AuthorizedAddon } from '@osf/features/settings/addons/models';
 import { AddonCardComponent } from '@shared/components/addons';
+import { Addon, AuthorizedAddon } from '@shared/models';
 
 @Component({
   selector: 'osf-addon-card-list',
diff --git a/src/app/shared/components/addons/addon-card/addon-card.component.ts b/src/app/shared/components/addons/addon-card/addon-card.component.ts
index 6b832e0df..2e3bb503d 100644
--- a/src/app/shared/components/addons/addon-card/addon-card.component.ts
+++ b/src/app/shared/components/addons/addon-card/addon-card.component.ts
@@ -10,8 +10,8 @@ import { Component, computed, inject, input, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { Router } from '@angular/router';
 
-import { Addon, AuthorizedAddon } from '@osf/features/settings/addons/models';
-import { DeleteAuthorizedAddon } from '@osf/features/settings/addons/store';
+import { Addon, AuthorizedAddon } from '@shared/models';
+import { DeleteAuthorizedAddon } from '@shared/stores/addons';
 import { IS_XSMALL } from '@shared/utils';
 
 @Component({
diff --git a/src/app/features/settings/addons/models/addon-form.model.ts b/src/app/shared/models/addons/addon-form.model.ts
similarity index 100%
rename from src/app/features/settings/addons/models/addon-form.model.ts
rename to src/app/shared/models/addons/addon-form.model.ts
diff --git a/src/app/features/settings/addons/models/addon-terms.model.ts b/src/app/shared/models/addons/addon-terms.model.ts
similarity index 100%
rename from src/app/features/settings/addons/models/addon-terms.model.ts
rename to src/app/shared/models/addons/addon-terms.model.ts
diff --git a/src/app/features/settings/addons/models/addons.model.ts b/src/app/shared/models/addons/addons.model.ts
similarity index 100%
rename from src/app/features/settings/addons/models/addons.model.ts
rename to src/app/shared/models/addons/addons.model.ts
diff --git a/src/app/shared/models/addons/index.ts b/src/app/shared/models/addons/index.ts
new file mode 100644
index 000000000..1da58de17
--- /dev/null
+++ b/src/app/shared/models/addons/index.ts
@@ -0,0 +1,3 @@
+export * from './addon-form.model';
+export * from './addon-terms.model';
+export * from './addons.model';
diff --git a/src/app/shared/models/index.ts b/src/app/shared/models/index.ts
index 6c9819889..e5a6f5502 100644
--- a/src/app/shared/models/index.ts
+++ b/src/app/shared/models/index.ts
@@ -1,3 +1,4 @@
+export * from './addons';
 export * from './charts';
 export * from './create-component-form.model';
 export * from './create-project-form.model';
diff --git a/src/app/features/settings/addons/services/addons.service.ts b/src/app/shared/services/addons.service.ts
similarity index 90%
rename from src/app/features/settings/addons/services/addons.service.ts
rename to src/app/shared/services/addons.service.ts
index 91f36fc0a..6eae8f661 100644
--- a/src/app/features/settings/addons/services/addons.service.ts
+++ b/src/app/shared/services/addons.service.ts
@@ -4,11 +4,10 @@ import { map, Observable } from 'rxjs';
 
 import { inject, Injectable } from '@angular/core';
 
-import { JsonApiResponse } from '@osf/core/models';
-import { JsonApiService } from '@osf/core/services';
-import { UserSelectors } from '@osf/core/store/user';
-
-import { AddonMapper } from '../mappers';
+import { JsonApiResponse } from '@core/models';
+import { JsonApiService } from '@core/services';
+import { UserSelectors } from '@core/store/user';
+import { AddonMapper } from '@osf/features/settings/addons/mappers';
 import {
   Addon,
   AddonGetResponse,
@@ -18,9 +17,9 @@ import {
   AuthorizedAddonGetResponse,
   IncludedAddonData,
   UserReference,
-} from '../models';
+} from '@shared/models';
 
-import { environment } from 'src/environments/environment';
+import { environment } from '../../../environments/environment';
 
 @Injectable({
   providedIn: 'root',
diff --git a/src/app/shared/services/index.ts b/src/app/shared/services/index.ts
index ecd67f72f..3340372f9 100644
--- a/src/app/shared/services/index.ts
+++ b/src/app/shared/services/index.ts
@@ -1,3 +1,4 @@
+export { AddonsService } from './addons.service';
 export { FiltersOptionsService } from './filters-options.service';
 export { SearchService } from './search.service';
 export { ToastService } from './toast.service';
diff --git a/src/app/features/settings/addons/store/addons.actions.ts b/src/app/shared/stores/addons/addons.actions.ts
similarity index 96%
rename from src/app/features/settings/addons/store/addons.actions.ts
rename to src/app/shared/stores/addons/addons.actions.ts
index 53c1b977f..a3f8053d6 100644
--- a/src/app/features/settings/addons/store/addons.actions.ts
+++ b/src/app/shared/stores/addons/addons.actions.ts
@@ -1,4 +1,4 @@
-import { AddonRequest } from '../models';
+import { AddonRequest } from '@shared/models';
 
 export class GetStorageAddons {
   static readonly type = '[Addons] Get Storage Addons';
diff --git a/src/app/features/settings/addons/store/addons.models.ts b/src/app/shared/stores/addons/addons.models.ts
similarity index 93%
rename from src/app/features/settings/addons/store/addons.models.ts
rename to src/app/shared/stores/addons/addons.models.ts
index 30864329f..426488b2d 100644
--- a/src/app/features/settings/addons/store/addons.models.ts
+++ b/src/app/shared/stores/addons/addons.models.ts
@@ -1,4 +1,4 @@
-import { Addon, AddonResponse, AuthorizedAddon, UserReference } from '../models';
+import { Addon, AddonResponse, AuthorizedAddon, UserReference } from '@shared/models';
 
 export interface AddonsStateModel {
   storageAddons: Addon[];
diff --git a/src/app/features/settings/addons/store/addons.selectors.ts b/src/app/shared/stores/addons/addons.selectors.ts
similarity index 96%
rename from src/app/features/settings/addons/store/addons.selectors.ts
rename to src/app/shared/stores/addons/addons.selectors.ts
index df1c3e64c..a76e5740d 100644
--- a/src/app/features/settings/addons/store/addons.selectors.ts
+++ b/src/app/shared/stores/addons/addons.selectors.ts
@@ -1,6 +1,6 @@
 import { Selector } from '@ngxs/store';
 
-import { Addon } from '../models';
+import { Addon } from '@shared/models';
 
 import { AddonsStateModel } from './addons.models';
 import { AddonsState } from './addons.state';
diff --git a/src/app/features/settings/addons/store/addons.state.ts b/src/app/shared/stores/addons/addons.state.ts
similarity index 97%
rename from src/app/features/settings/addons/store/addons.state.ts
rename to src/app/shared/stores/addons/addons.state.ts
index 18bc5c04b..073d311a6 100644
--- a/src/app/features/settings/addons/store/addons.state.ts
+++ b/src/app/shared/stores/addons/addons.state.ts
@@ -4,8 +4,8 @@ import { Observable, switchMap, tap } from 'rxjs';
 
 import { inject, Injectable } from '@angular/core';
 
-import { AddonResponse } from '../models';
-import { AddonsService } from '../services';
+import { AddonResponse } from '@shared/models';
+import { AddonsService } from '@shared/services';
 
 import {
   CreateAuthorizedAddon,
diff --git a/src/app/features/settings/addons/store/index.ts b/src/app/shared/stores/addons/index.ts
similarity index 100%
rename from src/app/features/settings/addons/store/index.ts
rename to src/app/shared/stores/addons/index.ts

From 9cb147bd440edaf990a0de9f8e6f62580c4a086c Mon Sep 17 00:00:00 2001
From: Roman Nastyuk <rnastyuk@exoft.net>
Date: Mon, 9 Jun 2025 13:52:33 +0300
Subject: [PATCH 04/18] feat(profile-addons-api): added initial profile addons
 page structure and logic

---
 src/app/app.routes.ts                         |  16 +-
 src/app/core/interceptors/auth.interceptor.ts |   1 -
 src/app/core/store/user/user.model.ts         |   2 +-
 src/app/core/store/user/user.selectors.ts     |  27 +-
 src/app/core/store/user/user.state.ts         |  25 +-
 .../project/addons/addons.component.html      |  25 +-
 .../project/addons/addons.component.ts        | 143 +++++---
 .../project/addons/addons.constants.ts        |  33 --
 .../connect-configure-addon.component.html    | 303 ++++++++++++++++
 .../connect-configure-addon.component.scss}   |   0
 .../connect-configure-addon.component.spec.ts |  83 +++++
 .../connect-configure-addon.component.ts      | 335 +++++++++++++++++
 .../project/addons/components/index.ts        |   1 +
 .../models/addon-config-actions.interface.ts  |   8 +
 .../features/project/addons/models/index.ts   |   1 +
 .../addons/utils/addon-config-map.type.ts     |   3 +
 .../project/addons/utils/addons.constants.ts  |  33 --
 .../features/project/addons/utils/index.ts    |   1 +
 .../store/project-overview.selectors.ts       |   5 -
 .../settings/addons/addons.component.html     |  10 +-
 .../settings/addons/addons.component.spec.ts  |   2 +-
 .../settings/addons/addons.component.ts       | 115 +++---
 .../connect-addon.component.html              |   0
 .../connect-addon.component.scss              |  21 ++
 .../connect-addon.component.spec.ts           |   4 +-
 .../connect-addon/connect-addon.component.ts  | 100 ++----
 .../addons/{pages => components}/index.ts     |   0
 .../settings/addons/constants/index.ts        |   1 -
 .../features/settings/addons/enums/index.ts   |   1 -
 .../features/settings/addons/mappers/index.ts |   1 -
 .../features/settings/addons/models/index.ts  |   0
 src/app/features/settings/settings.routes.ts  |   4 +-
 .../addon-card-list.component.html            |   2 +
 .../addon-card-list.component.ts              |   8 +-
 .../addons/addon-card/addon-card.component.ts |  14 +-
 .../constants/addon-terms.const.ts            |  13 +-
 .../addons-category-options.const.ts          |  13 +
 .../constants/addons-tab-options.const.ts     |  13 +
 src/app/shared/constants/index.ts             |   3 +
 .../shared/enums/addon-form-controls.enum.ts  |   9 +
 src/app/shared/enums/addon-tab.enum.ts        |   4 +
 src/app/shared/enums/addons-category.enum.ts  |   4 +
 .../enums/addons-credentials-format.enum.ts}  |   0
 src/app/shared/enums/index.ts                 |   6 +
 .../enums/profile-addons-stepper.enum.ts      |   7 +
 .../addons => shared}/mappers/addon.mapper.ts |  15 +
 src/app/shared/mappers/index.ts               |   1 +
 .../shared/models/addons/addon-form.model.ts  |  10 +-
 .../{addons.model.ts => addons.models.ts}     |  32 ++
 src/app/shared/models/addons/index.ts         |   3 +-
 src/app/shared/models/addons/term.model.ts    |  12 +
 src/app/shared/services/addons.service.ts     |  28 +-
 .../shared/stores/addons/addons.actions.ts    |  18 +
 src/app/shared/stores/addons/addons.models.ts |  25 +-
 .../shared/stores/addons/addons.selectors.ts  |  89 ++++-
 src/app/shared/stores/addons/addons.state.ts  | 337 ++++++++++++++++--
 src/assets/i18n/en.json                       |  11 +-
 src/assets/styles/overrides/button.scss       |   2 +
 58 files changed, 1627 insertions(+), 356 deletions(-)
 delete mode 100644 src/app/features/project/addons/addons.constants.ts
 create mode 100644 src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.html
 rename src/app/features/{settings/addons/pages/connect-addon/connect-addon.component.scss => project/addons/components/connect-configure-addon/connect-configure-addon.component.scss} (100%)
 create mode 100644 src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.spec.ts
 create mode 100644 src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.ts
 create mode 100644 src/app/features/project/addons/components/index.ts
 create mode 100644 src/app/features/project/addons/models/addon-config-actions.interface.ts
 create mode 100644 src/app/features/project/addons/models/index.ts
 create mode 100644 src/app/features/project/addons/utils/addon-config-map.type.ts
 delete mode 100644 src/app/features/project/addons/utils/addons.constants.ts
 create mode 100644 src/app/features/project/addons/utils/index.ts
 rename src/app/features/settings/addons/{pages => components}/connect-addon/connect-addon.component.html (100%)
 create mode 100644 src/app/features/settings/addons/components/connect-addon/connect-addon.component.scss
 rename src/app/features/settings/addons/{pages => components}/connect-addon/connect-addon.component.spec.ts (96%)
 rename src/app/features/settings/addons/{pages => components}/connect-addon/connect-addon.component.ts (68%)
 rename src/app/features/settings/addons/{pages => components}/index.ts (100%)
 delete mode 100644 src/app/features/settings/addons/constants/index.ts
 delete mode 100644 src/app/features/settings/addons/enums/index.ts
 delete mode 100644 src/app/features/settings/addons/mappers/index.ts
 delete mode 100644 src/app/features/settings/addons/models/index.ts
 rename src/app/{features/settings/addons => shared}/constants/addon-terms.const.ts (93%)
 create mode 100644 src/app/shared/constants/addons-category-options.const.ts
 create mode 100644 src/app/shared/constants/addons-tab-options.const.ts
 create mode 100644 src/app/shared/enums/addon-form-controls.enum.ts
 create mode 100644 src/app/shared/enums/addon-tab.enum.ts
 create mode 100644 src/app/shared/enums/addons-category.enum.ts
 rename src/app/{features/settings/addons/enums/credentials-format.enum.ts => shared/enums/addons-credentials-format.enum.ts} (100%)
 create mode 100644 src/app/shared/enums/profile-addons-stepper.enum.ts
 rename src/app/{features/settings/addons => shared}/mappers/addon.mapper.ts (80%)
 rename src/app/shared/models/addons/{addons.model.ts => addons.models.ts} (83%)
 create mode 100644 src/app/shared/models/addons/term.model.ts

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 65ee4363c..6ede1e540 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -164,8 +164,20 @@ export const routes: Routes = [
           },
           {
             path: 'addons',
-            loadComponent: () =>
-              import('./features/project/addons/addons.component').then((mod) => mod.AddonsComponent),
+            children: [
+              {
+                path: '',
+                loadComponent: () =>
+                  import('./features/project/addons/addons.component').then((mod) => mod.AddonsComponent),
+              },
+              {
+                path: 'connect-addon',
+                loadComponent: () =>
+                  import(
+                    './features/project/addons/components/connect-configure-addon/connect-configure-addon.component'
+                  ).then((mod) => mod.ConnectConfigureAddonComponent),
+              },
+            ],
           },
         ],
       },
diff --git a/src/app/core/interceptors/auth.interceptor.ts b/src/app/core/interceptors/auth.interceptor.ts
index 9b2ac4219..732b5e55f 100644
--- a/src/app/core/interceptors/auth.interceptor.ts
+++ b/src/app/core/interceptors/auth.interceptor.ts
@@ -7,7 +7,6 @@ export const authInterceptor: HttpInterceptorFn = (
   next: HttpHandlerFn
 ): Observable<HttpEvent<unknown>> => {
   const authToken = 'UlO9O9GNKgVzJD7pUeY53jiQTKJ4U2znXVWNvh0KZQruoENuILx0IIYf9LoDz7Duq72EIm';
-  // OBJoUomBgbUuDgQo5JoaSKNya6XaYcd0ojAX1XOLmWi6J2arQPzByxyEi81fHE60drQUWv
   // UlO9O9GNKgVzJD7pUeY53jiQTKJ4U2znXVWNvh0KZQruoENuILx0IIYf9LoDz7Duq72EIm kyrylo
   // 2rjFZwmdDG4rtKj7hGkEMO6XyHBM2lN7XBbsA1e8OqcFhOWu6Z7fQZiheu9RXtzSeVrgOt roman nastyuk
 
diff --git a/src/app/core/store/user/user.model.ts b/src/app/core/store/user/user.model.ts
index 9b567a611..fdb6aec8e 100644
--- a/src/app/core/store/user/user.model.ts
+++ b/src/app/core/store/user/user.model.ts
@@ -3,6 +3,6 @@ import { AsyncStateModel } from '@shared/models/store';
 import { User, UserSettings } from '../../models';
 
 export interface UserStateModel {
-  currentUser: User | null;
+  currentUser: AsyncStateModel<User | null>;
   currentUserSettings: AsyncStateModel<UserSettings | null>;
 }
diff --git a/src/app/core/store/user/user.selectors.ts b/src/app/core/store/user/user.selectors.ts
index 257ba64df..bd0782e77 100644
--- a/src/app/core/store/user/user.selectors.ts
+++ b/src/app/core/store/user/user.selectors.ts
@@ -8,23 +8,28 @@ import { Social } from '@osf/shared/models';
 export class UserSelectors {
   @Selector([UserState])
   static getCurrentUser(state: UserStateModel): User | null {
-    return state.currentUser;
+    return state.currentUser.data;
+  }
+
+  @Selector([UserState])
+  static getCurrentUserLoading(state: UserStateModel): boolean {
+    return state.currentUser.isLoading;
   }
 
   @Selector([UserState])
   static getProfileSettings(state: UserStateModel): ProfileSettingsStateModel {
     return {
-      education: state.currentUser?.education ?? [],
-      employment: state.currentUser?.employment ?? [],
-      social: state.currentUser?.social ?? ({} as Social),
+      education: state.currentUser.data?.education ?? [],
+      employment: state.currentUser.data?.employment ?? [],
+      social: state.currentUser.data?.social ?? ({} as Social),
       user: {
-        middleNames: state.currentUser?.middleNames ?? '',
-        suffix: state.currentUser?.suffix ?? '',
-        id: state.currentUser?.id ?? '',
-        fullName: state.currentUser?.fullName ?? '',
-        email: state.currentUser?.email ?? '',
-        givenName: state.currentUser?.givenName ?? '',
-        familyName: state.currentUser?.familyName ?? '',
+        middleNames: state.currentUser.data?.middleNames ?? '',
+        suffix: state.currentUser.data?.suffix ?? '',
+        id: state.currentUser.data?.id ?? '',
+        fullName: state.currentUser.data?.fullName ?? '',
+        email: state.currentUser.data?.email ?? '',
+        givenName: state.currentUser.data?.givenName ?? '',
+        familyName: state.currentUser.data?.familyName ?? '',
       },
     } satisfies ProfileSettingsStateModel;
   }
diff --git a/src/app/core/store/user/user.state.ts b/src/app/core/store/user/user.state.ts
index 3bec0a0eb..be4743f2c 100644
--- a/src/app/core/store/user/user.state.ts
+++ b/src/app/core/store/user/user.state.ts
@@ -15,7 +15,11 @@ import { UserStateModel } from './user.model';
 @State<UserStateModel>({
   name: 'user',
   defaults: {
-    currentUser: null,
+    currentUser: {
+      data: null,
+      isLoading: false,
+      error: null,
+    },
     currentUserSettings: {
       data: null,
       isLoading: false,
@@ -30,10 +34,21 @@ export class UserState {
 
   @Action(GetCurrentUser)
   getCurrentUser(ctx: StateContext<UserStateModel>) {
+    ctx.patchState({
+      currentUser: {
+        ...ctx.getState().currentUser,
+        isLoading: true,
+      },
+    });
+
     return this.userService.getCurrentUser().pipe(
       tap((user) => {
         ctx.patchState({
-          currentUser: user,
+          currentUser: {
+            data: user,
+            isLoading: false,
+            error: null,
+          },
         });
         ctx.dispatch(new SetupProfileSettings());
       })
@@ -43,7 +58,11 @@ export class UserState {
   @Action(SetCurrentUser)
   setCurrentUser(ctx: StateContext<UserStateModel>, action: SetCurrentUser) {
     ctx.patchState({
-      currentUser: action.user,
+      currentUser: {
+        data: action.user,
+        isLoading: false,
+        error: null,
+      },
     });
   }
 
diff --git a/src/app/features/project/addons/addons.component.html b/src/app/features/project/addons/addons.component.html
index fcd81e7e8..2c4502a91 100644
--- a/src/app/features/project/addons/addons.component.html
+++ b/src/app/features/project/addons/addons.component.html
@@ -55,8 +55,13 @@
             />
           </div>
         </section>
-
-        <osf-addon-card-list [cards]="filteredAddonCards()" [showDangerButton]="false" />
+        @if (!isAddonsLoading()) {
+          <osf-addon-card-list [cards]="filteredAddonCards()" [showDangerButton]="false" />
+        } @else {
+          <div class="mt-8">
+            <osf-loading-spinner />
+          </div>
+        }
       </p-tabpanel>
       <p-tabpanel [value]="AddonTabValue.CONNECTED_ADDONS" class="flex flex-column gap-5">
         <osf-search-input
@@ -65,11 +70,17 @@
           [placeholder]="'settings.addons.filters.search' | translate"
         />
 
-        <osf-addon-card-list
-          [cards]="allAuthorizedAddons()"
-          [cardButtonLabel]="'settings.addons.form.buttons.reconnect' | translate"
-          [showDangerButton]="true"
-        />
+        @if (!isAddonsLoading()) {
+          <osf-addon-card-list
+            [cards]="allConfiguredAddons()"
+            [cardButtonLabel]="'settings.addons.form.buttons.reconnect' | translate"
+            [showDangerButton]="true"
+          />
+        } @else {
+          <div class="mt-8">
+            <osf-loading-spinner />
+          </div>
+        }
       </p-tabpanel>
     </p-tabpanels>
   </p-tabs>
diff --git a/src/app/features/project/addons/addons.component.ts b/src/app/features/project/addons/addons.component.ts
index e02d63fd7..5da8e2f1d 100644
--- a/src/app/features/project/addons/addons.component.ts
+++ b/src/app/features/project/addons/addons.component.ts
@@ -1,29 +1,32 @@
-import { select, Store } from '@ngxs/store';
+import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { Select } from 'primeng/select';
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primeng/tabs';
 
-import { ChangeDetectionStrategy, Component, computed, effect, inject, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, inject, OnInit, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, FormsModule } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
 
 import { UserSelectors } from '@core/store/user';
-import { SearchInputComponent, SubHeaderComponent } from '@shared/components';
+import { LoadingSpinnerComponent, SearchInputComponent, SubHeaderComponent } from '@shared/components';
 import { AddonCardListComponent } from '@shared/components/addons';
+import { ADDON_CATEGORY_OPTIONS, ADDON_TAB_OPTIONS } from '@shared/constants';
+import { AddonCategory, AddonTabValue } from '@shared/enums';
 import {
   AddonsSelectors,
+  DeleteAuthorizedAddon,
+  GetAddonsResourceReference,
   GetAddonsUserReference,
-  GetAuthorizedCitationAddons,
-  GetAuthorizedStorageAddons,
   GetCitationAddons,
+  GetConfiguredCitationAddons,
+  GetConfiguredStorageAddons,
   GetStorageAddons,
 } from '@shared/stores/addons';
 import { IS_XSMALL } from '@shared/utils';
 
-import { ADDON_CATEGORY_OPTIONS, ADDON_TAB_OPTIONS, AddonCategoryValue, AddonTabValue } from './utils/addons.constants';
-
 @Component({
   selector: 'osf-addons',
   imports: [
@@ -38,47 +41,84 @@ import { ADDON_CATEGORY_OPTIONS, ADDON_TAB_OPTIONS, AddonCategoryValue, AddonTab
     Tabs,
     TranslatePipe,
     FormsModule,
+    LoadingSpinnerComponent,
   ],
   templateUrl: './addons.component.html',
   styleUrl: './addons.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AddonsComponent {
-  protected readonly AddonTabValue = AddonTabValue;
-  #store = inject(Store);
-  protected readonly defaultTabValue = AddonTabValue.ALL_ADDONS;
-  protected readonly isMobile = toSignal(inject(IS_XSMALL));
-  protected readonly searchControl = new FormControl<string>('');
-  protected readonly selectedCategory = signal<string>(AddonCategoryValue.EXTERNAL_STORAGE_SERVICES);
-  protected readonly selectedTab = signal<number>(this.defaultTabValue);
-  protected readonly currentUser = select(UserSelectors.getCurrentUser);
-  protected readonly addonsUserReference = select(AddonsSelectors.getAddonUserReference);
-  protected readonly storageAddons = select(AddonsSelectors.getStorageAddons);
-  protected readonly citationAddons = select(AddonsSelectors.getCitationAddons);
-  protected readonly authorizedStorageAddons = select(AddonsSelectors.getAuthorizedStorageAddons);
-  protected readonly authorizedCitationAddons = select(AddonsSelectors.getAuthorizedCitationAddons);
-  protected readonly allAuthorizedAddons = computed(() => {
-    const authorizedAddons = [...this.authorizedStorageAddons(), ...this.authorizedCitationAddons()];
+export class AddonsComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  protected readonly tabOptions = ADDON_TAB_OPTIONS;
+  protected readonly categoryOptions = ADDON_CATEGORY_OPTIONS;
+  protected isMobile = toSignal(inject(IS_XSMALL));
+  protected AddonTabValue = AddonTabValue;
+  protected defaultTabValue = AddonTabValue.ALL_ADDONS;
+  protected searchControl = new FormControl<string>('');
+  protected selectedCategory = signal<string>(AddonCategory.EXTERNAL_STORAGE_SERVICES);
+  protected selectedTab = signal<number>(this.defaultTabValue);
+
+  protected currentUser = select(UserSelectors.getCurrentUser);
+  protected addonsResourceReference = select(AddonsSelectors.getAddonsResourceReference);
+  protected addonsUserReference = select(AddonsSelectors.getAddonsUserReference);
+  protected storageAddons = select(AddonsSelectors.getStorageAddons);
+  protected citationAddons = select(AddonsSelectors.getCitationAddons);
+  protected configuredStorageAddons = select(AddonsSelectors.getConfiguredStorageAddons);
+  protected configuredCitationAddons = select(AddonsSelectors.getConfiguredCitationAddons);
+
+  protected isCurrentUserLoading = select(UserSelectors.getCurrentUserLoading);
+  protected isUserReferenceLoading = select(AddonsSelectors.getAddonsUserReferenceLoading);
+  protected isResourceReferenceLoading = select(AddonsSelectors.getAddonsResourceReferenceLoading);
+  protected isStorageAddonsLoading = select(AddonsSelectors.getStorageAddonsLoading);
+  protected isCitationAddonsLoading = select(AddonsSelectors.getCitationAddonsLoading);
+  protected isConfiguredStorageAddonsLoading = select(AddonsSelectors.getConfiguredStorageAddonsLoading);
+  protected isConfiguredCitationAddonsLoading = select(AddonsSelectors.getConfiguredCitationAddonsLoading);
+  protected isAddonsLoading = computed(() => {
+    return (
+      this.isStorageAddonsLoading() ||
+      this.isCitationAddonsLoading() ||
+      this.isUserReferenceLoading() ||
+      this.isResourceReferenceLoading() ||
+      this.isCurrentUserLoading()
+    );
+  });
 
-    const searchValue = this.searchControl.value?.toLowerCase() ?? '';
-    return authorizedAddons.filter((card) => card.displayName.includes(searchValue));
+  protected actions = createDispatchMap({
+    getStorageAddons: GetStorageAddons,
+    getCitationAddons: GetCitationAddons,
+    getConfiguredStorageAddons: GetConfiguredStorageAddons,
+    getConfiguredCitationAddons: GetConfiguredCitationAddons,
+    getAddonsUserReference: GetAddonsUserReference,
+    getAddonsResourceReference: GetAddonsResourceReference,
+    deleteAuthorizedAddon: DeleteAuthorizedAddon,
   });
 
   protected readonly userReferenceId = computed(() => {
     return this.addonsUserReference()[0]?.id;
   });
 
-  protected readonly currentAction = computed(() =>
-    this.selectedCategory() === AddonCategoryValue.EXTERNAL_STORAGE_SERVICES ? GetStorageAddons : GetCitationAddons
+  protected allConfiguredAddons = computed(() => {
+    const authorizedAddons = [...this.configuredStorageAddons(), ...this.configuredCitationAddons()];
+
+    const searchValue = this.searchControl.value?.toLowerCase() ?? '';
+    return authorizedAddons.filter((card) => card.displayName.includes(searchValue));
+  });
+
+  protected resourceReferenceId = computed(() => {
+    return this.addonsResourceReference()[0]?.id;
+  });
+
+  protected currentAction = computed(() =>
+    this.selectedCategory() === AddonCategory.EXTERNAL_STORAGE_SERVICES
+      ? this.actions.getStorageAddons
+      : this.actions.getCitationAddons
   );
 
-  protected readonly currentAddonsState = computed(() =>
-    this.selectedCategory() === AddonCategoryValue.EXTERNAL_STORAGE_SERVICES
-      ? this.storageAddons()
-      : this.citationAddons()
+  protected currentAddonsState = computed(() =>
+    this.selectedCategory() === AddonCategory.EXTERNAL_STORAGE_SERVICES ? this.storageAddons() : this.citationAddons()
   );
 
-  protected readonly filteredAddonCards = computed(() => {
+  protected filteredAddonCards = computed(() => {
     const searchValue = this.searchControl.value?.toLowerCase() ?? '';
     return this.currentAddonsState().filter(
       (card) =>
@@ -87,37 +127,46 @@ export class AddonsComponent {
     );
   });
 
-  protected readonly tabOptions = ADDON_TAB_OPTIONS;
-  protected readonly categoryOptions = ADDON_CATEGORY_OPTIONS;
-
   protected onCategoryChange(value: string): void {
     this.selectedCategory.set(value);
   }
 
   constructor() {
     effect(() => {
-      // Only proceed if we have the current user
-      if (this.currentUser()) {
-        this.#store.dispatch(GetAddonsUserReference);
+      if (this.currentUser() && !this.userReferenceId()) {
+        this.actions.getAddonsUserReference();
       }
     });
 
     effect(() => {
-      // Only proceed if we have both current user and user reference
       if (this.currentUser() && this.userReferenceId()) {
-        this.#loadAddonsIfNeeded(this.userReferenceId());
+        const action = this.currentAction();
+        const addons = this.currentAddonsState();
+
+        if (!addons?.length) {
+          action();
+        }
+      }
+    });
+
+    effect(() => {
+      const resourceReferenceId = this.resourceReferenceId();
+      if (resourceReferenceId) {
+        this.fetchAllConfiguredAddons(resourceReferenceId);
       }
     });
   }
 
-  #loadAddonsIfNeeded(userReferenceId: string): void {
-    const action = this.currentAction();
-    const addons = this.currentAddonsState();
+  ngOnInit(): void {
+    const projectId = this.route.parent?.parent?.snapshot.params['id'];
 
-    if (!addons?.length) {
-      this.#store.dispatch(action);
-      this.#store.dispatch(new GetAuthorizedStorageAddons(userReferenceId));
-      this.#store.dispatch(new GetAuthorizedCitationAddons(userReferenceId));
+    if (projectId && !this.addonsResourceReference()) {
+      this.actions.getAddonsResourceReference(projectId);
     }
   }
+
+  private fetchAllConfiguredAddons(resourceReferenceId: string): void {
+    this.actions.getConfiguredStorageAddons(resourceReferenceId);
+    this.actions.getConfiguredCitationAddons(resourceReferenceId);
+  }
 }
diff --git a/src/app/features/project/addons/addons.constants.ts b/src/app/features/project/addons/addons.constants.ts
deleted file mode 100644
index 8d4941de7..000000000
--- a/src/app/features/project/addons/addons.constants.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { SelectOption } from '@shared/models';
-
-export enum AddonTabValue {
-  ALL_ADDONS = 0,
-  CONNECTED_ADDONS = 1,
-}
-
-export enum AddonCategoryValue {
-  EXTERNAL_STORAGE_SERVICES = 'external-storage-services',
-  EXTERNAL_CITATION_SERVICES = 'external-citation-services',
-}
-
-export const ADDON_TAB_OPTIONS: SelectOption[] = [
-  {
-    label: 'settings.addons.tabs.allAddons',
-    value: AddonTabValue.ALL_ADDONS,
-  },
-  {
-    label: 'settings.addons.tabs.connectedAddons',
-    value: AddonTabValue.CONNECTED_ADDONS,
-  },
-];
-
-export const ADDON_CATEGORY_OPTIONS: SelectOption[] = [
-  {
-    label: 'settings.addons.categories.additionalService',
-    value: AddonCategoryValue.EXTERNAL_STORAGE_SERVICES,
-  },
-  {
-    label: 'settings.addons.categories.citationManager',
-    value: AddonCategoryValue.EXTERNAL_CITATION_SERVICES,
-  },
-];
diff --git a/src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.html b/src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.html
new file mode 100644
index 000000000..109ed5008
--- /dev/null
+++ b/src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.html
@@ -0,0 +1,303 @@
+<osf-sub-header [showButton]="false" [title]="'settings.addons.connectAddon.title' | translate" />
+<section class="stepper-container flex-column flex flex-1 p-5">
+  <p-stepper [value]="AddonStepperValue.TERMS">
+    <p-step-panels>
+      <p-step-panel [value]="AddonStepperValue.TERMS">
+        <ng-template #content let-activateCallback="activateCallback">
+          <section class="flex flex-column gap-2">
+            <h2>
+              {{ addon()?.providerName }}
+              {{ 'settings.addons.connectAddon.terms' | translate }}
+            </h2>
+
+            <div class="mt-4">
+              <p-table [value]="terms()" class="addon-table">
+                <ng-template pTemplate="header">
+                  <tr>
+                    <th>
+                      {{ 'settings.addons.connectAddon.table.function' | translate }}
+                    </th>
+                    <th>
+                      {{ 'settings.addons.connectAddon.table.status' | translate }}
+                    </th>
+                  </tr>
+                </ng-template>
+                <ng-template pTemplate="body" let-term>
+                  <tr
+                    [ngClass]="{
+                      'background-warning': term.type === 'warning',
+                      'background-success': term.type === 'info',
+                      'background-danger': term.type === 'danger',
+                    }"
+                  >
+                    <td>{{ term.function }}</td>
+                    <td>{{ term.status }}</td>
+                  </tr>
+                </ng-template>
+              </p-table>
+            </div>
+
+            <div class="flex flex-column gap-2 mt-4">
+              <p>
+                {{ 'settings.addons.connectAddon.termsDescription' | translate }}
+              </p>
+              <p>
+                {{ 'settings.addons.connectAddon.storageDescription' | translate }}
+              </p>
+            </div>
+
+            <div class="flex gap-4 align-self-center md:align-self-end mt-3">
+              <p-button
+                [label]="'settings.addons.form.buttons.cancel' | translate"
+                severity="info"
+                class="w-10rem btn-full-width"
+                [routerLink]="[baseUrl() + '/addons']"
+              ></p-button>
+              <p-button
+                [label]="
+                  !(isAuthorizedCitationAddonsLoading() || isAuthorizedStorageAddonsLoading())
+                    ? ('settings.addons.form.buttons.next' | translate)
+                    : ('settings.addons.form.buttons.acceptingTerms' | translate)
+                "
+                class="w-10rem btn-full-width"
+                [loading]="isAuthorizedCitationAddonsLoading() || isAuthorizedStorageAddonsLoading()"
+                (onClick)="handleAuthorizedAccountsPresenceCheck()"
+              ></p-button>
+            </div>
+          </section>
+        </ng-template>
+      </p-step-panel>
+
+      <p-step-panel [value]="AddonStepperValue.CHOOSE_CONNECTION">
+        <ng-template #content let-activateCallback="activateCallback">
+          <div class="flex flex-column gap-4">
+            <div class="flex justify-content-between">
+              <h2 class="align-self-center inline-block">{{ loginOrChooseAccountText() }}</h2>
+              <p-button
+                [label]="'settings.addons.form.buttons.back' | translate"
+                severity="info"
+                class="w-7rem btn-full-width"
+                (click)="activateCallback(AddonStepperValue.TERMS)"
+              ></p-button>
+            </div>
+
+            <div class="flex mt-3 gap-4">
+              <p-button
+                [label]="'settings.addons.form.buttons.existingAccount' | translate"
+                (click)="activateCallback(AddonStepperValue.CHOOSE_ACCOUNT)"
+              ></p-button>
+
+              <p-button
+                [label]="'settings.addons.form.buttons.newAccount' | translate"
+                severity="secondary"
+                (click)="activateCallback(AddonStepperValue.SETUP_NEW_ACCOUNT)"
+              ></p-button>
+            </div>
+          </div>
+        </ng-template>
+      </p-step-panel>
+
+      <p-step-panel [value]="AddonStepperValue.CHOOSE_ACCOUNT">
+        <ng-template #content let-activateCallback="activateCallback">
+          <section class="flex flex-column gap-5">
+            <h2 class="pt-2">
+              {{ 'settings.addons.connectAddon.chooseExistingAccount' | translate }} {{ addon()?.displayName }}
+            </h2>
+            <ul class="flex flex-column gap-3 mt-2">
+              @for (account of currentAuthorizedAddonAccounts(); track account.id) {
+                <li class="flex cursor-pointer" tabindex="0">
+                  <p-radiobutton
+                    [(ngModel)]="chosenAccount"
+                    [value]="account.displayName"
+                    [inputId]="account.id"
+                    (click)="$event.stopPropagation()"
+                  ></p-radiobutton>
+                  <label [for]="account.id" class="ml-2 radio-label">{{ account.displayName }}</label>
+                </li>
+              }
+            </ul>
+            <div class="flex gap-4 align-self-end">
+              <p-button
+                class="w-10rem btn-full-width"
+                [label]="'settings.addons.form.buttons.back' | translate"
+                severity="info"
+                (onClick)="activateCallback(AddonStepperValue.CHOOSE_CONNECTION)"
+              ></p-button>
+              <p-button
+                class="w-10rem btn-full-width"
+                [label]="'settings.addons.form.buttons.next' | translate"
+                (onClick)="activateCallback(4)"
+              ></p-button>
+            </div>
+          </section>
+        </ng-template>
+      </p-step-panel>
+
+      <p-step-panel [value]="AddonStepperValue.SETUP_NEW_ACCOUNT">
+        <ng-template #content let-activateCallback="activateCallback">
+          <form [formGroup]="addonForm" (ngSubmit)="handleConnectAddon()" class="flex flex-column gap-5">
+            <h2>{{ 'settings.addons.connectAddon.setupNewAccount' | translate }}</h2>
+            <p-card>
+              @if (addon()?.credentialsFormat === credentialsFormat.ACCESS_SECRET_KEYS) {
+                <h2 class="mb-2">
+                  {{ 'settings.addons.form.fields.accessKey' | translate }}
+                </h2>
+                <input
+                  class="mb-5"
+                  pInputText
+                  [placeholder]="'settings.addons.form.fields.accessKey' | translate"
+                  [formControlName]="formControls.AccessKey"
+                />
+                <h2 class="mb-2">
+                  {{ 'settings.addons.form.fields.secretKey' | translate }}
+                </h2>
+                <input
+                  class="mb-5"
+                  pInputText
+                  [placeholder]="'settings.addons.form.fields.secretKey' | translate"
+                  [formControlName]="formControls.SecretKey"
+                />
+              }
+
+              @if (addon()?.credentialsFormat === credentialsFormat.DATAVERSE_API_TOKEN) {
+                <h2 class="mb-2">
+                  {{ 'settings.addons.form.fields.hostUrl' | translate }}
+                </h2>
+                <p class="mb-2">
+                  {{ 'settings.addons.form.fields.hostUrlDescription' | translate }}
+                </p>
+                <input class="mb-4" pInputText [formControlName]="formControls.HostUrl" />
+                <h2 class="mb-2">
+                  {{ 'settings.addons.form.fields.personalAccessToken' | translate }}
+                </h2>
+                <input
+                  class="mb-4"
+                  pInputText
+                  [placeholder]="'settings.addons.form.fields.personalAccessToken' | translate"
+                  [formControlName]="formControls.PersonalAccessToken"
+                />
+              }
+
+              @if (addon()?.credentialsFormat === credentialsFormat.USERNAME_PASSWORD) {
+                <h2 class="mb-2">
+                  {{ 'settings.addons.form.fields.hostUrl' | translate }}
+                </h2>
+                <p class="mb-2">
+                  {{ 'settings.addons.form.fields.hostUrlDescription' | translate }}
+                </p>
+                <input class="mb-4" pInputText [formControlName]="formControls.HostUrl" />
+                <h2 class="mb-2">
+                  {{ 'settings.addons.form.fields.username' | translate }}
+                </h2>
+                <input
+                  class="mb-4"
+                  pInputText
+                  [placeholder]="'settings.addons.form.fields.username' | translate"
+                  [formControlName]="formControls.Username"
+                />
+                <h2 class="mb-2">
+                  {{ 'settings.addons.form.fields.password' | translate }}
+                </h2>
+                <p class="mb-2">
+                  {{ 'settings.addons.form.fields.passwordDescription' | translate }}
+                </p>
+                <div class="mb-4">
+                  <p-password [feedback]="false" [toggleMask]="true" [formControlName]="formControls.Password" />
+                </div>
+              }
+
+              @if (addon()?.credentialsFormat === credentialsFormat.REPO_TOKEN) {
+                <h2 class="mb-2">
+                  {{ 'settings.addons.form.fields.accessKey' | translate }}
+                </h2>
+                <input
+                  class="mb-4"
+                  pInputText
+                  [placeholder]="'settings.addons.form.fields.accessKey' | translate"
+                  [formControlName]="formControls.AccessKey"
+                />
+                <h2 class="mb-2">
+                  {{ 'settings.addons.form.fields.secretKey' | translate }}
+                </h2>
+                <input
+                  class="mb-4"
+                  pInputText
+                  [placeholder]="'settings.addons.form.fields.secretKey' | translate"
+                  [formControlName]="formControls.SecretKey"
+                />
+              }
+
+              <h2 class="mb-2">
+                {{ 'settings.addons.form.fields.accountName' | translate }}
+              </h2>
+              <p class="mb-2">
+                {{ 'settings.addons.form.fields.accountNameDescription' | translate }}
+              </p>
+              <input pInputText [formControlName]="formControls.AccountName" />
+            </p-card>
+
+            <div class="flex gap-4 align-self-center md:align-self-end mt-3">
+              <!--              @if (!isAuthorized()) {-->
+              <p-button
+                [label]="'settings.addons.form.buttons.back' | translate"
+                severity="info"
+                class="w-10rem btn-full-width"
+                (onClick)="activateCallback(AddonStepperValue.TERMS)"
+                [disabled]="isAddonConnecting()"
+              ></p-button>
+
+              <p-button
+                class="w-10rem btn-full-width"
+                [label]="'settings.addons.form.buttons.authorize' | translate"
+                type="submit"
+                [disabled]="!addonForm.valid || !this.addonsUserReference().length || isAddonConnecting()"
+              ></p-button>
+              <!--              } @else {-->
+              <!--                <p-button-->
+              <!--                  [label]="'settings.addons.form.buttons.cancel' | translate"-->
+              <!--                  severity="info"-->
+              <!--                  class="w-10rem btn-full-width"-->
+              <!--                  [routerLink]="[baseUrl() + '/addons']"-->
+              <!--                  [disabled]="isAddonConnecting()"-->
+              <!--                ></p-button>-->
+
+              <!--                <p-button-->
+              <!--                  class="w-10rem btn-full-width"-->
+              <!--                  [label]="'settings.addons.form.buttons.reconnect' | translate"-->
+              <!--                  [link]="true"-->
+              <!--                  (onClick)="handleConnectAddon()"-->
+              <!--                  [disabled]="!addonForm.valid || !this.addonsUserReference().length || isAddonConnecting()"-->
+              <!--                ></p-button>-->
+              <!--              }-->
+            </div>
+          </form>
+        </ng-template>
+      </p-step-panel>
+
+      <p-step-panel [value]="AddonStepperValue.AUTH">
+        <ng-template #content>
+          <div class="flex flex-column gap-4">
+            <div class="flex justify-content-between">
+              <h2 class="align-self-center inline-block">
+                {{ 'settings.addons.connectAddon.setupNewAccount' | translate }}
+              </h2>
+              <p-button
+                [label]="'settings.addons.form.buttons.back' | translate"
+                severity="info"
+                class="w-7rem btn-full-width"
+                [routerLink]="[baseUrl() + '/addons']"
+              ></p-button>
+            </div>
+
+            <p>
+              {{ 'settings.addons.connectAddon.oauthDescription' | translate }}
+            </p>
+            <a [href]="addonAuthUrl()" target="_blank" rel="noopener noreferrer">
+              {{ 'settings.addons.connectAddon.startOauth' | translate }}
+            </a>
+          </div>
+        </ng-template>
+      </p-step-panel>
+    </p-step-panels>
+  </p-stepper>
+</section>
diff --git a/src/app/features/settings/addons/pages/connect-addon/connect-addon.component.scss b/src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.scss
similarity index 100%
rename from src/app/features/settings/addons/pages/connect-addon/connect-addon.component.scss
rename to src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.scss
diff --git a/src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.spec.ts b/src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.spec.ts
new file mode 100644
index 000000000..a7df98958
--- /dev/null
+++ b/src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.spec.ts
@@ -0,0 +1,83 @@
+import { Store } from '@ngxs/store';
+
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { MockComponent, MockPipe, MockProvider } from 'ng-mocks';
+
+import { of } from 'rxjs';
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
+import { ActivatedRoute, Navigation, Router, UrlTree } from '@angular/router';
+
+import { SubHeaderComponent } from '@osf/shared/components';
+import { AddonsSelectors } from '@shared/stores/addons';
+
+import { CredentialsFormat } from '../../enums';
+import { Addon } from '../../models';
+
+import { ConnectConfigureAddonComponent } from './connect-configure-addon.component';
+
+describe('ConnectAddonComponent', () => {
+  let component: ConnectConfigureAddonComponent;
+  let fixture: ComponentFixture<ConnectConfigureAddonComponent>;
+
+  const mockAddon: Addon = {
+    id: 'test-addon-id',
+    type: 'external-storage-services',
+    displayName: 'Test Addon',
+    credentialsFormat: CredentialsFormat.OAUTH2,
+    supportedFeatures: ['ACCESS'],
+    providerName: 'Test Provider',
+    authUrl: 'https://test.com/auth',
+    externalServiceName: 'test-service',
+  };
+
+  beforeEach(async () => {
+    const mockNavigation: Partial<Navigation> = {
+      id: 1,
+      initialUrl: new UrlTree(),
+      extractedUrl: new UrlTree(),
+      trigger: 'imperative',
+      previousNavigation: null,
+      extras: {
+        state: { addon: mockAddon },
+      },
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [ConnectConfigureAddonComponent, MockComponent(SubHeaderComponent), MockPipe(TranslatePipe)],
+      providers: [
+        provideNoopAnimations(),
+        MockProvider(Store, {
+          selectSignal: jest.fn().mockImplementation((selector) => {
+            if (selector === AddonsSelectors.getAddonsUserReference) {
+              return () => [{ id: 'test-user-id' }];
+            }
+            if (selector === AddonsSelectors.getCreatedOrUpdatedAuthorizedAddon) {
+              return () => null;
+            }
+            return () => null;
+          }),
+          dispatch: jest.fn().mockReturnValue(of({})),
+        }),
+        MockProvider(Router, {
+          getCurrentNavigation: () => mockNavigation as Navigation,
+          navigate: jest.fn(),
+        }),
+        MockProvider(TranslateService),
+        MockProvider(ActivatedRoute),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ConnectConfigureAddonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create and initialize with addon data from router state', () => {
+    expect(component).toBeTruthy();
+    expect(component['addon']()).toEqual(mockAddon);
+    expect(component['terms']().length).toBeGreaterThan(0);
+    expect(component['addonForm']).toBeTruthy();
+  });
+});
diff --git a/src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.ts b/src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.ts
new file mode 100644
index 000000000..2176e0936
--- /dev/null
+++ b/src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.ts
@@ -0,0 +1,335 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { Card } from 'primeng/card';
+import { InputText } from 'primeng/inputtext';
+import { Password } from 'primeng/password';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { StepPanel, StepPanels, Stepper } from 'primeng/stepper';
+import { TableModule } from 'primeng/table';
+
+import { NgClass } from '@angular/common';
+import { Component, computed, inject, signal, viewChild } from '@angular/core';
+import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+
+import { AddonConfigMap } from '@osf/features/project/addons/utils';
+import { SubHeaderComponent } from '@osf/shared/components';
+import { ADDON_TERMS as addonTerms } from '@osf/shared/constants';
+import { AddonFormControls, CredentialsFormat, ProjectAddonsStepperValue } from '@osf/shared/enums';
+import { SettingsAddonsStepperValue } from '@shared/enums/settings-addons-stepper.enum';
+import { Addon, AddonForm, AddonRequest, AddonTerm, AuthorizedAddon } from '@shared/models';
+import {
+  AddonsSelectors,
+  CreateAuthorizedAddon,
+  GetAuthorizedCitationAddons,
+  GetAuthorizedStorageAddons,
+  UpdateAuthorizedAddon,
+} from '@shared/stores/addons';
+
+@Component({
+  selector: 'osf-connect-configure-addon',
+  imports: [
+    SubHeaderComponent,
+    StepPanel,
+    StepPanels,
+    Stepper,
+    Button,
+    TableModule,
+    RouterLink,
+    NgClass,
+    Card,
+    FormsModule,
+    ReactiveFormsModule,
+    InputText,
+    Password,
+    TranslatePipe,
+    RadioButtonModule,
+  ],
+  templateUrl: './connect-configure-addon.component.html',
+  providers: [RadioButtonModule],
+  styleUrl: './connect-configure-addon.component.scss',
+})
+export class ConnectConfigureAddonComponent {
+  private translateService = inject(TranslateService);
+  private router = inject(Router);
+  private fb = inject(FormBuilder);
+  protected stepper = viewChild(Stepper);
+  protected AddonStepperValue = ProjectAddonsStepperValue;
+  protected credentialsFormat = CredentialsFormat;
+  protected formControls = AddonFormControls;
+  protected terms = signal<AddonTerm[]>([]);
+  protected addon = signal<Addon | AuthorizedAddon | null>(null);
+  protected addonAuthUrl = signal<string>('/settings/addons');
+  protected currentAuthorizedAddonAccounts = signal<AuthorizedAddon[]>([]);
+  protected chosenAccount = '';
+
+  protected addonsUserReference = select(AddonsSelectors.getAddonsUserReference);
+  protected createdAddon = select(AddonsSelectors.getCreatedOrUpdatedAuthorizedAddon);
+  protected authorizedStorageAddons = select(AddonsSelectors.getAuthorizedStorageAddons);
+  protected authorizedCitationAddons = select(AddonsSelectors.getAuthorizedCitationAddons);
+
+  protected isAuthorizedStorageAddonsLoading = select(AddonsSelectors.getAuthorizedStorageAddonsLoading);
+  protected isAuthorizedCitationAddonsLoading = select(AddonsSelectors.getAuthorizedCitationAddonsLoading);
+  protected isAddonConnecting = select(AddonsSelectors.getCreatedOrUpdatedStorageAddonSubmitting);
+
+  protected actions = createDispatchMap({
+    getAuthorizedStorageAddons: GetAuthorizedStorageAddons,
+    getAuthorizedCitationAddons: GetAuthorizedCitationAddons,
+    createAuthorizedAddon: CreateAuthorizedAddon,
+    updateAuthorizedAddon: UpdateAuthorizedAddon,
+  });
+
+  protected readonly userReferenceId = computed(() => {
+    return this.addonsUserReference()[0]?.id;
+  });
+
+  protected loginOrChooseAccountText = computed(() => {
+    return this.translateService.instant('settings.addons.connectAddon.loginToOrSelectAccount', {
+      addonName: this.addon()?.displayName,
+    });
+  });
+
+  // protected isAuthorized = computed(() => {
+  //   //check if the addon is already authorized
+  //   const addon = this.addon();
+  //   if (addon) {
+  //     return addon.type === 'authorized-storage-accounts' || addon.type === 'authorized-citation-accounts';
+  //   }
+  //   return false;
+  // });
+
+  protected addonTypeString = computed(() => {
+    //get the addon type string based on the addon type property
+    const addon = this.addon();
+    if (addon) {
+      return addon.type === 'external-storage-services' || addon.type === 'authorized-storage-accounts'
+        ? 'storage'
+        : 'citation';
+    }
+    return '';
+  });
+  protected addonForm: FormGroup<AddonForm>;
+
+  protected readonly baseUrl = computed(() => {
+    const currentUrl = this.router.url;
+    return currentUrl.split('/addons')[0];
+  });
+
+  constructor() {
+    const terms = this.getTerms();
+    this.terms.set(terms);
+    this.addonForm = this.initializeForm();
+  }
+
+  protected handleConnectAddon(): void {
+    if (!this.addon() || !this.addonForm.valid) return;
+
+    const request = this.generateRequestPayload();
+
+    this.actions.createAuthorizedAddon(request, this.addonTypeString()).subscribe({
+      complete: () => {
+        const createdAddon = this.createdAddon();
+        if (createdAddon) {
+          this.addonAuthUrl.set(createdAddon.attributes.auth_url);
+          window.open(createdAddon.attributes.auth_url, '_blank');
+          this.stepper()?.value.set(SettingsAddonsStepperValue.AUTH);
+        }
+      },
+    });
+  }
+
+  protected handleAuthorizedAccountsPresenceCheck() {
+    const addonType = this.addonTypeString();
+    const referenceId = this.userReferenceId();
+    const currentAddon = this.addon();
+
+    if (!addonType || !referenceId || !currentAddon) return;
+
+    const addonConfig: AddonConfigMap = {
+      storage: {
+        getAddons: () => this.actions.getAuthorizedStorageAddons(referenceId),
+        getAuthorizedAddons: () => this.authorizedStorageAddons(),
+      },
+      citation: {
+        getAddons: () => this.actions.getAuthorizedCitationAddons(referenceId),
+        getAuthorizedAddons: () => this.authorizedCitationAddons(),
+      },
+    };
+
+    const selectedConfig = addonConfig[addonType];
+    if (!selectedConfig) return;
+
+    selectedConfig.getAddons().subscribe({
+      complete: () => {
+        const authorizedAddons = selectedConfig.getAuthorizedAddons();
+        const hasMatchingAddon = authorizedAddons.some(
+          (addon) => addon.externalServiceName === currentAddon.externalServiceName
+        );
+
+        if (hasMatchingAddon && authorizedAddons.length) {
+          const addonAccounts = authorizedAddons.filter(
+            (addon) => addon.externalServiceName === currentAddon.externalServiceName
+          );
+
+          this.currentAuthorizedAddonAccounts.set(addonAccounts);
+        }
+
+        const nextStep = hasMatchingAddon
+          ? ProjectAddonsStepperValue.CHOOSE_CONNECTION
+          : ProjectAddonsStepperValue.SETUP_NEW_ACCOUNT;
+
+        this.stepper()?.value.set(nextStep);
+      },
+    });
+  }
+
+  private initializeForm(): FormGroup<AddonForm> {
+    const addon = this.addon();
+
+    if (addon) {
+      const formControls: Partial<AddonForm> = {
+        [AddonFormControls.AccountName]: this.fb.control<string>(addon.displayName || '', Validators.required),
+      };
+
+      switch (addon.credentialsFormat) {
+        case CredentialsFormat.ACCESS_SECRET_KEYS:
+          formControls[AddonFormControls.AccessKey] = this.fb.control<string>('', Validators.required);
+          formControls[AddonFormControls.SecretKey] = this.fb.control<string>('', Validators.required);
+          break;
+        case CredentialsFormat.DATAVERSE_API_TOKEN:
+          formControls[AddonFormControls.HostUrl] = this.fb.control<string>('', Validators.required);
+          formControls[AddonFormControls.PersonalAccessToken] = this.fb.control<string>('', Validators.required);
+          break;
+        case CredentialsFormat.USERNAME_PASSWORD:
+          formControls[AddonFormControls.HostUrl] = this.fb.control<string>('', Validators.required);
+          formControls[AddonFormControls.Username] = this.fb.control<string>('', Validators.required);
+          formControls[AddonFormControls.Password] = this.fb.control<string>('', Validators.required);
+          break;
+        case CredentialsFormat.REPO_TOKEN:
+          formControls[AddonFormControls.AccessKey] = this.fb.control<string>('', Validators.required);
+          formControls[AddonFormControls.SecretKey] = this.fb.control<string>('', Validators.required);
+          break;
+      }
+      return this.fb.group(formControls as AddonForm);
+    }
+
+    return new FormGroup({} as AddonForm);
+  }
+
+  private generateRequestPayload(): AddonRequest {
+    const formValue = this.addonForm.value;
+    const addon = this.addon()!;
+    const credentials: Record<string, unknown> = {};
+    const initiateOAuth =
+      addon.credentialsFormat === CredentialsFormat.OAUTH2 || addon.credentialsFormat === CredentialsFormat.OAUTH;
+
+    switch (addon.credentialsFormat) {
+      case CredentialsFormat.ACCESS_SECRET_KEYS:
+        credentials['access_key'] = formValue[AddonFormControls.AccessKey];
+        credentials['secret_key'] = formValue[AddonFormControls.SecretKey];
+        break;
+      case CredentialsFormat.DATAVERSE_API_TOKEN:
+        credentials['personal_access_token'] = formValue[AddonFormControls.PersonalAccessToken];
+        break;
+      case CredentialsFormat.USERNAME_PASSWORD:
+        credentials['username'] = formValue[AddonFormControls.Username];
+        credentials['password'] = formValue[AddonFormControls.Password];
+        break;
+      case CredentialsFormat.REPO_TOKEN:
+        credentials['access_key'] = formValue[AddonFormControls.AccessKey];
+        credentials['secret_key'] = formValue[AddonFormControls.SecretKey];
+        break;
+    }
+
+    const requestPayload: AddonRequest = {
+      data: {
+        id: addon.id || '',
+        attributes: {
+          api_base_url: formValue[AddonFormControls.HostUrl] || '',
+          display_name: formValue[AddonFormControls.AccountName] || '',
+          authorized_capabilities: ['ACCESS', 'UPDATE'],
+          credentials,
+          initiate_oauth: initiateOAuth,
+          auth_url: null,
+          credentials_available: false,
+        },
+        relationships: {
+          account_owner: {
+            data: {
+              type: 'user-references',
+              id: this.addonsUserReference()[0].id || '',
+            },
+          },
+          ...this.getServiceRelationship(addon),
+        },
+        type: `authorized-${this.addonTypeString()}-accounts`,
+      },
+    };
+
+    return requestPayload;
+  }
+
+  private getServiceRelationship(addon: Addon | AuthorizedAddon) {
+    const isAuthorizedAddon =
+      addon.type === 'authorized-storage-accounts' || addon.type === 'authorized-citation-accounts';
+    const addonId = isAuthorizedAddon ? (addon as AuthorizedAddon).externalStorageServiceId : (addon as Addon).id;
+    const addonType = this.addonTypeString();
+
+    return {
+      [`external_${addonType}_service`]: {
+        data: {
+          type: `external-${addonType}-services`,
+          id: addonId,
+        },
+      },
+    };
+  }
+
+  private getTerms(): AddonTerm[] {
+    const addon = this.router.getCurrentNavigation()?.extras.state?.['addon'] as Addon | AuthorizedAddon;
+    if (!addon) {
+      this.router.navigate([`${this.baseUrl()}/addons`]);
+    }
+
+    this.addon.set(addon);
+    const supportedFeatures = addon.supportedFeatures;
+    const provider = addon.providerName;
+    const isCitationService = addon.type === 'external-citation-services';
+
+    const relevantTerms = isCitationService ? addonTerms.filter((term) => term.citation) : addonTerms;
+
+    return relevantTerms.map((term) => {
+      const feature = term.supportedFeature;
+      const hasFeature = supportedFeatures.includes(feature);
+      const hasPartialFeature = supportedFeatures.includes(`${feature}_PARTIAL`);
+
+      let message: string;
+      let type: 'warning' | 'info' | 'danger';
+
+      if (isCitationService && term.citation) {
+        if (hasPartialFeature && term.citation.partial) {
+          message = term.citation.partial;
+          type = 'warning';
+        } else if (!hasFeature && term.citation.false) {
+          message = term.citation.false;
+          type = 'danger';
+        } else {
+          message = term.storage[hasFeature ? 'true' : 'false'];
+          type = hasFeature ? 'info' : 'danger';
+        }
+      } else {
+        message = term.storage[hasFeature ? 'true' : 'false'];
+        type = hasFeature ? 'info' : hasPartialFeature ? 'warning' : 'danger';
+      }
+
+      return {
+        function: term.label,
+        status: message.replace(/{provider}/g, provider),
+        type,
+      };
+    });
+  }
+}
diff --git a/src/app/features/project/addons/components/index.ts b/src/app/features/project/addons/components/index.ts
new file mode 100644
index 000000000..b2129e835
--- /dev/null
+++ b/src/app/features/project/addons/components/index.ts
@@ -0,0 +1 @@
+export { ConnectConfigureAddonComponent } from '@osf/features/project/addons/components/connect-configure-addon/connect-configure-addon.component';
diff --git a/src/app/features/project/addons/models/addon-config-actions.interface.ts b/src/app/features/project/addons/models/addon-config-actions.interface.ts
new file mode 100644
index 000000000..418532f89
--- /dev/null
+++ b/src/app/features/project/addons/models/addon-config-actions.interface.ts
@@ -0,0 +1,8 @@
+import { Observable } from 'rxjs';
+
+import { AuthorizedAddon } from '@shared/models';
+
+export interface AddonConfigActions {
+  getAddons: () => Observable<void>;
+  getAuthorizedAddons: () => AuthorizedAddon[];
+}
diff --git a/src/app/features/project/addons/models/index.ts b/src/app/features/project/addons/models/index.ts
new file mode 100644
index 000000000..734d2bbc0
--- /dev/null
+++ b/src/app/features/project/addons/models/index.ts
@@ -0,0 +1 @@
+export * from './addon-config-actions.interface';
diff --git a/src/app/features/project/addons/utils/addon-config-map.type.ts b/src/app/features/project/addons/utils/addon-config-map.type.ts
new file mode 100644
index 000000000..54007dfeb
--- /dev/null
+++ b/src/app/features/project/addons/utils/addon-config-map.type.ts
@@ -0,0 +1,3 @@
+import { AddonConfigActions } from '@osf/features/project/addons/models';
+
+export type AddonConfigMap = Record<string, AddonConfigActions>;
diff --git a/src/app/features/project/addons/utils/addons.constants.ts b/src/app/features/project/addons/utils/addons.constants.ts
deleted file mode 100644
index 8d4941de7..000000000
--- a/src/app/features/project/addons/utils/addons.constants.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { SelectOption } from '@shared/models';
-
-export enum AddonTabValue {
-  ALL_ADDONS = 0,
-  CONNECTED_ADDONS = 1,
-}
-
-export enum AddonCategoryValue {
-  EXTERNAL_STORAGE_SERVICES = 'external-storage-services',
-  EXTERNAL_CITATION_SERVICES = 'external-citation-services',
-}
-
-export const ADDON_TAB_OPTIONS: SelectOption[] = [
-  {
-    label: 'settings.addons.tabs.allAddons',
-    value: AddonTabValue.ALL_ADDONS,
-  },
-  {
-    label: 'settings.addons.tabs.connectedAddons',
-    value: AddonTabValue.CONNECTED_ADDONS,
-  },
-];
-
-export const ADDON_CATEGORY_OPTIONS: SelectOption[] = [
-  {
-    label: 'settings.addons.categories.additionalService',
-    value: AddonCategoryValue.EXTERNAL_STORAGE_SERVICES,
-  },
-  {
-    label: 'settings.addons.categories.citationManager',
-    value: AddonCategoryValue.EXTERNAL_CITATION_SERVICES,
-  },
-];
diff --git a/src/app/features/project/addons/utils/index.ts b/src/app/features/project/addons/utils/index.ts
new file mode 100644
index 000000000..298c14eb3
--- /dev/null
+++ b/src/app/features/project/addons/utils/index.ts
@@ -0,0 +1 @@
+export * from './addon-config-map.type';
diff --git a/src/app/features/project/overview/store/project-overview.selectors.ts b/src/app/features/project/overview/store/project-overview.selectors.ts
index e7844e877..b385f6d20 100644
--- a/src/app/features/project/overview/store/project-overview.selectors.ts
+++ b/src/app/features/project/overview/store/project-overview.selectors.ts
@@ -29,11 +29,6 @@ export class ProjectOverviewSelectors {
     return state.components.isSubmitting;
   }
 
-  @Selector([ProjectOverviewState])
-  static getComponentsError(state: ProjectOverviewStateModel) {
-    return state.components.error;
-  }
-
   @Selector([ProjectOverviewState])
   static getLinkedProjects(state: ProjectOverviewStateModel) {
     return state.linkedProjects.data;
diff --git a/src/app/features/settings/addons/addons.component.html b/src/app/features/settings/addons/addons.component.html
index e0319791b..34d9ca485 100644
--- a/src/app/features/settings/addons/addons.component.html
+++ b/src/app/features/settings/addons/addons.component.html
@@ -29,7 +29,7 @@
           </ng-template>
         </p-select>
       }
-      <p-tabpanel [value]="0" class="flex flex-column gap-5">
+      <p-tabpanel [value]="AddonTabValue.ALL_ADDONS" class="flex flex-column gap-5">
         <p>
           {{ 'settings.addons.description' | translate }}
         </p>
@@ -60,9 +60,13 @@
           </div>
         </section>
 
-        <osf-addon-card-list [cards]="filteredAddonCards()" [showDangerButton]="false" />
+        @if (!isAddonsLoading()) {
+          <osf-addon-card-list [cards]="filteredAddonCards()" [showDangerButton]="false" />
+        } @else {
+          <osf-loading-spinner />
+        }
       </p-tabpanel>
-      <p-tabpanel [value]="1" class="flex flex-column gap-5">
+      <p-tabpanel [value]="AddonTabValue.CONNECTED_ADDONS" class="flex flex-column gap-5">
         <osf-search-input
           class="flex-1"
           [control]="searchControl"
diff --git a/src/app/features/settings/addons/addons.component.spec.ts b/src/app/features/settings/addons/addons.component.spec.ts
index 36a5fc902..aa1e2b046 100644
--- a/src/app/features/settings/addons/addons.component.spec.ts
+++ b/src/app/features/settings/addons/addons.component.spec.ts
@@ -27,7 +27,7 @@ describe('AddonsComponent', () => {
             if (selector === UserSelectors.getCurrentUser) {
               return () => ({ id: 'test-user-id' });
             }
-            if (selector === AddonsSelectors.getAddonUserReference) {
+            if (selector === AddonsSelectors.getAddonsUserReference) {
               return () => [{ id: 'test-reference-id' }];
             }
             if (selector === AddonsSelectors.getStorageAddons) {
diff --git a/src/app/features/settings/addons/addons.component.ts b/src/app/features/settings/addons/addons.component.ts
index 2b459f22f..6c5d78af0 100644
--- a/src/app/features/settings/addons/addons.component.ts
+++ b/src/app/features/settings/addons/addons.component.ts
@@ -1,4 +1,4 @@
-import { Store } from '@ngxs/store';
+import { createDispatchMap, select, Store } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
@@ -11,17 +11,21 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, FormsModule } from '@angular/forms';
 
 import { UserSelectors } from '@osf/core/store/user';
-import { SearchInputComponent, SubHeaderComponent } from '@osf/shared/components';
-import { SelectOption } from '@osf/shared/models';
+import { LoadingSpinnerComponent, SearchInputComponent, SubHeaderComponent } from '@osf/shared/components';
 import { IS_XSMALL } from '@osf/shared/utils';
 import { AddonCardListComponent } from '@shared/components/addons';
+import { ADDON_CATEGORY_OPTIONS, ADDON_TAB_OPTIONS } from '@shared/constants';
+import { AddonCategory, AddonTabValue } from '@shared/enums';
 import {
   AddonsSelectors,
+  CreateAuthorizedAddon,
+  DeleteAuthorizedAddon,
   GetAddonsUserReference,
   GetAuthorizedCitationAddons,
   GetAuthorizedStorageAddons,
   GetCitationAddons,
   GetStorageAddons,
+  UpdateAuthorizedAddon,
 } from '@shared/stores/addons';
 
 @Component({
@@ -39,25 +43,48 @@ import {
     SelectModule,
     FormsModule,
     TranslatePipe,
+    LoadingSpinnerComponent,
   ],
   templateUrl: './addons.component.html',
   styleUrl: './addons.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AddonsComponent {
-  #store = inject(Store);
-  protected readonly defaultTabValue = 0;
-  protected readonly isMobile = toSignal(inject(IS_XSMALL));
-  protected readonly searchControl = new FormControl<string>('');
-
-  protected readonly selectedCategory = signal<string>('external-storage-services');
-  protected readonly selectedTab = signal<number>(this.defaultTabValue);
-  protected readonly currentUser = this.#store.selectSignal(UserSelectors.getCurrentUser);
-  protected readonly addonsUserReference = this.#store.selectSignal(AddonsSelectors.getAddonUserReference);
-  protected readonly storageAddons = this.#store.selectSignal(AddonsSelectors.getStorageAddons);
-  protected readonly citationAddons = this.#store.selectSignal(AddonsSelectors.getCitationAddons);
-  protected readonly authorizedStorageAddons = this.#store.selectSignal(AddonsSelectors.getAuthorizedStorageAddons);
-  protected readonly authorizedCitationAddons = this.#store.selectSignal(AddonsSelectors.getAuthorizedCitationAddons);
+  private store = inject(Store);
+  protected readonly tabOptions = ADDON_TAB_OPTIONS;
+  protected readonly categoryOptions = ADDON_CATEGORY_OPTIONS;
+  protected isMobile = toSignal(inject(IS_XSMALL));
+  protected AddonTabValue = AddonTabValue;
+  protected defaultTabValue = AddonTabValue.ALL_ADDONS;
+  protected searchControl = new FormControl<string>('');
+  protected selectedCategory = signal<string>(AddonCategory.EXTERNAL_STORAGE_SERVICES);
+  protected selectedTab = signal<number>(this.defaultTabValue);
+
+  protected currentUser = select(UserSelectors.getCurrentUser);
+  protected addonsUserReference = select(AddonsSelectors.getAddonsUserReference);
+  protected storageAddons = select(AddonsSelectors.getStorageAddons);
+  protected citationAddons = select(AddonsSelectors.getCitationAddons);
+  protected authorizedStorageAddons = select(AddonsSelectors.getAuthorizedStorageAddons);
+  protected authorizedCitationAddons = select(AddonsSelectors.getAuthorizedCitationAddons);
+
+  protected isStorageAddonsLoading = select(AddonsSelectors.getStorageAddonsLoading);
+  protected isCitationAddonsLoading = select(AddonsSelectors.getCitationAddonsLoading);
+  protected isAuthorizedStorageAddonsLoading = select(AddonsSelectors.getAuthorizedStorageAddonsLoading);
+  protected isAuthorizedCitationAddonsLoading = select(AddonsSelectors.getAuthorizedCitationAddonsLoading);
+  protected isAddonsLoading = computed(() => {
+    return this.isStorageAddonsLoading() || this.isCitationAddonsLoading();
+  });
+  protected actions = createDispatchMap({
+    getStorageAddons: GetStorageAddons,
+    getCitationAddons: GetCitationAddons,
+    getAuthorizedStorageAddons: GetAuthorizedStorageAddons,
+    getAuthorizedCitationAddons: GetAuthorizedCitationAddons,
+    createAuthorizedAddon: CreateAuthorizedAddon,
+    updateAuthorizedAddon: UpdateAuthorizedAddon,
+    getAddonsUserReference: GetAddonsUserReference,
+    deleteAuthorizedAddon: DeleteAuthorizedAddon,
+  });
+
   protected readonly allAuthorizedAddons = computed(() => {
     const authorizedAddons = [...this.authorizedStorageAddons(), ...this.authorizedCitationAddons()];
 
@@ -70,11 +97,13 @@ export class AddonsComponent {
   });
 
   protected readonly currentAction = computed(() =>
-    this.selectedCategory() === 'external-storage-services' ? GetStorageAddons : GetCitationAddons
+    this.selectedCategory() === AddonCategory.EXTERNAL_STORAGE_SERVICES
+      ? this.actions.getStorageAddons
+      : this.actions.getCitationAddons
   );
 
   protected readonly currentAddonsState = computed(() =>
-    this.selectedCategory() === 'external-storage-services' ? this.storageAddons() : this.citationAddons()
+    this.selectedCategory() === AddonCategory.EXTERNAL_STORAGE_SERVICES ? this.storageAddons() : this.citationAddons()
   );
 
   protected readonly filteredAddonCards = computed(() => {
@@ -82,28 +111,6 @@ export class AddonsComponent {
     return this.currentAddonsState().filter((card) => card.externalServiceName.includes(searchValue));
   });
 
-  protected readonly tabOptions: SelectOption[] = [
-    {
-      label: 'settings.addons.tabs.allAddons',
-      value: 0,
-    },
-    {
-      label: 'settings.addons.tabs.connectedAddons',
-      value: 1,
-    },
-  ];
-
-  protected readonly categoryOptions: SelectOption[] = [
-    {
-      label: 'settings.addons.categories.additionalService',
-      value: 'external-storage-services',
-    },
-    {
-      label: 'settings.addons.categories.citationManager',
-      value: 'external-citation-services',
-    },
-  ];
-
   protected onCategoryChange(value: string): void {
     this.selectedCategory.set(value);
   }
@@ -112,26 +119,32 @@ export class AddonsComponent {
     effect(() => {
       // Only proceed if we have the current user
       if (this.currentUser()) {
-        this.#store.dispatch(GetAddonsUserReference);
+        this.store.dispatch(GetAddonsUserReference);
+      }
+    });
+
+    effect(() => {
+      // Only proceed if we have the current user
+      if (this.currentUser() && this.userReferenceId()) {
+        const action = this.currentAction();
+        const addons = this.currentAddonsState();
+
+        if (!addons?.length) {
+          action();
+        }
       }
     });
 
     effect(() => {
       // Only proceed if we have both current user and user reference
       if (this.currentUser() && this.userReferenceId()) {
-        this.#loadAddonsIfNeeded(this.userReferenceId());
+        this.fetchAllAuthorizedAddons(this.userReferenceId());
       }
     });
   }
 
-  #loadAddonsIfNeeded(userReferenceId: string): void {
-    const action = this.currentAction();
-    const addons = this.currentAddonsState();
-
-    if (!addons?.length) {
-      this.#store.dispatch(action);
-      this.#store.dispatch(new GetAuthorizedStorageAddons(userReferenceId));
-      this.#store.dispatch(new GetAuthorizedCitationAddons(userReferenceId));
-    }
+  private fetchAllAuthorizedAddons(userReferenceId: string): void {
+    this.actions.getAuthorizedStorageAddons(userReferenceId);
+    this.actions.getAuthorizedCitationAddons(userReferenceId);
   }
 }
diff --git a/src/app/features/settings/addons/pages/connect-addon/connect-addon.component.html b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.html
similarity index 100%
rename from src/app/features/settings/addons/pages/connect-addon/connect-addon.component.html
rename to src/app/features/settings/addons/components/connect-addon/connect-addon.component.html
diff --git a/src/app/features/settings/addons/components/connect-addon/connect-addon.component.scss b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.scss
new file mode 100644
index 000000000..fea06004b
--- /dev/null
+++ b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.scss
@@ -0,0 +1,21 @@
+@use "assets/styles/mixins" as mix;
+@use "assets/styles/variables" as var;
+
+:host {
+  flex: 1;
+  @include mix.flex-column;
+
+  .stepper-container {
+    background-color: var.$white;
+    flex: 1;
+
+    button {
+      width: 100%;
+    }
+  }
+
+  .folders-list {
+    border: 1px solid var.$grey-2;
+    border-radius: 0.57rem;
+  }
+}
diff --git a/src/app/features/settings/addons/pages/connect-addon/connect-addon.component.spec.ts b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.spec.ts
similarity index 96%
rename from src/app/features/settings/addons/pages/connect-addon/connect-addon.component.spec.ts
rename to src/app/features/settings/addons/components/connect-addon/connect-addon.component.spec.ts
index 32a7ddb8e..941fe02c1 100644
--- a/src/app/features/settings/addons/pages/connect-addon/connect-addon.component.spec.ts
+++ b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.spec.ts
@@ -50,10 +50,10 @@ describe('ConnectAddonComponent', () => {
         provideNoopAnimations(),
         MockProvider(Store, {
           selectSignal: jest.fn().mockImplementation((selector) => {
-            if (selector === AddonsSelectors.getAddonUserReference) {
+            if (selector === AddonsSelectors.getAddonsUserReference) {
               return () => [{ id: 'test-user-id' }];
             }
-            if (selector === AddonsSelectors.getCreatedOrUpdatedStorageAddon) {
+            if (selector === AddonsSelectors.getCreatedOrUpdatedAuthorizedAddon) {
               return () => null;
             }
             return () => null;
diff --git a/src/app/features/settings/addons/pages/connect-addon/connect-addon.component.ts b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.ts
similarity index 68%
rename from src/app/features/settings/addons/pages/connect-addon/connect-addon.component.ts
rename to src/app/features/settings/addons/components/connect-addon/connect-addon.component.ts
index 7c212953b..a3b37cd7f 100644
--- a/src/app/features/settings/addons/pages/connect-addon/connect-addon.component.ts
+++ b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.ts
@@ -1,4 +1,4 @@
-import { Store } from '@ngxs/store';
+import { select, Store } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
@@ -15,12 +15,11 @@ import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators }
 import { Router, RouterLink } from '@angular/router';
 
 import { SubHeaderComponent } from '@osf/shared/components';
-import { Addon, AddonForm, AddonFormControls, AddonRequest, AddonTerm, AuthorizedAddon } from '@shared/models';
+import { ADDON_TERMS as addonTerms } from '@osf/shared/constants';
+import { AddonFormControls, CredentialsFormat } from '@osf/shared/enums';
+import { Addon, AddonForm, AddonRequest, AddonTerm, AuthorizedAddon } from '@shared/models';
 import { AddonsSelectors, CreateAuthorizedAddon, UpdateAuthorizedAddon } from '@shared/stores/addons';
 
-import { ADDON_TERMS as addonTerms } from '../../constants';
-import { CredentialsFormat } from '../../enums';
-
 @Component({
   selector: 'osf-connect-addon',
   imports: [
@@ -44,26 +43,16 @@ import { CredentialsFormat } from '../../enums';
 })
 export class ConnectAddonComponent {
   protected readonly stepper = viewChild(Stepper);
-  // protected readonly selectedFolders = signal<string[]>([]);
-  // protected readonly folders: GoogleDriveFolder[] = [
-  //   { name: 'folder name example', selected: false },
-  //   { name: 'folder name example', selected: false },
-  //   { name: 'folder name example', selected: false },
-  //   { name: 'folder name example', selected: false },
-  //   { name: 'folder name example', selected: false },
-  //   { name: 'folder name example', selected: false },
-  // ];
-  #router = inject(Router);
-  #store = inject(Store);
-  #fb = inject(FormBuilder);
-  protected readonly credentialsFormat = CredentialsFormat;
-  protected readonly terms = signal<AddonTerm[]>([]);
-  protected readonly addon = signal<Addon | AuthorizedAddon | null>(null);
-  protected readonly addonAuthUrl = signal<string>('/settings/addons');
-  protected readonly formControls = AddonFormControls;
-  protected readonly userReference = this.#store.selectSignal(AddonsSelectors.getAddonUserReference);
-  protected createdAddon = this.#store.selectSignal(AddonsSelectors.getCreatedOrUpdatedStorageAddon);
-  protected readonly isConnecting = signal(false);
+  private router = inject(Router);
+  private store = inject(Store);
+  private fb = inject(FormBuilder);
+  protected credentialsFormat = CredentialsFormat;
+  protected terms = signal<AddonTerm[]>([]);
+  protected addon = signal<Addon | AuthorizedAddon | null>(null);
+  protected addonAuthUrl = signal<string>('/settings/addons');
+  protected formControls = AddonFormControls;
+  protected userReference = select(AddonsSelectors.getAddonsUserReference);
+  protected createdAddon = select(AddonsSelectors.getCreatedOrUpdatedAuthorizedAddon);
   protected isAuthorized = computed(() => {
     //check if the addon is already authorized
     const addon = this.addon();
@@ -72,7 +61,7 @@ export class ConnectAddonComponent {
     }
     return false;
   });
-  protected readonly addonTypeString = computed(() => {
+  protected addonTypeString = computed(() => {
     //get the addon type string based on the addon type property
     const addon = this.addon();
     if (addon) {
@@ -83,11 +72,12 @@ export class ConnectAddonComponent {
     return '';
   });
   protected addonForm: FormGroup<AddonForm>;
+  protected isConnecting = select(AddonsSelectors.getCreatedOrUpdatedStorageAddonSubmitting);
 
   constructor() {
-    const terms = this.#getTerms();
+    const terms = this.getTerms();
     this.terms.set(terms);
-    this.addonForm = this.#initializeForm();
+    this.addonForm = this.initializeForm();
 
     effect(() => {
       if (this.isAuthorized()) {
@@ -96,20 +86,12 @@ export class ConnectAddonComponent {
     });
   }
 
-  // toggleFolderSelection(folder: GoogleDriveFolder): void {
-  //   folder.selected = !folder.selected;
-  //   this.selectedFolders.set(
-  //     this.folders.filter((f) => f.selected).map((f) => f.name),
-  //   );
-  // }
-
-  handleConnectStorageAddon() {
+  handleConnectStorageAddon(): void {
     if (!this.addon() || !this.addonForm.valid) return;
 
-    this.isConnecting.set(true);
-    const request = this.#generateRequestPayload();
+    const request = this.generateRequestPayload();
 
-    this.#store
+    this.store
       .dispatch(
         !this.isAuthorized()
           ? new CreateAuthorizedAddon(request, this.addonTypeString())
@@ -123,48 +105,44 @@ export class ConnectAddonComponent {
             window.open(createdAddon.attributes.auth_url, '_blank');
             this.stepper()?.value.set(3);
           }
-          this.isConnecting.set(false);
-        },
-        error: () => {
-          this.isConnecting.set(false);
         },
       });
   }
 
-  #initializeForm(): FormGroup<AddonForm> {
+  private initializeForm(): FormGroup<AddonForm> {
     const addon = this.addon();
 
     if (addon) {
       const formControls: Partial<AddonForm> = {
-        [AddonFormControls.AccountName]: this.#fb.control<string>(addon.displayName || '', Validators.required),
+        [AddonFormControls.AccountName]: this.fb.control<string>(addon.displayName || '', Validators.required),
       };
 
       switch (addon.credentialsFormat) {
         case CredentialsFormat.ACCESS_SECRET_KEYS:
-          formControls[AddonFormControls.AccessKey] = this.#fb.control<string>('', Validators.required);
-          formControls[AddonFormControls.SecretKey] = this.#fb.control<string>('', Validators.required);
+          formControls[AddonFormControls.AccessKey] = this.fb.control<string>('', Validators.required);
+          formControls[AddonFormControls.SecretKey] = this.fb.control<string>('', Validators.required);
           break;
         case CredentialsFormat.DATAVERSE_API_TOKEN:
-          formControls[AddonFormControls.HostUrl] = this.#fb.control<string>('', Validators.required);
-          formControls[AddonFormControls.PersonalAccessToken] = this.#fb.control<string>('', Validators.required);
+          formControls[AddonFormControls.HostUrl] = this.fb.control<string>('', Validators.required);
+          formControls[AddonFormControls.PersonalAccessToken] = this.fb.control<string>('', Validators.required);
           break;
         case CredentialsFormat.USERNAME_PASSWORD:
-          formControls[AddonFormControls.HostUrl] = this.#fb.control<string>('', Validators.required);
-          formControls[AddonFormControls.Username] = this.#fb.control<string>('', Validators.required);
-          formControls[AddonFormControls.Password] = this.#fb.control<string>('', Validators.required);
+          formControls[AddonFormControls.HostUrl] = this.fb.control<string>('', Validators.required);
+          formControls[AddonFormControls.Username] = this.fb.control<string>('', Validators.required);
+          formControls[AddonFormControls.Password] = this.fb.control<string>('', Validators.required);
           break;
         case CredentialsFormat.REPO_TOKEN:
-          formControls[AddonFormControls.AccessKey] = this.#fb.control<string>('', Validators.required);
-          formControls[AddonFormControls.SecretKey] = this.#fb.control<string>('', Validators.required);
+          formControls[AddonFormControls.AccessKey] = this.fb.control<string>('', Validators.required);
+          formControls[AddonFormControls.SecretKey] = this.fb.control<string>('', Validators.required);
           break;
       }
-      return this.#fb.group(formControls as AddonForm);
+      return this.fb.group(formControls as AddonForm);
     }
 
     return new FormGroup({} as AddonForm);
   }
 
-  #generateRequestPayload(): AddonRequest {
+  private generateRequestPayload(): AddonRequest {
     const formValue = this.addonForm.value;
     const addon = this.addon()!;
     const credentials: Record<string, unknown> = {};
@@ -208,7 +186,7 @@ export class ConnectAddonComponent {
               id: this.userReference()[0].id || '',
             },
           },
-          ...this.#getServiceRelationship(addon),
+          ...this.getServiceRelationship(addon),
         },
         type: `authorized-${this.addonTypeString()}-accounts`,
       },
@@ -217,7 +195,7 @@ export class ConnectAddonComponent {
     return requestPayload;
   }
 
-  #getServiceRelationship(addon: Addon | AuthorizedAddon) {
+  private getServiceRelationship(addon: Addon | AuthorizedAddon) {
     return {
       [`external_${this.addonTypeString()}_service`]: {
         data: {
@@ -228,10 +206,10 @@ export class ConnectAddonComponent {
     };
   }
 
-  #getTerms(): AddonTerm[] {
-    const addon = this.#router.getCurrentNavigation()?.extras.state?.['addon'] as Addon | AuthorizedAddon;
+  private getTerms(): AddonTerm[] {
+    const addon = this.router.getCurrentNavigation()?.extras.state?.['addon'] as Addon | AuthorizedAddon;
     if (!addon) {
-      this.#router.navigate(['/settings/addons']);
+      this.router.navigate(['/settings/addons']);
     }
 
     this.addon.set(addon);
diff --git a/src/app/features/settings/addons/pages/index.ts b/src/app/features/settings/addons/components/index.ts
similarity index 100%
rename from src/app/features/settings/addons/pages/index.ts
rename to src/app/features/settings/addons/components/index.ts
diff --git a/src/app/features/settings/addons/constants/index.ts b/src/app/features/settings/addons/constants/index.ts
deleted file mode 100644
index bd4b85a29..000000000
--- a/src/app/features/settings/addons/constants/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './addon-terms.const';
diff --git a/src/app/features/settings/addons/enums/index.ts b/src/app/features/settings/addons/enums/index.ts
deleted file mode 100644
index d4fd33f4a..000000000
--- a/src/app/features/settings/addons/enums/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './credentials-format.enum';
diff --git a/src/app/features/settings/addons/mappers/index.ts b/src/app/features/settings/addons/mappers/index.ts
deleted file mode 100644
index efad3661e..000000000
--- a/src/app/features/settings/addons/mappers/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './addon.mapper';
diff --git a/src/app/features/settings/addons/models/index.ts b/src/app/features/settings/addons/models/index.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/features/settings/settings.routes.ts b/src/app/features/settings/settings.routes.ts
index 72e60ac71..e6936cf8a 100644
--- a/src/app/features/settings/settings.routes.ts
+++ b/src/app/features/settings/settings.routes.ts
@@ -35,7 +35,9 @@ export const settingsRoutes: Routes = [
           {
             path: 'connect-addon',
             loadComponent: () =>
-              import('./addons/pages/connect-addon/connect-addon.component').then((mod) => mod.ConnectAddonComponent),
+              import('@osf/features/settings/addons/components/connect-addon/connect-addon.component').then(
+                (mod) => mod.ConnectAddonComponent
+              ),
           },
         ],
       },
diff --git a/src/app/shared/components/addons/addon-card-list/addon-card-list.component.html b/src/app/shared/components/addons/addon-card-list/addon-card-list.component.html
index 80578f42a..9470d7bba 100644
--- a/src/app/shared/components/addons/addon-card-list/addon-card-list.component.html
+++ b/src/app/shared/components/addons/addon-card-list/addon-card-list.component.html
@@ -5,5 +5,7 @@
         <osf-addon-card [cardButtonLabel]="cardButtonLabel()" [card]="card" [showDangerButton]="showDangerButton()" />
       </div>
     }
+  } @else {
+    <p class="p-2">{{ 'settings.addons.messages.noAddons' | translate }}</p>
   }
 </section>
diff --git a/src/app/shared/components/addons/addon-card-list/addon-card-list.component.ts b/src/app/shared/components/addons/addon-card-list/addon-card-list.component.ts
index e5757ba68..60357eb65 100644
--- a/src/app/shared/components/addons/addon-card-list/addon-card-list.component.ts
+++ b/src/app/shared/components/addons/addon-card-list/addon-card-list.component.ts
@@ -1,16 +1,18 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
 import { Component, input } from '@angular/core';
 
 import { AddonCardComponent } from '@shared/components/addons';
-import { Addon, AuthorizedAddon } from '@shared/models';
+import { Addon, AuthorizedAddon, ConfiguredAddon } from '@shared/models';
 
 @Component({
   selector: 'osf-addon-card-list',
-  imports: [AddonCardComponent],
+  imports: [AddonCardComponent, TranslatePipe],
   templateUrl: './addon-card-list.component.html',
   styleUrl: './addon-card-list.component.scss',
 })
 export class AddonCardListComponent {
-  cards = input<(Addon | AuthorizedAddon)[]>([]);
+  cards = input<(Addon | AuthorizedAddon | ConfiguredAddon)[]>([]);
   cardButtonLabel = input<string>('');
   showDangerButton = input<boolean>(false);
 }
diff --git a/src/app/shared/components/addons/addon-card/addon-card.component.ts b/src/app/shared/components/addons/addon-card/addon-card.component.ts
index 2e3bb503d..0ec7d6507 100644
--- a/src/app/shared/components/addons/addon-card/addon-card.component.ts
+++ b/src/app/shared/components/addons/addon-card/addon-card.component.ts
@@ -10,7 +10,7 @@ import { Component, computed, inject, input, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { Router } from '@angular/router';
 
-import { Addon, AuthorizedAddon } from '@shared/models';
+import { Addon, AuthorizedAddon, ConfiguredAddon } from '@shared/models';
 import { DeleteAuthorizedAddon } from '@shared/stores/addons';
 import { IS_XSMALL } from '@shared/utils';
 
@@ -21,9 +21,9 @@ import { IS_XSMALL } from '@shared/utils';
   styleUrl: './addon-card.component.scss',
 })
 export class AddonCardComponent {
-  #router = inject(Router);
-  #store = inject(Store);
-  readonly card = input<Addon | AuthorizedAddon | null>(null);
+  private router = inject(Router);
+  private store = inject(Store);
+  readonly card = input<Addon | AuthorizedAddon | ConfiguredAddon | null>(null);
   readonly cardButtonLabel = input<string>('');
   readonly showDangerButton = input<boolean>(false);
   protected isDialogVisible = signal(false);
@@ -40,7 +40,9 @@ export class AddonCardComponent {
   onConnectAddon(): void {
     const addon = this.card();
     if (addon) {
-      this.#router.navigate(['/settings/addons/connect-addon'], {
+      const currentUrl = this.router.url;
+      const baseUrl = currentUrl.split('/addons')[0];
+      this.router.navigate([`${baseUrl}/addons/connect-addon`], {
         state: { addon },
       });
     }
@@ -60,7 +62,7 @@ export class AddonCardComponent {
     const addonId = this.card()?.id;
     if (addonId) {
       this.isDisabling.set(true);
-      this.#store.dispatch(new DeleteAuthorizedAddon(addonId, this.addonTypeString())).subscribe({
+      this.store.dispatch(new DeleteAuthorizedAddon(addonId, this.addonTypeString())).subscribe({
         complete: () => {
           this.isDisabling.set(false);
           this.isDialogVisible.set(false);
diff --git a/src/app/features/settings/addons/constants/addon-terms.const.ts b/src/app/shared/constants/addon-terms.const.ts
similarity index 93%
rename from src/app/features/settings/addons/constants/addon-terms.const.ts
rename to src/app/shared/constants/addon-terms.const.ts
index ac16a705f..f69a2fe31 100644
--- a/src/app/features/settings/addons/constants/addon-terms.const.ts
+++ b/src/app/shared/constants/addon-terms.const.ts
@@ -1,15 +1,4 @@
-export interface Term {
-  label: string;
-  supportedFeature: string;
-  storage: {
-    true: string;
-    false: string;
-  };
-  citation?: {
-    partial?: string;
-    false?: string;
-  };
-}
+import { Term } from '@shared/models';
 
 export const ADDON_TERMS: Term[] = [
   {
diff --git a/src/app/shared/constants/addons-category-options.const.ts b/src/app/shared/constants/addons-category-options.const.ts
new file mode 100644
index 000000000..35476bbc9
--- /dev/null
+++ b/src/app/shared/constants/addons-category-options.const.ts
@@ -0,0 +1,13 @@
+import { AddonCategory } from '@shared/enums/addons-category.enum';
+import { SelectOption } from '@shared/models';
+
+export const ADDON_CATEGORY_OPTIONS: SelectOption[] = [
+  {
+    label: 'settings.addons.categories.additionalService',
+    value: AddonCategory.EXTERNAL_STORAGE_SERVICES,
+  },
+  {
+    label: 'settings.addons.categories.citationManager',
+    value: AddonCategory.EXTERNAL_CITATION_SERVICES,
+  },
+];
diff --git a/src/app/shared/constants/addons-tab-options.const.ts b/src/app/shared/constants/addons-tab-options.const.ts
new file mode 100644
index 000000000..088785d21
--- /dev/null
+++ b/src/app/shared/constants/addons-tab-options.const.ts
@@ -0,0 +1,13 @@
+import { AddonTabValue } from '@shared/enums/addon-tab.enum';
+import { SelectOption } from '@shared/models';
+
+export const ADDON_TAB_OPTIONS: SelectOption[] = [
+  {
+    label: 'settings.addons.tabs.allAddons',
+    value: AddonTabValue.ALL_ADDONS,
+  },
+  {
+    label: 'settings.addons.tabs.connectedAddons',
+    value: AddonTabValue.CONNECTED_ADDONS,
+  },
+];
diff --git a/src/app/shared/constants/index.ts b/src/app/shared/constants/index.ts
index 9c28141dd..217000032 100644
--- a/src/app/shared/constants/index.ts
+++ b/src/app/shared/constants/index.ts
@@ -1,3 +1,6 @@
+export * from './addon-terms.const';
+export * from './addons-category-options.const';
+export * from './addons-tab-options.const';
 export * from './input-limits.const';
 export * from './input-validation-messages.const';
 export * from './remove-nullable.const';
diff --git a/src/app/shared/enums/addon-form-controls.enum.ts b/src/app/shared/enums/addon-form-controls.enum.ts
new file mode 100644
index 000000000..1d00e83b2
--- /dev/null
+++ b/src/app/shared/enums/addon-form-controls.enum.ts
@@ -0,0 +1,9 @@
+export enum AddonFormControls {
+  AccessKey = 'accessKey',
+  SecretKey = 'secretKey',
+  HostUrl = 'hostUrl',
+  Username = 'username',
+  Password = 'password',
+  PersonalAccessToken = 'personalAccessToken',
+  AccountName = 'accountName',
+}
diff --git a/src/app/shared/enums/addon-tab.enum.ts b/src/app/shared/enums/addon-tab.enum.ts
new file mode 100644
index 000000000..52b92b573
--- /dev/null
+++ b/src/app/shared/enums/addon-tab.enum.ts
@@ -0,0 +1,4 @@
+export enum AddonTabValue {
+  ALL_ADDONS = 0,
+  CONNECTED_ADDONS = 1,
+}
diff --git a/src/app/shared/enums/addons-category.enum.ts b/src/app/shared/enums/addons-category.enum.ts
new file mode 100644
index 000000000..0e6b24b48
--- /dev/null
+++ b/src/app/shared/enums/addons-category.enum.ts
@@ -0,0 +1,4 @@
+export enum AddonCategory {
+  EXTERNAL_STORAGE_SERVICES = 'external-storage-services',
+  EXTERNAL_CITATION_SERVICES = 'external-citation-services',
+}
diff --git a/src/app/features/settings/addons/enums/credentials-format.enum.ts b/src/app/shared/enums/addons-credentials-format.enum.ts
similarity index 100%
rename from src/app/features/settings/addons/enums/credentials-format.enum.ts
rename to src/app/shared/enums/addons-credentials-format.enum.ts
diff --git a/src/app/shared/enums/index.ts b/src/app/shared/enums/index.ts
index 5b89b32f6..810faf37f 100644
--- a/src/app/shared/enums/index.ts
+++ b/src/app/shared/enums/index.ts
@@ -1,9 +1,15 @@
+export * from './addon-form-controls.enum';
+export * from './addon-tab.enum';
+export * from './addons-category.enum';
+export * from './addons-credentials-format.enum';
 export * from './breakpoint-queries.enum';
 export * from './create-component-form-controls.enum';
 export * from './create-project-form-controls.enum';
 export * from './filter-type.enum';
+export * from './profile-addons-stepper.enum';
 export * from './resource-tab.enum';
 export * from './resource-type.enum';
+export * from './settings-addons-stepper.enum';
 export * from './share-indexing.enum';
 export * from './sort-order.enum';
 export * from './subscriptions';
diff --git a/src/app/shared/enums/profile-addons-stepper.enum.ts b/src/app/shared/enums/profile-addons-stepper.enum.ts
new file mode 100644
index 000000000..367d4065e
--- /dev/null
+++ b/src/app/shared/enums/profile-addons-stepper.enum.ts
@@ -0,0 +1,7 @@
+export enum ProjectAddonsStepperValue {
+  TERMS = 1,
+  CHOOSE_CONNECTION = 2,
+  CHOOSE_ACCOUNT = 3,
+  SETUP_NEW_ACCOUNT = 4,
+  AUTH = 5,
+}
diff --git a/src/app/features/settings/addons/mappers/addon.mapper.ts b/src/app/shared/mappers/addon.mapper.ts
similarity index 80%
rename from src/app/features/settings/addons/mappers/addon.mapper.ts
rename to src/app/shared/mappers/addon.mapper.ts
index d5cdab28f..181bbd176 100644
--- a/src/app/features/settings/addons/mappers/addon.mapper.ts
+++ b/src/app/shared/mappers/addon.mapper.ts
@@ -3,6 +3,8 @@ import {
   AddonGetResponse,
   AuthorizedAddon,
   AuthorizedAddonGetResponse,
+  ConfiguredAddon,
+  ConfiguredAddonGetResponse,
   IncludedAddonData,
 } from '@shared/models';
 
@@ -61,4 +63,17 @@ export class AddonMapper {
       providerName: displayName,
     };
   }
+
+  static fromConfiguredAddonResponse(response: ConfiguredAddonGetResponse): ConfiguredAddon {
+    return {
+      type: response.type,
+      id: response.id,
+      displayName: response.attributes.display_name,
+      externalServiceName: response.attributes.external_service_name,
+      rootFolder: response.attributes.root_folder,
+      connectedCapabilities: response.attributes.connected_capabilities,
+      connectedOperationNames: response.attributes.connected_operation_names,
+      currentUserIsOwner: response.attributes.current_user_is_owner,
+    };
+  }
 }
diff --git a/src/app/shared/mappers/index.ts b/src/app/shared/mappers/index.ts
index 725a8fcff..82df7cbb1 100644
--- a/src/app/shared/mappers/index.ts
+++ b/src/app/shared/mappers/index.ts
@@ -1,2 +1,3 @@
+export * from './addon.mapper';
 export * from './filters';
 export * from './resource-card';
diff --git a/src/app/shared/models/addons/addon-form.model.ts b/src/app/shared/models/addons/addon-form.model.ts
index a0fc82b06..7b0c37cc7 100644
--- a/src/app/shared/models/addons/addon-form.model.ts
+++ b/src/app/shared/models/addons/addon-form.model.ts
@@ -1,14 +1,6 @@
 import { FormControl } from '@angular/forms';
 
-export enum AddonFormControls {
-  AccessKey = 'accessKey',
-  SecretKey = 'secretKey',
-  HostUrl = 'hostUrl',
-  Username = 'username',
-  Password = 'password',
-  PersonalAccessToken = 'personalAccessToken',
-  AccountName = 'accountName',
-}
+import { AddonFormControls } from '@shared/enums';
 
 export interface AddonForm {
   [AddonFormControls.AccessKey]?: FormControl<string | null>;
diff --git a/src/app/shared/models/addons/addons.model.ts b/src/app/shared/models/addons/addons.models.ts
similarity index 83%
rename from src/app/shared/models/addons/addons.model.ts
rename to src/app/shared/models/addons/addons.models.ts
index 6fb69262b..1e3c731e7 100644
--- a/src/app/shared/models/addons/addons.model.ts
+++ b/src/app/shared/models/addons/addons.models.ts
@@ -53,6 +53,19 @@ export interface AuthorizedAddonGetResponse {
   };
 }
 
+export interface ConfiguredAddonGetResponse {
+  type: string;
+  id: string;
+  attributes: {
+    display_name: string;
+    external_service_name: string;
+    root_folder: string;
+    connected_capabilities: string[];
+    connected_operation_names: string[];
+    current_user_is_owner: boolean;
+  };
+}
+
 export interface Addon {
   type: string;
   id: string;
@@ -82,6 +95,17 @@ export interface AuthorizedAddon {
   credentialsFormat: string;
 }
 
+export interface ConfiguredAddon {
+  type: string;
+  id: string;
+  displayName: string;
+  externalServiceName: string;
+  rootFolder: string;
+  connectedCapabilities: string[];
+  connectedOperationNames: string[];
+  currentUserIsOwner: boolean;
+}
+
 export interface IncludedAddonData {
   type: string;
   id: string;
@@ -105,6 +129,14 @@ export interface UserReference {
   };
 }
 
+export interface ResourceReference {
+  type: string;
+  id: string;
+  attributes: {
+    resource_uri: string;
+  };
+}
+
 export interface AddonRequest {
   data: {
     id?: string;
diff --git a/src/app/shared/models/addons/index.ts b/src/app/shared/models/addons/index.ts
index 1da58de17..1b34b1d47 100644
--- a/src/app/shared/models/addons/index.ts
+++ b/src/app/shared/models/addons/index.ts
@@ -1,3 +1,4 @@
 export * from './addon-form.model';
 export * from './addon-terms.model';
-export * from './addons.model';
+export * from './addons.models';
+export * from './term.model';
diff --git a/src/app/shared/models/addons/term.model.ts b/src/app/shared/models/addons/term.model.ts
new file mode 100644
index 000000000..053988852
--- /dev/null
+++ b/src/app/shared/models/addons/term.model.ts
@@ -0,0 +1,12 @@
+export interface Term {
+  label: string;
+  supportedFeature: string;
+  storage: {
+    true: string;
+    false: string;
+  };
+  citation?: {
+    partial?: string;
+    false?: string;
+  };
+}
diff --git a/src/app/shared/services/addons.service.ts b/src/app/shared/services/addons.service.ts
index 6eae8f661..e3ad4c917 100644
--- a/src/app/shared/services/addons.service.ts
+++ b/src/app/shared/services/addons.service.ts
@@ -7,7 +7,7 @@ import { inject, Injectable } from '@angular/core';
 import { JsonApiResponse } from '@core/models';
 import { JsonApiService } from '@core/services';
 import { UserSelectors } from '@core/store/user';
-import { AddonMapper } from '@osf/features/settings/addons/mappers';
+import { AddonMapper } from '@osf/shared/mappers';
 import {
   Addon,
   AddonGetResponse,
@@ -15,7 +15,10 @@ import {
   AddonResponse,
   AuthorizedAddon,
   AuthorizedAddonGetResponse,
+  ConfiguredAddon,
+  ConfiguredAddonGetResponse,
   IncludedAddonData,
+  ResourceReference,
   UserReference,
 } from '@shared/models';
 
@@ -53,6 +56,17 @@ export class AddonsService {
       .pipe(map((response) => response.data));
   }
 
+  getAddonsResourceReference(resourceId: string): Observable<ResourceReference[]> {
+    const resourceUri = `https://staging4.osf.io/${resourceId}`;
+    const params = {
+      'filter[resource_uri]': resourceUri,
+    };
+
+    return this.#jsonApiService
+      .get<JsonApiResponse<ResourceReference[], null>>(environment.addonsApiUrl + '/resource-references/', params)
+      .pipe(map((response) => response.data));
+  }
+
   getAuthorizedAddons(addonType: string, referenceId: string): Observable<AuthorizedAddon[]> {
     const params = {
       [`fields[external-${addonType}-services]`]: 'external_service_name',
@@ -68,6 +82,18 @@ export class AddonsService {
       );
   }
 
+  getConfiguredAddons(addonType: string, referenceId: string): Observable<ConfiguredAddon[]> {
+    return this.#jsonApiService
+      .get<
+        JsonApiResponse<ConfiguredAddonGetResponse[], null>
+      >(`${environment.addonsApiUrl}/resource-references/${referenceId}/configured_${addonType}_accounts/`)
+      .pipe(
+        map((response) => {
+          return response.data.map((item) => AddonMapper.fromConfiguredAddonResponse(item));
+        })
+      );
+  }
+
   createAuthorizedAddon(addonRequestPayload: AddonRequest, addonType: string): Observable<AddonResponse> {
     return this.#jsonApiService.post<AddonResponse>(
       `${environment.addonsApiUrl}/authorized-${addonType}-accounts/`,
diff --git a/src/app/shared/stores/addons/addons.actions.ts b/src/app/shared/stores/addons/addons.actions.ts
index a3f8053d6..237a61cad 100644
--- a/src/app/shared/stores/addons/addons.actions.ts
+++ b/src/app/shared/stores/addons/addons.actions.ts
@@ -20,6 +20,18 @@ export class GetAuthorizedCitationAddons {
   constructor(public referenceId: string) {}
 }
 
+export class GetConfiguredStorageAddons {
+  static readonly type = '[Addons] Get Configured Storage Addons';
+
+  constructor(public referenceId: string) {}
+}
+
+export class GetConfiguredCitationAddons {
+  static readonly type = '[Addons] Get Configured Citation Addons';
+
+  constructor(public referenceId: string) {}
+}
+
 export class CreateAuthorizedAddon {
   static readonly type = '[Addons] Create Storage Addon';
 
@@ -43,6 +55,12 @@ export class GetAddonsUserReference {
   static readonly type = '[Addons] Get Addons User Reference';
 }
 
+export class GetAddonsResourceReference {
+  static readonly type = '[Addons] Get Addons Resource Reference';
+
+  constructor(public resourceId: string) {}
+}
+
 export class DeleteAuthorizedAddon {
   static readonly type = '[Addons] Delete Authorized Addon';
 
diff --git a/src/app/shared/stores/addons/addons.models.ts b/src/app/shared/stores/addons/addons.models.ts
index 426488b2d..7f2fa30ed 100644
--- a/src/app/shared/stores/addons/addons.models.ts
+++ b/src/app/shared/stores/addons/addons.models.ts
@@ -1,10 +1,21 @@
-import { Addon, AddonResponse, AuthorizedAddon, UserReference } from '@shared/models';
+import {
+  Addon,
+  AddonResponse,
+  AuthorizedAddon,
+  ConfiguredAddon,
+  ResourceReference,
+  UserReference,
+} from '@shared/models';
+import { AsyncStateModel } from '@shared/models/store';
 
 export interface AddonsStateModel {
-  storageAddons: Addon[];
-  citationAddons: Addon[];
-  authorizedStorageAddons: AuthorizedAddon[];
-  authorizedCitationAddons: AuthorizedAddon[];
-  addonsUserReference: UserReference[];
-  createdUpdatedAuthorizedAddon: AddonResponse | null;
+  storageAddons: AsyncStateModel<Addon[]>;
+  citationAddons: AsyncStateModel<Addon[]>;
+  authorizedStorageAddons: AsyncStateModel<AuthorizedAddon[]>;
+  authorizedCitationAddons: AsyncStateModel<AuthorizedAddon[]>;
+  configuredStorageAddons: AsyncStateModel<ConfiguredAddon[]>;
+  configuredCitationAddons: AsyncStateModel<ConfiguredAddon[]>;
+  addonsUserReference: AsyncStateModel<UserReference[]>;
+  addonsResourceReference: AsyncStateModel<ResourceReference[]>;
+  createdUpdatedAuthorizedAddon: AsyncStateModel<AddonResponse | null>;
 }
diff --git a/src/app/shared/stores/addons/addons.selectors.ts b/src/app/shared/stores/addons/addons.selectors.ts
index a76e5740d..5a911880e 100644
--- a/src/app/shared/stores/addons/addons.selectors.ts
+++ b/src/app/shared/stores/addons/addons.selectors.ts
@@ -1,6 +1,13 @@
 import { Selector } from '@ngxs/store';
 
-import { Addon } from '@shared/models';
+import {
+  Addon,
+  AddonResponse,
+  AuthorizedAddon,
+  ConfiguredAddon,
+  ResourceReference,
+  UserReference,
+} from '@shared/models';
 
 import { AddonsStateModel } from './addons.models';
 import { AddonsState } from './addons.state';
@@ -8,31 +15,91 @@ import { AddonsState } from './addons.state';
 export class AddonsSelectors {
   @Selector([AddonsState])
   static getStorageAddons(state: AddonsStateModel): Addon[] {
-    return state.storageAddons;
+    return state.storageAddons.data;
+  }
+
+  @Selector([AddonsState])
+  static getStorageAddonsLoading(state: AddonsStateModel): boolean {
+    return state.storageAddons.isLoading;
   }
 
   @Selector([AddonsState])
   static getCitationAddons(state: AddonsStateModel): Addon[] {
-    return state.citationAddons;
+    return state.citationAddons.data;
+  }
+
+  @Selector([AddonsState])
+  static getCitationAddonsLoading(state: AddonsStateModel): boolean {
+    return state.citationAddons.isLoading;
+  }
+
+  @Selector([AddonsState])
+  static getAuthorizedStorageAddons(state: AddonsStateModel): AuthorizedAddon[] {
+    return state.authorizedStorageAddons.data;
+  }
+
+  @Selector([AddonsState])
+  static getAuthorizedStorageAddonsLoading(state: AddonsStateModel): boolean {
+    return state.authorizedStorageAddons.isLoading;
+  }
+
+  @Selector([AddonsState])
+  static getAuthorizedCitationAddons(state: AddonsStateModel): AuthorizedAddon[] {
+    return state.authorizedCitationAddons.data;
+  }
+
+  @Selector([AddonsState])
+  static getAuthorizedCitationAddonsLoading(state: AddonsStateModel): boolean {
+    return state.authorizedCitationAddons.isLoading;
+  }
+
+  @Selector([AddonsState])
+  static getConfiguredStorageAddons(state: AddonsStateModel): ConfiguredAddon[] {
+    return state.configuredStorageAddons.data;
+  }
+
+  @Selector([AddonsState])
+  static getConfiguredStorageAddonsLoading(state: AddonsStateModel): boolean {
+    return state.configuredStorageAddons.isLoading;
+  }
+
+  @Selector([AddonsState])
+  static getConfiguredCitationAddons(state: AddonsStateModel): ConfiguredAddon[] {
+    return state.configuredCitationAddons.data;
+  }
+
+  @Selector([AddonsState])
+  static getConfiguredCitationAddonsLoading(state: AddonsStateModel): boolean {
+    return state.configuredCitationAddons.isLoading;
+  }
+
+  @Selector([AddonsState])
+  static getAddonsUserReference(state: AddonsStateModel): UserReference[] {
+    return state.addonsUserReference.data;
+  }
+
+  @Selector([AddonsState])
+  static getAddonsUserReferenceLoading(state: AddonsStateModel): boolean {
+    return state.addonsUserReference.isLoading;
   }
 
   @Selector([AddonsState])
-  static getAuthorizedStorageAddons(state: AddonsStateModel) {
-    return state.authorizedStorageAddons;
+  static getAddonsResourceReference(state: AddonsStateModel): ResourceReference[] {
+    return state.addonsResourceReference.data;
   }
 
   @Selector([AddonsState])
-  static getAuthorizedCitationAddons(state: AddonsStateModel) {
-    return state.authorizedCitationAddons;
+  static getAddonsResourceReferenceLoading(state: AddonsStateModel): boolean {
+    return state.addonsResourceReference.isLoading;
   }
 
   @Selector([AddonsState])
-  static getAddonUserReference(state: AddonsStateModel) {
-    return state.addonsUserReference;
+  static getCreatedOrUpdatedAuthorizedAddon(state: AddonsStateModel): AddonResponse | null {
+    return state.createdUpdatedAuthorizedAddon.data;
   }
 
   @Selector([AddonsState])
-  static getCreatedOrUpdatedStorageAddon(state: AddonsStateModel) {
-    return state.createdUpdatedAuthorizedAddon;
+  static getCreatedOrUpdatedStorageAddonSubmitting(state: AddonsStateModel): boolean {
+    return state.createdUpdatedAuthorizedAddon.isSubmitting || false;
   }
 }
diff --git a/src/app/shared/stores/addons/addons.state.ts b/src/app/shared/stores/addons/addons.state.ts
index 073d311a6..d29189383 100644
--- a/src/app/shared/stores/addons/addons.state.ts
+++ b/src/app/shared/stores/addons/addons.state.ts
@@ -1,34 +1,80 @@
 import { Action, State, StateContext } from '@ngxs/store';
 
-import { Observable, switchMap, tap } from 'rxjs';
+import { catchError, switchMap, tap, throwError } from 'rxjs';
 
 import { inject, Injectable } from '@angular/core';
 
-import { AddonResponse } from '@shared/models';
 import { AddonsService } from '@shared/services';
 
 import {
   CreateAuthorizedAddon,
   DeleteAuthorizedAddon,
+  GetAddonsResourceReference,
   GetAddonsUserReference,
   GetAuthorizedCitationAddons,
   GetAuthorizedStorageAddons,
   GetCitationAddons,
+  GetConfiguredCitationAddons,
+  GetConfiguredStorageAddons,
   GetStorageAddons,
   UpdateAuthorizedAddon,
 } from './addons.actions';
 import { AddonsStateModel } from './addons.models';
 
+const ADDONS_DEFAULTS: AddonsStateModel = {
+  storageAddons: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
+  citationAddons: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
+  authorizedStorageAddons: {
+    data: [],
+    isLoading: false,
+    isSubmitting: false,
+    error: null,
+  },
+  authorizedCitationAddons: {
+    data: [],
+    isLoading: false,
+    isSubmitting: false,
+    error: null,
+  },
+  configuredStorageAddons: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
+  configuredCitationAddons: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
+  addonsUserReference: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
+  addonsResourceReference: {
+    data: [],
+    isLoading: false,
+    error: null,
+  },
+  createdUpdatedAuthorizedAddon: {
+    data: null,
+    isLoading: false,
+    isSubmitting: false,
+    error: null,
+  },
+};
+
 @State<AddonsStateModel>({
   name: 'addons',
-  defaults: {
-    storageAddons: [],
-    citationAddons: [],
-    authorizedStorageAddons: [],
-    authorizedCitationAddons: [],
-    addonsUserReference: [],
-    createdUpdatedAuthorizedAddon: null,
-  },
+  defaults: ADDONS_DEFAULTS,
 })
 @Injectable()
 export class AddonsState {
@@ -36,84 +82,297 @@ export class AddonsState {
 
   @Action(GetStorageAddons)
   getStorageAddons(ctx: StateContext<AddonsStateModel>) {
+    const state = ctx.getState();
+    ctx.patchState({
+      storageAddons: {
+        ...state.storageAddons,
+        isLoading: true,
+      },
+    });
+
     return this.addonsService.getAddons('storage').pipe(
       tap((addons) => {
-        ctx.patchState({ storageAddons: addons });
-      })
+        ctx.patchState({
+          storageAddons: {
+            data: addons,
+            isLoading: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'storageAddons', error))
     );
   }
 
   @Action(GetCitationAddons)
   getCitationAddons(ctx: StateContext<AddonsStateModel>) {
+    const state = ctx.getState();
+    ctx.patchState({
+      citationAddons: {
+        ...state.citationAddons,
+        isLoading: true,
+      },
+    });
+
     return this.addonsService.getAddons('citation').pipe(
       tap((addons) => {
-        ctx.patchState({ citationAddons: addons });
-      })
+        ctx.patchState({
+          citationAddons: {
+            data: addons,
+            isLoading: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'citationAddons', error))
     );
   }
 
   @Action(GetAuthorizedStorageAddons)
   getAuthorizedStorageAddons(ctx: StateContext<AddonsStateModel>, action: GetAuthorizedStorageAddons) {
+    const state = ctx.getState();
+    ctx.patchState({
+      authorizedStorageAddons: {
+        ...state.authorizedStorageAddons,
+        isLoading: true,
+      },
+    });
+
     return this.addonsService.getAuthorizedAddons('storage', action.referenceId).pipe(
       tap((addons) => {
-        ctx.patchState({ authorizedStorageAddons: addons });
-      })
+        ctx.patchState({
+          authorizedStorageAddons: {
+            data: addons,
+            isLoading: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'authorizedStorageAddons', error))
     );
   }
 
   @Action(GetAuthorizedCitationAddons)
   getAuthorizedCitationAddons(ctx: StateContext<AddonsStateModel>, action: GetAuthorizedCitationAddons) {
+    const state = ctx.getState();
+    ctx.patchState({
+      authorizedCitationAddons: {
+        ...state.authorizedCitationAddons,
+        isLoading: true,
+      },
+    });
+
     return this.addonsService.getAuthorizedAddons('citation', action.referenceId).pipe(
       tap((addons) => {
-        ctx.patchState({ authorizedCitationAddons: addons });
-      })
+        ctx.patchState({
+          authorizedCitationAddons: {
+            data: addons,
+            isLoading: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'authorizedCitationAddons', error))
+    );
+  }
+
+  @Action(GetConfiguredStorageAddons)
+  getConfiguredStorageAddons(ctx: StateContext<AddonsStateModel>, action: GetConfiguredStorageAddons) {
+    const state = ctx.getState();
+    ctx.patchState({
+      configuredStorageAddons: {
+        ...state.configuredStorageAddons,
+        isLoading: true,
+      },
+    });
+
+    return this.addonsService.getConfiguredAddons('storage', action.referenceId).pipe(
+      tap((addons) => {
+        ctx.patchState({
+          configuredStorageAddons: {
+            data: addons,
+            isLoading: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'configuredStorageAddons', error))
+    );
+  }
+
+  @Action(GetConfiguredCitationAddons)
+  getConfiguredCitationAddons(ctx: StateContext<AddonsStateModel>, action: GetConfiguredCitationAddons) {
+    const state = ctx.getState();
+    ctx.patchState({
+      configuredCitationAddons: {
+        ...state.configuredCitationAddons,
+        isLoading: true,
+      },
+    });
+
+    return this.addonsService.getConfiguredAddons('citation', action.referenceId).pipe(
+      tap((addons) => {
+        ctx.patchState({
+          configuredCitationAddons: {
+            data: addons,
+            isLoading: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'configuredCitationAddons', error))
     );
   }
 
   @Action(CreateAuthorizedAddon)
-  createAuthorizedAddon(ctx: StateContext<AddonsStateModel>, action: CreateAuthorizedAddon): Observable<AddonResponse> {
+  createAuthorizedAddon(ctx: StateContext<AddonsStateModel>, action: CreateAuthorizedAddon) {
+    const state = ctx.getState();
+    ctx.patchState({
+      createdUpdatedAuthorizedAddon: {
+        ...state.createdUpdatedAuthorizedAddon,
+        isSubmitting: true,
+      },
+    });
+
     return this.addonsService.createAuthorizedAddon(action.payload, action.addonType).pipe(
       tap((addon) => {
-        ctx.patchState({ createdUpdatedAuthorizedAddon: addon });
-        const referenceId = ctx.getState().addonsUserReference[0].id;
-        return action.addonType === 'storage'
-          ? ctx.dispatch(new GetAuthorizedStorageAddons(referenceId))
-          : ctx.dispatch(new GetAuthorizedCitationAddons(referenceId));
-      })
+        ctx.patchState({
+          createdUpdatedAuthorizedAddon: {
+            data: addon,
+            isLoading: false,
+            isSubmitting: false,
+            error: null,
+          },
+        });
+        const referenceId = state.addonsUserReference.data[0]?.id;
+        if (referenceId) {
+          ctx.dispatch(
+            action.addonType === 'storage'
+              ? new GetAuthorizedStorageAddons(referenceId)
+              : new GetAuthorizedCitationAddons(referenceId)
+          );
+        }
+      }),
+      catchError((error) => this.handleError(ctx, 'createdUpdatedAuthorizedAddon', error))
     );
   }
 
   @Action(UpdateAuthorizedAddon)
-  updateAuthorizedAddon(ctx: StateContext<AddonsStateModel>, action: UpdateAuthorizedAddon): Observable<AddonResponse> {
+  updateAuthorizedAddon(ctx: StateContext<AddonsStateModel>, action: UpdateAuthorizedAddon) {
+    const state = ctx.getState();
+    ctx.patchState({
+      createdUpdatedAuthorizedAddon: {
+        ...state.createdUpdatedAuthorizedAddon,
+        isSubmitting: true,
+      },
+    });
+
     return this.addonsService.updateAuthorizedAddon(action.payload, action.addonType, action.addonId).pipe(
       tap((addon) => {
-        ctx.patchState({ createdUpdatedAuthorizedAddon: addon });
-        const referenceId = ctx.getState().addonsUserReference[0].id;
-        return action.addonType === 'storage'
-          ? ctx.dispatch(new GetAuthorizedStorageAddons(referenceId))
-          : ctx.dispatch(new GetAuthorizedCitationAddons(referenceId));
-      })
+        ctx.patchState({
+          createdUpdatedAuthorizedAddon: {
+            data: addon,
+            isLoading: false,
+            isSubmitting: false,
+            error: null,
+          },
+        });
+        const referenceId = state.addonsUserReference.data[0]?.id;
+        if (referenceId) {
+          ctx.dispatch(
+            action.addonType === 'storage'
+              ? new GetAuthorizedStorageAddons(referenceId)
+              : new GetAuthorizedCitationAddons(referenceId)
+          );
+        }
+      }),
+      catchError((error) => this.handleError(ctx, 'createdUpdatedAuthorizedAddon', error))
     );
   }
 
   @Action(GetAddonsUserReference)
   getAddonsUserReference(ctx: StateContext<AddonsStateModel>) {
+    const state = ctx.getState();
+    ctx.patchState({
+      addonsUserReference: {
+        ...state.addonsUserReference,
+        isLoading: true,
+      },
+    });
+
     return this.addonsService.getAddonsUserReference().pipe(
       tap((userReference) => {
-        ctx.patchState({ addonsUserReference: userReference });
-      })
+        ctx.patchState({
+          addonsUserReference: {
+            data: userReference,
+            isLoading: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'addonsUserReference', error))
+    );
+  }
+
+  @Action(GetAddonsResourceReference)
+  getAddonsResourceReference(ctx: StateContext<AddonsStateModel>, action: GetAddonsResourceReference) {
+    const state = ctx.getState();
+    ctx.patchState({
+      addonsResourceReference: {
+        ...state.addonsResourceReference,
+        isLoading: true,
+      },
+    });
+
+    return this.addonsService.getAddonsResourceReference(action.resourceId).pipe(
+      tap((resourceReference) => {
+        ctx.patchState({
+          addonsResourceReference: {
+            data: resourceReference,
+            isLoading: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'addonsResourceReference', error))
     );
   }
 
   @Action(DeleteAuthorizedAddon)
   deleteAuthorizedAddon(ctx: StateContext<AddonsStateModel>, action: DeleteAuthorizedAddon) {
+    const state = ctx.getState();
+    const stateKey = action.addonType === 'storage' ? 'authorizedStorageAddons' : 'authorizedCitationAddons';
+    ctx.patchState({
+      [stateKey]: {
+        ...state[stateKey],
+        isSubmitting: true,
+      },
+    });
+
     return this.addonsService.deleteAuthorizedAddon(action.payload, action.addonType).pipe(
       switchMap(() => {
-        const referenceId = ctx.getState().addonsUserReference[0].id;
-        return action.addonType === 'storage'
-          ? ctx.dispatch(new GetAuthorizedStorageAddons(referenceId))
-          : ctx.dispatch(new GetAuthorizedCitationAddons(referenceId));
-      })
+        const referenceId = state.addonsUserReference.data[0]?.id;
+        if (referenceId) {
+          return action.addonType === 'storage'
+            ? ctx.dispatch(new GetAuthorizedStorageAddons(referenceId))
+            : ctx.dispatch(new GetAuthorizedCitationAddons(referenceId));
+        }
+        return [];
+      }),
+      catchError((error) => this.handleError(ctx, stateKey, error))
     );
   }
+
+  private handleError(ctx: StateContext<AddonsStateModel>, section: keyof AddonsStateModel, error: Error) {
+    const state = ctx.getState();
+    ctx.patchState({
+      [section]: {
+        ...state[section],
+        isLoading: false,
+        isSubmitting: false,
+        error: error.message,
+      },
+    });
+    return throwError(() => error);
+  }
 }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index faf3cca31..7353534f4 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -927,10 +927,13 @@
           "function": "Function",
           "status": "Status"
         },
+        "configure": "Configure ",
         "termsDescription": "• This add-on connects your OSF project to an external service. Use of this service is bound by its terms and conditions. The OSF is not responsible for the service or for your use thereof.",
         "storageDescription": "• This add-on allows you to store files using an external service. Files added to this add-on are not stored within the OSF.",
         "reconnectAccount": "Reconnect Account",
         "setupNewAccount": "Setup new account",
+        "chooseExistingAccount": "Choose existing account",
+        "loginToOrSelectAccount": "Login to {{addonName}} or select an account",
         "startOauth": "Start OAuth",
         "oauthDescription": "Complete the OAuth process in the new window before returning to this page. If you do not see a new window, please click the Start OAuth link below."
       },
@@ -950,12 +953,15 @@
         "buttons": {
           "cancel": "Cancel",
           "next": "Next",
+          "acceptingTerms": "Accepting...",
           "back": "Back",
           "connect": "Connect",
           "reconnect": "Reconnect",
           "authorize": "Authorize",
           "disable": "Disable",
-          "startOauth": "Start OAuth"
+          "startOauth": "Start OAuth",
+          "newAccount": "Setup New Account",
+          "existingAccount": "Choose Existing Account"
         }
       },
       "messages": {
@@ -968,7 +974,8 @@
         "deleteConfirmation": {
           "title": "Disable Account?",
           "message": "Are you sure you want to disable this account? All projects connected to this account will be affected."
-        }
+        },
+        "noAddons": "No results found."
       }
     },
     "profileSettings": {
diff --git a/src/assets/styles/overrides/button.scss b/src/assets/styles/overrides/button.scss
index 9b4ab9313..0e3910e13 100644
--- a/src/assets/styles/overrides/button.scss
+++ b/src/assets/styles/overrides/button.scss
@@ -201,6 +201,8 @@
 }
 
 .p-button-link {
+  --p-button-link-color: var(--white);
+
   a {
     color: var.$white;
     text-decoration: none;

From 2ccd2584974a97bc6fa2cd8fdfc34c7f5ce82273 Mon Sep 17 00:00:00 2001
From: Roman Nastyuk <rnastyuk@exoft.net>
Date: Mon, 16 Jun 2025 22:23:57 +0300
Subject: [PATCH 05/18] feat(profile-addons-api): added addon configuration
 functionality

---
 src/app/app.routes.ts                         |  11 +-
 .../my-projects/mappers/my-projects.mapper.ts |   4 +-
 .../models/create-project.model.ts            |   2 +-
 .../my-projects/models/my-projects.models.ts  |   6 +-
 .../services/my-projects.service.ts           |  28 +-
 .../project/addons/addons.component.html      |   9 +-
 .../project/addons/addons.component.ts        |  45 ++-
 .../configure-addon.component.html            | 182 ++++++++++++
 .../configure-addon.component.scss            |   5 +
 .../configure-addon.component.spec.ts         |  22 ++
 .../configure-addon.component.ts              | 277 ++++++++++++++++++
 ...rm-account-connection-modal.component.html |  17 ++
 ...rm-account-connection-modal.component.scss |   0
 ...account-connection-modal.component.spec.ts |  22 ++
 ...firm-account-connection-modal.component.ts |  60 ++++
 .../connect-configured-addon.component.html}  | 108 +++++--
 .../connect-configured-addon.component.scss}  |  15 +-
 ...onnect-configured-addon.component.spec.ts} |  15 +-
 .../connect-configured-addon.component.ts}    | 179 ++++++++---
 .../disconnect-addon-modal.component.html     |  26 ++
 .../disconnect-addon-modal.component.scss     |   0
 .../disconnect-addon-modal.component.spec.ts  |  22 ++
 .../disconnect-addon-modal.component.ts       |  37 +++
 .../project/addons/components/index.ts        |   5 +-
 .../features/project/addons/enums/index.ts    |   1 +
 .../addons/enums/operation-names.enum.ts      |   5 +
 .../mappers/project-overview.mapper.ts        |  11 +-
 .../models/project-overview.models.ts         |   8 +-
 .../services/project-overview.service.ts      |  13 +-
 .../settings/addons/addons.component.html     |  20 +-
 .../settings/addons/addons.component.ts       |  32 +-
 .../connect-addon.component.spec.ts           |   5 +-
 .../connect-addon/connect-addon.component.ts  |   6 +-
 .../settings/tokens/mappers/token.mapper.ts   |   8 +-
 .../settings/tokens/models/tokens.model.ts    |   6 +-
 .../tokens/services/tokens.service.ts         |  20 +-
 .../settings/tokens/tokens.component.ts       |   7 +-
 .../addon-card/addon-card.component.html      |   2 +-
 .../addons/addon-card/addon-card.component.ts |  23 +-
 src/app/shared/enums/index.ts                 |   1 -
 .../enums/profile-addons-stepper.enum.ts      |   5 +-
 src/app/shared/mappers/addon.mapper.ts        |  54 +++-
 src/app/shared/models/addons/addons.models.ts | 111 ++++++-
 src/app/shared/models/addons/index.ts         |   1 +
 .../addons/operation-invocation.models.ts     |  77 +++++
 src/app/shared/services/addons.service.ts     |  92 ++++--
 .../shared/stores/addons/addons.actions.ts    |  54 +++-
 src/app/shared/stores/addons/addons.models.ts |  17 +-
 .../shared/stores/addons/addons.selectors.ts  |  49 +++-
 src/app/shared/stores/addons/addons.state.ts  | 188 +++++++++++-
 src/assets/i18n/en.json                       |  81 +----
 src/assets/styles/components/addons.scss      |  46 +++
 src/assets/styles/styles.scss                 |   1 +
 53 files changed, 1756 insertions(+), 285 deletions(-)
 create mode 100644 src/app/features/project/addons/components/configure-addon/configure-addon.component.html
 create mode 100644 src/app/features/project/addons/components/configure-addon/configure-addon.component.scss
 create mode 100644 src/app/features/project/addons/components/configure-addon/configure-addon.component.spec.ts
 create mode 100644 src/app/features/project/addons/components/configure-addon/configure-addon.component.ts
 create mode 100644 src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.html
 create mode 100644 src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.scss
 create mode 100644 src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.spec.ts
 create mode 100644 src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.ts
 rename src/app/features/project/addons/components/{connect-configure-addon/connect-configure-addon.component.html => connect-configured-addon/connect-configured-addon.component.html} (76%)
 rename src/app/features/project/addons/components/{connect-configure-addon/connect-configure-addon.component.scss => connect-configured-addon/connect-configured-addon.component.scss} (51%)
 rename src/app/features/project/addons/components/{connect-configure-addon/connect-configure-addon.component.spec.ts => connect-configured-addon/connect-configured-addon.component.spec.ts} (83%)
 rename src/app/features/project/addons/components/{connect-configure-addon/connect-configure-addon.component.ts => connect-configured-addon/connect-configured-addon.component.ts} (66%)
 create mode 100644 src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.html
 create mode 100644 src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.scss
 create mode 100644 src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.spec.ts
 create mode 100644 src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.ts
 create mode 100644 src/app/features/project/addons/enums/index.ts
 create mode 100644 src/app/features/project/addons/enums/operation-names.enum.ts
 create mode 100644 src/app/shared/models/addons/operation-invocation.models.ts
 create mode 100644 src/assets/styles/components/addons.scss

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index f8ecec4fb..f09fd838f 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -175,8 +175,15 @@ export const routes: Routes = [
                 path: 'connect-addon',
                 loadComponent: () =>
                   import(
-                    './features/project/addons/components/connect-configure-addon/connect-configure-addon.component'
-                  ).then((mod) => mod.ConnectConfigureAddonComponent),
+                    '@osf/features/project/addons/components/connect-configured-addon/connect-configured-addon.component'
+                  ).then((mod) => mod.ConnectConfiguredAddonComponent),
+              },
+              {
+                path: 'configure-addon',
+                loadComponent: () =>
+                  import('@osf/features/project/addons/components/configure-addon/configure-addon.component').then(
+                    (mod) => mod.ConfigureAddonComponent
+                  ),
               },
             ],
           },
diff --git a/src/app/features/my-projects/mappers/my-projects.mapper.ts b/src/app/features/my-projects/mappers/my-projects.mapper.ts
index 79128fbf3..c2579892a 100644
--- a/src/app/features/my-projects/mappers/my-projects.mapper.ts
+++ b/src/app/features/my-projects/mappers/my-projects.mapper.ts
@@ -1,7 +1,7 @@
-import { MyProjectsItem, MyProjectsItemGetResponse } from '../models';
+import { MyProjectsItem, MyProjectsItemGetResponseJsonApi } from '../models';
 
 export class MyProjectsMapper {
-  static fromResponse(response: MyProjectsItemGetResponse): MyProjectsItem {
+  static fromResponse(response: MyProjectsItemGetResponseJsonApi): MyProjectsItem {
     return {
       id: response.id,
       type: response.type,
diff --git a/src/app/features/my-projects/models/create-project.model.ts b/src/app/features/my-projects/models/create-project.model.ts
index ea95d68ef..71dc48c8e 100644
--- a/src/app/features/my-projects/models/create-project.model.ts
+++ b/src/app/features/my-projects/models/create-project.model.ts
@@ -1,4 +1,4 @@
-export interface CreateProjectPayload {
+export interface CreateProjectPayloadJsoApi {
   data: {
     type: 'nodes';
     attributes: {
diff --git a/src/app/features/my-projects/models/my-projects.models.ts b/src/app/features/my-projects/models/my-projects.models.ts
index 0a0a9ab19..215e0c4fc 100644
--- a/src/app/features/my-projects/models/my-projects.models.ts
+++ b/src/app/features/my-projects/models/my-projects.models.ts
@@ -1,6 +1,6 @@
 import { JsonApiResponse } from '@osf/core/models';
 
-export interface MyProjectsItemGetResponse {
+export interface MyProjectsItemGetResponseJsonApi {
   id: string;
   type: string;
   attributes: {
@@ -50,7 +50,7 @@ export interface MyProjectsItem {
   contributors: MyProjectsContributor[];
 }
 
-export interface MyProjectsItemResponse {
+export interface MyProjectsItemResponseJsonApi {
   data: MyProjectsItem[];
   links: {
     meta: {
@@ -60,7 +60,7 @@ export interface MyProjectsItemResponse {
   };
 }
 
-export interface MyProjectsJsonApiResponse extends JsonApiResponse<MyProjectsItemGetResponse[], null> {
+export interface MyProjectsResponseJsonApi extends JsonApiResponse<MyProjectsItemGetResponseJsonApi[], null> {
   links: {
     meta: {
       total: number;
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 8d0bc708c..3ad8cf027 100644
--- a/src/app/features/my-projects/services/my-projects.service.ts
+++ b/src/app/features/my-projects/services/my-projects.service.ts
@@ -10,12 +10,12 @@ import { NodeResponseModel, UpdateNodeRequestModel } from '@shared/models';
 
 import { MyProjectsMapper } from '../mappers';
 import {
-  CreateProjectPayload,
+  CreateProjectPayloadJsoApi,
   EndpointType,
   MyProjectsItem,
-  MyProjectsItemGetResponse,
-  MyProjectsItemResponse,
-  MyProjectsJsonApiResponse,
+  MyProjectsItemGetResponseJsonApi,
+  MyProjectsItemResponseJsonApi,
+  MyProjectsResponseJsonApi,
   MyProjectsSearchFilters,
 } from '../models';
 
@@ -38,7 +38,7 @@ export class MyProjectsService {
     filters?: MyProjectsSearchFilters,
     pageNumber?: number,
     pageSize?: number
-  ): Observable<MyProjectsItemResponse> {
+  ): Observable<MyProjectsItemResponseJsonApi> {
     const params: Record<string, unknown> = {
       'embed[]': ['bibliographic_contributors'],
       [`fields[${endpoint}]`]: 'title,date_modified,public,bibliographic_contributors',
@@ -69,9 +69,9 @@ export class MyProjectsService {
       ? environment.apiUrl + '/' + endpoint
       : environment.apiUrl + '/users/me/' + endpoint;
 
-    return this.jsonApiService.get<MyProjectsJsonApiResponse>(url, params).pipe(
-      map((response: MyProjectsJsonApiResponse) => ({
-        data: response.data.map((item: MyProjectsItemGetResponse) => MyProjectsMapper.fromResponse(item)),
+    return this.jsonApiService.get<MyProjectsResponseJsonApi>(url, params).pipe(
+      map((response: MyProjectsResponseJsonApi) => ({
+        data: response.data.map((item: MyProjectsItemGetResponseJsonApi) => MyProjectsMapper.fromResponse(item)),
         links: response.links,
       }))
     );
@@ -81,7 +81,7 @@ export class MyProjectsService {
     filters?: MyProjectsSearchFilters,
     pageNumber?: number,
     pageSize?: number
-  ): Observable<MyProjectsItemResponse> {
+  ): Observable<MyProjectsItemResponseJsonApi> {
     return this.getMyItems('nodes', filters, pageNumber, pageSize);
   }
 
@@ -104,7 +104,7 @@ export class MyProjectsService {
     filters?: MyProjectsSearchFilters,
     pageNumber?: number,
     pageSize?: number
-  ): Observable<MyProjectsItemResponse> {
+  ): Observable<MyProjectsItemResponseJsonApi> {
     return this.getMyItems('registrations', filters, pageNumber, pageSize);
   }
 
@@ -112,7 +112,7 @@ export class MyProjectsService {
     filters?: MyProjectsSearchFilters,
     pageNumber?: number,
     pageSize?: number
-  ): Observable<MyProjectsItemResponse> {
+  ): Observable<MyProjectsItemResponseJsonApi> {
     return this.getMyItems('preprints', filters, pageNumber, pageSize);
   }
 
@@ -121,7 +121,7 @@ export class MyProjectsService {
     filters?: MyProjectsSearchFilters,
     pageNumber?: number,
     pageSize?: number
-  ): Observable<MyProjectsItemResponse> {
+  ): Observable<MyProjectsItemResponseJsonApi> {
     return this.getMyItems(`collections/${collectionId}/linked_nodes/`, filters, pageNumber, pageSize);
   }
 
@@ -132,7 +132,7 @@ export class MyProjectsService {
     region: string,
     affiliations: string[]
   ): Observable<MyProjectsItem> {
-    const payload: CreateProjectPayload = {
+    const payload: CreateProjectPayloadJsoApi = {
       data: {
         type: 'nodes',
         attributes: {
@@ -167,7 +167,7 @@ export class MyProjectsService {
     };
 
     return this.jsonApiService
-      .post<MyProjectsItemGetResponse>(`${environment.apiUrl}/nodes/`, payload, params)
+      .post<MyProjectsItemGetResponseJsonApi>(`${environment.apiUrl}/nodes/`, payload, params)
       .pipe(map((response) => MyProjectsMapper.fromResponse(response)));
   }
 
diff --git a/src/app/features/project/addons/addons.component.html b/src/app/features/project/addons/addons.component.html
index 2c4502a91..cf196f066 100644
--- a/src/app/features/project/addons/addons.component.html
+++ b/src/app/features/project/addons/addons.component.html
@@ -58,7 +58,7 @@
         @if (!isAddonsLoading()) {
           <osf-addon-card-list [cards]="filteredAddonCards()" [showDangerButton]="false" />
         } @else {
-          <div class="mt-8">
+          <div class="mt-8 pt-5">
             <osf-loading-spinner />
           </div>
         }
@@ -70,14 +70,13 @@
           [placeholder]="'settings.addons.filters.search' | translate"
         />
 
-        @if (!isAddonsLoading()) {
+        @if (!isConfiguredAddonsLoading()) {
           <osf-addon-card-list
             [cards]="allConfiguredAddons()"
-            [cardButtonLabel]="'settings.addons.form.buttons.reconnect' | translate"
-            [showDangerButton]="true"
+            [cardButtonLabel]="'settings.addons.connectAddon.configure' | translate"
           />
         } @else {
-          <div class="mt-8">
+          <div class="mt-8 pt-8">
             <osf-loading-spinner />
           </div>
         }
diff --git a/src/app/features/project/addons/addons.component.ts b/src/app/features/project/addons/addons.component.ts
index 5da8e2f1d..20f82284f 100644
--- a/src/app/features/project/addons/addons.component.ts
+++ b/src/app/features/project/addons/addons.component.ts
@@ -5,7 +5,18 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { Select } from 'primeng/select';
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primeng/tabs';
 
-import { ChangeDetectionStrategy, Component, computed, effect, inject, OnInit, signal } from '@angular/core';
+import { debounceTime, distinctUntilChanged } from 'rxjs';
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  inject,
+  OnInit,
+  signal,
+} from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, FormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
@@ -17,6 +28,7 @@ import { ADDON_CATEGORY_OPTIONS, ADDON_TAB_OPTIONS } from '@shared/constants';
 import { AddonCategory, AddonTabValue } from '@shared/enums';
 import {
   AddonsSelectors,
+  ClearConfiguredAddons,
   DeleteAuthorizedAddon,
   GetAddonsResourceReference,
   GetAddonsUserReference,
@@ -49,12 +61,14 @@ import { IS_XSMALL } from '@shared/utils';
 })
 export class AddonsComponent implements OnInit {
   private route = inject(ActivatedRoute);
+  private destroyRef = inject(DestroyRef);
   protected readonly tabOptions = ADDON_TAB_OPTIONS;
   protected readonly categoryOptions = ADDON_CATEGORY_OPTIONS;
   protected isMobile = toSignal(inject(IS_XSMALL));
   protected AddonTabValue = AddonTabValue;
   protected defaultTabValue = AddonTabValue.ALL_ADDONS;
   protected searchControl = new FormControl<string>('');
+  protected searchValue = signal<string>('');
   protected selectedCategory = signal<string>(AddonCategory.EXTERNAL_STORAGE_SERVICES);
   protected selectedTab = signal<number>(this.defaultTabValue);
 
@@ -78,6 +92,14 @@ export class AddonsComponent implements OnInit {
       this.isStorageAddonsLoading() ||
       this.isCitationAddonsLoading() ||
       this.isUserReferenceLoading() ||
+      // this.isResourceReferenceLoading() ||
+      this.isCurrentUserLoading()
+    );
+  });
+  protected isConfiguredAddonsLoading = computed(() => {
+    return (
+      this.isConfiguredStorageAddonsLoading() ||
+      this.isConfiguredCitationAddonsLoading() ||
       this.isResourceReferenceLoading() ||
       this.isCurrentUserLoading()
     );
@@ -91,6 +113,7 @@ export class AddonsComponent implements OnInit {
     getAddonsUserReference: GetAddonsUserReference,
     getAddonsResourceReference: GetAddonsResourceReference,
     deleteAuthorizedAddon: DeleteAuthorizedAddon,
+    clearConfiguredAddons: ClearConfiguredAddons,
   });
 
   protected readonly userReferenceId = computed(() => {
@@ -100,8 +123,8 @@ export class AddonsComponent implements OnInit {
   protected allConfiguredAddons = computed(() => {
     const authorizedAddons = [...this.configuredStorageAddons(), ...this.configuredCitationAddons()];
 
-    const searchValue = this.searchControl.value?.toLowerCase() ?? '';
-    return authorizedAddons.filter((card) => card.displayName.includes(searchValue));
+    const searchValue = this.searchValue().toLowerCase();
+    return authorizedAddons.filter((card) => card.displayName.toLowerCase().includes(searchValue));
   });
 
   protected resourceReferenceId = computed(() => {
@@ -119,7 +142,7 @@ export class AddonsComponent implements OnInit {
   );
 
   protected filteredAddonCards = computed(() => {
-    const searchValue = this.searchControl.value?.toLowerCase() ?? '';
+    const searchValue = this.searchValue().toLowerCase();
     return this.currentAddonsState().filter(
       (card) =>
         card.externalServiceName.toLowerCase().includes(searchValue) ||
@@ -139,7 +162,7 @@ export class AddonsComponent implements OnInit {
     });
 
     effect(() => {
-      if (this.currentUser() && this.userReferenceId()) {
+      if (this.currentUser()) {
         const action = this.currentAction();
         const addons = this.currentAddonsState();
 
@@ -155,12 +178,22 @@ export class AddonsComponent implements OnInit {
         this.fetchAllConfiguredAddons(resourceReferenceId);
       }
     });
+
+    this.searchControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged()).subscribe((value) => {
+      this.searchValue.set(value ?? '');
+    });
+
+    effect(() => {
+      this.destroyRef.onDestroy(() => {
+        this.actions.clearConfiguredAddons();
+      });
+    });
   }
 
   ngOnInit(): void {
     const projectId = this.route.parent?.parent?.snapshot.params['id'];
 
-    if (projectId && !this.addonsResourceReference()) {
+    if (projectId && !this.addonsResourceReference().length) {
       this.actions.getAddonsResourceReference(projectId);
     }
   }
diff --git a/src/app/features/project/addons/components/configure-addon/configure-addon.component.html b/src/app/features/project/addons/components/configure-addon/configure-addon.component.html
new file mode 100644
index 000000000..770171061
--- /dev/null
+++ b/src/app/features/project/addons/components/configure-addon/configure-addon.component.html
@@ -0,0 +1,182 @@
+<osf-sub-header [showButton]="false" [title]="'settings.addons.configureAddon.title' | translate" />
+
+<section class="flex flex-column flex-1 bg-white h-full gap-4 sm:p-3 md:p-5">
+  @if (!isEditMode()) {
+    <div class="flex flex-column gap-4">
+      <div class="flex justify-content-between">
+        <h2 class="align-self-center inline-block">
+          {{ 'settings.addons.connectAddon.configure' | translate }} {{ addon()?.externalServiceName }}
+        </h2>
+        <p-button
+          [label]="'settings.addons.form.buttons.back' | translate"
+          severity="info"
+          [routerLink]="[baseUrl() + '/addons']"
+        ></p-button>
+      </div>
+
+      @if (selectedFolderName()) {
+        <div class="flex flex-column flex-1">
+          <p-card>
+            <div class="flex justify-content-between">
+              <p class="text-lg align-self-center">
+                {{ 'settings.addons.configureAddon.connectedAccount' | translate }}
+                <span class="font-bold">{{ addon()?.displayName }}</span>
+              </p>
+
+              <div class="flex gap-2">
+                <p-button
+                  icon="fas fa-pencil"
+                  [text]="true"
+                  severity="info"
+                  (click)="toggleEditMode()"
+                  (keydown.enter)="toggleEditMode()"
+                ></p-button>
+                <p-button
+                  icon="fas fa-trash red-icon"
+                  [text]="true"
+                  severity="info"
+                  (click)="handleDisconnectAccount()"
+                  (keydown.enter)="handleDisconnectAccount()"
+                ></p-button>
+              </div>
+            </div>
+
+            <p class="font-normal mt-2">
+              {{ 'settings.addons.configureAddon.selectedFolder' | translate }}
+              <span class="font-bold">{{ selectedFolderName() }}</span>
+            </p>
+          </p-card>
+        </div>
+      } @else {
+        <p-skeleton width="100%" height="7.5rem" borderRadius="16" />
+      }
+    </div>
+  } @else {
+    <section class="flex flex-column gap-5">
+      <div class="flex justify-content-between">
+        <h2 class="pt-2">
+          {{ 'settings.addons.connectAddon.configure' | translate }} {{ addon()?.externalServiceName }}
+        </h2>
+        <p-button
+          [label]="'settings.addons.form.buttons.back' | translate"
+          severity="info"
+          (click)="toggleEditMode()"
+          (keydown.enter)="toggleEditMode()"
+        ></p-button>
+      </div>
+      <div>
+        <p-breadcrumb
+          class="p-0 max-w-full"
+          [model]="breadcrumbItems()"
+          [home]="homeBreadcrumb"
+          (onItemClick)="handleCreateOperationInvocation($event.item.state?.['operationName']!, $event.item.id!)"
+        >
+          <ng-template #home let-home>
+            <p-button
+              severity="info"
+              [link]="true"
+              [label]="home.label"
+              (click)="handleCreateOperationInvocation(home.state.operationName, home.id)"
+            ></p-button>
+          </ng-template>
+          <ng-template #item let-item>
+            <p-button
+              severity="info"
+              [link]="true"
+              [label]="item.label"
+              (click)="handleCreateOperationInvocation(item.state.operationName, item.id)"
+            ></p-button>
+          </ng-template>
+        </p-breadcrumb>
+        <p-card>
+          <p>
+            {{ 'settings.addons.configureAddon.selectedFolder' | translate }}
+            <span class="font-bold">{{ selectedFolderName() }}</span>
+          </p>
+          <h3 class="mt-4 mb-2">
+            {{ 'settings.addons.form.fields.accountName' | translate }}
+          </h3>
+
+          <input [formControl]="accountNameControl" name="accountName" pInputText />
+        </p-card>
+      </div>
+
+      @if (isOperationInvocationSubmitting()) {
+        <p-skeleton width="100%" height="7.5rem" borderRadius="16" />
+      } @else {
+        <div class="folders-table flex flex-column">
+          <div class="folders-table-heading flex justify-content-between">
+            <h3>Folder Name</h3>
+            <h3>Select</h3>
+          </div>
+          @if (operationInvocation()?.operationResult?.length) {
+            @for (folder of operationInvocation()?.operationResult; track folder.itemId) {
+              @let operationName =
+                folder.mayContainRootCandidates ? OperationNames.LIST_CHILD_ITEMS : OperationNames.GET_ITEM_INFO;
+              @let itemId = folder.itemId || '/';
+              <div class="folders-table-row relative">
+                <div class="flex gap-2 flex-1">
+                  <div tabindex="0" class="flex gap-2">
+                    <i class="osf-icon-folder"></i>
+                    <a
+                      tabindex="0"
+                      class="cursor-pointer"
+                      (keydown.enter)="
+                        handleCreateOperationInvocation(
+                          operationName,
+                          itemId,
+                          folder.itemName,
+                          folder.mayContainRootCandidates
+                        )
+                      "
+                      (click)="
+                        handleCreateOperationInvocation(
+                          operationName,
+                          itemId,
+                          folder.itemName,
+                          folder.mayContainRootCandidates
+                        )
+                      "
+                    >
+                      {{ folder.itemName }}</a
+                    >
+                  </div>
+                  @if (folder.canBeRoot) {
+                    <p-radiobutton
+                      class="ml-auto pr-3"
+                      [ngModel]="chosenRootFolderId()"
+                      [value]="folder.itemId"
+                      [inputId]="folder.itemId"
+                      (ngModelChange)="chosenRootFolderId.set($event)"
+                    ></p-radiobutton>
+                  }
+                </div>
+              </div>
+            }
+          } @else {
+            <div class="flex justify-content-center py-4">
+              <p>{{ 'settings.addons.configureAddon.noFolders' | translate }}</p>
+            </div>
+          }
+        </div>
+      }
+
+      <div class="flex gap-4 align-self-end">
+        <p-button
+          class="w-10rem btn-full-width"
+          [label]="'settings.addons.form.buttons.cancel' | translate"
+          severity="info"
+          [disabled]="isAddonUpdateSubmitting()"
+          (click)="toggleEditMode()"
+        ></p-button>
+        <p-button
+          class="w-10rem btn-full-width"
+          [disabled]="!chosenRootFolderId() || !accountNameControl.dirty"
+          [loading]="isAddonUpdateSubmitting()"
+          [label]="'common.buttons.save' | translate"
+          (click)="handleUpdateAddonConfiguration()"
+        ></p-button>
+      </div>
+    </section>
+  }
+</section>
diff --git a/src/app/features/project/addons/components/configure-addon/configure-addon.component.scss b/src/app/features/project/addons/components/configure-addon/configure-addon.component.scss
new file mode 100644
index 000000000..da0c027b5
--- /dev/null
+++ b/src/app/features/project/addons/components/configure-addon/configure-addon.component.scss
@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
diff --git a/src/app/features/project/addons/components/configure-addon/configure-addon.component.spec.ts b/src/app/features/project/addons/components/configure-addon/configure-addon.component.spec.ts
new file mode 100644
index 000000000..a2a1fc83d
--- /dev/null
+++ b/src/app/features/project/addons/components/configure-addon/configure-addon.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfigureAddonComponent } from './configure-addon.component';
+
+describe('ConfigureAddonComponent', () => {
+  let component: ConfigureAddonComponent;
+  let fixture: ComponentFixture<ConfigureAddonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ConfigureAddonComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ConfigureAddonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/project/addons/components/configure-addon/configure-addon.component.ts b/src/app/features/project/addons/components/configure-addon/configure-addon.component.ts
new file mode 100644
index 000000000..b98958f81
--- /dev/null
+++ b/src/app/features/project/addons/components/configure-addon/configure-addon.component.ts
@@ -0,0 +1,277 @@
+import { createDispatchMap, select, Store } from '@ngxs/store';
+
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+
+import { MenuItem } from 'primeng/api';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+import { Button } from 'primeng/button';
+import { Card } from 'primeng/card';
+import { DialogService } from 'primeng/dynamicdialog';
+import { InputText } from 'primeng/inputtext';
+import { RadioButton } from 'primeng/radiobutton';
+import { Skeleton } from 'primeng/skeleton';
+
+import { ChangeDetectionStrategy, Component, computed, inject, OnInit, signal } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+
+import { DisconnectAddonModalComponent } from '@osf/features/project/addons/components';
+import { OperationNames } from '@osf/features/project/addons/enums';
+import { SubHeaderComponent } from '@shared/components';
+import { ConfiguredAddon, ConfiguredAddonRequestJsonApi, OperationInvocationRequestJsonApi } from '@shared/models';
+import { AddonsSelectors, CreateAddonOperationInvocation, UpdateConfiguredAddon } from '@shared/stores/addons';
+
+@Component({
+  selector: 'osf-configure-addon',
+  imports: [
+    SubHeaderComponent,
+    TranslatePipe,
+    Button,
+    RouterLink,
+    Card,
+    InputText,
+    RadioButton,
+    ReactiveFormsModule,
+    FormsModule,
+    Skeleton,
+    BreadcrumbModule,
+  ],
+  templateUrl: './configure-addon.component.html',
+  styleUrl: './configure-addon.component.scss',
+  providers: [DialogService],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfigureAddonComponent implements OnInit {
+  private readonly dialogService = inject(DialogService);
+  private readonly translateService = inject(TranslateService);
+  private readonly router = inject(Router);
+  private readonly route = inject(ActivatedRoute);
+  private readonly store = inject(Store);
+
+  protected readonly OperationNames = OperationNames;
+  protected accountNameControl = new FormControl('');
+  protected addon = signal<ConfiguredAddon | null>(null);
+  protected isEditMode = signal<boolean>(false);
+  protected chosenRootFolderId = signal('');
+  protected addonsUserReference = select(AddonsSelectors.getAddonsUserReference);
+  protected operationInvocation = select(AddonsSelectors.getOperationInvocation);
+  protected selectedFolderName = select(AddonsSelectors.getSelectedFolderName);
+
+  protected isOperationInvocationSubmitting = select(AddonsSelectors.getOperationInvocationSubmitting);
+  protected isAddonUpdateSubmitting = select(AddonsSelectors.getCreatedOrUpdatedConfiguredAddonSubmitting);
+
+  protected readonly baseUrl = computed(() => {
+    const currentUrl = this.router.url;
+    return currentUrl.split('/addons')[0];
+  });
+  protected readonly resourceUri = computed(() => {
+    const id = this.route.parent?.parent?.snapshot.params['id'];
+    return `https://staging4.osf.io/${id}`;
+  });
+  protected readonly addonTypeString = computed(() => {
+    const addon = this.addon();
+    return addon?.type === 'configured-storage-addons' ? 'storage' : 'citation';
+  });
+  protected readonly actions = createDispatchMap({
+    createAddonOperationInvocation: CreateAddonOperationInvocation,
+    updateConfiguredAddon: UpdateConfiguredAddon,
+  });
+  protected breadcrumbItems = signal<MenuItem[]>([]);
+  protected homeBreadcrumb: MenuItem = {
+    id: '/',
+    label: this.translateService.instant('settings.addons.configureAddon.home'),
+    state: {
+      operationName: OperationNames.LIST_ROOT_ITEMS,
+    },
+  };
+
+  constructor() {
+    this.initializeAddon();
+  }
+
+  private initializeAddon(): void {
+    const addon = this.router.getCurrentNavigation()?.extras.state?.['addon'] as ConfiguredAddon;
+
+    if (addon) {
+      this.addon.set(addon);
+      this.accountNameControl.setValue(addon.displayName);
+      this.chosenRootFolderId.set(addon.selectedFolderId);
+    } else {
+      this.router.navigate([`${this.baseUrl()}/addons`]);
+    }
+  }
+
+  protected handleCreateOperationInvocation(
+    operationName: OperationNames,
+    folderId: string,
+    folderName?: string,
+    mayContainRootCandidates?: boolean
+  ): void {
+    const addon = this.addon();
+    if (!addon) return;
+
+    const operationKwargs = this.getOperationKwargs(operationName, folderId);
+
+    const payload: OperationInvocationRequestJsonApi = {
+      data: {
+        type: 'addon-operation-invocations',
+        attributes: {
+          invocation_status: null,
+          operation_name: operationName,
+          operation_kwargs: operationKwargs,
+          operation_result: {},
+          created: null,
+          modified: null,
+        },
+        relationships: {
+          thru_addon: {
+            data: {
+              type: addon.type,
+              id: addon.id,
+            },
+          },
+        },
+      },
+    };
+
+    this.actions.createAddonOperationInvocation(payload).subscribe({
+      complete: () => {
+        this.handleBreadcrumbUpdate(operationName, folderId, folderName, mayContainRootCandidates);
+      },
+    });
+  }
+
+  private handleBreadcrumbUpdate(
+    operationName: OperationNames,
+    folderId: string,
+    folderName?: string,
+    mayContainRootCandidates?: boolean
+  ): void {
+    if (operationName === OperationNames.LIST_ROOT_ITEMS) {
+      this.breadcrumbItems.set([]);
+      return;
+    }
+
+    if (folderName) {
+      const breadcrumbs = [...this.breadcrumbItems()];
+
+      if (mayContainRootCandidates) {
+        const item = {
+          id: folderId,
+          label: folderName,
+          state: {
+            operationName: mayContainRootCandidates ? OperationNames.LIST_CHILD_ITEMS : OperationNames.GET_ITEM_INFO,
+          },
+        };
+
+        this.breadcrumbItems.set([...breadcrumbs, { ...item }]);
+      }
+    }
+  }
+
+  ngOnInit(): void {
+    this.handleCreateOperationInvocation(OperationNames.GET_ITEM_INFO, this.chosenRootFolderId());
+  }
+
+  protected handleDisconnectAccount(): void {
+    const currentAddon = this.addon();
+    if (!currentAddon) return;
+
+    this.openDisconnectDialog(currentAddon);
+  }
+
+  private openDisconnectDialog(addon: ConfiguredAddon): void {
+    const dialogRef = this.dialogService.open(DisconnectAddonModalComponent, {
+      focusOnShow: false,
+      header: this.translateService.instant('settings.addons.configureAddon.disconnect', {
+        addonName: addon.externalServiceName,
+      }),
+      closeOnEscape: true,
+      modal: true,
+      closable: true,
+      data: {
+        message: this.translateService.instant('settings.addons.configureAddon.disconnectMessage'),
+        addon,
+      },
+    });
+
+    dialogRef.onClose.subscribe((result) => {
+      if (result?.success) {
+        this.router.navigate([`${this.baseUrl()}/addons`]);
+      }
+    });
+  }
+
+  protected toggleEditMode(): void {
+    const operationResult = this.operationInvocation()?.operationResult[0];
+    const hasRootCandidates = operationResult?.mayContainRootCandidates ?? false;
+    const itemId = operationResult?.itemId || '/';
+
+    this.handleCreateOperationInvocation(
+      hasRootCandidates ? OperationNames.LIST_CHILD_ITEMS : OperationNames.GET_ITEM_INFO,
+      itemId
+    );
+    this.isEditMode.set(!this.isEditMode());
+  }
+
+  protected handleUpdateAddonConfiguration(): void {
+    const currentAddon = this.addon();
+    if (!currentAddon) return;
+
+    const payload = this.generateUpdatePayload(currentAddon);
+
+    this.store.dispatch(new UpdateConfiguredAddon(payload, this.addonTypeString(), currentAddon.id)).subscribe({
+      complete: () => this.router.navigate([`${this.baseUrl()}/addons`]),
+    });
+  }
+
+  private generateUpdatePayload(addon: ConfiguredAddon): ConfiguredAddonRequestJsonApi {
+    const addonType = this.addonTypeString();
+
+    const updatePayload = {
+      data: {
+        id: addon.id,
+        type: `configured-${addonType}-addons`,
+        attributes: {
+          authorized_resource_uri: this.resourceUri(),
+          display_name: this.accountNameControl.value || '',
+          root_folder: this.chosenRootFolderId(),
+          connected_capabilities: ['UPDATE', 'ACCESS'],
+          connected_operation_names: ['list_child_items', 'list_root_items', 'get_item_info'],
+          external_service_name: addon.externalServiceName,
+        },
+        relationships: {
+          account_owner: {
+            data: {
+              type: 'user-references',
+              id: this.addonsUserReference()[0].id || '',
+            },
+          },
+          base_account: {
+            data: {
+              type: addon.baseAccountType,
+              id: addon.baseAccountId,
+            },
+          },
+          [`external_${addonType}_service`]: {
+            data: {
+              type: `external-${addonType}-services`,
+              id: addon.externalServiceName,
+            },
+          },
+        },
+      },
+    };
+
+    return updatePayload;
+  }
+
+  private getOperationKwargs(operationName: OperationNames, folderId: string): Record<string, unknown> {
+    const baseKwargs = operationName !== OperationNames.LIST_ROOT_ITEMS ? { item_id: folderId } : {};
+
+    return {
+      ...baseKwargs,
+      ...(operationName === OperationNames.LIST_CHILD_ITEMS && { item_type: 'FOLDER' }),
+    };
+  }
+}
diff --git a/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.html b/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.html
new file mode 100644
index 000000000..0a296e7e6
--- /dev/null
+++ b/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.html
@@ -0,0 +1,17 @@
+<p>{{ dialogMessage }}</p>
+<br />
+<div class="flex pt-5 justify-content-between gap-3">
+  <p-button
+    class="btn-full-width"
+    [label]="'common.buttons.cancel' | translate"
+    severity="info"
+    (click)="dialogRef.close()"
+    [disabled]="isSubmitting()"
+  />
+  <p-button
+    class="btn-full-width"
+    [label]="'common.buttons.confirm' | translate"
+    (onClick)="handleConnectAddonAccount()"
+    [loading]="isSubmitting()"
+  />
+</div>
diff --git a/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.scss b/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.spec.ts b/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.spec.ts
new file mode 100644
index 000000000..d496ce136
--- /dev/null
+++ b/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmAccountConnectionModalComponent } from './confirm-account-connection-modal.component';
+
+describe('ConfirmAccountConnectionModalComponent', () => {
+  let component: ConfirmAccountConnectionModalComponent;
+  let fixture: ComponentFixture<ConfirmAccountConnectionModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ConfirmAccountConnectionModalComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ConfirmAccountConnectionModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.ts b/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.ts
new file mode 100644
index 000000000..0bdbada14
--- /dev/null
+++ b/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.ts
@@ -0,0 +1,60 @@
+import { select, Store } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { OperationInvocationRequestJsonApi } from '@shared/models';
+import { AddonsSelectors, CreateAddonOperationInvocation } from '@shared/stores/addons';
+
+@Component({
+  selector: 'osf-confirm-account-connection-modal',
+  imports: [Button, ReactiveFormsModule, TranslatePipe],
+  templateUrl: './confirm-account-connection-modal.component.html',
+  styleUrl: './confirm-account-connection-modal.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfirmAccountConnectionModalComponent {
+  private dialogConfig = inject(DynamicDialogConfig);
+  private store = inject(Store);
+  protected dialogRef = inject(DynamicDialogRef);
+  protected dialogMessage = this.dialogConfig.data.message || '';
+  protected isSubmitting = select(AddonsSelectors.getOperationInvocationSubmitting);
+
+  protected handleConnectAddonAccount(): void {
+    const selectedAccount = this.dialogConfig.data.selectedAccount;
+    if (!selectedAccount) return;
+
+    const payload: OperationInvocationRequestJsonApi = {
+      data: {
+        type: 'addon-operation-invocations',
+        attributes: {
+          invocation_status: null,
+          operation_name: 'list_root_items',
+          operation_kwargs: {},
+          operation_result: {},
+          created: null,
+          modified: null,
+        },
+        relationships: {
+          thru_account: {
+            data: {
+              type: selectedAccount.type,
+              id: selectedAccount.id,
+            },
+          },
+        },
+      },
+    };
+
+    this.store.dispatch(new CreateAddonOperationInvocation(payload)).subscribe({
+      complete: () => {
+        this.dialogRef.close({ success: true });
+      },
+    });
+  }
+}
diff --git a/src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.html b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.html
similarity index 76%
rename from src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.html
rename to src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.html
index 109ed5008..83fb69876 100644
--- a/src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.html
+++ b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.html
@@ -100,17 +100,15 @@ <h2 class="align-self-center inline-block">{{ loginOrChooseAccountText() }}</h2>
       <p-step-panel [value]="AddonStepperValue.CHOOSE_ACCOUNT">
         <ng-template #content let-activateCallback="activateCallback">
           <section class="flex flex-column gap-5">
-            <h2 class="pt-2">
-              {{ 'settings.addons.connectAddon.chooseExistingAccount' | translate }} {{ addon()?.displayName }}
-            </h2>
+            <h2 class="pt-2">{{ 'settings.addons.connectAddon.chooseExistingAccount' | translate }}</h2>
             <ul class="flex flex-column gap-3 mt-2">
               @for (account of currentAuthorizedAddonAccounts(); track account.id) {
                 <li class="flex cursor-pointer" tabindex="0">
                   <p-radiobutton
-                    [(ngModel)]="chosenAccount"
-                    [value]="account.displayName"
+                    [ngModel]="chosenAccountId()"
+                    [value]="account.id"
                     [inputId]="account.id"
-                    (click)="$event.stopPropagation()"
+                    (ngModelChange)="chosenAccountId.set($event)"
                   ></p-radiobutton>
                   <label [for]="account.id" class="ml-2 radio-label">{{ account.displayName }}</label>
                 </li>
@@ -125,8 +123,84 @@ <h2 class="pt-2">
               ></p-button>
               <p-button
                 class="w-10rem btn-full-width"
+                [disabled]="!chosenAccountId()"
                 [label]="'settings.addons.form.buttons.next' | translate"
-                (onClick)="activateCallback(4)"
+                (onClick)="handleConfirmAccountConnection()"
+              ></p-button>
+            </div>
+          </section>
+        </ng-template>
+      </p-step-panel>
+
+      <p-step-panel [value]="AddonStepperValue.CONFIGURE_ROOT_FOLDER">
+        <ng-template #content let-activateCallback="activateCallback">
+          <section class="flex flex-column gap-5">
+            <h2 class="pt-2">{{ 'settings.addons.connectAddon.configure' | translate }} {{ addon()?.displayName }}</h2>
+
+            <p-card>
+              <h3 class="mb-2">
+                {{ 'settings.addons.form.fields.accountName' | translate }}
+              </h3>
+
+              <input
+                [ngModel]="chosenAccountName()"
+                name="accountName"
+                pInputText
+                (ngModelChange)="chosenAccountName.set($event)"
+              />
+            </p-card>
+
+            <div class="folders-table flex flex-column">
+              <div class="folders-table-heading flex justify-content-between">
+                <h3>Folder Name</h3>
+                <h3>Select</h3>
+              </div>
+
+              @if (!operationInvocation()?.operationResult?.length) {
+                <p class="text-center">
+                  {{ 'settings.addons.configureAddon.noFolders' | translate }}
+                </p>
+              } @else {
+                @for (folder of operationInvocation()?.operationResult; track folder.itemId) {
+                  @if (folder.canBeRoot) {
+                    <div class="folders-table-row">
+                      <div class="flex gap-2 flex-1">
+                        @if (folder.itemId !== '/') {
+                          <i tabindex="0" class="osf-icon-arrow-left"></i>
+                        }
+                        <div tabindex="0" class="cursor-pointer flex gap-2">
+                          <i class="osf-icon-folder"></i>
+                          {{ folder.itemName }}
+                        </div>
+
+                        <p-radiobutton
+                          class="ml-auto pr-3"
+                          [ngModel]="chosenRootFolderId()"
+                          [value]="folder.itemId"
+                          [inputId]="folder.itemId"
+                          (ngModelChange)="chosenRootFolderId.set($event)"
+                        ></p-radiobutton>
+                      </div>
+                    </div>
+                  }
+                }
+              }
+            </div>
+
+            <div class="flex gap-4 align-self-end">
+              <p-button
+                class="w-10rem btn-full-width"
+                [label]="'settings.addons.form.buttons.back' | translate"
+                severity="info"
+                [disabled]="isAddonConnecting()"
+                (onClick)="activateCallback(AddonStepperValue.CHOOSE_ACCOUNT)"
+              ></p-button>
+              <p-button
+                class="w-10rem btn-full-width"
+                [disabled]="!chosenRootFolderId()"
+                [loading]="isAddonConnecting()"
+                [label]="'common.buttons.save' | translate"
+                (click)="handleCreateConfiguredAddon()"
               ></p-button>
             </div>
           </section>
@@ -135,7 +209,7 @@ <h2 class="pt-2">
 
       <p-step-panel [value]="AddonStepperValue.SETUP_NEW_ACCOUNT">
         <ng-template #content let-activateCallback="activateCallback">
-          <form [formGroup]="addonForm" (ngSubmit)="handleConnectAddon()" class="flex flex-column gap-5">
+          <form [formGroup]="addonForm" (ngSubmit)="handleCreateAuthorizedAddon()" class="flex flex-column gap-5">
             <h2>{{ 'settings.addons.connectAddon.setupNewAccount' | translate }}</h2>
             <p-card>
               @if (addon()?.credentialsFormat === credentialsFormat.ACCESS_SECRET_KEYS) {
@@ -237,7 +311,6 @@ <h2 class="mb-2">
             </p-card>
 
             <div class="flex gap-4 align-self-center md:align-self-end mt-3">
-              <!--              @if (!isAuthorized()) {-->
               <p-button
                 [label]="'settings.addons.form.buttons.back' | translate"
                 severity="info"
@@ -252,23 +325,6 @@ <h2 class="mb-2">
                 type="submit"
                 [disabled]="!addonForm.valid || !this.addonsUserReference().length || isAddonConnecting()"
               ></p-button>
-              <!--              } @else {-->
-              <!--                <p-button-->
-              <!--                  [label]="'settings.addons.form.buttons.cancel' | translate"-->
-              <!--                  severity="info"-->
-              <!--                  class="w-10rem btn-full-width"-->
-              <!--                  [routerLink]="[baseUrl() + '/addons']"-->
-              <!--                  [disabled]="isAddonConnecting()"-->
-              <!--                ></p-button>-->
-
-              <!--                <p-button-->
-              <!--                  class="w-10rem btn-full-width"-->
-              <!--                  [label]="'settings.addons.form.buttons.reconnect' | translate"-->
-              <!--                  [link]="true"-->
-              <!--                  (onClick)="handleConnectAddon()"-->
-              <!--                  [disabled]="!addonForm.valid || !this.addonsUserReference().length || isAddonConnecting()"-->
-              <!--                ></p-button>-->
-              <!--              }-->
             </div>
           </form>
         </ng-template>
diff --git a/src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.scss b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.scss
similarity index 51%
rename from src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.scss
rename to src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.scss
index fea06004b..06b5e393e 100644
--- a/src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.scss
+++ b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.scss
@@ -14,8 +14,17 @@
     }
   }
 
-  .folders-list {
-    border: 1px solid var.$grey-2;
-    border-radius: 0.57rem;
+  .filename-link {
+    cursor: pointer;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    max-width: 100%;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 }
diff --git a/src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.spec.ts b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.spec.ts
similarity index 83%
rename from src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.spec.ts
rename to src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.spec.ts
index a7df98958..d1a866264 100644
--- a/src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.spec.ts
+++ b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.spec.ts
@@ -10,16 +10,15 @@ import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { ActivatedRoute, Navigation, Router, UrlTree } from '@angular/router';
 
 import { SubHeaderComponent } from '@osf/shared/components';
+import { CredentialsFormat } from '@shared/enums';
+import { Addon } from '@shared/models';
 import { AddonsSelectors } from '@shared/stores/addons';
 
-import { CredentialsFormat } from '../../enums';
-import { Addon } from '../../models';
-
-import { ConnectConfigureAddonComponent } from './connect-configure-addon.component';
+import { ConnectConfiguredAddonComponent } from './connect-configured-addon.component';
 
 describe('ConnectAddonComponent', () => {
-  let component: ConnectConfigureAddonComponent;
-  let fixture: ComponentFixture<ConnectConfigureAddonComponent>;
+  let component: ConnectConfiguredAddonComponent;
+  let fixture: ComponentFixture<ConnectConfiguredAddonComponent>;
 
   const mockAddon: Addon = {
     id: 'test-addon-id',
@@ -45,7 +44,7 @@ describe('ConnectAddonComponent', () => {
     };
 
     await TestBed.configureTestingModule({
-      imports: [ConnectConfigureAddonComponent, MockComponent(SubHeaderComponent), MockPipe(TranslatePipe)],
+      imports: [ConnectConfiguredAddonComponent, MockComponent(SubHeaderComponent), MockPipe(TranslatePipe)],
       providers: [
         provideNoopAnimations(),
         MockProvider(Store, {
@@ -69,7 +68,7 @@ describe('ConnectAddonComponent', () => {
       ],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(ConnectConfigureAddonComponent);
+    fixture = TestBed.createComponent(ConnectConfiguredAddonComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.ts b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.ts
similarity index 66%
rename from src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.ts
rename to src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.ts
index 2176e0936..ff3858362 100644
--- a/src/app/features/project/addons/components/connect-configure-addon/connect-configure-addon.component.ts
+++ b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.ts
@@ -4,6 +4,7 @@ import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { Card } from 'primeng/card';
+import { DialogService } from 'primeng/dynamicdialog';
 import { InputText } from 'primeng/inputtext';
 import { Password } from 'primeng/password';
 import { RadioButtonModule } from 'primeng/radiobutton';
@@ -13,24 +14,33 @@ import { TableModule } from 'primeng/table';
 import { NgClass } from '@angular/common';
 import { Component, computed, inject, signal, viewChild } from '@angular/core';
 import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
-import { Router, RouterLink } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
+import { ConfirmAccountConnectionModalComponent } from '@osf/features/project/addons/components';
 import { AddonConfigMap } from '@osf/features/project/addons/utils';
 import { SubHeaderComponent } from '@osf/shared/components';
 import { ADDON_TERMS as addonTerms } from '@osf/shared/constants';
 import { AddonFormControls, CredentialsFormat, ProjectAddonsStepperValue } from '@osf/shared/enums';
-import { SettingsAddonsStepperValue } from '@shared/enums/settings-addons-stepper.enum';
-import { Addon, AddonForm, AddonRequest, AddonTerm, AuthorizedAddon } from '@shared/models';
+import {
+  Addon,
+  AddonForm,
+  AddonTerm,
+  AuthorizedAddon,
+  AuthorizedAddonRequestJsonApi,
+  ConfiguredAddonRequestJsonApi,
+} from '@shared/models';
 import {
   AddonsSelectors,
   CreateAuthorizedAddon,
+  CreateConfiguredAddon,
   GetAuthorizedCitationAddons,
   GetAuthorizedStorageAddons,
   UpdateAuthorizedAddon,
+  UpdateConfiguredAddon,
 } from '@shared/stores/addons';
 
 @Component({
-  selector: 'osf-connect-configure-addon',
+  selector: 'osf-connect-configured-addon',
   imports: [
     SubHeaderComponent,
     StepPanel,
@@ -48,13 +58,15 @@ import {
     TranslatePipe,
     RadioButtonModule,
   ],
-  templateUrl: './connect-configure-addon.component.html',
-  providers: [RadioButtonModule],
-  styleUrl: './connect-configure-addon.component.scss',
+  templateUrl: './connect-configured-addon.component.html',
+  providers: [RadioButtonModule, DialogService],
+  styleUrl: './connect-configured-addon.component.scss',
 })
-export class ConnectConfigureAddonComponent {
+export class ConnectConfiguredAddonComponent {
   private translateService = inject(TranslateService);
+  private dialogService = inject(DialogService);
   private router = inject(Router);
+  private route = inject(ActivatedRoute);
   private fb = inject(FormBuilder);
   protected stepper = viewChild(Stepper);
   protected AddonStepperValue = ProjectAddonsStepperValue;
@@ -64,21 +76,27 @@ export class ConnectConfigureAddonComponent {
   protected addon = signal<Addon | AuthorizedAddon | null>(null);
   protected addonAuthUrl = signal<string>('/settings/addons');
   protected currentAuthorizedAddonAccounts = signal<AuthorizedAddon[]>([]);
-  protected chosenAccount = '';
+  protected chosenAccountId = signal('');
+  protected chosenAccountName = signal('');
+  protected chosenRootFolderId = signal('');
 
   protected addonsUserReference = select(AddonsSelectors.getAddonsUserReference);
-  protected createdAddon = select(AddonsSelectors.getCreatedOrUpdatedAuthorizedAddon);
+  protected createdAuthorizedAddon = select(AddonsSelectors.getCreatedOrUpdatedAuthorizedAddon);
+  protected createdConfiguredAddon = select(AddonsSelectors.getCreatedOrUpdatedConfiguredAddon);
   protected authorizedStorageAddons = select(AddonsSelectors.getAuthorizedStorageAddons);
   protected authorizedCitationAddons = select(AddonsSelectors.getAuthorizedCitationAddons);
+  protected operationInvocation = select(AddonsSelectors.getOperationInvocation);
 
   protected isAuthorizedStorageAddonsLoading = select(AddonsSelectors.getAuthorizedStorageAddonsLoading);
   protected isAuthorizedCitationAddonsLoading = select(AddonsSelectors.getAuthorizedCitationAddonsLoading);
-  protected isAddonConnecting = select(AddonsSelectors.getCreatedOrUpdatedStorageAddonSubmitting);
+  protected isAddonConnecting = select(AddonsSelectors.getCreatedOrUpdatedConfiguredAddonSubmitting);
 
   protected actions = createDispatchMap({
     getAuthorizedStorageAddons: GetAuthorizedStorageAddons,
     getAuthorizedCitationAddons: GetAuthorizedCitationAddons,
     createAuthorizedAddon: CreateAuthorizedAddon,
+    createConfiguredAddon: CreateConfiguredAddon,
+    updateConfiguredAddon: UpdateConfiguredAddon,
     updateAuthorizedAddon: UpdateAuthorizedAddon,
   });
 
@@ -92,20 +110,19 @@ export class ConnectConfigureAddonComponent {
     });
   });
 
-  // protected isAuthorized = computed(() => {
-  //   //check if the addon is already authorized
-  //   const addon = this.addon();
-  //   if (addon) {
-  //     return addon.type === 'authorized-storage-accounts' || addon.type === 'authorized-citation-accounts';
-  //   }
-  //   return false;
-  // });
+  protected resourceUri = computed(() => {
+    const id = this.route.parent?.parent?.snapshot.params['id'];
+
+    return `https://staging4.osf.io/${id}`;
+  });
 
   protected addonTypeString = computed(() => {
-    //get the addon type string based on the addon type property
     const addon = this.addon();
+
     if (addon) {
-      return addon.type === 'external-storage-services' || addon.type === 'authorized-storage-accounts'
+      return addon.type === 'external-storage-services' ||
+        addon.type === 'authorized-storage-accounts' ||
+        addon.type === 'configured-storage-addons'
         ? 'storage'
         : 'citation';
     }
@@ -119,28 +136,72 @@ export class ConnectConfigureAddonComponent {
   });
 
   constructor() {
-    const terms = this.getTerms();
+    const terms = this.getAddonTerms();
     this.terms.set(terms);
     this.addonForm = this.initializeForm();
   }
 
-  protected handleConnectAddon(): void {
+  protected handleCreateConfiguredAddon() {
+    if (!this.addon()) return;
+
+    const payload = this.generateConfiguredAddonRequestPayload();
+
+    this.actions.createConfiguredAddon(payload, this.addonTypeString()).subscribe({
+      complete: () => {
+        const createdAddon = this.createdConfiguredAddon();
+        if (createdAddon) {
+          this.router.navigate([`${this.baseUrl()}/addons`]);
+        }
+      },
+    });
+  }
+
+  protected handleCreateAuthorizedAddon(): void {
     if (!this.addon() || !this.addonForm.valid) return;
 
-    const request = this.generateRequestPayload();
+    const payload = this.generateAuthorizedAddonRequestPayload();
 
-    this.actions.createAuthorizedAddon(request, this.addonTypeString()).subscribe({
+    this.actions.createAuthorizedAddon(payload, this.addonTypeString()).subscribe({
       complete: () => {
-        const createdAddon = this.createdAddon();
+        const createdAddon = this.createdAuthorizedAddon();
         if (createdAddon) {
           this.addonAuthUrl.set(createdAddon.attributes.auth_url);
           window.open(createdAddon.attributes.auth_url, '_blank');
-          this.stepper()?.value.set(SettingsAddonsStepperValue.AUTH);
+          this.stepper()?.value.set(ProjectAddonsStepperValue.AUTH);
         }
       },
     });
   }
 
+  protected handleConfirmAccountConnection(): void {
+    const selectedAccount = this.currentAuthorizedAddonAccounts().find(
+      (account) => account.id === this.chosenAccountId()
+    );
+
+    if (!selectedAccount) return;
+
+    const dialogRef = this.dialogService.open(ConfirmAccountConnectionModalComponent, {
+      focusOnShow: false,
+      header: this.translateService.instant('settings.addons.connectAddon.confirmAccount'),
+      closeOnEscape: true,
+      modal: true,
+      closable: true,
+      data: {
+        message: this.translateService.instant('settings.addons.connectAddon.connectAccount', {
+          accountName: selectedAccount.displayName,
+        }),
+        selectedAccount,
+      },
+    });
+
+    dialogRef.onClose.subscribe((result) => {
+      if (result?.success) {
+        this.stepper()?.value.set(ProjectAddonsStepperValue.CONFIGURE_ROOT_FOLDER);
+        this.chosenAccountName.set(selectedAccount.displayName);
+      }
+    });
+  }
+
   protected handleAuthorizedAccountsPresenceCheck() {
     const addonType = this.addonTypeString();
     const referenceId = this.userReferenceId();
@@ -187,14 +248,14 @@ export class ConnectConfigureAddonComponent {
   }
 
   private initializeForm(): FormGroup<AddonForm> {
-    const addon = this.addon();
+    const currentAddon = this.addon();
 
-    if (addon) {
+    if (currentAddon) {
       const formControls: Partial<AddonForm> = {
-        [AddonFormControls.AccountName]: this.fb.control<string>(addon.displayName || '', Validators.required),
+        [AddonFormControls.AccountName]: this.fb.control<string>(currentAddon.displayName || '', Validators.required),
       };
 
-      switch (addon.credentialsFormat) {
+      switch (currentAddon.credentialsFormat) {
         case CredentialsFormat.ACCESS_SECRET_KEYS:
           formControls[AddonFormControls.AccessKey] = this.fb.control<string>('', Validators.required);
           formControls[AddonFormControls.SecretKey] = this.fb.control<string>('', Validators.required);
@@ -219,14 +280,15 @@ export class ConnectConfigureAddonComponent {
     return new FormGroup({} as AddonForm);
   }
 
-  private generateRequestPayload(): AddonRequest {
+  private generateAuthorizedAddonRequestPayload(): AuthorizedAddonRequestJsonApi {
     const formValue = this.addonForm.value;
-    const addon = this.addon()!;
+    const currentAddon = this.addon()!;
     const credentials: Record<string, unknown> = {};
     const initiateOAuth =
-      addon.credentialsFormat === CredentialsFormat.OAUTH2 || addon.credentialsFormat === CredentialsFormat.OAUTH;
+      currentAddon.credentialsFormat === CredentialsFormat.OAUTH2 ||
+      currentAddon.credentialsFormat === CredentialsFormat.OAUTH;
 
-    switch (addon.credentialsFormat) {
+    switch (currentAddon.credentialsFormat) {
       case CredentialsFormat.ACCESS_SECRET_KEYS:
         credentials['access_key'] = formValue[AddonFormControls.AccessKey];
         credentials['secret_key'] = formValue[AddonFormControls.SecretKey];
@@ -244,9 +306,9 @@ export class ConnectConfigureAddonComponent {
         break;
     }
 
-    const requestPayload: AddonRequest = {
+    const requestPayload: AuthorizedAddonRequestJsonApi = {
       data: {
-        id: addon.id || '',
+        id: currentAddon.id || '',
         attributes: {
           api_base_url: formValue[AddonFormControls.HostUrl] || '',
           display_name: formValue[AddonFormControls.AccountName] || '',
@@ -263,7 +325,7 @@ export class ConnectConfigureAddonComponent {
               id: this.addonsUserReference()[0].id || '',
             },
           },
-          ...this.getServiceRelationship(addon),
+          ...this.getServiceRelationship(currentAddon),
         },
         type: `authorized-${this.addonTypeString()}-accounts`,
       },
@@ -272,6 +334,44 @@ export class ConnectConfigureAddonComponent {
     return requestPayload;
   }
 
+  private generateConfiguredAddonRequestPayload(): ConfiguredAddonRequestJsonApi {
+    const currentAddon = this.addon()!;
+    const selectedAccount = this.currentAuthorizedAddonAccounts().find(
+      (account) => account.id === this.chosenAccountId()
+    );
+
+    const requestPayload: ConfiguredAddonRequestJsonApi = {
+      data: {
+        type: `configured-${this.addonTypeString()}-addons`,
+        attributes: {
+          authorized_resource_uri: this.resourceUri(),
+          display_name: selectedAccount!.displayName,
+          root_folder: this.chosenRootFolderId(),
+          connected_capabilities: ['UPDATE', 'ACCESS'],
+          connected_operation_names: ['list_child_items', 'list_root_items', 'get_item_info'],
+          external_service_name: currentAddon.externalServiceName,
+        },
+        relationships: {
+          account_owner: {
+            data: {
+              type: 'user-references',
+              id: this.addonsUserReference()[0].id || '',
+            },
+          },
+          base_account: {
+            data: {
+              type: 'authorized-storage-accounts',
+              id: selectedAccount!.id,
+            },
+          },
+          ...this.getServiceRelationship(currentAddon),
+        },
+      },
+    };
+
+    return requestPayload;
+  }
+
   private getServiceRelationship(addon: Addon | AuthorizedAddon) {
     const isAuthorizedAddon =
       addon.type === 'authorized-storage-accounts' || addon.type === 'authorized-citation-accounts';
@@ -288,10 +388,11 @@ export class ConnectConfigureAddonComponent {
     };
   }
 
-  private getTerms(): AddonTerm[] {
+  private getAddonTerms(): AddonTerm[] {
     const addon = this.router.getCurrentNavigation()?.extras.state?.['addon'] as Addon | AuthorizedAddon;
     if (!addon) {
       this.router.navigate([`${this.baseUrl()}/addons`]);
+      return [];
     }
 
     this.addon.set(addon);
diff --git a/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.html b/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.html
new file mode 100644
index 000000000..fe482900d
--- /dev/null
+++ b/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.html
@@ -0,0 +1,26 @@
+<p>{{ dialogMessage }}</p>
+<br />
+<p>
+  {{ 'settings.addons.configureAddon.account' | translate }} <span class="font-bold">{{ addon.displayName }}</span>
+</p>
+<p>
+  {{ 'settings.addons.configureAddon.selectedFolder' | translate }}
+  <span class="font-bold">{{ selectedFolderName() }}</span>
+</p>
+<div class="flex pt-5 justify-content-between gap-3">
+  <p-button
+    class="btn-full-width"
+    [label]="'common.buttons.cancel' | translate"
+    severity="info"
+    (click)="dialogRef.close()"
+    [disabled]="isSubmitting()"
+  />
+  <p-button
+    class="btn-full-width"
+    severity="danger"
+    [label]="'common.buttons.disconnect' | translate"
+    (onClick)="handleDisconnectAddonAccount()"
+    [loading]="isSubmitting()"
+    [disabled]="isSubmitting()"
+  />
+</div>
diff --git a/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.scss b/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.spec.ts b/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.spec.ts
new file mode 100644
index 000000000..38a08ddf3
--- /dev/null
+++ b/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DisconnectAddonModalComponent } from './disconnect-addon-modal.component';
+
+describe('DisconnectAddonModalComponent', () => {
+  let component: DisconnectAddonModalComponent;
+  let fixture: ComponentFixture<DisconnectAddonModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DisconnectAddonModalComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DisconnectAddonModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.ts b/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.ts
new file mode 100644
index 000000000..056b83657
--- /dev/null
+++ b/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.ts
@@ -0,0 +1,37 @@
+import { select, Store } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+
+import { AddonsSelectors, DeleteConfiguredAddon } from '@shared/stores/addons';
+
+@Component({
+  selector: 'osf-disconnect-addon-modal',
+  imports: [Button, TranslatePipe],
+  templateUrl: './disconnect-addon-modal.component.html',
+  styleUrl: './disconnect-addon-modal.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DisconnectAddonModalComponent {
+  private dialogConfig = inject(DynamicDialogConfig);
+  private store = inject(Store);
+  protected dialogRef = inject(DynamicDialogRef);
+  protected addon = this.dialogConfig.data.addon;
+  protected dialogMessage = this.dialogConfig.data.message || '';
+  protected isSubmitting = select(AddonsSelectors.getDeleteStorageAddonSubmitting);
+  protected selectedFolderName = select(AddonsSelectors.getSelectedFolderName);
+
+  protected handleDisconnectAddonAccount(): void {
+    if (!this.addon) return;
+
+    this.store.dispatch(new DeleteConfiguredAddon(this.addon.id, this.addon.type)).subscribe({
+      complete: () => {
+        this.dialogRef.close({ success: true });
+      },
+    });
+  }
+}
diff --git a/src/app/features/project/addons/components/index.ts b/src/app/features/project/addons/components/index.ts
index b2129e835..0fb838b75 100644
--- a/src/app/features/project/addons/components/index.ts
+++ b/src/app/features/project/addons/components/index.ts
@@ -1 +1,4 @@
-export { ConnectConfigureAddonComponent } from '@osf/features/project/addons/components/connect-configure-addon/connect-configure-addon.component';
+export { ConfigureAddonComponent } from '@osf/features/project/addons/components/configure-addon/configure-addon.component';
+export { ConfirmAccountConnectionModalComponent } from '@osf/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component';
+export { ConnectConfiguredAddonComponent } from '@osf/features/project/addons/components/connect-configured-addon/connect-configured-addon.component';
+export { DisconnectAddonModalComponent } from '@osf/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component';
diff --git a/src/app/features/project/addons/enums/index.ts b/src/app/features/project/addons/enums/index.ts
new file mode 100644
index 000000000..66bce9417
--- /dev/null
+++ b/src/app/features/project/addons/enums/index.ts
@@ -0,0 +1 @@
+export * from './operation-names.enum';
diff --git a/src/app/features/project/addons/enums/operation-names.enum.ts b/src/app/features/project/addons/enums/operation-names.enum.ts
new file mode 100644
index 000000000..5469cc116
--- /dev/null
+++ b/src/app/features/project/addons/enums/operation-names.enum.ts
@@ -0,0 +1,5 @@
+export enum OperationNames {
+  LIST_ROOT_ITEMS = 'list_root_items',
+  LIST_CHILD_ITEMS = 'list_child_items',
+  GET_ITEM_INFO = 'get_item_info',
+}
diff --git a/src/app/features/project/overview/mappers/project-overview.mapper.ts b/src/app/features/project/overview/mappers/project-overview.mapper.ts
index 44ba27529..bb6286097 100644
--- a/src/app/features/project/overview/mappers/project-overview.mapper.ts
+++ b/src/app/features/project/overview/mappers/project-overview.mapper.ts
@@ -1,7 +1,12 @@
-import { ComponentGetResponse, ComponentOverview, ProjectOverview, ProjectOverviewGetResponse } from '../models';
+import {
+  ComponentGetResponseJsoApi,
+  ComponentOverview,
+  ProjectOverview,
+  ProjectOverviewGetResponseJsoApi,
+} from '../models';
 
 export class ProjectOverviewMapper {
-  static fromGetProjectResponse(response: ProjectOverviewGetResponse): ProjectOverview {
+  static fromGetProjectResponse(response: ProjectOverviewGetResponseJsoApi): ProjectOverview {
     return {
       id: response.id,
       type: response.type,
@@ -74,7 +79,7 @@ export class ProjectOverviewMapper {
     };
   }
 
-  static fromGetComponentResponse(response: ComponentGetResponse): ComponentOverview {
+  static fromGetComponentResponse(response: ComponentGetResponseJsoApi): ComponentOverview {
     return {
       id: response.id,
       type: response.type,
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 28dfdff8a..5430d0521 100644
--- a/src/app/features/project/overview/models/project-overview.models.ts
+++ b/src/app/features/project/overview/models/project-overview.models.ts
@@ -18,7 +18,7 @@ export interface ComponentOverview {
   contributors: ProjectOverviewContributor[];
 }
 
-export interface ComponentGetResponse {
+export interface ComponentGetResponseJsoApi {
   id: string;
   type: string;
   attributes: {
@@ -119,7 +119,7 @@ export interface ProjectOverviewSubject {
   text: string;
 }
 
-export interface ProjectOverviewGetResponse {
+export interface ProjectOverviewGetResponseJsoApi {
   id: string;
   type: string;
   attributes: {
@@ -255,6 +255,6 @@ export interface ProjectOverviewGetResponse {
   };
 }
 
-export interface ProjectOverviewJsonApiResponse extends JsonApiResponse<ProjectOverviewGetResponse, null> {
-  data: ProjectOverviewGetResponse;
+export interface ProjectOverviewResponseJsoApi 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 f5fe3b3cb..2d7466491 100644
--- a/src/app/features/project/overview/services/project-overview.service.ts
+++ b/src/app/features/project/overview/services/project-overview.service.ts
@@ -6,7 +6,12 @@ import { inject, Injectable } from '@angular/core';
 import { JsonApiService } from '@osf/core/services';
 
 import { ProjectOverviewMapper } from '../mappers';
-import { ComponentGetResponse, ComponentOverview, ProjectOverview, ProjectOverviewJsonApiResponse } from '../models';
+import {
+  ComponentGetResponseJsoApi,
+  ComponentOverview,
+  ProjectOverview,
+  ProjectOverviewResponseJsoApi,
+} from '../models';
 
 import { environment } from 'src/environments/environment';
 
@@ -33,7 +38,7 @@ export class ProjectOverviewService {
     };
 
     return this.#jsonApiService
-      .get<ProjectOverviewJsonApiResponse>(`${environment.apiUrl}/nodes/${projectId}/`, params)
+      .get<ProjectOverviewResponseJsoApi>(`${environment.apiUrl}/nodes/${projectId}/`, params)
       .pipe(map((response) => ProjectOverviewMapper.fromGetProjectResponse(response.data)));
   }
 
@@ -123,7 +128,7 @@ export class ProjectOverviewService {
     };
 
     return this.#jsonApiService
-      .get<{ data: ComponentGetResponse[] }>(`${environment.apiUrl}/nodes/${projectId}/children`, params)
+      .get<{ data: ComponentGetResponseJsoApi[] }>(`${environment.apiUrl}/nodes/${projectId}/children`, params)
       .pipe(map((response) => response.data.map((item) => ProjectOverviewMapper.fromGetComponentResponse(item))));
   }
 
@@ -134,7 +139,7 @@ export class ProjectOverviewService {
     };
 
     return this.#jsonApiService
-      .get<{ data: ComponentGetResponse[] }>(`${environment.apiUrl}/nodes/${projectId}/linked_nodes`, params)
+      .get<{ data: ComponentGetResponseJsoApi[] }>(`${environment.apiUrl}/nodes/${projectId}/linked_nodes`, params)
       .pipe(map((response) => response.data.map((item) => ProjectOverviewMapper.fromGetComponentResponse(item))));
   }
 }
diff --git a/src/app/features/settings/addons/addons.component.html b/src/app/features/settings/addons/addons.component.html
index 34d9ca485..2b046909f 100644
--- a/src/app/features/settings/addons/addons.component.html
+++ b/src/app/features/settings/addons/addons.component.html
@@ -63,7 +63,9 @@
         @if (!isAddonsLoading()) {
           <osf-addon-card-list [cards]="filteredAddonCards()" [showDangerButton]="false" />
         } @else {
-          <osf-loading-spinner />
+          <div class="mt-8">
+            <osf-loading-spinner />
+          </div>
         }
       </p-tabpanel>
       <p-tabpanel [value]="AddonTabValue.CONNECTED_ADDONS" class="flex flex-column gap-5">
@@ -73,11 +75,17 @@
           [placeholder]="'settings.addons.filters.search' | translate"
         />
 
-        <osf-addon-card-list
-          [cards]="allAuthorizedAddons()"
-          [cardButtonLabel]="'settings.addons.form.buttons.reconnect' | translate"
-          [showDangerButton]="true"
-        />
+        @if (!isAuthorizedAddonsLoading()) {
+          <osf-addon-card-list
+            [cards]="allAuthorizedAddons()"
+            [cardButtonLabel]="'settings.addons.form.buttons.reconnect' | translate"
+            [showDangerButton]="true"
+          />
+        } @else {
+          <div class="mt-8">
+            <osf-loading-spinner />
+          </div>
+        }
       </p-tabpanel>
     </p-tabpanels>
   </p-tabs>
diff --git a/src/app/features/settings/addons/addons.component.ts b/src/app/features/settings/addons/addons.component.ts
index 6c5d78af0..123698939 100644
--- a/src/app/features/settings/addons/addons.component.ts
+++ b/src/app/features/settings/addons/addons.component.ts
@@ -6,6 +6,8 @@ import { AutoCompleteModule } from 'primeng/autocomplete';
 import { SelectModule } from 'primeng/select';
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primeng/tabs';
 
+import { debounceTime, distinctUntilChanged } from 'rxjs';
+
 import { ChangeDetectionStrategy, Component, computed, effect, inject, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, FormsModule } from '@angular/forms';
@@ -57,6 +59,7 @@ export class AddonsComponent {
   protected AddonTabValue = AddonTabValue;
   protected defaultTabValue = AddonTabValue.ALL_ADDONS;
   protected searchControl = new FormControl<string>('');
+  protected searchValue = signal<string>('');
   protected selectedCategory = signal<string>(AddonCategory.EXTERNAL_STORAGE_SERVICES);
   protected selectedTab = signal<number>(this.defaultTabValue);
 
@@ -67,13 +70,30 @@ export class AddonsComponent {
   protected authorizedStorageAddons = select(AddonsSelectors.getAuthorizedStorageAddons);
   protected authorizedCitationAddons = select(AddonsSelectors.getAuthorizedCitationAddons);
 
+  protected isCurrentUserLoading = select(UserSelectors.getCurrentUserLoading);
+  protected isUserReferenceLoading = select(AddonsSelectors.getAddonsUserReferenceLoading);
   protected isStorageAddonsLoading = select(AddonsSelectors.getStorageAddonsLoading);
   protected isCitationAddonsLoading = select(AddonsSelectors.getCitationAddonsLoading);
   protected isAuthorizedStorageAddonsLoading = select(AddonsSelectors.getAuthorizedStorageAddonsLoading);
   protected isAuthorizedCitationAddonsLoading = select(AddonsSelectors.getAuthorizedCitationAddonsLoading);
+
   protected isAddonsLoading = computed(() => {
-    return this.isStorageAddonsLoading() || this.isCitationAddonsLoading();
+    return (
+      this.isStorageAddonsLoading() ||
+      this.isCitationAddonsLoading() ||
+      this.isUserReferenceLoading() ||
+      this.isCurrentUserLoading()
+    );
+  });
+  protected isAuthorizedAddonsLoading = computed(() => {
+    return (
+      this.isAuthorizedStorageAddonsLoading() ||
+      this.isAuthorizedCitationAddonsLoading() ||
+      this.isUserReferenceLoading() ||
+      this.isCurrentUserLoading()
+    );
   });
+
   protected actions = createDispatchMap({
     getStorageAddons: GetStorageAddons,
     getCitationAddons: GetCitationAddons,
@@ -88,7 +108,7 @@ export class AddonsComponent {
   protected readonly allAuthorizedAddons = computed(() => {
     const authorizedAddons = [...this.authorizedStorageAddons(), ...this.authorizedCitationAddons()];
 
-    const searchValue = this.searchControl.value?.toLowerCase() ?? '';
+    const searchValue = this.searchValue().toLowerCase();
     return authorizedAddons.filter((card) => card.displayName.includes(searchValue));
   });
 
@@ -107,8 +127,8 @@ export class AddonsComponent {
   );
 
   protected readonly filteredAddonCards = computed(() => {
-    const searchValue = this.searchControl.value?.toLowerCase() ?? '';
-    return this.currentAddonsState().filter((card) => card.externalServiceName.includes(searchValue));
+    const searchValue = this.searchValue().toLowerCase();
+    return this.currentAddonsState().filter((card) => card.externalServiceName.toLowerCase().includes(searchValue));
   });
 
   protected onCategoryChange(value: string): void {
@@ -141,6 +161,10 @@ export class AddonsComponent {
         this.fetchAllAuthorizedAddons(this.userReferenceId());
       }
     });
+
+    this.searchControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged()).subscribe((value) => {
+      this.searchValue.set(value ?? '');
+    });
   }
 
   private fetchAllAuthorizedAddons(userReferenceId: string): void {
diff --git a/src/app/features/settings/addons/components/connect-addon/connect-addon.component.spec.ts b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.spec.ts
index 941fe02c1..09cdde185 100644
--- a/src/app/features/settings/addons/components/connect-addon/connect-addon.component.spec.ts
+++ b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.spec.ts
@@ -10,11 +10,10 @@ import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { ActivatedRoute, Navigation, Router, UrlTree } from '@angular/router';
 
 import { SubHeaderComponent } from '@osf/shared/components';
+import { CredentialsFormat } from '@shared/enums';
+import { Addon } from '@shared/models';
 import { AddonsSelectors } from '@shared/stores/addons';
 
-import { CredentialsFormat } from '../../enums';
-import { Addon } from '../../models';
-
 import { ConnectAddonComponent } from './connect-addon.component';
 
 describe('ConnectAddonComponent', () => {
diff --git a/src/app/features/settings/addons/components/connect-addon/connect-addon.component.ts b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.ts
index a3b37cd7f..c965f9d53 100644
--- a/src/app/features/settings/addons/components/connect-addon/connect-addon.component.ts
+++ b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.ts
@@ -17,7 +17,7 @@ import { Router, RouterLink } from '@angular/router';
 import { SubHeaderComponent } from '@osf/shared/components';
 import { ADDON_TERMS as addonTerms } from '@osf/shared/constants';
 import { AddonFormControls, CredentialsFormat } from '@osf/shared/enums';
-import { Addon, AddonForm, AddonRequest, AddonTerm, AuthorizedAddon } from '@shared/models';
+import { Addon, AddonForm, AddonTerm, AuthorizedAddon, AuthorizedAddonRequestJsonApi } from '@shared/models';
 import { AddonsSelectors, CreateAuthorizedAddon, UpdateAuthorizedAddon } from '@shared/stores/addons';
 
 @Component({
@@ -142,7 +142,7 @@ export class ConnectAddonComponent {
     return new FormGroup({} as AddonForm);
   }
 
-  private generateRequestPayload(): AddonRequest {
+  private generateRequestPayload(): AuthorizedAddonRequestJsonApi {
     const formValue = this.addonForm.value;
     const addon = this.addon()!;
     const credentials: Record<string, unknown> = {};
@@ -167,7 +167,7 @@ export class ConnectAddonComponent {
         break;
     }
 
-    const requestPayload: AddonRequest = {
+    const requestPayload: AuthorizedAddonRequestJsonApi = {
       data: {
         id: addon.id || '',
         attributes: {
diff --git a/src/app/features/settings/tokens/mappers/token.mapper.ts b/src/app/features/settings/tokens/mappers/token.mapper.ts
index f655d3759..45cc20602 100644
--- a/src/app/features/settings/tokens/mappers/token.mapper.ts
+++ b/src/app/features/settings/tokens/mappers/token.mapper.ts
@@ -1,7 +1,7 @@
-import { Token, TokenCreateRequest, TokenCreateResponse, TokenGetResponse } from '../models';
+import { Token, TokenCreateRequestJsonApi, TokenCreateResponseJsonApi, TokenGetResponseJsonApi } from '../models';
 
 export class TokenMapper {
-  static toRequest(name: string, scopes: string[]): TokenCreateRequest {
+  static toRequest(name: string, scopes: string[]): TokenCreateRequestJsonApi {
     return {
       data: {
         attributes: {
@@ -13,7 +13,7 @@ export class TokenMapper {
     };
   }
 
-  static fromCreateResponse(response: TokenCreateResponse): Token {
+  static fromCreateResponse(response: TokenCreateResponseJsonApi): Token {
     return {
       id: response.id,
       name: response.attributes.name,
@@ -23,7 +23,7 @@ export class TokenMapper {
     };
   }
 
-  static fromGetResponse(response: TokenGetResponse): Token {
+  static fromGetResponse(response: TokenGetResponseJsonApi): Token {
     return {
       id: response.id,
       name: response.attributes.name,
diff --git a/src/app/features/settings/tokens/models/tokens.model.ts b/src/app/features/settings/tokens/models/tokens.model.ts
index b1cee985b..5fef6f9b4 100644
--- a/src/app/features/settings/tokens/models/tokens.model.ts
+++ b/src/app/features/settings/tokens/models/tokens.model.ts
@@ -1,5 +1,5 @@
 // API Request Model
-export interface TokenCreateRequest {
+export interface TokenCreateRequestJsonApi {
   data: {
     attributes: {
       name: string;
@@ -10,7 +10,7 @@ export interface TokenCreateRequest {
 }
 
 // API Response Model
-export interface TokenCreateResponse {
+export interface TokenCreateResponseJsonApi {
   id: string;
   type: 'tokens';
   attributes: {
@@ -22,7 +22,7 @@ export interface TokenCreateResponse {
 }
 
 // API Response Model for GET request
-export interface TokenGetResponse {
+export interface TokenGetResponseJsonApi {
   id: string;
   type: 'tokens';
   attributes: {
diff --git a/src/app/features/settings/tokens/services/tokens.service.ts b/src/app/features/settings/tokens/services/tokens.service.ts
index d60b76daf..e9aa3feb8 100644
--- a/src/app/features/settings/tokens/services/tokens.service.ts
+++ b/src/app/features/settings/tokens/services/tokens.service.ts
@@ -7,7 +7,7 @@ import { JsonApiResponse } from '@osf/core/models';
 import { JsonApiService } from '@osf/core/services';
 
 import { TokenMapper } from '../mappers';
-import { Scope, Token, TokenCreateResponse, TokenGetResponse } from '../models';
+import { Scope, Token, TokenCreateResponseJsonApi, TokenGetResponseJsonApi } from '../models';
 
 import { environment } from 'src/environments/environment';
 
@@ -24,16 +24,18 @@ export class TokensService {
   }
 
   getTokens(): Observable<Token[]> {
-    return this.#jsonApiService.get<JsonApiResponse<TokenGetResponse[], null>>(environment.apiUrl + '/tokens/').pipe(
-      map((responses) => {
-        return responses.data.map((response) => TokenMapper.fromGetResponse(response));
-      })
-    );
+    return this.#jsonApiService
+      .get<JsonApiResponse<TokenGetResponseJsonApi[], null>>(environment.apiUrl + '/tokens/')
+      .pipe(
+        map((responses) => {
+          return responses.data.map((response) => TokenMapper.fromGetResponse(response));
+        })
+      );
   }
 
   getTokenById(tokenId: string): Observable<Token> {
     return this.#jsonApiService
-      .get<JsonApiResponse<TokenGetResponse, null>>(`${environment.apiUrl}/tokens/${tokenId}/`)
+      .get<JsonApiResponse<TokenGetResponseJsonApi, null>>(`${environment.apiUrl}/tokens/${tokenId}/`)
       .pipe(map((response) => TokenMapper.fromGetResponse(response.data)));
   }
 
@@ -41,7 +43,7 @@ export class TokensService {
     const request = TokenMapper.toRequest(name, scopes);
 
     return this.#jsonApiService
-      .post<TokenCreateResponse>(environment.apiUrl + '/tokens/', request)
+      .post<TokenCreateResponseJsonApi>(environment.apiUrl + '/tokens/', request)
       .pipe(map((response) => TokenMapper.fromCreateResponse(response)));
   }
 
@@ -49,7 +51,7 @@ export class TokensService {
     const request = TokenMapper.toRequest(name, scopes);
 
     return this.#jsonApiService
-      .patch<TokenCreateResponse>(`${environment.apiUrl}/tokens/${tokenId}/`, request)
+      .patch<TokenCreateResponseJsonApi>(`${environment.apiUrl}/tokens/${tokenId}/`, request)
       .pipe(map((response) => TokenMapper.fromCreateResponse(response)));
   }
 
diff --git a/src/app/features/settings/tokens/tokens.component.ts b/src/app/features/settings/tokens/tokens.component.ts
index 0b751aab8..a03821970 100644
--- a/src/app/features/settings/tokens/tokens.component.ts
+++ b/src/app/features/settings/tokens/tokens.component.ts
@@ -40,12 +40,7 @@ export class TokensComponent implements OnInit {
   );
 
   createToken(): void {
-    let dialogWidth = '850px';
-    if (this.isXSmall()) {
-      dialogWidth = '345px';
-    } else if (this.isMedium()) {
-      dialogWidth = '500px';
-    }
+    const dialogWidth = this.isXSmall() ? '95vw' : '800px';
 
     this.#dialogService.open(TokenAddEditFormComponent, {
       width: dialogWidth,
diff --git a/src/app/shared/components/addons/addon-card/addon-card.component.html b/src/app/shared/components/addons/addon-card/addon-card.component.html
index 41bb42f55..dd56792f3 100644
--- a/src/app/shared/components/addons/addon-card/addon-card.component.html
+++ b/src/app/shared/components/addons/addon-card/addon-card.component.html
@@ -21,7 +21,7 @@ <h3>{{ card()?.displayName }}</h3>
       <p-button
         [label]="cardButtonLabel() || ('settings.addons.form.buttons.connect' | translate)"
         severity="secondary"
-        (onClick)="onConnectAddon()"
+        (onClick)="!isConfiguredAddon() ? onConnectAddon() : onConfigureAddon()"
         [ngClass]="isMobile() ? 'w-8rem btn-full-width' : ''"
       ></p-button>
     </div>
diff --git a/src/app/shared/components/addons/addon-card/addon-card.component.ts b/src/app/shared/components/addons/addon-card/addon-card.component.ts
index 0ec7d6507..4f64251aa 100644
--- a/src/app/shared/components/addons/addon-card/addon-card.component.ts
+++ b/src/app/shared/components/addons/addon-card/addon-card.component.ts
@@ -32,10 +32,20 @@ export class AddonCardComponent {
   protected readonly addonTypeString = computed(() => {
     const addon = this.card();
     if (addon) {
-      return addon.type === 'authorized-storage-accounts' ? 'storage' : 'citation';
+      return addon.type === 'authorized-storage-accounts' || addon.type === 'configured-storage-addons'
+        ? 'storage'
+        : 'citation';
     }
     return '';
   });
+  protected readonly isConfiguredAddon = computed(() => {
+    const addon = this.card();
+    if (addon) {
+      return addon.type === 'configured-storage-addons' || addon.type === 'configured-citation-addons';
+    }
+
+    return false;
+  });
 
   onConnectAddon(): void {
     const addon = this.card();
@@ -48,6 +58,17 @@ export class AddonCardComponent {
     }
   }
 
+  onConfigureAddon(): void {
+    const addon = this.card();
+    if (addon) {
+      const currentUrl = this.router.url;
+      const baseUrl = currentUrl.split('/addons')[0];
+      this.router.navigate([`${baseUrl}/addons/configure-addon`], {
+        state: { addon },
+      });
+    }
+  }
+
   showDisableDialog(): void {
     this.isDialogVisible.set(true);
   }
diff --git a/src/app/shared/enums/index.ts b/src/app/shared/enums/index.ts
index 810faf37f..378a11261 100644
--- a/src/app/shared/enums/index.ts
+++ b/src/app/shared/enums/index.ts
@@ -9,7 +9,6 @@ export * from './filter-type.enum';
 export * from './profile-addons-stepper.enum';
 export * from './resource-tab.enum';
 export * from './resource-type.enum';
-export * from './settings-addons-stepper.enum';
 export * from './share-indexing.enum';
 export * from './sort-order.enum';
 export * from './subscriptions';
diff --git a/src/app/shared/enums/profile-addons-stepper.enum.ts b/src/app/shared/enums/profile-addons-stepper.enum.ts
index 367d4065e..43ee1793b 100644
--- a/src/app/shared/enums/profile-addons-stepper.enum.ts
+++ b/src/app/shared/enums/profile-addons-stepper.enum.ts
@@ -2,6 +2,7 @@ export enum ProjectAddonsStepperValue {
   TERMS = 1,
   CHOOSE_CONNECTION = 2,
   CHOOSE_ACCOUNT = 3,
-  SETUP_NEW_ACCOUNT = 4,
-  AUTH = 5,
+  CONFIGURE_ROOT_FOLDER = 4,
+  SETUP_NEW_ACCOUNT = 5,
+  AUTH = 6,
 }
diff --git a/src/app/shared/mappers/addon.mapper.ts b/src/app/shared/mappers/addon.mapper.ts
index 181bbd176..85b70ae0b 100644
--- a/src/app/shared/mappers/addon.mapper.ts
+++ b/src/app/shared/mappers/addon.mapper.ts
@@ -1,15 +1,18 @@
 import {
   Addon,
-  AddonGetResponse,
+  AddonGetResponseJsonApi,
   AuthorizedAddon,
-  AuthorizedAddonGetResponse,
+  AuthorizedAddonGetResponseJsonApi,
   ConfiguredAddon,
-  ConfiguredAddonGetResponse,
+  ConfiguredAddonGetResponseJsonApi,
   IncludedAddonData,
+  OperationInvocation,
+  OperationInvocationResponseJsonApi,
+  StorageItemResponse,
 } from '@shared/models';
 
 export class AddonMapper {
-  static fromResponse(response: AddonGetResponse): Addon {
+  static fromResponse(response: AddonGetResponseJsonApi): Addon {
     return {
       type: response.type,
       id: response.id,
@@ -23,7 +26,7 @@ export class AddonMapper {
   }
 
   static fromAuthorizedAddonResponse(
-    response: AuthorizedAddonGetResponse,
+    response: AuthorizedAddonGetResponseJsonApi,
     included?: IncludedAddonData[]
   ): AuthorizedAddon {
     // Handle both storage and citation service relationships
@@ -64,16 +67,53 @@ export class AddonMapper {
     };
   }
 
-  static fromConfiguredAddonResponse(response: ConfiguredAddonGetResponse): ConfiguredAddon {
+  static fromConfiguredAddonResponse(response: ConfiguredAddonGetResponseJsonApi): ConfiguredAddon {
     return {
       type: response.type,
       id: response.id,
       displayName: response.attributes.display_name,
       externalServiceName: response.attributes.external_service_name,
-      rootFolder: response.attributes.root_folder,
+      selectedFolderId: response.attributes.root_folder,
       connectedCapabilities: response.attributes.connected_capabilities,
       connectedOperationNames: response.attributes.connected_operation_names,
       currentUserIsOwner: response.attributes.current_user_is_owner,
+      baseAccountId: response.relationships.base_account.data.id,
+      baseAccountType: response.relationships.base_account.data.type,
+    };
+  }
+
+  static fromOperationInvocationResponse(response: OperationInvocationResponseJsonApi): OperationInvocation {
+    const operationResult = response.attributes.operation_result;
+    const isOperationResult = 'items' in operationResult && 'total_count' in operationResult;
+
+    const mappedOperationResult = isOperationResult
+      ? operationResult.items.map((item: StorageItemResponse) => ({
+          itemId: item.item_id,
+          itemName: item.item_name,
+          itemType: item.item_type,
+          canBeRoot: item.can_be_root,
+          mayContainRootCandidates: item.may_contain_root_candidates,
+        }))
+      : [
+          {
+            itemId: operationResult.item_id,
+            itemName: operationResult.item_name,
+            itemType: operationResult.item_type,
+            canBeRoot: operationResult.can_be_root,
+            mayContainRootCandidates: operationResult.may_contain_root_candidates,
+          },
+        ];
+    return {
+      type: response.type,
+      id: response.id,
+      invocationStatus: response.attributes.invocation_status,
+      operationName: response.attributes.operation_name,
+      operationKwargs: {
+        itemId: response.attributes.operation_kwargs.item_id,
+        itemType: response.attributes.operation_kwargs.item_type,
+      },
+      itemCount: isOperationResult ? operationResult.total_count : 0,
+      operationResult: mappedOperationResult,
     };
   }
 }
diff --git a/src/app/shared/models/addons/addons.models.ts b/src/app/shared/models/addons/addons.models.ts
index 1e3c731e7..a3e1d3288 100644
--- a/src/app/shared/models/addons/addons.models.ts
+++ b/src/app/shared/models/addons/addons.models.ts
@@ -1,4 +1,4 @@
-export interface AddonGetResponse {
+export interface AddonGetResponseJsonApi {
   type: string;
   id: string;
   attributes: {
@@ -19,7 +19,7 @@ export interface AddonGetResponse {
   };
 }
 
-export interface AuthorizedAddonGetResponse {
+export interface AuthorizedAddonGetResponseJsonApi {
   type: string;
   id: string;
   attributes: {
@@ -53,7 +53,7 @@ export interface AuthorizedAddonGetResponse {
   };
 }
 
-export interface ConfiguredAddonGetResponse {
+export interface ConfiguredAddonGetResponseJsonApi {
   type: string;
   id: string;
   attributes: {
@@ -64,6 +64,14 @@ export interface ConfiguredAddonGetResponse {
     connected_operation_names: string[];
     current_user_is_owner: boolean;
   };
+  relationships: {
+    base_account: {
+      data: {
+        type: string;
+        id: string;
+      };
+    };
+  };
 }
 
 export interface Addon {
@@ -100,10 +108,12 @@ export interface ConfiguredAddon {
   id: string;
   displayName: string;
   externalServiceName: string;
-  rootFolder: string;
+  selectedFolderId: string;
   connectedCapabilities: string[];
   connectedOperationNames: string[];
   currentUserIsOwner: boolean;
+  baseAccountId: string;
+  baseAccountType: string;
 }
 
 export interface IncludedAddonData {
@@ -121,7 +131,7 @@ export interface IncludedAddonData {
   >;
 }
 
-export interface UserReference {
+export interface UserReferenceJsonApi {
   type: string;
   id: string;
   attributes: {
@@ -129,7 +139,7 @@ export interface UserReference {
   };
 }
 
-export interface ResourceReference {
+export interface ResourceReferenceJsonApi {
   type: string;
   id: string;
   attributes: {
@@ -137,7 +147,7 @@ export interface ResourceReference {
   };
 }
 
-export interface AddonRequest {
+export interface AuthorizedAddonRequestJsonApi {
   data: {
     id?: string;
     attributes: {
@@ -173,7 +183,7 @@ export interface AddonRequest {
   };
 }
 
-export interface AddonResponse {
+export interface AuthorizedAddonResponseJsonApi {
   type: string;
   id: string;
   attributes: {
@@ -200,3 +210,88 @@ export interface AddonResponse {
     };
   };
 }
+
+export interface ConfiguredAddonRequestJsonApi {
+  data: {
+    attributes: {
+      authorized_resource_uri: string;
+      display_name: string;
+      connected_capabilities: string[];
+      connected_operation_names: string[];
+      root_folder: string;
+      external_service_name: string;
+    };
+    relationships: {
+      external_storage_service?: {
+        data: {
+          type: string;
+          id: string;
+        };
+      };
+      external_citation_service?: {
+        data: {
+          type: string;
+          id: string;
+        };
+      };
+      base_account: {
+        data: {
+          type: string;
+          id: string;
+        };
+      };
+      authorized_resource?: {
+        data: {
+          type: string;
+          id: string;
+        };
+      };
+      account_owner: {
+        data: {
+          type: string;
+          id: string;
+        };
+      };
+    };
+    type: string;
+    id?: string;
+  };
+}
+
+export interface ConfiguredAddonResponseJsonApi {
+  data: {
+    type: string;
+    id: string;
+    attributes: {
+      display_name: string;
+      root_folder: string;
+      connected_capabilities: string[];
+      connected_operation_names: string[];
+      current_user_is_owner: boolean;
+      external_service_name: string;
+    };
+    relationships: {
+      base_account: {
+        data: {
+          type: string;
+          id: string;
+        };
+      };
+      authorized_resource: {
+        data: {
+          type: string;
+          id: string;
+        };
+      };
+      external_storage_service: {
+        data: {
+          type: string;
+          id: string;
+        };
+      };
+    };
+    links: {
+      self: string;
+    };
+  };
+}
diff --git a/src/app/shared/models/addons/index.ts b/src/app/shared/models/addons/index.ts
index 1b34b1d47..1ba8a3213 100644
--- a/src/app/shared/models/addons/index.ts
+++ b/src/app/shared/models/addons/index.ts
@@ -1,4 +1,5 @@
 export * from './addon-form.model';
 export * from './addon-terms.model';
 export * from './addons.models';
+export * from './operation-invocation.models';
 export * from './term.model';
diff --git a/src/app/shared/models/addons/operation-invocation.models.ts b/src/app/shared/models/addons/operation-invocation.models.ts
new file mode 100644
index 000000000..c22faf014
--- /dev/null
+++ b/src/app/shared/models/addons/operation-invocation.models.ts
@@ -0,0 +1,77 @@
+export interface StorageItemResponse {
+  item_id?: string;
+  item_name?: string;
+  item_type?: string;
+  can_be_root?: boolean;
+  may_contain_root_candidates?: boolean;
+}
+
+export interface OperationResult {
+  items: StorageItemResponse[];
+  total_count: number;
+}
+
+export interface OperationInvocationRequestJsonApi {
+  data: {
+    attributes: {
+      invocation_status: string | null;
+      operation_name: string;
+      operation_kwargs: Record<string, unknown>;
+      operation_result: Record<string, unknown>;
+      created: string | null;
+      modified: string | null;
+    };
+    relationships: {
+      thru_account?: {
+        data: {
+          type: string;
+          id: string;
+        };
+      };
+      thru_addon?: {
+        data: {
+          type: string;
+          id: string;
+        };
+      };
+    };
+    type: string;
+  };
+}
+
+export interface OperationInvocationResponseJsonApi {
+  type: string;
+  id: string;
+  attributes: {
+    invocation_status: string;
+    operation_kwargs: StorageItemResponse;
+    operation_result: OperationResult | StorageItemResponse;
+    created: string;
+    modified: string;
+    operation_name: string;
+  };
+  links: {
+    self: string;
+  };
+}
+
+export interface StorageItem {
+  itemId?: string;
+  itemName?: string;
+  itemType?: string;
+  canBeRoot?: boolean;
+  mayContainRootCandidates?: boolean;
+}
+
+export interface OperationInvocation {
+  id: string;
+  type: string;
+  invocationStatus: string;
+  operationName: string;
+  operationKwargs: {
+    itemId?: string;
+    itemType?: string;
+  };
+  operationResult: StorageItem[];
+  itemCount: number;
+}
diff --git a/src/app/shared/services/addons.service.ts b/src/app/shared/services/addons.service.ts
index e3ad4c917..3cdf28aa9 100644
--- a/src/app/shared/services/addons.service.ts
+++ b/src/app/shared/services/addons.service.ts
@@ -10,17 +10,22 @@ import { UserSelectors } from '@core/store/user';
 import { AddonMapper } from '@osf/shared/mappers';
 import {
   Addon,
-  AddonGetResponse,
-  AddonRequest,
-  AddonResponse,
+  AddonGetResponseJsonApi,
   AuthorizedAddon,
-  AuthorizedAddonGetResponse,
+  AuthorizedAddonGetResponseJsonApi,
+  AuthorizedAddonRequestJsonApi,
+  AuthorizedAddonResponseJsonApi,
   ConfiguredAddon,
-  ConfiguredAddonGetResponse,
+  ConfiguredAddonGetResponseJsonApi,
+  ConfiguredAddonRequestJsonApi,
+  ConfiguredAddonResponseJsonApi,
   IncludedAddonData,
-  ResourceReference,
-  UserReference,
+  OperationInvocation,
+  OperationInvocationRequestJsonApi,
+  ResourceReferenceJsonApi,
+  UserReferenceJsonApi,
 } from '@shared/models';
+import { OperationInvocationResponseJsonApi } from '@shared/models/addons/operation-invocation.models';
 
 import { environment } from '../../../environments/environment';
 
@@ -34,7 +39,9 @@ export class AddonsService {
 
   getAddons(addonType: string): Observable<Addon[]> {
     return this.#jsonApiService
-      .get<JsonApiResponse<AddonGetResponse[], null>>(`${environment.addonsApiUrl}/external-${addonType}-services`)
+      .get<
+        JsonApiResponse<AddonGetResponseJsonApi[], null>
+      >(`${environment.addonsApiUrl}/external-${addonType}-services`)
       .pipe(
         map((response) => {
           return response.data.map((item) => AddonMapper.fromResponse(item));
@@ -42,7 +49,7 @@ export class AddonsService {
       );
   }
 
-  getAddonsUserReference(): Observable<UserReference[]> {
+  getAddonsUserReference(): Observable<UserReferenceJsonApi[]> {
     const currentUser = this.#currentUser();
     if (!currentUser) throw new Error('Current user not found');
 
@@ -52,18 +59,20 @@ export class AddonsService {
     };
 
     return this.#jsonApiService
-      .get<JsonApiResponse<UserReference[], null>>(environment.addonsApiUrl + '/user-references/', params)
+      .get<JsonApiResponse<UserReferenceJsonApi[], null>>(environment.addonsApiUrl + '/user-references/', params)
       .pipe(map((response) => response.data));
   }
 
-  getAddonsResourceReference(resourceId: string): Observable<ResourceReference[]> {
+  getAddonsResourceReference(resourceId: string): Observable<ResourceReferenceJsonApi[]> {
     const resourceUri = `https://staging4.osf.io/${resourceId}`;
     const params = {
       'filter[resource_uri]': resourceUri,
     };
 
     return this.#jsonApiService
-      .get<JsonApiResponse<ResourceReference[], null>>(environment.addonsApiUrl + '/resource-references/', params)
+      .get<
+        JsonApiResponse<ResourceReferenceJsonApi[], null>
+      >(environment.addonsApiUrl + '/resource-references/', params)
       .pipe(map((response) => response.data));
   }
 
@@ -73,7 +82,7 @@ export class AddonsService {
     };
     return this.#jsonApiService
       .get<
-        JsonApiResponse<AuthorizedAddonGetResponse[], IncludedAddonData[]>
+        JsonApiResponse<AuthorizedAddonGetResponseJsonApi[], IncludedAddonData[]>
       >(`${environment.addonsApiUrl}/user-references/${referenceId}/authorized_${addonType}_accounts/?include=external-${addonType}-service`, params)
       .pipe(
         map((response) => {
@@ -85,8 +94,8 @@ export class AddonsService {
   getConfiguredAddons(addonType: string, referenceId: string): Observable<ConfiguredAddon[]> {
     return this.#jsonApiService
       .get<
-        JsonApiResponse<ConfiguredAddonGetResponse[], null>
-      >(`${environment.addonsApiUrl}/resource-references/${referenceId}/configured_${addonType}_accounts/`)
+        JsonApiResponse<ConfiguredAddonGetResponseJsonApi[], null>
+      >(`${environment.addonsApiUrl}/resource-references/${referenceId}/configured_${addonType}_addons/`)
       .pipe(
         map((response) => {
           return response.data.map((item) => AddonMapper.fromConfiguredAddonResponse(item));
@@ -94,25 +103,68 @@ export class AddonsService {
       );
   }
 
-  createAuthorizedAddon(addonRequestPayload: AddonRequest, addonType: string): Observable<AddonResponse> {
-    return this.#jsonApiService.post<AddonResponse>(
+  createAuthorizedAddon(
+    addonRequestPayload: AuthorizedAddonRequestJsonApi,
+    addonType: string
+  ): Observable<AuthorizedAddonResponseJsonApi> {
+    return this.#jsonApiService.post<AuthorizedAddonResponseJsonApi>(
       `${environment.addonsApiUrl}/authorized-${addonType}-accounts/`,
       addonRequestPayload
     );
   }
 
   updateAuthorizedAddon(
-    addonRequestPayload: AddonRequest,
+    addonRequestPayload: AuthorizedAddonRequestJsonApi,
     addonType: string,
     addonId: string
-  ): Observable<AddonResponse> {
-    return this.#jsonApiService.patch<AddonResponse>(
+  ): Observable<AuthorizedAddonResponseJsonApi> {
+    return this.#jsonApiService.patch<AuthorizedAddonResponseJsonApi>(
       `${environment.addonsApiUrl}/authorized-${addonType}-accounts/${addonId}/`,
       addonRequestPayload
     );
   }
 
+  createConfiguredAddon(
+    addonRequestPayload: ConfiguredAddonRequestJsonApi,
+    addonType: string
+  ): Observable<ConfiguredAddonResponseJsonApi> {
+    return this.#jsonApiService.post<ConfiguredAddonResponseJsonApi>(
+      `${environment.addonsApiUrl}/configured-${addonType}-addons/`,
+      addonRequestPayload
+    );
+  }
+
+  updateConfiguredAddon(
+    addonRequestPayload: ConfiguredAddonRequestJsonApi,
+    addonType: string,
+    addonId: string
+  ): Observable<ConfiguredAddonResponseJsonApi> {
+    return this.#jsonApiService.patch<ConfiguredAddonResponseJsonApi>(
+      `${environment.addonsApiUrl}/configured-${addonType}-addons/${addonId}/`,
+      addonRequestPayload
+    );
+  }
+
+  createAddonOperationInvocation(
+    invocationRequestPayload: OperationInvocationRequestJsonApi
+  ): Observable<OperationInvocation> {
+    return this.#jsonApiService
+      .post<OperationInvocationResponseJsonApi>(
+        `${environment.addonsApiUrl}/addon-operation-invocations/`,
+        invocationRequestPayload
+      )
+      .pipe(
+        map((response) => {
+          return AddonMapper.fromOperationInvocationResponse(response);
+        })
+      );
+  }
+
   deleteAuthorizedAddon(id: string, addonType: string): Observable<void> {
     return this.#jsonApiService.delete(`${environment.addonsApiUrl}/authorized-${addonType}-accounts/${id}/`);
   }
+
+  deleteConfiguredAddon(id: string, addonType: string): Observable<void> {
+    return this.#jsonApiService.delete(`${environment.addonsApiUrl}/${addonType}/${id}/`);
+  }
 }
diff --git a/src/app/shared/stores/addons/addons.actions.ts b/src/app/shared/stores/addons/addons.actions.ts
index 237a61cad..880db37c3 100644
--- a/src/app/shared/stores/addons/addons.actions.ts
+++ b/src/app/shared/stores/addons/addons.actions.ts
@@ -1,4 +1,8 @@
-import { AddonRequest } from '@shared/models';
+import {
+  AuthorizedAddonRequestJsonApi,
+  ConfiguredAddonRequestJsonApi,
+  OperationInvocationRequestJsonApi,
+} from '@shared/models';
 
 export class GetStorageAddons {
   static readonly type = '[Addons] Get Storage Addons';
@@ -33,19 +37,38 @@ export class GetConfiguredCitationAddons {
 }
 
 export class CreateAuthorizedAddon {
-  static readonly type = '[Addons] Create Storage Addon';
+  static readonly type = '[Addons] Create Authorized Addon';
 
   constructor(
-    public payload: AddonRequest,
+    public payload: AuthorizedAddonRequestJsonApi,
     public addonType: string
   ) {}
 }
 
 export class UpdateAuthorizedAddon {
-  static readonly type = '[Addons] Update Storage Addon';
+  static readonly type = '[Addons] Update Authorized Addon';
 
   constructor(
-    public payload: AddonRequest,
+    public payload: AuthorizedAddonRequestJsonApi,
+    public addonType: string,
+    public addonId: string
+  ) {}
+}
+
+export class CreateConfiguredAddon {
+  static readonly type = '[Addons] Create Configured Addon';
+
+  constructor(
+    public payload: ConfiguredAddonRequestJsonApi,
+    public addonType: string
+  ) {}
+}
+
+export class UpdateConfiguredAddon {
+  static readonly type = '[Addons] Update Configured Addon';
+
+  constructor(
+    public payload: ConfiguredAddonRequestJsonApi,
     public addonType: string,
     public addonId: string
   ) {}
@@ -65,7 +88,26 @@ export class DeleteAuthorizedAddon {
   static readonly type = '[Addons] Delete Authorized Addon';
 
   constructor(
-    public payload: string,
+    public id: string,
+    public addonType: string
+  ) {}
+}
+
+export class DeleteConfiguredAddon {
+  static readonly type = '[Addons] Delete Configured Addon';
+
+  constructor(
+    public id: string,
     public addonType: string
   ) {}
 }
+
+export class CreateAddonOperationInvocation {
+  static readonly type = '[Addons] Create Addon Operation Invocation';
+
+  constructor(public payload: OperationInvocationRequestJsonApi) {}
+}
+
+export class ClearConfiguredAddons {
+  static readonly type = '[Addons] Clear Configured Addons';
+}
diff --git a/src/app/shared/stores/addons/addons.models.ts b/src/app/shared/stores/addons/addons.models.ts
index 7f2fa30ed..3389bd3c2 100644
--- a/src/app/shared/stores/addons/addons.models.ts
+++ b/src/app/shared/stores/addons/addons.models.ts
@@ -1,10 +1,12 @@
 import {
   Addon,
-  AddonResponse,
   AuthorizedAddon,
+  AuthorizedAddonResponseJsonApi,
   ConfiguredAddon,
-  ResourceReference,
-  UserReference,
+  ConfiguredAddonResponseJsonApi,
+  OperationInvocation,
+  ResourceReferenceJsonApi,
+  UserReferenceJsonApi,
 } from '@shared/models';
 import { AsyncStateModel } from '@shared/models/store';
 
@@ -15,7 +17,10 @@ export interface AddonsStateModel {
   authorizedCitationAddons: AsyncStateModel<AuthorizedAddon[]>;
   configuredStorageAddons: AsyncStateModel<ConfiguredAddon[]>;
   configuredCitationAddons: AsyncStateModel<ConfiguredAddon[]>;
-  addonsUserReference: AsyncStateModel<UserReference[]>;
-  addonsResourceReference: AsyncStateModel<ResourceReference[]>;
-  createdUpdatedAuthorizedAddon: AsyncStateModel<AddonResponse | null>;
+  addonsUserReference: AsyncStateModel<UserReferenceJsonApi[]>;
+  addonsResourceReference: AsyncStateModel<ResourceReferenceJsonApi[]>;
+  createdUpdatedAuthorizedAddon: AsyncStateModel<AuthorizedAddonResponseJsonApi | null>;
+  createdUpdatedConfiguredAddon: AsyncStateModel<ConfiguredAddonResponseJsonApi | null>;
+  operationInvocation: AsyncStateModel<OperationInvocation | null>;
+  selectedFolderOperationInvocation: AsyncStateModel<OperationInvocation | null>;
 }
diff --git a/src/app/shared/stores/addons/addons.selectors.ts b/src/app/shared/stores/addons/addons.selectors.ts
index 5a911880e..b86c9588a 100644
--- a/src/app/shared/stores/addons/addons.selectors.ts
+++ b/src/app/shared/stores/addons/addons.selectors.ts
@@ -2,11 +2,13 @@ import { Selector } from '@ngxs/store';
 
 import {
   Addon,
-  AddonResponse,
   AuthorizedAddon,
+  AuthorizedAddonResponseJsonApi,
   ConfiguredAddon,
-  ResourceReference,
-  UserReference,
+  ConfiguredAddonResponseJsonApi,
+  OperationInvocation,
+  ResourceReferenceJsonApi,
+  UserReferenceJsonApi,
 } from '@shared/models';
 
 import { AddonsStateModel } from './addons.models';
@@ -74,7 +76,7 @@ export class AddonsSelectors {
   }
 
   @Selector([AddonsState])
-  static getAddonsUserReference(state: AddonsStateModel): UserReference[] {
+  static getAddonsUserReference(state: AddonsStateModel): UserReferenceJsonApi[] {
     return state.addonsUserReference.data;
   }
 
@@ -84,7 +86,7 @@ export class AddonsSelectors {
   }
 
   @Selector([AddonsState])
-  static getAddonsResourceReference(state: AddonsStateModel): ResourceReference[] {
+  static getAddonsResourceReference(state: AddonsStateModel): ResourceReferenceJsonApi[] {
     return state.addonsResourceReference.data;
   }
 
@@ -94,7 +96,7 @@ export class AddonsSelectors {
   }
 
   @Selector([AddonsState])
-  static getCreatedOrUpdatedAuthorizedAddon(state: AddonsStateModel): AddonResponse | null {
+  static getCreatedOrUpdatedAuthorizedAddon(state: AddonsStateModel): AuthorizedAddonResponseJsonApi | null {
     return state.createdUpdatedAuthorizedAddon.data;
   }
 
@@ -102,4 +104,39 @@ export class AddonsSelectors {
   static getCreatedOrUpdatedStorageAddonSubmitting(state: AddonsStateModel): boolean {
     return state.createdUpdatedAuthorizedAddon.isSubmitting || false;
   }
+
+  @Selector([AddonsState])
+  static getCreatedOrUpdatedConfiguredAddon(state: AddonsStateModel): ConfiguredAddonResponseJsonApi | null {
+    return state.createdUpdatedConfiguredAddon.data;
+  }
+
+  @Selector([AddonsState])
+  static getCreatedOrUpdatedConfiguredAddonSubmitting(state: AddonsStateModel): boolean {
+    return state.createdUpdatedConfiguredAddon.isSubmitting || false;
+  }
+
+  @Selector([AddonsState])
+  static getOperationInvocation(state: AddonsStateModel): OperationInvocation | null {
+    return state.operationInvocation.data;
+  }
+
+  @Selector([AddonsState])
+  static getOperationInvocationSubmitting(state: AddonsStateModel): boolean {
+    return state.operationInvocation.isSubmitting || false;
+  }
+
+  @Selector([AddonsState])
+  static getSelectedFolderOperationInvocation(state: AddonsStateModel): OperationInvocation | null {
+    return state.selectedFolderOperationInvocation.data;
+  }
+
+  @Selector([AddonsState])
+  static getSelectedFolderName(state: AddonsStateModel): string {
+    return state.selectedFolderOperationInvocation.data?.operationResult[0].itemName || '';
+  }
+
+  @Selector([AddonsState])
+  static getDeleteStorageAddonSubmitting(state: AddonsStateModel): boolean {
+    return state.createdUpdatedConfiguredAddon.isSubmitting || false;
+  }
 }
diff --git a/src/app/shared/stores/addons/addons.state.ts b/src/app/shared/stores/addons/addons.state.ts
index d29189383..bbd072aea 100644
--- a/src/app/shared/stores/addons/addons.state.ts
+++ b/src/app/shared/stores/addons/addons.state.ts
@@ -7,8 +7,12 @@ import { inject, Injectable } from '@angular/core';
 import { AddonsService } from '@shared/services';
 
 import {
+  ClearConfiguredAddons,
+  CreateAddonOperationInvocation,
   CreateAuthorizedAddon,
+  CreateConfiguredAddon,
   DeleteAuthorizedAddon,
+  DeleteConfiguredAddon,
   GetAddonsResourceReference,
   GetAddonsUserReference,
   GetAuthorizedCitationAddons,
@@ -18,6 +22,7 @@ import {
   GetConfiguredStorageAddons,
   GetStorageAddons,
   UpdateAuthorizedAddon,
+  UpdateConfiguredAddon,
 } from './addons.actions';
 import { AddonsStateModel } from './addons.models';
 
@@ -70,6 +75,24 @@ const ADDONS_DEFAULTS: AddonsStateModel = {
     isSubmitting: false,
     error: null,
   },
+  createdUpdatedConfiguredAddon: {
+    data: null,
+    isLoading: false,
+    isSubmitting: false,
+    error: null,
+  },
+  operationInvocation: {
+    data: null,
+    isLoading: false,
+    isSubmitting: false,
+    error: null,
+  },
+  selectedFolderOperationInvocation: {
+    data: null,
+    isLoading: false,
+    isSubmitting: false,
+    error: null,
+  },
 };
 
 @State<AddonsStateModel>({
@@ -290,6 +313,39 @@ export class AddonsState {
     );
   }
 
+  @Action(CreateConfiguredAddon)
+  createConfiguredAddon(ctx: StateContext<AddonsStateModel>, action: CreateConfiguredAddon) {
+    const state = ctx.getState();
+    ctx.patchState({
+      createdUpdatedConfiguredAddon: {
+        ...state.createdUpdatedConfiguredAddon,
+        isSubmitting: true,
+      },
+    });
+
+    return this.addonsService.createConfiguredAddon(action.payload, action.addonType).pipe(
+      tap((addon) => {
+        ctx.patchState({
+          createdUpdatedConfiguredAddon: {
+            data: addon,
+            isLoading: false,
+            isSubmitting: false,
+            error: null,
+          },
+        });
+        // const referenceId = state.addonsResourceReference.data[0]?.id;
+        // if (referenceId) {
+        //   ctx.dispatch(
+        //     action.addonType === 'storage'
+        //       ? new GetConfiguredStorageAddons(referenceId)
+        //       : new GetConfiguredCitationAddons(referenceId)
+        //   );
+        // }
+      }),
+      catchError((error) => this.handleError(ctx, 'createdUpdatedConfiguredAddon', error))
+    );
+  }
+
   @Action(GetAddonsUserReference)
   getAddonsUserReference(ctx: StateContext<AddonsStateModel>) {
     const state = ctx.getState();
@@ -314,6 +370,45 @@ export class AddonsState {
     );
   }
 
+  @Action(UpdateConfiguredAddon)
+  updateConfiguredAddon(ctx: StateContext<AddonsStateModel>, action: UpdateConfiguredAddon) {
+    const state = ctx.getState();
+    ctx.patchState({
+      createdUpdatedConfiguredAddon: {
+        ...state.createdUpdatedConfiguredAddon,
+        isSubmitting: true,
+      },
+    });
+
+    return this.addonsService.updateConfiguredAddon(action.payload, action.addonType, action.addonId).pipe(
+      tap((addon) => {
+        ctx.patchState({
+          createdUpdatedConfiguredAddon: {
+            data: addon,
+            isLoading: false,
+            isSubmitting: false,
+            error: null,
+          },
+          selectedFolderOperationInvocation: {
+            data: null,
+            isLoading: false,
+            isSubmitting: false,
+            error: null,
+          },
+        });
+        const referenceId = state.addonsResourceReference.data[0]?.id;
+        if (referenceId) {
+          ctx.dispatch(
+            action.addonType === 'storage'
+              ? new GetConfiguredStorageAddons(referenceId)
+              : new GetConfiguredCitationAddons(referenceId)
+          );
+        }
+      }),
+      catchError((error) => this.handleError(ctx, 'createdUpdatedAuthorizedAddon', error))
+    );
+  }
+
   @Action(GetAddonsResourceReference)
   getAddonsResourceReference(ctx: StateContext<AddonsStateModel>, action: GetAddonsResourceReference) {
     const state = ctx.getState();
@@ -349,7 +444,7 @@ export class AddonsState {
       },
     });
 
-    return this.addonsService.deleteAuthorizedAddon(action.payload, action.addonType).pipe(
+    return this.addonsService.deleteAuthorizedAddon(action.id, action.addonType).pipe(
       switchMap(() => {
         const referenceId = state.addonsUserReference.data[0]?.id;
         if (referenceId) {
@@ -363,11 +458,98 @@ export class AddonsState {
     );
   }
 
-  private handleError(ctx: StateContext<AddonsStateModel>, section: keyof AddonsStateModel, error: Error) {
+  @Action(DeleteConfiguredAddon)
+  deleteConfiguredAddon(ctx: StateContext<AddonsStateModel>, action: DeleteConfiguredAddon) {
+    const state = ctx.getState();
+
+    ctx.patchState({
+      createdUpdatedConfiguredAddon: {
+        ...state.createdUpdatedConfiguredAddon,
+        isSubmitting: true,
+      },
+    });
+
+    return this.addonsService.deleteConfiguredAddon(action.id, action.addonType).pipe(
+      switchMap(() => {
+        ctx.patchState({
+          createdUpdatedConfiguredAddon: {
+            ...state.createdUpdatedConfiguredAddon,
+            isSubmitting: false,
+          },
+        });
+        const referenceId = state.addonsResourceReference.data[0]?.id;
+        if (referenceId) {
+          return action.addonType === 'configured-storage-addons'
+            ? ctx.dispatch(new GetConfiguredStorageAddons(referenceId))
+            : ctx.dispatch(new GetConfiguredCitationAddons(referenceId));
+        }
+        return [];
+      }),
+      catchError((error) => this.handleError(ctx, 'createdUpdatedConfiguredAddon', error))
+    );
+  }
+
+  @Action(CreateAddonOperationInvocation)
+  createAddonOperationInvocation(ctx: StateContext<AddonsStateModel>, action: CreateAddonOperationInvocation) {
     const state = ctx.getState();
+    ctx.patchState({
+      operationInvocation: {
+        ...state.operationInvocation,
+        isSubmitting: true,
+      },
+    });
+
+    return this.addonsService.createAddonOperationInvocation(action.payload).pipe(
+      tap((response) => {
+        ctx.patchState({
+          operationInvocation: {
+            data: response,
+            isLoading: false,
+            isSubmitting: false,
+            error: null,
+          },
+        });
+
+        if (response.operationName === 'get_item_info' && response.operationResult[0]?.itemName) {
+          ctx.patchState({
+            selectedFolderOperationInvocation: {
+              data: response,
+              isLoading: false,
+              isSubmitting: false,
+              error: null,
+            },
+          });
+        }
+      }),
+      catchError((error) => this.handleError(ctx, 'operationInvocation', error))
+    );
+  }
+
+  @Action(ClearConfiguredAddons)
+  clearConfiguredAddons(ctx: StateContext<AddonsStateModel>) {
+    ctx.patchState({
+      configuredStorageAddons: {
+        data: [],
+        isLoading: false,
+        error: null,
+      },
+      configuredCitationAddons: {
+        data: [],
+        isLoading: false,
+        error: null,
+      },
+      addonsResourceReference: {
+        data: [],
+        isLoading: false,
+        error: null,
+      },
+    });
+  }
+
+  private handleError(ctx: StateContext<AddonsStateModel>, section: keyof AddonsStateModel, error: Error) {
     ctx.patchState({
       [section]: {
-        ...state[section],
+        ...ctx.getState()[section],
         isLoading: false,
         isSubmitting: false,
         error: error.message,
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 64d71f96a..6ab5e7a9f 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -10,7 +10,9 @@
       "download": "Download",
       "copy": "Copy",
       "move": "Move",
-      "rename": "Rename"
+      "rename": "Rename",
+      "confirm": "Confirm",
+      "disconnect": "Disconnect"
     },
     "search": {
       "noResultsFound": "No results found."
@@ -567,69 +569,6 @@
         "openResources": "Open Resources"
       }
     },
-    "files": {
-      "title": "Files",
-      "storageLocation": "OSF Storage",
-      "searchPlaceholder": "Search your projects",
-      "sort": {
-        "placeholder": "Sort",
-        "nameAZ": "Name: A-Z",
-        "nameZA": "Name: Z-A",
-        "lastModifiedOldest": "Last modified: oldest to newest",
-        "lastModifiedNewest": "Last modified: newest to oldest"
-      },
-      "actions": {
-        "downloadAsZip": "Download As Zip",
-        "createFolder": "Create Folder",
-        "uploadFile": "Upload File"
-      },
-      "dialogs": {
-        "uploadFile": {
-          "title": "Upload file"
-        },
-        "createFolder": {
-          "title": "Create folder",
-          "folderName": "New folder name",
-          "folderNamePlaceholder": "Please enter a folder name"
-        },
-        "renameFile": {
-          "title": "Rename file",
-          "renameLabel": "Please rename the file"
-        },
-        "moveFile": "Cannot move to the same folder"
-      },
-      "emptyState": "This folder is empty",
-      "detail": {
-        "backToList": "Back to list of files",
-        "fileMetadata": {
-          "title": "File Metadata",
-          "edit": "Edit",
-          "fields": {
-            "title": "Title",
-            "description": "Description",
-            "resourceType": "Resource Type",
-            "resourceLanguage": "Resource Language"
-          }
-        },
-        "projectMetadata": {
-          "title": "Project Metadata",
-          "edit": "Edit",
-          "fields": {
-            "funder": "Funder",
-            "awardTitle": "Award title",
-            "awardNumber": "Award number",
-            "awardUri": "Award URI",
-            "title": "Title",
-            "description": "Description",
-            "resourceType": "Resource type",
-            "resourceLanguage": "Resource language",
-            "dateCreated": "Date created",
-            "dateModified": "Date modified",
-            "contributors": "Contributors"
-          }
-        }
-      }
-    },
     "files": {
       "title": "Files",
       "storageLocation": "OSF Storage",
@@ -922,6 +861,16 @@
         "additionalService": "Additional Storage",
         "citationManager": "Citation Manager"
       },
+      "configureAddon": {
+        "title": "Configure Add-on",
+        "noFolders": "No folders",
+        "disconnect": "Disconnect {{addonName}}",
+        "disconnectMessage": "You are about to disconnect the following addon from the project:",
+        "account": "Account:",
+        "selectedFolder": "Selected folder:",
+        "connectedAccount": "Connected to account:",
+        "home": "Home"
+      },
       "connectAddon": {
         "title": "Connect Add-on",
         "terms": "Terms",
@@ -929,7 +878,9 @@
           "function": "Function",
           "status": "Status"
         },
-        "configure": "Configure ",
+        "confirmAccount": "Confirm account",
+        "connectAccount": "Connect following account: {{accountName}}",
+        "configure": "Configure",
         "termsDescription": "• This add-on connects your OSF project to an external service. Use of this service is bound by its terms and conditions. The OSF is not responsible for the service or for your use thereof.",
         "storageDescription": "• This add-on allows you to store files using an external service. Files added to this add-on are not stored within the OSF.",
         "reconnectAccount": "Reconnect Account",
diff --git a/src/assets/styles/components/addons.scss b/src/assets/styles/components/addons.scss
new file mode 100644
index 000000000..d39e5cd83
--- /dev/null
+++ b/src/assets/styles/components/addons.scss
@@ -0,0 +1,46 @@
+@use "assets/styles/mixins" as mix;
+@use "assets/styles/variables" as var;
+
+.p-breadcrumb {
+  padding: 0 0 mix.rem(16px) 0;
+}
+
+.folders-table {
+  min-width: 100%;
+  border-radius: mix.rem(8px);
+  overflow-x: auto;
+  border: 1px solid var.$grey-2;
+
+  &-heading {
+    height: mix.rem(44px);
+    padding: 0 mix.rem(27px);
+    align-items: center;
+    border-bottom: 1px solid var.$grey-2;
+  }
+
+  &-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: mix.rem(44px);
+    border-bottom: 1px solid var.$grey-2;
+    padding: 0 mix.rem(27px);
+    min-width: max-content;
+
+    .table-cell {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
+
+    > .table-cell:first-child {
+      min-width: 0;
+      max-width: 95%;
+    }
+  }
+
+  &-row:last-child {
+    border-bottom: none;
+  }
+}
diff --git a/src/assets/styles/styles.scss b/src/assets/styles/styles.scss
index 3b09e0b52..ca0da7720 100644
--- a/src/assets/styles/styles.scss
+++ b/src/assets/styles/styles.scss
@@ -39,3 +39,4 @@
 @use "./overrides/primeflex-override";
 @use "./overrides/multiselect";
 @use "components/preprints";
+@use "components/addons";

From 3484429fbfc5723f715eff2eb48fd3d0f232a3cd Mon Sep 17 00:00:00 2001
From: Roman Nastyuk <rnastyuk@exoft.net>
Date: Wed, 18 Jun 2025 15:56:02 +0300
Subject: [PATCH 06/18] feat(profile-addons-api): fixed connection creation
 bug, fixed form, refactored code

---
 .../project/addons/addons.component.html      |  14 +-
 .../project/addons/addons.component.scss      |   1 -
 .../project/addons/addons.component.ts        |   7 +-
 .../configure-addon.component.html            | 132 +------
 .../configure-addon.component.scss            |   5 +-
 .../configure-addon.component.ts              | 226 ++++-------
 ...firm-account-connection-modal.component.ts |  29 +-
 .../connect-configured-addon.component.html   | 232 ++---------
 .../connect-configured-addon.component.ts     | 368 ++++++------------
 .../disconnect-addon-modal.component.html     |   2 +-
 .../disconnect-addon-modal.component.ts       |   2 +-
 .../features/project/addons/services/index.ts |   2 +
 .../features/project/addons/utils/index.ts    |   1 +
 .../addons/utils/resource-base-uri.const.ts   |   1 +
 .../settings/addons/addons.component.ts       |   2 -
 .../connect-addon.component.html              | 287 +-------------
 .../connect-addon/connect-addon.component.ts  | 233 +++--------
 .../addon-card-list.component.html            |   2 +-
 .../addon-card/addon-card.component.html      |  12 +-
 .../addon-setup-account-form.component.html   | 133 +++++++
 .../addon-setup-account-form.component.scss   |   0
 .../addon-setup-account-form.component.ts     |  82 ++++
 .../addon-terms/addon-terms.component.html    |  24 ++
 .../addon-terms/addon-terms.component.scss    |   0
 .../addon-terms/addon-terms.component.ts      |  68 ++++
 .../folder-selector.component.html            | 110 ++++++
 .../folder-selector.component.scss}           |   8 +-
 .../folder-selector.component.ts              | 150 +++++++
 src/app/shared/components/addons/index.ts     |   3 +
 .../shared/enums/addon-form-controls.enum.ts  |   1 +
 .../shared/models/addons/addon-form.model.ts  |   1 +
 src/app/shared/models/addons/index.ts         |   1 +
 .../addons/operation-invoke-data.model.ts     |   6 +
 .../services/addons/addon-dialog.service.ts   |  55 +++
 .../services/addons/addon-form.service.ts     | 202 ++++++++++
 .../addon-operation-invocation.service.ts     |  80 ++++
 .../services/{ => addons}/addons.service.ts   |   4 +-
 src/app/shared/services/addons/index.ts       |   4 +
 src/app/shared/services/index.ts              |   2 +-
 .../shared/stores/addons/addons.actions.ts    |   4 +
 .../shared/stores/addons/addons.selectors.ts  |   5 +-
 src/app/shared/stores/addons/addons.state.ts  |  17 +
 src/assets/i18n/en.json                       |   7 +
 src/assets/styles/overrides/breadcrumbs.scss  |  12 +
 src/assets/styles/styles.scss                 |   2 +-
 src/main.ts                                   |   4 +-
 46 files changed, 1284 insertions(+), 1259 deletions(-)
 create mode 100644 src/app/features/project/addons/services/index.ts
 create mode 100644 src/app/features/project/addons/utils/resource-base-uri.const.ts
 create mode 100644 src/app/shared/components/addons/addon-setup-account-form/addon-setup-account-form.component.html
 create mode 100644 src/app/shared/components/addons/addon-setup-account-form/addon-setup-account-form.component.scss
 create mode 100644 src/app/shared/components/addons/addon-setup-account-form/addon-setup-account-form.component.ts
 create mode 100644 src/app/shared/components/addons/addon-terms/addon-terms.component.html
 create mode 100644 src/app/shared/components/addons/addon-terms/addon-terms.component.scss
 create mode 100644 src/app/shared/components/addons/addon-terms/addon-terms.component.ts
 create mode 100644 src/app/shared/components/addons/folder-selector/folder-selector.component.html
 rename src/{assets/styles/components/addons.scss => app/shared/components/addons/folder-selector/folder-selector.component.scss} (93%)
 create mode 100644 src/app/shared/components/addons/folder-selector/folder-selector.component.ts
 create mode 100644 src/app/shared/models/addons/operation-invoke-data.model.ts
 create mode 100644 src/app/shared/services/addons/addon-dialog.service.ts
 create mode 100644 src/app/shared/services/addons/addon-form.service.ts
 create mode 100644 src/app/shared/services/addons/addon-operation-invocation.service.ts
 rename src/app/shared/services/{ => addons}/addons.service.ts (98%)
 create mode 100644 src/app/shared/services/addons/index.ts
 create mode 100644 src/assets/styles/overrides/breadcrumbs.scss

diff --git a/src/app/features/project/addons/addons.component.html b/src/app/features/project/addons/addons.component.html
index cf196f066..36af5b43e 100644
--- a/src/app/features/project/addons/addons.component.html
+++ b/src/app/features/project/addons/addons.component.html
@@ -1,7 +1,7 @@
 <osf-sub-header [showButton]="false" [title]="'settings.addons.header.title' | translate" [icon]="'settings'" />
 <section class="flex-column flex flex-1">
-  <p-tabs [value]="selectedTab()" class="hidden md:flex md:flex-1">
-    <p-tablist class="pr-5 pl-5">
+  <p-tabs [value]="selectedTab()" class="flex flex-1">
+    <p-tablist class="pr-5 pl-5 hidden md:flex md:flex-column">
       <p-tab [value]="AddonTabValue.ALL_ADDONS">
         {{ 'settings.addons.tabs.allAddons' | translate }}
       </p-tab>
@@ -12,14 +12,16 @@
 
     <p-tabpanels class="p-3 sm:p-5 flex-1">
       <p-select
-        class="w-full mb-4 md:hidden"
+        class="w-full font-bold mb-4 md:hidden"
         [options]="tabOptions"
         optionValue="value"
         [ngModel]="selectedTab()"
         (ngModelChange)="selectedTab.set($event)"
       >
         <ng-template #selectedItem let-selectedOption>
-          {{ selectedOption.label | translate }}
+          <div class="m-auto pl-5">
+            {{ selectedOption.label | translate }}
+          </div>
         </ng-template>
         <ng-template #item let-item>
           {{ item.label | translate }}
@@ -58,7 +60,7 @@
         @if (!isAddonsLoading()) {
           <osf-addon-card-list [cards]="filteredAddonCards()" [showDangerButton]="false" />
         } @else {
-          <div class="mt-8 pt-5">
+          <div class="flex-1 mt-4 md:mt-8 lg:pt-5">
             <osf-loading-spinner />
           </div>
         }
@@ -76,7 +78,7 @@
             [cardButtonLabel]="'settings.addons.connectAddon.configure' | translate"
           />
         } @else {
-          <div class="mt-8 pt-8">
+          <div class="flex-1 mt-6 md:mt-8 lg:pt-7">
             <osf-loading-spinner />
           </div>
         }
diff --git a/src/app/features/project/addons/addons.component.scss b/src/app/features/project/addons/addons.component.scss
index 93cd2d24b..e9dab5325 100644
--- a/src/app/features/project/addons/addons.component.scss
+++ b/src/app/features/project/addons/addons.component.scss
@@ -1,5 +1,4 @@
 @use "assets/styles/mixins" as mix;
-@use "assets/styles/variables" as var;
 
 :host {
   @include mix.flex-column;
diff --git a/src/app/features/project/addons/addons.component.ts b/src/app/features/project/addons/addons.component.ts
index 20f82284f..568f18968 100644
--- a/src/app/features/project/addons/addons.component.ts
+++ b/src/app/features/project/addons/addons.component.ts
@@ -62,11 +62,11 @@ import { IS_XSMALL } from '@shared/utils';
 export class AddonsComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private destroyRef = inject(DestroyRef);
+  protected isMobile = toSignal(inject(IS_XSMALL));
   protected readonly tabOptions = ADDON_TAB_OPTIONS;
   protected readonly categoryOptions = ADDON_CATEGORY_OPTIONS;
-  protected isMobile = toSignal(inject(IS_XSMALL));
-  protected AddonTabValue = AddonTabValue;
-  protected defaultTabValue = AddonTabValue.ALL_ADDONS;
+  protected readonly AddonTabValue = AddonTabValue;
+  protected readonly defaultTabValue = AddonTabValue.ALL_ADDONS;
   protected searchControl = new FormControl<string>('');
   protected searchValue = signal<string>('');
   protected selectedCategory = signal<string>(AddonCategory.EXTERNAL_STORAGE_SERVICES);
@@ -92,7 +92,6 @@ export class AddonsComponent implements OnInit {
       this.isStorageAddonsLoading() ||
       this.isCitationAddonsLoading() ||
       this.isUserReferenceLoading() ||
-      // this.isResourceReferenceLoading() ||
       this.isCurrentUserLoading()
     );
   });
diff --git a/src/app/features/project/addons/components/configure-addon/configure-addon.component.html b/src/app/features/project/addons/components/configure-addon/configure-addon.component.html
index 770171061..ed08032ca 100644
--- a/src/app/features/project/addons/components/configure-addon/configure-addon.component.html
+++ b/src/app/features/project/addons/components/configure-addon/configure-addon.component.html
@@ -1,6 +1,6 @@
 <osf-sub-header [showButton]="false" [title]="'settings.addons.configureAddon.title' | translate" />
 
-<section class="flex flex-column flex-1 bg-white h-full gap-4 sm:p-3 md:p-5">
+<section class="flex flex-column flex-1 bg-white h-full gap-4 p-3 md:p-5">
   @if (!isEditMode()) {
     <div class="flex flex-column gap-4">
       <div class="flex justify-content-between">
@@ -14,7 +14,7 @@ <h2 class="align-self-center inline-block">
         ></p-button>
       </div>
 
-      @if (selectedFolderName()) {
+      @if (selectedFolder()) {
         <div class="flex flex-column flex-1">
           <p-card>
             <div class="flex justify-content-between">
@@ -26,14 +26,12 @@ <h2 class="align-self-center inline-block">
               <div class="flex gap-2">
                 <p-button
                   icon="fas fa-pencil"
-                  [text]="true"
                   severity="info"
                   (click)="toggleEditMode()"
                   (keydown.enter)="toggleEditMode()"
                 ></p-button>
                 <p-button
                   icon="fas fa-trash red-icon"
-                  [text]="true"
                   severity="info"
                   (click)="handleDisconnectAccount()"
                   (keydown.enter)="handleDisconnectAccount()"
@@ -43,7 +41,7 @@ <h2 class="align-self-center inline-block">
 
             <p class="font-normal mt-2">
               {{ 'settings.addons.configureAddon.selectedFolder' | translate }}
-              <span class="font-bold">{{ selectedFolderName() }}</span>
+              <span class="font-bold">{{ selectedFolder()?.itemName }}</span>
             </p>
           </p-card>
         </div>
@@ -54,7 +52,7 @@ <h2 class="align-self-center inline-block">
   } @else {
     <section class="flex flex-column gap-5">
       <div class="flex justify-content-between">
-        <h2 class="pt-2">
+        <h2 class="align-self-center">
           {{ 'settings.addons.connectAddon.configure' | translate }} {{ addon()?.externalServiceName }}
         </h2>
         <p-button
@@ -64,119 +62,15 @@ <h2 class="pt-2">
           (keydown.enter)="toggleEditMode()"
         ></p-button>
       </div>
-      <div>
-        <p-breadcrumb
-          class="p-0 max-w-full"
-          [model]="breadcrumbItems()"
-          [home]="homeBreadcrumb"
-          (onItemClick)="handleCreateOperationInvocation($event.item.state?.['operationName']!, $event.item.id!)"
-        >
-          <ng-template #home let-home>
-            <p-button
-              severity="info"
-              [link]="true"
-              [label]="home.label"
-              (click)="handleCreateOperationInvocation(home.state.operationName, home.id)"
-            ></p-button>
-          </ng-template>
-          <ng-template #item let-item>
-            <p-button
-              severity="info"
-              [link]="true"
-              [label]="item.label"
-              (click)="handleCreateOperationInvocation(item.state.operationName, item.id)"
-            ></p-button>
-          </ng-template>
-        </p-breadcrumb>
-        <p-card>
-          <p>
-            {{ 'settings.addons.configureAddon.selectedFolder' | translate }}
-            <span class="font-bold">{{ selectedFolderName() }}</span>
-          </p>
-          <h3 class="mt-4 mb-2">
-            {{ 'settings.addons.form.fields.accountName' | translate }}
-          </h3>
-
-          <input [formControl]="accountNameControl" name="accountName" pInputText />
-        </p-card>
-      </div>
-
-      @if (isOperationInvocationSubmitting()) {
-        <p-skeleton width="100%" height="7.5rem" borderRadius="16" />
-      } @else {
-        <div class="folders-table flex flex-column">
-          <div class="folders-table-heading flex justify-content-between">
-            <h3>Folder Name</h3>
-            <h3>Select</h3>
-          </div>
-          @if (operationInvocation()?.operationResult?.length) {
-            @for (folder of operationInvocation()?.operationResult; track folder.itemId) {
-              @let operationName =
-                folder.mayContainRootCandidates ? OperationNames.LIST_CHILD_ITEMS : OperationNames.GET_ITEM_INFO;
-              @let itemId = folder.itemId || '/';
-              <div class="folders-table-row relative">
-                <div class="flex gap-2 flex-1">
-                  <div tabindex="0" class="flex gap-2">
-                    <i class="osf-icon-folder"></i>
-                    <a
-                      tabindex="0"
-                      class="cursor-pointer"
-                      (keydown.enter)="
-                        handleCreateOperationInvocation(
-                          operationName,
-                          itemId,
-                          folder.itemName,
-                          folder.mayContainRootCandidates
-                        )
-                      "
-                      (click)="
-                        handleCreateOperationInvocation(
-                          operationName,
-                          itemId,
-                          folder.itemName,
-                          folder.mayContainRootCandidates
-                        )
-                      "
-                    >
-                      {{ folder.itemName }}</a
-                    >
-                  </div>
-                  @if (folder.canBeRoot) {
-                    <p-radiobutton
-                      class="ml-auto pr-3"
-                      [ngModel]="chosenRootFolderId()"
-                      [value]="folder.itemId"
-                      [inputId]="folder.itemId"
-                      (ngModelChange)="chosenRootFolderId.set($event)"
-                    ></p-radiobutton>
-                  }
-                </div>
-              </div>
-            }
-          } @else {
-            <div class="flex justify-content-center py-4">
-              <p>{{ 'settings.addons.configureAddon.noFolders' | translate }}</p>
-            </div>
-          }
-        </div>
-      }
-
-      <div class="flex gap-4 align-self-end">
-        <p-button
-          class="w-10rem btn-full-width"
-          [label]="'settings.addons.form.buttons.cancel' | translate"
-          severity="info"
-          [disabled]="isAddonUpdateSubmitting()"
-          (click)="toggleEditMode()"
-        ></p-button>
-        <p-button
-          class="w-10rem btn-full-width"
-          [disabled]="!chosenRootFolderId() || !accountNameControl.dirty"
-          [loading]="isAddonUpdateSubmitting()"
-          [label]="'common.buttons.save' | translate"
-          (click)="handleUpdateAddonConfiguration()"
-        ></p-button>
-      </div>
+      <osf-folder-selector
+        [accountName]="addon()?.displayName || ''"
+        [operationInvocationResult]="operationInvocation()?.operationResult || []"
+        [accountNameControl]="accountNameControl"
+        (operationInvoke)="handleCreateOperationInvocation($event.operationName, $event.itemId)"
+        [(selectedRootFolderId)]="selectedRootFolderId"
+        (save)="handleUpdateAddonConfiguration()"
+        (cancelSelection)="toggleEditMode()"
+      />
     </section>
   }
 </section>
diff --git a/src/app/features/project/addons/components/configure-addon/configure-addon.component.scss b/src/app/features/project/addons/components/configure-addon/configure-addon.component.scss
index da0c027b5..e9dab5325 100644
--- a/src/app/features/project/addons/components/configure-addon/configure-addon.component.scss
+++ b/src/app/features/project/addons/components/configure-addon/configure-addon.component.scss
@@ -1,5 +1,6 @@
+@use "assets/styles/mixins" as mix;
+
 :host {
-  display: flex;
-  flex-direction: column;
+  @include mix.flex-column;
   flex: 1;
 }
diff --git a/src/app/features/project/addons/components/configure-addon/configure-addon.component.ts b/src/app/features/project/addons/components/configure-addon/configure-addon.component.ts
index b98958f81..970348d83 100644
--- a/src/app/features/project/addons/components/configure-addon/configure-addon.component.ts
+++ b/src/app/features/project/addons/components/configure-addon/configure-addon.component.ts
@@ -1,25 +1,37 @@
 import { createDispatchMap, select, Store } from '@ngxs/store';
 
-import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 
-import { MenuItem } from 'primeng/api';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
 import { Button } from 'primeng/button';
 import { Card } from 'primeng/card';
 import { DialogService } from 'primeng/dynamicdialog';
-import { InputText } from 'primeng/inputtext';
-import { RadioButton } from 'primeng/radiobutton';
 import { Skeleton } from 'primeng/skeleton';
 
-import { ChangeDetectionStrategy, Component, computed, inject, OnInit, signal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  inject,
+  OnInit,
+  signal,
+} from '@angular/core';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
-import { DisconnectAddonModalComponent } from '@osf/features/project/addons/components';
 import { OperationNames } from '@osf/features/project/addons/enums';
 import { SubHeaderComponent } from '@shared/components';
-import { ConfiguredAddon, ConfiguredAddonRequestJsonApi, OperationInvocationRequestJsonApi } from '@shared/models';
-import { AddonsSelectors, CreateAddonOperationInvocation, UpdateConfiguredAddon } from '@shared/stores/addons';
+import { FolderSelectorComponent } from '@shared/components/addons/folder-selector/folder-selector.component';
+import { ConfiguredAddon } from '@shared/models';
+import { AddonDialogService, AddonFormService, AddonOperationInvocationService, ToastService } from '@shared/services';
+import {
+  AddonsSelectors,
+  ClearOperationInvocations,
+  CreateAddonOperationInvocation,
+  UpdateConfiguredAddon,
+} from '@shared/stores/addons';
 
 @Component({
   selector: 'osf-configure-addon',
@@ -29,36 +41,35 @@ import { AddonsSelectors, CreateAddonOperationInvocation, UpdateConfiguredAddon
     Button,
     RouterLink,
     Card,
-    InputText,
-    RadioButton,
     ReactiveFormsModule,
     FormsModule,
     Skeleton,
     BreadcrumbModule,
+    FolderSelectorComponent,
   ],
   templateUrl: './configure-addon.component.html',
   styleUrl: './configure-addon.component.scss',
-  providers: [DialogService],
+  providers: [DialogService, AddonDialogService],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ConfigureAddonComponent implements OnInit {
-  private readonly dialogService = inject(DialogService);
-  private readonly translateService = inject(TranslateService);
-  private readonly router = inject(Router);
-  private readonly route = inject(ActivatedRoute);
-  private readonly store = inject(Store);
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+  private store = inject(Store);
+  private destroyRef = inject(DestroyRef);
+  private toastService = inject(ToastService);
+  private addonDialogService = inject(AddonDialogService);
+  private addonFormService = inject(AddonFormService);
+  private operationInvocationService = inject(AddonOperationInvocationService);
 
-  protected readonly OperationNames = OperationNames;
   protected accountNameControl = new FormControl('');
   protected addon = signal<ConfiguredAddon | null>(null);
   protected isEditMode = signal<boolean>(false);
-  protected chosenRootFolderId = signal('');
+  protected selectedRootFolderId = signal('');
   protected addonsUserReference = select(AddonsSelectors.getAddonsUserReference);
   protected operationInvocation = select(AddonsSelectors.getOperationInvocation);
-  protected selectedFolderName = select(AddonsSelectors.getSelectedFolderName);
-
-  protected isOperationInvocationSubmitting = select(AddonsSelectors.getOperationInvocationSubmitting);
-  protected isAddonUpdateSubmitting = select(AddonsSelectors.getCreatedOrUpdatedConfiguredAddonSubmitting);
+  protected selectedFolderOperationInvocation = select(AddonsSelectors.getSelectedFolderOperationInvocation);
+  protected selectedFolder = select(AddonsSelectors.getSelectedFolder);
 
   protected readonly baseUrl = computed(() => {
     const currentUrl = this.router.url;
@@ -75,18 +86,17 @@ export class ConfigureAddonComponent implements OnInit {
   protected readonly actions = createDispatchMap({
     createAddonOperationInvocation: CreateAddonOperationInvocation,
     updateConfiguredAddon: UpdateConfiguredAddon,
+    clearOperationInvocations: ClearOperationInvocations,
   });
-  protected breadcrumbItems = signal<MenuItem[]>([]);
-  protected homeBreadcrumb: MenuItem = {
-    id: '/',
-    label: this.translateService.instant('settings.addons.configureAddon.home'),
-    state: {
-      operationName: OperationNames.LIST_ROOT_ITEMS,
-    },
-  };
 
   constructor() {
     this.initializeAddon();
+
+    effect(() => {
+      this.destroyRef.onDestroy(() => {
+        this.actions.clearOperationInvocations();
+      });
+    });
   }
 
   private initializeAddon(): void {
@@ -94,83 +104,24 @@ export class ConfigureAddonComponent implements OnInit {
 
     if (addon) {
       this.addon.set(addon);
+      this.selectedRootFolderId.set(addon.selectedFolderId);
       this.accountNameControl.setValue(addon.displayName);
-      this.chosenRootFolderId.set(addon.selectedFolderId);
     } else {
       this.router.navigate([`${this.baseUrl()}/addons`]);
     }
   }
 
-  protected handleCreateOperationInvocation(
-    operationName: OperationNames,
-    folderId: string,
-    folderName?: string,
-    mayContainRootCandidates?: boolean
-  ): void {
+  protected handleCreateOperationInvocation(operationName: OperationNames, folderId: string): void {
     const addon = this.addon();
     if (!addon) return;
 
-    const operationKwargs = this.getOperationKwargs(operationName, folderId);
-
-    const payload: OperationInvocationRequestJsonApi = {
-      data: {
-        type: 'addon-operation-invocations',
-        attributes: {
-          invocation_status: null,
-          operation_name: operationName,
-          operation_kwargs: operationKwargs,
-          operation_result: {},
-          created: null,
-          modified: null,
-        },
-        relationships: {
-          thru_addon: {
-            data: {
-              type: addon.type,
-              id: addon.id,
-            },
-          },
-        },
-      },
-    };
+    const payload = this.operationInvocationService.createOperationInvocationPayload(addon, operationName, folderId);
 
-    this.actions.createAddonOperationInvocation(payload).subscribe({
-      complete: () => {
-        this.handleBreadcrumbUpdate(operationName, folderId, folderName, mayContainRootCandidates);
-      },
-    });
-  }
-
-  private handleBreadcrumbUpdate(
-    operationName: OperationNames,
-    folderId: string,
-    folderName?: string,
-    mayContainRootCandidates?: boolean
-  ): void {
-    if (operationName === OperationNames.LIST_ROOT_ITEMS) {
-      this.breadcrumbItems.set([]);
-      return;
-    }
-
-    if (folderName) {
-      const breadcrumbs = [...this.breadcrumbItems()];
-
-      if (mayContainRootCandidates) {
-        const item = {
-          id: folderId,
-          label: folderName,
-          state: {
-            operationName: mayContainRootCandidates ? OperationNames.LIST_CHILD_ITEMS : OperationNames.GET_ITEM_INFO,
-          },
-        };
-
-        this.breadcrumbItems.set([...breadcrumbs, { ...item }]);
-      }
-    }
+    this.actions.createAddonOperationInvocation(payload);
   }
 
   ngOnInit(): void {
-    this.handleCreateOperationInvocation(OperationNames.GET_ITEM_INFO, this.chosenRootFolderId());
+    this.handleCreateOperationInvocation(OperationNames.GET_ITEM_INFO, this.selectedRootFolderId());
   }
 
   protected handleDisconnectAccount(): void {
@@ -181,29 +132,20 @@ export class ConfigureAddonComponent implements OnInit {
   }
 
   private openDisconnectDialog(addon: ConfiguredAddon): void {
-    const dialogRef = this.dialogService.open(DisconnectAddonModalComponent, {
-      focusOnShow: false,
-      header: this.translateService.instant('settings.addons.configureAddon.disconnect', {
-        addonName: addon.externalServiceName,
-      }),
-      closeOnEscape: true,
-      modal: true,
-      closable: true,
-      data: {
-        message: this.translateService.instant('settings.addons.configureAddon.disconnectMessage'),
-        addon,
-      },
-    });
+    const dialogRef = this.addonDialogService.openDisconnectDialog(addon);
 
-    dialogRef.onClose.subscribe((result) => {
+    dialogRef.subscribe((result) => {
       if (result?.success) {
         this.router.navigate([`${this.baseUrl()}/addons`]);
+        this.toastService.showSuccess('settings.addons.toast.disconnectSuccess', {
+          addonName: this.addon()?.displayName,
+        });
       }
     });
   }
 
   protected toggleEditMode(): void {
-    const operationResult = this.operationInvocation()?.operationResult[0];
+    const operationResult = this.selectedFolderOperationInvocation()?.operationResult[0];
     const hasRootCandidates = operationResult?.mayContainRootCandidates ?? false;
     const itemId = operationResult?.itemId || '/';
 
@@ -218,60 +160,22 @@ export class ConfigureAddonComponent implements OnInit {
     const currentAddon = this.addon();
     if (!currentAddon) return;
 
-    const payload = this.generateUpdatePayload(currentAddon);
+    const payload = this.addonFormService.generateConfiguredAddonUpdatePayload(
+      currentAddon,
+      this.addonsUserReference()[0].id || '',
+      this.resourceUri(),
+      this.accountNameControl.value || '',
+      this.selectedRootFolderId() || '',
+      this.addonTypeString()
+    );
 
     this.store.dispatch(new UpdateConfiguredAddon(payload, this.addonTypeString(), currentAddon.id)).subscribe({
-      complete: () => this.router.navigate([`${this.baseUrl()}/addons`]),
-    });
-  }
-
-  private generateUpdatePayload(addon: ConfiguredAddon): ConfiguredAddonRequestJsonApi {
-    const addonType = this.addonTypeString();
-
-    const updatePayload = {
-      data: {
-        id: addon.id,
-        type: `configured-${addonType}-addons`,
-        attributes: {
-          authorized_resource_uri: this.resourceUri(),
-          display_name: this.accountNameControl.value || '',
-          root_folder: this.chosenRootFolderId(),
-          connected_capabilities: ['UPDATE', 'ACCESS'],
-          connected_operation_names: ['list_child_items', 'list_root_items', 'get_item_info'],
-          external_service_name: addon.externalServiceName,
-        },
-        relationships: {
-          account_owner: {
-            data: {
-              type: 'user-references',
-              id: this.addonsUserReference()[0].id || '',
-            },
-          },
-          base_account: {
-            data: {
-              type: addon.baseAccountType,
-              id: addon.baseAccountId,
-            },
-          },
-          [`external_${addonType}_service`]: {
-            data: {
-              type: `external-${addonType}-services`,
-              id: addon.externalServiceName,
-            },
-          },
-        },
+      complete: () => {
+        this.router.navigate([`${this.baseUrl()}/addons`]);
+        this.toastService.showSuccess('settings.addons.toast.updateSuccess', {
+          addonName: currentAddon.externalServiceName,
+        });
       },
-    };
-
-    return updatePayload;
-  }
-
-  private getOperationKwargs(operationName: OperationNames, folderId: string): Record<string, unknown> {
-    const baseKwargs = operationName !== OperationNames.LIST_ROOT_ITEMS ? { item_id: folderId } : {};
-
-    return {
-      ...baseKwargs,
-      ...(operationName === OperationNames.LIST_CHILD_ITEMS && { item_type: 'FOLDER' }),
-    };
+    });
   }
 }
diff --git a/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.ts b/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.ts
index 0bdbada14..15aaac51d 100644
--- a/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.ts
+++ b/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.ts
@@ -8,7 +8,8 @@ import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { OperationInvocationRequestJsonApi } from '@shared/models';
+import { OperationNames } from '@osf/features/project/addons/enums';
+import { AddonOperationInvocationService } from '@shared/services';
 import { AddonsSelectors, CreateAddonOperationInvocation } from '@shared/stores/addons';
 
 @Component({
@@ -21,6 +22,7 @@ import { AddonsSelectors, CreateAddonOperationInvocation } from '@shared/stores/
 export class ConfirmAccountConnectionModalComponent {
   private dialogConfig = inject(DynamicDialogConfig);
   private store = inject(Store);
+  private operationInvocationService = inject(AddonOperationInvocationService);
   protected dialogRef = inject(DynamicDialogRef);
   protected dialogMessage = this.dialogConfig.data.message || '';
   protected isSubmitting = select(AddonsSelectors.getOperationInvocationSubmitting);
@@ -29,27 +31,10 @@ export class ConfirmAccountConnectionModalComponent {
     const selectedAccount = this.dialogConfig.data.selectedAccount;
     if (!selectedAccount) return;
 
-    const payload: OperationInvocationRequestJsonApi = {
-      data: {
-        type: 'addon-operation-invocations',
-        attributes: {
-          invocation_status: null,
-          operation_name: 'list_root_items',
-          operation_kwargs: {},
-          operation_result: {},
-          created: null,
-          modified: null,
-        },
-        relationships: {
-          thru_account: {
-            data: {
-              type: selectedAccount.type,
-              id: selectedAccount.id,
-            },
-          },
-        },
-      },
-    };
+    const payload = this.operationInvocationService.createInitialOperationInvocationPayload(
+      OperationNames.LIST_ROOT_ITEMS,
+      selectedAccount
+    );
 
     this.store.dispatch(new CreateAddonOperationInvocation(payload)).subscribe({
       complete: () => {
diff --git a/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.html b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.html
index 83fb69876..78da5b66b 100644
--- a/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.html
+++ b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.html
@@ -11,30 +11,7 @@ <h2>
             </h2>
 
             <div class="mt-4">
-              <p-table [value]="terms()" class="addon-table">
-                <ng-template pTemplate="header">
-                  <tr>
-                    <th>
-                      {{ 'settings.addons.connectAddon.table.function' | translate }}
-                    </th>
-                    <th>
-                      {{ 'settings.addons.connectAddon.table.status' | translate }}
-                    </th>
-                  </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-term>
-                  <tr
-                    [ngClass]="{
-                      'background-warning': term.type === 'warning',
-                      'background-success': term.type === 'info',
-                      'background-danger': term.type === 'danger',
-                    }"
-                  >
-                    <td>{{ term.function }}</td>
-                    <td>{{ term.status }}</td>
-                  </tr>
-                </ng-template>
-              </p-table>
+              <osf-addon-terms [addon]="addon()" />
             </div>
 
             <div class="flex flex-column gap-2 mt-4">
@@ -81,7 +58,7 @@ <h2 class="align-self-center inline-block">{{ loginOrChooseAccountText() }}</h2>
               ></p-button>
             </div>
 
-            <div class="flex mt-3 gap-4">
+            <div class="flex mt-3 gap-4 justify-content-end">
               <p-button
                 [label]="'settings.addons.form.buttons.existingAccount' | translate"
                 (click)="activateCallback(AddonStepperValue.CHOOSE_ACCOUNT)"
@@ -136,197 +113,36 @@ <h2 class="pt-2">{{ 'settings.addons.connectAddon.chooseExistingAccount' | trans
         <ng-template #content let-activateCallback="activateCallback">
           <section class="flex flex-column gap-5">
             <h2 class="pt-2">{{ 'settings.addons.connectAddon.configure' | translate }} {{ addon()?.displayName }}</h2>
-
-            <p-card>
-              <h3 class="mb-2">
-                {{ 'settings.addons.form.fields.accountName' | translate }}
-              </h3>
-
-              <input
-                [ngModel]="chosenAccountName()"
-                name="accountName"
-                pInputText
-                (ngModelChange)="chosenAccountName.set($event)"
-              />
-            </p-card>
-
-            <div class="folders-table flex flex-column">
-              <div class="folders-table-heading flex justify-content-between">
-                <h3>Folder Name</h3>
-                <h3>Select</h3>
-              </div>
-
-              @if (!operationInvocation()?.operationResult?.length) {
-                <p class="text-center">
-                  {{ 'settings.addons.configureAddon.noFolders' | translate }}
-                </p>
-              } @else {
-                @for (folder of operationInvocation()?.operationResult; track folder.itemId) {
-                  @if (folder.canBeRoot) {
-                    <div class="folders-table-row">
-                      <div class="flex gap-2 flex-1">
-                        @if (folder.itemId !== '/') {
-                          <i tabindex="0" class="osf-icon-arrow-left"></i>
-                        }
-                        <div tabindex="0" class="cursor-pointer flex gap-2">
-                          <i class="osf-icon-folder"></i>
-                          {{ folder.itemName }}
-                        </div>
-
-                        <p-radiobutton
-                          class="ml-auto pr-3"
-                          [ngModel]="chosenRootFolderId()"
-                          [value]="folder.itemId"
-                          [inputId]="folder.itemId"
-                          (ngModelChange)="chosenRootFolderId.set($event)"
-                        ></p-radiobutton>
-                      </div>
-                    </div>
-                  }
-                }
-              }
-            </div>
-
-            <div class="flex gap-4 align-self-end">
-              <p-button
-                class="w-10rem btn-full-width"
-                [label]="'settings.addons.form.buttons.back' | translate"
-                severity="info"
-                [disabled]="isAddonConnecting()"
-                (onClick)="activateCallback(AddonStepperValue.CHOOSE_ACCOUNT)"
-              ></p-button>
-              <p-button
-                class="w-10rem btn-full-width"
-                [disabled]="!chosenRootFolderId()"
-                [loading]="isAddonConnecting()"
-                [label]="'common.buttons.save' | translate"
-                (click)="handleCreateConfiguredAddon()"
-              ></p-button>
-            </div>
+            <osf-folder-selector
+              [accountName]="chosenAccountName()"
+              [operationInvocationResult]="operationInvocation()?.operationResult || []"
+              [accountNameControl]="accountNameControl"
+              [isCreateMode]="true"
+              [(selectedRootFolderId)]="selectedRootFolderId"
+              (operationInvoke)="handleCreateOperationInvocation($event.operationName, $event.itemId)"
+              (save)="handleCreateConfiguredAddon()"
+              (cancelSelection)="activateCallback(AddonStepperValue.CHOOSE_ACCOUNT)"
+            />
           </section>
         </ng-template>
       </p-step-panel>
 
       <p-step-panel [value]="AddonStepperValue.SETUP_NEW_ACCOUNT">
         <ng-template #content let-activateCallback="activateCallback">
-          <form [formGroup]="addonForm" (ngSubmit)="handleCreateAuthorizedAddon()" class="flex flex-column gap-5">
+          <section class="flex flex-column gap-5">
             <h2>{{ 'settings.addons.connectAddon.setupNewAccount' | translate }}</h2>
-            <p-card>
-              @if (addon()?.credentialsFormat === credentialsFormat.ACCESS_SECRET_KEYS) {
-                <h2 class="mb-2">
-                  {{ 'settings.addons.form.fields.accessKey' | translate }}
-                </h2>
-                <input
-                  class="mb-5"
-                  pInputText
-                  [placeholder]="'settings.addons.form.fields.accessKey' | translate"
-                  [formControlName]="formControls.AccessKey"
-                />
-                <h2 class="mb-2">
-                  {{ 'settings.addons.form.fields.secretKey' | translate }}
-                </h2>
-                <input
-                  class="mb-5"
-                  pInputText
-                  [placeholder]="'settings.addons.form.fields.secretKey' | translate"
-                  [formControlName]="formControls.SecretKey"
-                />
-              }
 
-              @if (addon()?.credentialsFormat === credentialsFormat.DATAVERSE_API_TOKEN) {
-                <h2 class="mb-2">
-                  {{ 'settings.addons.form.fields.hostUrl' | translate }}
-                </h2>
-                <p class="mb-2">
-                  {{ 'settings.addons.form.fields.hostUrlDescription' | translate }}
-                </p>
-                <input class="mb-4" pInputText [formControlName]="formControls.HostUrl" />
-                <h2 class="mb-2">
-                  {{ 'settings.addons.form.fields.personalAccessToken' | translate }}
-                </h2>
-                <input
-                  class="mb-4"
-                  pInputText
-                  [placeholder]="'settings.addons.form.fields.personalAccessToken' | translate"
-                  [formControlName]="formControls.PersonalAccessToken"
-                />
-              }
-
-              @if (addon()?.credentialsFormat === credentialsFormat.USERNAME_PASSWORD) {
-                <h2 class="mb-2">
-                  {{ 'settings.addons.form.fields.hostUrl' | translate }}
-                </h2>
-                <p class="mb-2">
-                  {{ 'settings.addons.form.fields.hostUrlDescription' | translate }}
-                </p>
-                <input class="mb-4" pInputText [formControlName]="formControls.HostUrl" />
-                <h2 class="mb-2">
-                  {{ 'settings.addons.form.fields.username' | translate }}
-                </h2>
-                <input
-                  class="mb-4"
-                  pInputText
-                  [placeholder]="'settings.addons.form.fields.username' | translate"
-                  [formControlName]="formControls.Username"
-                />
-                <h2 class="mb-2">
-                  {{ 'settings.addons.form.fields.password' | translate }}
-                </h2>
-                <p class="mb-2">
-                  {{ 'settings.addons.form.fields.passwordDescription' | translate }}
-                </p>
-                <div class="mb-4">
-                  <p-password [feedback]="false" [toggleMask]="true" [formControlName]="formControls.Password" />
-                </div>
-              }
-
-              @if (addon()?.credentialsFormat === credentialsFormat.REPO_TOKEN) {
-                <h2 class="mb-2">
-                  {{ 'settings.addons.form.fields.accessKey' | translate }}
-                </h2>
-                <input
-                  class="mb-4"
-                  pInputText
-                  [placeholder]="'settings.addons.form.fields.accessKey' | translate"
-                  [formControlName]="formControls.AccessKey"
-                />
-                <h2 class="mb-2">
-                  {{ 'settings.addons.form.fields.secretKey' | translate }}
-                </h2>
-                <input
-                  class="mb-4"
-                  pInputText
-                  [placeholder]="'settings.addons.form.fields.secretKey' | translate"
-                  [formControlName]="formControls.SecretKey"
-                />
-              }
-
-              <h2 class="mb-2">
-                {{ 'settings.addons.form.fields.accountName' | translate }}
-              </h2>
-              <p class="mb-2">
-                {{ 'settings.addons.form.fields.accountNameDescription' | translate }}
-              </p>
-              <input pInputText [formControlName]="formControls.AccountName" />
-            </p-card>
-
-            <div class="flex gap-4 align-self-center md:align-self-end mt-3">
-              <p-button
-                [label]="'settings.addons.form.buttons.back' | translate"
-                severity="info"
-                class="w-10rem btn-full-width"
-                (onClick)="activateCallback(AddonStepperValue.TERMS)"
-                [disabled]="isAddonConnecting()"
-              ></p-button>
-
-              <p-button
-                class="w-10rem btn-full-width"
-                [label]="'settings.addons.form.buttons.authorize' | translate"
-                type="submit"
-                [disabled]="!addonForm.valid || !this.addonsUserReference().length || isAddonConnecting()"
-              ></p-button>
-            </div>
-          </form>
+            @if (addon() && userReferenceId() && addonTypeString()) {
+              <osf-addon-setup-account-form
+                [addon]="addon()!"
+                [userReferenceId]="userReferenceId()!"
+                [addonTypeString]="addonTypeString()"
+                [isSubmitting]="isCreatingAuthorizedAddon()"
+                (formSubmit)="handleCreateAuthorizedAddon($event)"
+                (backClick)="activateCallback(AddonStepperValue.TERMS)"
+              />
+            }
+          </section>
         </ng-template>
       </p-step-panel>
 
diff --git a/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.ts b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.ts
index ff3858362..30dbcaaf0 100644
--- a/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.ts
+++ b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.ts
@@ -3,34 +3,30 @@ import { createDispatchMap, select } from '@ngxs/store';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
-import { Card } from 'primeng/card';
-import { DialogService } from 'primeng/dynamicdialog';
-import { InputText } from 'primeng/inputtext';
-import { Password } from 'primeng/password';
+import { DialogModule } from 'primeng/dialog';
+import { DialogService, DynamicDialogModule } from 'primeng/dynamicdialog';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import { StepPanel, StepPanels, Stepper } from 'primeng/stepper';
 import { TableModule } from 'primeng/table';
 
-import { NgClass } from '@angular/common';
 import { Component, computed, inject, signal, viewChild } from '@angular/core';
-import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
-import { ConfirmAccountConnectionModalComponent } from '@osf/features/project/addons/components';
-import { AddonConfigMap } from '@osf/features/project/addons/utils';
+import { OperationNames } from '@osf/features/project/addons/enums';
+import { AddonConfigMap, RESOURCE_BASE_URI } from '@osf/features/project/addons/utils';
 import { SubHeaderComponent } from '@osf/shared/components';
-import { ADDON_TERMS as addonTerms } from '@osf/shared/constants';
-import { AddonFormControls, CredentialsFormat, ProjectAddonsStepperValue } from '@osf/shared/enums';
-import {
-  Addon,
-  AddonForm,
-  AddonTerm,
-  AuthorizedAddon,
-  AuthorizedAddonRequestJsonApi,
-  ConfiguredAddonRequestJsonApi,
-} from '@shared/models';
+import { ProjectAddonsStepperValue } from '@osf/shared/enums';
+import { AddonSetupAccountFormComponent } from '@shared/components/addons';
+import { AddonTermsComponent } from '@shared/components/addons/addon-terms/addon-terms.component';
+import { FolderSelectorComponent } from '@shared/components/addons/folder-selector/folder-selector.component';
+import { Addon, AddonTerm, AuthorizedAddon, AuthorizedAddonRequestJsonApi } from '@shared/models';
+import { AddonOperationInvocationService, ToastService } from '@shared/services';
+import { AddonDialogService } from '@shared/services/addons/addon-dialog.service';
+import { AddonFormService } from '@shared/services/addons/addon-form.service';
 import {
   AddonsSelectors,
+  CreateAddonOperationInvocation,
   CreateAuthorizedAddon,
   CreateConfiguredAddon,
   GetAuthorizedCitationAddons,
@@ -49,36 +45,39 @@ import {
     Button,
     TableModule,
     RouterLink,
-    NgClass,
-    Card,
     FormsModule,
     ReactiveFormsModule,
-    InputText,
-    Password,
     TranslatePipe,
     RadioButtonModule,
+    FolderSelectorComponent,
+    AddonTermsComponent,
+    AddonSetupAccountFormComponent,
+    DialogModule,
+    DynamicDialogModule,
   ],
   templateUrl: './connect-configured-addon.component.html',
-  providers: [RadioButtonModule, DialogService],
+  providers: [RadioButtonModule, DialogService, AddonDialogService],
   styleUrl: './connect-configured-addon.component.scss',
 })
 export class ConnectConfiguredAddonComponent {
   private translateService = inject(TranslateService);
-  private dialogService = inject(DialogService);
+  private toastService = inject(ToastService);
+  private addonDialogService = inject(AddonDialogService);
+  private addonFormService = inject(AddonFormService);
+  private operationInvocationService = inject(AddonOperationInvocationService);
   private router = inject(Router);
   private route = inject(ActivatedRoute);
-  private fb = inject(FormBuilder);
-  protected stepper = viewChild(Stepper);
-  protected AddonStepperValue = ProjectAddonsStepperValue;
-  protected credentialsFormat = CredentialsFormat;
-  protected formControls = AddonFormControls;
+  protected readonly resourceBaseUri = RESOURCE_BASE_URI;
+  protected readonly AddonStepperValue = ProjectAddonsStepperValue;
+  protected readonly stepper = viewChild(Stepper);
+  protected accountNameControl = new FormControl('');
   protected terms = signal<AddonTerm[]>([]);
   protected addon = signal<Addon | AuthorizedAddon | null>(null);
   protected addonAuthUrl = signal<string>('/settings/addons');
   protected currentAuthorizedAddonAccounts = signal<AuthorizedAddon[]>([]);
   protected chosenAccountId = signal('');
   protected chosenAccountName = signal('');
-  protected chosenRootFolderId = signal('');
+  protected selectedRootFolderId = signal('');
 
   protected addonsUserReference = select(AddonsSelectors.getAddonsUserReference);
   protected createdAuthorizedAddon = select(AddonsSelectors.getCreatedOrUpdatedAuthorizedAddon);
@@ -89,7 +88,7 @@ export class ConnectConfiguredAddonComponent {
 
   protected isAuthorizedStorageAddonsLoading = select(AddonsSelectors.getAuthorizedStorageAddonsLoading);
   protected isAuthorizedCitationAddonsLoading = select(AddonsSelectors.getAuthorizedCitationAddonsLoading);
-  protected isAddonConnecting = select(AddonsSelectors.getCreatedOrUpdatedConfiguredAddonSubmitting);
+  protected isCreatingAuthorizedAddon = select(AddonsSelectors.getCreatedOrUpdatedStorageAddonSubmitting);
 
   protected actions = createDispatchMap({
     getAuthorizedStorageAddons: GetAuthorizedStorageAddons,
@@ -98,6 +97,7 @@ export class ConnectConfiguredAddonComponent {
     createConfiguredAddon: CreateConfiguredAddon,
     updateConfiguredAddon: UpdateConfiguredAddon,
     updateAuthorizedAddon: UpdateAuthorizedAddon,
+    createAddonOperationInvocation: CreateAddonOperationInvocation,
   });
 
   protected readonly userReferenceId = computed(() => {
@@ -113,7 +113,7 @@ export class ConnectConfiguredAddonComponent {
   protected resourceUri = computed(() => {
     const id = this.route.parent?.parent?.snapshot.params['id'];
 
-    return `https://staging4.osf.io/${id}`;
+    return `${this.resourceBaseUri}${id}`;
   });
 
   protected addonTypeString = computed(() => {
@@ -128,7 +128,6 @@ export class ConnectConfiguredAddonComponent {
     }
     return '';
   });
-  protected addonForm: FormGroup<AddonForm>;
 
   protected readonly baseUrl = computed(() => {
     const currentUrl = this.router.url;
@@ -136,30 +135,45 @@ export class ConnectConfiguredAddonComponent {
   });
 
   constructor() {
-    const terms = this.getAddonTerms();
-    this.terms.set(terms);
-    this.addonForm = this.initializeForm();
+    const addon = this.router.getCurrentNavigation()?.extras.state?.['addon'] as Addon | AuthorizedAddon;
+    if (!addon) {
+      this.router.navigate([`${this.baseUrl()}/addons`]);
+    }
+    this.addon.set(addon);
   }
 
   protected handleCreateConfiguredAddon() {
-    if (!this.addon()) return;
-
-    const payload = this.generateConfiguredAddonRequestPayload();
+    const addon = this.addon();
+    const selectedAccount = this.currentAuthorizedAddonAccounts().find(
+      (account) => account.id === this.chosenAccountId()
+    );
+    if (!addon || !selectedAccount) return;
+
+    const payload = this.addonFormService.generateConfiguredAddonCreatePayload(
+      addon,
+      selectedAccount,
+      this.userReferenceId(),
+      this.resourceUri(),
+      this.accountNameControl.value || '',
+      this.selectedRootFolderId(),
+      this.addonTypeString()
+    );
 
     this.actions.createConfiguredAddon(payload, this.addonTypeString()).subscribe({
       complete: () => {
         const createdAddon = this.createdConfiguredAddon();
         if (createdAddon) {
           this.router.navigate([`${this.baseUrl()}/addons`]);
+          this.toastService.showSuccess('settings.addons.toast.createSuccess', {
+            addonName: addon.externalServiceName,
+          });
         }
       },
     });
   }
 
-  protected handleCreateAuthorizedAddon(): void {
-    if (!this.addon() || !this.addonForm.valid) return;
-
-    const payload = this.generateAuthorizedAddonRequestPayload();
+  protected handleCreateAuthorizedAddon(payload: AuthorizedAddonRequestJsonApi): void {
+    if (!this.addon()) return;
 
     this.actions.createAuthorizedAddon(payload, this.addonTypeString()).subscribe({
       complete: () => {
@@ -180,36 +194,47 @@ export class ConnectConfiguredAddonComponent {
 
     if (!selectedAccount) return;
 
-    const dialogRef = this.dialogService.open(ConfirmAccountConnectionModalComponent, {
-      focusOnShow: false,
-      header: this.translateService.instant('settings.addons.connectAddon.confirmAccount'),
-      closeOnEscape: true,
-      modal: true,
-      closable: true,
-      data: {
-        message: this.translateService.instant('settings.addons.connectAddon.connectAccount', {
-          accountName: selectedAccount.displayName,
-        }),
-        selectedAccount,
-      },
-    });
+    const dialogRef = this.addonDialogService.openConfirmAccountConnectionDialog(selectedAccount);
 
-    dialogRef.onClose.subscribe((result) => {
+    dialogRef.subscribe((result) => {
       if (result?.success) {
         this.stepper()?.value.set(ProjectAddonsStepperValue.CONFIGURE_ROOT_FOLDER);
         this.chosenAccountName.set(selectedAccount.displayName);
+        this.accountNameControl.setValue(selectedAccount.displayName);
       }
     });
   }
 
   protected handleAuthorizedAccountsPresenceCheck() {
+    const requiredData = this.getDataForAccountCheck();
+    if (!requiredData) return;
+
+    const { addonType, referenceId, currentAddon } = requiredData;
+    const addonConfig = this.getAddonConfig(addonType, referenceId);
+
+    if (!addonConfig) return;
+
+    addonConfig.getAddons().subscribe({
+      complete: () => {
+        this.processAuthorizedAddons(addonConfig, currentAddon);
+      },
+    });
+  }
+
+  private getDataForAccountCheck() {
     const addonType = this.addonTypeString();
     const referenceId = this.userReferenceId();
     const currentAddon = this.addon();
 
-    if (!addonType || !referenceId || !currentAddon) return;
+    if (!addonType || !referenceId || !currentAddon) {
+      return null;
+    }
+
+    return { addonType, referenceId, currentAddon };
+  }
 
-    const addonConfig: AddonConfigMap = {
+  private getAddonConfig(addonType: string, referenceId: string) {
+    const addonConfigMap: AddonConfigMap = {
       storage: {
         getAddons: () => this.actions.getAuthorizedStorageAddons(referenceId),
         getAuthorizedAddons: () => this.authorizedStorageAddons(),
@@ -220,217 +245,48 @@ export class ConnectConfiguredAddonComponent {
       },
     };
 
-    const selectedConfig = addonConfig[addonType];
-    if (!selectedConfig) return;
-
-    selectedConfig.getAddons().subscribe({
-      complete: () => {
-        const authorizedAddons = selectedConfig.getAuthorizedAddons();
-        const hasMatchingAddon = authorizedAddons.some(
-          (addon) => addon.externalServiceName === currentAddon.externalServiceName
-        );
-
-        if (hasMatchingAddon && authorizedAddons.length) {
-          const addonAccounts = authorizedAddons.filter(
-            (addon) => addon.externalServiceName === currentAddon.externalServiceName
-          );
-
-          this.currentAuthorizedAddonAccounts.set(addonAccounts);
-        }
-
-        const nextStep = hasMatchingAddon
-          ? ProjectAddonsStepperValue.CHOOSE_CONNECTION
-          : ProjectAddonsStepperValue.SETUP_NEW_ACCOUNT;
-
-        this.stepper()?.value.set(nextStep);
-      },
-    });
+    return addonConfigMap[addonType] || null;
   }
 
-  private initializeForm(): FormGroup<AddonForm> {
-    const currentAddon = this.addon();
+  private processAuthorizedAddons(
+    addonConfig: AddonConfigMap[keyof AddonConfigMap],
+    currentAddon: Addon | AuthorizedAddon
+  ) {
+    const authorizedAddons = addonConfig.getAuthorizedAddons();
+    const matchingAddons = this.findMatchingAddons(authorizedAddons, currentAddon);
 
-    if (currentAddon) {
-      const formControls: Partial<AddonForm> = {
-        [AddonFormControls.AccountName]: this.fb.control<string>(currentAddon.displayName || '', Validators.required),
-      };
-
-      switch (currentAddon.credentialsFormat) {
-        case CredentialsFormat.ACCESS_SECRET_KEYS:
-          formControls[AddonFormControls.AccessKey] = this.fb.control<string>('', Validators.required);
-          formControls[AddonFormControls.SecretKey] = this.fb.control<string>('', Validators.required);
-          break;
-        case CredentialsFormat.DATAVERSE_API_TOKEN:
-          formControls[AddonFormControls.HostUrl] = this.fb.control<string>('', Validators.required);
-          formControls[AddonFormControls.PersonalAccessToken] = this.fb.control<string>('', Validators.required);
-          break;
-        case CredentialsFormat.USERNAME_PASSWORD:
-          formControls[AddonFormControls.HostUrl] = this.fb.control<string>('', Validators.required);
-          formControls[AddonFormControls.Username] = this.fb.control<string>('', Validators.required);
-          formControls[AddonFormControls.Password] = this.fb.control<string>('', Validators.required);
-          break;
-        case CredentialsFormat.REPO_TOKEN:
-          formControls[AddonFormControls.AccessKey] = this.fb.control<string>('', Validators.required);
-          formControls[AddonFormControls.SecretKey] = this.fb.control<string>('', Validators.required);
-          break;
-      }
-      return this.fb.group(formControls as AddonForm);
+    if (matchingAddons.length > 0) {
+      this.currentAuthorizedAddonAccounts.set(matchingAddons);
     }
 
-    return new FormGroup({} as AddonForm);
-  }
-
-  private generateAuthorizedAddonRequestPayload(): AuthorizedAddonRequestJsonApi {
-    const formValue = this.addonForm.value;
-    const currentAddon = this.addon()!;
-    const credentials: Record<string, unknown> = {};
-    const initiateOAuth =
-      currentAddon.credentialsFormat === CredentialsFormat.OAUTH2 ||
-      currentAddon.credentialsFormat === CredentialsFormat.OAUTH;
-
-    switch (currentAddon.credentialsFormat) {
-      case CredentialsFormat.ACCESS_SECRET_KEYS:
-        credentials['access_key'] = formValue[AddonFormControls.AccessKey];
-        credentials['secret_key'] = formValue[AddonFormControls.SecretKey];
-        break;
-      case CredentialsFormat.DATAVERSE_API_TOKEN:
-        credentials['personal_access_token'] = formValue[AddonFormControls.PersonalAccessToken];
-        break;
-      case CredentialsFormat.USERNAME_PASSWORD:
-        credentials['username'] = formValue[AddonFormControls.Username];
-        credentials['password'] = formValue[AddonFormControls.Password];
-        break;
-      case CredentialsFormat.REPO_TOKEN:
-        credentials['access_key'] = formValue[AddonFormControls.AccessKey];
-        credentials['secret_key'] = formValue[AddonFormControls.SecretKey];
-        break;
-    }
+    const nextStep =
+      matchingAddons.length > 0
+        ? ProjectAddonsStepperValue.CHOOSE_CONNECTION
+        : ProjectAddonsStepperValue.SETUP_NEW_ACCOUNT;
 
-    const requestPayload: AuthorizedAddonRequestJsonApi = {
-      data: {
-        id: currentAddon.id || '',
-        attributes: {
-          api_base_url: formValue[AddonFormControls.HostUrl] || '',
-          display_name: formValue[AddonFormControls.AccountName] || '',
-          authorized_capabilities: ['ACCESS', 'UPDATE'],
-          credentials,
-          initiate_oauth: initiateOAuth,
-          auth_url: null,
-          credentials_available: false,
-        },
-        relationships: {
-          account_owner: {
-            data: {
-              type: 'user-references',
-              id: this.addonsUserReference()[0].id || '',
-            },
-          },
-          ...this.getServiceRelationship(currentAddon),
-        },
-        type: `authorized-${this.addonTypeString()}-accounts`,
-      },
-    };
+    this.stepper()?.value.set(nextStep);
+  }
 
-    return requestPayload;
+  private findMatchingAddons(
+    authorizedAddons: AuthorizedAddon[],
+    currentAddon: Addon | AuthorizedAddon
+  ): AuthorizedAddon[] {
+    return authorizedAddons.filter((addon) => addon.externalServiceName === currentAddon.externalServiceName);
   }
 
-  private generateConfiguredAddonRequestPayload(): ConfiguredAddonRequestJsonApi {
-    const currentAddon = this.addon()!;
+  protected handleCreateOperationInvocation(operationName: OperationNames, itemId: string): void {
     const selectedAccount = this.currentAuthorizedAddonAccounts().find(
       (account) => account.id === this.chosenAccountId()
     );
 
-    const requestPayload: ConfiguredAddonRequestJsonApi = {
-      data: {
-        type: `configured-${this.addonTypeString()}-addons`,
-        attributes: {
-          authorized_resource_uri: this.resourceUri(),
-          display_name: selectedAccount!.displayName,
-          root_folder: this.chosenRootFolderId(),
-          connected_capabilities: ['UPDATE', 'ACCESS'],
-          connected_operation_names: ['list_child_items', 'list_root_items', 'get_item_info'],
-          external_service_name: currentAddon.externalServiceName,
-        },
-        relationships: {
-          account_owner: {
-            data: {
-              type: 'user-references',
-              id: this.addonsUserReference()[0].id || '',
-            },
-          },
-          base_account: {
-            data: {
-              type: 'authorized-storage-accounts',
-              id: selectedAccount!.id,
-            },
-          },
-          ...this.getServiceRelationship(currentAddon),
-        },
-      },
-    };
-
-    return requestPayload;
-  }
-
-  private getServiceRelationship(addon: Addon | AuthorizedAddon) {
-    const isAuthorizedAddon =
-      addon.type === 'authorized-storage-accounts' || addon.type === 'authorized-citation-accounts';
-    const addonId = isAuthorizedAddon ? (addon as AuthorizedAddon).externalStorageServiceId : (addon as Addon).id;
-    const addonType = this.addonTypeString();
-
-    return {
-      [`external_${addonType}_service`]: {
-        data: {
-          type: `external-${addonType}-services`,
-          id: addonId,
-        },
-      },
-    };
-  }
-
-  private getAddonTerms(): AddonTerm[] {
-    const addon = this.router.getCurrentNavigation()?.extras.state?.['addon'] as Addon | AuthorizedAddon;
-    if (!addon) {
-      this.router.navigate([`${this.baseUrl()}/addons`]);
-      return [];
-    }
+    if (!selectedAccount) return;
 
-    this.addon.set(addon);
-    const supportedFeatures = addon.supportedFeatures;
-    const provider = addon.providerName;
-    const isCitationService = addon.type === 'external-citation-services';
-
-    const relevantTerms = isCitationService ? addonTerms.filter((term) => term.citation) : addonTerms;
-
-    return relevantTerms.map((term) => {
-      const feature = term.supportedFeature;
-      const hasFeature = supportedFeatures.includes(feature);
-      const hasPartialFeature = supportedFeatures.includes(`${feature}_PARTIAL`);
-
-      let message: string;
-      let type: 'warning' | 'info' | 'danger';
-
-      if (isCitationService && term.citation) {
-        if (hasPartialFeature && term.citation.partial) {
-          message = term.citation.partial;
-          type = 'warning';
-        } else if (!hasFeature && term.citation.false) {
-          message = term.citation.false;
-          type = 'danger';
-        } else {
-          message = term.storage[hasFeature ? 'true' : 'false'];
-          type = hasFeature ? 'info' : 'danger';
-        }
-      } else {
-        message = term.storage[hasFeature ? 'true' : 'false'];
-        type = hasFeature ? 'info' : hasPartialFeature ? 'warning' : 'danger';
-      }
+    const payload = this.operationInvocationService.createInitialOperationInvocationPayload(
+      operationName,
+      selectedAccount,
+      itemId
+    );
 
-      return {
-        function: term.label,
-        status: message.replace(/{provider}/g, provider),
-        type,
-      };
-    });
+    this.actions.createAddonOperationInvocation(payload);
   }
 }
diff --git a/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.html b/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.html
index fe482900d..e665b6e3d 100644
--- a/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.html
+++ b/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.html
@@ -5,7 +5,7 @@
 </p>
 <p>
   {{ 'settings.addons.configureAddon.selectedFolder' | translate }}
-  <span class="font-bold">{{ selectedFolderName() }}</span>
+  <span class="font-bold">{{ selectedFolder()?.itemName }}</span>
 </p>
 <div class="flex pt-5 justify-content-between gap-3">
   <p-button
diff --git a/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.ts b/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.ts
index 056b83657..85b22b490 100644
--- a/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.ts
+++ b/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.ts
@@ -23,7 +23,7 @@ export class DisconnectAddonModalComponent {
   protected addon = this.dialogConfig.data.addon;
   protected dialogMessage = this.dialogConfig.data.message || '';
   protected isSubmitting = select(AddonsSelectors.getDeleteStorageAddonSubmitting);
-  protected selectedFolderName = select(AddonsSelectors.getSelectedFolderName);
+  protected selectedFolder = select(AddonsSelectors.getSelectedFolder);
 
   protected handleDisconnectAddonAccount(): void {
     if (!this.addon) return;
diff --git a/src/app/features/project/addons/services/index.ts b/src/app/features/project/addons/services/index.ts
new file mode 100644
index 000000000..a91f95a20
--- /dev/null
+++ b/src/app/features/project/addons/services/index.ts
@@ -0,0 +1,2 @@
+export * from '@shared/services/addons/addon-dialog.service';
+export * from '@shared/services/addons/addon-form.service';
diff --git a/src/app/features/project/addons/utils/index.ts b/src/app/features/project/addons/utils/index.ts
index 298c14eb3..4a5c04177 100644
--- a/src/app/features/project/addons/utils/index.ts
+++ b/src/app/features/project/addons/utils/index.ts
@@ -1 +1,2 @@
 export * from './addon-config-map.type';
+export * from './resource-base-uri.const';
diff --git a/src/app/features/project/addons/utils/resource-base-uri.const.ts b/src/app/features/project/addons/utils/resource-base-uri.const.ts
new file mode 100644
index 000000000..ea6a4263f
--- /dev/null
+++ b/src/app/features/project/addons/utils/resource-base-uri.const.ts
@@ -0,0 +1 @@
+export const RESOURCE_BASE_URI = 'https://staging4.osf.io/';
diff --git a/src/app/features/settings/addons/addons.component.ts b/src/app/features/settings/addons/addons.component.ts
index 123698939..0953648b9 100644
--- a/src/app/features/settings/addons/addons.component.ts
+++ b/src/app/features/settings/addons/addons.component.ts
@@ -137,14 +137,12 @@ export class AddonsComponent {
 
   constructor() {
     effect(() => {
-      // Only proceed if we have the current user
       if (this.currentUser()) {
         this.store.dispatch(GetAddonsUserReference);
       }
     });
 
     effect(() => {
-      // Only proceed if we have the current user
       if (this.currentUser() && this.userReferenceId()) {
         const action = this.currentAction();
         const addons = this.currentAddonsState();
diff --git a/src/app/features/settings/addons/components/connect-addon/connect-addon.component.html b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.html
index 100e075f2..fcd888820 100644
--- a/src/app/features/settings/addons/components/connect-addon/connect-addon.component.html
+++ b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.html
@@ -1,8 +1,8 @@
 <osf-sub-header [showButton]="false" [title]="'settings.addons.connectAddon.title' | translate" />
 <section class="stepper-container flex-column flex flex-1 p-5">
-  <p-stepper [value]="!isAuthorized() ? 1 : 2">
+  <p-stepper [value]="!isAuthorized() ? ProjectAddonsStepperValue.TERMS : ProjectAddonsStepperValue.SETUP_NEW_ACCOUNT">
     <p-step-panels>
-      <p-step-panel [value]="1">
+      <p-step-panel [value]="ProjectAddonsStepperValue.TERMS">
         <ng-template #content let-activateCallback="activateCallback">
           <section class="flex flex-column gap-2">
             <h2>
@@ -11,30 +11,7 @@ <h2>
             </h2>
 
             <div class="mt-4">
-              <p-table [value]="terms()" class="addon-table">
-                <ng-template pTemplate="header">
-                  <tr>
-                    <th>
-                      {{ 'settings.addons.connectAddon.table.function' | translate }}
-                    </th>
-                    <th>
-                      {{ 'settings.addons.connectAddon.table.status' | translate }}
-                    </th>
-                  </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-term>
-                  <tr
-                    [ngClass]="{
-                      'background-warning': term.type === 'warning',
-                      'background-success': term.type === 'info',
-                      'background-danger': term.type === 'danger',
-                    }"
-                  >
-                    <td>{{ term.function }}</td>
-                    <td>{{ term.status }}</td>
-                  </tr>
-                </ng-template>
-              </p-table>
+              <osf-addon-terms [addon]="addon()" />
             </div>
 
             <div class="flex flex-column gap-2 mt-4">
@@ -56,161 +33,30 @@ <h2>
               <p-button
                 [label]="'settings.addons.form.buttons.next' | translate"
                 class="w-10rem btn-full-width"
-                (onClick)="activateCallback(2)"
+                (onClick)="activateCallback(ProjectAddonsStepperValue.SETUP_NEW_ACCOUNT)"
               ></p-button>
             </div>
           </section>
         </ng-template>
       </p-step-panel>
 
-      <p-step-panel [value]="2">
+      <p-step-panel [value]="ProjectAddonsStepperValue.SETUP_NEW_ACCOUNT">
         <ng-template #content let-activateCallback="activateCallback">
-          <form [formGroup]="addonForm" (ngSubmit)="handleConnectStorageAddon()" class="flex flex-column gap-5">
-            <h2>
-              {{
-                isAuthorized()
-                  ? ('settings.addons.connectAddon.reconnectAccount' | translate)
-                  : ('settings.addons.connectAddon.setupNewAccount' | translate)
-              }}
-            </h2>
-            <p-card>
-              @if (addon()?.credentialsFormat === credentialsFormat.ACCESS_SECRET_KEYS) {
-                <h2 class="mb-2">
-                  {{ 'settings.addons.form.fields.accessKey' | translate }}
-                </h2>
-                <input
-                  class="mb-5"
-                  pInputText
-                  [placeholder]="'settings.addons.form.fields.accessKey' | translate"
-                  [formControlName]="formControls.AccessKey"
-                />
-                <h2 class="mb-2">
-                  {{ 'settings.addons.form.fields.secretKey' | translate }}
-                </h2>
-                <input
-                  class="mb-5"
-                  pInputText
-                  [placeholder]="'settings.addons.form.fields.secretKey' | translate"
-                  [formControlName]="formControls.SecretKey"
-                />
-              }
-
-              @if (addon()?.credentialsFormat === credentialsFormat.DATAVERSE_API_TOKEN) {
-                <h2 class="mb-2">
-                  {{ 'settings.addons.form.fields.hostUrl' | translate }}
-                </h2>
-                <p class="mb-2">
-                  {{ 'settings.addons.form.fields.hostUrlDescription' | translate }}
-                </p>
-                <input class="mb-4" pInputText [formControlName]="formControls.HostUrl" />
-                <h2 class="mb-2">
-                  {{ 'settings.addons.form.fields.personalAccessToken' | translate }}
-                </h2>
-                <input
-                  class="mb-4"
-                  pInputText
-                  [placeholder]="'settings.addons.form.fields.personalAccessToken' | translate"
-                  [formControlName]="formControls.PersonalAccessToken"
-                />
-              }
-
-              @if (addon()?.credentialsFormat === credentialsFormat.USERNAME_PASSWORD) {
-                <h2 class="mb-2">
-                  {{ 'settings.addons.form.fields.hostUrl' | translate }}
-                </h2>
-                <p class="mb-2">
-                  {{ 'settings.addons.form.fields.hostUrlDescription' | translate }}
-                </p>
-                <input class="mb-4" pInputText [formControlName]="formControls.HostUrl" />
-                <h2 class="mb-2">
-                  {{ 'settings.addons.form.fields.username' | translate }}
-                </h2>
-                <input
-                  class="mb-4"
-                  pInputText
-                  [placeholder]="'settings.addons.form.fields.username' | translate"
-                  [formControlName]="formControls.Username"
-                />
-                <h2 class="mb-2">
-                  {{ 'settings.addons.form.fields.password' | translate }}
-                </h2>
-                <p class="mb-2">
-                  {{ 'settings.addons.form.fields.passwordDescription' | translate }}
-                </p>
-                <div class="mb-4">
-                  <p-password [feedback]="false" [toggleMask]="true" [formControlName]="formControls.Password" />
-                </div>
-              }
-
-              @if (addon()?.credentialsFormat === credentialsFormat.REPO_TOKEN) {
-                <h2 class="mb-2">
-                  {{ 'settings.addons.form.fields.accessKey' | translate }}
-                </h2>
-                <input
-                  class="mb-4"
-                  pInputText
-                  [placeholder]="'settings.addons.form.fields.accessKey' | translate"
-                  [formControlName]="formControls.AccessKey"
-                />
-                <h2 class="mb-2">
-                  {{ 'settings.addons.form.fields.secretKey' | translate }}
-                </h2>
-                <input
-                  class="mb-4"
-                  pInputText
-                  [placeholder]="'settings.addons.form.fields.secretKey' | translate"
-                  [formControlName]="formControls.SecretKey"
-                />
-              }
-
-              <h2 class="mb-2">
-                {{ 'settings.addons.form.fields.accountName' | translate }}
-              </h2>
-              <p class="mb-2">
-                {{ 'settings.addons.form.fields.accountNameDescription' | translate }}
-              </p>
-              <input pInputText [formControlName]="formControls.AccountName" />
-            </p-card>
-
-            <div class="flex gap-4 align-self-center md:align-self-end mt-3">
-              @if (!isAuthorized()) {
-                <p-button
-                  [label]="'settings.addons.form.buttons.back' | translate"
-                  severity="info"
-                  class="w-10rem btn-full-width"
-                  (onClick)="activateCallback(1)"
-                  [disabled]="isConnecting()"
-                ></p-button>
-
-                <p-button
-                  class="w-10rem btn-full-width"
-                  [label]="'settings.addons.form.buttons.authorize' | translate"
-                  type="submit"
-                  [disabled]="!addonForm.valid || !this.userReference().length || isConnecting()"
-                ></p-button>
-              } @else {
-                <p-button
-                  [label]="'settings.addons.form.buttons.cancel' | translate"
-                  severity="info"
-                  class="w-10rem btn-full-width"
-                  routerLink="/settings/addons"
-                  [disabled]="isConnecting()"
-                ></p-button>
-
-                <p-button
-                  class="w-10rem btn-full-width"
-                  [label]="'settings.addons.form.buttons.reconnect' | translate"
-                  [link]="true"
-                  (onClick)="handleConnectStorageAddon()"
-                  [disabled]="!addonForm.valid || !this.userReference().length || isConnecting()"
-                ></p-button>
-              }
-            </div>
-          </form>
+          @if (addon() && userReferenceId() && addonTypeString()) {
+            <osf-addon-setup-account-form
+              [addon]="addon()!"
+              [userReferenceId]="userReferenceId()!"
+              [addonTypeString]="addonTypeString()"
+              [isSubmitting]="isCreatingAuthorizedAddon()"
+              [isAuthorized]="isAuthorized()"
+              (formSubmit)="handleConnectAuthorizedAddon($event)"
+              (backClick)="activateCallback(ProjectAddonsStepperValue.TERMS)"
+            />
+          }
         </ng-template>
       </p-step-panel>
 
-      <p-step-panel [value]="3">
+      <p-step-panel [value]="ProjectAddonsStepperValue.AUTH">
         <ng-template #content>
           <div class="flex flex-column gap-4">
             <div class="flex justify-content-between">
@@ -234,105 +80,6 @@ <h2 class="align-self-center inline-block">
           </div>
         </ng-template>
       </p-step-panel>
-      <!--TODO use this layout in the project settings later-->
-
-      <!--            <p-step-panel [value]="3">-->
-      <!--              <ng-template #content let-activateCallback="activateCallback">-->
-      <!--                <section class="flex flex-column gap-5">-->
-      <!--                  <h2>Configure Google Drive</h2>-->
-      <!--                  <ul class="flex flex-column gap-3 mt-2">-->
-      <!--                    <li-->
-      <!--                      class="flex cursor-pointer"-->
-      <!--                      (click)="radioConfig = 'lorem'"-->
-      <!--                      (keydown.enter)="radioConfig = 'lorem'"-->
-      <!--                      (keydown.space)="radioConfig = 'lorem'; $event.preventDefault()"-->
-      <!--                      tabindex="0"-->
-      <!--                      role="radio"-->
-      <!--                      [attr.aria-checked]="radioConfig === 'lorem'"-->
-      <!--                    >-->
-      <!--                      <p-radio-button-->
-      <!--                        name="lorem"-->
-      <!--                        value="lorem"-->
-      <!--                        [(ngModel)]="radioConfig"-->
-      <!--                        id="lorem1"-->
-      <!--                        (click)="$event.stopPropagation()"-->
-      <!--                      />-->
-      <!--                      <label for="lorem1" class="ml-2 radio-label">Lorem 1</label>-->
-      <!--                    </li>-->
-      <!--                    <li-->
-      <!--                      class="flex cursor-pointer"-->
-      <!--                      (click)="radioConfig = 'lorem2'"-->
-      <!--                      (keydown.enter)="radioConfig = 'lorem2'"-->
-      <!--                      (keydown.space)="radioConfig = 'lorem2'; $event.preventDefault()"-->
-      <!--                      tabindex="0"-->
-      <!--                      role="radio"-->
-      <!--                      [attr.aria-checked]="radioConfig === 'lorem2'"-->
-      <!--                    >-->
-      <!--                      <p-radio-button-->
-      <!--                        name="lorem2"-->
-      <!--                        value="lorem2"-->
-      <!--                        [(ngModel)]="radioConfig"-->
-      <!--                        id="lorem2"-->
-      <!--                        (click)="$event.stopPropagation()"-->
-      <!--                      />-->
-      <!--                      <label for="lorem2" class="ml-2 radio-label">Lorem 2</label>-->
-      <!--                    </li>-->
-      <!--                  </ul>-->
-      <!--                  <div class="flex gap-4 align-self-end mt-3">-->
-      <!--                    <p-button-->
-      <!--                      label="Back"-->
-      <!--                      severity="info"-->
-      <!--                      (onClick)="activateCallback(2)"-->
-      <!--                    ></p-button>-->
-      <!--                    <p-button-->
-      <!--                      [disabled]="!radioConfig"-->
-      <!--                      class="w-10rem btn-full-width"-->
-      <!--                      label="Next"-->
-      <!--                      (onClick)="activateCallback(4)"-->
-      <!--                    ></p-button>-->
-      <!--                  </div>-->
-      <!--                </section>-->
-      <!--              </ng-template>-->
-      <!--            </p-step-panel>-->
-
-      <!--            <p-step-panel [value]="4">-->
-      <!--              <ng-template #content let-activateCallback="activateCallback">-->
-      <!--                <section class="flex flex-column gap-5">-->
-      <!--                  <h2>Configure Google Drive</h2>-->
-
-      <!--                  <div class="folders-list overflow-hidden">-->
-      <!--                    @for (folder of folders; let i = $index; track i) {-->
-      <!--                      <div-->
-      <!--                        class="flex align-items-center p-3 cursor-pointer"-->
-      <!--                        (click)="toggleFolderSelection(folder)"-->
-      <!--                        (keydown.enter)="toggleFolderSelection(folder)"-->
-      <!--                        (keydown.space)="toggleFolderSelection(folder); $event.preventDefault()"-->
-      <!--                        tabindex="0"-->
-      <!--                        role="button"-->
-      <!--                      >-->
-      <!--                        <i class="osf-icon-folder mr-2"></i>-->
-      <!--                        <span>{{ folder.name }}</span>-->
-      <!--                        <p-checkbox class="ml-auto" [(ngModel)]="folder.selected" [binary]="true" (click)="$event.stopPropagation()"></p-checkbox>-->
-      <!--                      </div>-->
-      <!--                      <p-divider class="m-0"/>-->
-      <!--                    }-->
-      <!--                  </div>-->
-
-      <!--                  <div class="flex gap-4 align-self-end mt-3">-->
-      <!--                    <p-button-->
-      <!--                      label="Back"-->
-      <!--                      severity="info"-->
-      <!--                      (onClick)="activateCallback(3)"-->
-      <!--                    ></p-button>-->
-      <!--                    <p-button-->
-      <!--                      [disabled]="!selectedFolders().length"-->
-      <!--                      class="w-10rem btn-full-width"-->
-      <!--                      label="Next"-->
-      <!--                    ></p-button>-->
-      <!--                  </div>-->
-      <!--                </section>-->
-      <!--              </ng-template>-->
-      <!--            </p-step-panel>-->
     </p-step-panels>
   </p-stepper>
 </section>
diff --git a/src/app/features/settings/addons/components/connect-addon/connect-addon.component.ts b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.ts
index c965f9d53..84dec7d18 100644
--- a/src/app/features/settings/addons/components/connect-addon/connect-addon.component.ts
+++ b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.ts
@@ -1,23 +1,19 @@
-import { select, Store } from '@ngxs/store';
+import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
-import { Card } from 'primeng/card';
-import { InputText } from 'primeng/inputtext';
-import { Password } from 'primeng/password';
 import { StepPanel, StepPanels, Stepper } from 'primeng/stepper';
 import { TableModule } from 'primeng/table';
 
-import { NgClass } from '@angular/common';
 import { Component, computed, effect, inject, signal, viewChild } from '@angular/core';
-import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
 
 import { SubHeaderComponent } from '@osf/shared/components';
-import { ADDON_TERMS as addonTerms } from '@osf/shared/constants';
-import { AddonFormControls, CredentialsFormat } from '@osf/shared/enums';
-import { Addon, AddonForm, AddonTerm, AuthorizedAddon, AuthorizedAddonRequestJsonApi } from '@shared/models';
+import { ProjectAddonsStepperValue } from '@osf/shared/enums';
+import { AddonSetupAccountFormComponent, AddonTermsComponent } from '@shared/components/addons';
+import { Addon, AddonTerm, AuthorizedAddon, AuthorizedAddonRequestJsonApi } from '@shared/models';
 import { AddonsSelectors, CreateAuthorizedAddon, UpdateAuthorizedAddon } from '@shared/stores/addons';
 
 @Component({
@@ -30,31 +26,27 @@ import { AddonsSelectors, CreateAuthorizedAddon, UpdateAuthorizedAddon } from '@
     Button,
     TableModule,
     RouterLink,
-    NgClass,
-    Card,
     FormsModule,
     ReactiveFormsModule,
-    InputText,
-    Password,
     TranslatePipe,
+    AddonTermsComponent,
+    AddonSetupAccountFormComponent,
   ],
   templateUrl: './connect-addon.component.html',
   styleUrl: './connect-addon.component.scss',
 })
 export class ConnectAddonComponent {
-  protected readonly stepper = viewChild(Stepper);
   private router = inject(Router);
-  private store = inject(Store);
-  private fb = inject(FormBuilder);
-  protected credentialsFormat = CredentialsFormat;
+  protected readonly stepper = viewChild(Stepper);
+  protected readonly ProjectAddonsStepperValue = ProjectAddonsStepperValue;
   protected terms = signal<AddonTerm[]>([]);
   protected addon = signal<Addon | AuthorizedAddon | null>(null);
   protected addonAuthUrl = signal<string>('/settings/addons');
-  protected formControls = AddonFormControls;
-  protected userReference = select(AddonsSelectors.getAddonsUserReference);
+
+  protected addonsUserReference = select(AddonsSelectors.getAddonsUserReference);
   protected createdAddon = select(AddonsSelectors.getCreatedOrUpdatedAuthorizedAddon);
+  protected isCreatingAuthorizedAddon = select(AddonsSelectors.getCreatedOrUpdatedStorageAddonSubmitting);
   protected isAuthorized = computed(() => {
-    //check if the addon is already authorized
     const addon = this.addon();
     if (addon) {
       return addon.type === 'authorized-storage-accounts' || addon.type === 'authorized-citation-accounts';
@@ -62,7 +54,6 @@ export class ConnectAddonComponent {
     return false;
   });
   protected addonTypeString = computed(() => {
-    //get the addon type string based on the addon type property
     const addon = this.addon();
     if (addon) {
       return addon.type === 'external-storage-services' || addon.type === 'authorized-storage-accounts'
@@ -71,183 +62,49 @@ export class ConnectAddonComponent {
     }
     return '';
   });
-  protected addonForm: FormGroup<AddonForm>;
-  protected isConnecting = select(AddonsSelectors.getCreatedOrUpdatedStorageAddonSubmitting);
-
-  constructor() {
-    const terms = this.getTerms();
-    this.terms.set(terms);
-    this.addonForm = this.initializeForm();
-
-    effect(() => {
-      if (this.isAuthorized()) {
-        this.stepper()?.value.set(2); //if the addon is already authorized, we skip terms table page
-      }
-    });
-  }
-
-  handleConnectStorageAddon(): void {
-    if (!this.addon() || !this.addonForm.valid) return;
-
-    const request = this.generateRequestPayload();
-
-    this.store
-      .dispatch(
-        !this.isAuthorized()
-          ? new CreateAuthorizedAddon(request, this.addonTypeString())
-          : new UpdateAuthorizedAddon(request, this.addonTypeString(), this.addon()!.id)
-      )
-      .subscribe({
-        complete: () => {
-          const createdAddon = this.createdAddon();
-          if (createdAddon) {
-            this.addonAuthUrl.set(createdAddon.attributes.auth_url);
-            window.open(createdAddon.attributes.auth_url, '_blank');
-            this.stepper()?.value.set(3);
-          }
-        },
-      });
-  }
-
-  private initializeForm(): FormGroup<AddonForm> {
-    const addon = this.addon();
-
-    if (addon) {
-      const formControls: Partial<AddonForm> = {
-        [AddonFormControls.AccountName]: this.fb.control<string>(addon.displayName || '', Validators.required),
-      };
-
-      switch (addon.credentialsFormat) {
-        case CredentialsFormat.ACCESS_SECRET_KEYS:
-          formControls[AddonFormControls.AccessKey] = this.fb.control<string>('', Validators.required);
-          formControls[AddonFormControls.SecretKey] = this.fb.control<string>('', Validators.required);
-          break;
-        case CredentialsFormat.DATAVERSE_API_TOKEN:
-          formControls[AddonFormControls.HostUrl] = this.fb.control<string>('', Validators.required);
-          formControls[AddonFormControls.PersonalAccessToken] = this.fb.control<string>('', Validators.required);
-          break;
-        case CredentialsFormat.USERNAME_PASSWORD:
-          formControls[AddonFormControls.HostUrl] = this.fb.control<string>('', Validators.required);
-          formControls[AddonFormControls.Username] = this.fb.control<string>('', Validators.required);
-          formControls[AddonFormControls.Password] = this.fb.control<string>('', Validators.required);
-          break;
-        case CredentialsFormat.REPO_TOKEN:
-          formControls[AddonFormControls.AccessKey] = this.fb.control<string>('', Validators.required);
-          formControls[AddonFormControls.SecretKey] = this.fb.control<string>('', Validators.required);
-          break;
-      }
-      return this.fb.group(formControls as AddonForm);
-    }
-
-    return new FormGroup({} as AddonForm);
-  }
 
-  private generateRequestPayload(): AuthorizedAddonRequestJsonApi {
-    const formValue = this.addonForm.value;
-    const addon = this.addon()!;
-    const credentials: Record<string, unknown> = {};
-    const initiateOAuth =
-      addon.credentialsFormat === CredentialsFormat.OAUTH2 || addon.credentialsFormat === CredentialsFormat.OAUTH;
-
-    switch (addon.credentialsFormat) {
-      case CredentialsFormat.ACCESS_SECRET_KEYS:
-        credentials['access_key'] = formValue[AddonFormControls.AccessKey];
-        credentials['secret_key'] = formValue[AddonFormControls.SecretKey];
-        break;
-      case CredentialsFormat.DATAVERSE_API_TOKEN:
-        credentials['personal_access_token'] = formValue[AddonFormControls.PersonalAccessToken];
-        break;
-      case CredentialsFormat.USERNAME_PASSWORD:
-        credentials['username'] = formValue[AddonFormControls.Username];
-        credentials['password'] = formValue[AddonFormControls.Password];
-        break;
-      case CredentialsFormat.REPO_TOKEN:
-        credentials['access_key'] = formValue[AddonFormControls.AccessKey];
-        credentials['secret_key'] = formValue[AddonFormControls.SecretKey];
-        break;
-    }
-
-    const requestPayload: AuthorizedAddonRequestJsonApi = {
-      data: {
-        id: addon.id || '',
-        attributes: {
-          api_base_url: formValue[AddonFormControls.HostUrl] || '',
-          display_name: formValue[AddonFormControls.AccountName] || '',
-          authorized_capabilities: ['ACCESS', 'UPDATE'],
-          credentials,
-          initiate_oauth: initiateOAuth,
-          auth_url: null,
-          credentials_available: false,
-        },
-        relationships: {
-          account_owner: {
-            data: {
-              type: 'user-references',
-              id: this.userReference()[0].id || '',
-            },
-          },
-          ...this.getServiceRelationship(addon),
-        },
-        type: `authorized-${this.addonTypeString()}-accounts`,
-      },
-    };
-
-    return requestPayload;
-  }
+  protected actions = createDispatchMap({
+    createAuthorizedAddon: CreateAuthorizedAddon,
+    updateAuthorizedAddon: UpdateAuthorizedAddon,
+  });
 
-  private getServiceRelationship(addon: Addon | AuthorizedAddon) {
-    return {
-      [`external_${this.addonTypeString()}_service`]: {
-        data: {
-          type: `external-${this.addonTypeString()}-services`,
-          id: this.isAuthorized() ? (addon as AuthorizedAddon).externalStorageServiceId : (addon as Addon).id, //check if addon is already authorized and set relationship ID accordingly
-        },
-      },
-    };
-  }
+  protected readonly userReferenceId = computed(() => {
+    return this.addonsUserReference()[0]?.id;
+  });
+  protected readonly baseUrl = computed(() => {
+    const currentUrl = this.router.url;
+    return currentUrl.split('/addons')[0];
+  });
 
-  private getTerms(): AddonTerm[] {
+  constructor() {
     const addon = this.router.getCurrentNavigation()?.extras.state?.['addon'] as Addon | AuthorizedAddon;
     if (!addon) {
-      this.router.navigate(['/settings/addons']);
+      this.router.navigate([`${this.baseUrl()}/addons`]);
     }
-
     this.addon.set(addon);
-    const supportedFeatures = addon.supportedFeatures;
-    const provider = addon.providerName;
-    const isCitationService = addon.type === 'external-citation-services';
-
-    const relevantTerms = isCitationService ? addonTerms.filter((term) => term.citation) : addonTerms;
-
-    return relevantTerms.map((term) => {
-      const feature = term.supportedFeature;
-      const hasFeature = supportedFeatures.includes(feature);
-      const hasPartialFeature = supportedFeatures.includes(`${feature}_PARTIAL`);
 
-      let message: string;
-      let type: 'warning' | 'info' | 'danger';
-
-      if (isCitationService && term.citation) {
-        if (hasPartialFeature && term.citation.partial) {
-          message = term.citation.partial;
-          type = 'warning';
-        } else if (!hasFeature && term.citation.false) {
-          message = term.citation.false;
-          type = 'danger';
-        } else {
-          message = term.storage[hasFeature ? 'true' : 'false'];
-          type = hasFeature ? 'info' : 'danger';
-        }
-      } else {
-        message = term.storage[hasFeature ? 'true' : 'false'];
-        type = hasFeature ? 'info' : hasPartialFeature ? 'warning' : 'danger';
+    effect(() => {
+      if (this.isAuthorized()) {
+        this.stepper()?.value.set(ProjectAddonsStepperValue.SETUP_NEW_ACCOUNT); //if the addon is already authorized, we skip terms table page
       }
+    });
+  }
 
-      return {
-        function: term.label,
-        status: message.replace(/{provider}/g, provider),
-        type,
-      };
+  handleConnectAuthorizedAddon(payload: AuthorizedAddonRequestJsonApi): void {
+    if (!this.addon()) return;
+
+    (!this.isAuthorized()
+      ? this.actions.createAuthorizedAddon(payload, this.addonTypeString())
+      : this.actions.updateAuthorizedAddon(payload, this.addonTypeString(), this.addon()!.id)
+    ).subscribe({
+      complete: () => {
+        const createdAddon = this.createdAddon();
+        if (createdAddon) {
+          this.addonAuthUrl.set(createdAddon.attributes.auth_url);
+          window.open(createdAddon.attributes.auth_url, '_blank');
+          this.stepper()?.value.set(ProjectAddonsStepperValue.AUTH);
+        }
+      },
     });
   }
 }
diff --git a/src/app/shared/components/addons/addon-card-list/addon-card-list.component.html b/src/app/shared/components/addons/addon-card-list/addon-card-list.component.html
index 9470d7bba..3ee28fa2a 100644
--- a/src/app/shared/components/addons/addon-card-list/addon-card-list.component.html
+++ b/src/app/shared/components/addons/addon-card-list/addon-card-list.component.html
@@ -1,7 +1,7 @@
 <section class="grid">
   @if (cards().length) {
     @for (card of cards(); track card.id) {
-      <div class="col-6 lg:col-4">
+      <div class="col-12 sm:col-6 md:col-6 lg:col-4">
         <osf-addon-card [cardButtonLabel]="cardButtonLabel()" [card]="card" [showDangerButton]="showDangerButton()" />
       </div>
     }
diff --git a/src/app/shared/components/addons/addon-card/addon-card.component.html b/src/app/shared/components/addons/addon-card/addon-card.component.html
index dd56792f3..7a8e96dd0 100644
--- a/src/app/shared/components/addons/addon-card/addon-card.component.html
+++ b/src/app/shared/components/addons/addon-card/addon-card.component.html
@@ -1,12 +1,16 @@
-<div class="addon-card flex flex-1 gap-4 flex-column" [class.mobile]="isMobile()">
-  <div class="max-h-8rem">
+<div class="addon-card flex flex-1 gap-4 flex-column p-5" [class.mobile]="isMobile()">
+  <div class="max-h-8rem flex justify-content-center align-items-center">
     @if (card()!.externalServiceName) {
-      <img alt="Addon card image" [src]="'assets/images/addons/' + card()!.externalServiceName + '.svg'" />
+      <img
+        class="addon-image"
+        alt="Addon card image"
+        [src]="'assets/images/addons/' + card()!.externalServiceName + '.svg'"
+      />
     }
   </div>
 
   <div class="flex flex-column gap-3">
-    <h3>{{ card()?.displayName }}</h3>
+    <h3 class="text-center">{{ card()?.displayName }}</h3>
 
     <div class="flex justify-content-center align-items-center md:gap-5 md:mt-3 btn-container">
       @if (showDangerButton()) {
diff --git a/src/app/shared/components/addons/addon-setup-account-form/addon-setup-account-form.component.html b/src/app/shared/components/addons/addon-setup-account-form/addon-setup-account-form.component.html
new file mode 100644
index 000000000..670da525f
--- /dev/null
+++ b/src/app/shared/components/addons/addon-setup-account-form/addon-setup-account-form.component.html
@@ -0,0 +1,133 @@
+<form [formGroup]="addonForm()" (ngSubmit)="handleSubmit()" class="flex flex-column gap-5">
+  <p-card>
+    @if (isAccessSecretKeysFormat()) {
+      <h2 class="mb-2">
+        {{ 'settings.addons.form.fields.accessKey' | translate }}
+      </h2>
+      <input
+        class="mb-5"
+        pInputText
+        [placeholder]="'settings.addons.form.fields.accessKey' | translate"
+        [formControlName]="formControls.AccessKey"
+      />
+      <h2 class="mb-2">
+        {{ 'settings.addons.form.fields.secretKey' | translate }}
+      </h2>
+      <input
+        class="mb-5"
+        pInputText
+        [placeholder]="'settings.addons.form.fields.secretKey' | translate"
+        [formControlName]="formControls.SecretKey"
+      />
+    }
+
+    @if (isDataverseApiTokenFormat()) {
+      <h2 class="mb-2">
+        {{ 'settings.addons.form.fields.hostUrl' | translate }}
+      </h2>
+      <p class="mb-2">
+        {{ 'settings.addons.form.fields.hostUrlDescription' | translate }}
+      </p>
+      <input class="mb-4" pInputText [formControlName]="formControls.HostUrl" />
+      <h2 class="mb-2">
+        {{ 'settings.addons.form.fields.apiToken' | translate }}
+      </h2>
+      <input
+        class="mb-4"
+        pInputText
+        [placeholder]="'settings.addons.form.fields.apiToken' | translate"
+        [formControlName]="formControls.ApiToken"
+      />
+    }
+
+    @if (isUsernamePasswordFormat()) {
+      <h2 class="mb-2">
+        {{ 'settings.addons.form.fields.hostUrl' | translate }}
+      </h2>
+      <p class="mb-2">
+        {{ 'settings.addons.form.fields.hostUrlDescription' | translate }}
+      </p>
+      <input class="mb-4" pInputText [formControlName]="formControls.HostUrl" />
+      <h2 class="mb-2">
+        {{ 'settings.addons.form.fields.username' | translate }}
+      </h2>
+      <input
+        class="mb-4"
+        pInputText
+        [placeholder]="'settings.addons.form.fields.username' | translate"
+        [formControlName]="formControls.Username"
+      />
+      <h2 class="mb-2">
+        {{ 'settings.addons.form.fields.password' | translate }}
+      </h2>
+      <p class="mb-2">
+        {{ 'settings.addons.form.fields.passwordDescription' | translate }}
+      </p>
+      <div class="mb-4">
+        <p-password [feedback]="false" [toggleMask]="true" [formControlName]="formControls.Password" />
+      </div>
+    }
+
+    @if (isRepoTokenFormat()) {
+      <h2 class="mb-2">
+        {{ 'settings.addons.form.fields.hostUrl' | translate }}
+      </h2>
+      <p class="mb-2">
+        {{ 'settings.addons.form.fields.hostUrlDescription' | translate }}
+      </p>
+      <input class="mb-4" pInputText [formControlName]="formControls.HostUrl" />
+      <h2 class="mb-2">
+        {{ 'settings.addons.form.fields.personalAccessToken' | translate }}
+      </h2>
+      <input
+        class="mb-4"
+        pInputText
+        [placeholder]="'settings.addons.form.fields.personalAccessToken' | translate"
+        [formControlName]="formControls.PersonalAccessToken"
+      />
+    }
+
+    <h2 class="mb-2">
+      {{ 'settings.addons.form.fields.accountName' | translate }}
+    </h2>
+    <p class="mb-2">
+      {{ 'settings.addons.form.fields.accountNameDescription' | translate }}
+    </p>
+    <input pInputText [formControlName]="formControls.AccountName" />
+  </p-card>
+
+  <div class="flex gap-4 justify-content-end align-self-center md:align-self-end mt-3">
+    @if (!isAuthorized()) {
+      <p-button
+        [label]="'settings.addons.form.buttons.back' | translate"
+        severity="info"
+        class="w-10rem btn-full-width"
+        (onClick)="handleBack()"
+        [disabled]="isSubmitting()"
+      ></p-button>
+
+      <p-button
+        class="w-10rem btn-full-width"
+        [label]="'settings.addons.form.buttons.authorize' | translate"
+        type="submit"
+        [disabled]="!isFormValid() || isSubmitting()"
+        [loading]="isSubmitting()"
+      ></p-button>
+    } @else {
+      <p-button
+        [label]="'settings.addons.form.buttons.cancel' | translate"
+        severity="info"
+        class="w-10rem btn-full-width"
+        routerLink="/settings/addons"
+        [disabled]="isSubmitting()"
+      ></p-button>
+
+      <p-button
+        class="w-10rem btn-full-width"
+        [label]="'settings.addons.form.buttons.reconnect' | translate"
+        type="submit"
+        [disabled]="!isFormValid() || isSubmitting()"
+      ></p-button>
+    }
+  </div>
+</form>
diff --git a/src/app/shared/components/addons/addon-setup-account-form/addon-setup-account-form.component.scss b/src/app/shared/components/addons/addon-setup-account-form/addon-setup-account-form.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/shared/components/addons/addon-setup-account-form/addon-setup-account-form.component.ts b/src/app/shared/components/addons/addon-setup-account-form/addon-setup-account-form.component.ts
new file mode 100644
index 000000000..980aa140f
--- /dev/null
+++ b/src/app/shared/components/addons/addon-setup-account-form/addon-setup-account-form.component.ts
@@ -0,0 +1,82 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { Card } from 'primeng/card';
+import { InputText } from 'primeng/inputtext';
+import { Password } from 'primeng/password';
+
+import { Component, computed, inject, input, output } from '@angular/core';
+import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterLink } from '@angular/router';
+
+import { AddonFormControls, CredentialsFormat } from '@shared/enums';
+import { Addon, AddonForm, AuthorizedAddon, AuthorizedAddonRequestJsonApi } from '@shared/models';
+import { AddonFormService } from '@shared/services/addons/addon-form.service';
+
+@Component({
+  selector: 'osf-addon-setup-account-form',
+  imports: [Card, FormsModule, ReactiveFormsModule, InputText, Password, TranslatePipe, Button, RouterLink],
+  templateUrl: './addon-setup-account-form.component.html',
+  styleUrl: './addon-setup-account-form.component.scss',
+})
+export class AddonSetupAccountFormComponent {
+  private addonFormService = inject(AddonFormService);
+
+  addon = input.required<Addon | AuthorizedAddon>();
+  userReferenceId = input.required<string>();
+  addonTypeString = input.required<string>();
+  isSubmitting = input<boolean>(false);
+  isAuthorized = input<boolean>(false);
+
+  readonly formSubmit = output<AuthorizedAddonRequestJsonApi>();
+  readonly backClick = output<void>();
+
+  protected readonly formControls = AddonFormControls;
+
+  protected readonly addonForm = computed<FormGroup<AddonForm>>(() => {
+    return this.addonFormService.initializeForm(this.addon());
+  });
+
+  protected readonly isFormValid = computed(() => {
+    return this.addonForm().valid;
+  });
+
+  protected readonly isAccessSecretKeysFormat = computed(() => {
+    return this.addon().credentialsFormat === CredentialsFormat.ACCESS_SECRET_KEYS;
+  });
+
+  protected readonly isDataverseApiTokenFormat = computed(() => {
+    return this.addon().credentialsFormat === CredentialsFormat.DATAVERSE_API_TOKEN;
+  });
+
+  protected readonly isUsernamePasswordFormat = computed(() => {
+    return this.addon().credentialsFormat === CredentialsFormat.USERNAME_PASSWORD;
+  });
+
+  protected readonly isRepoTokenFormat = computed(() => {
+    return this.addon().credentialsFormat === CredentialsFormat.REPO_TOKEN;
+  });
+
+  protected readonly isOAuthFormat = computed(() => {
+    const format = this.addon().credentialsFormat;
+    return format === CredentialsFormat.OAUTH2 || format === CredentialsFormat.OAUTH;
+  });
+
+  protected handleSubmit(): void {
+    if (!this.isFormValid()) return;
+
+    const formValue = this.addonForm().value;
+    const payload = this.addonFormService.generateAuthorizedAddonPayload(
+      formValue,
+      this.addon(),
+      this.userReferenceId(),
+      this.addonTypeString()
+    );
+
+    this.formSubmit.emit(payload);
+  }
+
+  protected handleBack(): void {
+    this.backClick.emit();
+  }
+}
diff --git a/src/app/shared/components/addons/addon-terms/addon-terms.component.html b/src/app/shared/components/addons/addon-terms/addon-terms.component.html
new file mode 100644
index 000000000..fb204c88f
--- /dev/null
+++ b/src/app/shared/components/addons/addon-terms/addon-terms.component.html
@@ -0,0 +1,24 @@
+<p-table [value]="terms()" class="addon-table">
+  <ng-template pTemplate="header">
+    <tr>
+      <th>
+        {{ 'settings.addons.connectAddon.table.function' | translate }}
+      </th>
+      <th>
+        {{ 'settings.addons.connectAddon.table.status' | translate }}
+      </th>
+    </tr>
+  </ng-template>
+  <ng-template pTemplate="body" let-term>
+    <tr
+      [ngClass]="{
+        'background-warning': term.type === 'warning',
+        'background-success': term.type === 'info',
+        'background-danger': term.type === 'danger',
+      }"
+    >
+      <td>{{ term.function }}</td>
+      <td>{{ term.status }}</td>
+    </tr>
+  </ng-template>
+</p-table>
diff --git a/src/app/shared/components/addons/addon-terms/addon-terms.component.scss b/src/app/shared/components/addons/addon-terms/addon-terms.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/shared/components/addons/addon-terms/addon-terms.component.ts b/src/app/shared/components/addons/addon-terms/addon-terms.component.ts
new file mode 100644
index 000000000..7b24a5412
--- /dev/null
+++ b/src/app/shared/components/addons/addon-terms/addon-terms.component.ts
@@ -0,0 +1,68 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { TableModule } from 'primeng/table';
+
+import { NgClass } from '@angular/common';
+import { Component, computed, inject, input } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { ADDON_TERMS as addonTerms } from '@shared/constants';
+import { Addon, AddonTerm, AuthorizedAddon } from '@shared/models';
+
+@Component({
+  selector: 'osf-addon-terms',
+  standalone: true,
+  imports: [TranslatePipe, TableModule, NgClass],
+  templateUrl: './addon-terms.component.html',
+  styleUrls: ['./addon-terms.component.scss'],
+})
+export class AddonTermsComponent {
+  private router = inject(Router);
+  addon = input<Addon | AuthorizedAddon | null>(null);
+  protected terms = computed(() => {
+    const addon = this.addon();
+    if (!addon) {
+      return [];
+    }
+    return this.getAddonTerms(addon);
+  });
+
+  private getAddonTerms(addon: Addon | AuthorizedAddon): AddonTerm[] {
+    const supportedFeatures = addon.supportedFeatures;
+    const provider = addon.providerName;
+    const isCitationService = addon.type === 'external-citation-services';
+
+    const relevantTerms = isCitationService ? addonTerms.filter((term) => term.citation) : addonTerms;
+
+    return relevantTerms.map((term) => {
+      const feature = term.supportedFeature;
+      const hasFeature = supportedFeatures.includes(feature);
+      const hasPartialFeature = supportedFeatures.includes(`${feature}_PARTIAL`);
+
+      let message: string;
+      let type: 'warning' | 'info' | 'danger';
+
+      if (isCitationService && term.citation) {
+        if (hasPartialFeature && term.citation.partial) {
+          message = term.citation.partial;
+          type = 'warning';
+        } else if (!hasFeature && term.citation.false) {
+          message = term.citation.false;
+          type = 'danger';
+        } else {
+          message = term.storage[hasFeature ? 'true' : 'false'];
+          type = hasFeature ? 'info' : 'danger';
+        }
+      } else {
+        message = term.storage[hasFeature ? 'true' : 'false'];
+        type = hasFeature ? 'info' : hasPartialFeature ? 'warning' : 'danger';
+      }
+
+      return {
+        function: term.label,
+        status: message.replace(/{provider}/g, provider),
+        type,
+      };
+    });
+  }
+}
diff --git a/src/app/shared/components/addons/folder-selector/folder-selector.component.html b/src/app/shared/components/addons/folder-selector/folder-selector.component.html
new file mode 100644
index 000000000..337e2035f
--- /dev/null
+++ b/src/app/shared/components/addons/folder-selector/folder-selector.component.html
@@ -0,0 +1,110 @@
+<section class="flex flex-column gap-4">
+  <div>
+    <p-breadcrumb
+      class="max-w-full folders-breadcrumbs"
+      [model]="breadcrumbItems()"
+      [home]="homeBreadcrumb"
+      (onItemClick)="handleCreateOperationInvocation($event.item.state?.['operationName']!, $event.item.id!)"
+    >
+      <ng-template #item let-item>
+        <a
+          class="cursor-pointer"
+          tabindex="0"
+          (click)="handleCreateOperationInvocation(item.state.operationName, item.id)"
+          (keydown.enter)="handleCreateOperationInvocation(item.state.operationName, item.id)"
+          >{{ item.label }}</a
+        >
+      </ng-template>
+    </p-breadcrumb>
+    <p-card>
+      <p>
+        {{ 'settings.addons.configureAddon.selectedFolder' | translate }}
+        <span class="font-bold">{{
+          selectedRootFolder()?.itemName || 'settings.addons.configureAddon.noFolderSelected' | translate
+        }}</span>
+      </p>
+      <h3 class="mt-4 mb-2">
+        {{ 'settings.addons.form.fields.accountName' | translate }}
+      </h3>
+
+      <input [formControl]="accountNameControl()" name="accountName" pInputText />
+    </p-card>
+  </div>
+
+  @if (isOperationInvocationSubmitting()) {
+    <p-skeleton width="100%" height="7.5rem" borderRadius="16" />
+  } @else {
+    <div class="folders-table flex flex-column">
+      <div class="folders-table-heading flex justify-content-between">
+        <h3>Folder Name</h3>
+        <h3>Select</h3>
+      </div>
+      @if (operationInvocationResult().length) {
+        @for (folder of operationInvocationResult(); track folder.itemId) {
+          @let operationName =
+            folder.mayContainRootCandidates ? OperationNames.LIST_CHILD_ITEMS : OperationNames.GET_ITEM_INFO;
+          @let itemId = folder.itemId || '/';
+          <div class="folders-table-row relative">
+            <div class="flex gap-2 flex-1">
+              <div tabindex="0" class="flex gap-2">
+                <i class="osf-icon-folder"></i>
+                <a
+                  tabindex="0"
+                  class="cursor-pointer folder-link"
+                  (keydown.enter)="
+                    handleCreateOperationInvocation(
+                      operationName,
+                      itemId,
+                      folder.itemName,
+                      folder.mayContainRootCandidates
+                    )
+                  "
+                  (click)="
+                    handleCreateOperationInvocation(
+                      operationName,
+                      itemId,
+                      folder.itemName,
+                      folder.mayContainRootCandidates
+                    )
+                  "
+                >
+                  {{ folder.itemName }}</a
+                >
+              </div>
+              @if (folder.canBeRoot) {
+                <p-radiobutton
+                  class="ml-auto pr-3"
+                  [ngModel]="selectedRootFolder()?.itemId"
+                  [value]="folder.itemId"
+                  [inputId]="folder.itemId"
+                  (ngModelChange)="handleFolderSelection(folder)"
+                ></p-radiobutton>
+              }
+            </div>
+          </div>
+        }
+      } @else {
+        <div class="flex justify-content-center py-4">
+          <p>{{ 'settings.addons.configureAddon.noFolders' | translate }}</p>
+        </div>
+      }
+    </div>
+  }
+
+  <div class="flex gap-4 justify-content-between sm:align-self-end">
+    <p-button
+      class="btn-full-width sm:w-10rem"
+      [label]="'settings.addons.form.buttons.cancel' | translate"
+      severity="info"
+      [disabled]="isSubmitting()"
+      (click)="handleCancel()"
+    ></p-button>
+    <p-button
+      class="btn-full-width sm:w-10rem"
+      [disabled]="!isFormValid()"
+      [loading]="isSubmitting()"
+      [label]="'common.buttons.save' | translate"
+      (click)="handleSave()"
+    ></p-button>
+  </div>
+</section>
diff --git a/src/assets/styles/components/addons.scss b/src/app/shared/components/addons/folder-selector/folder-selector.component.scss
similarity index 93%
rename from src/assets/styles/components/addons.scss
rename to src/app/shared/components/addons/folder-selector/folder-selector.component.scss
index d39e5cd83..f00b807e7 100644
--- a/src/assets/styles/components/addons.scss
+++ b/src/app/shared/components/addons/folder-selector/folder-selector.component.scss
@@ -1,10 +1,6 @@
 @use "assets/styles/mixins" as mix;
 @use "assets/styles/variables" as var;
 
-.p-breadcrumb {
-  padding: 0 0 mix.rem(16px) 0;
-}
-
 .folders-table {
   min-width: 100%;
   border-radius: mix.rem(8px);
@@ -27,6 +23,10 @@
     padding: 0 mix.rem(27px);
     min-width: max-content;
 
+    .folder-link {
+      color: var.$dark-blue-1;
+    }
+
     .table-cell {
       width: 100%;
       height: 100%;
diff --git a/src/app/shared/components/addons/folder-selector/folder-selector.component.ts b/src/app/shared/components/addons/folder-selector/folder-selector.component.ts
new file mode 100644
index 000000000..c06ba92bc
--- /dev/null
+++ b/src/app/shared/components/addons/folder-selector/folder-selector.component.ts
@@ -0,0 +1,150 @@
+import { select } from '@ngxs/store';
+
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+
+import { MenuItem } from 'primeng/api';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+import { Button } from 'primeng/button';
+import { Card } from 'primeng/card';
+import { InputText } from 'primeng/inputtext';
+import { RadioButton } from 'primeng/radiobutton';
+import { Skeleton } from 'primeng/skeleton';
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  inject,
+  input,
+  model,
+  OnInit,
+  output,
+  signal,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { OperationNames } from '@osf/features/project/addons/enums';
+import { OperationInvokeData, StorageItem } from '@shared/models';
+import { AddonsSelectors } from '@shared/stores/addons';
+
+@Component({
+  selector: 'osf-folder-selector',
+  templateUrl: './folder-selector.component.html',
+  styleUrl: './folder-selector.component.scss',
+  imports: [
+    TranslatePipe,
+    Button,
+    Card,
+    InputText,
+    RadioButton,
+    ReactiveFormsModule,
+    Skeleton,
+    BreadcrumbModule,
+    FormsModule,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FolderSelectorComponent implements OnInit {
+  private destroyRef = inject(DestroyRef);
+  private translateService = inject(TranslateService);
+  accountName = input.required<string>();
+  operationInvocationResult = input.required<StorageItem[]>();
+  accountNameControl = input(new FormControl());
+  isCreateMode = input(false);
+  selectedRootFolderId = model<string>('/');
+  operationInvoke = output<OperationInvokeData>();
+  save = output<void>();
+  cancelSelection = output<void>();
+  protected readonly OperationNames = OperationNames;
+  protected hasInputChanged = signal(false);
+  protected hasFolderChanged = signal(false);
+  protected selectedRootFolder = signal<StorageItem | null>(null);
+  protected breadcrumbItems = signal<MenuItem[]>([]);
+  protected initiallySelectedFolder = select(AddonsSelectors.getSelectedFolder);
+  protected isOperationInvocationSubmitting = select(AddonsSelectors.getOperationInvocationSubmitting);
+  protected isSubmitting = select(AddonsSelectors.getCreatedOrUpdatedConfiguredAddonSubmitting);
+  protected readonly homeBreadcrumb: MenuItem = {
+    id: '/',
+    label: this.translateService.instant('settings.addons.configureAddon.home'),
+    state: {
+      operationName: OperationNames.LIST_ROOT_ITEMS,
+    },
+  };
+
+  constructor() {
+    effect(() => {
+      const initialFolder = this.initiallySelectedFolder();
+      if (initialFolder && !this.selectedRootFolder()) {
+        this.selectedRootFolder.set(initialFolder);
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    this.accountNameControl()
+      ?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((newValue) => {
+        this.hasInputChanged.set(newValue !== this.accountName());
+      });
+  }
+
+  protected readonly isFormValid = computed(() => {
+    return this.isCreateMode() ? this.hasFolderChanged() : this.hasInputChanged() || this.hasFolderChanged();
+  });
+
+  protected handleCreateOperationInvocation(
+    operationName: OperationNames,
+    itemId: string,
+    itemName?: string,
+    mayContainRootCandidates?: boolean
+  ): void {
+    this.updateBreadcrumbs(operationName, itemId, itemName, mayContainRootCandidates);
+
+    this.operationInvoke.emit({
+      operationName,
+      itemId,
+    });
+  }
+
+  protected handleSave(): void {
+    this.selectedRootFolderId.set(this.selectedRootFolder()?.itemId || '');
+    this.save.emit();
+  }
+
+  protected handleCancel(): void {
+    this.cancelSelection.emit();
+  }
+
+  protected handleFolderSelection(folder: StorageItem): void {
+    this.selectedRootFolder.set(folder);
+    this.hasFolderChanged.set(folder?.itemId !== this.initiallySelectedFolder()?.itemId);
+  }
+
+  private updateBreadcrumbs(
+    operationName: OperationNames,
+    itemId: string,
+    itemName?: string,
+    mayContainRootCandidates?: boolean
+  ): void {
+    if (operationName === OperationNames.LIST_ROOT_ITEMS) {
+      this.breadcrumbItems.set([]);
+      return;
+    }
+
+    if (itemName && mayContainRootCandidates) {
+      const breadcrumbs = [...this.breadcrumbItems()];
+      const item = {
+        id: itemId,
+        label: itemName,
+        state: {
+          operationName: mayContainRootCandidates ? OperationNames.LIST_CHILD_ITEMS : OperationNames.GET_ITEM_INFO,
+        },
+      };
+
+      this.breadcrumbItems.set([...breadcrumbs, item]);
+    }
+  }
+}
diff --git a/src/app/shared/components/addons/index.ts b/src/app/shared/components/addons/index.ts
index dee6639df..4133f4b90 100644
--- a/src/app/shared/components/addons/index.ts
+++ b/src/app/shared/components/addons/index.ts
@@ -1,2 +1,5 @@
 export { AddonCardComponent } from '@shared/components/addons/addon-card/addon-card.component';
 export { AddonCardListComponent } from '@shared/components/addons/addon-card-list/addon-card-list.component';
+export { AddonSetupAccountFormComponent } from '@shared/components/addons/addon-setup-account-form/addon-setup-account-form.component';
+export { AddonTermsComponent } from '@shared/components/addons/addon-terms/addon-terms.component';
+export { FolderSelectorComponent } from '@shared/components/addons/folder-selector/folder-selector.component';
diff --git a/src/app/shared/enums/addon-form-controls.enum.ts b/src/app/shared/enums/addon-form-controls.enum.ts
index 1d00e83b2..4dbba35be 100644
--- a/src/app/shared/enums/addon-form-controls.enum.ts
+++ b/src/app/shared/enums/addon-form-controls.enum.ts
@@ -6,4 +6,5 @@ export enum AddonFormControls {
   Password = 'password',
   PersonalAccessToken = 'personalAccessToken',
   AccountName = 'accountName',
+  ApiToken = 'apiToken',
 }
diff --git a/src/app/shared/models/addons/addon-form.model.ts b/src/app/shared/models/addons/addon-form.model.ts
index 7b0c37cc7..f1a10564b 100644
--- a/src/app/shared/models/addons/addon-form.model.ts
+++ b/src/app/shared/models/addons/addon-form.model.ts
@@ -10,4 +10,5 @@ export interface AddonForm {
   [AddonFormControls.Password]?: FormControl<string | null>;
   [AddonFormControls.PersonalAccessToken]?: FormControl<string | null>;
   [AddonFormControls.AccountName]: FormControl<string | null>;
+  [AddonFormControls.ApiToken]?: FormControl<string | null>;
 }
diff --git a/src/app/shared/models/addons/index.ts b/src/app/shared/models/addons/index.ts
index 1ba8a3213..e2f3ceaa8 100644
--- a/src/app/shared/models/addons/index.ts
+++ b/src/app/shared/models/addons/index.ts
@@ -2,4 +2,5 @@ export * from './addon-form.model';
 export * from './addon-terms.model';
 export * from './addons.models';
 export * from './operation-invocation.models';
+export * from './operation-invoke-data.model';
 export * from './term.model';
diff --git a/src/app/shared/models/addons/operation-invoke-data.model.ts b/src/app/shared/models/addons/operation-invoke-data.model.ts
new file mode 100644
index 000000000..a5726c21a
--- /dev/null
+++ b/src/app/shared/models/addons/operation-invoke-data.model.ts
@@ -0,0 +1,6 @@
+import { OperationNames } from '@osf/features/project/addons/enums';
+
+export interface OperationInvokeData {
+  operationName: OperationNames;
+  itemId: string;
+}
diff --git a/src/app/shared/services/addons/addon-dialog.service.ts b/src/app/shared/services/addons/addon-dialog.service.ts
new file mode 100644
index 000000000..6acebdd28
--- /dev/null
+++ b/src/app/shared/services/addons/addon-dialog.service.ts
@@ -0,0 +1,55 @@
+import { TranslateService } from '@ngx-translate/core';
+
+import { DialogService } from 'primeng/dynamicdialog';
+
+import { Observable } from 'rxjs';
+
+import { inject, Injectable } from '@angular/core';
+
+import { ConfirmAccountConnectionModalComponent } from '@osf/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component';
+import { DisconnectAddonModalComponent } from '@osf/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component';
+import { AuthorizedAddon, ConfiguredAddon } from '@shared/models';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AddonDialogService {
+  private dialogService = inject(DialogService);
+  private translateService = inject(TranslateService);
+
+  openDisconnectDialog(addon: ConfiguredAddon): Observable<{ success: boolean }> {
+    const dialogRef = this.dialogService.open(DisconnectAddonModalComponent, {
+      focusOnShow: false,
+      header: this.translateService.instant('settings.addons.configureAddon.disconnect', {
+        addonName: addon.externalServiceName,
+      }),
+      closeOnEscape: true,
+      modal: true,
+      closable: true,
+      data: {
+        message: this.translateService.instant('settings.addons.configureAddon.disconnectMessage'),
+        addon,
+      },
+    });
+
+    return dialogRef.onClose;
+  }
+
+  openConfirmAccountConnectionDialog(selectedAccount: AuthorizedAddon): Observable<{ success: boolean }> {
+    const dialogRef = this.dialogService.open(ConfirmAccountConnectionModalComponent, {
+      focusOnShow: false,
+      header: this.translateService.instant('settings.addons.connectAddon.confirmAccount'),
+      closeOnEscape: true,
+      modal: true,
+      closable: true,
+      data: {
+        message: this.translateService.instant('settings.addons.connectAddon.connectAccount', {
+          accountName: selectedAccount.displayName,
+        }),
+        selectedAccount,
+      },
+    });
+
+    return dialogRef.onClose;
+  }
+}
diff --git a/src/app/shared/services/addons/addon-form.service.ts b/src/app/shared/services/addons/addon-form.service.ts
new file mode 100644
index 000000000..68f544160
--- /dev/null
+++ b/src/app/shared/services/addons/addon-form.service.ts
@@ -0,0 +1,202 @@
+import { inject, Injectable } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+import { AddonFormControls, CredentialsFormat } from '@shared/enums';
+import {
+  Addon,
+  AddonForm,
+  AuthorizedAddon,
+  AuthorizedAddonRequestJsonApi,
+  ConfiguredAddon,
+  ConfiguredAddonRequestJsonApi,
+} from '@shared/models';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AddonFormService {
+  protected formBuilder: FormBuilder = inject(FormBuilder);
+
+  initializeForm(addon: Addon | AuthorizedAddon): FormGroup<AddonForm> {
+    if (!addon) {
+      return new FormGroup({} as AddonForm);
+    }
+
+    const formControls: Partial<AddonForm> = {
+      [AddonFormControls.AccountName]: this.formBuilder.control<string>(addon.displayName || '', Validators.required),
+    };
+
+    switch (addon.credentialsFormat) {
+      case CredentialsFormat.ACCESS_SECRET_KEYS:
+        formControls[AddonFormControls.AccessKey] = this.formBuilder.control<string>('', Validators.required);
+        formControls[AddonFormControls.SecretKey] = this.formBuilder.control<string>('', Validators.required);
+        break;
+      case CredentialsFormat.DATAVERSE_API_TOKEN:
+        formControls[AddonFormControls.HostUrl] = this.formBuilder.control<string>('', Validators.required);
+        formControls[AddonFormControls.ApiToken] = this.formBuilder.control<string>('', Validators.required);
+        break;
+      case CredentialsFormat.USERNAME_PASSWORD:
+        formControls[AddonFormControls.HostUrl] = this.formBuilder.control<string>('', Validators.required);
+        formControls[AddonFormControls.Username] = this.formBuilder.control<string>('', Validators.required);
+        formControls[AddonFormControls.Password] = this.formBuilder.control<string>('', Validators.required);
+        break;
+      case CredentialsFormat.REPO_TOKEN:
+        formControls[AddonFormControls.HostUrl] = this.formBuilder.control<string>('', Validators.required);
+        formControls[AddonFormControls.PersonalAccessToken] = this.formBuilder.control<string>('', Validators.required);
+        break;
+    }
+    return this.formBuilder.group(formControls as AddonForm);
+  }
+
+  generateAuthorizedAddonPayload(
+    formValue: Record<string, unknown>,
+    addon: Addon | AuthorizedAddon,
+    userReferenceId: string,
+    addonTypeString: string
+  ): AuthorizedAddonRequestJsonApi {
+    const credentials: Record<string, unknown> = {};
+    const initiateOAuth =
+      addon.credentialsFormat === CredentialsFormat.OAUTH2 || addon.credentialsFormat === CredentialsFormat.OAUTH;
+
+    switch (addon.credentialsFormat) {
+      case CredentialsFormat.ACCESS_SECRET_KEYS:
+        credentials['access_key'] = formValue[AddonFormControls.AccessKey];
+        credentials['secret_key'] = formValue[AddonFormControls.SecretKey];
+        break;
+      case CredentialsFormat.DATAVERSE_API_TOKEN:
+        credentials['access_token'] = formValue[AddonFormControls.ApiToken];
+        break;
+      case CredentialsFormat.USERNAME_PASSWORD:
+        credentials['username'] = formValue[AddonFormControls.Username];
+        credentials['password'] = formValue[AddonFormControls.Password];
+        break;
+      case CredentialsFormat.REPO_TOKEN:
+        credentials['access_token'] = formValue[AddonFormControls.PersonalAccessToken];
+        break;
+    }
+
+    return {
+      data: {
+        id: addon.id || '',
+        attributes: {
+          api_base_url: (formValue[AddonFormControls.HostUrl] as string) || '',
+          display_name: (formValue[AddonFormControls.AccountName] as string) || '',
+          authorized_capabilities: ['ACCESS', 'UPDATE'],
+          credentials,
+          initiate_oauth: initiateOAuth,
+          auth_url: null,
+          credentials_available: false,
+        },
+        relationships: {
+          account_owner: {
+            data: {
+              type: 'user-references',
+              id: userReferenceId,
+            },
+          },
+          [`external_${addonTypeString}_service`]: {
+            data: {
+              type: `external-${addonTypeString}-services`,
+              id: this.getAddonServiceId(addon),
+            },
+          },
+        },
+        type: `authorized-${addonTypeString}-accounts`,
+      },
+    };
+  }
+
+  private getAddonServiceId(addon: Addon | AuthorizedAddon): string {
+    const isAuthorizedAddon =
+      addon.type === 'authorized-storage-accounts' || addon.type === 'authorized-citation-accounts';
+    return isAuthorizedAddon ? (addon as AuthorizedAddon).externalStorageServiceId : (addon as Addon).id;
+  }
+
+  generateConfiguredAddonCreatePayload(
+    addon: Addon | AuthorizedAddon,
+    selectedAccount: AuthorizedAddon,
+    userReferenceId: string,
+    resourceUri: string,
+    displayName: string,
+    rootFolderId: string,
+    addonTypeString: string
+  ): ConfiguredAddonRequestJsonApi {
+    return {
+      data: {
+        type: `configured-${addonTypeString}-addons`,
+        attributes: {
+          authorized_resource_uri: resourceUri,
+          display_name: displayName,
+          root_folder: rootFolderId,
+          connected_capabilities: ['UPDATE', 'ACCESS'],
+          connected_operation_names: ['list_child_items', 'list_root_items', 'get_item_info'],
+          external_service_name: addon.externalServiceName,
+        },
+        relationships: {
+          account_owner: {
+            data: {
+              type: 'user-references',
+              id: userReferenceId,
+            },
+          },
+          base_account: {
+            data: {
+              type: `authorized-${addonTypeString}-accounts`,
+              id: selectedAccount.id,
+            },
+          },
+          [`external_${addonTypeString}_service`]: {
+            data: {
+              type: `external-${addonTypeString}-services`,
+              id: selectedAccount.externalStorageServiceId,
+            },
+          },
+        },
+      },
+    };
+  }
+
+  generateConfiguredAddonUpdatePayload(
+    addon: ConfiguredAddon,
+    userReferenceId: string,
+    resourceUri: string,
+    displayName: string,
+    rootFolderId: string,
+    addonTypeString: string
+  ): ConfiguredAddonRequestJsonApi {
+    return {
+      data: {
+        id: addon.id,
+        type: `configured-${addonTypeString}-addons`,
+        attributes: {
+          authorized_resource_uri: resourceUri,
+          display_name: displayName,
+          root_folder: rootFolderId,
+          connected_capabilities: ['UPDATE', 'ACCESS'],
+          connected_operation_names: ['list_child_items', 'list_root_items', 'get_item_info'],
+          external_service_name: addon.externalServiceName,
+        },
+        relationships: {
+          account_owner: {
+            data: {
+              type: 'user-references',
+              id: userReferenceId,
+            },
+          },
+          base_account: {
+            data: {
+              type: addon.baseAccountType,
+              id: addon.baseAccountId,
+            },
+          },
+          [`external_${addonTypeString}_service`]: {
+            data: {
+              type: `external-${addonTypeString}-services`,
+              id: addon.externalServiceName,
+            },
+          },
+        },
+      },
+    };
+  }
+}
diff --git a/src/app/shared/services/addons/addon-operation-invocation.service.ts b/src/app/shared/services/addons/addon-operation-invocation.service.ts
new file mode 100644
index 000000000..e295ac956
--- /dev/null
+++ b/src/app/shared/services/addons/addon-operation-invocation.service.ts
@@ -0,0 +1,80 @@
+import { Injectable } from '@angular/core';
+
+import { OperationNames } from '@osf/features/project/addons/enums';
+import { AuthorizedAddon, ConfiguredAddon, OperationInvocationRequestJsonApi } from '@shared/models';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AddonOperationInvocationService {
+  createInitialOperationInvocationPayload(
+    operationName: OperationNames,
+    selectedAccount: AuthorizedAddon,
+    itemId?: string
+  ): OperationInvocationRequestJsonApi {
+    const operationKwargs = this.getOperationKwargs(operationName, itemId);
+
+    return {
+      data: {
+        type: 'addon-operation-invocations',
+        attributes: {
+          invocation_status: null,
+          operation_name: operationName,
+          operation_kwargs: operationKwargs,
+          operation_result: {},
+          created: null,
+          modified: null,
+        },
+        relationships: {
+          thru_account: {
+            data: {
+              type: selectedAccount.type,
+              id: selectedAccount.id,
+            },
+          },
+        },
+      },
+    };
+  }
+
+  createOperationInvocationPayload(
+    addon: ConfiguredAddon,
+    operationName: OperationNames,
+    itemId: string
+  ): OperationInvocationRequestJsonApi {
+    const operationKwargs = this.getOperationKwargs(operationName, itemId);
+
+    return {
+      data: {
+        type: 'addon-operation-invocations',
+        attributes: {
+          invocation_status: null,
+          operation_name: operationName,
+          operation_kwargs: operationKwargs,
+          operation_result: {},
+          created: null,
+          modified: null,
+        },
+        relationships: {
+          thru_addon: {
+            data: {
+              type: addon.type,
+              id: addon.id,
+            },
+          },
+        },
+      },
+    };
+  }
+
+  private getOperationKwargs(operationName: OperationNames, itemId?: string): Record<string, unknown> {
+    if (!itemId || operationName === OperationNames.LIST_ROOT_ITEMS) {
+      return {};
+    }
+
+    return {
+      item_id: itemId,
+      ...(operationName === OperationNames.LIST_CHILD_ITEMS && { item_type: 'FOLDER' }),
+    };
+  }
+}
diff --git a/src/app/shared/services/addons.service.ts b/src/app/shared/services/addons/addons.service.ts
similarity index 98%
rename from src/app/shared/services/addons.service.ts
rename to src/app/shared/services/addons/addons.service.ts
index 3cdf28aa9..25e9e91ee 100644
--- a/src/app/shared/services/addons.service.ts
+++ b/src/app/shared/services/addons/addons.service.ts
@@ -7,7 +7,7 @@ import { inject, Injectable } from '@angular/core';
 import { JsonApiResponse } from '@core/models';
 import { JsonApiService } from '@core/services';
 import { UserSelectors } from '@core/store/user';
-import { AddonMapper } from '@osf/shared/mappers';
+import { AddonMapper } from '@shared/mappers';
 import {
   Addon,
   AddonGetResponseJsonApi,
@@ -27,7 +27,7 @@ import {
 } from '@shared/models';
 import { OperationInvocationResponseJsonApi } from '@shared/models/addons/operation-invocation.models';
 
-import { environment } from '../../../environments/environment';
+import { environment } from '../../../../environments/environment';
 
 @Injectable({
   providedIn: 'root',
diff --git a/src/app/shared/services/addons/index.ts b/src/app/shared/services/addons/index.ts
new file mode 100644
index 000000000..2f53913ee
--- /dev/null
+++ b/src/app/shared/services/addons/index.ts
@@ -0,0 +1,4 @@
+export { AddonDialogService } from './addon-dialog.service';
+export { AddonFormService } from './addon-form.service';
+export { AddonOperationInvocationService } from './addon-operation-invocation.service';
+export { AddonsService } from './addons.service';
diff --git a/src/app/shared/services/index.ts b/src/app/shared/services/index.ts
index 6f2f69383..8ab235204 100644
--- a/src/app/shared/services/index.ts
+++ b/src/app/shared/services/index.ts
@@ -1,4 +1,4 @@
-export { AddonsService } from './addons.service';
+export * from './addons';
 export { FiltersOptionsService } from './filters-options.service';
 export { LoaderService } from './loader.service';
 export { ResourceCardService } from './resource-card.service';
diff --git a/src/app/shared/stores/addons/addons.actions.ts b/src/app/shared/stores/addons/addons.actions.ts
index 880db37c3..7b3915f2c 100644
--- a/src/app/shared/stores/addons/addons.actions.ts
+++ b/src/app/shared/stores/addons/addons.actions.ts
@@ -111,3 +111,7 @@ export class CreateAddonOperationInvocation {
 export class ClearConfiguredAddons {
   static readonly type = '[Addons] Clear Configured Addons';
 }
+
+export class ClearOperationInvocations {
+  static readonly type = '[Addons] Clear Operation Invocations';
+}
diff --git a/src/app/shared/stores/addons/addons.selectors.ts b/src/app/shared/stores/addons/addons.selectors.ts
index b86c9588a..98e85144b 100644
--- a/src/app/shared/stores/addons/addons.selectors.ts
+++ b/src/app/shared/stores/addons/addons.selectors.ts
@@ -8,6 +8,7 @@ import {
   ConfiguredAddonResponseJsonApi,
   OperationInvocation,
   ResourceReferenceJsonApi,
+  StorageItem,
   UserReferenceJsonApi,
 } from '@shared/models';
 
@@ -131,8 +132,8 @@ export class AddonsSelectors {
   }
 
   @Selector([AddonsState])
-  static getSelectedFolderName(state: AddonsStateModel): string {
-    return state.selectedFolderOperationInvocation.data?.operationResult[0].itemName || '';
+  static getSelectedFolder(state: AddonsStateModel): StorageItem | null {
+    return state.selectedFolderOperationInvocation.data?.operationResult[0] || null;
   }
 
   @Selector([AddonsState])
diff --git a/src/app/shared/stores/addons/addons.state.ts b/src/app/shared/stores/addons/addons.state.ts
index bbd072aea..4b763598e 100644
--- a/src/app/shared/stores/addons/addons.state.ts
+++ b/src/app/shared/stores/addons/addons.state.ts
@@ -8,6 +8,7 @@ import { AddonsService } from '@shared/services';
 
 import {
   ClearConfiguredAddons,
+  ClearOperationInvocations,
   CreateAddonOperationInvocation,
   CreateAuthorizedAddon,
   CreateConfiguredAddon,
@@ -546,6 +547,22 @@ export class AddonsState {
     });
   }
 
+  @Action(ClearOperationInvocations)
+  clearOperationInvocations(ctx: StateContext<AddonsStateModel>) {
+    ctx.patchState({
+      operationInvocation: {
+        data: null,
+        isLoading: false,
+        error: null,
+      },
+      selectedFolderOperationInvocation: {
+        data: null,
+        isLoading: false,
+        error: null,
+      },
+    });
+  }
+
   private handleError(ctx: StateContext<AddonsStateModel>, section: keyof AddonsStateModel, error: Error) {
     ctx.patchState({
       [section]: {
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 697b4ac76..023be3be6 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -914,9 +914,15 @@
         "additionalService": "Additional Storage",
         "citationManager": "Citation Manager"
       },
+      "toast": {
+        "updateSuccess": "Successfully updated {{addonName}} add-on configuration",
+        "createSuccess": "Successfully connected to the {{addonName}} add-on",
+        "disconnectSuccess": "Successfully disconnected from the {{addonName}} account"
+      },
       "configureAddon": {
         "title": "Configure Add-on",
         "noFolders": "No folders",
+        "noFolderSelected": "No selected folder",
         "disconnect": "Disconnect {{addonName}}",
         "disconnectMessage": "You are about to disconnect the following addon from the project:",
         "account": "Account:",
@@ -953,6 +959,7 @@
           "passwordDescription": "These credentials will be encrypted",
           "accessKey": "Access Key",
           "secretKey": "Secret Key",
+          "apiToken": "API Token",
           "accountName": "Account Name",
           "accountNameDescription": "This will distinguish your account from other using the same addon."
         },
diff --git a/src/assets/styles/overrides/breadcrumbs.scss b/src/assets/styles/overrides/breadcrumbs.scss
new file mode 100644
index 000000000..c9d5d4657
--- /dev/null
+++ b/src/assets/styles/overrides/breadcrumbs.scss
@@ -0,0 +1,12 @@
+@use "../variables" as var;
+@use "../mixins" as mix;
+
+.folders-breadcrumbs {
+  .p-breadcrumb {
+    padding: 0 0 mix.rem(20px) 0;
+  }
+
+  .p-breadcrumb-item > a {
+    color: var(--p-breadcrumb-item-color);
+  }
+}
diff --git a/src/assets/styles/styles.scss b/src/assets/styles/styles.scss
index d6d99d757..baaa78b89 100644
--- a/src/assets/styles/styles.scss
+++ b/src/assets/styles/styles.scss
@@ -38,5 +38,5 @@
 @use "./overrides/tooltip";
 @use "./overrides/toast";
 @use "./overrides/multiselect";
+@use "./overrides/breadcrumbs";
 @use "components/preprints";
-@use "components/addons";
diff --git a/src/main.ts b/src/main.ts
index bd61a1937..aa2406cc9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,4 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from '@osf/app.component';
 import { appConfig } from '@osf/app.config';
 
-bootstrapApplication(AppComponent, {
-  providers: [...appConfig.providers],
-}).catch((err) => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

From 4afb7a66786fa057db1e6f37617de2caf4672701 Mon Sep 17 00:00:00 2001
From: Roman Nastyuk <rnastyuk@exoft.net>
Date: Wed, 18 Jun 2025 17:02:45 +0300
Subject: [PATCH 07/18] feat(profile-addons-api): added breadcrumbs trimming

---
 .../addon-card/addon-card.component.html      | 42 +------------------
 .../addons/addon-card/addon-card.component.ts |  7 ++--
 .../folder-selector.component.ts              | 13 ++++++
 3 files changed, 17 insertions(+), 45 deletions(-)

diff --git a/src/app/shared/components/addons/addon-card/addon-card.component.html b/src/app/shared/components/addons/addon-card/addon-card.component.html
index 7a8e96dd0..95ba8ff0d 100644
--- a/src/app/shared/components/addons/addon-card/addon-card.component.html
+++ b/src/app/shared/components/addons/addon-card/addon-card.component.html
@@ -1,4 +1,4 @@
-<div class="addon-card flex flex-1 gap-4 flex-column p-5" [class.mobile]="isMobile()">
+<div class="addon-card flex flex-1 gap-4 flex-column p-5">
   <div class="max-h-8rem flex justify-content-center align-items-center">
     @if (card()!.externalServiceName) {
       <img
@@ -18,7 +18,6 @@ <h3 class="text-center">{{ card()?.displayName }}</h3>
           [label]="'settings.addons.form.buttons.disable' | translate"
           severity="danger"
           (onClick)="showDisableDialog()"
-          [ngClass]="isMobile() ? 'w-8rem btn-full-width' : ''"
         ></p-button>
       }
 
@@ -26,46 +25,7 @@ <h3 class="text-center">{{ card()?.displayName }}</h3>
         [label]="cardButtonLabel() || ('settings.addons.form.buttons.connect' | translate)"
         severity="secondary"
         (onClick)="!isConfiguredAddon() ? onConnectAddon() : onConfigureAddon()"
-        [ngClass]="isMobile() ? 'w-8rem btn-full-width' : ''"
       ></p-button>
     </div>
   </div>
 </div>
-
-<p-dialog
-  [visible]="isDialogVisible()"
-  [modal]="true"
-  [draggable]="false"
-  [resizable]="false"
-  [closable]="false"
-  [closeOnEscape]="!isDisabling()"
-  (onHide)="hideDialog()"
->
-  <ng-template pTemplate="header">
-    <div class="flex align-items-center justify-content-between w-full">
-      <span class="text-xl font-bold">
-        {{ 'settings.addons.messages.deleteConfirmation.title' | translate }}
-      </span>
-      <button type="button" class="p-dialog-header-icon" (click)="hideDialog()" [disabled]="isDisabling()">
-        <i class="osf-icon-close"></i>
-      </button>
-    </div>
-  </ng-template>
-  <p>
-    {{ 'settings.addons.messages.deleteConfirmation.message' | translate }}
-  </p>
-  <div class="flex justify-content-end gap-4 mt-5">
-    <p-button
-      [label]="'settings.addons.form.buttons.cancel' | translate"
-      severity="secondary"
-      (onClick)="hideDialog()"
-      [disabled]="isDisabling()"
-    ></p-button>
-    <p-button
-      [label]="'settings.addons.form.buttons.disable' | translate"
-      severity="danger"
-      (onClick)="onDisableAddon()"
-      [disabled]="isDisabling()"
-    ></p-button>
-  </div>
-</p-dialog>
diff --git a/src/app/shared/components/addons/addon-card/addon-card.component.ts b/src/app/shared/components/addons/addon-card/addon-card.component.ts
index 972037b53..28c9abe5f 100644
--- a/src/app/shared/components/addons/addon-card/addon-card.component.ts
+++ b/src/app/shared/components/addons/addon-card/addon-card.component.ts
@@ -5,17 +5,16 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { Button } from 'primeng/button';
 import { DialogModule } from 'primeng/dialog';
 
-import { NgClass } from '@angular/common';
 import { Component, computed, inject, input } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { CustomConfirmationService, LoaderService } from '@osf/shared/services';
-import { Addon, AuthorizedAddon } from '@shared/models';
+import { Addon, AuthorizedAddon, ConfiguredAddon } from '@shared/models';
 import { DeleteAuthorizedAddon } from '@shared/stores/addons';
 
 @Component({
   selector: 'osf-addon-card',
-  imports: [Button, NgClass, DialogModule, TranslatePipe],
+  imports: [Button, DialogModule, TranslatePipe],
   templateUrl: './addon-card.component.html',
   styleUrl: './addon-card.component.scss',
 })
@@ -25,7 +24,7 @@ export class AddonCardComponent {
   private readonly loaderService = inject(LoaderService);
   private readonly actions = createDispatchMap({ deleteAuthorizedAddon: DeleteAuthorizedAddon });
 
-  readonly card = input<Addon | AuthorizedAddon | null>(null);
+  readonly card = input<Addon | AuthorizedAddon | ConfiguredAddon | null>(null);
   readonly cardButtonLabel = input<string>('');
   readonly showDangerButton = input<boolean>(false);
 
diff --git a/src/app/shared/components/addons/folder-selector/folder-selector.component.ts b/src/app/shared/components/addons/folder-selector/folder-selector.component.ts
index c06ba92bc..bd415ffbf 100644
--- a/src/app/shared/components/addons/folder-selector/folder-selector.component.ts
+++ b/src/app/shared/components/addons/folder-selector/folder-selector.component.ts
@@ -107,6 +107,8 @@ export class FolderSelectorComponent implements OnInit {
       operationName,
       itemId,
     });
+
+    this.trimBreadcrumbs(itemId);
   }
 
   protected handleSave(): void {
@@ -147,4 +149,15 @@ export class FolderSelectorComponent implements OnInit {
       this.breadcrumbItems.set([...breadcrumbs, item]);
     }
   }
+
+  private trimBreadcrumbs(itemId: string): void {
+    const currentBreadcrumbs = this.breadcrumbItems();
+
+    const targetIndex = currentBreadcrumbs.findIndex((item) => item.id === itemId);
+
+    if (targetIndex !== -1) {
+      const trimmedBreadcrumbs = currentBreadcrumbs.slice(0, targetIndex + 1);
+      this.breadcrumbItems.set(trimmedBreadcrumbs);
+    }
+  }
 }

From 8c2189939e6427b88042b10e1a841160b529ddcc Mon Sep 17 00:00:00 2001
From: Roman Nastyuk <rnastyuk@exoft.net>
Date: Wed, 18 Jun 2025 21:27:38 +0300
Subject: [PATCH 08/18] feat(profile-addons-api): fixed comments

---
 src/app/app.routes.ts                         | 23 +-------
 .../project/addons/addons.component.html      |  4 +-
 .../project/addons/addons.component.ts        |  3 --
 .../configure-addon.component.html            |  9 ++--
 .../configure-addon.component.ts              | 13 ++---
 ...firm-account-connection-modal.component.ts |  9 ++--
 .../connect-configured-addon.component.html   |  2 +-
 .../connect-configured-addon.component.scss   | 18 -------
 .../connect-configured-addon.component.ts     | 31 +++++------
 .../disconnect-addon-modal.component.ts       |  8 +--
 .../project/addons/constants/addons.routes.ts | 20 +++++++
 .../features/project/addons/services/index.ts |  2 -
 .../features/project/addons/utils/index.ts    |  1 -
 .../addons/utils/resource-base-uri.const.ts   |  1 -
 .../account-settings.component.html           |  2 +-
 .../settings/addons/addons.component.html     | 52 +++++++++----------
 .../settings/addons/addons.component.ts       | 11 ++--
 .../connect-addon.component.html              |  2 +-
 .../connect-addon/connect-addon.component.ts  | 17 ++----
 .../notifications.component.html              |  2 +-
 .../profile-settings.component.html           |  2 +-
 .../addons/addon-card/addon-card.component.ts | 19 ++-----
 .../addon-terms/addon-terms.component.ts      |  7 ++-
 .../folder-selector.component.html            |  4 +-
 src/app/shared/mappers/addon.mapper.ts        |  7 +--
 .../addons/operation-invocation.models.ts     |  8 +--
 .../services/addons/addon-form.service.ts     |  5 +-
 .../shared/services/addons/addons.service.ts  | 39 +++++++-------
 src/app/shared/stores/addons/addons.state.ts  |  8 ---
 src/app/shared/utils/addon-type.helper.ts     | 39 ++++++++++++++
 src/app/shared/utils/index.ts                 |  1 +
 src/assets/i18n/en.json                       |  2 +
 src/environments/environment.development.ts   |  1 +
 src/environments/environment.ts               |  1 +
 34 files changed, 175 insertions(+), 198 deletions(-)
 create mode 100644 src/app/features/project/addons/constants/addons.routes.ts
 delete mode 100644 src/app/features/project/addons/services/index.ts
 delete mode 100644 src/app/features/project/addons/utils/resource-base-uri.const.ts
 create mode 100644 src/app/shared/utils/addon-type.helper.ts

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index d550377eb..683d06f2c 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -164,27 +164,8 @@ export const routes: Routes = [
           },
           {
             path: 'addons',
-            children: [
-              {
-                path: '',
-                loadComponent: () =>
-                  import('./features/project/addons/addons.component').then((mod) => mod.AddonsComponent),
-              },
-              {
-                path: 'connect-addon',
-                loadComponent: () =>
-                  import(
-                    '@osf/features/project/addons/components/connect-configured-addon/connect-configured-addon.component'
-                  ).then((mod) => mod.ConnectConfiguredAddonComponent),
-              },
-              {
-                path: 'configure-addon',
-                loadComponent: () =>
-                  import('@osf/features/project/addons/components/configure-addon/configure-addon.component').then(
-                    (mod) => mod.ConfigureAddonComponent
-                  ),
-              },
-            ],
+            loadChildren: () =>
+              import('./features/project/addons/constants/addons.routes').then((mod) => mod.addonsRoutes),
           },
         ],
       },
diff --git a/src/app/features/project/addons/addons.component.html b/src/app/features/project/addons/addons.component.html
index 36af5b43e..da53bf7f7 100644
--- a/src/app/features/project/addons/addons.component.html
+++ b/src/app/features/project/addons/addons.component.html
@@ -1,4 +1,4 @@
-<osf-sub-header [showButton]="false" [title]="'settings.addons.header.title' | translate" [icon]="'settings'" />
+<osf-sub-header [title]="'settings.addons.header.title' | translate" [icon]="'settings'" />
 <section class="flex-column flex flex-1">
   <p-tabs [value]="selectedTab()" class="flex flex-1">
     <p-tablist class="pr-5 pl-5 hidden md:flex md:flex-column">
@@ -10,7 +10,7 @@
       </p-tab>
     </p-tablist>
 
-    <p-tabpanels class="p-3 sm:p-5 flex-1">
+    <p-tabpanels class="flex-1 p-3 sm:p-5">
       <p-select
         class="w-full font-bold mb-4 md:hidden"
         [options]="tabOptions"
diff --git a/src/app/features/project/addons/addons.component.ts b/src/app/features/project/addons/addons.component.ts
index 568f18968..1c3504453 100644
--- a/src/app/features/project/addons/addons.component.ts
+++ b/src/app/features/project/addons/addons.component.ts
@@ -17,7 +17,6 @@ import {
   OnInit,
   signal,
 } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, FormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
@@ -37,7 +36,6 @@ import {
   GetConfiguredStorageAddons,
   GetStorageAddons,
 } from '@shared/stores/addons';
-import { IS_XSMALL } from '@shared/utils';
 
 @Component({
   selector: 'osf-addons',
@@ -62,7 +60,6 @@ import { IS_XSMALL } from '@shared/utils';
 export class AddonsComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private destroyRef = inject(DestroyRef);
-  protected isMobile = toSignal(inject(IS_XSMALL));
   protected readonly tabOptions = ADDON_TAB_OPTIONS;
   protected readonly categoryOptions = ADDON_CATEGORY_OPTIONS;
   protected readonly AddonTabValue = AddonTabValue;
diff --git a/src/app/features/project/addons/components/configure-addon/configure-addon.component.html b/src/app/features/project/addons/components/configure-addon/configure-addon.component.html
index ed08032ca..bf12fc308 100644
--- a/src/app/features/project/addons/components/configure-addon/configure-addon.component.html
+++ b/src/app/features/project/addons/components/configure-addon/configure-addon.component.html
@@ -1,4 +1,4 @@
-<osf-sub-header [showButton]="false" [title]="'settings.addons.configureAddon.title' | translate" />
+<osf-sub-header [title]="'settings.addons.configureAddon.title' | translate" />
 
 <section class="flex flex-column flex-1 bg-white h-full gap-4 p-3 md:p-5">
   @if (!isEditMode()) {
@@ -26,13 +26,14 @@ <h2 class="align-self-center inline-block">
               <div class="flex gap-2">
                 <p-button
                   icon="fas fa-pencil"
-                  severity="info"
+                  text
                   (click)="toggleEditMode()"
                   (keydown.enter)="toggleEditMode()"
                 ></p-button>
                 <p-button
-                  icon="fas fa-trash red-icon"
-                  severity="info"
+                  icon="fas fa-trash"
+                  severity="danger"
+                  text
                   (click)="handleDisconnectAccount()"
                   (keydown.enter)="handleDisconnectAccount()"
                 ></p-button>
diff --git a/src/app/features/project/addons/components/configure-addon/configure-addon.component.ts b/src/app/features/project/addons/components/configure-addon/configure-addon.component.ts
index 970348d83..0dc18af82 100644
--- a/src/app/features/project/addons/components/configure-addon/configure-addon.component.ts
+++ b/src/app/features/project/addons/components/configure-addon/configure-addon.component.ts
@@ -1,4 +1,4 @@
-import { createDispatchMap, select, Store } from '@ngxs/store';
+import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
@@ -32,6 +32,9 @@ import {
   CreateAddonOperationInvocation,
   UpdateConfiguredAddon,
 } from '@shared/stores/addons';
+import { getAddonTypeString } from '@shared/utils';
+
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'osf-configure-addon',
@@ -55,7 +58,6 @@ import {
 export class ConfigureAddonComponent implements OnInit {
   private router = inject(Router);
   private route = inject(ActivatedRoute);
-  private store = inject(Store);
   private destroyRef = inject(DestroyRef);
   private toastService = inject(ToastService);
   private addonDialogService = inject(AddonDialogService);
@@ -77,11 +79,10 @@ export class ConfigureAddonComponent implements OnInit {
   });
   protected readonly resourceUri = computed(() => {
     const id = this.route.parent?.parent?.snapshot.params['id'];
-    return `https://staging4.osf.io/${id}`;
+    return `${environment.baseResourceUri}${id}`;
   });
   protected readonly addonTypeString = computed(() => {
-    const addon = this.addon();
-    return addon?.type === 'configured-storage-addons' ? 'storage' : 'citation';
+    return getAddonTypeString(this.addon());
   });
   protected readonly actions = createDispatchMap({
     createAddonOperationInvocation: CreateAddonOperationInvocation,
@@ -169,7 +170,7 @@ export class ConfigureAddonComponent implements OnInit {
       this.addonTypeString()
     );
 
-    this.store.dispatch(new UpdateConfiguredAddon(payload, this.addonTypeString(), currentAddon.id)).subscribe({
+    this.actions.updateConfiguredAddon(payload, this.addonTypeString(), currentAddon.id).subscribe({
       complete: () => {
         this.router.navigate([`${this.baseUrl()}/addons`]);
         this.toastService.showSuccess('settings.addons.toast.updateSuccess', {
diff --git a/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.ts b/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.ts
index 15aaac51d..3ffeb0989 100644
--- a/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.ts
+++ b/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.ts
@@ -1,4 +1,4 @@
-import { select, Store } from '@ngxs/store';
+import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
@@ -21,12 +21,15 @@ import { AddonsSelectors, CreateAddonOperationInvocation } from '@shared/stores/
 })
 export class ConfirmAccountConnectionModalComponent {
   private dialogConfig = inject(DynamicDialogConfig);
-  private store = inject(Store);
   private operationInvocationService = inject(AddonOperationInvocationService);
   protected dialogRef = inject(DynamicDialogRef);
   protected dialogMessage = this.dialogConfig.data.message || '';
   protected isSubmitting = select(AddonsSelectors.getOperationInvocationSubmitting);
 
+  protected actions = createDispatchMap({
+    createAddonOperationInvocation: CreateAddonOperationInvocation,
+  });
+
   protected handleConnectAddonAccount(): void {
     const selectedAccount = this.dialogConfig.data.selectedAccount;
     if (!selectedAccount) return;
@@ -36,7 +39,7 @@ export class ConfirmAccountConnectionModalComponent {
       selectedAccount
     );
 
-    this.store.dispatch(new CreateAddonOperationInvocation(payload)).subscribe({
+    this.actions.createAddonOperationInvocation(payload).subscribe({
       complete: () => {
         this.dialogRef.close({ success: true });
       },
diff --git a/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.html b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.html
index 78da5b66b..e8ee1e556 100644
--- a/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.html
+++ b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.html
@@ -1,4 +1,4 @@
-<osf-sub-header [showButton]="false" [title]="'settings.addons.connectAddon.title' | translate" />
+<osf-sub-header [title]="'settings.addons.connectAddon.title' | translate" />
 <section class="stepper-container flex-column flex flex-1 p-5">
   <p-stepper [value]="AddonStepperValue.TERMS">
     <p-step-panels>
diff --git a/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.scss b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.scss
index 06b5e393e..bb28b1fd4 100644
--- a/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.scss
+++ b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.scss
@@ -8,23 +8,5 @@
   .stepper-container {
     background-color: var.$white;
     flex: 1;
-
-    button {
-      width: 100%;
-    }
-  }
-
-  .filename-link {
-    cursor: pointer;
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-    max-width: 100%;
-
-    &:hover {
-      text-decoration: underline;
-    }
   }
 }
diff --git a/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.ts b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.ts
index 30dbcaaf0..3718cf4cf 100644
--- a/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.ts
+++ b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.ts
@@ -14,16 +14,16 @@ import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 import { OperationNames } from '@osf/features/project/addons/enums';
-import { AddonConfigMap, RESOURCE_BASE_URI } from '@osf/features/project/addons/utils';
+import { AddonConfigMap } from '@osf/features/project/addons/utils';
 import { SubHeaderComponent } from '@osf/shared/components';
 import { ProjectAddonsStepperValue } from '@osf/shared/enums';
-import { AddonSetupAccountFormComponent } from '@shared/components/addons';
-import { AddonTermsComponent } from '@shared/components/addons/addon-terms/addon-terms.component';
-import { FolderSelectorComponent } from '@shared/components/addons/folder-selector/folder-selector.component';
+import {
+  AddonSetupAccountFormComponent,
+  AddonTermsComponent,
+  FolderSelectorComponent,
+} from '@shared/components/addons';
 import { Addon, AddonTerm, AuthorizedAddon, AuthorizedAddonRequestJsonApi } from '@shared/models';
-import { AddonOperationInvocationService, ToastService } from '@shared/services';
-import { AddonDialogService } from '@shared/services/addons/addon-dialog.service';
-import { AddonFormService } from '@shared/services/addons/addon-form.service';
+import { AddonDialogService, AddonFormService, AddonOperationInvocationService, ToastService } from '@shared/services';
 import {
   AddonsSelectors,
   CreateAddonOperationInvocation,
@@ -34,6 +34,9 @@ import {
   UpdateAuthorizedAddon,
   UpdateConfiguredAddon,
 } from '@shared/stores/addons';
+import { getAddonTypeString } from '@shared/utils';
+
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'osf-connect-configured-addon',
@@ -67,7 +70,6 @@ export class ConnectConfiguredAddonComponent {
   private operationInvocationService = inject(AddonOperationInvocationService);
   private router = inject(Router);
   private route = inject(ActivatedRoute);
-  protected readonly resourceBaseUri = RESOURCE_BASE_URI;
   protected readonly AddonStepperValue = ProjectAddonsStepperValue;
   protected readonly stepper = viewChild(Stepper);
   protected accountNameControl = new FormControl('');
@@ -113,20 +115,11 @@ export class ConnectConfiguredAddonComponent {
   protected resourceUri = computed(() => {
     const id = this.route.parent?.parent?.snapshot.params['id'];
 
-    return `${this.resourceBaseUri}${id}`;
+    return `${environment.baseResourceUri}${id}`;
   });
 
   protected addonTypeString = computed(() => {
-    const addon = this.addon();
-
-    if (addon) {
-      return addon.type === 'external-storage-services' ||
-        addon.type === 'authorized-storage-accounts' ||
-        addon.type === 'configured-storage-addons'
-        ? 'storage'
-        : 'citation';
-    }
-    return '';
+    return getAddonTypeString(this.addon());
   });
 
   protected readonly baseUrl = computed(() => {
diff --git a/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.ts b/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.ts
index 85b22b490..2821f7432 100644
--- a/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.ts
+++ b/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.ts
@@ -1,4 +1,4 @@
-import { select, Store } from '@ngxs/store';
+import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
@@ -18,17 +18,19 @@ import { AddonsSelectors, DeleteConfiguredAddon } from '@shared/stores/addons';
 })
 export class DisconnectAddonModalComponent {
   private dialogConfig = inject(DynamicDialogConfig);
-  private store = inject(Store);
   protected dialogRef = inject(DynamicDialogRef);
   protected addon = this.dialogConfig.data.addon;
   protected dialogMessage = this.dialogConfig.data.message || '';
   protected isSubmitting = select(AddonsSelectors.getDeleteStorageAddonSubmitting);
   protected selectedFolder = select(AddonsSelectors.getSelectedFolder);
+  protected actions = createDispatchMap({
+    deleteConfiguredAddon: DeleteConfiguredAddon,
+  });
 
   protected handleDisconnectAddonAccount(): void {
     if (!this.addon) return;
 
-    this.store.dispatch(new DeleteConfiguredAddon(this.addon.id, this.addon.type)).subscribe({
+    this.actions.deleteConfiguredAddon(this.addon.id, this.addon.type).subscribe({
       complete: () => {
         this.dialogRef.close({ success: true });
       },
diff --git a/src/app/features/project/addons/constants/addons.routes.ts b/src/app/features/project/addons/constants/addons.routes.ts
new file mode 100644
index 000000000..91ac68835
--- /dev/null
+++ b/src/app/features/project/addons/constants/addons.routes.ts
@@ -0,0 +1,20 @@
+import { Routes } from '@angular/router';
+
+export const addonsRoutes: Routes = [
+  {
+    path: '',
+    loadComponent: () => import('../addons.component').then((mod) => mod.AddonsComponent),
+  },
+  {
+    path: 'connect-addon',
+    loadComponent: () =>
+      import('../components/connect-configured-addon/connect-configured-addon.component').then(
+        (mod) => mod.ConnectConfiguredAddonComponent
+      ),
+  },
+  {
+    path: 'configure-addon',
+    loadComponent: () =>
+      import('../components/configure-addon/configure-addon.component').then((mod) => mod.ConfigureAddonComponent),
+  },
+];
diff --git a/src/app/features/project/addons/services/index.ts b/src/app/features/project/addons/services/index.ts
deleted file mode 100644
index a91f95a20..000000000
--- a/src/app/features/project/addons/services/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from '@shared/services/addons/addon-dialog.service';
-export * from '@shared/services/addons/addon-form.service';
diff --git a/src/app/features/project/addons/utils/index.ts b/src/app/features/project/addons/utils/index.ts
index 4a5c04177..298c14eb3 100644
--- a/src/app/features/project/addons/utils/index.ts
+++ b/src/app/features/project/addons/utils/index.ts
@@ -1,2 +1 @@
 export * from './addon-config-map.type';
-export * from './resource-base-uri.const';
diff --git a/src/app/features/project/addons/utils/resource-base-uri.const.ts b/src/app/features/project/addons/utils/resource-base-uri.const.ts
deleted file mode 100644
index ea6a4263f..000000000
--- a/src/app/features/project/addons/utils/resource-base-uri.const.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const RESOURCE_BASE_URI = 'https://staging4.osf.io/';
diff --git a/src/app/features/settings/account-settings/account-settings.component.html b/src/app/features/settings/account-settings/account-settings.component.html
index 5f49e314f..d08e74601 100644
--- a/src/app/features/settings/account-settings/account-settings.component.html
+++ b/src/app/features/settings/account-settings/account-settings.component.html
@@ -1,4 +1,4 @@
-<osf-sub-header [showButton]="false" [title]="'Account settings'" [icon]="'settings'" />
+<osf-sub-header [title]="'Account settings'" [icon]="'settings'" />
 
 @if (this.currentUser()?.id) {
   <section class="content">
diff --git a/src/app/features/settings/addons/addons.component.html b/src/app/features/settings/addons/addons.component.html
index 2b046909f..aff9ecf28 100644
--- a/src/app/features/settings/addons/addons.component.html
+++ b/src/app/features/settings/addons/addons.component.html
@@ -1,34 +1,30 @@
-<osf-sub-header [showButton]="false" [title]="'settings.addons.header.title' | translate" [icon]="'settings'" />
+<osf-sub-header [title]="'settings.addons.header.title' | translate" [icon]="'settings'" />
 <section class="flex-column flex flex-1">
   <p-tabs [value]="selectedTab()" class="flex-1">
-    @if (!isMobile()) {
-      <p-tablist class="pr-5 pl-5">
-        <p-tab [value]="0">
-          {{ 'settings.addons.tabs.allAddons' | translate }}
-        </p-tab>
-        <p-tab [value]="1">
-          {{ 'settings.addons.tabs.connectedAddons' | translate }}
-        </p-tab>
-      </p-tablist>
-    }
+    <p-tablist class="pr-5 pl-5 hidden md:flex md:flex-column">
+      <p-tab [value]="0">
+        {{ 'settings.addons.tabs.allAddons' | translate }}
+      </p-tab>
+      <p-tab [value]="1">
+        {{ 'settings.addons.tabs.connectedAddons' | translate }}
+      </p-tab>
+    </p-tablist>
 
-    <p-tabpanels class="p-3 sm:p-5 flex-1">
-      @if (isMobile()) {
-        <p-select
-          class="w-full mb-4"
-          [options]="tabOptions"
-          optionValue="value"
-          [ngModel]="selectedTab()"
-          (ngModelChange)="selectedTab.set($event)"
-        >
-          <ng-template #selectedItem let-selectedOption>
-            {{ selectedOption.label | translate }}
-          </ng-template>
-          <ng-template #item let-item>
-            {{ item.label | translate }}
-          </ng-template>
-        </p-select>
-      }
+    <p-tabpanels class="flex-1 p-3 sm:p-5">
+      <p-select
+        class="w-full font-bold mb-4 md:hidden"
+        [options]="tabOptions"
+        optionValue="value"
+        [ngModel]="selectedTab()"
+        (ngModelChange)="selectedTab.set($event)"
+      >
+        <ng-template #selectedItem let-selectedOption>
+          {{ selectedOption.label | translate }}
+        </ng-template>
+        <ng-template #item let-item>
+          {{ item.label | translate }}
+        </ng-template>
+      </p-select>
       <p-tabpanel [value]="AddonTabValue.ALL_ADDONS" class="flex flex-column gap-5">
         <p>
           {{ 'settings.addons.description' | translate }}
diff --git a/src/app/features/settings/addons/addons.component.ts b/src/app/features/settings/addons/addons.component.ts
index 0953648b9..d705348d3 100644
--- a/src/app/features/settings/addons/addons.component.ts
+++ b/src/app/features/settings/addons/addons.component.ts
@@ -1,4 +1,4 @@
-import { createDispatchMap, select, Store } from '@ngxs/store';
+import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
@@ -8,13 +8,11 @@ import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primeng/tabs';
 
 import { debounceTime, distinctUntilChanged } from 'rxjs';
 
-import { ChangeDetectionStrategy, Component, computed, effect, inject, signal } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { ChangeDetectionStrategy, Component, computed, effect, signal } from '@angular/core';
 import { FormControl, FormsModule } from '@angular/forms';
 
 import { UserSelectors } from '@osf/core/store/user';
 import { LoadingSpinnerComponent, SearchInputComponent, SubHeaderComponent } from '@osf/shared/components';
-import { IS_XSMALL } from '@osf/shared/utils';
 import { AddonCardListComponent } from '@shared/components/addons';
 import { ADDON_CATEGORY_OPTIONS, ADDON_TAB_OPTIONS } from '@shared/constants';
 import { AddonCategory, AddonTabValue } from '@shared/enums';
@@ -52,10 +50,8 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AddonsComponent {
-  private store = inject(Store);
   protected readonly tabOptions = ADDON_TAB_OPTIONS;
   protected readonly categoryOptions = ADDON_CATEGORY_OPTIONS;
-  protected isMobile = toSignal(inject(IS_XSMALL));
   protected AddonTabValue = AddonTabValue;
   protected defaultTabValue = AddonTabValue.ALL_ADDONS;
   protected searchControl = new FormControl<string>('');
@@ -138,7 +134,7 @@ export class AddonsComponent {
   constructor() {
     effect(() => {
       if (this.currentUser()) {
-        this.store.dispatch(GetAddonsUserReference);
+        this.actions.getAddonsUserReference();
       }
     });
 
@@ -154,7 +150,6 @@ export class AddonsComponent {
     });
 
     effect(() => {
-      // Only proceed if we have both current user and user reference
       if (this.currentUser() && this.userReferenceId()) {
         this.fetchAllAuthorizedAddons(this.userReferenceId());
       }
diff --git a/src/app/features/settings/addons/components/connect-addon/connect-addon.component.html b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.html
index fcd888820..1fd573822 100644
--- a/src/app/features/settings/addons/components/connect-addon/connect-addon.component.html
+++ b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.html
@@ -1,4 +1,4 @@
-<osf-sub-header [showButton]="false" [title]="'settings.addons.connectAddon.title' | translate" />
+<osf-sub-header [title]="'settings.addons.connectAddon.title' | translate" />
 <section class="stepper-container flex-column flex flex-1 p-5">
   <p-stepper [value]="!isAuthorized() ? ProjectAddonsStepperValue.TERMS : ProjectAddonsStepperValue.SETUP_NEW_ACCOUNT">
     <p-step-panels>
diff --git a/src/app/features/settings/addons/components/connect-addon/connect-addon.component.ts b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.ts
index 84dec7d18..aef52ffa8 100644
--- a/src/app/features/settings/addons/components/connect-addon/connect-addon.component.ts
+++ b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.ts
@@ -15,6 +15,7 @@ import { ProjectAddonsStepperValue } from '@osf/shared/enums';
 import { AddonSetupAccountFormComponent, AddonTermsComponent } from '@shared/components/addons';
 import { Addon, AddonTerm, AuthorizedAddon, AuthorizedAddonRequestJsonApi } from '@shared/models';
 import { AddonsSelectors, CreateAuthorizedAddon, UpdateAuthorizedAddon } from '@shared/stores/addons';
+import { getAddonTypeString, isAuthorizedAddon } from '@shared/utils';
 
 @Component({
   selector: 'osf-connect-addon',
@@ -47,20 +48,10 @@ export class ConnectAddonComponent {
   protected createdAddon = select(AddonsSelectors.getCreatedOrUpdatedAuthorizedAddon);
   protected isCreatingAuthorizedAddon = select(AddonsSelectors.getCreatedOrUpdatedStorageAddonSubmitting);
   protected isAuthorized = computed(() => {
-    const addon = this.addon();
-    if (addon) {
-      return addon.type === 'authorized-storage-accounts' || addon.type === 'authorized-citation-accounts';
-    }
-    return false;
+    return isAuthorizedAddon(this.addon());
   });
   protected addonTypeString = computed(() => {
-    const addon = this.addon();
-    if (addon) {
-      return addon.type === 'external-storage-services' || addon.type === 'authorized-storage-accounts'
-        ? 'storage'
-        : 'citation';
-    }
-    return '';
+    return getAddonTypeString(this.addon());
   });
 
   protected actions = createDispatchMap({
@@ -85,7 +76,7 @@ export class ConnectAddonComponent {
 
     effect(() => {
       if (this.isAuthorized()) {
-        this.stepper()?.value.set(ProjectAddonsStepperValue.SETUP_NEW_ACCOUNT); //if the addon is already authorized, we skip terms table page
+        this.stepper()?.value.set(ProjectAddonsStepperValue.SETUP_NEW_ACCOUNT);
       }
     });
   }
diff --git a/src/app/features/settings/notifications/notifications.component.html b/src/app/features/settings/notifications/notifications.component.html
index 2bedea7b5..60d36ec11 100644
--- a/src/app/features/settings/notifications/notifications.component.html
+++ b/src/app/features/settings/notifications/notifications.component.html
@@ -1,4 +1,4 @@
-<osf-sub-header [showButton]="false" [title]="'settings.notifications.header.title' | translate" [icon]="'settings'" />
+<osf-sub-header [title]="'settings.notifications.header.title' | translate" [icon]="'settings'" />
 
 <div class="flex flex-column p-2 bg-white flex-1 gap-4 md:p-3 xl:p-4">
   @if (!isEmailPreferencesLoading()) {
diff --git a/src/app/features/settings/profile-settings/profile-settings.component.html b/src/app/features/settings/profile-settings/profile-settings.component.html
index 8da7cb27e..ab8359f26 100644
--- a/src/app/features/settings/profile-settings/profile-settings.component.html
+++ b/src/app/features/settings/profile-settings/profile-settings.component.html
@@ -1,4 +1,4 @@
-<osf-sub-header [showButton]="false" [title]="'settings.profileSettings.title' | translate" [icon]="'settings'" />
+<osf-sub-header [title]="'settings.profileSettings.title' | translate" [icon]="'settings'" />
 
 <div class="flex-column flex flex-1 w-full">
   <p-tabs [value]="selectedTab" (valueChange)="onTabChange(+$event)" class="flex-1">
diff --git a/src/app/shared/components/addons/addon-card/addon-card.component.ts b/src/app/shared/components/addons/addon-card/addon-card.component.ts
index 28c9abe5f..d4f6106b8 100644
--- a/src/app/shared/components/addons/addon-card/addon-card.component.ts
+++ b/src/app/shared/components/addons/addon-card/addon-card.component.ts
@@ -3,7 +3,6 @@ import { createDispatchMap } from '@ngxs/store';
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
-import { DialogModule } from 'primeng/dialog';
 
 import { Component, computed, inject, input } from '@angular/core';
 import { Router } from '@angular/router';
@@ -11,10 +10,11 @@ import { Router } from '@angular/router';
 import { CustomConfirmationService, LoaderService } from '@osf/shared/services';
 import { Addon, AuthorizedAddon, ConfiguredAddon } from '@shared/models';
 import { DeleteAuthorizedAddon } from '@shared/stores/addons';
+import { getAddonTypeString, isConfiguredAddon } from '@shared/utils';
 
 @Component({
   selector: 'osf-addon-card',
-  imports: [Button, DialogModule, TranslatePipe],
+  imports: [Button, TranslatePipe],
   templateUrl: './addon-card.component.html',
   styleUrl: './addon-card.component.scss',
 })
@@ -29,21 +29,10 @@ export class AddonCardComponent {
   readonly showDangerButton = input<boolean>(false);
 
   protected readonly addonTypeString = computed(() => {
-    const addon = this.card();
-    if (addon) {
-      return addon.type === 'authorized-storage-accounts' || addon.type === 'configured-storage-addons'
-        ? 'storage'
-        : 'citation';
-    }
-    return '';
+    return getAddonTypeString(this.card());
   });
   protected readonly isConfiguredAddon = computed(() => {
-    const addon = this.card();
-    if (addon) {
-      return addon.type === 'configured-storage-addons' || addon.type === 'configured-citation-addons';
-    }
-
-    return false;
+    return isConfiguredAddon(this.card());
   });
 
   onConnectAddon(): void {
diff --git a/src/app/shared/components/addons/addon-terms/addon-terms.component.ts b/src/app/shared/components/addons/addon-terms/addon-terms.component.ts
index 7b24a5412..0d5c616ba 100644
--- a/src/app/shared/components/addons/addon-terms/addon-terms.component.ts
+++ b/src/app/shared/components/addons/addon-terms/addon-terms.component.ts
@@ -3,11 +3,11 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { TableModule } from 'primeng/table';
 
 import { NgClass } from '@angular/common';
-import { Component, computed, inject, input } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component, computed, input } from '@angular/core';
 
 import { ADDON_TERMS as addonTerms } from '@shared/constants';
 import { Addon, AddonTerm, AuthorizedAddon } from '@shared/models';
+import { isCitationAddon } from '@shared/utils';
 
 @Component({
   selector: 'osf-addon-terms',
@@ -17,7 +17,6 @@ import { Addon, AddonTerm, AuthorizedAddon } from '@shared/models';
   styleUrls: ['./addon-terms.component.scss'],
 })
 export class AddonTermsComponent {
-  private router = inject(Router);
   addon = input<Addon | AuthorizedAddon | null>(null);
   protected terms = computed(() => {
     const addon = this.addon();
@@ -30,7 +29,7 @@ export class AddonTermsComponent {
   private getAddonTerms(addon: Addon | AuthorizedAddon): AddonTerm[] {
     const supportedFeatures = addon.supportedFeatures;
     const provider = addon.providerName;
-    const isCitationService = addon.type === 'external-citation-services';
+    const isCitationService = isCitationAddon(addon);
 
     const relevantTerms = isCitationService ? addonTerms.filter((term) => term.citation) : addonTerms;
 
diff --git a/src/app/shared/components/addons/folder-selector/folder-selector.component.html b/src/app/shared/components/addons/folder-selector/folder-selector.component.html
index 337e2035f..ca63a66d2 100644
--- a/src/app/shared/components/addons/folder-selector/folder-selector.component.html
+++ b/src/app/shared/components/addons/folder-selector/folder-selector.component.html
@@ -36,8 +36,8 @@ <h3 class="mt-4 mb-2">
   } @else {
     <div class="folders-table flex flex-column">
       <div class="folders-table-heading flex justify-content-between">
-        <h3>Folder Name</h3>
-        <h3>Select</h3>
+        <h3>{{ 'settings.addons.configureAddon.folderName' | translate }}</h3>
+        <h3>{{ 'settings.addons.configureAddon.selectFolder' | translate }}</h3>
       </div>
       @if (operationInvocationResult().length) {
         @for (folder of operationInvocationResult(); track folder.itemId) {
diff --git a/src/app/shared/mappers/addon.mapper.ts b/src/app/shared/mappers/addon.mapper.ts
index 85b70ae0b..8341c8554 100644
--- a/src/app/shared/mappers/addon.mapper.ts
+++ b/src/app/shared/mappers/addon.mapper.ts
@@ -8,7 +8,7 @@ import {
   IncludedAddonData,
   OperationInvocation,
   OperationInvocationResponseJsonApi,
-  StorageItemResponse,
+  StorageItemResponseJsonApi,
 } from '@shared/models';
 
 export class AddonMapper {
@@ -29,20 +29,17 @@ export class AddonMapper {
     response: AuthorizedAddonGetResponseJsonApi,
     included?: IncludedAddonData[]
   ): AuthorizedAddon {
-    // Handle both storage and citation service relationships
     const externalServiceData =
       response.relationships?.external_storage_service?.data || response.relationships?.external_citation_service?.data;
 
     const externalServiceId = externalServiceData?.id;
 
-    // Find the matching service in the included data
     const matchingService = included?.find(
       (item) =>
         (item.type === 'external-storage-services' || item.type === 'external-citation-services') &&
         item.id === externalServiceId
     )?.attributes;
 
-    // Extract the relevant properties from the matching service
     const externalServiceName = (matchingService?.['external_service_name'] as string) || '';
     const displayName = (matchingService?.['display_name'] as string) || '';
     const credentialsFormat = (matchingService?.['credentials_format'] as string) || '';
@@ -87,7 +84,7 @@ export class AddonMapper {
     const isOperationResult = 'items' in operationResult && 'total_count' in operationResult;
 
     const mappedOperationResult = isOperationResult
-      ? operationResult.items.map((item: StorageItemResponse) => ({
+      ? operationResult.items.map((item: StorageItemResponseJsonApi) => ({
           itemId: item.item_id,
           itemName: item.item_name,
           itemType: item.item_type,
diff --git a/src/app/shared/models/addons/operation-invocation.models.ts b/src/app/shared/models/addons/operation-invocation.models.ts
index c22faf014..107aa00d9 100644
--- a/src/app/shared/models/addons/operation-invocation.models.ts
+++ b/src/app/shared/models/addons/operation-invocation.models.ts
@@ -1,4 +1,4 @@
-export interface StorageItemResponse {
+export interface StorageItemResponseJsonApi {
   item_id?: string;
   item_name?: string;
   item_type?: string;
@@ -7,7 +7,7 @@ export interface StorageItemResponse {
 }
 
 export interface OperationResult {
-  items: StorageItemResponse[];
+  items: StorageItemResponseJsonApi[];
   total_count: number;
 }
 
@@ -44,8 +44,8 @@ export interface OperationInvocationResponseJsonApi {
   id: string;
   attributes: {
     invocation_status: string;
-    operation_kwargs: StorageItemResponse;
-    operation_result: OperationResult | StorageItemResponse;
+    operation_kwargs: StorageItemResponseJsonApi;
+    operation_result: OperationResult | StorageItemResponseJsonApi;
     created: string;
     modified: string;
     operation_name: string;
diff --git a/src/app/shared/services/addons/addon-form.service.ts b/src/app/shared/services/addons/addon-form.service.ts
index 68f544160..80e654a92 100644
--- a/src/app/shared/services/addons/addon-form.service.ts
+++ b/src/app/shared/services/addons/addon-form.service.ts
@@ -10,6 +10,7 @@ import {
   ConfiguredAddon,
   ConfiguredAddonRequestJsonApi,
 } from '@shared/models';
+import { isAuthorizedAddon } from '@shared/utils';
 
 @Injectable({
   providedIn: 'root',
@@ -107,9 +108,7 @@ export class AddonFormService {
   }
 
   private getAddonServiceId(addon: Addon | AuthorizedAddon): string {
-    const isAuthorizedAddon =
-      addon.type === 'authorized-storage-accounts' || addon.type === 'authorized-citation-accounts';
-    return isAuthorizedAddon ? (addon as AuthorizedAddon).externalStorageServiceId : (addon as Addon).id;
+    return isAuthorizedAddon(addon) ? (addon as AuthorizedAddon).externalStorageServiceId : (addon as Addon).id;
   }
 
   generateConfiguredAddonCreatePayload(
diff --git a/src/app/shared/services/addons/addons.service.ts b/src/app/shared/services/addons/addons.service.ts
index 25e9e91ee..7a0f4b369 100644
--- a/src/app/shared/services/addons/addons.service.ts
+++ b/src/app/shared/services/addons/addons.service.ts
@@ -1,4 +1,4 @@
-import { Store } from '@ngxs/store';
+import { select } from '@ngxs/store';
 
 import { map, Observable } from 'rxjs';
 
@@ -27,18 +27,17 @@ import {
 } from '@shared/models';
 import { OperationInvocationResponseJsonApi } from '@shared/models/addons/operation-invocation.models';
 
-import { environment } from '../../../../environments/environment';
+import { environment } from 'src/environments/environment';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AddonsService {
-  #store = inject(Store);
-  #jsonApiService = inject(JsonApiService);
-  #currentUser = this.#store.selectSignal(UserSelectors.getCurrentUser);
+  private jsonApiService = inject(JsonApiService);
+  private currentUser = select(UserSelectors.getCurrentUser);
 
   getAddons(addonType: string): Observable<Addon[]> {
-    return this.#jsonApiService
+    return this.jsonApiService
       .get<
         JsonApiResponse<AddonGetResponseJsonApi[], null>
       >(`${environment.addonsApiUrl}/external-${addonType}-services`)
@@ -50,26 +49,26 @@ export class AddonsService {
   }
 
   getAddonsUserReference(): Observable<UserReferenceJsonApi[]> {
-    const currentUser = this.#currentUser();
+    const currentUser = this.currentUser();
     if (!currentUser) throw new Error('Current user not found');
 
-    const userUri = `https://staging4.osf.io/${currentUser.id}`;
+    const userUri = `${environment.baseResourceUri}${currentUser.id}`;
     const params = {
       'filter[user_uri]': userUri,
     };
 
-    return this.#jsonApiService
+    return this.jsonApiService
       .get<JsonApiResponse<UserReferenceJsonApi[], null>>(environment.addonsApiUrl + '/user-references/', params)
       .pipe(map((response) => response.data));
   }
 
   getAddonsResourceReference(resourceId: string): Observable<ResourceReferenceJsonApi[]> {
-    const resourceUri = `https://staging4.osf.io/${resourceId}`;
+    const resourceUri = `${environment.baseResourceUri}${resourceId}`;
     const params = {
       'filter[resource_uri]': resourceUri,
     };
 
-    return this.#jsonApiService
+    return this.jsonApiService
       .get<
         JsonApiResponse<ResourceReferenceJsonApi[], null>
       >(environment.addonsApiUrl + '/resource-references/', params)
@@ -80,7 +79,7 @@ export class AddonsService {
     const params = {
       [`fields[external-${addonType}-services]`]: 'external_service_name',
     };
-    return this.#jsonApiService
+    return this.jsonApiService
       .get<
         JsonApiResponse<AuthorizedAddonGetResponseJsonApi[], IncludedAddonData[]>
       >(`${environment.addonsApiUrl}/user-references/${referenceId}/authorized_${addonType}_accounts/?include=external-${addonType}-service`, params)
@@ -92,7 +91,7 @@ export class AddonsService {
   }
 
   getConfiguredAddons(addonType: string, referenceId: string): Observable<ConfiguredAddon[]> {
-    return this.#jsonApiService
+    return this.jsonApiService
       .get<
         JsonApiResponse<ConfiguredAddonGetResponseJsonApi[], null>
       >(`${environment.addonsApiUrl}/resource-references/${referenceId}/configured_${addonType}_addons/`)
@@ -107,7 +106,7 @@ export class AddonsService {
     addonRequestPayload: AuthorizedAddonRequestJsonApi,
     addonType: string
   ): Observable<AuthorizedAddonResponseJsonApi> {
-    return this.#jsonApiService.post<AuthorizedAddonResponseJsonApi>(
+    return this.jsonApiService.post<AuthorizedAddonResponseJsonApi>(
       `${environment.addonsApiUrl}/authorized-${addonType}-accounts/`,
       addonRequestPayload
     );
@@ -118,7 +117,7 @@ export class AddonsService {
     addonType: string,
     addonId: string
   ): Observable<AuthorizedAddonResponseJsonApi> {
-    return this.#jsonApiService.patch<AuthorizedAddonResponseJsonApi>(
+    return this.jsonApiService.patch<AuthorizedAddonResponseJsonApi>(
       `${environment.addonsApiUrl}/authorized-${addonType}-accounts/${addonId}/`,
       addonRequestPayload
     );
@@ -128,7 +127,7 @@ export class AddonsService {
     addonRequestPayload: ConfiguredAddonRequestJsonApi,
     addonType: string
   ): Observable<ConfiguredAddonResponseJsonApi> {
-    return this.#jsonApiService.post<ConfiguredAddonResponseJsonApi>(
+    return this.jsonApiService.post<ConfiguredAddonResponseJsonApi>(
       `${environment.addonsApiUrl}/configured-${addonType}-addons/`,
       addonRequestPayload
     );
@@ -139,7 +138,7 @@ export class AddonsService {
     addonType: string,
     addonId: string
   ): Observable<ConfiguredAddonResponseJsonApi> {
-    return this.#jsonApiService.patch<ConfiguredAddonResponseJsonApi>(
+    return this.jsonApiService.patch<ConfiguredAddonResponseJsonApi>(
       `${environment.addonsApiUrl}/configured-${addonType}-addons/${addonId}/`,
       addonRequestPayload
     );
@@ -148,7 +147,7 @@ export class AddonsService {
   createAddonOperationInvocation(
     invocationRequestPayload: OperationInvocationRequestJsonApi
   ): Observable<OperationInvocation> {
-    return this.#jsonApiService
+    return this.jsonApiService
       .post<OperationInvocationResponseJsonApi>(
         `${environment.addonsApiUrl}/addon-operation-invocations/`,
         invocationRequestPayload
@@ -161,10 +160,10 @@ export class AddonsService {
   }
 
   deleteAuthorizedAddon(id: string, addonType: string): Observable<void> {
-    return this.#jsonApiService.delete(`${environment.addonsApiUrl}/authorized-${addonType}-accounts/${id}/`);
+    return this.jsonApiService.delete(`${environment.addonsApiUrl}/authorized-${addonType}-accounts/${id}/`);
   }
 
   deleteConfiguredAddon(id: string, addonType: string): Observable<void> {
-    return this.#jsonApiService.delete(`${environment.addonsApiUrl}/${addonType}/${id}/`);
+    return this.jsonApiService.delete(`${environment.addonsApiUrl}/${addonType}/${id}/`);
   }
 }
diff --git a/src/app/shared/stores/addons/addons.state.ts b/src/app/shared/stores/addons/addons.state.ts
index 4b763598e..d6d614660 100644
--- a/src/app/shared/stores/addons/addons.state.ts
+++ b/src/app/shared/stores/addons/addons.state.ts
@@ -334,14 +334,6 @@ export class AddonsState {
             error: null,
           },
         });
-        // const referenceId = state.addonsResourceReference.data[0]?.id;
-        // if (referenceId) {
-        //   ctx.dispatch(
-        //     action.addonType === 'storage'
-        //       ? new GetConfiguredStorageAddons(referenceId)
-        //       : new GetConfiguredCitationAddons(referenceId)
-        //   );
-        // }
       }),
       catchError((error) => this.handleError(ctx, 'createdUpdatedConfiguredAddon', error))
     );
diff --git a/src/app/shared/utils/addon-type.helper.ts b/src/app/shared/utils/addon-type.helper.ts
new file mode 100644
index 000000000..cdc7f3dff
--- /dev/null
+++ b/src/app/shared/utils/addon-type.helper.ts
@@ -0,0 +1,39 @@
+import { Addon, AuthorizedAddon, ConfiguredAddon } from '@shared/models';
+
+export function isStorageAddon(addon: Addon | AuthorizedAddon | ConfiguredAddon | null): boolean {
+  if (!addon) return false;
+
+  return (
+    addon.type === 'external-storage-services' ||
+    addon.type === 'authorized-storage-accounts' ||
+    addon.type === 'configured-storage-addons'
+  );
+}
+
+export function isCitationAddon(addon: Addon | AuthorizedAddon | ConfiguredAddon | null): boolean {
+  if (!addon) return false;
+
+  return (
+    addon.type === 'external-citation-services' ||
+    addon.type === 'authorized-citation-accounts' ||
+    addon.type === 'configured-citation-addons'
+  );
+}
+
+export function getAddonTypeString(addon: Addon | AuthorizedAddon | ConfiguredAddon | null): string {
+  if (!addon) return '';
+
+  return isStorageAddon(addon) ? 'storage' : 'citation';
+}
+
+export function isAuthorizedAddon(addon: Addon | AuthorizedAddon | ConfiguredAddon | null): boolean {
+  if (!addon) return false;
+
+  return addon.type === 'authorized-storage-accounts' || addon.type === 'authorized-citation-accounts';
+}
+
+export function isConfiguredAddon(addon: Addon | AuthorizedAddon | ConfiguredAddon | null): boolean {
+  if (!addon) return false;
+
+  return addon.type === 'configured-storage-addons' || addon.type === 'configured-citation-addons';
+}
diff --git a/src/app/shared/utils/index.ts b/src/app/shared/utils/index.ts
index 38d45729d..204b4de20 100644
--- a/src/app/shared/utils/index.ts
+++ b/src/app/shared/utils/index.ts
@@ -1,5 +1,6 @@
 export { HeaderStyleHelper } from '../utils/header-style.helper';
 export * from './add-filters-params.helper';
+export * from './addon-type.helper';
 export * from './breakpoints.tokens';
 export { BrowserTabHelper } from './browser-tab.helper';
 export * from './custom-form-validators.helper';
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index cbd1e082a..38bed2d88 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -964,6 +964,8 @@
         "disconnectMessage": "You are about to disconnect the following addon from the project:",
         "account": "Account:",
         "selectedFolder": "Selected folder:",
+        "folderName": "Folder name:",
+        "selectFolder": "Select",
         "connectedAccount": "Connected to account:",
         "home": "Home"
       },
diff --git a/src/environments/environment.development.ts b/src/environments/environment.development.ts
index 420a2ce4f..766ed9908 100644
--- a/src/environments/environment.development.ts
+++ b/src/environments/environment.development.ts
@@ -5,4 +5,5 @@ export const environment = {
   shareDomainUrl: 'https://staging-share.osf.io/trove',
   addonsApiUrl: 'https://addons.staging4.osf.io/v1',
   fileApiUrl: 'https://files.us.staging4.osf.io/v1',
+  baseResourceUri: 'https://staging4.osf.io/',
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 420a2ce4f..766ed9908 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -5,4 +5,5 @@ export const environment = {
   shareDomainUrl: 'https://staging-share.osf.io/trove',
   addonsApiUrl: 'https://addons.staging4.osf.io/v1',
   fileApiUrl: 'https://files.us.staging4.osf.io/v1',
+  baseResourceUri: 'https://staging4.osf.io/',
 };

From cd6365acca9af8b08e5bcadfa8340eaa55a135a3 Mon Sep 17 00:00:00 2001
From: Roman Nastyuk <rnastyuk@exoft.net>
Date: Thu, 19 Jun 2025 12:12:21 +0300
Subject: [PATCH 09/18] feat(profile-addons-api): changed p-select usage to
 reusable osf-select

---
 .../project/addons/addons.component.html      | 42 ++++++-------------
 .../project/addons/addons.component.ts        | 12 +++---
 .../account-settings.component.html           |  2 +-
 .../account-settings.component.ts             |  3 ++
 .../settings/addons/addons.component.html     | 40 ++++++------------
 .../settings/addons/addons.component.ts       | 17 +++++---
 src/assets/i18n/en.json                       |  1 +
 7 files changed, 48 insertions(+), 69 deletions(-)

diff --git a/src/app/features/project/addons/addons.component.html b/src/app/features/project/addons/addons.component.html
index da53bf7f7..688500c52 100644
--- a/src/app/features/project/addons/addons.component.html
+++ b/src/app/features/project/addons/addons.component.html
@@ -11,43 +11,25 @@
     </p-tablist>
 
     <p-tabpanels class="flex-1 p-3 sm:p-5">
-      <p-select
-        class="w-full font-bold mb-4 md:hidden"
+      <osf-select
+        class="font-bold md:hidden"
         [options]="tabOptions"
-        optionValue="value"
-        [ngModel]="selectedTab()"
-        (ngModelChange)="selectedTab.set($event)"
-      >
-        <ng-template #selectedItem let-selectedOption>
-          <div class="m-auto pl-5">
-            {{ selectedOption.label | translate }}
-          </div>
-        </ng-template>
-        <ng-template #item let-item>
-          {{ item.label | translate }}
-        </ng-template>
-      </p-select>
-      <p-tabpanel [value]="AddonTabValue.ALL_ADDONS" class="flex flex-column gap-5">
+        [(selectedValue)]="selectedTab"
+        [fullWidth]="true"
+      />
+      <p-tabpanel [value]="AddonTabValue.ALL_ADDONS" class="flex flex-column mt-4 gap-5">
         <p>
           {{ 'settings.addons.description' | translate }}
         </p>
         <section class="grid">
           <div class="col-12 md:col-6 lg:col-3">
-            <p-select
-              [placeholder]="'settings.addons.filters.addonType' | translate"
+            <osf-select
+              [placeholder]="'settings.addons.filters.addonType'"
               [options]="categoryOptions"
-              optionValue="value"
-              [ngModel]="selectedCategory()"
-              (ngModelChange)="onCategoryChange($event)"
-              class="w-full"
-            >
-              <ng-template #selectedItem let-selectedOption>
-                {{ selectedOption.label | translate }}
-              </ng-template>
-              <ng-template #item let-item>
-                {{ item.label | translate }}
-              </ng-template>
-            </p-select>
+              [(selectedValue)]="selectedCategory"
+              (changeValue)="onCategoryChange($event)"
+              [fullWidth]="true"
+            />
           </div>
           <div class="col-12 md:col-6 lg:col-9">
             <osf-search-input
diff --git a/src/app/features/project/addons/addons.component.ts b/src/app/features/project/addons/addons.component.ts
index 1c3504453..672cf1cb1 100644
--- a/src/app/features/project/addons/addons.component.ts
+++ b/src/app/features/project/addons/addons.component.ts
@@ -2,7 +2,6 @@ import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
-import { Select } from 'primeng/select';
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primeng/tabs';
 
 import { debounceTime, distinctUntilChanged } from 'rxjs';
@@ -21,7 +20,8 @@ import { FormControl, FormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
 import { UserSelectors } from '@core/store/user';
-import { LoadingSpinnerComponent, SearchInputComponent, SubHeaderComponent } from '@shared/components';
+import { Primitive } from '@osf/core/helpers';
+import { LoadingSpinnerComponent, SearchInputComponent, SelectComponent, SubHeaderComponent } from '@shared/components';
 import { AddonCardListComponent } from '@shared/components/addons';
 import { ADDON_CATEGORY_OPTIONS, ADDON_TAB_OPTIONS } from '@shared/constants';
 import { AddonCategory, AddonTabValue } from '@shared/enums';
@@ -42,7 +42,7 @@ import {
   imports: [
     AddonCardListComponent,
     SearchInputComponent,
-    Select,
+    SelectComponent,
     SubHeaderComponent,
     Tab,
     TabList,
@@ -146,8 +146,10 @@ export class AddonsComponent implements OnInit {
     );
   });
 
-  protected onCategoryChange(value: string): void {
-    this.selectedCategory.set(value);
+  protected onCategoryChange(value: Primitive): void {
+    if (typeof value === 'string') {
+      this.selectedCategory.set(value);
+    }
   }
 
   constructor() {
diff --git a/src/app/features/settings/account-settings/account-settings.component.html b/src/app/features/settings/account-settings/account-settings.component.html
index d08e74601..27ff22774 100644
--- a/src/app/features/settings/account-settings/account-settings.component.html
+++ b/src/app/features/settings/account-settings/account-settings.component.html
@@ -1,4 +1,4 @@
-<osf-sub-header [title]="'Account settings'" [icon]="'settings'" />
+<osf-sub-header [title]="'settings.accountSettings.title' | translate" [icon]="'settings'" />
 
 @if (this.currentUser()?.id) {
   <section class="content">
diff --git a/src/app/features/settings/account-settings/account-settings.component.ts b/src/app/features/settings/account-settings/account-settings.component.ts
index a9f038d3f..3e1bb48e9 100644
--- a/src/app/features/settings/account-settings/account-settings.component.ts
+++ b/src/app/features/settings/account-settings/account-settings.component.ts
@@ -1,5 +1,7 @@
 import { Store } from '@ngxs/store';
 
+import { TranslatePipe } from '@ngx-translate/core';
+
 import { DialogService } from 'primeng/dynamicdialog';
 
 import { ChangeDetectionStrategy, Component, effect, inject } from '@angular/core';
@@ -35,6 +37,7 @@ import { GetAccountSettings, GetEmails, GetExternalIdentities, GetRegions, GetUs
     TwoFactorAuthComponent,
     DeactivateAccountComponent,
     AffiliatedInstitutionsComponent,
+    TranslatePipe,
   ],
   providers: [DialogService],
   templateUrl: './account-settings.component.html',
diff --git a/src/app/features/settings/addons/addons.component.html b/src/app/features/settings/addons/addons.component.html
index aff9ecf28..c2cb58c8f 100644
--- a/src/app/features/settings/addons/addons.component.html
+++ b/src/app/features/settings/addons/addons.component.html
@@ -11,41 +11,25 @@
     </p-tablist>
 
     <p-tabpanels class="flex-1 p-3 sm:p-5">
-      <p-select
-        class="w-full font-bold mb-4 md:hidden"
+      <osf-select
+        class="font-bold md:hidden"
         [options]="tabOptions"
-        optionValue="value"
-        [ngModel]="selectedTab()"
-        (ngModelChange)="selectedTab.set($event)"
-      >
-        <ng-template #selectedItem let-selectedOption>
-          {{ selectedOption.label | translate }}
-        </ng-template>
-        <ng-template #item let-item>
-          {{ item.label | translate }}
-        </ng-template>
-      </p-select>
-      <p-tabpanel [value]="AddonTabValue.ALL_ADDONS" class="flex flex-column gap-5">
+        [(selectedValue)]="selectedTab"
+        [fullWidth]="true"
+      />
+      <p-tabpanel [value]="AddonTabValue.ALL_ADDONS" class="flex flex-column mt-4 gap-5">
         <p>
           {{ 'settings.addons.description' | translate }}
         </p>
         <section class="grid">
           <div class="col-12 md:col-6 lg:col-3">
-            <p-select
-              [placeholder]="'settings.addons.filters.addonType' | translate"
+            <osf-select
+              [placeholder]="'settings.addons.filters.addonType'"
               [options]="categoryOptions"
-              optionValue="value"
-              [ngModel]="selectedCategory()"
-              (ngModelChange)="onCategoryChange($event)"
-              class="w-full"
-            >
-              <ng-template #selectedItem let-selectedOption>
-                {{ selectedOption.label | translate }}
-              </ng-template>
-              <ng-template #item let-item>
-                {{ item.label | translate }}
-              </ng-template>
-            </p-select>
+              [(selectedValue)]="selectedCategory"
+              (changeValue)="onCategoryChange($event)"
+              [fullWidth]="true"
+            />
           </div>
           <div class="col-12 md:col-6 lg:col-9">
             <osf-search-input
diff --git a/src/app/features/settings/addons/addons.component.ts b/src/app/features/settings/addons/addons.component.ts
index d705348d3..d44b67c2e 100644
--- a/src/app/features/settings/addons/addons.component.ts
+++ b/src/app/features/settings/addons/addons.component.ts
@@ -3,7 +3,6 @@ import { createDispatchMap, select } from '@ngxs/store';
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { AutoCompleteModule } from 'primeng/autocomplete';
-import { SelectModule } from 'primeng/select';
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primeng/tabs';
 
 import { debounceTime, distinctUntilChanged } from 'rxjs';
@@ -11,8 +10,14 @@ import { debounceTime, distinctUntilChanged } from 'rxjs';
 import { ChangeDetectionStrategy, Component, computed, effect, signal } from '@angular/core';
 import { FormControl, FormsModule } from '@angular/forms';
 
+import { Primitive } from '@osf/core/helpers';
 import { UserSelectors } from '@osf/core/store/user';
-import { LoadingSpinnerComponent, SearchInputComponent, SubHeaderComponent } from '@osf/shared/components';
+import {
+  LoadingSpinnerComponent,
+  SearchInputComponent,
+  SelectComponent,
+  SubHeaderComponent,
+} from '@osf/shared/components';
 import { AddonCardListComponent } from '@shared/components/addons';
 import { ADDON_CATEGORY_OPTIONS, ADDON_TAB_OPTIONS } from '@shared/constants';
 import { AddonCategory, AddonTabValue } from '@shared/enums';
@@ -40,7 +45,7 @@ import {
     SearchInputComponent,
     AutoCompleteModule,
     AddonCardListComponent,
-    SelectModule,
+    SelectComponent,
     FormsModule,
     TranslatePipe,
     LoadingSpinnerComponent,
@@ -127,8 +132,10 @@ export class AddonsComponent {
     return this.currentAddonsState().filter((card) => card.externalServiceName.toLowerCase().includes(searchValue));
   });
 
-  protected onCategoryChange(value: string): void {
-    this.selectedCategory.set(value);
+  protected onCategoryChange(value: Primitive): void {
+    if (typeof value === 'string') {
+      this.selectedCategory.set(value);
+    }
   }
 
   constructor() {
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 38bed2d88..c693d5445 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -1087,6 +1087,7 @@
       }
     },
     "accountSettings": {
+      "title": "Account Settings",
       "common": {
         "buttons": {
           "cancel": "Cancel",

From 52ef634976a3d01c961aba42d81c6a030344a9b3 Mon Sep 17 00:00:00 2001
From: Roman Nastyuk <rnastyuk@exoft.net>
Date: Fri, 20 Jun 2025 14:36:01 +0300
Subject: [PATCH 10/18] feat(collections-api): added get collection provider
 logic

---
 .../collections/collections.component.html    | 49 ++++++-----
 .../collections/collections.component.ts      | 36 ++++++--
 .../collections/collections.routes.ts         |  2 +-
 .../collections/mappers/collections.mapper.ts | 35 ++++++++
 src/app/features/collections/mappers/index.ts |  1 +
 .../collections/models/collections.models.ts  | 82 +++++++++++++++++--
 .../services/collections.service.ts           | 29 +++++--
 .../collections/store/collections.actions.ts  | 17 ++++
 .../collections/store/collections.model.ts    |  3 +-
 .../store/collections.selectors.ts            | 10 +++
 .../collections/store/collections.state.ts    | 30 ++++++-
 .../services/my-projects.service.ts           |  4 +-
 .../models/project-overview.models.ts         |  2 +-
 .../services/project-overview.service.ts      |  4 +-
 14 files changed, 257 insertions(+), 47 deletions(-)
 create mode 100644 src/app/features/collections/mappers/collections.mapper.ts
 create mode 100644 src/app/features/collections/mappers/index.ts

diff --git a/src/app/features/collections/collections.component.html b/src/app/features/collections/collections.component.html
index 7599339c8..1b589bbe4 100644
--- a/src/app/features/collections/collections.component.html
+++ b/src/app/features/collections/collections.component.html
@@ -1,23 +1,32 @@
-<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 sm:pt-5 xl:pt-6">
+    <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()"
+      />
+      @if (collectionProvider()?.description) {
+        <div class="mt-6" [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.ts b/src/app/features/collections/collections.component.ts
index 84fa26121..8d3b6b2c1 100644
--- a/src/app/features/collections/collections.component.ts
+++ b/src/app/features/collections/collections.component.ts
@@ -1,26 +1,52 @@
+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 { ChangeDetectionStrategy, Component, effect, inject, signal } from '@angular/core';
 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 { CollectionsSelectors, GetCollectionProvider } 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],
   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);
   protected searchControl = new FormControl('');
+  protected collectionProvider = select(CollectionsSelectors.getCollectionProvider);
+  protected providerId = signal<string>('');
+  protected actions = createDispatchMap({
+    getCollectionProvider: GetCollectionProvider,
+  });
+  protected isProviderLoading = select(CollectionsSelectors.getCollectionProviderLoading);
+
+  constructor() {
+    const id = this.route.snapshot.paramMap.get('id');
+    if (id) {
+      this.providerId.set(id);
+      this.actions.getCollectionProvider(id);
+    } else {
+      this.router.navigate(['/not-found']);
+    }
+
+    effect(() => {
+      console.log(this.collectionProvider());
+    });
+  }
 
   openHelpDialog() {
     this.dialogService.open(CollectionsHelpDialogComponent, {
diff --git a/src/app/features/collections/collections.routes.ts b/src/app/features/collections/collections.routes.ts
index 5b3337107..97c57edc0 100644
--- a/src/app/features/collections/collections.routes.ts
+++ b/src/app/features/collections/collections.routes.ts
@@ -11,7 +11,7 @@ export const collectionsRoutes: Routes = [
     path: '',
     children: [
       {
-        path: '',
+        path: ':id',
         pathMatch: 'full',
         component: CollectionsComponent,
       },
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..e9f50533b
--- /dev/null
+++ b/src/app/features/collections/mappers/collections.mapper.ts
@@ -0,0 +1,35 @@
+import { CollectionProvider, CollectionProviderResponseJsonApi } from '@osf/features/collections/models';
+
+export class CollectionsMapper {
+  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,
+      },
+    };
+  }
+}
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/collections.models.ts b/src/app/features/collections/models/collections.models.ts
index e23886ee1..f18c87ac0 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 {
+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 SparseCollectionAttributesJsonApi {
   title: string;
   bookmarks: boolean;
 }
 
-export interface Collection {
+export interface SparseCollectionJsonAi {
+  id: string;
+  attributes: SparseCollectionAttributesJsonApi;
+}
+
+export interface SparseCollectionsResponseJsonApi {
+  data: SparseCollectionJsonAi[];
+}
+
+export interface CollectionProvider {
   id: string;
-  attributes: CollectionAttributes;
+  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 SparseCollectionsResponse {
-  data: Collection[];
+export interface CollectionProviderGetResponseJsonApi extends JsonApiResponse<CollectionProviderResponseJsonApi, null> {
+  data: CollectionProviderResponseJsonApi;
 }
diff --git a/src/app/features/collections/services/collections.service.ts b/src/app/features/collections/services/collections.service.ts
index 24b90dae0..b4d664df5 100644
--- a/src/app/features/collections/services/collections.service.ts
+++ b/src/app/features/collections/services/collections.service.ts
@@ -3,8 +3,9 @@ import { map, Observable } from 'rxjs';
 import { inject, Injectable } from '@angular/core';
 
 import { JsonApiService } from '@osf/core/services';
+import { CollectionsMapper } from '@osf/features/collections/mappers';
 
-import { SparseCollectionsResponse } from '../models';
+import { CollectionProvider, CollectionProviderGetResponseJsonApi, SparseCollectionsResponseJsonApi } from '../models';
 
 import { environment } from 'src/environments/environment';
 
@@ -19,14 +20,16 @@ export class CollectionsService {
       'fields[collections]': 'title,bookmarks',
     };
 
-    return this.#jsonApiService.get<SparseCollectionsResponse>(environment.apiUrl + '/collections/', params).pipe(
-      map((response: SparseCollectionsResponse) => {
-        const bookmarksCollection = response.data.find(
-          (collection) => collection.attributes.title === 'Bookmarks' && collection.attributes.bookmarks
-        );
-        return bookmarksCollection?.id ?? '';
-      })
-    );
+    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
+          );
+          return bookmarksCollection?.id ?? '';
+        })
+      );
   }
 
   addProjectToBookmarks(bookmarksId: string, projectId: string): Observable<void> {
@@ -56,4 +59,12 @@ export class CollectionsService {
 
     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)));
+  }
 }
diff --git a/src/app/features/collections/store/collections.actions.ts b/src/app/features/collections/store/collections.actions.ts
index 036d0a3ed..69edca4fe 100644
--- a/src/app/features/collections/store/collections.actions.ts
+++ b/src/app/features/collections/store/collections.actions.ts
@@ -1,3 +1,9 @@
+export class GetCollectionProvider {
+  static readonly type = '[Collections] Get Collection Provider';
+
+  constructor(public collectionName: string) {}
+}
+
 export class GetBookmarksCollectionId {
   static readonly type = '[Collections] Get Bookmarks Collection Id';
 }
@@ -26,55 +32,66 @@ export class ClearCollections {
 
 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[]) {}
 }
 
 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[]) {}
 }
diff --git a/src/app/features/collections/store/collections.model.ts b/src/app/features/collections/store/collections.model.ts
index a83c87c5c..f596caa0a 100644
--- a/src/app/features/collections/store/collections.model.ts
+++ b/src/app/features/collections/store/collections.model.ts
@@ -1,8 +1,9 @@
-import { CollectionsFilters } from '@osf/features/collections/models';
+import { CollectionProvider, CollectionsFilters } from '@osf/features/collections/models';
 import { AsyncStateModel } from '@osf/shared/models/store';
 
 export interface CollectionsStateModel {
   bookmarksId: AsyncStateModel<string>;
   filters: CollectionsFilters;
   filtersOptions: CollectionsFilters;
+  collectionProvider: AsyncStateModel<CollectionProvider | null>;
 }
diff --git a/src/app/features/collections/store/collections.selectors.ts b/src/app/features/collections/store/collections.selectors.ts
index 7f8c27039..c9ecbdeab 100644
--- a/src/app/features/collections/store/collections.selectors.ts
+++ b/src/app/features/collections/store/collections.selectors.ts
@@ -85,4 +85,14 @@ export class CollectionsSelectors {
   static getAllFiltersOptions(state: CollectionsStateModel): CollectionsFilters {
     return state.filtersOptions;
   }
+
+  @Selector([CollectionsState])
+  static getCollectionProvider(state: CollectionsStateModel) {
+    return state.collectionProvider.data;
+  }
+
+  @Selector([CollectionsState])
+  static getCollectionProviderLoading(state: CollectionsStateModel) {
+    return state.collectionProvider.isLoading;
+  }
 }
diff --git a/src/app/features/collections/store/collections.state.ts b/src/app/features/collections/store/collections.state.ts
index 4319409db..f965513e5 100644
--- a/src/app/features/collections/store/collections.state.ts
+++ b/src/app/features/collections/store/collections.state.ts
@@ -10,6 +10,7 @@ import {
   AddProjectToBookmarks,
   ClearCollections,
   GetBookmarksCollectionId,
+  GetCollectionProvider,
   RemoveProjectFromBookmarks,
   SetCollectedTypeFilters,
   SetDataTypeFilters,
@@ -48,6 +49,11 @@ const COLLECTIONS_DEFAULTS: CollectionsStateModel = {
   },
   filters: FILTERS_DEFAULTS,
   filtersOptions: FILTERS_DEFAULTS,
+  collectionProvider: {
+    data: null,
+    isLoading: false,
+    error: null,
+  },
 };
 
 @State<CollectionsStateModel>({
@@ -58,6 +64,29 @@ 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(GetBookmarksCollectionId)
   getBookmarksCollectionId(ctx: StateContext<CollectionsStateModel>) {
     const state = ctx.getState();
@@ -133,7 +162,6 @@ export class CollectionsState {
     ctx.patchState(COLLECTIONS_DEFAULTS);
   }
 
-  // Filter Actions
   @Action(SetProgramAreaFilters)
   setProgramAreaFilters(ctx: StateContext<CollectionsStateModel>, action: SetProgramAreaFilters) {
     const state = ctx.getState();
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..66388c1a0 100644
--- a/src/app/features/my-projects/services/my-projects.service.ts
+++ b/src/app/features/my-projects/services/my-projects.service.ts
@@ -4,7 +4,7 @@ import { map } from 'rxjs/operators';
 import { inject, Injectable } from '@angular/core';
 
 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 +90,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
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 5430d0521..70c8c9edf 100644
--- a/src/app/features/project/overview/models/project-overview.models.ts
+++ b/src/app/features/project/overview/models/project-overview.models.ts
@@ -255,6 +255,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)));
   }
 

From b7e866943b8366a3360b810db57c6a6185cd82d1 Mon Sep 17 00:00:00 2001
From: Roman Nastyuk <rnastyuk@exoft.net>
Date: Wed, 25 Jun 2025 16:16:53 +0300
Subject: [PATCH 11/18] feat(profile-addons-api): added filter logic and
 collections submissions fetching

---
 src/app/app.routes.ts                         |   3 +-
 src/app/core/constants/nav-items.constant.ts  |   2 +-
 src/app/core/services/json-api.service.ts     |   8 +-
 .../collections/collections.component.html    |   3 +-
 .../collections/collections.component.scss    |  46 ++--
 .../collections/collections.component.ts      | 137 ++++++++--
 .../collections-filter-chips.component.html   |  16 +-
 .../collections-filter-chips.component.ts     |  92 ++++++-
 .../collections-filters.component.html        |  60 ++---
 .../collections-filters.component.scss        |  20 +-
 .../collections-filters.component.ts          | 109 ++++++--
 .../collections-main-content.component.html   |  31 ++-
 .../collections-main-content.component.ts     |  72 +++---
 ...lections-search-result-card.component.html |   8 +-
 ...ollections-search-result-card.component.ts |  16 +-
 .../collections-search-results.component.html |  31 ++-
 .../collections-search-results.component.ts   |  38 ++-
 .../{ => constants}/collections.routes.ts     |   2 +-
 .../filter-names.const.ts}                    |   3 +-
 .../constants/filter-types.const.ts           |  15 ++
 .../features/collections/constants/index.ts   |   2 +
 .../constants/query-params-keys.const.ts      |   1 +
 .../sort-options.const.ts                     |   4 +-
 .../collections/mappers/collections.mapper.ts |  71 +++++-
 .../models/collection-filter-type.type.ts     |   3 +
 .../models/collections-json-api.models.ts     | 170 +++++++++++++
 .../models/collections-query-params.model.ts  |   6 +
 .../collections/models/collections.models.ts  | 108 ++++----
 src/app/features/collections/models/index.ts  |   3 +
 .../collections-query-sync.service.ts         | 234 ++++++++++++++++++
 .../services/collections.service.ts           | 114 +++++++--
 .../features/collections/services/index.ts    |   1 +
 .../collections/store/collections.actions.ts  |  50 ++++
 .../collections/store/collections.model.ts    |  15 +-
 .../store/collections.selectors.ts            |  63 ++---
 .../collections/store/collections.state.ts    | 197 ++++++++++++---
 src/app/features/collections/utils/index.ts   |   3 -
 .../collections/utils/mocked-data.const.ts    | 102 --------
 .../my-projects/my-projects.component.html    |   5 +-
 .../services/my-projects.service.ts           |   5 +-
 .../services/contributors.service.ts          |   4 +-
 .../files/services/project-files.service.ts   |   4 +-
 .../services/view-only-links.service.ts       |   7 +-
 .../project/wiki/services/wiki.service.ts     |  25 +-
 .../services/developer-apps.service.ts        |   4 +-
 .../tokens/services/tokens.service.ts         |   4 +-
 .../search-input/search-input.component.ts    |   2 +-
 .../shared/services/addons/addons.service.ts  |  27 +-
 src/assets/i18n/en.json                       |   7 +-
 49 files changed, 1437 insertions(+), 516 deletions(-)
 rename src/app/features/collections/{ => constants}/collections.routes.ts (92%)
 rename src/app/features/collections/{utils/submission-attributes.const.ts => constants/filter-names.const.ts} (82%)
 create mode 100644 src/app/features/collections/constants/filter-types.const.ts
 create mode 100644 src/app/features/collections/constants/index.ts
 create mode 100644 src/app/features/collections/constants/query-params-keys.const.ts
 rename src/app/features/collections/{utils => constants}/sort-options.const.ts (74%)
 create mode 100644 src/app/features/collections/models/collection-filter-type.type.ts
 create mode 100644 src/app/features/collections/models/collections-json-api.models.ts
 create mode 100644 src/app/features/collections/models/collections-query-params.model.ts
 create mode 100644 src/app/features/collections/services/collections-query-sync.service.ts
 delete mode 100644 src/app/features/collections/utils/index.ts
 delete mode 100644 src/app/features/collections/utils/mocked-data.const.ts

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 683d06f2c..338845753 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -69,7 +69,8 @@ export const routes: Routes = [
       },
       {
         path: 'collections',
-        loadChildren: () => import('./features/collections/collections.routes').then((mod) => mod.collectionsRoutes),
+        loadChildren: () =>
+          import('./features/collections/constants/collections.routes').then((mod) => mod.collectionsRoutes),
       },
       {
         path: 'meetings',
diff --git a/src/app/core/constants/nav-items.constant.ts b/src/app/core/constants/nav-items.constant.ts
index 5421c6368..264fa4c64 100644
--- a/src/app/core/constants/nav-items.constant.ts
+++ b/src/app/core/constants/nav-items.constant.ts
@@ -57,7 +57,7 @@ export const NAV_ITEMS: NavItem[] = [
     path: '/collections',
     label: 'navigation.collections',
     icon: 'collections',
-    useExactMatch: true,
+    useExactMatch: false,
   },
   {
     path: '/meetings',
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 1b589bbe4..0e773ea36 100644
--- a/src/app/features/collections/collections.component.html
+++ b/src/app/features/collections/collections.component.html
@@ -1,5 +1,5 @@
 @if (!isProviderLoading()) {
-  <section class="collections flex flex-column flex-1 pt-0 sm:pt-5 xl:pt-6">
+  <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"
     >
@@ -17,6 +17,7 @@ <h1 class="flex align-items-center text-white">{{ collectionProvider()?.name }}<
         [showHelpIcon]="true"
         [placeholder]="'collections.searchInput.placeholder' | translate"
         (helpClicked)="openHelpDialog()"
+        (triggerSearch)="onSearchTriggered($event)"
       />
       @if (collectionProvider()?.description) {
         <div class="mt-6" [innerHTML]="collectionProvider()?.description"></div>
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 8d3b6b2c1..0d29f6c09 100644
--- a/src/app/features/collections/collections.component.ts
+++ b/src/app/features/collections/collections.component.ts
@@ -5,12 +5,24 @@ import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { Button } from 'primeng/button';
 import { DialogService } from 'primeng/dynamicdialog';
 
-import { ChangeDetectionStrategy, Component, effect, inject, signal } 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 { CollectionsSelectors, GetCollectionProvider } from '@osf/features/collections/store';
+import { CollectionFilters } from '@osf/features/collections/models';
+import { CollectionsQuerySyncService } from '@osf/features/collections/services';
+import {
+  CollectionsSelectors,
+  GetCollectionDetails,
+  GetCollectionProvider,
+  GetCollectionSubmissions,
+  SetPageNumber,
+  SetSearchValue,
+} from '@osf/features/collections/store';
 import { LoadingSpinnerComponent, SearchInputComponent } from '@shared/components';
 
 @Component({
@@ -18,7 +30,7 @@ import { LoadingSpinnerComponent, SearchInputComponent } from '@shared/component
   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 {
@@ -26,29 +38,36 @@ export class CollectionsComponent {
   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 collectionProvider = select(CollectionsSelectors.getCollectionProvider);
   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);
+
   protected actions = createDispatchMap({
     getCollectionProvider: GetCollectionProvider,
+    getCollectionDetails: GetCollectionDetails,
+    setSearchValue: SetSearchValue,
+    getCollectionSubmissions: GetCollectionSubmissions,
+    setPageNumber: SetPageNumber,
   });
-  protected isProviderLoading = select(CollectionsSelectors.getCollectionProviderLoading);
 
   constructor() {
-    const id = this.route.snapshot.paramMap.get('id');
-    if (id) {
-      this.providerId.set(id);
-      this.actions.getCollectionProvider(id);
-    } else {
-      this.router.navigate(['/not-found']);
-    }
-
-    effect(() => {
-      console.log(this.collectionProvider());
-    });
+    this.initializeProvider();
+    this.setupEffects();
+    this.setupSearchBinding();
   }
 
-  openHelpDialog() {
+  protected openHelpDialog(): void {
     this.dialogService.open(CollectionsHelpDialogComponent, {
       focusOnShow: false,
       header: this.translateService.instant('collections.helpDialog.header'),
@@ -57,4 +76,88 @@ 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 && 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 && sortBy && selectedFilters && pageNumber && providerId && collectionDetails) {
+        const activeFilters = this.getActiveFilters(selectedFilters);
+        this.actions.getCollectionSubmissions(providerId, searchText, activeFilters, pageNumber, sortBy);
+      }
+    });
+  }
+
+  private getActiveFilters(filters: CollectionFilters): 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/components/collections-filter-chips/collections-filter-chips.component.html b/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.html
index a6007214a..d165dc982 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,17 +1,7 @@
 <div class="mb-4 mt-4 flex gap-3 flex-wrap">
-  @if (activeFilters().programArea.length) {
-    @for (filter of activeFilters().programArea; track filter) {
-      <p-chip [label]="filter" [removable]="true" (onRemove)="onRemoveProgramAreaFilter(filter)">
-        <ng-template pTemplate="removeicon">
-          <i class="osf-icon-close text-xs font-bold text-align-center" tabindex="0" role="button"></i>
-        </ng-template>
-      </p-chip>
-    }
-  }
-
-  @if (activeFilters().collectedType.length) {
-    @for (filter of activeFilters().collectedType; track filter) {
-      <p-chip [label]="filter" [removable]="true" (onRemove)="onRemoveCollectedTypeFilter(filter)">
+  @for (filterEntry of activeFilterEntries(); track filterEntry.key) {
+    @for (filter of filterEntry.filters; track filter) {
+      <p-chip [label]="filter" [removable]="true" (onRemove)="onRemoveFilter(filterEntry.key, filter)">
         <ng-template pTemplate="removeicon">
           <i class="osf-icon-close text-xs font-bold text-align-center" tabindex="0" role="button"></i>
         </ng-template>
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 a33896b4c..18c8de2ba 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
@@ -3,9 +3,25 @@ import { createDispatchMap, select } from '@ngxs/store';
 import { PrimeTemplate } from 'primeng/api';
 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 {
+  CollectionsSelectors,
+  SetCollectedTypeFilters,
+  SetDataTypeFilters,
+  SetDiseaseFilters,
+  SetGradeLevelsFilters,
+  SetIssueFilters,
+  SetProgramAreaFilters,
+  SetReviewsStateFilters,
+  SetSchoolTypeFilters,
+  SetStatusFilters,
+  SetStudyDesignFilters,
+  SetVolumeFilters,
+} from '@osf/features/collections/store';
+
+type FilterType = keyof ReturnType<typeof CollectionsSelectors.getAllSelectedFilters>;
 
 @Component({
   selector: 'osf-collections-filter-chips',
@@ -15,19 +31,71 @@ 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,
+    reviewsState: SetReviewsStateFilters,
+    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: FilterType, 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 'programArea':
+        this.actions.programArea(currentFilters);
+        break;
+      case 'collectedType':
+        this.actions.collectedType(currentFilters);
+        break;
+      case 'status':
+        this.actions.status(currentFilters);
+        break;
+      case 'dataType':
+        this.actions.dataType(currentFilters);
+        break;
+      case 'disease':
+        this.actions.disease(currentFilters);
+        break;
+      case 'gradeLevels':
+        this.actions.gradeLevels(currentFilters);
+        break;
+      case 'issue':
+        this.actions.issue(currentFilters);
+        break;
+      case 'reviewsState':
+        this.actions.reviewsState(currentFilters);
+        break;
+      case 'schoolType':
+        this.actions.schoolType(currentFilters);
+        break;
+      case 'studyDesign':
+        this.actions.studyDesign(currentFilters);
+        break;
+      case '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 f504d2704..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 filter dropdown-filter">
-          <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 filter dropdown-filter">
-          <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..8be0bebfd 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,25 @@ 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/models';
+import {
+  CollectionsSelectors,
+  SetCollectedTypeFilters,
+  SetDataTypeFilters,
+  SetDiseaseFilters,
+  SetGradeLevelsFilters,
+  SetIssueFilters,
+  SetProgramAreaFilters,
+  SetReviewsStateFilters,
+  SetSchoolTypeFilters,
+  SetStatusFilters,
+  SetStudyDesignFilters,
+  SetVolumeFilters,
+} from '@osf/features/collections/store';
 
 @Component({
   selector: 'osf-collections-filters',
@@ -19,32 +33,85 @@ 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,
+    reviewsState: SetReviewsStateFilters,
+    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 'programArea':
+        this.actions.programArea(filters);
+        break;
+      case 'collectedType':
+        this.actions.collectedType(filters);
+        break;
+      case 'status':
+        this.actions.status(filters);
+        break;
+      case 'dataType':
+        this.actions.dataType(filters);
+        break;
+      case 'disease':
+        this.actions.disease(filters);
+        break;
+      case 'gradeLevels':
+        this.actions.gradeLevels(filters);
+        break;
+      case 'issue':
+        this.actions.issue(filters);
+        break;
+      case 'reviewsState':
+        this.actions.reviewsState(filters);
+        break;
+      case 'schoolType':
+        this.actions.schoolType(filters);
+        break;
+      case 'studyDesign':
+        this.actions.studyDesign(filters);
+        break;
+      case '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-main-content/collections-main-content.component.html b/src/app/features/collections/components/collections-main-content/collections-main-content.component.html
index 25c026fa1..5fc144f5b 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>
     }
@@ -12,10 +14,17 @@ <h3 class="highlight">{{ 'collections.searchResults.noResults' | translate }}</h
   <div class="flex align-items-center gap-2 no-border-dropdown">
     @if (isWeb()) {
       <h3 class="font-normal">{{ 'collections.filters.sort.label' | translate }}</h3>
-      <p-select [options]="sortOptions" optionLabel="label" optionValue="value" [(ngModel)]="selectedSort"></p-select>
+      <p-select
+        [options]="sortOptions"
+        optionLabel="label"
+        optionValue="value"
+        [ngModel]="selectedSort()"
+        (ngModelChange)="handleSortBy($event)"
+      ></p-select>
     } @else {
       <img
         ngSrc="assets/icons/colored/filter.svg"
+        class="custom-dark-hover cursor-pointer"
         tabindex="0"
         role="button"
         alt="filter by"
@@ -32,7 +41,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()"
       />
@@ -52,22 +61,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 }}
       </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="22rem" 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..0504877af 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,41 @@ 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 isCollectionSubmissionsLoading = select(CollectionsSelectors.getCollectionSubmissionsLoading);
 
   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 +75,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..91dad050c 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="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/collections.routes.ts b/src/app/features/collections/constants/collections.routes.ts
similarity index 92%
rename from src/app/features/collections/collections.routes.ts
rename to src/app/features/collections/constants/collections.routes.ts
index 97c57edc0..98fc43fc1 100644
--- a/src/app/features/collections/collections.routes.ts
+++ b/src/app/features/collections/constants/collections.routes.ts
@@ -4,7 +4,7 @@ import { Routes } from '@angular/router';
 
 import { CollectionsComponent } from '@osf/features/collections/collections.component';
 
-import { ModerationState } from '../moderation/store';
+import { ModerationState } from '../../moderation/store';
 
 export const collectionsRoutes: Routes = [
   {
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..1826b5113
--- /dev/null
+++ b/src/app/features/collections/constants/filter-types.const.ts
@@ -0,0 +1,15 @@
+import { CollectionFilterType } from '@osf/features/collections/models';
+
+export const collectionFilterTypes: CollectionFilterType[] = [
+  'programArea',
+  'collectedType',
+  'status',
+  'dataType',
+  'disease',
+  'gradeLevels',
+  'issue',
+  'reviewsState',
+  'schoolType',
+  'studyDesign',
+  '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/utils/sort-options.const.ts b/src/app/features/collections/constants/sort-options.const.ts
similarity index 74%
rename from src/app/features/collections/utils/sort-options.const.ts
rename to src/app/features/collections/constants/sort-options.const.ts
index 2b6377efc..1bc368c51 100644
--- a/src/app/features/collections/utils/sort-options.const.ts
+++ b/src/app/features/collections/constants/sort-options.const.ts
@@ -1,5 +1,5 @@
-export const SORT_OPTIONS = [
-  { label: 'Relevance', value: '-relevance' },
+export const collectionsSortOptions = [
+  { label: 'Relevance', value: 'relevance' },
   { label: 'Date created (newest)', value: '-dateCreated' },
   { label: 'Date created (oldest)', value: 'dateCreated' },
   { label: 'Date modified (newest)', value: '-dateModified' },
diff --git a/src/app/features/collections/mappers/collections.mapper.ts b/src/app/features/collections/mappers/collections.mapper.ts
index e9f50533b..1a4ab1764 100644
--- a/src/app/features/collections/mappers/collections.mapper.ts
+++ b/src/app/features/collections/mappers/collections.mapper.ts
@@ -1,6 +1,23 @@
-import { CollectionProvider, CollectionProviderResponseJsonApi } from '@osf/features/collections/models';
+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,
@@ -32,4 +49,56 @@ export class CollectionsMapper {
       },
     };
   }
+
+  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/models/collection-filter-type.type.ts b/src/app/features/collections/models/collection-filter-type.type.ts
new file mode 100644
index 000000000..636a20080
--- /dev/null
+++ b/src/app/features/collections/models/collection-filter-type.type.ts
@@ -0,0 +1,3 @@
+import { CollectionsSelectors } from '@osf/features/collections/store';
+
+export type CollectionFilterType = keyof ReturnType<typeof CollectionsSelectors.getAllSelectedFilters>;
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..3341aa48a
--- /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 f18c87ac0..961654f4d 100644
--- a/src/app/features/collections/models/collections.models.ts
+++ b/src/app/features/collections/models/collections.models.ts
@@ -1,55 +1,3 @@
-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 SparseCollectionAttributesJsonApi {
-  title: string;
-  bookmarks: boolean;
-}
-
-export interface SparseCollectionJsonAi {
-  id: string;
-  attributes: SparseCollectionAttributesJsonApi;
-}
-
-export interface SparseCollectionsResponseJsonApi {
-  data: SparseCollectionJsonAi[];
-}
-
 export interface CollectionProvider {
   id: string;
   type: string;
@@ -80,6 +28,58 @@ export interface CollectionProvider {
   };
 }
 
-export interface CollectionProviderGetResponseJsonApi extends JsonApiResponse<CollectionProviderResponseJsonApi, null> {
-  data: CollectionProviderResponseJsonApi;
+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 CollectionContributor {
+  id: string;
+  name: string;
+  url: string;
+}
+
+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..84fd9f5bd 100644
--- a/src/app/features/collections/models/index.ts
+++ b/src/app/features/collections/models/index.ts
@@ -1,3 +1,6 @@
+export * from './collection-filter-type.type';
 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..9beabdf8e
--- /dev/null
+++ b/src/app/features/collections/services/collections-query-sync.service.ts
@@ -0,0 +1,234 @@
+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 { 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 filtersOptions = select(CollectionsSelectors.getAllFiltersOptions);
+
+  private readonly actions = createDispatchMap({
+    setSortBy: SetSortBy,
+    setSearchValue: SetSearchValue,
+    setAllFilters: SetAllFilters,
+    setPageNumber: SetPageNumber,
+  });
+
+  constructor() {
+    this.setupFilterValidationEffect();
+  }
+
+  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 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.actions.setSortBy(params['sort']);
+    }
+
+    if (params['page']) {
+      this.actions.setPageNumber(params['page'].toString());
+    }
+  }
+
+  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 b4d664df5..58b7c307e 100644
--- a/src/app/features/collections/services/collections.service.ts
+++ b/src/app/features/collections/services/collections.service.ts
@@ -1,11 +1,26 @@
-import { map, Observable } from 'rxjs';
+import { createDispatchMap } from '@ngxs/store';
+
+import { forkJoin, map, Observable, 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 { CollectionProvider, CollectionProviderGetResponseJsonApi, SparseCollectionsResponseJsonApi } from '../models';
+import {
+  CollectionContributor,
+  CollectionDetails,
+  CollectionDetailsGetResponseJsonApi,
+  CollectionProvider,
+  CollectionProviderGetResponseJsonApi,
+  CollectionSubmission,
+  CollectionSubmissionJsonApi,
+  CollectionSubmissionsPayloadJsonApi,
+  ContributorsResponseJsonApi,
+  SparseCollectionsResponseJsonApi,
+} from '../models';
 
 import { environment } from 'src/environments/environment';
 
@@ -13,23 +28,24 @@ 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<SparseCollectionsResponseJsonApi>(environment.apiUrl + '/collections/', params)
-      .pipe(
-        map((response: SparseCollectionsResponseJsonApi) => {
-          const bookmarksCollection = response.data.find(
-            (collection) => collection.attributes.title === 'Bookmarks' && collection.attributes.bookmarks
-          );
-          return bookmarksCollection?.id ?? '';
-        })
-      );
+    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
+        );
+        return bookmarksCollection?.id ?? '';
+      })
+    );
   }
 
   addProjectToBookmarks(bookmarksId: string, projectId: string): Observable<void> {
@@ -43,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> {
@@ -57,14 +73,80 @@ 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
+    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 = 'relevance'
+  ): Observable<CollectionSubmission[]> {
+    const url = `${environment.apiUrl}/search/collections`;
+    const params: Record<string, string> = {
+      page,
+      sort: sortBy,
+    };
+    const payload: CollectionSubmissionsPayloadJsonApi = {
+      data: {
+        attributes: {
+          provider: [providerId],
+          ...activeFilters,
+          q: searchText,
+        },
+        type: 'search',
+      },
+    };
+
+    return this.jsonApiService
+      .post<JsonApiResponseWithPaging<CollectionSubmissionJsonApi[], null>>(url, payload, params)
+      .pipe(
+        switchMap((response) => {
+          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 69edca4fe..141c44177 100644
--- a/src/app/features/collections/store/collections.actions.ts
+++ b/src/app/features/collections/store/collections.actions.ts
@@ -1,9 +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';
 }
@@ -95,3 +103,45 @@ export class SetVolumeFilters {
 
   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 f596caa0a..52ea3c4bd 100644
--- a/src/app/features/collections/store/collections.model.ts
+++ b/src/app/features/collections/store/collections.model.ts
@@ -1,9 +1,20 @@
-import { CollectionProvider, 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 c9ecbdeab..76c1b68bb 100644
--- a/src/app/features/collections/store/collections.selectors.ts
+++ b/src/app/features/collections/store/collections.selectors.ts
@@ -22,77 +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;
-  }
-
-  @Selector([CollectionsState])
-  static getCollectedTypeFilters(state: CollectionsStateModel): string[] {
-    return state.filters.collectedType;
-  }
-
-  @Selector([CollectionsState])
-  static getDataTypeFilters(state: CollectionsStateModel): string[] {
-    return state.filters.dataType;
+  static getAllFiltersOptions(state: CollectionsStateModel): CollectionsFilters {
+    return state.filtersOptions;
   }
 
   @Selector([CollectionsState])
-  static getDiseaseFilters(state: CollectionsStateModel): string[] {
-    return state.filters.disease;
+  static getCollectionProvider(state: CollectionsStateModel) {
+    return state.collectionProvider.data;
   }
 
   @Selector([CollectionsState])
-  static getGradeLevelsFilters(state: CollectionsStateModel): string[] {
-    return state.filters.gradeLevels;
+  static getCollectionDetails(state: CollectionsStateModel) {
+    return state.collectionDetails.data;
   }
 
   @Selector([CollectionsState])
-  static getIssueFilters(state: CollectionsStateModel): string[] {
-    return state.filters.issue;
+  static getCollectionProviderLoading(state: CollectionsStateModel) {
+    return state.collectionProvider.isLoading;
   }
 
   @Selector([CollectionsState])
-  static getReviewsStateFilters(state: CollectionsStateModel): string[] {
-    return state.filters.reviewsState;
+  static getCollectionDetailsLoading(state: CollectionsStateModel) {
+    return state.collectionDetails.isLoading;
   }
 
   @Selector([CollectionsState])
-  static getSchoolTypeFilters(state: CollectionsStateModel): string[] {
-    return state.filters.schoolType;
+  static getCollectionSubmissions(state: CollectionsStateModel) {
+    return state.collectionSubmissions.data;
   }
 
   @Selector([CollectionsState])
-  static getStudyDesignFilters(state: CollectionsStateModel): string[] {
-    return state.filters.studyDesign;
+  static getCollectionSubmissionsLoading(state: CollectionsStateModel) {
+    return state.collectionSubmissions.isLoading;
   }
 
   @Selector([CollectionsState])
-  static getVolumeFilters(state: CollectionsStateModel): string[] {
-    return state.filters.volume;
+  static getSortBy(state: CollectionsStateModel) {
+    return state.sortBy;
   }
 
   @Selector([CollectionsState])
-  static getAllFiltersOptions(state: CollectionsStateModel): CollectionsFilters {
-    return state.filtersOptions;
+  static getSearchText(state: CollectionsStateModel) {
+    return state.searchText;
   }
 
   @Selector([CollectionsState])
-  static getCollectionProvider(state: CollectionsStateModel) {
-    return state.collectionProvider.data;
+  static getPageNumber(state: CollectionsStateModel) {
+    return state.page;
   }
 
   @Selector([CollectionsState])
-  static getCollectionProviderLoading(state: CollectionsStateModel) {
-    return state.collectionProvider.isLoading;
+  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 f965513e5..18646d6d8 100644
--- a/src/app/features/collections/store/collections.state.ts
+++ b/src/app/features/collections/store/collections.state.ts
@@ -10,18 +10,25 @@ import {
   AddProjectToBookmarks,
   ClearCollections,
   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';
@@ -47,13 +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: 'relevance',
+  searchText: '',
+  page: '1',
 };
 
 @State<CollectionsStateModel>({
@@ -87,6 +110,39 @@ export class CollectionsState {
     );
   }
 
+  @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();
@@ -107,7 +163,7 @@ export class CollectionsState {
           },
         });
       }),
-      catchError((error) => this.handleError(ctx, 'bookmarksId', error))
+      catchError((error) => this.handleError(ctx, ['bookmarksId'], error))
     );
   }
 
@@ -130,7 +186,7 @@ export class CollectionsState {
           },
         });
       }),
-      catchError((error) => this.handleError(ctx, 'bookmarksId', error))
+      catchError((error) => this.handleError(ctx, ['bookmarksId'], error))
     );
   }
 
@@ -153,7 +209,7 @@ export class CollectionsState {
           },
         });
       }),
-      catchError((error) => this.handleError(ctx, 'bookmarksId', error))
+      catchError((error) => this.handleError(ctx, ['bookmarksId'], error))
     );
   }
 
@@ -162,12 +218,24 @@ export class CollectionsState {
     ctx.patchState(COLLECTIONS_DEFAULTS);
   }
 
+  @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,
       },
     });
@@ -177,8 +245,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,
       },
     });
@@ -188,8 +256,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,
       },
     });
@@ -199,8 +267,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,
       },
     });
@@ -210,8 +278,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,
       },
     });
@@ -221,8 +289,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,
       },
     });
@@ -232,8 +300,8 @@ export class CollectionsState {
   setIssueFilters(ctx: StateContext<CollectionsStateModel>, action: SetIssueFilters) {
     const state = ctx.getState();
     ctx.patchState({
-      filters: {
-        ...state.filters,
+      currentFilters: {
+        ...state.currentFilters,
         issue: action.issueFilters,
       },
     });
@@ -243,8 +311,8 @@ export class CollectionsState {
   setReviewsStateFilters(ctx: StateContext<CollectionsStateModel>, action: SetReviewsStateFilters) {
     const state = ctx.getState();
     ctx.patchState({
-      filters: {
-        ...state.filters,
+      currentFilters: {
+        ...state.currentFilters,
         reviewsState: action.reviewsStateFilters,
       },
     });
@@ -254,8 +322,8 @@ export class CollectionsState {
   setSchoolTypeFilters(ctx: StateContext<CollectionsStateModel>, action: SetSchoolTypeFilters) {
     const state = ctx.getState();
     ctx.patchState({
-      filters: {
-        ...state.filters,
+      currentFilters: {
+        ...state.currentFilters,
         schoolType: action.schoolTypeFilters,
       },
     });
@@ -265,8 +333,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,
       },
     });
@@ -276,22 +344,87 @@ 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>,
+    sections: (keyof CollectionsStateModel)[],
+    error: Error
+  ) {
+    const state = ctx.getState();
+    sections.forEach((section) => {
+      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/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 66388c1a0..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,6 +3,7 @@ import { map } from 'rxjs/operators';
 
 import { inject, Injectable } from '@angular/core';
 
+import { JsonApiResponse } from '@core/models';
 import { JsonApiService } from '@osf/core/services';
 import { SparseCollectionsResponseJsonApi } from '@osf/features/collections/models';
 import { SortOrder } from '@osf/shared/enums';
@@ -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/project/contributors/services/contributors.service.ts b/src/app/features/project/contributors/services/contributors.service.ts
index 7ecd09a8c..6601f55e9 100644
--- a/src/app/features/project/contributors/services/contributors.service.ts
+++ b/src/app/features/project/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/features/project/files/services/project-files.service.ts b/src/app/features/project/files/services/project-files.service.ts
index afd9b9976..83020f228 100644
--- a/src/app/features/project/files/services/project-files.service.ts
+++ b/src/app/features/project/files/services/project-files.service.ts
@@ -123,7 +123,9 @@ export class ProjectFilesService {
       resource: projectId,
     };
 
-    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(projectId: string, folderId: string, isRootFolder: boolean): string {
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 e9aa3feb8..94d3851d6 100644
--- a/src/app/features/settings/tokens/services/tokens.service.ts
+++ b/src/app/features/settings/tokens/services/tokens.service.ts
@@ -43,8 +43,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<Token> {
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/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/assets/i18n/en.json b/src/assets/i18n/en.json
index c693d5445..fe775ae34 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -761,11 +761,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": {

From 8382bdf23762302536501e4b362c038f14822c18 Mon Sep 17 00:00:00 2001
From: Roman Nastyuk <rnastyuk@exoft.net>
Date: Thu, 26 Jun 2025 11:26:19 +0300
Subject: [PATCH 12/18] feat(profile-addons-api): added dynamic rendering of
 the collections nav tab

---
 .../nav-menu/nav-menu.component.html          |  2 +-
 .../components/nav-menu/nav-menu.component.ts | 43 +++++++++++++------
 src/app/core/constants/nav-items.constant.ts  |  2 +-
 .../constants/collections.routes.ts           | 11 ++++-
 4 files changed, 42 insertions(+), 16 deletions(-)

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 fc1502642..eba954cae 100644
--- a/src/app/core/components/nav-menu/nav-menu.component.ts
+++ b/src/app/core/components/nav-menu/nav-menu.component.ts
@@ -20,29 +20,37 @@ import { NavItem } from '@osf/shared/models';
   styleUrl: './nav-menu.component.scss',
 })
 export class NavMenuComponent {
-  readonly #router = inject(Router);
-  readonly #route = inject(ActivatedRoute);
+  readonly router = inject(Router);
+  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>();
 
   protected readonly currentRoute = toSignal(
-    this.#router.events.pipe(
+    this.router.events.pipe(
       filter((event): event is NavigationEnd => event instanceof NavigationEnd),
-      map(() => this.#getRouteInfo())
+      map(() => this.getRouteInfo())
     ),
     {
-      initialValue: this.#getRouteInfo(),
+      initialValue: this.getRouteInfo(),
     }
   );
 
   protected readonly currentProjectId = computed(() => this.currentRoute().projectId);
   protected readonly isProjectRoute = computed(() => !!this.currentProjectId());
+  protected readonly isCollectionsRoute = computed(() => this.currentRoute().isCollectionsWithId);
 
-  #convertToMenuItem(item: NavItem): MenuItem {
-    const currentUrl = this.#router.url;
+  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 &&
       (currentUrl.startsWith(item.path) ||
@@ -53,15 +61,24 @@ export class NavMenuComponent {
       icon: item.icon ? `osf-icon-${item.icon}` : '',
       expanded: isExpanded,
       routerLink: item.isCollapsible ? undefined : item.path,
-      items: item.items?.map((subItem) => this.#convertToMenuItem(subItem)),
+      items: item.items?.map((subItem) => this.convertToMenuItem(subItem)),
     };
   }
 
-  #getRouteInfo() {
-    const projectId = this.#route.firstChild?.snapshot.params['id'] || null;
-    const section = this.#route.firstChild?.firstChild?.snapshot.url[0]?.path || 'overview';
+  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/constants/nav-items.constant.ts b/src/app/core/constants/nav-items.constant.ts
index 264fa4c64..5421c6368 100644
--- a/src/app/core/constants/nav-items.constant.ts
+++ b/src/app/core/constants/nav-items.constant.ts
@@ -57,7 +57,7 @@ export const NAV_ITEMS: NavItem[] = [
     path: '/collections',
     label: 'navigation.collections',
     icon: 'collections',
-    useExactMatch: false,
+    useExactMatch: true,
   },
   {
     path: '/meetings',
diff --git a/src/app/features/collections/constants/collections.routes.ts b/src/app/features/collections/constants/collections.routes.ts
index 98fc43fc1..b57d89d14 100644
--- a/src/app/features/collections/constants/collections.routes.ts
+++ b/src/app/features/collections/constants/collections.routes.ts
@@ -10,13 +10,22 @@ export const collectionsRoutes: Routes = [
   {
     path: '',
     children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        loadComponent: () =>
+          import('@osf/core/components/page-not-found/page-not-found.component').then(
+            (mod) => mod.PageNotFoundComponent
+          ),
+        data: { skipBreadcrumbs: true },
+      },
       {
         path: ':id',
         pathMatch: 'full',
         component: CollectionsComponent,
       },
       {
-        path: 'moderation',
+        path: ':id/moderation',
         loadComponent: () =>
           import('@osf/features/moderation/pages/collection-moderation/collection-moderation.component').then(
             (m) => m.CollectionModerationComponent

From b7e2dd4191a7e47b504a9e09c7a243072db6dca7 Mon Sep 17 00:00:00 2001
From: Roman Nastyuk <rnastyuk@exoft.net>
Date: Fri, 27 Jun 2025 16:07:15 +0300
Subject: [PATCH 13/18] feat(collections-api): refactored branding service

---
 .../advisory-board.component.ts               |  2 +-
 .../preprints/models/preprints.models.ts      | 11 +-----
 .../landing/preprints-landing.component.ts    |  2 +-
 .../preprint-provider-discover.component.ts   |  2 +-
 .../preprint-provider-overview.component.ts   |  2 +-
 .../submit-preprint-stepper.component.scss    | 16 ++++-----
 .../submit-preprint-stepper.component.ts      |  2 +-
 .../preprints/services/brand.service.ts       | 21 ------------
 src/app/features/preprints/services/index.ts  |  1 -
 src/app/shared/models/brand.model.ts          |  9 +++++
 src/app/shared/models/index.ts                |  1 +
 src/app/shared/services/brand.service.ts      | 21 ++++++++++++
 src/app/shared/services/index.ts              |  1 +
 src/assets/styles/_variables.scss             |  8 ++---
 src/assets/styles/components/preprints.scss   | 34 +++++++++----------
 15 files changed, 67 insertions(+), 66 deletions(-)
 delete mode 100644 src/app/features/preprints/services/brand.service.ts
 create mode 100644 src/app/shared/models/brand.model.ts
 create mode 100644 src/app/shared/services/brand.service.ts

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 6d3a1e76f..1f798bd3e 100644
--- a/src/app/features/preprints/models/preprints.models.ts
+++ b/src/app/features/preprints/models/preprints.models.ts
@@ -1,14 +1,5 @@
 import { StringOrNull } from '@core/helpers';
-
-export interface Brand {
-  id: string;
-  name: string;
-  heroLogoImageUrl: string;
-  heroBackgroundImageUrl: string;
-  topNavLogoImageUrl: string;
-  primaryColor: string;
-  secondaryColor: string;
-}
+import { Brand } from '@osf/shared/models';
 
 export interface PreprintProviderDetails {
   id: 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 9ee1edfb4..e7bb1dad6 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
@@ -20,7 +20,6 @@ import { ActivatedRoute } from '@angular/router';
 import { TitleAndAbstractStepComponent } from '@osf/features/preprints/components';
 import { FileStepComponent } from '@osf/features/preprints/components/submit-steps/file-step/file-step.component';
 import { submitPreprintSteps } from '@osf/features/preprints/constants';
-import { BrandService } from '@osf/features/preprints/services';
 import {
   GetHighlightedSubjectsByProviderId,
   GetPreprintProviderById,
@@ -31,6 +30,7 @@ import {
   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/index.ts b/src/app/features/preprints/services/index.ts
index d93e065fa..cbe09a39d 100644
--- a/src/app/features/preprints/services/index.ts
+++ b/src/app/features/preprints/services/index.ts
@@ -1,3 +1,2 @@
-export { BrandService } from './brand.service';
 export { PreprintsService } from './preprints.service';
 export { PreprintsFiltersOptionsService } from './preprints-resource-filters.service';
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 bebcc60f3..eccbc6453 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/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/index.ts b/src/app/shared/services/index.ts
index ea718bdae..4bc4633bd 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/styles/_variables.scss b/src/assets/styles/_variables.scss
index 0a452f422..f2142bd16 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -159,8 +159,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);
       }
     }
   }

From 8e765b75abae9ccc084d648c00e8a4a124cd3370 Mon Sep 17 00:00:00 2001
From: Roman Nastyuk <rnastyuk@exoft.net>
Date: Tue, 1 Jul 2025 13:50:52 +0300
Subject: [PATCH 14/18] feat(collections-api): removed unused filter property

---
 .../features/collections/collections.component.ts |  8 ++++----
 .../collections-filter-chips.component.ts         |  5 -----
 .../collections-filters.component.ts              |  5 -----
 .../collections-main-content.component.ts         |  1 -
 .../collections-search-results.component.html     |  2 +-
 .../collections/constants/filter-types.const.ts   |  1 -
 .../collections/constants/sort-options.const.ts   | 10 +++++-----
 .../models/collections-filters.model.ts           |  1 -
 .../collections/services/collections.service.ts   | 15 +++++++++++----
 .../collections/store/collections.actions.ts      |  6 ------
 .../collections/store/collections.state.ts        | 14 +-------------
 src/assets/styles/overrides/dataview.scss         |  6 ++++++
 12 files changed, 28 insertions(+), 46 deletions(-)

diff --git a/src/app/features/collections/collections.component.ts b/src/app/features/collections/collections.component.ts
index 0d29f6c09..12fba3a9b 100644
--- a/src/app/features/collections/collections.component.ts
+++ b/src/app/features/collections/collections.component.ts
@@ -13,7 +13,7 @@ import { FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { CollectionsHelpDialogComponent, CollectionsMainContentComponent } from '@osf/features/collections/components';
-import { CollectionFilters } from '@osf/features/collections/models';
+import { CollectionsFilters } from '@osf/features/collections/models';
 import { CollectionsQuerySyncService } from '@osf/features/collections/services';
 import {
   CollectionsSelectors,
@@ -109,7 +109,7 @@ export class CollectionsComponent {
       const selectedFilters = this.selectedFilters();
       const pageNumber = this.pageNumber();
 
-      if (searchText !== undefined && sortBy && selectedFilters && pageNumber) {
+      if (searchText !== undefined && sortBy !== undefined && selectedFilters && pageNumber) {
         this.querySyncService.syncStoreToUrl(searchText, sortBy, selectedFilters, pageNumber);
       }
     });
@@ -122,14 +122,14 @@ export class CollectionsComponent {
       const providerId = this.providerId();
       const collectionDetails = this.collectionDetails();
 
-      if (searchText !== undefined && sortBy && selectedFilters && pageNumber && providerId && collectionDetails) {
+      if (searchText !== undefined && selectedFilters && pageNumber && providerId && collectionDetails) {
         const activeFilters = this.getActiveFilters(selectedFilters);
         this.actions.getCollectionSubmissions(providerId, searchText, activeFilters, pageNumber, sortBy);
       }
     });
   }
 
-  private getActiveFilters(filters: CollectionFilters): Record<string, string[]> {
+  private getActiveFilters(filters: CollectionsFilters): Record<string, string[]> {
     return Object.entries(filters)
       .filter(([key, value]) => value.length)
       .reduce(
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 8e5a8e758..374520514 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
@@ -13,7 +13,6 @@ import {
   SetGradeLevelsFilters,
   SetIssueFilters,
   SetProgramAreaFilters,
-  SetReviewsStateFilters,
   SetSchoolTypeFilters,
   SetStatusFilters,
   SetStudyDesignFilters,
@@ -42,7 +41,6 @@ export class CollectionsFilterChipsComponent {
     disease: SetDiseaseFilters,
     gradeLevels: SetGradeLevelsFilters,
     issue: SetIssueFilters,
-    reviewsState: SetReviewsStateFilters,
     schoolType: SetSchoolTypeFilters,
     studyDesign: SetStudyDesignFilters,
     volume: SetVolumeFilters,
@@ -83,9 +81,6 @@ export class CollectionsFilterChipsComponent {
       case 'issue':
         this.actions.issue(currentFilters);
         break;
-      case 'reviewsState':
-        this.actions.reviewsState(currentFilters);
-        break;
       case 'schoolType':
         this.actions.schoolType(currentFilters);
         break;
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 8be0bebfd..880c3761a 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
@@ -18,7 +18,6 @@ import {
   SetGradeLevelsFilters,
   SetIssueFilters,
   SetProgramAreaFilters,
-  SetReviewsStateFilters,
   SetSchoolTypeFilters,
   SetStatusFilters,
   SetStudyDesignFilters,
@@ -46,7 +45,6 @@ export class CollectionsFiltersComponent {
     disease: SetDiseaseFilters,
     gradeLevels: SetGradeLevelsFilters,
     issue: SetIssueFilters,
-    reviewsState: SetReviewsStateFilters,
     schoolType: SetSchoolTypeFilters,
     studyDesign: SetStudyDesignFilters,
     volume: SetVolumeFilters,
@@ -96,9 +94,6 @@ export class CollectionsFiltersComponent {
       case 'issue':
         this.actions.issue(filters);
         break;
-      case 'reviewsState':
-        this.actions.reviewsState(filters);
-        break;
       case 'schoolType':
         this.actions.schoolType(filters);
         break;
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 0504877af..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
@@ -39,7 +39,6 @@ export class CollectionsMainContentComponent {
   protected isWeb = toSignal(inject(IS_WEB));
   protected selectedSort = select(CollectionsSelectors.getSortBy);
   protected collectionSubmissions = select(CollectionsSelectors.getCollectionSubmissions);
-  protected isCollectionSubmissionsLoading = select(CollectionsSelectors.getCollectionSubmissionsLoading);
 
   protected isFiltersOpen = signal(false);
   protected isSortingOpen = signal(false);
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 91dad050c..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,4 +1,4 @@
-<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 (isLoading()) {
diff --git a/src/app/features/collections/constants/filter-types.const.ts b/src/app/features/collections/constants/filter-types.const.ts
index 1826b5113..8d4fc4ee8 100644
--- a/src/app/features/collections/constants/filter-types.const.ts
+++ b/src/app/features/collections/constants/filter-types.const.ts
@@ -8,7 +8,6 @@ export const collectionFilterTypes: CollectionFilterType[] = [
   'disease',
   'gradeLevels',
   'issue',
-  'reviewsState',
   'schoolType',
   'studyDesign',
   'volume',
diff --git a/src/app/features/collections/constants/sort-options.const.ts b/src/app/features/collections/constants/sort-options.const.ts
index 1bc368c51..4d7f2a112 100644
--- a/src/app/features/collections/constants/sort-options.const.ts
+++ b/src/app/features/collections/constants/sort-options.const.ts
@@ -1,7 +1,7 @@
 export const collectionsSortOptions = [
-  { 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' },
+  { label: 'Relevance', value: '' },
+  { label: 'Date created (newest)', value: '-created' },
+  { label: 'Date created (oldest)', value: 'created' },
+  { label: 'Date modified (newest)', value: '-modified' },
+  { label: 'Date modified (oldest)', value: 'modified' },
 ];
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/services/collections.service.ts b/src/app/features/collections/services/collections.service.ts
index 58b7c307e..0412ef41d 100644
--- a/src/app/features/collections/services/collections.service.ts
+++ b/src/app/features/collections/services/collections.service.ts
@@ -1,6 +1,6 @@
 import { createDispatchMap } from '@ngxs/store';
 
-import { forkJoin, map, Observable, switchMap } from 'rxjs';
+import { forkJoin, map, Observable, of, switchMap } from 'rxjs';
 
 import { inject, Injectable } from '@angular/core';
 
@@ -97,13 +97,16 @@ export class CollectionsService {
     searchText: string,
     activeFilters: Record<string, string[]>,
     page = '1',
-    sortBy = 'relevance'
+    sortBy = ''
   ): Observable<CollectionSubmission[]> {
-    const url = `${environment.apiUrl}/search/collections`;
+    const url = `${environment.apiUrl}/search/collections/`;
     const params: Record<string, string> = {
       page,
-      sort: sortBy,
     };
+
+    if (sortBy) {
+      params['sort'] = sortBy;
+    }
     const payload: CollectionSubmissionsPayloadJsonApi = {
       data: {
         attributes: {
@@ -119,6 +122,10 @@ export class CollectionsService {
       .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
           );
diff --git a/src/app/features/collections/store/collections.actions.ts b/src/app/features/collections/store/collections.actions.ts
index 141c44177..79bb855fe 100644
--- a/src/app/features/collections/store/collections.actions.ts
+++ b/src/app/features/collections/store/collections.actions.ts
@@ -80,12 +80,6 @@ export class SetIssueFilters {
   constructor(public issueFilters: string[]) {}
 }
 
-export class SetReviewsStateFilters {
-  static readonly type = '[Collections] Set Reviews State Filters';
-
-  constructor(public reviewsStateFilters: string[]) {}
-}
-
 export class SetSchoolTypeFilters {
   static readonly type = '[Collections] Set School Type Filters';
 
diff --git a/src/app/features/collections/store/collections.state.ts b/src/app/features/collections/store/collections.state.ts
index 18646d6d8..0bfd442a8 100644
--- a/src/app/features/collections/store/collections.state.ts
+++ b/src/app/features/collections/store/collections.state.ts
@@ -22,7 +22,6 @@ import {
   SetIssueFilters,
   SetPageNumber,
   SetProgramAreaFilters,
-  SetReviewsStateFilters,
   SetSchoolTypeFilters,
   SetSearchValue,
   SetSortBy,
@@ -74,7 +73,7 @@ const COLLECTIONS_DEFAULTS: CollectionsStateModel = {
     error: null,
   },
   totalSubmissions: 0,
-  sortBy: 'relevance',
+  sortBy: '',
   searchText: '',
   page: '1',
 };
@@ -307,17 +306,6 @@ export class CollectionsState {
     });
   }
 
-  @Action(SetReviewsStateFilters)
-  setReviewsStateFilters(ctx: StateContext<CollectionsStateModel>, action: SetReviewsStateFilters) {
-    const state = ctx.getState();
-    ctx.patchState({
-      currentFilters: {
-        ...state.currentFilters,
-        reviewsState: action.reviewsStateFilters,
-      },
-    });
-  }
-
   @Action(SetSchoolTypeFilters)
   setSchoolTypeFilters(ctx: StateContext<CollectionsStateModel>, action: SetSchoolTypeFilters) {
     const state = ctx.getState();
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;
+  }
+}

From fb73cd87a04a285c4d4055be70346ff575f2cf0c Mon Sep 17 00:00:00 2001
From: Roman Nastyuk <rnastyuk@exoft.net>
Date: Tue, 1 Jul 2025 14:52:04 +0300
Subject: [PATCH 15/18] feat(collections-api): added clear collection
 submissions action

---
 .../features/collections/collections.component.html |  2 +-
 .../features/collections/collections.component.ts   | 11 +++++++++++
 .../models/collections-json-api.models.ts           |  2 +-
 .../collections/services/collections.service.ts     |  7 ++++---
 .../collections/store/collections.actions.ts        |  4 ++++
 .../features/collections/store/collections.state.ts | 13 +++++++++++++
 6 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/app/features/collections/collections.component.html b/src/app/features/collections/collections.component.html
index 0e773ea36..3c453bfa4 100644
--- a/src/app/features/collections/collections.component.html
+++ b/src/app/features/collections/collections.component.html
@@ -20,7 +20,7 @@ <h1 class="flex align-items-center text-white">{{ collectionProvider()?.name }}<
         (triggerSearch)="onSearchTriggered($event)"
       />
       @if (collectionProvider()?.description) {
-        <div class="mt-6" [innerHTML]="collectionProvider()?.description"></div>
+        <div class="mt-6 text-white" [innerHTML]="collectionProvider()?.description"></div>
       }
     </div>
 
diff --git a/src/app/features/collections/collections.component.ts b/src/app/features/collections/collections.component.ts
index 12fba3a9b..a67424424 100644
--- a/src/app/features/collections/collections.component.ts
+++ b/src/app/features/collections/collections.component.ts
@@ -16,6 +16,8 @@ import { CollectionsHelpDialogComponent, CollectionsMainContentComponent } from
 import { CollectionsFilters } from '@osf/features/collections/models';
 import { CollectionsQuerySyncService } from '@osf/features/collections/services';
 import {
+  ClearCollections,
+  ClearCollectionSubmissions,
   CollectionsSelectors,
   GetCollectionDetails,
   GetCollectionProvider,
@@ -59,6 +61,8 @@ export class CollectionsComponent {
     setSearchValue: SetSearchValue,
     getCollectionSubmissions: GetCollectionSubmissions,
     setPageNumber: SetPageNumber,
+    clearCollections: ClearCollections,
+    clearCollectionsSubmissions: ClearCollectionSubmissions,
   });
 
   constructor() {
@@ -124,9 +128,16 @@ export class CollectionsComponent {
 
       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[]> {
diff --git a/src/app/features/collections/models/collections-json-api.models.ts b/src/app/features/collections/models/collections-json-api.models.ts
index 3341aa48a..534bad4f1 100644
--- a/src/app/features/collections/models/collections-json-api.models.ts
+++ b/src/app/features/collections/models/collections-json-api.models.ts
@@ -143,8 +143,8 @@ export interface CollectionSubmissionsPayloadJsonApi {
       gradeLevels?: string[];
       q?: string;
     };
-    type: string;
   };
+  type: string;
 }
 
 export interface CollectionContributorJsonApi {
diff --git a/src/app/features/collections/services/collections.service.ts b/src/app/features/collections/services/collections.service.ts
index 0412ef41d..1d24bd07b 100644
--- a/src/app/features/collections/services/collections.service.ts
+++ b/src/app/features/collections/services/collections.service.ts
@@ -97,7 +97,7 @@ export class CollectionsService {
     searchText: string,
     activeFilters: Record<string, string[]>,
     page = '1',
-    sortBy = ''
+    sortBy: string
   ): Observable<CollectionSubmission[]> {
     const url = `${environment.apiUrl}/search/collections/`;
     const params: Record<string, string> = {
@@ -107,15 +107,16 @@ export class CollectionsService {
     if (sortBy) {
       params['sort'] = sortBy;
     }
+
     const payload: CollectionSubmissionsPayloadJsonApi = {
       data: {
         attributes: {
           provider: [providerId],
           ...activeFilters,
-          q: searchText,
+          q: searchText ? searchText : '*',
         },
-        type: 'search',
       },
+      type: 'search',
     };
 
     return this.jsonApiService
diff --git a/src/app/features/collections/store/collections.actions.ts b/src/app/features/collections/store/collections.actions.ts
index 79bb855fe..71a33e3e1 100644
--- a/src/app/features/collections/store/collections.actions.ts
+++ b/src/app/features/collections/store/collections.actions.ts
@@ -38,6 +38,10 @@ 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';
 
diff --git a/src/app/features/collections/store/collections.state.ts b/src/app/features/collections/store/collections.state.ts
index 0bfd442a8..12dd2acca 100644
--- a/src/app/features/collections/store/collections.state.ts
+++ b/src/app/features/collections/store/collections.state.ts
@@ -9,6 +9,7 @@ import { CollectionsService } from '../services';
 import {
   AddProjectToBookmarks,
   ClearCollections,
+  ClearCollectionSubmissions,
   GetBookmarksCollectionId,
   GetCollectionDetails,
   GetCollectionProvider,
@@ -217,6 +218,18 @@ export class CollectionsState {
     ctx.patchState(COLLECTIONS_DEFAULTS);
   }
 
+  @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();

From 40e8ff4e54ccac909b92f28e4c8f1a9edc94bb4a Mon Sep 17 00:00:00 2001
From: Roman Nastyuk <rnastyuk@exoft.net>
Date: Tue, 1 Jul 2025 16:44:52 +0300
Subject: [PATCH 16/18] feat(profile-addons-api): resolved merge conflicts

---
 .../collections-help-dialog.component.html    |  2 +-
 .../collections-main-content.component.html   |  8 +++--
 .../collection-search-result-card.models.ts   | 25 -------------
 src/app/features/collections/models/index.ts  |  1 -
 .../collections-query-sync.service.ts         | 36 ++++++++++++++++++-
 .../services/contributors.service.ts          |  4 +--
 src/app/features/preprints/services/index.ts  |  1 -
 src/assets/i18n/en.json                       |  2 +-
 8 files changed, 44 insertions(+), 35 deletions(-)
 delete mode 100644 src/app/features/collections/models/collection-search-result-card.models.ts

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 5fc144f5b..38e588b19 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
@@ -11,15 +11,17 @@ <h3 class="highlight">{{ 'collections.searchResults.noResults' | translate }}</h
     }
   </div>
 
-  <div class="flex align-items-center gap-2 no-border-dropdown">
+  <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 font-bold"
         [options]="sortOptions"
         optionLabel="label"
         optionValue="value"
         [ngModel]="selectedSort()"
         (ngModelChange)="handleSortBy($event)"
+        appendTo="body"
       ></p-select>
     } @else {
       <img
@@ -79,7 +81,7 @@ <h3 class="font-normal">{{ 'collections.filters.sort.label' | translate }}</h3>
     @if (!isCollectionLoading()) {
       <osf-collections-filters />
     } @else {
-      <p-skeleton width="22rem" height="30rem" />
+      <p-skeleton width="23.9rem" height="30rem" />
     }
   }
 
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/index.ts b/src/app/features/collections/models/index.ts
index 84fd9f5bd..3555f73e1 100644
--- a/src/app/features/collections/models/index.ts
+++ b/src/app/features/collections/models/index.ts
@@ -1,5 +1,4 @@
 export * from './collection-filter-type.type';
-export * from './collection-search-result-card.models';
 export * from './collections.models';
 export * from './collections-filters.model';
 export * from './collections-json-api.models';
diff --git a/src/app/features/collections/services/collections-query-sync.service.ts b/src/app/features/collections/services/collections-query-sync.service.ts
index 9beabdf8e..281365746 100644
--- a/src/app/features/collections/services/collections-query-sync.service.ts
+++ b/src/app/features/collections/services/collections-query-sync.service.ts
@@ -4,6 +4,7 @@ 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';
@@ -17,6 +18,7 @@ export class CollectionsQuerySyncService {
   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);
 
@@ -29,6 +31,7 @@ export class CollectionsQuerySyncService {
 
   constructor() {
     this.setupFilterValidationEffect();
+    this.setupSortValidationEffect();
   }
 
   initializeFromUrl(): void {
@@ -57,6 +60,16 @@ export class CollectionsQuerySyncService {
     });
   }
 
+  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;
@@ -66,7 +79,7 @@ export class CollectionsQuerySyncService {
     }
 
     if (params['sort']) {
-      this.actions.setSortBy(params['sort']);
+      this.handleSortFromUrl(params['sort']);
     }
 
     if (params['page']) {
@@ -74,6 +87,27 @@ export class CollectionsQuerySyncService {
     }
   }
 
+  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'];
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/assets/i18n/en.json b/src/assets/i18n/en.json
index ac8acdb7b..984c1760a 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -912,7 +912,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"
       },

From 527855a5c503333d4ffc5aa519c4accb8ea76e78 Mon Sep 17 00:00:00 2001
From: Roman Nastyuk <rnastyuk@exoft.net>
Date: Tue, 1 Jul 2025 16:51:41 +0300
Subject: [PATCH 17/18] feat(collections-api): moved collections routes file
 out of the const folder

---
 src/app/app.routes.ts                                       | 3 +--
 .../collections/{constants => }/collections.routes.ts       | 6 ++----
 2 files changed, 3 insertions(+), 6 deletions(-)
 rename src/app/features/collections/{constants => }/collections.routes.ts (79%)

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index ea438d5c1..b0a0f9301 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -70,8 +70,7 @@ export const routes: Routes = [
       },
       {
         path: 'collections',
-        loadChildren: () =>
-          import('./features/collections/constants/collections.routes').then((mod) => mod.collectionsRoutes),
+        loadChildren: () => import('./features/collections/collections.routes').then((mod) => mod.collectionsRoutes),
       },
       {
         path: 'meetings',
diff --git a/src/app/features/collections/constants/collections.routes.ts b/src/app/features/collections/collections.routes.ts
similarity index 79%
rename from src/app/features/collections/constants/collections.routes.ts
rename to src/app/features/collections/collections.routes.ts
index b57d89d14..f43697f15 100644
--- a/src/app/features/collections/constants/collections.routes.ts
+++ b/src/app/features/collections/collections.routes.ts
@@ -4,7 +4,7 @@ import { Routes } from '@angular/router';
 
 import { CollectionsComponent } from '@osf/features/collections/collections.component';
 
-import { ModerationState } from '../../moderation/store';
+import { ModerationState } from '../moderation/store';
 
 export const collectionsRoutes: Routes = [
   {
@@ -14,9 +14,7 @@ export const collectionsRoutes: Routes = [
         path: '',
         pathMatch: 'full',
         loadComponent: () =>
-          import('@osf/core/components/page-not-found/page-not-found.component').then(
-            (mod) => mod.PageNotFoundComponent
-          ),
+          import('@core/components/page-not-found/page-not-found.component').then((mod) => mod.PageNotFoundComponent),
         data: { skipBreadcrumbs: true },
       },
       {

From b80735fc3df77eb01b377b0c06444bba057c37a0 Mon Sep 17 00:00:00 2001
From: Roman Nastyuk <rnastyuk@exoft.net>
Date: Wed, 2 Jul 2025 14:47:43 +0300
Subject: [PATCH 18/18] feat(collections-api): fixed comments

---
 .../collections/collections.routes.ts         |  5 +--
 .../collections-filter-chips.component.html   | 10 +++--
 .../collections-filter-chips.component.ts     | 25 ++++++------
 .../collections-filters.component.ts          | 22 +++++------
 .../collections-main-content.component.html   | 11 +++++-
 .../constants/filter-types.const.ts           | 22 +++++------
 .../constants/sort-options.const.ts           | 10 ++---
 .../enums/collection-filter-type.enum.ts      | 12 ++++++
 src/app/features/collections/enums/index.ts   |  1 +
 .../models/collection-filter-type.type.ts     |  3 --
 src/app/features/collections/models/index.ts  |  1 -
 .../collections/store/collections.state.ts    | 38 ++++++++-----------
 .../my-projects/store/my-projects.state.ts    | 32 ++++++++--------
 src/assets/i18n/en.json                       |  7 ++++
 14 files changed, 107 insertions(+), 92 deletions(-)
 create mode 100644 src/app/features/collections/enums/collection-filter-type.enum.ts
 create mode 100644 src/app/features/collections/enums/index.ts
 delete mode 100644 src/app/features/collections/models/collection-filter-type.type.ts

diff --git a/src/app/features/collections/collections.routes.ts b/src/app/features/collections/collections.routes.ts
index f43697f15..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 = [
@@ -20,7 +18,8 @@ export const collectionsRoutes: Routes = [
       {
         path: ':id',
         pathMatch: 'full',
-        component: CollectionsComponent,
+        loadComponent: () =>
+          import('@osf/features/collections/collections.component').then((mod) => mod.CollectionsComponent),
       },
       {
         path: ':id/moderation',
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 d165dc982..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,10 +1,12 @@
 <div class="mb-4 mt-4 flex gap-3 flex-wrap">
   @for (filterEntry of activeFilterEntries(); track filterEntry.key) {
     @for (filter of filterEntry.filters; track filter) {
-      <p-chip [label]="filter" [removable]="true" (onRemove)="onRemoveFilter(filterEntry.key, filter)">
-        <ng-template pTemplate="removeicon">
-          <i class="osf-icon-close text-xs font-bold text-align-center" tabindex="0" role="button"></i>
-        </ng-template>
+      <p-chip
+        [label]="filter"
+        removeIcon="fas fa-close"
+        [removable]="true"
+        (onRemove)="onRemoveFilter(filterEntry.key, filter)"
+      >
       </p-chip>
     }
   }
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 374520514..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
@@ -5,6 +5,7 @@ import { Chip } from 'primeng/chip';
 import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
 
 import { collectionFilterTypes } from '@osf/features/collections/constants/filter-types.const';
+import { CollectionFilterType } from '@osf/features/collections/enums';
 import {
   CollectionsSelectors,
   SetCollectedTypeFilters,
@@ -19,8 +20,6 @@ import {
   SetVolumeFilters,
 } from '@osf/features/collections/store';
 
-type FilterType = keyof ReturnType<typeof CollectionsSelectors.getAllSelectedFilters>;
-
 @Component({
   selector: 'osf-collections-filter-chips',
   imports: [Chip],
@@ -56,38 +55,38 @@ export class CollectionsFilterChipsComponent {
       .filter((entry) => entry.filters.length);
   });
 
-  protected onRemoveFilter(filterType: FilterType, removedFilter: string): void {
+  protected onRemoveFilter(filterType: CollectionFilterType, removedFilter: string): void {
     const currentFilters = this.activeFilters()[filterType].filter((filter: string) => filter !== removedFilter);
 
     switch (filterType) {
-      case 'programArea':
+      case CollectionFilterType.ProgramArea:
         this.actions.programArea(currentFilters);
         break;
-      case 'collectedType':
+      case CollectionFilterType.CollectedType:
         this.actions.collectedType(currentFilters);
         break;
-      case 'status':
+      case CollectionFilterType.Status:
         this.actions.status(currentFilters);
         break;
-      case 'dataType':
+      case CollectionFilterType.DataType:
         this.actions.dataType(currentFilters);
         break;
-      case 'disease':
+      case CollectionFilterType.Disease:
         this.actions.disease(currentFilters);
         break;
-      case 'gradeLevels':
+      case CollectionFilterType.GradeLevels:
         this.actions.gradeLevels(currentFilters);
         break;
-      case 'issue':
+      case CollectionFilterType.Issue:
         this.actions.issue(currentFilters);
         break;
-      case 'schoolType':
+      case CollectionFilterType.SchoolType:
         this.actions.schoolType(currentFilters);
         break;
-      case 'studyDesign':
+      case CollectionFilterType.StudyDesign:
         this.actions.studyDesign(currentFilters);
         break;
-      case 'volume':
+      case CollectionFilterType.Volume:
         this.actions.volume(currentFilters);
         break;
     }
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 880c3761a..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
@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { collectionFilterTypes } from '@osf/features/collections/constants/filter-types.const';
-import { CollectionFilterType } from '@osf/features/collections/models';
+import { CollectionFilterType } from '@osf/features/collections/enums';
 import {
   CollectionsSelectors,
   SetCollectedTypeFilters,
@@ -73,34 +73,34 @@ export class CollectionsFiltersComponent {
     const filters = $event.value;
 
     switch (filterType) {
-      case 'programArea':
+      case CollectionFilterType.ProgramArea:
         this.actions.programArea(filters);
         break;
-      case 'collectedType':
+      case CollectionFilterType.CollectedType:
         this.actions.collectedType(filters);
         break;
-      case 'status':
+      case CollectionFilterType.Status:
         this.actions.status(filters);
         break;
-      case 'dataType':
+      case CollectionFilterType.DataType:
         this.actions.dataType(filters);
         break;
-      case 'disease':
+      case CollectionFilterType.Disease:
         this.actions.disease(filters);
         break;
-      case 'gradeLevels':
+      case CollectionFilterType.GradeLevels:
         this.actions.gradeLevels(filters);
         break;
-      case 'issue':
+      case CollectionFilterType.Issue:
         this.actions.issue(filters);
         break;
-      case 'schoolType':
+      case CollectionFilterType.SchoolType:
         this.actions.schoolType(filters);
         break;
-      case 'studyDesign':
+      case CollectionFilterType.StudyDesign:
         this.actions.studyDesign(filters);
         break;
-      case 'volume':
+      case CollectionFilterType.Volume:
         this.actions.volume(filters);
         break;
     }
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 38e588b19..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
@@ -22,7 +22,14 @@ <h3 class="highlight">{{ 'collections.searchResults.noResults' | translate }}</h
         [ngModel]="selectedSort()"
         (ngModelChange)="handleSortBy($event)"
         appendTo="body"
-      ></p-select>
+      >
+        <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"
@@ -66,7 +73,7 @@ <h3 class="highlight">{{ 'collections.searchResults.noResults' | translate }}</h
         (click)="handleSortBy(option.value)"
         (keydown.enter)="handleSortBy(option.value)"
       >
-        {{ option.label }}
+        {{ option.label | translate }}
       </div>
     }
   </div>
diff --git a/src/app/features/collections/constants/filter-types.const.ts b/src/app/features/collections/constants/filter-types.const.ts
index 8d4fc4ee8..6645f4a75 100644
--- a/src/app/features/collections/constants/filter-types.const.ts
+++ b/src/app/features/collections/constants/filter-types.const.ts
@@ -1,14 +1,14 @@
-import { CollectionFilterType } from '@osf/features/collections/models';
+import { CollectionFilterType } from '@osf/features/collections/enums';
 
 export const collectionFilterTypes: CollectionFilterType[] = [
-  'programArea',
-  'collectedType',
-  'status',
-  'dataType',
-  'disease',
-  'gradeLevels',
-  'issue',
-  'schoolType',
-  'studyDesign',
-  'volume',
+  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/sort-options.const.ts b/src/app/features/collections/constants/sort-options.const.ts
index 4d7f2a112..2a95d3a56 100644
--- a/src/app/features/collections/constants/sort-options.const.ts
+++ b/src/app/features/collections/constants/sort-options.const.ts
@@ -1,7 +1,7 @@
 export const collectionsSortOptions = [
-  { label: 'Relevance', value: '' },
-  { label: 'Date created (newest)', value: '-created' },
-  { label: 'Date created (oldest)', value: 'created' },
-  { label: 'Date modified (newest)', value: '-modified' },
-  { label: 'Date modified (oldest)', value: 'modified' },
+  { 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/models/collection-filter-type.type.ts b/src/app/features/collections/models/collection-filter-type.type.ts
deleted file mode 100644
index 636a20080..000000000
--- a/src/app/features/collections/models/collection-filter-type.type.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CollectionsSelectors } from '@osf/features/collections/store';
-
-export type CollectionFilterType = keyof ReturnType<typeof CollectionsSelectors.getAllSelectedFilters>;
diff --git a/src/app/features/collections/models/index.ts b/src/app/features/collections/models/index.ts
index 3555f73e1..df5d4745f 100644
--- a/src/app/features/collections/models/index.ts
+++ b/src/app/features/collections/models/index.ts
@@ -1,4 +1,3 @@
-export * from './collection-filter-type.type';
 export * from './collections.models';
 export * from './collections-filters.model';
 export * from './collections-json-api.models';
diff --git a/src/app/features/collections/store/collections.state.ts b/src/app/features/collections/store/collections.state.ts
index 12dd2acca..c7e7c07ce 100644
--- a/src/app/features/collections/store/collections.state.ts
+++ b/src/app/features/collections/store/collections.state.ts
@@ -139,7 +139,7 @@ export class CollectionsState {
           },
         });
       }),
-      catchError((error) => this.handleError(ctx, ['collectionDetails'], error))
+      catchError((error) => this.handleError(ctx, 'collectionDetails', error))
     );
   }
 
@@ -163,7 +163,7 @@ export class CollectionsState {
           },
         });
       }),
-      catchError((error) => this.handleError(ctx, ['bookmarksId'], error))
+      catchError((error) => this.handleError(ctx, 'bookmarksId', error))
     );
   }
 
@@ -186,7 +186,7 @@ export class CollectionsState {
           },
         });
       }),
-      catchError((error) => this.handleError(ctx, ['bookmarksId'], error))
+      catchError((error) => this.handleError(ctx, 'bookmarksId', error))
     );
   }
 
@@ -209,7 +209,7 @@ export class CollectionsState {
           },
         });
       }),
-      catchError((error) => this.handleError(ctx, ['bookmarksId'], error))
+      catchError((error) => this.handleError(ctx, 'bookmarksId', error))
     );
   }
 
@@ -403,28 +403,22 @@ export class CollectionsState {
             },
           });
         }),
-        catchError((error) => this.handleError(ctx, ['collectionSubmissions'], error))
+        catchError((error) => this.handleError(ctx, 'collectionSubmissions', error))
       );
   }
 
-  private handleError(
-    ctx: StateContext<CollectionsStateModel>,
-    sections: (keyof CollectionsStateModel)[],
-    error: Error
-  ) {
+  private handleError(ctx: StateContext<CollectionsStateModel>, section: keyof CollectionsStateModel, error: Error) {
     const state = ctx.getState();
-    sections.forEach((section) => {
-      if (section !== 'sortBy' && section !== 'searchText' && section !== 'page' && section !== 'totalSubmissions') {
-        ctx.patchState({
-          [section]: {
-            ...state[section],
-            isLoading: false,
-            isSubmitting: false,
-            error: error.message,
-          },
-        });
-      }
-    });
+    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/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/assets/i18n/en.json b/src/assets/i18n/en.json
index 984c1760a..2f149a210 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"