diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index dbc0556de..683d06f2c 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -164,8 +164,8 @@ export const routes: Routes = [
           },
           {
             path: 'addons',
-            loadComponent: () =>
-              import('./features/project/addons/addons.component').then((mod) => mod.AddonsComponent),
+            loadChildren: () =>
+              import('./features/project/addons/constants/addons.routes').then((mod) => mod.addonsRoutes),
           },
         ],
       },
diff --git a/src/app/core/constants/ngxs-states.constant.ts b/src/app/core/constants/ngxs-states.constant.ts
index 7014a5980..7f622dcdd 100644
--- a/src/app/core/constants/ngxs-states.constant.ts
+++ b/src/app/core/constants/ngxs-states.constant.ts
@@ -10,11 +10,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/core/interceptors/auth.interceptor.ts b/src/app/core/interceptors/auth.interceptor.ts
index 0ddb43ab9..174408c69 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/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/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 f084b1d45..688500c52 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'" />
+<osf-sub-header [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>
@@ -10,42 +10,26 @@
       </p-tab>
     </p-tablist>
 
-    <p-tabpanels class="p-3 sm:p-5 flex-1">
-      <p-select
-        class="w-full mb-4 md:hidden"
+    <p-tabpanels class="flex-1 p-3 sm:p-5">
+      <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
@@ -55,11 +39,12 @@
             />
           </div>
         </section>
-
-        @if (filteredAddonCards().length) {
+        @if (!isAddonsLoading()) {
           <osf-addon-card-list [cards]="filteredAddonCards()" [showDangerButton]="false" />
         } @else {
-          <osf-loading-spinner></osf-loading-spinner>
+          <div class="flex-1 mt-4 md:mt-8 lg:pt-5">
+            <osf-loading-spinner />
+          </div>
         }
       </p-tabpanel>
       <p-tabpanel [value]="AddonTabValue.CONNECTED_ADDONS" class="flex flex-column gap-5">
@@ -69,14 +54,15 @@
           [placeholder]="'settings.addons.filters.search' | translate"
         />
 
-        @if (allAuthorizedAddons().length) {
+        @if (!isConfiguredAddonsLoading()) {
           <osf-addon-card-list
-            [cards]="allAuthorizedAddons()"
-            [cardButtonLabel]="'settings.addons.form.buttons.reconnect' | translate"
-            [showDangerButton]="true"
+            [cards]="allConfiguredAddons()"
+            [cardButtonLabel]="'settings.addons.connectAddon.configure' | translate"
           />
         } @else {
-          <osf-loading-spinner></osf-loading-spinner>
+          <div class="flex-1 mt-6 md:mt-8 lg:pt-7">
+            <osf-loading-spinner />
+          </div>
         }
       </p-tabpanel>
     </p-tabpanels>
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 2de1520ca..672cf1cb1 100644
--- a/src/app/features/project/addons/addons.component.ts
+++ b/src/app/features/project/addons/addons.component.ts
@@ -1,35 +1,48 @@
-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 { toSignal } from '@angular/core/rxjs-interop';
+import { debounceTime, distinctUntilChanged } from 'rxjs';
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  inject,
+  OnInit,
+  signal,
+} from '@angular/core';
 import { FormControl, FormsModule } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
 
 import { UserSelectors } from '@core/store/user';
+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';
 import {
   AddonsSelectors,
+  ClearConfiguredAddons,
+  DeleteAuthorizedAddon,
+  GetAddonsResourceReference,
   GetAddonsUserReference,
-  GetAuthorizedCitationAddons,
-  GetAuthorizedStorageAddons,
   GetCitationAddons,
+  GetConfiguredCitationAddons,
+  GetConfiguredStorageAddons,
   GetStorageAddons,
-} from '@osf/features/settings/addons/store';
-import { LoadingSpinnerComponent, SearchInputComponent, SubHeaderComponent } from '@shared/components';
-import { AddonCardListComponent } from '@shared/components/addons';
-import { IS_XSMALL } from '@shared/utils';
-
-import { ADDON_CATEGORY_OPTIONS, ADDON_TAB_OPTIONS, AddonCategoryValue, AddonTabValue } from './addons.constants';
+} from '@shared/stores/addons';
 
 @Component({
   selector: 'osf-addons',
   imports: [
     AddonCardListComponent,
     SearchInputComponent,
-    Select,
+    SelectComponent,
     SubHeaderComponent,
     Tab,
     TabList,
@@ -44,75 +57,147 @@ import { ADDON_CATEGORY_OPTIONS, ADDON_TAB_OPTIONS, AddonCategoryValue, AddonTab
   styleUrl: './addons.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AddonsComponent {
+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 readonly AddonTabValue = AddonTabValue;
-  #store = inject(Store);
   protected readonly defaultTabValue = AddonTabValue.ALL_ADDONS;
-  protected readonly isMobile = toSignal(inject(IS_XSMALL));
-  protected readonly searchControl = new FormControl('');
-  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 = this.#store.selectSignal(AddonsSelectors.getAuthorizedCitationAddons);
-  protected readonly allAuthorizedAddons = computed(() => {
-    const authorizedAddons = [...this.authorizedStorageAddons(), ...this.authorizedCitationAddons()];
-
-    const searchValue = this.searchControl.value?.toLowerCase() ?? '';
-    return authorizedAddons.filter((card) => card.displayName.includes(searchValue));
+  protected searchControl = new FormControl<string>('');
+  protected searchValue = signal<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.isCurrentUserLoading()
+    );
+  });
+  protected isConfiguredAddonsLoading = computed(() => {
+    return (
+      this.isConfiguredStorageAddonsLoading() ||
+      this.isConfiguredCitationAddonsLoading() ||
+      this.isResourceReferenceLoading() ||
+      this.isCurrentUserLoading()
+    );
+  });
+
+  protected actions = createDispatchMap({
+    getStorageAddons: GetStorageAddons,
+    getCitationAddons: GetCitationAddons,
+    getConfiguredStorageAddons: GetConfiguredStorageAddons,
+    getConfiguredCitationAddons: GetConfiguredCitationAddons,
+    getAddonsUserReference: GetAddonsUserReference,
+    getAddonsResourceReference: GetAddonsResourceReference,
+    deleteAuthorizedAddon: DeleteAuthorizedAddon,
+    clearConfiguredAddons: ClearConfiguredAddons,
   });
 
   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.searchValue().toLowerCase();
+    return authorizedAddons.filter((card) => card.displayName.toLowerCase().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(() => {
-    const searchValue = this.searchControl.value?.toLowerCase() ?? '';
-    return this.currentAddonsState().filter((card) => card.externalServiceName.includes(searchValue));
+  protected filteredAddonCards = computed(() => {
+    const searchValue = this.searchValue().toLowerCase();
+    return this.currentAddonsState().filter(
+      (card) =>
+        card.externalServiceName.toLowerCase().includes(searchValue) ||
+        card.displayName.toLowerCase().includes(searchValue)
+    );
   });
 
-  protected readonly tabOptions = ADDON_TAB_OPTIONS;
-  protected readonly categoryOptions = ADDON_CATEGORY_OPTIONS;
-
-  protected onCategoryChange(value: string): void {
-    this.selectedCategory.set(value);
+  protected onCategoryChange(value: Primitive): void {
+    if (typeof value === 'string') {
+      this.selectedCategory.set(value);
+    }
   }
 
   constructor() {
+    effect(() => {
+      if (this.currentUser() && !this.userReferenceId()) {
+        this.actions.getAddonsUserReference();
+      }
+    });
+
     effect(() => {
       if (this.currentUser()) {
-        this.#store.dispatch(GetAddonsUserReference);
+        const action = this.currentAction();
+        const addons = this.currentAddonsState();
+
+        if (!addons?.length) {
+          action();
+        }
       }
     });
 
     effect(() => {
-      if (this.currentUser() && this.userReferenceId()) {
-        this.#loadAddonsIfNeeded(this.userReferenceId());
+      const resourceReferenceId = this.resourceReferenceId();
+      if (resourceReferenceId) {
+        this.fetchAllConfiguredAddons(resourceReferenceId);
       }
     });
+
+    this.searchControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged()).subscribe((value) => {
+      this.searchValue.set(value ?? '');
+    });
+
+    effect(() => {
+      this.destroyRef.onDestroy(() => {
+        this.actions.clearConfiguredAddons();
+      });
+    });
   }
 
-  #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().length) {
+      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/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..bf12fc308
--- /dev/null
+++ b/src/app/features/project/addons/components/configure-addon/configure-addon.component.html
@@ -0,0 +1,77 @@
+<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()) {
+    <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 (selectedFolder()) {
+        <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
+                  (click)="toggleEditMode()"
+                  (keydown.enter)="toggleEditMode()"
+                ></p-button>
+                <p-button
+                  icon="fas fa-trash"
+                  severity="danger"
+                  text
+                  (click)="handleDisconnectAccount()"
+                  (keydown.enter)="handleDisconnectAccount()"
+                ></p-button>
+              </div>
+            </div>
+
+            <p class="font-normal mt-2">
+              {{ 'settings.addons.configureAddon.selectedFolder' | translate }}
+              <span class="font-bold">{{ selectedFolder()?.itemName }}</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="align-self-center">
+          {{ '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>
+      <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
new file mode 100644
index 000000000..e9dab5325
--- /dev/null
+++ b/src/app/features/project/addons/components/configure-addon/configure-addon.component.scss
@@ -0,0 +1,6 @@
+@use "assets/styles/mixins" as mix;
+
+:host {
+  @include mix.flex-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..0dc18af82
--- /dev/null
+++ b/src/app/features/project/addons/components/configure-addon/configure-addon.component.ts
@@ -0,0 +1,182 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+import { Button } from 'primeng/button';
+import { Card } from 'primeng/card';
+import { DialogService } from 'primeng/dynamicdialog';
+import { Skeleton } from 'primeng/skeleton';
+
+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 { OperationNames } from '@osf/features/project/addons/enums';
+import { SubHeaderComponent } from '@shared/components';
+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';
+import { getAddonTypeString } from '@shared/utils';
+
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'osf-configure-addon',
+  imports: [
+    SubHeaderComponent,
+    TranslatePipe,
+    Button,
+    RouterLink,
+    Card,
+    ReactiveFormsModule,
+    FormsModule,
+    Skeleton,
+    BreadcrumbModule,
+    FolderSelectorComponent,
+  ],
+  templateUrl: './configure-addon.component.html',
+  styleUrl: './configure-addon.component.scss',
+  providers: [DialogService, AddonDialogService],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfigureAddonComponent implements OnInit {
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+  private destroyRef = inject(DestroyRef);
+  private toastService = inject(ToastService);
+  private addonDialogService = inject(AddonDialogService);
+  private addonFormService = inject(AddonFormService);
+  private operationInvocationService = inject(AddonOperationInvocationService);
+
+  protected accountNameControl = new FormControl('');
+  protected addon = signal<ConfiguredAddon | null>(null);
+  protected isEditMode = signal<boolean>(false);
+  protected selectedRootFolderId = signal('');
+  protected addonsUserReference = select(AddonsSelectors.getAddonsUserReference);
+  protected operationInvocation = select(AddonsSelectors.getOperationInvocation);
+  protected selectedFolderOperationInvocation = select(AddonsSelectors.getSelectedFolderOperationInvocation);
+  protected selectedFolder = select(AddonsSelectors.getSelectedFolder);
+
+  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 `${environment.baseResourceUri}${id}`;
+  });
+  protected readonly addonTypeString = computed(() => {
+    return getAddonTypeString(this.addon());
+  });
+  protected readonly actions = createDispatchMap({
+    createAddonOperationInvocation: CreateAddonOperationInvocation,
+    updateConfiguredAddon: UpdateConfiguredAddon,
+    clearOperationInvocations: ClearOperationInvocations,
+  });
+
+  constructor() {
+    this.initializeAddon();
+
+    effect(() => {
+      this.destroyRef.onDestroy(() => {
+        this.actions.clearOperationInvocations();
+      });
+    });
+  }
+
+  private initializeAddon(): void {
+    const addon = this.router.getCurrentNavigation()?.extras.state?.['addon'] as ConfiguredAddon;
+
+    if (addon) {
+      this.addon.set(addon);
+      this.selectedRootFolderId.set(addon.selectedFolderId);
+      this.accountNameControl.setValue(addon.displayName);
+    } else {
+      this.router.navigate([`${this.baseUrl()}/addons`]);
+    }
+  }
+
+  protected handleCreateOperationInvocation(operationName: OperationNames, folderId: string): void {
+    const addon = this.addon();
+    if (!addon) return;
+
+    const payload = this.operationInvocationService.createOperationInvocationPayload(addon, operationName, folderId);
+
+    this.actions.createAddonOperationInvocation(payload);
+  }
+
+  ngOnInit(): void {
+    this.handleCreateOperationInvocation(OperationNames.GET_ITEM_INFO, this.selectedRootFolderId());
+  }
+
+  protected handleDisconnectAccount(): void {
+    const currentAddon = this.addon();
+    if (!currentAddon) return;
+
+    this.openDisconnectDialog(currentAddon);
+  }
+
+  private openDisconnectDialog(addon: ConfiguredAddon): void {
+    const dialogRef = this.addonDialogService.openDisconnectDialog(addon);
+
+    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.selectedFolderOperationInvocation()?.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.addonFormService.generateConfiguredAddonUpdatePayload(
+      currentAddon,
+      this.addonsUserReference()[0].id || '',
+      this.resourceUri(),
+      this.accountNameControl.value || '',
+      this.selectedRootFolderId() || '',
+      this.addonTypeString()
+    );
+
+    this.actions.updateConfiguredAddon(payload, this.addonTypeString(), currentAddon.id).subscribe({
+      complete: () => {
+        this.router.navigate([`${this.baseUrl()}/addons`]);
+        this.toastService.showSuccess('settings.addons.toast.updateSuccess', {
+          addonName: currentAddon.externalServiceName,
+        });
+      },
+    });
+  }
+}
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..3ffeb0989
--- /dev/null
+++ b/src/app/features/project/addons/components/confirm-account-connection-modal/confirm-account-connection-modal.component.ts
@@ -0,0 +1,48 @@
+import { createDispatchMap, select } 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 { OperationNames } from '@osf/features/project/addons/enums';
+import { AddonOperationInvocationService } from '@shared/services';
+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 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;
+
+    const payload = this.operationInvocationService.createInitialOperationInvocationPayload(
+      OperationNames.LIST_ROOT_ITEMS,
+      selectedAccount
+    );
+
+    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
new file mode 100644
index 000000000..e8ee1e556
--- /dev/null
+++ b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.html
@@ -0,0 +1,175 @@
+<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>
+      <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">
+              <osf-addon-terms [addon]="addon()" />
+            </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 justify-content-end">
+              <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 }}</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]="chosenAccountId()"
+                    [value]="account.id"
+                    [inputId]="account.id"
+                    (ngModelChange)="chosenAccountId.set($event)"
+                  ></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"
+                [disabled]="!chosenAccountId()"
+                [label]="'settings.addons.form.buttons.next' | translate"
+                (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>
+            <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">
+          <section class="flex flex-column gap-5">
+            <h2>{{ 'settings.addons.connectAddon.setupNewAccount' | translate }}</h2>
+
+            @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>
+
+      <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/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
new file mode 100644
index 000000000..bb28b1fd4
--- /dev/null
+++ b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.scss
@@ -0,0 +1,12 @@
+@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;
+  }
+}
diff --git a/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.spec.ts b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.spec.ts
new file mode 100644
index 000000000..d1a866264
--- /dev/null
+++ b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.spec.ts
@@ -0,0 +1,82 @@
+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 { CredentialsFormat } from '@shared/enums';
+import { Addon } from '@shared/models';
+import { AddonsSelectors } from '@shared/stores/addons';
+
+import { ConnectConfiguredAddonComponent } from './connect-configured-addon.component';
+
+describe('ConnectAddonComponent', () => {
+  let component: ConnectConfiguredAddonComponent;
+  let fixture: ComponentFixture<ConnectConfiguredAddonComponent>;
+
+  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: [ConnectConfiguredAddonComponent, 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(ConnectConfiguredAddonComponent);
+    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-configured-addon/connect-configured-addon.component.ts b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.ts
new file mode 100644
index 000000000..3718cf4cf
--- /dev/null
+++ b/src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.ts
@@ -0,0 +1,285 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+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 { Component, computed, inject, signal, viewChild } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+
+import { OperationNames } from '@osf/features/project/addons/enums';
+import { AddonConfigMap } from '@osf/features/project/addons/utils';
+import { SubHeaderComponent } from '@osf/shared/components';
+import { ProjectAddonsStepperValue } from '@osf/shared/enums';
+import {
+  AddonSetupAccountFormComponent,
+  AddonTermsComponent,
+  FolderSelectorComponent,
+} from '@shared/components/addons';
+import { Addon, AddonTerm, AuthorizedAddon, AuthorizedAddonRequestJsonApi } from '@shared/models';
+import { AddonDialogService, AddonFormService, AddonOperationInvocationService, ToastService } from '@shared/services';
+import {
+  AddonsSelectors,
+  CreateAddonOperationInvocation,
+  CreateAuthorizedAddon,
+  CreateConfiguredAddon,
+  GetAuthorizedCitationAddons,
+  GetAuthorizedStorageAddons,
+  UpdateAuthorizedAddon,
+  UpdateConfiguredAddon,
+} from '@shared/stores/addons';
+import { getAddonTypeString } from '@shared/utils';
+
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'osf-connect-configured-addon',
+  imports: [
+    SubHeaderComponent,
+    StepPanel,
+    StepPanels,
+    Stepper,
+    Button,
+    TableModule,
+    RouterLink,
+    FormsModule,
+    ReactiveFormsModule,
+    TranslatePipe,
+    RadioButtonModule,
+    FolderSelectorComponent,
+    AddonTermsComponent,
+    AddonSetupAccountFormComponent,
+    DialogModule,
+    DynamicDialogModule,
+  ],
+  templateUrl: './connect-configured-addon.component.html',
+  providers: [RadioButtonModule, DialogService, AddonDialogService],
+  styleUrl: './connect-configured-addon.component.scss',
+})
+export class ConnectConfiguredAddonComponent {
+  private translateService = inject(TranslateService);
+  private toastService = inject(ToastService);
+  private addonDialogService = inject(AddonDialogService);
+  private addonFormService = inject(AddonFormService);
+  private operationInvocationService = inject(AddonOperationInvocationService);
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+  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 selectedRootFolderId = signal('');
+
+  protected addonsUserReference = select(AddonsSelectors.getAddonsUserReference);
+  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 isCreatingAuthorizedAddon = select(AddonsSelectors.getCreatedOrUpdatedStorageAddonSubmitting);
+
+  protected actions = createDispatchMap({
+    getAuthorizedStorageAddons: GetAuthorizedStorageAddons,
+    getAuthorizedCitationAddons: GetAuthorizedCitationAddons,
+    createAuthorizedAddon: CreateAuthorizedAddon,
+    createConfiguredAddon: CreateConfiguredAddon,
+    updateConfiguredAddon: UpdateConfiguredAddon,
+    updateAuthorizedAddon: UpdateAuthorizedAddon,
+    createAddonOperationInvocation: CreateAddonOperationInvocation,
+  });
+
+  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 resourceUri = computed(() => {
+    const id = this.route.parent?.parent?.snapshot.params['id'];
+
+    return `${environment.baseResourceUri}${id}`;
+  });
+
+  protected addonTypeString = computed(() => {
+    return getAddonTypeString(this.addon());
+  });
+
+  protected readonly baseUrl = computed(() => {
+    const currentUrl = this.router.url;
+    return currentUrl.split('/addons')[0];
+  });
+
+  constructor() {
+    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() {
+    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(payload: AuthorizedAddonRequestJsonApi): void {
+    if (!this.addon()) return;
+
+    this.actions.createAuthorizedAddon(payload, this.addonTypeString()).subscribe({
+      complete: () => {
+        const createdAddon = this.createdAuthorizedAddon();
+        if (createdAddon) {
+          this.addonAuthUrl.set(createdAddon.attributes.auth_url);
+          window.open(createdAddon.attributes.auth_url, '_blank');
+          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.addonDialogService.openConfirmAccountConnectionDialog(selectedAccount);
+
+    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 null;
+    }
+
+    return { addonType, referenceId, currentAddon };
+  }
+
+  private getAddonConfig(addonType: string, referenceId: string) {
+    const addonConfigMap: AddonConfigMap = {
+      storage: {
+        getAddons: () => this.actions.getAuthorizedStorageAddons(referenceId),
+        getAuthorizedAddons: () => this.authorizedStorageAddons(),
+      },
+      citation: {
+        getAddons: () => this.actions.getAuthorizedCitationAddons(referenceId),
+        getAuthorizedAddons: () => this.authorizedCitationAddons(),
+      },
+    };
+
+    return addonConfigMap[addonType] || null;
+  }
+
+  private processAuthorizedAddons(
+    addonConfig: AddonConfigMap[keyof AddonConfigMap],
+    currentAddon: Addon | AuthorizedAddon
+  ) {
+    const authorizedAddons = addonConfig.getAuthorizedAddons();
+    const matchingAddons = this.findMatchingAddons(authorizedAddons, currentAddon);
+
+    if (matchingAddons.length > 0) {
+      this.currentAuthorizedAddonAccounts.set(matchingAddons);
+    }
+
+    const nextStep =
+      matchingAddons.length > 0
+        ? ProjectAddonsStepperValue.CHOOSE_CONNECTION
+        : ProjectAddonsStepperValue.SETUP_NEW_ACCOUNT;
+
+    this.stepper()?.value.set(nextStep);
+  }
+
+  private findMatchingAddons(
+    authorizedAddons: AuthorizedAddon[],
+    currentAddon: Addon | AuthorizedAddon
+  ): AuthorizedAddon[] {
+    return authorizedAddons.filter((addon) => addon.externalServiceName === currentAddon.externalServiceName);
+  }
+
+  protected handleCreateOperationInvocation(operationName: OperationNames, itemId: string): void {
+    const selectedAccount = this.currentAuthorizedAddonAccounts().find(
+      (account) => account.id === this.chosenAccountId()
+    );
+
+    if (!selectedAccount) return;
+
+    const payload = this.operationInvocationService.createInitialOperationInvocationPayload(
+      operationName,
+      selectedAccount,
+      itemId
+    );
+
+    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
new file mode 100644
index 000000000..e665b6e3d
--- /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">{{ selectedFolder()?.itemName }}</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..2821f7432
--- /dev/null
+++ b/src/app/features/project/addons/components/disconnect-addon-modal/disconnect-addon-modal.component.ts
@@ -0,0 +1,39 @@
+import { createDispatchMap, select } 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);
+  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.actions.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
new file mode 100644
index 000000000..0fb838b75
--- /dev/null
+++ b/src/app/features/project/addons/components/index.ts
@@ -0,0 +1,4 @@
+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/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/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/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/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/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/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/account-settings/account-settings.component.html b/src/app/features/settings/account-settings/account-settings.component.html
index 5f49e314f..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 [showButton]="false" [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 085bbdbed..c2cb58c8f 100644
--- a/src/app/features/settings/addons/addons.component.html
+++ b/src/app/features/settings/addons/addons.component.html
@@ -1,55 +1,35 @@
-<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-tabpanel [value]="0" class="flex flex-column gap-5">
+    <p-tabpanels class="flex-1 p-3 sm:p-5">
+      <osf-select
+        class="font-bold md:hidden"
+        [options]="tabOptions"
+        [(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
@@ -60,27 +40,31 @@
           </div>
         </section>
 
-        @if (filteredAddonCards().length) {
+        @if (!isAddonsLoading()) {
           <osf-addon-card-list [cards]="filteredAddonCards()" [showDangerButton]="false" />
         } @else {
-          <osf-loading-spinner></osf-loading-spinner>
+          <div class="mt-8">
+            <osf-loading-spinner />
+          </div>
         }
       </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"
           [placeholder]="'settings.addons.filters.search' | translate"
         />
 
-        @if (allAuthorizedAddons().length) {
+        @if (!isAuthorizedAddonsLoading()) {
           <osf-addon-card-list
             [cards]="allAuthorizedAddons()"
             [cardButtonLabel]="'settings.addons.form.buttons.reconnect' | translate"
             [showDangerButton]="true"
           />
         } @else {
-          <osf-loading-spinner></osf-loading-spinner>
+          <div class="mt-8">
+            <osf-loading-spinner />
+          </div>
         }
       </p-tabpanel>
     </p-tabpanels>
diff --git a/src/app/features/settings/addons/addons.component.spec.ts b/src/app/features/settings/addons/addons.component.spec.ts
index 9ba6009f4..aa1e2b046 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;
@@ -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 f09042366..d44b67c2e 100644
--- a/src/app/features/settings/addons/addons.component.ts
+++ b/src/app/features/settings/addons/addons.component.ts
@@ -1,29 +1,37 @@
-import { Store } from '@ngxs/store';
+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 { ChangeDetectionStrategy, Component, computed, effect, inject, signal } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
+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 { SelectOption } from '@osf/shared/models';
-import { IS_XSMALL } from '@osf/shared/utils';
+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';
 import {
   AddonsSelectors,
+  CreateAuthorizedAddon,
+  DeleteAuthorizedAddon,
   GetAddonsUserReference,
   GetAuthorizedCitationAddons,
   GetAuthorizedStorageAddons,
   GetCitationAddons,
   GetStorageAddons,
-} from './store';
+  UpdateAuthorizedAddon,
+} from '@shared/stores/addons';
 
 @Component({
   selector: 'osf-addons',
@@ -37,7 +45,7 @@ import {
     SearchInputComponent,
     AutoCompleteModule,
     AddonCardListComponent,
-    SelectModule,
+    SelectComponent,
     FormsModule,
     TranslatePipe,
     LoadingSpinnerComponent,
@@ -47,23 +55,61 @@ import {
   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);
+  protected readonly tabOptions = ADDON_TAB_OPTIONS;
+  protected readonly categoryOptions = ADDON_CATEGORY_OPTIONS;
+  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);
+
+  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 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() ||
+      this.isUserReferenceLoading() ||
+      this.isCurrentUserLoading()
+    );
+  });
+  protected isAuthorizedAddonsLoading = computed(() => {
+    return (
+      this.isAuthorizedStorageAddonsLoading() ||
+      this.isAuthorizedCitationAddonsLoading() ||
+      this.isUserReferenceLoading() ||
+      this.isCurrentUserLoading()
+    );
+  });
+
+  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()];
 
-    const searchValue = this.searchControl.value?.toLowerCase() ?? '';
+    const searchValue = this.searchValue().toLowerCase();
     return authorizedAddons.filter((card) => card.displayName.includes(searchValue));
   });
 
@@ -72,66 +118,57 @@ 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(() => {
-    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 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);
+  protected onCategoryChange(value: Primitive): void {
+    if (typeof value === 'string') {
+      this.selectedCategory.set(value);
+    }
   }
 
   constructor() {
     effect(() => {
       if (this.currentUser()) {
-        this.#store.dispatch(GetAddonsUserReference);
+        this.actions.getAddonsUserReference();
       }
     });
 
     effect(() => {
       if (this.currentUser() && this.userReferenceId()) {
-        this.#loadAddonsIfNeeded(this.userReferenceId());
+        const action = this.currentAction();
+        const addons = this.currentAddonsState();
+
+        if (!addons?.length) {
+          action();
+        }
       }
     });
-  }
 
-  #loadAddonsIfNeeded(userReferenceId: string): void {
-    const action = this.currentAction();
-    const addons = this.currentAddonsState();
+    effect(() => {
+      if (this.currentUser() && this.userReferenceId()) {
+        this.fetchAllAuthorizedAddons(this.userReferenceId());
+      }
+    });
 
-    if (!addons?.length) {
-      this.#store.dispatch(action);
-      this.#store.dispatch(new GetAuthorizedStorageAddons(userReferenceId));
-      this.#store.dispatch(new GetAuthorizedCitationAddons(userReferenceId));
-    }
+    this.searchControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged()).subscribe((value) => {
+      this.searchValue.set(value ?? '');
+    });
+  }
+
+  private fetchAllAuthorizedAddons(userReferenceId: string): void {
+    this.actions.getAuthorizedStorageAddons(userReferenceId);
+    this.actions.getAuthorizedCitationAddons(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
new file mode 100644
index 000000000..1fd573822
--- /dev/null
+++ b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.html
@@ -0,0 +1,85 @@
+<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>
+      <p-step-panel [value]="ProjectAddonsStepperValue.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">
+              <osf-addon-terms [addon]="addon()" />
+            </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="/settings/addons"
+              ></p-button>
+              <p-button
+                [label]="'settings.addons.form.buttons.next' | translate"
+                class="w-10rem btn-full-width"
+                (onClick)="activateCallback(ProjectAddonsStepperValue.SETUP_NEW_ACCOUNT)"
+              ></p-button>
+            </div>
+          </section>
+        </ng-template>
+      </p-step-panel>
+
+      <p-step-panel [value]="ProjectAddonsStepperValue.SETUP_NEW_ACCOUNT">
+        <ng-template #content let-activateCallback="activateCallback">
+          @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]="ProjectAddonsStepperValue.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="/settings/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/settings/addons/components/connect-addon/connect-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/settings/addons/components/connect-addon/connect-addon.component.scss
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 91%
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 dd91ebd93..09cdde185 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
@@ -10,10 +10,9 @@ import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { ActivatedRoute, Navigation, Router, UrlTree } from '@angular/router';
 
 import { SubHeaderComponent } from '@osf/shared/components';
-
-import { CredentialsFormat } from '../../enums';
-import { Addon } from '../../models';
-import { AddonsSelectors } from '../../store';
+import { CredentialsFormat } from '@shared/enums';
+import { Addon } from '@shared/models';
+import { AddonsSelectors } from '@shared/stores/addons';
 
 import { ConnectAddonComponent } from './connect-addon.component';
 
@@ -50,10 +49,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/components/connect-addon/connect-addon.component.ts b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.ts
new file mode 100644
index 000000000..aef52ffa8
--- /dev/null
+++ b/src/app/features/settings/addons/components/connect-addon/connect-addon.component.ts
@@ -0,0 +1,101 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { StepPanel, StepPanels, Stepper } from 'primeng/stepper';
+import { TableModule } from 'primeng/table';
+
+import { Component, computed, effect, inject, signal, viewChild } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+
+import { SubHeaderComponent } from '@osf/shared/components';
+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',
+  imports: [
+    SubHeaderComponent,
+    StepPanel,
+    StepPanels,
+    Stepper,
+    Button,
+    TableModule,
+    RouterLink,
+    FormsModule,
+    ReactiveFormsModule,
+    TranslatePipe,
+    AddonTermsComponent,
+    AddonSetupAccountFormComponent,
+  ],
+  templateUrl: './connect-addon.component.html',
+  styleUrl: './connect-addon.component.scss',
+})
+export class ConnectAddonComponent {
+  private router = inject(Router);
+  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 addonsUserReference = select(AddonsSelectors.getAddonsUserReference);
+  protected createdAddon = select(AddonsSelectors.getCreatedOrUpdatedAuthorizedAddon);
+  protected isCreatingAuthorizedAddon = select(AddonsSelectors.getCreatedOrUpdatedStorageAddonSubmitting);
+  protected isAuthorized = computed(() => {
+    return isAuthorizedAddon(this.addon());
+  });
+  protected addonTypeString = computed(() => {
+    return getAddonTypeString(this.addon());
+  });
+
+  protected actions = createDispatchMap({
+    createAuthorizedAddon: CreateAuthorizedAddon,
+    updateAuthorizedAddon: UpdateAuthorizedAddon,
+  });
+
+  protected readonly userReferenceId = computed(() => {
+    return this.addonsUserReference()[0]?.id;
+  });
+  protected readonly baseUrl = computed(() => {
+    const currentUrl = this.router.url;
+    return currentUrl.split('/addons')[0];
+  });
+
+  constructor() {
+    const addon = this.router.getCurrentNavigation()?.extras.state?.['addon'] as Addon | AuthorizedAddon;
+    if (!addon) {
+      this.router.navigate([`${this.baseUrl()}/addons`]);
+    }
+    this.addon.set(addon);
+
+    effect(() => {
+      if (this.isAuthorized()) {
+        this.stepper()?.value.set(ProjectAddonsStepperValue.SETUP_NEW_ACCOUNT);
+      }
+    });
+  }
+
+  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/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/addon.mapper.ts b/src/app/features/settings/addons/mappers/addon.mapper.ts
deleted file mode 100644
index ec96cc839..000000000
--- a/src/app/features/settings/addons/mappers/addon.mapper.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Addon, AddonGetResponse, AuthorizedAddon, AuthorizedAddonGetResponse, IncludedAddonData } from '../models';
-
-export class AddonMapper {
-  static fromResponse(response: AddonGetResponse): Addon {
-    return {
-      type: response.type,
-      id: response.id,
-      authUrl: response.attributes.auth_uri,
-      displayName: response.attributes.display_name,
-      externalServiceName: response.attributes.external_service_name,
-      supportedFeatures: response.attributes.supported_features,
-      credentialsFormat: response.attributes.credentials_format,
-      providerName: response.attributes.display_name,
-    };
-  }
-
-  static fromAuthorizedAddonResponse(
-    response: AuthorizedAddonGetResponse,
-    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) || '';
-    const supportedFeatures = (matchingService?.['supported_features'] as string[]) || [];
-
-    return {
-      type: response.type,
-      id: response.id,
-      displayName: response.attributes.display_name,
-      apiBaseUrl: response.attributes.api_base_url,
-      authUrl: response.attributes.auth_url,
-      authorizedCapabilities: response.attributes.authorized_capabilities,
-      authorizedOperationNames: response.attributes.authorized_operation_names,
-      defaultRootFolder: response.attributes.default_root_folder,
-      credentialsAvailable: response.attributes.credentials_available,
-      accountOwnerId: response.relationships.account_owner.data.id,
-      externalStorageServiceId: externalServiceId || '',
-      externalServiceName,
-      supportedFeatures,
-      credentialsFormat,
-      providerName: displayName,
-    };
-  }
-}
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 1da58de17..000000000
--- a/src/app/features/settings/addons/models/index.ts
+++ /dev/null
@@ -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.html b/src/app/features/settings/addons/pages/connect-addon/connect-addon.component.html
deleted file mode 100644
index 100e075f2..000000000
--- a/src/app/features/settings/addons/pages/connect-addon/connect-addon.component.html
+++ /dev/null
@@ -1,338 +0,0 @@
-<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-step-panels>
-      <p-step-panel [value]="1">
-        <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="/settings/addons"
-              ></p-button>
-              <p-button
-                [label]="'settings.addons.form.buttons.next' | translate"
-                class="w-10rem btn-full-width"
-                (onClick)="activateCallback(2)"
-              ></p-button>
-            </div>
-          </section>
-        </ng-template>
-      </p-step-panel>
-
-      <p-step-panel [value]="2">
-        <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>
-        </ng-template>
-      </p-step-panel>
-
-      <p-step-panel [value]="3">
-        <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="/settings/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>
-      <!--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/pages/connect-addon/connect-addon.component.ts b/src/app/features/settings/addons/pages/connect-addon/connect-addon.component.ts
deleted file mode 100644
index f0f982545..000000000
--- a/src/app/features/settings/addons/pages/connect-addon/connect-addon.component.ts
+++ /dev/null
@@ -1,275 +0,0 @@
-import { Store } 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 { Router, RouterLink } from '@angular/router';
-
-import { SubHeaderComponent } from '@osf/shared/components';
-
-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',
-  imports: [
-    SubHeaderComponent,
-    StepPanel,
-    StepPanels,
-    Stepper,
-    Button,
-    TableModule,
-    RouterLink,
-    NgClass,
-    Card,
-    FormsModule,
-    ReactiveFormsModule,
-    InputText,
-    Password,
-    TranslatePipe,
-  ],
-  templateUrl: './connect-addon.component.html',
-  styleUrl: './connect-addon.component.scss',
-})
-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);
-  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 readonly 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>;
-
-  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
-      }
-    });
-  }
-
-  // toggleFolderSelection(folder: GoogleDriveFolder): void {
-  //   folder.selected = !folder.selected;
-  //   this.selectedFolders.set(
-  //     this.folders.filter((f) => f.selected).map((f) => f.name),
-  //   );
-  // }
-
-  handleConnectStorageAddon() {
-    if (!this.addon() || !this.addonForm.valid) return;
-
-    this.isConnecting.set(true);
-    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);
-          }
-          this.isConnecting.set(false);
-        },
-        error: () => {
-          this.isConnecting.set(false);
-        },
-      });
-  }
-
-  #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);
-  }
-
-  #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.userReference()[0].id || '',
-            },
-          },
-          ...this.#getServiceRelationship(addon),
-        },
-        type: `authorized-${this.addonTypeString()}-accounts`,
-      },
-    };
-
-    return requestPayload;
-  }
-
-  #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
-        },
-      },
-    };
-  }
-
-  #getTerms(): AddonTerm[] {
-    const addon = this.#router.getCurrentNavigation()?.extras.state?.['addon'] as Addon | AuthorizedAddon;
-    if (!addon) {
-      this.#router.navigate(['/settings/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/settings/addons/services/addons.service.ts b/src/app/features/settings/addons/services/addons.service.ts
deleted file mode 100644
index 91f36fc0a..000000000
--- a/src/app/features/settings/addons/services/addons.service.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { Store } from '@ngxs/store';
-
-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 {
-  Addon,
-  AddonGetResponse,
-  AddonRequest,
-  AddonResponse,
-  AuthorizedAddon,
-  AuthorizedAddonGetResponse,
-  IncludedAddonData,
-  UserReference,
-} from '../models';
-
-import { environment } from 'src/environments/environment';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class AddonsService {
-  #store = inject(Store);
-  #jsonApiService = inject(JsonApiService);
-  #currentUser = this.#store.selectSignal(UserSelectors.getCurrentUser);
-
-  getAddons(addonType: string): Observable<Addon[]> {
-    return this.#jsonApiService
-      .get<JsonApiResponse<AddonGetResponse[], null>>(`${environment.addonsApiUrl}/external-${addonType}-services`)
-      .pipe(
-        map((response) => {
-          return response.data.map((item) => AddonMapper.fromResponse(item));
-        })
-      );
-  }
-
-  getAddonsUserReference(): Observable<UserReference[]> {
-    const currentUser = this.#currentUser();
-    if (!currentUser) throw new Error('Current user not found');
-
-    const userUri = `https://staging4.osf.io/${currentUser.id}`;
-    const params = {
-      'filter[user_uri]': userUri,
-    };
-
-    return this.#jsonApiService
-      .get<JsonApiResponse<UserReference[], null>>(environment.addonsApiUrl + '/user-references/', params)
-      .pipe(map((response) => response.data));
-  }
-
-  getAuthorizedAddons(addonType: string, referenceId: string): Observable<AuthorizedAddon[]> {
-    const params = {
-      [`fields[external-${addonType}-services]`]: 'external_service_name',
-    };
-    return this.#jsonApiService
-      .get<
-        JsonApiResponse<AuthorizedAddonGetResponse[], IncludedAddonData[]>
-      >(`${environment.addonsApiUrl}/user-references/${referenceId}/authorized_${addonType}_accounts/?include=external-${addonType}-service`, params)
-      .pipe(
-        map((response) => {
-          return response.data.map((item) => AddonMapper.fromAuthorizedAddonResponse(item, response.included));
-        })
-      );
-  }
-
-  createAuthorizedAddon(addonRequestPayload: AddonRequest, addonType: string): Observable<AddonResponse> {
-    return this.#jsonApiService.post<AddonResponse>(
-      `${environment.addonsApiUrl}/authorized-${addonType}-accounts/`,
-      addonRequestPayload
-    );
-  }
-
-  updateAuthorizedAddon(
-    addonRequestPayload: AddonRequest,
-    addonType: string,
-    addonId: string
-  ): Observable<AddonResponse> {
-    return this.#jsonApiService.patch<AddonResponse>(
-      `${environment.addonsApiUrl}/authorized-${addonType}-accounts/${addonId}/`,
-      addonRequestPayload
-    );
-  }
-
-  deleteAuthorizedAddon(id: string, addonType: string): Observable<void> {
-    return this.#jsonApiService.delete(`${environment.addonsApiUrl}/authorized-${addonType}-accounts/${id}/`);
-  }
-}
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/features/settings/addons/store/addons.actions.ts b/src/app/features/settings/addons/store/addons.actions.ts
deleted file mode 100644
index 53c1b977f..000000000
--- a/src/app/features/settings/addons/store/addons.actions.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { AddonRequest } from '../models';
-
-export class GetStorageAddons {
-  static readonly type = '[Addons] Get Storage Addons';
-}
-
-export class GetCitationAddons {
-  static readonly type = '[Addons] Get Citation Addons';
-}
-
-export class GetAuthorizedStorageAddons {
-  static readonly type = '[Addons] Get Authorized Storage Addons';
-
-  constructor(public referenceId: string) {}
-}
-
-export class GetAuthorizedCitationAddons {
-  static readonly type = '[Addons] Get Authorized Citation Addons';
-
-  constructor(public referenceId: string) {}
-}
-
-export class CreateAuthorizedAddon {
-  static readonly type = '[Addons] Create Storage Addon';
-
-  constructor(
-    public payload: AddonRequest,
-    public addonType: string
-  ) {}
-}
-
-export class UpdateAuthorizedAddon {
-  static readonly type = '[Addons] Update Storage Addon';
-
-  constructor(
-    public payload: AddonRequest,
-    public addonType: string,
-    public addonId: string
-  ) {}
-}
-
-export class GetAddonsUserReference {
-  static readonly type = '[Addons] Get Addons User Reference';
-}
-
-export class DeleteAuthorizedAddon {
-  static readonly type = '[Addons] Delete Authorized Addon';
-
-  constructor(
-    public payload: string,
-    public addonType: string
-  ) {}
-}
diff --git a/src/app/features/settings/addons/store/addons.models.ts b/src/app/features/settings/addons/store/addons.models.ts
deleted file mode 100644
index 30864329f..000000000
--- a/src/app/features/settings/addons/store/addons.models.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Addon, AddonResponse, AuthorizedAddon, UserReference } from '../models';
-
-export interface AddonsStateModel {
-  storageAddons: Addon[];
-  citationAddons: Addon[];
-  authorizedStorageAddons: AuthorizedAddon[];
-  authorizedCitationAddons: AuthorizedAddon[];
-  addonsUserReference: UserReference[];
-  createdUpdatedAuthorizedAddon: AddonResponse | null;
-}
diff --git a/src/app/features/settings/addons/store/addons.selectors.ts b/src/app/features/settings/addons/store/addons.selectors.ts
deleted file mode 100644
index df1c3e64c..000000000
--- a/src/app/features/settings/addons/store/addons.selectors.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Selector } from '@ngxs/store';
-
-import { Addon } from '../models';
-
-import { AddonsStateModel } from './addons.models';
-import { AddonsState } from './addons.state';
-
-export class AddonsSelectors {
-  @Selector([AddonsState])
-  static getStorageAddons(state: AddonsStateModel): Addon[] {
-    return state.storageAddons;
-  }
-
-  @Selector([AddonsState])
-  static getCitationAddons(state: AddonsStateModel): Addon[] {
-    return state.citationAddons;
-  }
-
-  @Selector([AddonsState])
-  static getAuthorizedStorageAddons(state: AddonsStateModel) {
-    return state.authorizedStorageAddons;
-  }
-
-  @Selector([AddonsState])
-  static getAuthorizedCitationAddons(state: AddonsStateModel) {
-    return state.authorizedCitationAddons;
-  }
-
-  @Selector([AddonsState])
-  static getAddonUserReference(state: AddonsStateModel) {
-    return state.addonsUserReference;
-  }
-
-  @Selector([AddonsState])
-  static getCreatedOrUpdatedStorageAddon(state: AddonsStateModel) {
-    return state.createdUpdatedAuthorizedAddon;
-  }
-}
diff --git a/src/app/features/settings/addons/store/addons.state.ts b/src/app/features/settings/addons/store/addons.state.ts
deleted file mode 100644
index 18bc5c04b..000000000
--- a/src/app/features/settings/addons/store/addons.state.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import { Action, State, StateContext } from '@ngxs/store';
-
-import { Observable, switchMap, tap } from 'rxjs';
-
-import { inject, Injectable } from '@angular/core';
-
-import { AddonResponse } from '../models';
-import { AddonsService } from '../services';
-
-import {
-  CreateAuthorizedAddon,
-  DeleteAuthorizedAddon,
-  GetAddonsUserReference,
-  GetAuthorizedCitationAddons,
-  GetAuthorizedStorageAddons,
-  GetCitationAddons,
-  GetStorageAddons,
-  UpdateAuthorizedAddon,
-} from './addons.actions';
-import { AddonsStateModel } from './addons.models';
-
-@State<AddonsStateModel>({
-  name: 'addons',
-  defaults: {
-    storageAddons: [],
-    citationAddons: [],
-    authorizedStorageAddons: [],
-    authorizedCitationAddons: [],
-    addonsUserReference: [],
-    createdUpdatedAuthorizedAddon: null,
-  },
-})
-@Injectable()
-export class AddonsState {
-  addonsService = inject(AddonsService);
-
-  @Action(GetStorageAddons)
-  getStorageAddons(ctx: StateContext<AddonsStateModel>) {
-    return this.addonsService.getAddons('storage').pipe(
-      tap((addons) => {
-        ctx.patchState({ storageAddons: addons });
-      })
-    );
-  }
-
-  @Action(GetCitationAddons)
-  getCitationAddons(ctx: StateContext<AddonsStateModel>) {
-    return this.addonsService.getAddons('citation').pipe(
-      tap((addons) => {
-        ctx.patchState({ citationAddons: addons });
-      })
-    );
-  }
-
-  @Action(GetAuthorizedStorageAddons)
-  getAuthorizedStorageAddons(ctx: StateContext<AddonsStateModel>, action: GetAuthorizedStorageAddons) {
-    return this.addonsService.getAuthorizedAddons('storage', action.referenceId).pipe(
-      tap((addons) => {
-        ctx.patchState({ authorizedStorageAddons: addons });
-      })
-    );
-  }
-
-  @Action(GetAuthorizedCitationAddons)
-  getAuthorizedCitationAddons(ctx: StateContext<AddonsStateModel>, action: GetAuthorizedCitationAddons) {
-    return this.addonsService.getAuthorizedAddons('citation', action.referenceId).pipe(
-      tap((addons) => {
-        ctx.patchState({ authorizedCitationAddons: addons });
-      })
-    );
-  }
-
-  @Action(CreateAuthorizedAddon)
-  createAuthorizedAddon(ctx: StateContext<AddonsStateModel>, action: CreateAuthorizedAddon): Observable<AddonResponse> {
-    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));
-      })
-    );
-  }
-
-  @Action(UpdateAuthorizedAddon)
-  updateAuthorizedAddon(ctx: StateContext<AddonsStateModel>, action: UpdateAuthorizedAddon): Observable<AddonResponse> {
-    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));
-      })
-    );
-  }
-
-  @Action(GetAddonsUserReference)
-  getAddonsUserReference(ctx: StateContext<AddonsStateModel>) {
-    return this.addonsService.getAddonsUserReference().pipe(
-      tap((userReference) => {
-        ctx.patchState({ addonsUserReference: userReference });
-      })
-    );
-  }
-
-  @Action(DeleteAuthorizedAddon)
-  deleteAuthorizedAddon(ctx: StateContext<AddonsStateModel>, action: DeleteAuthorizedAddon) {
-    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));
-      })
-    );
-  }
-}
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/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/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-list/addon-card-list.component.html b/src/app/shared/components/addons/addon-card-list/addon-card-list.component.html
index 80578f42a..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,9 +1,11 @@
 <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>
     }
+  } @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 a502c0ebb..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 { Addon, AuthorizedAddon } from '@osf/features/settings/addons/models';
 import { AddonCardComponent } from '@shared/components/addons';
+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.html b/src/app/shared/components/addons/addon-card/addon-card.component.html
index f715f4e9e..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,18 +1,18 @@
-<div class="addon-card flex flex-column flex-1 gap-3 p-4 text-center">
-  <div class="max-h-8rem">
+<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
         class="addon-image"
-        [src]="'assets/images/addons/' + card()!.externalServiceName + '.svg'"
         alt="Addon card image"
+        [src]="'assets/images/addons/' + card()!.externalServiceName + '.svg'"
       />
     }
   </div>
 
-  <div class="flex flex-column gap-4">
-    <h3>{{ card()?.displayName }}</h3>
+  <div class="flex flex-column gap-3">
+    <h3 class="text-center">{{ card()?.displayName }}</h3>
 
-    <div class="flex flex-column justify-content-center align-items-center gap-3 md:flex-row md:gap-4">
+    <div class="flex justify-content-center align-items-center md:gap-5 md:mt-3 btn-container">
       @if (showDangerButton()) {
         <p-button
           [label]="'settings.addons.form.buttons.disable' | translate"
@@ -24,7 +24,7 @@ <h3>{{ card()?.displayName }}</h3>
       <p-button
         [label]="cardButtonLabel() || ('settings.addons.form.buttons.connect' | translate)"
         severity="secondary"
-        (onClick)="onConnectAddon()"
+        (onClick)="!isConfiguredAddon() ? onConnectAddon() : onConfigureAddon()"
       ></p-button>
     </div>
   </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 69ad0daf0..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
@@ -7,9 +7,10 @@ import { Button } from 'primeng/button';
 import { Component, computed, inject, input } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { Addon, AuthorizedAddon } from '@osf/features/settings/addons/models';
-import { DeleteAuthorizedAddon } from '@osf/features/settings/addons/store';
 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',
@@ -23,23 +24,34 @@ 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);
 
   protected readonly addonTypeString = computed(() => {
-    const addon = this.card();
-    if (addon) {
-      return addon.type === 'authorized-storage-accounts' ? 'storage' : 'citation';
-    }
-    return '';
+    return getAddonTypeString(this.card());
+  });
+  protected readonly isConfiguredAddon = computed(() => {
+    return isConfiguredAddon(this.card());
   });
 
   onConnectAddon(): void {
     const addon = this.card();
+    if (addon) {
+      const currentUrl = this.router.url;
+      const baseUrl = currentUrl.split('/addons')[0];
+      this.router.navigate([`${baseUrl}/addons/connect-addon`], {
+        state: { addon },
+      });
+    }
+  }
 
+  onConfigureAddon(): 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/configure-addon`], {
         state: { addon },
       });
     }
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..0d5c616ba
--- /dev/null
+++ b/src/app/shared/components/addons/addon-terms/addon-terms.component.ts
@@ -0,0 +1,67 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { TableModule } from 'primeng/table';
+
+import { NgClass } from '@angular/common';
+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',
+  standalone: true,
+  imports: [TranslatePipe, TableModule, NgClass],
+  templateUrl: './addon-terms.component.html',
+  styleUrls: ['./addon-terms.component.scss'],
+})
+export class AddonTermsComponent {
+  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 = isCitationAddon(addon);
+
+    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..ca63a66d2
--- /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>{{ 'settings.addons.configureAddon.folderName' | translate }}</h3>
+        <h3>{{ 'settings.addons.configureAddon.selectFolder' | translate }}</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/app/shared/components/addons/folder-selector/folder-selector.component.scss b/src/app/shared/components/addons/folder-selector/folder-selector.component.scss
new file mode 100644
index 000000000..f00b807e7
--- /dev/null
+++ b/src/app/shared/components/addons/folder-selector/folder-selector.component.scss
@@ -0,0 +1,46 @@
+@use "assets/styles/mixins" as mix;
+@use "assets/styles/variables" as var;
+
+.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;
+
+    .folder-link {
+      color: var.$dark-blue-1;
+    }
+
+    .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/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..bd415ffbf
--- /dev/null
+++ b/src/app/shared/components/addons/folder-selector/folder-selector.component.ts
@@ -0,0 +1,163 @@
+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,
+    });
+
+    this.trimBreadcrumbs(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]);
+    }
+  }
+
+  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);
+    }
+  }
+}
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/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 d78e9d0cf..8c55aa8e7 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..4dbba35be
--- /dev/null
+++ b/src/app/shared/enums/addon-form-controls.enum.ts
@@ -0,0 +1,10 @@
+export enum AddonFormControls {
+  AccessKey = 'accessKey',
+  SecretKey = 'secretKey',
+  HostUrl = 'hostUrl',
+  Username = 'username',
+  Password = 'password',
+  PersonalAccessToken = 'personalAccessToken',
+  AccountName = 'accountName',
+  ApiToken = 'apiToken',
+}
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 14b6f6b90..99d20b511 100644
--- a/src/app/shared/enums/index.ts
+++ b/src/app/shared/enums/index.ts
@@ -1,8 +1,13 @@
+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 './get-resources-request-type.enum';
+export * from './profile-addons-stepper.enum';
 export * from './resource-tab.enum';
 export * from './resource-type.enum';
 export * from './share-indexing.enum';
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..43ee1793b
--- /dev/null
+++ b/src/app/shared/enums/profile-addons-stepper.enum.ts
@@ -0,0 +1,8 @@
+export enum ProjectAddonsStepperValue {
+  TERMS = 1,
+  CHOOSE_CONNECTION = 2,
+  CHOOSE_ACCOUNT = 3,
+  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
new file mode 100644
index 000000000..8341c8554
--- /dev/null
+++ b/src/app/shared/mappers/addon.mapper.ts
@@ -0,0 +1,116 @@
+import {
+  Addon,
+  AddonGetResponseJsonApi,
+  AuthorizedAddon,
+  AuthorizedAddonGetResponseJsonApi,
+  ConfiguredAddon,
+  ConfiguredAddonGetResponseJsonApi,
+  IncludedAddonData,
+  OperationInvocation,
+  OperationInvocationResponseJsonApi,
+  StorageItemResponseJsonApi,
+} from '@shared/models';
+
+export class AddonMapper {
+  static fromResponse(response: AddonGetResponseJsonApi): Addon {
+    return {
+      type: response.type,
+      id: response.id,
+      authUrl: response.attributes.auth_uri,
+      displayName: response.attributes.display_name,
+      externalServiceName: response.attributes.external_service_name,
+      supportedFeatures: response.attributes.supported_features,
+      credentialsFormat: response.attributes.credentials_format,
+      providerName: response.attributes.display_name,
+    };
+  }
+
+  static fromAuthorizedAddonResponse(
+    response: AuthorizedAddonGetResponseJsonApi,
+    included?: IncludedAddonData[]
+  ): AuthorizedAddon {
+    const externalServiceData =
+      response.relationships?.external_storage_service?.data || response.relationships?.external_citation_service?.data;
+
+    const externalServiceId = externalServiceData?.id;
+
+    const matchingService = included?.find(
+      (item) =>
+        (item.type === 'external-storage-services' || item.type === 'external-citation-services') &&
+        item.id === externalServiceId
+    )?.attributes;
+
+    const externalServiceName = (matchingService?.['external_service_name'] as string) || '';
+    const displayName = (matchingService?.['display_name'] as string) || '';
+    const credentialsFormat = (matchingService?.['credentials_format'] as string) || '';
+    const supportedFeatures = (matchingService?.['supported_features'] as string[]) || [];
+
+    return {
+      type: response.type,
+      id: response.id,
+      displayName: response.attributes.display_name,
+      apiBaseUrl: response.attributes.api_base_url,
+      authUrl: response.attributes.auth_url,
+      authorizedCapabilities: response.attributes.authorized_capabilities,
+      authorizedOperationNames: response.attributes.authorized_operation_names,
+      defaultRootFolder: response.attributes.default_root_folder,
+      credentialsAvailable: response.attributes.credentials_available,
+      accountOwnerId: response.relationships.account_owner.data.id,
+      externalStorageServiceId: externalServiceId || '',
+      externalServiceName,
+      supportedFeatures,
+      credentialsFormat,
+      providerName: displayName,
+    };
+  }
+
+  static fromConfiguredAddonResponse(response: ConfiguredAddonGetResponseJsonApi): ConfiguredAddon {
+    return {
+      type: response.type,
+      id: response.id,
+      displayName: response.attributes.display_name,
+      externalServiceName: response.attributes.external_service_name,
+      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: StorageItemResponseJsonApi) => ({
+          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/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/features/settings/addons/models/addon-form.model.ts b/src/app/shared/models/addons/addon-form.model.ts
similarity index 68%
rename from src/app/features/settings/addons/models/addon-form.model.ts
rename to src/app/shared/models/addons/addon-form.model.ts
index a0fc82b06..f1a10564b 100644
--- a/src/app/features/settings/addons/models/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>;
@@ -18,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/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.models.ts
similarity index 53%
rename from src/app/features/settings/addons/models/addons.model.ts
rename to src/app/shared/models/addons/addons.models.ts
index 6fb69262b..a3e1d3288 100644
--- a/src/app/features/settings/addons/models/addons.model.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,6 +53,27 @@ export interface AuthorizedAddonGetResponse {
   };
 }
 
+export interface ConfiguredAddonGetResponseJsonApi {
+  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;
+  };
+  relationships: {
+    base_account: {
+      data: {
+        type: string;
+        id: string;
+      };
+    };
+  };
+}
+
 export interface Addon {
   type: string;
   id: string;
@@ -82,6 +103,19 @@ export interface AuthorizedAddon {
   credentialsFormat: string;
 }
 
+export interface ConfiguredAddon {
+  type: string;
+  id: string;
+  displayName: string;
+  externalServiceName: string;
+  selectedFolderId: string;
+  connectedCapabilities: string[];
+  connectedOperationNames: string[];
+  currentUserIsOwner: boolean;
+  baseAccountId: string;
+  baseAccountType: string;
+}
+
 export interface IncludedAddonData {
   type: string;
   id: string;
@@ -97,7 +131,7 @@ export interface IncludedAddonData {
   >;
 }
 
-export interface UserReference {
+export interface UserReferenceJsonApi {
   type: string;
   id: string;
   attributes: {
@@ -105,7 +139,15 @@ export interface UserReference {
   };
 }
 
-export interface AddonRequest {
+export interface ResourceReferenceJsonApi {
+  type: string;
+  id: string;
+  attributes: {
+    resource_uri: string;
+  };
+}
+
+export interface AuthorizedAddonRequestJsonApi {
   data: {
     id?: string;
     attributes: {
@@ -141,7 +183,7 @@ export interface AddonRequest {
   };
 }
 
-export interface AddonResponse {
+export interface AuthorizedAddonResponseJsonApi {
   type: string;
   id: string;
   attributes: {
@@ -168,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
new file mode 100644
index 000000000..e2f3ceaa8
--- /dev/null
+++ b/src/app/shared/models/addons/index.ts
@@ -0,0 +1,6 @@
+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-invocation.models.ts b/src/app/shared/models/addons/operation-invocation.models.ts
new file mode 100644
index 000000000..107aa00d9
--- /dev/null
+++ b/src/app/shared/models/addons/operation-invocation.models.ts
@@ -0,0 +1,77 @@
+export interface StorageItemResponseJsonApi {
+  item_id?: string;
+  item_name?: string;
+  item_type?: string;
+  can_be_root?: boolean;
+  may_contain_root_candidates?: boolean;
+}
+
+export interface OperationResult {
+  items: StorageItemResponseJsonApi[];
+  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: StorageItemResponseJsonApi;
+    operation_result: OperationResult | StorageItemResponseJsonApi;
+    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/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/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/models/index.ts b/src/app/shared/models/index.ts
index 5eede5848..cd39f2cd2 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 './confirmation-options.model';
 export * from './create-component-form.model';
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..80e654a92
--- /dev/null
+++ b/src/app/shared/services/addons/addon-form.service.ts
@@ -0,0 +1,201 @@
+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';
+import { isAuthorizedAddon } from '@shared/utils';
+
+@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 {
+    return isAuthorizedAddon(addon) ? (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/addons.service.ts b/src/app/shared/services/addons/addons.service.ts
new file mode 100644
index 000000000..7a0f4b369
--- /dev/null
+++ b/src/app/shared/services/addons/addons.service.ts
@@ -0,0 +1,169 @@
+import { select } from '@ngxs/store';
+
+import { map, Observable } from 'rxjs';
+
+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 '@shared/mappers';
+import {
+  Addon,
+  AddonGetResponseJsonApi,
+  AuthorizedAddon,
+  AuthorizedAddonGetResponseJsonApi,
+  AuthorizedAddonRequestJsonApi,
+  AuthorizedAddonResponseJsonApi,
+  ConfiguredAddon,
+  ConfiguredAddonGetResponseJsonApi,
+  ConfiguredAddonRequestJsonApi,
+  ConfiguredAddonResponseJsonApi,
+  IncludedAddonData,
+  OperationInvocation,
+  OperationInvocationRequestJsonApi,
+  ResourceReferenceJsonApi,
+  UserReferenceJsonApi,
+} from '@shared/models';
+import { OperationInvocationResponseJsonApi } from '@shared/models/addons/operation-invocation.models';
+
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AddonsService {
+  private jsonApiService = inject(JsonApiService);
+  private currentUser = select(UserSelectors.getCurrentUser);
+
+  getAddons(addonType: string): Observable<Addon[]> {
+    return this.jsonApiService
+      .get<
+        JsonApiResponse<AddonGetResponseJsonApi[], null>
+      >(`${environment.addonsApiUrl}/external-${addonType}-services`)
+      .pipe(
+        map((response) => {
+          return response.data.map((item) => AddonMapper.fromResponse(item));
+        })
+      );
+  }
+
+  getAddonsUserReference(): Observable<UserReferenceJsonApi[]> {
+    const currentUser = this.currentUser();
+    if (!currentUser) throw new Error('Current user not found');
+
+    const userUri = `${environment.baseResourceUri}${currentUser.id}`;
+    const params = {
+      'filter[user_uri]': userUri,
+    };
+
+    return this.jsonApiService
+      .get<JsonApiResponse<UserReferenceJsonApi[], null>>(environment.addonsApiUrl + '/user-references/', params)
+      .pipe(map((response) => response.data));
+  }
+
+  getAddonsResourceReference(resourceId: string): Observable<ResourceReferenceJsonApi[]> {
+    const resourceUri = `${environment.baseResourceUri}${resourceId}`;
+    const params = {
+      'filter[resource_uri]': resourceUri,
+    };
+
+    return this.jsonApiService
+      .get<
+        JsonApiResponse<ResourceReferenceJsonApi[], 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',
+    };
+    return this.jsonApiService
+      .get<
+        JsonApiResponse<AuthorizedAddonGetResponseJsonApi[], IncludedAddonData[]>
+      >(`${environment.addonsApiUrl}/user-references/${referenceId}/authorized_${addonType}_accounts/?include=external-${addonType}-service`, params)
+      .pipe(
+        map((response) => {
+          return response.data.map((item) => AddonMapper.fromAuthorizedAddonResponse(item, response.included));
+        })
+      );
+  }
+
+  getConfiguredAddons(addonType: string, referenceId: string): Observable<ConfiguredAddon[]> {
+    return this.jsonApiService
+      .get<
+        JsonApiResponse<ConfiguredAddonGetResponseJsonApi[], null>
+      >(`${environment.addonsApiUrl}/resource-references/${referenceId}/configured_${addonType}_addons/`)
+      .pipe(
+        map((response) => {
+          return response.data.map((item) => AddonMapper.fromConfiguredAddonResponse(item));
+        })
+      );
+  }
+
+  createAuthorizedAddon(
+    addonRequestPayload: AuthorizedAddonRequestJsonApi,
+    addonType: string
+  ): Observable<AuthorizedAddonResponseJsonApi> {
+    return this.jsonApiService.post<AuthorizedAddonResponseJsonApi>(
+      `${environment.addonsApiUrl}/authorized-${addonType}-accounts/`,
+      addonRequestPayload
+    );
+  }
+
+  updateAuthorizedAddon(
+    addonRequestPayload: AuthorizedAddonRequestJsonApi,
+    addonType: string,
+    addonId: string
+  ): 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/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 cb8fd96ae..da88d19c0 100644
--- a/src/app/shared/services/index.ts
+++ b/src/app/shared/services/index.ts
@@ -1,3 +1,4 @@
+export * from './addons';
 export { CustomConfirmationService } from './custom-confirmation.service';
 export { FiltersOptionsService } from './filters-options.service';
 export { LoaderService } from './loader.service';
diff --git a/src/app/shared/stores/addons/addons.actions.ts b/src/app/shared/stores/addons/addons.actions.ts
new file mode 100644
index 000000000..7b3915f2c
--- /dev/null
+++ b/src/app/shared/stores/addons/addons.actions.ts
@@ -0,0 +1,117 @@
+import {
+  AuthorizedAddonRequestJsonApi,
+  ConfiguredAddonRequestJsonApi,
+  OperationInvocationRequestJsonApi,
+} from '@shared/models';
+
+export class GetStorageAddons {
+  static readonly type = '[Addons] Get Storage Addons';
+}
+
+export class GetCitationAddons {
+  static readonly type = '[Addons] Get Citation Addons';
+}
+
+export class GetAuthorizedStorageAddons {
+  static readonly type = '[Addons] Get Authorized Storage Addons';
+
+  constructor(public referenceId: string) {}
+}
+
+export class GetAuthorizedCitationAddons {
+  static readonly type = '[Addons] Get Authorized Citation Addons';
+
+  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 Authorized Addon';
+
+  constructor(
+    public payload: AuthorizedAddonRequestJsonApi,
+    public addonType: string
+  ) {}
+}
+
+export class UpdateAuthorizedAddon {
+  static readonly type = '[Addons] Update Authorized Addon';
+
+  constructor(
+    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
+  ) {}
+}
+
+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';
+
+  constructor(
+    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';
+}
+
+export class ClearOperationInvocations {
+  static readonly type = '[Addons] Clear Operation Invocations';
+}
diff --git a/src/app/shared/stores/addons/addons.models.ts b/src/app/shared/stores/addons/addons.models.ts
new file mode 100644
index 000000000..3389bd3c2
--- /dev/null
+++ b/src/app/shared/stores/addons/addons.models.ts
@@ -0,0 +1,26 @@
+import {
+  Addon,
+  AuthorizedAddon,
+  AuthorizedAddonResponseJsonApi,
+  ConfiguredAddon,
+  ConfiguredAddonResponseJsonApi,
+  OperationInvocation,
+  ResourceReferenceJsonApi,
+  UserReferenceJsonApi,
+} from '@shared/models';
+import { AsyncStateModel } from '@shared/models/store';
+
+export interface AddonsStateModel {
+  storageAddons: AsyncStateModel<Addon[]>;
+  citationAddons: AsyncStateModel<Addon[]>;
+  authorizedStorageAddons: AsyncStateModel<AuthorizedAddon[]>;
+  authorizedCitationAddons: AsyncStateModel<AuthorizedAddon[]>;
+  configuredStorageAddons: AsyncStateModel<ConfiguredAddon[]>;
+  configuredCitationAddons: AsyncStateModel<ConfiguredAddon[]>;
+  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
new file mode 100644
index 000000000..98e85144b
--- /dev/null
+++ b/src/app/shared/stores/addons/addons.selectors.ts
@@ -0,0 +1,143 @@
+import { Selector } from '@ngxs/store';
+
+import {
+  Addon,
+  AuthorizedAddon,
+  AuthorizedAddonResponseJsonApi,
+  ConfiguredAddon,
+  ConfiguredAddonResponseJsonApi,
+  OperationInvocation,
+  ResourceReferenceJsonApi,
+  StorageItem,
+  UserReferenceJsonApi,
+} from '@shared/models';
+
+import { AddonsStateModel } from './addons.models';
+import { AddonsState } from './addons.state';
+
+export class AddonsSelectors {
+  @Selector([AddonsState])
+  static getStorageAddons(state: AddonsStateModel): Addon[] {
+    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.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): UserReferenceJsonApi[] {
+    return state.addonsUserReference.data;
+  }
+
+  @Selector([AddonsState])
+  static getAddonsUserReferenceLoading(state: AddonsStateModel): boolean {
+    return state.addonsUserReference.isLoading;
+  }
+
+  @Selector([AddonsState])
+  static getAddonsResourceReference(state: AddonsStateModel): ResourceReferenceJsonApi[] {
+    return state.addonsResourceReference.data;
+  }
+
+  @Selector([AddonsState])
+  static getAddonsResourceReferenceLoading(state: AddonsStateModel): boolean {
+    return state.addonsResourceReference.isLoading;
+  }
+
+  @Selector([AddonsState])
+  static getCreatedOrUpdatedAuthorizedAddon(state: AddonsStateModel): AuthorizedAddonResponseJsonApi | null {
+    return state.createdUpdatedAuthorizedAddon.data;
+  }
+
+  @Selector([AddonsState])
+  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 getSelectedFolder(state: AddonsStateModel): StorageItem | null {
+    return state.selectedFolderOperationInvocation.data?.operationResult[0] || null;
+  }
+
+  @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
new file mode 100644
index 000000000..d6d614660
--- /dev/null
+++ b/src/app/shared/stores/addons/addons.state.ts
@@ -0,0 +1,569 @@
+import { Action, State, StateContext } from '@ngxs/store';
+
+import { catchError, switchMap, tap, throwError } from 'rxjs';
+
+import { inject, Injectable } from '@angular/core';
+
+import { AddonsService } from '@shared/services';
+
+import {
+  ClearConfiguredAddons,
+  ClearOperationInvocations,
+  CreateAddonOperationInvocation,
+  CreateAuthorizedAddon,
+  CreateConfiguredAddon,
+  DeleteAuthorizedAddon,
+  DeleteConfiguredAddon,
+  GetAddonsResourceReference,
+  GetAddonsUserReference,
+  GetAuthorizedCitationAddons,
+  GetAuthorizedStorageAddons,
+  GetCitationAddons,
+  GetConfiguredCitationAddons,
+  GetConfiguredStorageAddons,
+  GetStorageAddons,
+  UpdateAuthorizedAddon,
+  UpdateConfiguredAddon,
+} 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,
+  },
+  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>({
+  name: 'addons',
+  defaults: ADDONS_DEFAULTS,
+})
+@Injectable()
+export class AddonsState {
+  addonsService = inject(AddonsService);
+
+  @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: {
+            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: {
+            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: {
+            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: {
+            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) {
+    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: {
+            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) {
+    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: {
+            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(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,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'createdUpdatedConfiguredAddon', 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: {
+            data: userReference,
+            isLoading: false,
+            error: null,
+          },
+        });
+      }),
+      catchError((error) => this.handleError(ctx, 'addonsUserReference', error))
+    );
+  }
+
+  @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();
+    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.id, action.addonType).pipe(
+      switchMap(() => {
+        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))
+    );
+  }
+
+  @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,
+      },
+    });
+  }
+
+  @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]: {
+        ...ctx.getState()[section],
+        isLoading: false,
+        isSubmitting: false,
+        error: error.message,
+      },
+    });
+    return throwError(() => error);
+  }
+}
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
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 8335ee266..c693d5445 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -11,6 +11,8 @@
       "copy": "Copy",
       "move": "Move",
       "rename": "Rename",
+      "confirm": "Confirm",
+      "disconnect": "Disconnect",
       "revert": "Revert",
       "next": "Next",
       "skip": "Skip",
@@ -949,6 +951,24 @@
         "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:",
+        "selectedFolder": "Selected folder:",
+        "folderName": "Folder name:",
+        "selectFolder": "Select",
+        "connectedAccount": "Connected to account:",
+        "home": "Home"
+      },
       "connectAddon": {
         "title": "Connect Add-on",
         "terms": "Terms",
@@ -956,10 +976,15 @@
           "function": "Function",
           "status": "Status"
         },
+        "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",
         "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."
       },
@@ -973,18 +998,22 @@
           "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."
         },
         "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": {
@@ -997,7 +1026,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": {
@@ -1057,6 +1087,7 @@
       }
     },
     "accountSettings": {
+      "title": "Account Settings",
       "common": {
         "buttons": {
           "cancel": "Cancel",
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 4b7088a9f..e8b9acc9b 100644
--- a/src/assets/styles/styles.scss
+++ b/src/assets/styles/styles.scss
@@ -39,4 +39,5 @@
 @use "./overrides/toast";
 @use "./overrides/multiselect";
 @use "./components/md-editor";
+@use "./overrides/breadcrumbs";
 @use "components/preprints";
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/',
 };
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));