From ae5d48573fb372fcc0352a29d242edcb8beb637c Mon Sep 17 00:00:00 2001
From: volodyayakubovskyy <vyakubovskyy477@gmail.com>
Date: Mon, 19 May 2025 16:30:45 +0300
Subject: [PATCH 1/9] feat(project-settings): added page skeleton"

---
 src/app/app.routes.ts                         |   5 +
 src/app/core/constants/nav-items.constant.ts  |   4 +
 .../metadata/project-metadata.component.html  |   2 +-
 .../accordion-table.component.html            |  45 ++++
 .../accordion-table.component.spec.ts         |  22 ++
 .../accordion-table.component.ts              |  38 ++++
 .../project/settings/components/index.ts      |   1 +
 src/app/features/project/settings/index.ts    |   3 +
 .../features/project/settings/models/index.ts |   1 +
 .../settings/models/link-table.model.ts       |   8 +
 .../project/settings/settings.component.html  | 193 ++++++++++++++++++
 .../project/settings/settings.component.scss  |  11 +
 .../settings/settings.component.spec.ts       |  22 ++
 .../project/settings/settings.component.ts    | 124 +++++++++++
 src/app/shared/components/index.ts            |   1 +
 .../view-only-table.component.html            |  49 +++++
 .../view-only-table.component.scss            |  16 ++
 .../view-only-table.component.spec.ts         |  22 ++
 .../view-only-table.component.ts              |  28 +++
 src/app/shared/index.ts                       |   1 +
 src/app/shared/utils/remove-nullable.const.ts |   1 +
 src/assets/i18n/en.json                       |  39 +++-
 src/assets/styles/overrides/button.scss       |  10 +
 src/assets/styles/overrides/dropdown.scss     |   9 +
 src/assets/styles/overrides/table.scss        |  24 +++
 25 files changed, 676 insertions(+), 3 deletions(-)
 create mode 100644 src/app/features/project/settings/components/accordion-table/accordion-table.component.html
 create mode 100644 src/app/features/project/settings/components/accordion-table/accordion-table.component.spec.ts
 create mode 100644 src/app/features/project/settings/components/accordion-table/accordion-table.component.ts
 create mode 100644 src/app/features/project/settings/components/index.ts
 create mode 100644 src/app/features/project/settings/index.ts
 create mode 100644 src/app/features/project/settings/models/index.ts
 create mode 100644 src/app/features/project/settings/models/link-table.model.ts
 create mode 100644 src/app/features/project/settings/settings.component.html
 create mode 100644 src/app/features/project/settings/settings.component.scss
 create mode 100644 src/app/features/project/settings/settings.component.spec.ts
 create mode 100644 src/app/features/project/settings/settings.component.ts
 create mode 100644 src/app/shared/components/index.ts
 create mode 100644 src/app/shared/components/view-only-table/view-only-table.component.html
 create mode 100644 src/app/shared/components/view-only-table/view-only-table.component.scss
 create mode 100644 src/app/shared/components/view-only-table/view-only-table.component.spec.ts
 create mode 100644 src/app/shared/components/view-only-table/view-only-table.component.ts
 create mode 100644 src/app/shared/index.ts

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index c7b266930..4ddf8c723 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -103,6 +103,11 @@ export const routes: Routes = [
                 (mod) => mod.RegistrationsComponent
               ),
           },
+          {
+            path: 'settings',
+            loadComponent: () =>
+              import('./features/project/settings/settings.component').then((mod) => mod.SettingsComponent),
+          },
         ],
       },
       {
diff --git a/src/app/core/constants/nav-items.constant.ts b/src/app/core/constants/nav-items.constant.ts
index 661a1e514..18f65c74c 100644
--- a/src/app/core/constants/nav-items.constant.ts
+++ b/src/app/core/constants/nav-items.constant.ts
@@ -87,6 +87,10 @@ export const PROJECT_MENU_ITEMS: MenuItem[] = [
         label: 'navigation.project.registrations',
         routerLink: 'registrations',
       },
+      {
+        label: 'navigation.project.settings',
+        routerLink: 'settings',
+      },
     ],
   },
 ];
diff --git a/src/app/features/project/metadata/project-metadata.component.html b/src/app/features/project/metadata/project-metadata.component.html
index f19d3c730..9e17d0536 100644
--- a/src/app/features/project/metadata/project-metadata.component.html
+++ b/src/app/features/project/metadata/project-metadata.component.html
@@ -29,6 +29,6 @@ <h2>{{ meta.title }}</h2>
 
   <div class="flex justify-content-end flex-0 mt-auto">
     <p-button label="Cancel" [link]="true" severity="info" class="w-10rem btn-full-width"></p-button>
-    <p-button class="w-10rem btn-full-width" label="Next"></p-button>
+    <p-button class="w-10rem btn-full-width bg-primary-blue-second" label="Next"></p-button>
   </div>
 </section>
diff --git a/src/app/features/project/settings/components/accordion-table/accordion-table.component.html b/src/app/features/project/settings/components/accordion-table/accordion-table.component.html
new file mode 100644
index 000000000..bfb6d0a56
--- /dev/null
+++ b/src/app/features/project/settings/components/accordion-table/accordion-table.component.html
@@ -0,0 +1,45 @@
+<div class="flex justify-between align-items-center mb-2 gap-4 w-full border-bottom-1 border-gray-300">
+  <div class="flex align-items-center gap-2 cursor-pointer w-6">
+    <p-button class="btn-icon-text form-btn button-shadow-none" (click)="toggle()">
+      <i class="pi" [ngClass]="{ 'pi-plus': !expanded(), 'pi-minus': expanded() }"></i>
+    </p-button>
+
+    <span class="font-medium text-color">{{ title() }}</span>
+  </div>
+
+  @if (rightControls().length > 0) {
+    <div class="flex flex-wrap gap-4 align-items-center w-6">
+      @for (control of rightControls(); track control) {
+        <div class="flex align-items-center gap-2">
+          @if (control.label) {
+            <span class="font-medium text-color">
+              {{ control.label }}
+            </span>
+          }
+
+          @switch (control.type) {
+            @case ('dropdown') {
+              <p-dropdown
+                class="accordion-dropdown"
+                [options]="control.options"
+                [(ngModel)]="control.value"
+                (onChange)="control.onChange?.(control.value)"
+              />
+            }
+            @case ('text') {
+              <span class="text-sm text-color">
+                {{ control.value }}
+              </span>
+            }
+          }
+        </div>
+      }
+    </div>
+  }
+</div>
+
+@if (expanded()) {
+  <div class="mt-2 pl-5 border-bottom-1 border-gray-300">
+    <ng-content></ng-content>
+  </div>
+}
diff --git a/src/app/features/project/settings/components/accordion-table/accordion-table.component.spec.ts b/src/app/features/project/settings/components/accordion-table/accordion-table.component.spec.ts
new file mode 100644
index 000000000..26df6a5d4
--- /dev/null
+++ b/src/app/features/project/settings/components/accordion-table/accordion-table.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccordionTableComponent } from './accordion-table.component';
+
+describe('AccordionTableComponent', () => {
+  let component: AccordionTableComponent;
+  let fixture: ComponentFixture<AccordionTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AccordionTableComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AccordionTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/project/settings/components/accordion-table/accordion-table.component.ts b/src/app/features/project/settings/components/accordion-table/accordion-table.component.ts
new file mode 100644
index 000000000..3654d7a91
--- /dev/null
+++ b/src/app/features/project/settings/components/accordion-table/accordion-table.component.ts
@@ -0,0 +1,38 @@
+import { Button } from 'primeng/button';
+import { DropdownModule } from 'primeng/dropdown';
+
+import { NgClass } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+type RightControl =
+  | {
+      type: 'dropdown';
+      label?: string;
+      value: string;
+      options: { label: string; value: string }[];
+      onChange?: (value: string) => void;
+    }
+  | {
+      type: 'text';
+      label?: string;
+      value: string;
+    };
+
+@Component({
+  selector: 'osf-accordion-table',
+  imports: [NgClass, DropdownModule, FormsModule, Button],
+  templateUrl: './accordion-table.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AccordionTableComponent {
+  title = input.required<string>();
+
+  rightControls = input.required<RightControl[]>();
+
+  expanded = signal(false);
+
+  toggle() {
+    this.expanded.set(!this.expanded());
+  }
+}
diff --git a/src/app/features/project/settings/components/index.ts b/src/app/features/project/settings/components/index.ts
new file mode 100644
index 000000000..74042b224
--- /dev/null
+++ b/src/app/features/project/settings/components/index.ts
@@ -0,0 +1 @@
+export * from './accordion-table/accordion-table.component';
diff --git a/src/app/features/project/settings/index.ts b/src/app/features/project/settings/index.ts
new file mode 100644
index 000000000..c27c630b9
--- /dev/null
+++ b/src/app/features/project/settings/index.ts
@@ -0,0 +1,3 @@
+export * from './components';
+export * from './models';
+export * from './settings.component';
diff --git a/src/app/features/project/settings/models/index.ts b/src/app/features/project/settings/models/index.ts
new file mode 100644
index 000000000..4a4b82eda
--- /dev/null
+++ b/src/app/features/project/settings/models/index.ts
@@ -0,0 +1 @@
+export * from './link-table.model';
diff --git a/src/app/features/project/settings/models/link-table.model.ts b/src/app/features/project/settings/models/link-table.model.ts
new file mode 100644
index 000000000..3990216b8
--- /dev/null
+++ b/src/app/features/project/settings/models/link-table.model.ts
@@ -0,0 +1,8 @@
+export interface LinkTableModel {
+  linkName: string;
+  sharedComponents: string;
+  createdDate: string | Date;
+  createdBy: string;
+  anonymous: boolean;
+  link: string;
+}
diff --git a/src/app/features/project/settings/settings.component.html b/src/app/features/project/settings/settings.component.html
new file mode 100644
index 000000000..84ef91faa
--- /dev/null
+++ b/src/app/features/project/settings/settings.component.html
@@ -0,0 +1,193 @@
+<section [class.desktop]="isDesktop()" class="flex flex-column flex-1">
+  <osf-sub-header [title]="'navigation.project.settings' | translate" />
+
+  <div class="flex-column flex flex-1 w-full">
+    <p-tabpanels class="flex flex-column gap-4 flex-1 w-full bg-white">
+      <p-card>
+        <h3 class="text-xl pb-4">{{ 'myProjects.settings.project' | translate }}</h3>
+
+        <form [formGroup]="projectForm" (ngSubmit)="submitForm()" class="flex flex-column gap-4">
+          <!-- Title -->
+          <div class="flex flex-column">
+            <label for="project-title">
+              {{ 'myProjects.createProject.title' | translate }}
+            </label>
+            <input pInputText id="project-title" type="text" [formControlName]="ProjectFormControls.Title" />
+          </div>
+
+          <!-- Description -->
+          <div class="flex flex-column">
+            <label for="description">
+              {{ 'myProjects.createProject.description.label' | translate }}
+            </label>
+            <textarea
+              pTextarea
+              id="description"
+              [formControlName]="ProjectFormControls.Description"
+              [rows]="5"
+            ></textarea>
+          </div>
+
+          <div class="flex sm:justify-content-end flex-0 gap-2 justify-content-between">
+            <p-button
+              type="button"
+              [label]="'settings.accountSettings.common.buttons.cancel' | translate"
+              (onClick)="resetForm()"
+              severity="info"
+              class="w-10rem btn-full-width"
+            ></p-button>
+            <p-button
+              type="submit"
+              class="w-10rem btn-full-width bg-primary-blue-second"
+              [label]="'myProjects.settings.saveChanges' | translate"
+            ></p-button>
+          </div>
+
+          <div class="flex justify-content-end w-full flex-0 border-top-1 pt-4 border-gray-300">
+            <p-button
+              severity="danger"
+              [label]="'myProjects.settings.deleteProject' | translate"
+              class="md:ml-auto sm:w-10rem btn-full-width"
+            ></p-button>
+          </div>
+        </form>
+      </p-card>
+
+      <p-card>
+        <h3 class="text-xl pb-4">{{ 'myProjects.createProject.storageLocation' | translate }}</h3>
+
+        <div class="flex gap-2 pb-2">
+          <p>{{ 'myProjects.createProject.storageLocation' | translate }}:</p>
+
+          <p>United States</p>
+        </div>
+
+        <p class="font-italic">Storage location cannot be changed after project is created.</p>
+      </p-card>
+
+      <p-card>
+        <h3 class="text-xl pb-2">{{ 'myProjects.settings.viewOnlyLinks' | translate }}</h3>
+
+        <p>{{ 'myProjects.settings.viewOnlySubtitle' | translate }}</p>
+
+        <osf-view-only-table [tableData]="tableData"></osf-view-only-table>
+      </p-card>
+
+      <p-card>
+        <h3 class="text-xl pb-4">{{ 'myProjects.settings.accessRequests' | translate }}</h3>
+
+        <div class="flex align-items-center w-full">
+          <p-checkbox [binary]="true" [formControl]="accessRequest" id="accessRequest" name="ongoing"></p-checkbox>
+          <p class="ml-2">
+            {{ 'myProjects.settings.accessRequestsText' | translate }}
+          </p>
+        </div>
+      </p-card>
+
+      <p-card>
+        <h3 class="text-xl pb-4">{{ 'myProjects.settings.wiki' | translate }}</h3>
+
+        <div class="flex align-items-center w-full">
+          <p-checkbox [binary]="true" [formControl]="wiki" id="wiki" name="ongoing"></p-checkbox>
+
+          <p class="ml-2">
+            {{ 'myProjects.settings.wikiText' | translate }}
+          </p>
+        </div>
+
+        <h3 class="text-xl py-4">{{ 'myProjects.settings.wikiConfigureTitle' | translate }}</h3>
+
+        <p class="pb-4">{{ 'myProjects.settings.wikiConfigureText' | translate }}</p>
+
+        <osf-accordion-table
+          [title]="'Project name example'"
+          [rightControls]="[
+            {
+              type: 'dropdown',
+              label: 'Who can edit:',
+              value: access,
+              options: accessOptions,
+              onChange: onAccessChange,
+            },
+          ]"
+        >
+          <div class="flex align-items-baseline gap-2">
+            <i class="pi pi-minus text-sm icon-space"></i>
+            <span>Sub text</span>
+          </div>
+        </osf-accordion-table>
+      </p-card>
+
+      <p-card>
+        <h3 class="text-xl pb-4">{{ 'myProjects.settings.commenting' | translate }}</h3>
+
+        <div class="flex flex-column gap-3">
+          <div class="flex gap-3">
+            <p-radio-button name="contributorsCanPost" value="0" [(ngModel)]="commenting"></p-radio-button>
+            <p>{{ 'myProjects.settings.contributorsCanPost' | translate }}</p>
+          </div>
+
+          <div class="flex gap-3">
+            <p-radio-button name="osfUserCanPost" value="1" [(ngModel)]="commenting"></p-radio-button>
+            <p>{{ 'myProjects.settings.osfUserCanPost' | translate }}</p>
+          </div>
+        </div>
+      </p-card>
+
+      <p-card>
+        <h3 class="text-xl pb-4">{{ 'myProjects.settings.emailNotifications' | translate }}</h3>
+
+        <p class="pb-4">{{ 'myProjects.settings.emailNotificationsText' | translate }}</p>
+
+        <osf-accordion-table
+          [title]="'Project name example'"
+          [rightControls]="[
+            {
+              type: 'dropdown',
+              label: 'Comments added:',
+              value: commentSetting,
+              options: dropdownOptions,
+            },
+            {
+              type: 'dropdown',
+              label: 'Files updated:',
+              value: fileSetting,
+              options: dropdownOptions,
+            },
+          ]"
+        >
+          <div class="flex align-items-baseline gap-2">
+            <i class="pi pi-minus text-sm icon-space"></i>
+            <span>Sub text</span>
+          </div>
+        </osf-accordion-table>
+      </p-card>
+
+      <p-card>
+        <h3 class="text-xl pb-4">{{ 'myProjects.settings.redirectLink' | translate }}</h3>
+
+        <div class="flex align-items-center w-full">
+          <p-checkbox [binary]="true" [formControl]="redirectLink" id="redirectLink" name="ongoing"></p-checkbox>
+          <p class="ml-2">
+            {{ 'myProjects.settings.redirectLinkText' | translate }}
+          </p>
+        </div>
+      </p-card>
+
+      <p-card>
+        <h3 class="text-xl pb-4">{{ 'myProjects.settings.projectAffiliation' | translate }}</h3>
+
+        <p>{{ 'myProjects.settings.projectsCanBeAffiliated' | translate }}</p>
+
+        <ul>
+          <li>{{ 'myProjects.settings.institutionalLogos' | translate }}</li>
+          <li>{{ 'myProjects.settings.publicProjectsToBeDiscoverable' | translate }}</li>
+          <li>{{ 'myProjects.settings.singleSignInToTHeOSF' | translate }}</li>
+          <li>
+            <a routerLink="#">{{ 'myProjects.settings.faq' | translate }}</a>
+          </li>
+        </ul>
+      </p-card>
+    </p-tabpanels>
+  </div>
+</section>
diff --git a/src/app/features/project/settings/settings.component.scss b/src/app/features/project/settings/settings.component.scss
new file mode 100644
index 000000000..891d35c2c
--- /dev/null
+++ b/src/app/features/project/settings/settings.component.scss
@@ -0,0 +1,11 @@
+@use "../../../../assets/styles/variables" as var;
+@use "../../../../assets/styles/mixins" as mix;
+
+:host {
+  @include mix.flex-column;
+  flex: 1;
+}
+
+.icon-space {
+  padding: 0.7rem 1.1rem;
+}
diff --git a/src/app/features/project/settings/settings.component.spec.ts b/src/app/features/project/settings/settings.component.spec.ts
new file mode 100644
index 000000000..83f8f7e90
--- /dev/null
+++ b/src/app/features/project/settings/settings.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsComponent } from './settings.component';
+
+describe('SettingsComponent', () => {
+  let component: SettingsComponent;
+  let fixture: ComponentFixture<SettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SettingsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/project/settings/settings.component.ts b/src/app/features/project/settings/settings.component.ts
new file mode 100644
index 000000000..d7071b9c7
--- /dev/null
+++ b/src/app/features/project/settings/settings.component.ts
@@ -0,0 +1,124 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { Card } from 'primeng/card';
+import { Checkbox } from 'primeng/checkbox';
+import { InputText } from 'primeng/inputtext';
+import { RadioButton } from 'primeng/radiobutton';
+import { TabPanels } from 'primeng/tabs';
+import { Textarea } from 'primeng/textarea';
+
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { RouterLink } from '@angular/router';
+
+import { AccordionTableComponent } from '@osf/features/project/settings/components';
+import { LinkTableModel } from '@osf/features/project/settings/models';
+import { ShareIndexingEnum } from '@osf/features/settings/account-settings/components/share-indexing/enums/share-indexing.enum';
+import { ViewOnlyTableComponent } from '@osf/shared';
+import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component';
+import { ProjectForm } from '@shared/entities/create-project-form.interface';
+import { ProjectFormControls } from '@shared/entities/create-project-form-controls.enum';
+import { IS_WEB } from '@shared/utils/breakpoints.tokens';
+
+@Component({
+  selector: 'osf-settings',
+  imports: [
+    TranslatePipe,
+    SubHeaderComponent,
+    TabPanels,
+    FormsModule,
+    InputText,
+    ReactiveFormsModule,
+    Textarea,
+    Card,
+    Button,
+    ViewOnlyTableComponent,
+    Checkbox,
+    AccordionTableComponent,
+    RadioButton,
+    RouterLink,
+  ],
+  templateUrl: './settings.component.html',
+  styleUrl: './settings.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SettingsComponent {
+  protected readonly isDesktop = toSignal(inject(IS_WEB));
+
+  protected readonly ProjectFormControls = ProjectFormControls;
+  protected commenting = signal<ShareIndexingEnum>(ShareIndexingEnum.None);
+
+  projectForm = new FormGroup<Partial<ProjectForm>>({
+    [ProjectFormControls.Title]: new FormControl('', {
+      nonNullable: true,
+      validators: [Validators.required],
+    }),
+    [ProjectFormControls.Description]: new FormControl('', {
+      nonNullable: true,
+    }),
+  });
+  accessRequest = new FormControl<boolean>(false);
+  wiki = new FormControl<boolean>(false);
+  redirectLink = new FormControl<boolean>(false);
+
+  tableData: LinkTableModel[] = [
+    {
+      linkName: 'name',
+      sharedComponents: 'Project name',
+      createdDate: new Date(),
+      createdBy: 'Igor',
+      anonymous: false,
+      link: 'www.facebook.com',
+    },
+    {
+      linkName: 'name',
+      sharedComponents: 'Project name',
+      createdDate: new Date(),
+      createdBy: 'Igor',
+      anonymous: false,
+      link: 'www.facebook.com',
+    },
+    {
+      linkName: 'name',
+      sharedComponents: 'Project name',
+      createdDate: new Date(),
+      createdBy: 'Igor',
+      anonymous: false,
+      link: 'www.facebook.com',
+    },
+    {
+      linkName: 'name',
+      sharedComponents: 'Project name',
+      createdDate: new Date(),
+      createdBy: 'Igor',
+      anonymous: false,
+      link: 'www.facebook.com',
+    },
+  ];
+  access = 'write';
+  accessOptions = [
+    { label: 'Contributors (with write access)', value: 'write' },
+    { label: 'Anyone with link', value: 'public' },
+  ];
+  commentSetting = 'instantly';
+  fileSetting = 'instantly';
+
+  dropdownOptions = [
+    { label: 'Instantly', value: 'instantly' },
+    { label: 'Daily', value: 'daily' },
+    { label: 'Never', value: 'never' },
+  ];
+  submitForm(): void {
+    // TODO: implement form submission
+  }
+
+  resetForm(): void {
+    this.projectForm.reset();
+  }
+
+  onAccessChange(value: string): void {
+    console.log('Access changed to', value);
+  }
+}
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
new file mode 100644
index 000000000..652a5b690
--- /dev/null
+++ b/src/app/shared/components/index.ts
@@ -0,0 +1 @@
+export * from './view-only-table/view-only-table.component';
diff --git a/src/app/shared/components/view-only-table/view-only-table.component.html b/src/app/shared/components/view-only-table/view-only-table.component.html
new file mode 100644
index 000000000..b1dfb6f44
--- /dev/null
+++ b/src/app/shared/components/view-only-table/view-only-table.component.html
@@ -0,0 +1,49 @@
+<p-table [value]="tableData()" class="view-only-table">
+  <ng-template #header>
+    <tr>
+      <th>
+        {{ 'myProjects.settings.viewOnlyTable.linkName' | translate }}
+      </th>
+      <th>
+        {{ 'myProjects.settings.viewOnlyTable.sharedComponents' | translate }}
+      </th>
+
+      <th>
+        {{ 'myProjects.settings.viewOnlyTable.createdDate' | translate }}
+      </th>
+
+      <th>
+        {{ 'myProjects.settings.viewOnlyTable.createdBy' | translate }}
+      </th>
+
+      <th>
+        {{ 'myProjects.settings.viewOnlyTable.anonymous' | translate }}
+      </th>
+
+      <th></th>
+    </tr>
+  </ng-template>
+
+  <ng-template #body let-item>
+    <tr>
+      <td class="flex align-items-center gap-2">
+        <span class="w-3 min-w-max">{{ item.linkName }}</span>
+
+        <div class="relative flex align-items-center">
+          <input pInputText class="h-auto text-base w-max py-2 px-3" type="text" [value]="item.link" />
+
+          <p-button class="absolute btn-icon-text form-btn icon-copy-btn button-shadow-none" (click)="copy(item.link)">
+            <i class="osf-icon-copy"></i>
+          </p-button>
+        </div>
+      </td>
+      <td>{{ item.sharedComponents }}</td>
+      <td>{{ item.createdDate | date: 'MMM d, y h:mm a' }}</td>
+      <td>{{ item.createdBy }}</td>
+      <td>{{ item.anonymous }}</td>
+      <td>
+        <i class="osf-icon-trash delete-icon"></i>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
diff --git a/src/app/shared/components/view-only-table/view-only-table.component.scss b/src/app/shared/components/view-only-table/view-only-table.component.scss
new file mode 100644
index 000000000..c0f57541a
--- /dev/null
+++ b/src/app/shared/components/view-only-table/view-only-table.component.scss
@@ -0,0 +1,16 @@
+@use "assets/styles/variables" as var;
+
+.delete-icon {
+  &:before {
+    color: var.$red-3;
+    cursor: pointer;
+  }
+}
+
+.icon-copy-btn {
+  right: 1.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.5rem;
+  cursor: pointer;
+}
diff --git a/src/app/shared/components/view-only-table/view-only-table.component.spec.ts b/src/app/shared/components/view-only-table/view-only-table.component.spec.ts
new file mode 100644
index 000000000..9f039e15c
--- /dev/null
+++ b/src/app/shared/components/view-only-table/view-only-table.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewOnlyTableComponent } from './view-only-table.component';
+
+describe('ViewOnlyTableComponent', () => {
+  let component: ViewOnlyTableComponent;
+  let fixture: ComponentFixture<ViewOnlyTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ViewOnlyTableComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ViewOnlyTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/components/view-only-table/view-only-table.component.ts b/src/app/shared/components/view-only-table/view-only-table.component.ts
new file mode 100644
index 000000000..b2e8101ee
--- /dev/null
+++ b/src/app/shared/components/view-only-table/view-only-table.component.ts
@@ -0,0 +1,28 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { InputText } from 'primeng/inputtext';
+import { TableModule } from 'primeng/table';
+
+import { Clipboard } from '@angular/cdk/clipboard';
+import { DatePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { LinkTableModel } from '@osf/features/project/settings';
+
+@Component({
+  selector: 'osf-view-only-table',
+  imports: [TableModule, TranslatePipe, DatePipe, InputText, ReactiveFormsModule, Button],
+  templateUrl: './view-only-table.component.html',
+  styleUrl: './view-only-table.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ViewOnlyTableComponent {
+  tableData = input.required<LinkTableModel[]>();
+
+  readonly #clipboard = inject(Clipboard);
+  copy(link: string): void {
+    this.#clipboard.copy(link);
+  }
+}
diff --git a/src/app/shared/index.ts b/src/app/shared/index.ts
new file mode 100644
index 000000000..742094d5a
--- /dev/null
+++ b/src/app/shared/index.ts
@@ -0,0 +1 @@
+export * from './components/index';
diff --git a/src/app/shared/utils/remove-nullable.const.ts b/src/app/shared/utils/remove-nullable.const.ts
index 615efe166..59872b241 100644
--- a/src/app/shared/utils/remove-nullable.const.ts
+++ b/src/app/shared/utils/remove-nullable.const.ts
@@ -1,5 +1,6 @@
 export function removeNullable<T extends object>(obj: T): Partial<T> {
   return Object.fromEntries(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     Object.entries(obj).filter(([_, value]) => value !== null && value !== undefined)
   ) as Partial<T>;
 }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index ba7f1fbf3..45ccbc5f9 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -21,7 +21,8 @@
       "overview": "Overview",
       "metadata": "Metadata",
       "files": "Files",
-      "registrations": "Registrations"
+      "registrations": "Registrations",
+      "settings": "Settings"
     }
   },
   "auth": {
@@ -216,6 +217,40 @@
         "cancel": "Cancel",
         "create": "Create Project"
       }
+    },
+    "settings": {
+      "project": "Project",
+      "saveChanges": "Save Changes",
+      "deleteProject": "Delete Project",
+      "viewOnlyLinks": "View-only Links",
+      "viewOnlySubtitle": "Create a link to share this project so those who have the link can view—but not edit—the project.",
+      "viewOnlyTable": {
+        "linkName": "Link Name",
+        "sharedComponents": "Shared Components",
+        "createdDate": "Created date",
+        "createdBy": "Created By",
+        "anonymous": "Anonymous"
+      },
+      "accessRequests": "Access Requests",
+      "accessRequestsText": "Allow users to request access to this project",
+      "wiki": "Wiki",
+      "wikiText": "Enable the wiki In [Dashboard] New and Noteworthy.",
+      "wikiConfigureTitle": "Configure",
+      "wikiConfigureText": "Create a link to share this project so those who have the link can view—but not edit—the project.",
+      "commenting": "Commenting",
+      "contributorsCanPost": "Only contributors can post comments",
+      "osfUserCanPost": "When the project is public, any OSF user can post comments",
+      "emailNotifications": "Email Notifications",
+      "emailNotificationsText": "These notification settings only apply to you. They do NOT affect any other contributor on this project.",
+      "redirectLink": "Redirect Link",
+      "redirectLinkText": "Redirect visitors from your project page to an external webpage",
+      "projectAffiliation": "Project Affiliation / Branding",
+      "projectsCanBeAffiliated": "Projects can be affiliated with institutions that have created OSF for Institutions accounts. This allows:",
+      "institutionalLogos": "institutional logos to be displayed on public projects",
+      "publicProjectsToBeDiscoverable": "public projects to be discoverable on specific institutional landing pages",
+      "singleSignInToTHeOSF": "single sign-in to the OSF with institutional credentials",
+      "faq": "FAQ",
+      "": ""
     }
   },
   "settings": {
@@ -643,4 +678,4 @@
     },
     "copyright": "Copyright © 2011-2025"
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/overrides/button.scss b/src/assets/styles/overrides/button.scss
index b8de2901f..30a27144f 100644
--- a/src/assets/styles/overrides/button.scss
+++ b/src/assets/styles/overrides/button.scss
@@ -234,3 +234,13 @@
     color: var.$grey-1;
   }
 }
+
+.bg-primary-blue-second {
+  background-color: var.$pr-blue-2;
+}
+
+.button-shadow-none {
+  .p-button {
+    box-shadow: none;
+  }
+}
diff --git a/src/assets/styles/overrides/dropdown.scss b/src/assets/styles/overrides/dropdown.scss
index bbd7a0baf..28b14595c 100644
--- a/src/assets/styles/overrides/dropdown.scss
+++ b/src/assets/styles/overrides/dropdown.scss
@@ -19,4 +19,13 @@
       background: var.$bg-blue-2;
     }
   }
+
+  &.accordion-dropdown {
+    border: none;
+    box-shadow: none;
+    min-width: 170px;
+    width: max-content;
+    max-width: 300px;
+    font-size: 1rem;
+  }
 }
diff --git a/src/assets/styles/overrides/table.scss b/src/assets/styles/overrides/table.scss
index 5953d0892..cc08dc232 100644
--- a/src/assets/styles/overrides/table.scss
+++ b/src/assets/styles/overrides/table.scss
@@ -251,3 +251,27 @@
     }
   }
 }
+
+.view-only-table {
+  .p-datatable {
+    padding: 2px;
+
+    td,
+    th {
+      background-color: transparent;
+      border-bottom: 1px solid var.$grey-2;
+    }
+
+    tr {
+      &:hover {
+        background: transparent;
+      }
+
+      &:last-of-type {
+        td {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+}

From be596595154430fea18444629fc3fbd8862c0f41 Mon Sep 17 00:00:00 2001
From: volodyayakubovskyy <vyakubovskyy477@gmail.com>
Date: Tue, 20 May 2025 10:30:58 +0300
Subject: [PATCH 2/9] feat(project-settings): added design for settings page

---
 .../accordion-table.component.spec.ts         |  22 ----
 ...t-detail-setting-accordion.component.html} |  23 +++-
 ...detail-setting-accordion.component.spec.ts |  22 ++++
 ...ect-detail-setting-accordion.component.ts} |  10 +-
 .../project/settings/components/index.ts      |   2 +-
 .../features/project/settings/mock-data.ts    |  54 +++++++++
 .../project/settings/settings.component.html  | 103 ++++++++++++++----
 .../project/settings/settings.component.scss  |  15 +++
 .../project/settings/settings.component.ts    |  80 ++++++--------
 .../view-only-table.component.html            |  16 ++-
 .../assets/images/cos-shield.svg              |   0
 src/assets/styles/overrides/button.scss       |   4 +
 src/assets/styles/overrides/dropdown.scss     |   6 +-
 13 files changed, 248 insertions(+), 109 deletions(-)
 delete mode 100644 src/app/features/project/settings/components/accordion-table/accordion-table.component.spec.ts
 rename src/app/features/project/settings/components/accordion-table/{accordion-table.component.html => project-detail-setting-accordion.component.html} (57%)
 create mode 100644 src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.spec.ts
 rename src/app/features/project/settings/components/accordion-table/{accordion-table.component.ts => project-detail-setting-accordion.component.ts} (70%)
 create mode 100644 src/app/features/project/settings/mock-data.ts
 rename "src/assets/images/\321\201os-shield.svg" => src/assets/images/cos-shield.svg (100%)

diff --git a/src/app/features/project/settings/components/accordion-table/accordion-table.component.spec.ts b/src/app/features/project/settings/components/accordion-table/accordion-table.component.spec.ts
deleted file mode 100644
index 26df6a5d4..000000000
--- a/src/app/features/project/settings/components/accordion-table/accordion-table.component.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AccordionTableComponent } from './accordion-table.component';
-
-describe('AccordionTableComponent', () => {
-  let component: AccordionTableComponent;
-  let fixture: ComponentFixture<AccordionTableComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AccordionTableComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(AccordionTableComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/features/project/settings/components/accordion-table/accordion-table.component.html b/src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.html
similarity index 57%
rename from src/app/features/project/settings/components/accordion-table/accordion-table.component.html
rename to src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.html
index bfb6d0a56..f831abcb2 100644
--- a/src/app/features/project/settings/components/accordion-table/accordion-table.component.html
+++ b/src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.html
@@ -1,6 +1,13 @@
-<div class="flex justify-between align-items-center mb-2 gap-4 w-full border-bottom-1 border-gray-300">
-  <div class="flex align-items-center gap-2 cursor-pointer w-6">
-    <p-button class="btn-icon-text form-btn button-shadow-none" (click)="toggle()">
+<div
+  class="flex justify-between align-items-center mb-2 gap-2 sm:gap-4 w-full border-bottom-1 border-gray-300 flex-column sm:flex-row"
+>
+  <div class="flex align-items-center gap-2 cursor-pointer w-full sm:w-5">
+    <p-button
+      role="button"
+      [ariaLabel]="'Toggle ' + title()"
+      class="btn-icon-text form-btn button-shadow-none"
+      (click)="toggle()"
+    >
       <i class="pi" [ngClass]="{ 'pi-plus': !expanded(), 'pi-minus': expanded() }"></i>
     </p-button>
 
@@ -8,8 +15,8 @@
   </div>
 
   @if (rightControls().length > 0) {
-    <div class="flex flex-wrap gap-4 align-items-center w-6">
-      @for (control of rightControls(); track control) {
+    <div class="flex flex-wrap gap-2 sm:gap-4 align-items-center w-full sm:w-7">
+      @for (control of rightControls(); track control.value) {
         <div class="flex align-items-center gap-2">
           @if (control.label) {
             <span class="font-medium text-color">
@@ -39,7 +46,11 @@
 </div>
 
 @if (expanded()) {
-  <div class="mt-2 pl-5 border-bottom-1 border-gray-300">
+  <div
+    class="mt-2 pl-5 border-bottom-1 border-gray-300"
+    [attr.id]="'accordion-content-' + (title() | lowercase).replace(' ', '-')"
+    [attr.aria-labelledby]="'accordion-label-' + (title() | lowercase).replace(' ', '-')"
+  >
     <ng-content></ng-content>
   </div>
 }
diff --git a/src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.spec.ts b/src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.spec.ts
new file mode 100644
index 000000000..320e8c125
--- /dev/null
+++ b/src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectDetailSettingAccordionComponent } from './project-detail-setting-accordion.component';
+
+describe('AccordionTableComponent', () => {
+  let component: ProjectDetailSettingAccordionComponent;
+  let fixture: ComponentFixture<ProjectDetailSettingAccordionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProjectDetailSettingAccordionComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProjectDetailSettingAccordionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/project/settings/components/accordion-table/accordion-table.component.ts b/src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.ts
similarity index 70%
rename from src/app/features/project/settings/components/accordion-table/accordion-table.component.ts
rename to src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.ts
index 3654d7a91..028a70ad6 100644
--- a/src/app/features/project/settings/components/accordion-table/accordion-table.component.ts
+++ b/src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.ts
@@ -1,7 +1,7 @@
 import { Button } from 'primeng/button';
 import { DropdownModule } from 'primeng/dropdown';
 
-import { NgClass } from '@angular/common';
+import { LowerCasePipe, NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
@@ -20,12 +20,12 @@ type RightControl =
     };
 
 @Component({
-  selector: 'osf-accordion-table',
-  imports: [NgClass, DropdownModule, FormsModule, Button],
-  templateUrl: './accordion-table.component.html',
+  selector: 'osf-project-detail-setting-accordion',
+  imports: [NgClass, DropdownModule, FormsModule, Button, LowerCasePipe],
+  templateUrl: './project-detail-setting-accordion.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AccordionTableComponent {
+export class ProjectDetailSettingAccordionComponent {
   title = input.required<string>();
 
   rightControls = input.required<RightControl[]>();
diff --git a/src/app/features/project/settings/components/index.ts b/src/app/features/project/settings/components/index.ts
index 74042b224..4de25bfb0 100644
--- a/src/app/features/project/settings/components/index.ts
+++ b/src/app/features/project/settings/components/index.ts
@@ -1 +1 @@
-export * from './accordion-table/accordion-table.component';
+export * from './accordion-table/project-detail-setting-accordion.component';
diff --git a/src/app/features/project/settings/mock-data.ts b/src/app/features/project/settings/mock-data.ts
new file mode 100644
index 000000000..b8d8e05f8
--- /dev/null
+++ b/src/app/features/project/settings/mock-data.ts
@@ -0,0 +1,54 @@
+export const mockSettingsData = {
+  tableData: [
+    {
+      linkName: 'name',
+      sharedComponents: 'Project name',
+      createdDate: new Date(),
+      createdBy: 'Igor',
+      anonymous: false,
+      link: 'www.facebook.com',
+    },
+    {
+      linkName: 'name',
+      sharedComponents: 'Project name',
+      createdDate: new Date(),
+      createdBy: 'Igor',
+      anonymous: false,
+      link: 'www.facebook.com',
+    },
+    {
+      linkName: 'name',
+      sharedComponents: 'Project name',
+      createdDate: new Date(),
+      createdBy: 'Igor',
+      anonymous: false,
+      link: 'www.facebook.com',
+    },
+    {
+      linkName: 'name',
+      sharedComponents: 'Project name',
+      createdDate: new Date(),
+      createdBy: 'Igor',
+      anonymous: false,
+      link: 'www.facebook.com',
+    },
+  ],
+  access: 'write',
+  accessOptions: [
+    { label: 'Contributors (with write access)', value: 'write' },
+    { label: 'Anyone with link', value: 'public' },
+  ],
+  commentSetting: 'instantly',
+  fileSetting: 'instantly',
+  dropdownOptions: [
+    { label: 'Instantly', value: 'instantly' },
+    { label: 'Daily', value: 'daily' },
+    { label: 'Never', value: 'never' },
+  ],
+  affiliations: [
+    {
+      name: 'Center for Open Science',
+      canDelete: true,
+    },
+  ],
+};
diff --git a/src/app/features/project/settings/settings.component.html b/src/app/features/project/settings/settings.component.html
index 84ef91faa..9eafcdc61 100644
--- a/src/app/features/project/settings/settings.component.html
+++ b/src/app/features/project/settings/settings.component.html
@@ -2,7 +2,7 @@
   <osf-sub-header [title]="'navigation.project.settings' | translate" />
 
   <div class="flex-column flex flex-1 w-full">
-    <p-tabpanels class="flex flex-column gap-4 flex-1 w-full bg-white">
+    <p-tabpanels role="tablist" class="flex flex-column gap-4 flex-1 w-full bg-white" [class.mobile]="!isDesktop()">
       <p-card>
         <h3 class="text-xl pb-4">{{ 'myProjects.settings.project' | translate }}</h3>
 
@@ -12,7 +12,14 @@ <h3 class="text-xl pb-4">{{ 'myProjects.settings.project' | translate }}</h3>
             <label for="project-title">
               {{ 'myProjects.createProject.title' | translate }}
             </label>
-            <input pInputText id="project-title" type="text" [formControlName]="ProjectFormControls.Title" />
+            <input
+              pInputText
+              id="project-title"
+              type="text"
+              aria-required="true"
+              aria-describedby="project-title"
+              [formControlName]="ProjectFormControls.Title"
+            />
           </div>
 
           <!-- Description -->
@@ -77,10 +84,16 @@ <h3 class="text-xl pb-2">{{ 'myProjects.settings.viewOnlyLinks' | translate }}</
         <h3 class="text-xl pb-4">{{ 'myProjects.settings.accessRequests' | translate }}</h3>
 
         <div class="flex align-items-center w-full">
-          <p-checkbox [binary]="true" [formControl]="accessRequest" id="accessRequest" name="ongoing"></p-checkbox>
-          <p class="ml-2">
+          <p-checkbox
+            ariaLabel="Checkbox for access request"
+            [binary]="true"
+            [formControl]="accessRequest"
+            id="accessRequest"
+            name="ongoing"
+          ></p-checkbox>
+          <label for="accessRequest" class="ml-2">
             {{ 'myProjects.settings.accessRequestsText' | translate }}
-          </p>
+          </label>
         </div>
       </p-card>
 
@@ -88,18 +101,24 @@ <h3 class="text-xl pb-4">{{ 'myProjects.settings.accessRequests' | translate }}<
         <h3 class="text-xl pb-4">{{ 'myProjects.settings.wiki' | translate }}</h3>
 
         <div class="flex align-items-center w-full">
-          <p-checkbox [binary]="true" [formControl]="wiki" id="wiki" name="ongoing"></p-checkbox>
-
-          <p class="ml-2">
+          <p-checkbox
+            ariaLabel="Checkbox for wiki"
+            [binary]="true"
+            [formControl]="wiki"
+            id="wiki"
+            name="ongoing"
+          ></p-checkbox>
+
+          <label for="wiki" class="ml-2">
             {{ 'myProjects.settings.wikiText' | translate }}
-          </p>
+          </label>
         </div>
 
         <h3 class="text-xl py-4">{{ 'myProjects.settings.wikiConfigureTitle' | translate }}</h3>
 
         <p class="pb-4">{{ 'myProjects.settings.wikiConfigureText' | translate }}</p>
 
-        <osf-accordion-table
+        <osf-project-detail-setting-accordion
           [title]="'Project name example'"
           [rightControls]="[
             {
@@ -115,7 +134,7 @@ <h3 class="text-xl py-4">{{ 'myProjects.settings.wikiConfigureTitle' | translate
             <i class="pi pi-minus text-sm icon-space"></i>
             <span>Sub text</span>
           </div>
-        </osf-accordion-table>
+        </osf-project-detail-setting-accordion>
       </p-card>
 
       <p-card>
@@ -123,12 +142,24 @@ <h3 class="text-xl pb-4">{{ 'myProjects.settings.commenting' | translate }}</h3>
 
         <div class="flex flex-column gap-3">
           <div class="flex gap-3">
-            <p-radio-button name="contributorsCanPost" value="0" [(ngModel)]="commenting"></p-radio-button>
+            <p-radio-button
+              [ariaLabel]="'Select ' + 'myProjects.settings.contributorsCanPost' | translate"
+              name="contributorsCanPost"
+              value="0"
+              [(ngModel)]="commenting"
+            ></p-radio-button>
             <p>{{ 'myProjects.settings.contributorsCanPost' | translate }}</p>
           </div>
 
           <div class="flex gap-3">
-            <p-radio-button name="osfUserCanPost" value="1" [(ngModel)]="commenting"></p-radio-button>
+            <p-radio-button
+              [ariaLabel]="'Select ' + 'myProjects.settings.osfUserCanPost' | translate"
+              name="osfUserCanPost"
+              value="1"
+              [(ngModel)]="commenting"
+            >
+            </p-radio-button>
+
             <p>{{ 'myProjects.settings.osfUserCanPost' | translate }}</p>
           </div>
         </div>
@@ -139,7 +170,7 @@ <h3 class="text-xl pb-4">{{ 'myProjects.settings.emailNotifications' | translate
 
         <p class="pb-4">{{ 'myProjects.settings.emailNotificationsText' | translate }}</p>
 
-        <osf-accordion-table
+        <osf-project-detail-setting-accordion
           [title]="'Project name example'"
           [rightControls]="[
             {
@@ -160,17 +191,23 @@ <h3 class="text-xl pb-4">{{ 'myProjects.settings.emailNotifications' | translate
             <i class="pi pi-minus text-sm icon-space"></i>
             <span>Sub text</span>
           </div>
-        </osf-accordion-table>
+        </osf-project-detail-setting-accordion>
       </p-card>
 
       <p-card>
         <h3 class="text-xl pb-4">{{ 'myProjects.settings.redirectLink' | translate }}</h3>
 
         <div class="flex align-items-center w-full">
-          <p-checkbox [binary]="true" [formControl]="redirectLink" id="redirectLink" name="ongoing"></p-checkbox>
-          <p class="ml-2">
+          <p-checkbox
+            ariaLabel="Checkbox for redirect link"
+            [binary]="true"
+            [formControl]="redirectLink"
+            id="redirectLink"
+            name="ongoing"
+          ></p-checkbox>
+          <label for="redirectLink" class="ml-2">
             {{ 'myProjects.settings.redirectLinkText' | translate }}
-          </p>
+          </label>
         </div>
       </p-card>
 
@@ -179,14 +216,32 @@ <h3 class="text-xl pb-4">{{ 'myProjects.settings.projectAffiliation' | translate
 
         <p>{{ 'myProjects.settings.projectsCanBeAffiliated' | translate }}</p>
 
-        <ul>
-          <li>{{ 'myProjects.settings.institutionalLogos' | translate }}</li>
-          <li>{{ 'myProjects.settings.publicProjectsToBeDiscoverable' | translate }}</li>
-          <li>{{ 'myProjects.settings.singleSignInToTHeOSF' | translate }}</li>
-          <li>
+        <ol class="list-disc ml-5" role="list">
+          <li class="list-disc">{{ 'myProjects.settings.institutionalLogos' | translate }}</li>
+          <li class="list-disc">{{ 'myProjects.settings.publicProjectsToBeDiscoverable' | translate }}</li>
+          <li class="list-disc">{{ 'myProjects.settings.singleSignInToTHeOSF' | translate }}</li>
+          <li class="list-disc">
             <a routerLink="#">{{ 'myProjects.settings.faq' | translate }}</a>
           </li>
-        </ul>
+        </ol>
+
+        <div class="flex flex-column gap-3 w-full mt-5">
+          @for (affiliation of affiliations; track $index) {
+            <div
+              class="flex justify-content-between align-items-center w-full pb-2 sm:pr-4 pr-2 border-bottom-1 border-gray-300"
+            >
+              <div class="flex align-items-center gap-3">
+                <img ngSrc="assets/images/cos-shield.svg" alt="cos-shield" width="44" height="44" />
+
+                <p>{{ affiliation.name }}</p>
+              </div>
+
+              <p-button ariaLabel="Delete affiliation" class="btn-icon-text form-btn icon-copy-btn button-shadow-none">
+                <i class="osf-icon-trash delete-icon"></i>
+              </p-button>
+            </div>
+          }
+        </div>
       </p-card>
     </p-tabpanels>
   </div>
diff --git a/src/app/features/project/settings/settings.component.scss b/src/app/features/project/settings/settings.component.scss
index 891d35c2c..eff900e79 100644
--- a/src/app/features/project/settings/settings.component.scss
+++ b/src/app/features/project/settings/settings.component.scss
@@ -8,4 +8,19 @@
 
 .icon-space {
   padding: 0.7rem 1.1rem;
+
+  @media (max-width: 600px) {
+    padding: 0.8rem 0.75rem;
+  }
+}
+
+label {
+  color: var.$dark-blue-1;
+}
+
+.delete-icon {
+  &:before {
+    color: var.$red-3;
+    cursor: pointer;
+  }
 }
diff --git a/src/app/features/project/settings/settings.component.ts b/src/app/features/project/settings/settings.component.ts
index d7071b9c7..80600ede4 100644
--- a/src/app/features/project/settings/settings.component.ts
+++ b/src/app/features/project/settings/settings.component.ts
@@ -8,12 +8,14 @@ import { RadioButton } from 'primeng/radiobutton';
 import { TabPanels } from 'primeng/tabs';
 import { Textarea } from 'primeng/textarea';
 
+import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 
-import { AccordionTableComponent } from '@osf/features/project/settings/components';
+import { ProjectDetailSettingAccordionComponent } from '@osf/features/project/settings/components';
+import { mockSettingsData } from '@osf/features/project/settings/mock-data';
 import { LinkTableModel } from '@osf/features/project/settings/models';
 import { ShareIndexingEnum } from '@osf/features/settings/account-settings/components/share-indexing/enums/share-indexing.enum';
 import { ViewOnlyTableComponent } from '@osf/shared';
@@ -36,9 +38,10 @@ import { IS_WEB } from '@shared/utils/breakpoints.tokens';
     Button,
     ViewOnlyTableComponent,
     Checkbox,
-    AccordionTableComponent,
+    ProjectDetailSettingAccordionComponent,
     RadioButton,
     RouterLink,
+    NgOptimizedImage,
   ],
   templateUrl: './settings.component.html',
   styleUrl: './settings.component.scss',
@@ -63,53 +66,34 @@ export class SettingsComponent {
   wiki = new FormControl<boolean>(false);
   redirectLink = new FormControl<boolean>(false);
 
-  tableData: LinkTableModel[] = [
-    {
-      linkName: 'name',
-      sharedComponents: 'Project name',
-      createdDate: new Date(),
-      createdBy: 'Igor',
-      anonymous: false,
-      link: 'www.facebook.com',
-    },
-    {
-      linkName: 'name',
-      sharedComponents: 'Project name',
-      createdDate: new Date(),
-      createdBy: 'Igor',
-      anonymous: false,
-      link: 'www.facebook.com',
-    },
-    {
-      linkName: 'name',
-      sharedComponents: 'Project name',
-      createdDate: new Date(),
-      createdBy: 'Igor',
-      anonymous: false,
-      link: 'www.facebook.com',
-    },
-    {
-      linkName: 'name',
-      sharedComponents: 'Project name',
-      createdDate: new Date(),
-      createdBy: 'Igor',
-      anonymous: false,
-      link: 'www.facebook.com',
-    },
-  ];
-  access = 'write';
-  accessOptions = [
-    { label: 'Contributors (with write access)', value: 'write' },
-    { label: 'Anyone with link', value: 'public' },
-  ];
-  commentSetting = 'instantly';
-  fileSetting = 'instantly';
+  tableData: LinkTableModel[];
+  access: string;
+  accessOptions: { label: string; value: string }[];
+  commentSetting: string;
+  fileSetting: string;
+  dropdownOptions: { label: string; value: string }[];
+  affiliations: { name: string; canDelete: boolean }[];
+
+  constructor() {
+    [
+      this.tableData,
+      this.access,
+      this.accessOptions,
+      this.commentSetting,
+      this.fileSetting,
+      this.dropdownOptions,
+      this.affiliations,
+    ] = [
+      mockSettingsData.tableData,
+      mockSettingsData.access,
+      mockSettingsData.accessOptions,
+      mockSettingsData.commentSetting,
+      mockSettingsData.fileSetting,
+      mockSettingsData.dropdownOptions,
+      mockSettingsData.affiliations,
+    ];
+  }
 
-  dropdownOptions = [
-    { label: 'Instantly', value: 'instantly' },
-    { label: 'Daily', value: 'daily' },
-    { label: 'Never', value: 'never' },
-  ];
   submitForm(): void {
     // TODO: implement form submission
   }
diff --git a/src/app/shared/components/view-only-table/view-only-table.component.html b/src/app/shared/components/view-only-table/view-only-table.component.html
index b1dfb6f44..158013e09 100644
--- a/src/app/shared/components/view-only-table/view-only-table.component.html
+++ b/src/app/shared/components/view-only-table/view-only-table.component.html
@@ -30,9 +30,21 @@
         <span class="w-3 min-w-max">{{ item.linkName }}</span>
 
         <div class="relative flex align-items-center">
-          <input pInputText class="h-auto text-base w-max py-2 px-3" type="text" [value]="item.link" />
+          <input
+            [id]="item.link"
+            [attr.aria-label]="'Link for ' + item.link"
+            pInputText
+            class="h-auto text-base w-max py-2 px-3"
+            type="text"
+            [value]="item.link"
+          />
 
-          <p-button class="absolute btn-icon-text form-btn icon-copy-btn button-shadow-none" (click)="copy(item.link)">
+          <p-button
+            [ariaLabel]="'Copy link'"
+            type="button"
+            class="absolute btn-icon-text form-btn icon-copy-btn button-shadow-none"
+            (click)="copy(item.link)"
+          >
             <i class="osf-icon-copy"></i>
           </p-button>
         </div>
diff --git "a/src/assets/images/\321\201os-shield.svg" b/src/assets/images/cos-shield.svg
similarity index 100%
rename from "src/assets/images/\321\201os-shield.svg"
rename to src/assets/images/cos-shield.svg
diff --git a/src/assets/styles/overrides/button.scss b/src/assets/styles/overrides/button.scss
index 30a27144f..8e05ed2bc 100644
--- a/src/assets/styles/overrides/button.scss
+++ b/src/assets/styles/overrides/button.scss
@@ -242,5 +242,9 @@
 .button-shadow-none {
   .p-button {
     box-shadow: none;
+
+    @media (max-width: 600px) {
+      padding: 0;
+    }
   }
 }
diff --git a/src/assets/styles/overrides/dropdown.scss b/src/assets/styles/overrides/dropdown.scss
index 28b14595c..ef32a8c35 100644
--- a/src/assets/styles/overrides/dropdown.scss
+++ b/src/assets/styles/overrides/dropdown.scss
@@ -23,9 +23,13 @@
   &.accordion-dropdown {
     border: none;
     box-shadow: none;
-    min-width: 170px;
+    min-width: 120px;
     width: max-content;
     max-width: 300px;
     font-size: 1rem;
+
+    @media (max-width: 600px) {
+      max-width: 240px;
+    }
   }
 }

From 9805d219083fb98babfa2ff0c497571876e8a80f Mon Sep 17 00:00:00 2001
From: volodyayakubovskyy <vyakubovskyy477@gmail.com>
Date: Tue, 20 May 2025 11:08:34 +0300
Subject: [PATCH 3/9] feat(project-settings): added design for settings page

---
 .../features/project/metadata/project-metadata.component.html   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/project/metadata/project-metadata.component.html b/src/app/features/project/metadata/project-metadata.component.html
index 9e17d0536..f19d3c730 100644
--- a/src/app/features/project/metadata/project-metadata.component.html
+++ b/src/app/features/project/metadata/project-metadata.component.html
@@ -29,6 +29,6 @@ <h2>{{ meta.title }}</h2>
 
   <div class="flex justify-content-end flex-0 mt-auto">
     <p-button label="Cancel" [link]="true" severity="info" class="w-10rem btn-full-width"></p-button>
-    <p-button class="w-10rem btn-full-width bg-primary-blue-second" label="Next"></p-button>
+    <p-button class="w-10rem btn-full-width" label="Next"></p-button>
   </div>
 </section>

From 58ac2b6c1edce9adc58824dbf2224512ab56a354 Mon Sep 17 00:00:00 2001
From: volodyayakubovskyy <vyakubovskyy477@gmail.com>
Date: Tue, 20 May 2025 11:49:56 +0300
Subject: [PATCH 4/9] feat(project-settings): added fixes by suggestions

---
 src/app/features/project/settings/settings.component.scss | 4 ++--
 src/assets/i18n/en.json                                   | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app/features/project/settings/settings.component.scss b/src/app/features/project/settings/settings.component.scss
index eff900e79..b78b9047f 100644
--- a/src/app/features/project/settings/settings.component.scss
+++ b/src/app/features/project/settings/settings.component.scss
@@ -1,5 +1,5 @@
-@use "../../../../assets/styles/variables" as var;
-@use "../../../../assets/styles/mixins" as mix;
+@use "assets/styles/variables" as var;
+@use "assets/styles/mixins" as mix;
 
 :host {
   @include mix.flex-column;
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 45ccbc5f9..ff6958217 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -250,7 +250,6 @@
       "publicProjectsToBeDiscoverable": "public projects to be discoverable on specific institutional landing pages",
       "singleSignInToTHeOSF": "single sign-in to the OSF with institutional credentials",
       "faq": "FAQ",
-      "": ""
     }
   },
   "settings": {

From 379c15db6dc56132f6f74d986615738271fa1cd8 Mon Sep 17 00:00:00 2001
From: volodyayakubovskyy <vyakubovskyy477@gmail.com>
Date: Tue, 20 May 2025 12:59:03 +0300
Subject: [PATCH 5/9] feat(project-settings): added fixes by suggestions

---
 ...ct-detail-setting-accordion.component.html |  4 +--
 ...ject-detail-setting-accordion.component.ts |  2 +-
 src/app/features/project/settings/index.ts    |  3 --
 .../features/project/settings/mock-data.ts    | 36 +++++++++++++++++++
 .../project/settings/settings.component.html  | 34 +++---------------
 .../project/settings/settings.component.scss  |  2 +-
 .../project/settings/settings.component.ts    |  7 ++--
 .../view-only-table.component.ts              |  2 +-
 src/app/shared/index.ts                       |  1 -
 src/assets/i18n/en.json                       |  2 +-
 src/assets/styles/overrides/button.scss       |  4 +--
 src/assets/styles/overrides/dropdown.scss     |  2 +-
 12 files changed, 55 insertions(+), 44 deletions(-)
 delete mode 100644 src/app/features/project/settings/index.ts
 delete mode 100644 src/app/shared/index.ts

diff --git a/src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.html b/src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.html
index f831abcb2..fe6294db5 100644
--- a/src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.html
+++ b/src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.html
@@ -1,5 +1,5 @@
 <div
-  class="flex justify-between align-items-center mb-2 gap-2 sm:gap-4 w-full border-bottom-1 border-gray-300 flex-column sm:flex-row"
+  class="flex justify-between align-items-center mb-2 w-full border-bottom-1 border-gray-300 gap-2 flex-column sm:flex-row sm:gap-4"
 >
   <div class="flex align-items-center gap-2 cursor-pointer w-full sm:w-5">
     <p-button
@@ -15,7 +15,7 @@
   </div>
 
   @if (rightControls().length > 0) {
-    <div class="flex flex-wrap gap-2 sm:gap-4 align-items-center w-full sm:w-7">
+    <div class="flex flex-wrap gap-2 align-items-center w-full sm:gap-4 sm:w-7">
       @for (control of rightControls(); track control.value) {
         <div class="flex align-items-center gap-2">
           @if (control.label) {
diff --git a/src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.ts b/src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.ts
index 028a70ad6..b0ad68792 100644
--- a/src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.ts
+++ b/src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.ts
@@ -5,7 +5,7 @@ import { LowerCasePipe, NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-type RightControl =
+export type RightControl =
   | {
       type: 'dropdown';
       label?: string;
diff --git a/src/app/features/project/settings/index.ts b/src/app/features/project/settings/index.ts
deleted file mode 100644
index c27c630b9..000000000
--- a/src/app/features/project/settings/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './components';
-export * from './models';
-export * from './settings.component';
diff --git a/src/app/features/project/settings/mock-data.ts b/src/app/features/project/settings/mock-data.ts
index b8d8e05f8..8b3ce49d5 100644
--- a/src/app/features/project/settings/mock-data.ts
+++ b/src/app/features/project/settings/mock-data.ts
@@ -51,4 +51,40 @@ export const mockSettingsData = {
       canDelete: true,
     },
   ],
+  rightControls: {
+    wiki: [
+      {
+        type: 'dropdown',
+        label: 'Who can edit:',
+        value: 'write',
+        options: [
+          { label: 'Contributors (with write access)', value: 'write' },
+          { label: 'Anyone with link', value: 'public' },
+        ],
+        onChange: (value: string) => console.log('Access changed to', value),
+      },
+    ],
+    notifications: [
+      {
+        type: 'dropdown',
+        label: 'Comments added:',
+        value: 'instantly',
+        options: [
+          { label: 'Instantly', value: 'instantly' },
+          { label: 'Daily', value: 'daily' },
+          { label: 'Never', value: 'never' },
+        ],
+      },
+      {
+        type: 'dropdown',
+        label: 'Files updated:',
+        value: 'instantly',
+        options: [
+          { label: 'Instantly', value: 'instantly' },
+          { label: 'Daily', value: 'daily' },
+          { label: 'Never', value: 'never' },
+        ],
+      },
+    ],
+  },
 };
diff --git a/src/app/features/project/settings/settings.component.html b/src/app/features/project/settings/settings.component.html
index 9eafcdc61..4c0bc4bc2 100644
--- a/src/app/features/project/settings/settings.component.html
+++ b/src/app/features/project/settings/settings.component.html
@@ -35,7 +35,7 @@ <h3 class="text-xl pb-4">{{ 'myProjects.settings.project' | translate }}</h3>
             ></textarea>
           </div>
 
-          <div class="flex sm:justify-content-end flex-0 gap-2 justify-content-between">
+          <div class="flex flex-0 gap-2 justify-content-between sm:justify-content-end">
             <p-button
               type="button"
               [label]="'settings.accountSettings.common.buttons.cancel' | translate"
@@ -54,7 +54,7 @@ <h3 class="text-xl pb-4">{{ 'myProjects.settings.project' | translate }}</h3>
             <p-button
               severity="danger"
               [label]="'myProjects.settings.deleteProject' | translate"
-              class="md:ml-auto sm:w-10rem btn-full-width"
+              class="btn-full-width md:ml-auto sm:w-10rem"
             ></p-button>
           </div>
         </form>
@@ -118,18 +118,7 @@ <h3 class="text-xl py-4">{{ 'myProjects.settings.wikiConfigureTitle' | translate
 
         <p class="pb-4">{{ 'myProjects.settings.wikiConfigureText' | translate }}</p>
 
-        <osf-project-detail-setting-accordion
-          [title]="'Project name example'"
-          [rightControls]="[
-            {
-              type: 'dropdown',
-              label: 'Who can edit:',
-              value: access,
-              options: accessOptions,
-              onChange: onAccessChange,
-            },
-          ]"
-        >
+        <osf-project-detail-setting-accordion [title]="'Project name example'" [rightControls]="rightControls['wiki']">
           <div class="flex align-items-baseline gap-2">
             <i class="pi pi-minus text-sm icon-space"></i>
             <span>Sub text</span>
@@ -172,20 +161,7 @@ <h3 class="text-xl pb-4">{{ 'myProjects.settings.emailNotifications' | translate
 
         <osf-project-detail-setting-accordion
           [title]="'Project name example'"
-          [rightControls]="[
-            {
-              type: 'dropdown',
-              label: 'Comments added:',
-              value: commentSetting,
-              options: dropdownOptions,
-            },
-            {
-              type: 'dropdown',
-              label: 'Files updated:',
-              value: fileSetting,
-              options: dropdownOptions,
-            },
-          ]"
+          [rightControls]="rightControls['notifications']"
         >
           <div class="flex align-items-baseline gap-2">
             <i class="pi pi-minus text-sm icon-space"></i>
@@ -228,7 +204,7 @@ <h3 class="text-xl pb-4">{{ 'myProjects.settings.projectAffiliation' | translate
         <div class="flex flex-column gap-3 w-full mt-5">
           @for (affiliation of affiliations; track $index) {
             <div
-              class="flex justify-content-between align-items-center w-full pb-2 sm:pr-4 pr-2 border-bottom-1 border-gray-300"
+              class="flex justify-content-between align-items-center w-full border-bottom-1 border-gray-300 pb-2 pr-2 sm:pr-4"
             >
               <div class="flex align-items-center gap-3">
                 <img ngSrc="assets/images/cos-shield.svg" alt="cos-shield" width="44" height="44" />
diff --git a/src/app/features/project/settings/settings.component.scss b/src/app/features/project/settings/settings.component.scss
index b78b9047f..df885f3c6 100644
--- a/src/app/features/project/settings/settings.component.scss
+++ b/src/app/features/project/settings/settings.component.scss
@@ -9,7 +9,7 @@
 .icon-space {
   padding: 0.7rem 1.1rem;
 
-  @media (max-width: 600px) {
+  @media (max-width: 575px) {
     padding: 0.8rem 0.75rem;
   }
 }
diff --git a/src/app/features/project/settings/settings.component.ts b/src/app/features/project/settings/settings.component.ts
index 80600ede4..8507a9054 100644
--- a/src/app/features/project/settings/settings.component.ts
+++ b/src/app/features/project/settings/settings.component.ts
@@ -14,11 +14,11 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 
-import { ProjectDetailSettingAccordionComponent } from '@osf/features/project/settings/components';
+import { ProjectDetailSettingAccordionComponent, RightControl } from '@osf/features/project/settings/components';
 import { mockSettingsData } from '@osf/features/project/settings/mock-data';
 import { LinkTableModel } from '@osf/features/project/settings/models';
 import { ShareIndexingEnum } from '@osf/features/settings/account-settings/components/share-indexing/enums/share-indexing.enum';
-import { ViewOnlyTableComponent } from '@osf/shared';
+import { ViewOnlyTableComponent } from '@shared/components';
 import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component';
 import { ProjectForm } from '@shared/entities/create-project-form.interface';
 import { ProjectFormControls } from '@shared/entities/create-project-form-controls.enum';
@@ -73,6 +73,7 @@ export class SettingsComponent {
   fileSetting: string;
   dropdownOptions: { label: string; value: string }[];
   affiliations: { name: string; canDelete: boolean }[];
+  rightControls: { wiki: RightControl[]; notifications: RightControl[] };
 
   constructor() {
     [
@@ -83,6 +84,7 @@ export class SettingsComponent {
       this.fileSetting,
       this.dropdownOptions,
       this.affiliations,
+      this.rightControls,
     ] = [
       mockSettingsData.tableData,
       mockSettingsData.access,
@@ -91,6 +93,7 @@ export class SettingsComponent {
       mockSettingsData.fileSetting,
       mockSettingsData.dropdownOptions,
       mockSettingsData.affiliations,
+      mockSettingsData.rightControls as { wiki: RightControl[]; notifications: RightControl[] },
     ];
   }
 
diff --git a/src/app/shared/components/view-only-table/view-only-table.component.ts b/src/app/shared/components/view-only-table/view-only-table.component.ts
index b2e8101ee..7d5591d16 100644
--- a/src/app/shared/components/view-only-table/view-only-table.component.ts
+++ b/src/app/shared/components/view-only-table/view-only-table.component.ts
@@ -9,7 +9,7 @@ import { DatePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { LinkTableModel } from '@osf/features/project/settings';
+import { LinkTableModel } from '@osf/features/project/settings/models';
 
 @Component({
   selector: 'osf-view-only-table',
diff --git a/src/app/shared/index.ts b/src/app/shared/index.ts
deleted file mode 100644
index 742094d5a..000000000
--- a/src/app/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/index';
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index ff6958217..4efaf37ff 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -249,7 +249,7 @@
       "institutionalLogos": "institutional logos to be displayed on public projects",
       "publicProjectsToBeDiscoverable": "public projects to be discoverable on specific institutional landing pages",
       "singleSignInToTHeOSF": "single sign-in to the OSF with institutional credentials",
-      "faq": "FAQ",
+      "faq": "FAQ"
     }
   },
   "settings": {
diff --git a/src/assets/styles/overrides/button.scss b/src/assets/styles/overrides/button.scss
index 8e05ed2bc..1271cf45b 100644
--- a/src/assets/styles/overrides/button.scss
+++ b/src/assets/styles/overrides/button.scss
@@ -235,7 +235,7 @@
   }
 }
 
-.bg-primary-blue-second {
+.bg-primary-blue-second.p-button {
   background-color: var.$pr-blue-2;
 }
 
@@ -243,7 +243,7 @@
   .p-button {
     box-shadow: none;
 
-    @media (max-width: 600px) {
+    @media (max-width: 575px) {
       padding: 0;
     }
   }
diff --git a/src/assets/styles/overrides/dropdown.scss b/src/assets/styles/overrides/dropdown.scss
index ef32a8c35..dbbe388a4 100644
--- a/src/assets/styles/overrides/dropdown.scss
+++ b/src/assets/styles/overrides/dropdown.scss
@@ -28,7 +28,7 @@
     max-width: 300px;
     font-size: 1rem;
 
-    @media (max-width: 600px) {
+    @media (max-width: 575px) {
       max-width: 240px;
     }
   }

From a13b34feffc97a481d7a75e8535fc0c49937528c Mon Sep 17 00:00:00 2001
From: volodyayakubovskyy <vyakubovskyy477@gmail.com>
Date: Tue, 20 May 2025 13:06:24 +0300
Subject: [PATCH 6/9] feat(project-settings): added fixes by suggestions

---
 src/app/features/project/settings/settings.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/project/settings/settings.component.html b/src/app/features/project/settings/settings.component.html
index 4c0bc4bc2..8f66d675a 100644
--- a/src/app/features/project/settings/settings.component.html
+++ b/src/app/features/project/settings/settings.component.html
@@ -54,7 +54,7 @@ <h3 class="text-xl pb-4">{{ 'myProjects.settings.project' | translate }}</h3>
             <p-button
               severity="danger"
               [label]="'myProjects.settings.deleteProject' | translate"
-              class="btn-full-width md:ml-auto sm:w-10rem"
+              class="btn-full-width sm:w-10rem md:ml-auto"
             ></p-button>
           </div>
         </form>

From d99cf556cac870442702db4752542e665139881e Mon Sep 17 00:00:00 2001
From: volodyayakubovskyy <vyakubovskyy477@gmail.com>
Date: Tue, 20 May 2025 15:12:38 +0300
Subject: [PATCH 7/9] feat(project-settings): added fixes by suggestions

---
 .../project-detail-setting-accordion.component.html               | 0
 .../project-detail-setting-accordion.component.spec.ts            | 0
 .../project-detail-setting-accordion.component.ts                 | 0
 src/app/features/project/settings/models/right-control.model.ts   | 0
 4 files changed, 0 insertions(+), 0 deletions(-)
 rename src/app/features/project/settings/components/{accordion-table => project-detail-setting-accordion}/project-detail-setting-accordion.component.html (100%)
 rename src/app/features/project/settings/components/{accordion-table => project-detail-setting-accordion}/project-detail-setting-accordion.component.spec.ts (100%)
 rename src/app/features/project/settings/components/{accordion-table => project-detail-setting-accordion}/project-detail-setting-accordion.component.ts (100%)
 create mode 100644 src/app/features/project/settings/models/right-control.model.ts

diff --git a/src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.html b/src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.html
similarity index 100%
rename from src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.html
rename to src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.html
diff --git a/src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.spec.ts b/src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.spec.ts
similarity index 100%
rename from src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.spec.ts
rename to src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.spec.ts
diff --git a/src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.ts b/src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.ts
similarity index 100%
rename from src/app/features/project/settings/components/accordion-table/project-detail-setting-accordion.component.ts
rename to src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.ts
diff --git a/src/app/features/project/settings/models/right-control.model.ts b/src/app/features/project/settings/models/right-control.model.ts
new file mode 100644
index 000000000..e69de29bb

From c69d6513664cd56ba14d29e706d6f3968dc2c74d Mon Sep 17 00:00:00 2001
From: volodyayakubovskyy <vyakubovskyy477@gmail.com>
Date: Tue, 20 May 2025 15:13:59 +0300
Subject: [PATCH 8/9] feat(project-settings): added fixes by suggestions

---
 .../features/project/settings/components/index.ts  |  2 +-
 .../project-detail-setting-accordion.component.ts  | 14 +-------------
 .../project/settings/models/right-control.model.ts | 13 +++++++++++++
 .../project/settings/settings.component.html       |  8 ++++----
 .../project/settings/settings.component.scss       |  2 +-
 .../project/settings/settings.component.ts         |  9 +++------
 .../view-only-table/view-only-table.component.ts   |  1 +
 7 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/app/features/project/settings/components/index.ts b/src/app/features/project/settings/components/index.ts
index 4de25bfb0..005b28f37 100644
--- a/src/app/features/project/settings/components/index.ts
+++ b/src/app/features/project/settings/components/index.ts
@@ -1 +1 @@
-export * from './accordion-table/project-detail-setting-accordion.component';
+export * from '@osf/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component';
diff --git a/src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.ts b/src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.ts
index b0ad68792..78705a40c 100644
--- a/src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.ts
+++ b/src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.ts
@@ -5,19 +5,7 @@ import { LowerCasePipe, NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-export type RightControl =
-  | {
-      type: 'dropdown';
-      label?: string;
-      value: string;
-      options: { label: string; value: string }[];
-      onChange?: (value: string) => void;
-    }
-  | {
-      type: 'text';
-      label?: string;
-      value: string;
-    };
+import { RightControl } from '@osf/features/project/settings/models/right-control.model';
 
 @Component({
   selector: 'osf-project-detail-setting-accordion',
diff --git a/src/app/features/project/settings/models/right-control.model.ts b/src/app/features/project/settings/models/right-control.model.ts
index e69de29bb..ab03e6dba 100644
--- a/src/app/features/project/settings/models/right-control.model.ts
+++ b/src/app/features/project/settings/models/right-control.model.ts
@@ -0,0 +1,13 @@
+export type RightControl =
+  | {
+      type: 'dropdown';
+      label?: string;
+      value: string;
+      options: { label: string; value: string }[];
+      onChange?: (value: string) => void;
+    }
+  | {
+      type: 'text';
+      label?: string;
+      value: string;
+    };
diff --git a/src/app/features/project/settings/settings.component.html b/src/app/features/project/settings/settings.component.html
index 8f66d675a..b5f1fbac1 100644
--- a/src/app/features/project/settings/settings.component.html
+++ b/src/app/features/project/settings/settings.component.html
@@ -9,7 +9,7 @@ <h3 class="text-xl pb-4">{{ 'myProjects.settings.project' | translate }}</h3>
         <form [formGroup]="projectForm" (ngSubmit)="submitForm()" class="flex flex-column gap-4">
           <!-- Title -->
           <div class="flex flex-column">
-            <label for="project-title">
+            <label class="input-label" for="project-title">
               {{ 'myProjects.createProject.title' | translate }}
             </label>
             <input
@@ -24,7 +24,7 @@ <h3 class="text-xl pb-4">{{ 'myProjects.settings.project' | translate }}</h3>
 
           <!-- Description -->
           <div class="flex flex-column">
-            <label for="description">
+            <label class="input-label" for="description">
               {{ 'myProjects.createProject.description.label' | translate }}
             </label>
             <textarea
@@ -91,7 +91,7 @@ <h3 class="text-xl pb-4">{{ 'myProjects.settings.accessRequests' | translate }}<
             id="accessRequest"
             name="ongoing"
           ></p-checkbox>
-          <label for="accessRequest" class="ml-2">
+          <label class="input-label" for="accessRequest" class="ml-2">
             {{ 'myProjects.settings.accessRequestsText' | translate }}
           </label>
         </div>
@@ -109,7 +109,7 @@ <h3 class="text-xl pb-4">{{ 'myProjects.settings.wiki' | translate }}</h3>
             name="ongoing"
           ></p-checkbox>
 
-          <label for="wiki" class="ml-2">
+          <label class="input-label" for="wiki" class="ml-2">
             {{ 'myProjects.settings.wikiText' | translate }}
           </label>
         </div>
diff --git a/src/app/features/project/settings/settings.component.scss b/src/app/features/project/settings/settings.component.scss
index df885f3c6..5eba2ad1f 100644
--- a/src/app/features/project/settings/settings.component.scss
+++ b/src/app/features/project/settings/settings.component.scss
@@ -14,7 +14,7 @@
   }
 }
 
-label {
+.input-label {
   color: var.$dark-blue-1;
 }
 
diff --git a/src/app/features/project/settings/settings.component.ts b/src/app/features/project/settings/settings.component.ts
index 8507a9054..672f041dd 100644
--- a/src/app/features/project/settings/settings.component.ts
+++ b/src/app/features/project/settings/settings.component.ts
@@ -14,9 +14,10 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 
-import { ProjectDetailSettingAccordionComponent, RightControl } from '@osf/features/project/settings/components';
+import { ProjectDetailSettingAccordionComponent } from '@osf/features/project/settings/components';
 import { mockSettingsData } from '@osf/features/project/settings/mock-data';
 import { LinkTableModel } from '@osf/features/project/settings/models';
+import { RightControl } from '@osf/features/project/settings/models/right-control.model';
 import { ShareIndexingEnum } from '@osf/features/settings/account-settings/components/share-indexing/enums/share-indexing.enum';
 import { ViewOnlyTableComponent } from '@shared/components';
 import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component';
@@ -98,14 +99,10 @@ export class SettingsComponent {
   }
 
   submitForm(): void {
-    // TODO: implement form submission
+    // [VY] TODO: Implement form submission
   }
 
   resetForm(): void {
     this.projectForm.reset();
   }
-
-  onAccessChange(value: string): void {
-    console.log('Access changed to', value);
-  }
 }
diff --git a/src/app/shared/components/view-only-table/view-only-table.component.ts b/src/app/shared/components/view-only-table/view-only-table.component.ts
index 7d5591d16..a29c6075a 100644
--- a/src/app/shared/components/view-only-table/view-only-table.component.ts
+++ b/src/app/shared/components/view-only-table/view-only-table.component.ts
@@ -22,6 +22,7 @@ export class ViewOnlyTableComponent {
   tableData = input.required<LinkTableModel[]>();
 
   readonly #clipboard = inject(Clipboard);
+
   copy(link: string): void {
     this.#clipboard.copy(link);
   }

From 20e90f49afbb18c157b3221f8d9fbf19c0c11c29 Mon Sep 17 00:00:00 2001
From: volodyayakubovskyy <vyakubovskyy477@gmail.com>
Date: Tue, 20 May 2025 15:47:01 +0300
Subject: [PATCH 9/9] feat(project-settings): added fixes by suggestions

---
 .../project/settings/components/index.ts      |   8 +-
 ...ject-detail-setting-accordion.component.ts |   1 +
 ...ttings-access-requests-card.component.html |  16 ++
 ...ngs-access-requests-card.component.spec.ts |  22 +++
 ...settings-access-requests-card.component.ts |  19 ++
 .../settings-commenting-card.component.html   |  27 +++
 ...settings-commenting-card.component.spec.ts |  22 +++
 .../settings-commenting-card.component.ts     |  21 +++
 .../settings-project-form-card.component.html |  49 ++++++
 ...ttings-project-form-card.component.spec.ts |  22 +++
 .../settings-project-form-card.component.ts   |  27 +++
 ...tings-storage-location-card.component.html |  11 ++
 ...gs-storage-location-card.component.spec.ts |  22 +++
 ...ettings-storage-location-card.component.ts |  18 ++
 ...ttings-view-only-links-card.component.html |   7 +
 ...ngs-view-only-links-card.component.spec.ts |  22 +++
 ...settings-view-only-links-card.component.ts |  20 +++
 .../settings-wiki-card.component.html         |  28 +++
 .../settings-wiki-card.component.spec.ts      |  22 +++
 .../settings-wiki-card.component.ts           |  25 +++
 .../project/settings/settings.component.html  | 165 ++----------------
 .../project/settings/settings.component.scss  |   1 +
 .../project/settings/settings.component.ts    |  33 ++--
 .../view-only-table.component.ts              |   1 +
 24 files changed, 451 insertions(+), 158 deletions(-)
 create mode 100644 src/app/features/project/settings/components/settings-access-requests-card/settings-access-requests-card.component.html
 create mode 100644 src/app/features/project/settings/components/settings-access-requests-card/settings-access-requests-card.component.spec.ts
 create mode 100644 src/app/features/project/settings/components/settings-access-requests-card/settings-access-requests-card.component.ts
 create mode 100644 src/app/features/project/settings/components/settings-commenting-card/settings-commenting-card.component.html
 create mode 100644 src/app/features/project/settings/components/settings-commenting-card/settings-commenting-card.component.spec.ts
 create mode 100644 src/app/features/project/settings/components/settings-commenting-card/settings-commenting-card.component.ts
 create mode 100644 src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.html
 create mode 100644 src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.spec.ts
 create mode 100644 src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.ts
 create mode 100644 src/app/features/project/settings/components/settings-storage-location-card/settings-storage-location-card.component.html
 create mode 100644 src/app/features/project/settings/components/settings-storage-location-card/settings-storage-location-card.component.spec.ts
 create mode 100644 src/app/features/project/settings/components/settings-storage-location-card/settings-storage-location-card.component.ts
 create mode 100644 src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.html
 create mode 100644 src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.spec.ts
 create mode 100644 src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.ts
 create mode 100644 src/app/features/project/settings/components/settings-wiki-card/settings-wiki-card.component.html
 create mode 100644 src/app/features/project/settings/components/settings-wiki-card/settings-wiki-card.component.spec.ts
 create mode 100644 src/app/features/project/settings/components/settings-wiki-card/settings-wiki-card.component.ts

diff --git a/src/app/features/project/settings/components/index.ts b/src/app/features/project/settings/components/index.ts
index 005b28f37..709e58efa 100644
--- a/src/app/features/project/settings/components/index.ts
+++ b/src/app/features/project/settings/components/index.ts
@@ -1 +1,7 @@
-export * from '@osf/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component';
+export * from './project-detail-setting-accordion/project-detail-setting-accordion.component';
+export * from './settings-access-requests-card/settings-access-requests-card.component';
+export * from './settings-commenting-card/settings-commenting-card.component';
+export * from './settings-project-form-card/settings-project-form-card.component';
+export * from './settings-storage-location-card/settings-storage-location-card.component';
+export * from './settings-view-only-links-card/settings-view-only-links-card.component';
+export * from './settings-wiki-card/settings-wiki-card.component';
diff --git a/src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.ts b/src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.ts
index 78705a40c..d2d7a9ccd 100644
--- a/src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.ts
+++ b/src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.ts
@@ -12,6 +12,7 @@ import { RightControl } from '@osf/features/project/settings/models/right-contro
   imports: [NgClass, DropdownModule, FormsModule, Button, LowerCasePipe],
   templateUrl: './project-detail-setting-accordion.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class ProjectDetailSettingAccordionComponent {
   title = input.required<string>();
diff --git a/src/app/features/project/settings/components/settings-access-requests-card/settings-access-requests-card.component.html b/src/app/features/project/settings/components/settings-access-requests-card/settings-access-requests-card.component.html
new file mode 100644
index 000000000..7ac5e9139
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-access-requests-card/settings-access-requests-card.component.html
@@ -0,0 +1,16 @@
+<p-card>
+  <h3 class="text-xl pb-4">{{ 'myProjects.settings.accessRequests' | translate }}</h3>
+
+  <div class="flex align-items-center w-full">
+    <p-checkbox
+      ariaLabel="Checkbox for access request"
+      [binary]="true"
+      [formControl]="formControl()"
+      id="accessRequest"
+      name="ongoing"
+    ></p-checkbox>
+    <label class="input-label ml-2" for="accessRequest">
+      {{ 'myProjects.settings.accessRequestsText' | translate }}
+    </label>
+  </div>
+</p-card>
diff --git a/src/app/features/project/settings/components/settings-access-requests-card/settings-access-requests-card.component.spec.ts b/src/app/features/project/settings/components/settings-access-requests-card/settings-access-requests-card.component.spec.ts
new file mode 100644
index 000000000..af1f438ef
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-access-requests-card/settings-access-requests-card.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsAccessRequestsCardComponent } from './settings-access-requests-card.component';
+
+describe('SettingsAccessRequestsCardComponent', () => {
+  let component: SettingsAccessRequestsCardComponent;
+  let fixture: ComponentFixture<SettingsAccessRequestsCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SettingsAccessRequestsCardComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SettingsAccessRequestsCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/project/settings/components/settings-access-requests-card/settings-access-requests-card.component.ts b/src/app/features/project/settings/components/settings-access-requests-card/settings-access-requests-card.component.ts
new file mode 100644
index 000000000..92cbbd768
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-access-requests-card/settings-access-requests-card.component.ts
@@ -0,0 +1,19 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Card } from 'primeng/card';
+import { Checkbox } from 'primeng/checkbox';
+
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'osf-settings-access-requests-card',
+  imports: [Checkbox, TranslatePipe, Card],
+  templateUrl: './settings-access-requests-card.component.html',
+  styleUrl: '../../settings.component.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SettingsAccessRequestsCardComponent {
+  formControl = input.required<FormControl>();
+}
diff --git a/src/app/features/project/settings/components/settings-commenting-card/settings-commenting-card.component.html b/src/app/features/project/settings/components/settings-commenting-card/settings-commenting-card.component.html
new file mode 100644
index 000000000..9e82b5098
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-commenting-card/settings-commenting-card.component.html
@@ -0,0 +1,27 @@
+<p-card>
+  <h3 class="text-xl pb-4">{{ 'myProjects.settings.commenting' | translate }}</h3>
+
+  <div class="flex flex-column gap-3">
+    <div class="flex gap-3">
+      <p-radio-button
+        [ariaLabel]="'Select ' + 'myProjects.settings.contributorsCanPost' | translate"
+        name="contributorsCanPost"
+        value="0"
+        [(ngModel)]="commenting"
+      ></p-radio-button>
+      <p>{{ 'myProjects.settings.contributorsCanPost' | translate }}</p>
+    </div>
+
+    <div class="flex gap-3">
+      <p-radio-button
+        [ariaLabel]="'Select ' + 'myProjects.settings.osfUserCanPost' | translate"
+        name="osfUserCanPost"
+        value="1"
+        [(ngModel)]="commenting"
+      >
+      </p-radio-button>
+
+      <p>{{ 'myProjects.settings.osfUserCanPost' | translate }}</p>
+    </div>
+  </div>
+</p-card>
diff --git a/src/app/features/project/settings/components/settings-commenting-card/settings-commenting-card.component.spec.ts b/src/app/features/project/settings/components/settings-commenting-card/settings-commenting-card.component.spec.ts
new file mode 100644
index 000000000..639c49a14
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-commenting-card/settings-commenting-card.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsCommentingCardComponent } from './settings-commenting-card.component';
+
+describe('SettingsCommentingCardComponent', () => {
+  let component: SettingsCommentingCardComponent;
+  let fixture: ComponentFixture<SettingsCommentingCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SettingsCommentingCardComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SettingsCommentingCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/project/settings/components/settings-commenting-card/settings-commenting-card.component.ts b/src/app/features/project/settings/components/settings-commenting-card/settings-commenting-card.component.ts
new file mode 100644
index 000000000..de95d845e
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-commenting-card/settings-commenting-card.component.ts
@@ -0,0 +1,21 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Card } from 'primeng/card';
+import { RadioButton } from 'primeng/radiobutton';
+
+import { ChangeDetectionStrategy, Component, model } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { ShareIndexingEnum } from '@osf/features/settings/account-settings/components/share-indexing/enums/share-indexing.enum';
+
+@Component({
+  selector: 'osf-settings-commenting-card',
+  imports: [Card, RadioButton, TranslatePipe, FormsModule],
+  templateUrl: './settings-commenting-card.component.html',
+  styleUrl: '../../settings.component.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SettingsCommentingCardComponent {
+  commenting = model<ShareIndexingEnum>();
+}
diff --git a/src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.html b/src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.html
new file mode 100644
index 000000000..4d49d0aa9
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.html
@@ -0,0 +1,49 @@
+<p-card>
+  <h3 class="text-xl pb-4">{{ 'myProjects.settings.project' | translate }}</h3>
+
+  <form [formGroup]="formGroup()" (ngSubmit)="submitForm.emit()" class="flex flex-column gap-4">
+    <div class="flex flex-column">
+      <label class="input-label" for="project-title">
+        {{ 'myProjects.createProject.title' | translate }}
+      </label>
+      <input
+        pInputText
+        id="project-title"
+        type="text"
+        aria-required="true"
+        aria-describedby="project-title"
+        [formControlName]="ProjectFormControls.Title"
+      />
+    </div>
+
+    <div class="flex flex-column">
+      <label class="input-label" for="description">
+        {{ 'myProjects.createProject.description.label' | translate }}
+      </label>
+      <textarea pTextarea id="description" [formControlName]="ProjectFormControls.Description" [rows]="5"></textarea>
+    </div>
+
+    <div class="flex flex-0 gap-2 justify-content-between sm:justify-content-end">
+      <p-button
+        type="button"
+        [label]="'settings.accountSettings.common.buttons.cancel' | translate"
+        (onClick)="resetForm.emit()"
+        severity="info"
+        class="w-10rem btn-full-width"
+      ></p-button>
+      <p-button
+        type="submit"
+        class="w-10rem btn-full-width bg-primary-blue-second"
+        [label]="'myProjects.settings.saveChanges' | translate"
+      ></p-button>
+    </div>
+
+    <div class="flex justify-content-end w-full flex-0 border-top-1 pt-4 border-gray-300">
+      <p-button
+        severity="danger"
+        [label]="'myProjects.settings.deleteProject' | translate"
+        class="btn-full-width sm:w-10rem md:ml-auto"
+      ></p-button>
+    </div>
+  </form>
+</p-card>
diff --git a/src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.spec.ts b/src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.spec.ts
new file mode 100644
index 000000000..710657fe2
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsProjectFormCardComponent } from './settings-project-form-card.component';
+
+describe('SettingsProjectFormCardComponent', () => {
+  let component: SettingsProjectFormCardComponent;
+  let fixture: ComponentFixture<SettingsProjectFormCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SettingsProjectFormCardComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SettingsProjectFormCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.ts b/src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.ts
new file mode 100644
index 000000000..1ab0d8dcc
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.ts
@@ -0,0 +1,27 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { Card } from 'primeng/card';
+import { InputText } from 'primeng/inputtext';
+import { Textarea } from 'primeng/textarea';
+
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { ProjectFormControls } from '@shared/entities/create-project-form-controls.enum';
+
+@Component({
+  selector: 'osf-settings-project-form-card',
+  imports: [Button, Card, FormsModule, InputText, Textarea, TranslatePipe, ReactiveFormsModule],
+  templateUrl: './settings-project-form-card.component.html',
+  styleUrl: '../../settings.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+})
+export class SettingsProjectFormCardComponent {
+  formGroup = input.required<FormGroup>();
+  submitForm = output<void>();
+  resetForm = output<void>();
+
+  protected readonly ProjectFormControls = ProjectFormControls;
+}
diff --git a/src/app/features/project/settings/components/settings-storage-location-card/settings-storage-location-card.component.html b/src/app/features/project/settings/components/settings-storage-location-card/settings-storage-location-card.component.html
new file mode 100644
index 000000000..f9c2be259
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-storage-location-card/settings-storage-location-card.component.html
@@ -0,0 +1,11 @@
+<p-card>
+  <h3 class="text-xl pb-4">{{ 'myProjects.createProject.storageLocation' | translate }}</h3>
+
+  <div class="flex gap-2 pb-2">
+    <p>{{ 'myProjects.createProject.storageLocation' | translate }}:</p>
+
+    <p>{{ location() }}</p>
+  </div>
+
+  <p class="font-italic">{{ locationText() }}</p>
+</p-card>
diff --git a/src/app/features/project/settings/components/settings-storage-location-card/settings-storage-location-card.component.spec.ts b/src/app/features/project/settings/components/settings-storage-location-card/settings-storage-location-card.component.spec.ts
new file mode 100644
index 000000000..d48079cdc
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-storage-location-card/settings-storage-location-card.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsStorageLocationCardComponent } from './settings-storage-location-card.component';
+
+describe('SettingsStorageLocationCardComponent', () => {
+  let component: SettingsStorageLocationCardComponent;
+  let fixture: ComponentFixture<SettingsStorageLocationCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SettingsStorageLocationCardComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SettingsStorageLocationCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/project/settings/components/settings-storage-location-card/settings-storage-location-card.component.ts b/src/app/features/project/settings/components/settings-storage-location-card/settings-storage-location-card.component.ts
new file mode 100644
index 000000000..d47b3596d
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-storage-location-card/settings-storage-location-card.component.ts
@@ -0,0 +1,18 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Card } from 'primeng/card';
+
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  selector: 'osf-settings-storage-location-card',
+  imports: [Card, TranslatePipe],
+  templateUrl: './settings-storage-location-card.component.html',
+  styleUrl: '../../settings.component.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SettingsStorageLocationCardComponent {
+  location = input.required<string>();
+  locationText = input.required<string>();
+}
diff --git a/src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.html b/src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.html
new file mode 100644
index 000000000..8c572cfe3
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.html
@@ -0,0 +1,7 @@
+<p-card>
+  <h3 class="text-xl pb-2">{{ 'myProjects.settings.viewOnlyLinks' | translate }}</h3>
+
+  <p>{{ 'myProjects.settings.viewOnlySubtitle' | translate }}</p>
+
+  <osf-view-only-table [tableData]="tableData()"></osf-view-only-table>
+</p-card>
diff --git a/src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.spec.ts b/src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.spec.ts
new file mode 100644
index 000000000..362aed8e5
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsViewOnlyLinksCardComponent } from './settings-view-only-links-card.component';
+
+describe('SettingsViewOnlyLinksCardComponent', () => {
+  let component: SettingsViewOnlyLinksCardComponent;
+  let fixture: ComponentFixture<SettingsViewOnlyLinksCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SettingsViewOnlyLinksCardComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SettingsViewOnlyLinksCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.ts b/src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.ts
new file mode 100644
index 000000000..da8c914be
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.ts
@@ -0,0 +1,20 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Card } from 'primeng/card';
+
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+import { LinkTableModel } from '@osf/features/project/settings/models';
+import { ViewOnlyTableComponent } from '@shared/components';
+
+@Component({
+  selector: 'osf-settings-view-only-links-card',
+  imports: [Card, TranslatePipe, ViewOnlyTableComponent],
+  templateUrl: './settings-view-only-links-card.component.html',
+  styleUrl: '../../settings.component.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SettingsViewOnlyLinksCardComponent {
+  tableData = input.required<LinkTableModel[]>();
+}
diff --git a/src/app/features/project/settings/components/settings-wiki-card/settings-wiki-card.component.html b/src/app/features/project/settings/components/settings-wiki-card/settings-wiki-card.component.html
new file mode 100644
index 000000000..e9717272a
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-wiki-card/settings-wiki-card.component.html
@@ -0,0 +1,28 @@
+<p-card>
+  <h3 class="text-xl pb-4">{{ 'myProjects.settings.wiki' | translate }}</h3>
+
+  <div class="flex align-items-center w-full">
+    <p-checkbox
+      ariaLabel="Checkbox for wiki"
+      [binary]="true"
+      [formControl]="formControl()"
+      id="wiki"
+      name="ongoing"
+    ></p-checkbox>
+
+    <label class="input-label ml-2" for="wiki">
+      {{ 'myProjects.settings.wikiText' | translate }}
+    </label>
+  </div>
+
+  <h3 class="text-xl py-4">{{ 'myProjects.settings.wikiConfigureTitle' | translate }}</h3>
+
+  <p class="pb-4">{{ 'myProjects.settings.wikiConfigureText' | translate }}</p>
+
+  <osf-project-detail-setting-accordion [title]="'Project name example'" [rightControls]="rightControls()">
+    <div class="flex align-items-baseline gap-2">
+      <i class="pi pi-minus text-sm icon-space"></i>
+      <span>Sub text</span>
+    </div>
+  </osf-project-detail-setting-accordion>
+</p-card>
diff --git a/src/app/features/project/settings/components/settings-wiki-card/settings-wiki-card.component.spec.ts b/src/app/features/project/settings/components/settings-wiki-card/settings-wiki-card.component.spec.ts
new file mode 100644
index 000000000..f71d62166
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-wiki-card/settings-wiki-card.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsWikiCardComponent } from './settings-wiki-card.component';
+
+describe('SettingsWikiCardComponent', () => {
+  let component: SettingsWikiCardComponent;
+  let fixture: ComponentFixture<SettingsWikiCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SettingsWikiCardComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SettingsWikiCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/project/settings/components/settings-wiki-card/settings-wiki-card.component.ts b/src/app/features/project/settings/components/settings-wiki-card/settings-wiki-card.component.ts
new file mode 100644
index 000000000..f2db66444
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-wiki-card/settings-wiki-card.component.ts
@@ -0,0 +1,25 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Card } from 'primeng/card';
+import { Checkbox } from 'primeng/checkbox';
+
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+import { ProjectDetailSettingAccordionComponent } from '@osf/features/project/settings/components';
+import { RightControl } from '@osf/features/project/settings/models/right-control.model';
+
+@Component({
+  selector: 'osf-settings-wiki-card',
+  imports: [Card, Checkbox, TranslatePipe, ProjectDetailSettingAccordionComponent],
+  templateUrl: './settings-wiki-card.component.html',
+  styleUrl: '../../settings.component.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SettingsWikiCardComponent {
+  formControl = input.required<FormControl>();
+  rightControls = input.required<RightControl[]>();
+  accessOptions = input.required<{ label: string; value: string }[]>();
+  accessChange = output<string>();
+}
diff --git a/src/app/features/project/settings/settings.component.html b/src/app/features/project/settings/settings.component.html
index b5f1fbac1..b4da870a7 100644
--- a/src/app/features/project/settings/settings.component.html
+++ b/src/app/features/project/settings/settings.component.html
@@ -3,156 +3,29 @@
 
   <div class="flex-column flex flex-1 w-full">
     <p-tabpanels role="tablist" class="flex flex-column gap-4 flex-1 w-full bg-white" [class.mobile]="!isDesktop()">
-      <p-card>
-        <h3 class="text-xl pb-4">{{ 'myProjects.settings.project' | translate }}</h3>
-
-        <form [formGroup]="projectForm" (ngSubmit)="submitForm()" class="flex flex-column gap-4">
-          <!-- Title -->
-          <div class="flex flex-column">
-            <label class="input-label" for="project-title">
-              {{ 'myProjects.createProject.title' | translate }}
-            </label>
-            <input
-              pInputText
-              id="project-title"
-              type="text"
-              aria-required="true"
-              aria-describedby="project-title"
-              [formControlName]="ProjectFormControls.Title"
-            />
-          </div>
-
-          <!-- Description -->
-          <div class="flex flex-column">
-            <label class="input-label" for="description">
-              {{ 'myProjects.createProject.description.label' | translate }}
-            </label>
-            <textarea
-              pTextarea
-              id="description"
-              [formControlName]="ProjectFormControls.Description"
-              [rows]="5"
-            ></textarea>
-          </div>
-
-          <div class="flex flex-0 gap-2 justify-content-between sm:justify-content-end">
-            <p-button
-              type="button"
-              [label]="'settings.accountSettings.common.buttons.cancel' | translate"
-              (onClick)="resetForm()"
-              severity="info"
-              class="w-10rem btn-full-width"
-            ></p-button>
-            <p-button
-              type="submit"
-              class="w-10rem btn-full-width bg-primary-blue-second"
-              [label]="'myProjects.settings.saveChanges' | translate"
-            ></p-button>
-          </div>
-
-          <div class="flex justify-content-end w-full flex-0 border-top-1 pt-4 border-gray-300">
-            <p-button
-              severity="danger"
-              [label]="'myProjects.settings.deleteProject' | translate"
-              class="btn-full-width sm:w-10rem md:ml-auto"
-            ></p-button>
-          </div>
-        </form>
-      </p-card>
-
-      <p-card>
-        <h3 class="text-xl pb-4">{{ 'myProjects.createProject.storageLocation' | translate }}</h3>
-
-        <div class="flex gap-2 pb-2">
-          <p>{{ 'myProjects.createProject.storageLocation' | translate }}:</p>
-
-          <p>United States</p>
-        </div>
-
-        <p class="font-italic">Storage location cannot be changed after project is created.</p>
-      </p-card>
-
-      <p-card>
-        <h3 class="text-xl pb-2">{{ 'myProjects.settings.viewOnlyLinks' | translate }}</h3>
-
-        <p>{{ 'myProjects.settings.viewOnlySubtitle' | translate }}</p>
-
-        <osf-view-only-table [tableData]="tableData"></osf-view-only-table>
-      </p-card>
-
-      <p-card>
-        <h3 class="text-xl pb-4">{{ 'myProjects.settings.accessRequests' | translate }}</h3>
-
-        <div class="flex align-items-center w-full">
-          <p-checkbox
-            ariaLabel="Checkbox for access request"
-            [binary]="true"
-            [formControl]="accessRequest"
-            id="accessRequest"
-            name="ongoing"
-          ></p-checkbox>
-          <label class="input-label" for="accessRequest" class="ml-2">
-            {{ 'myProjects.settings.accessRequestsText' | translate }}
-          </label>
-        </div>
-      </p-card>
-
-      <p-card>
-        <h3 class="text-xl pb-4">{{ 'myProjects.settings.wiki' | translate }}</h3>
-
-        <div class="flex align-items-center w-full">
-          <p-checkbox
-            ariaLabel="Checkbox for wiki"
-            [binary]="true"
-            [formControl]="wiki"
-            id="wiki"
-            name="ongoing"
-          ></p-checkbox>
-
-          <label class="input-label" for="wiki" class="ml-2">
-            {{ 'myProjects.settings.wikiText' | translate }}
-          </label>
-        </div>
-
-        <h3 class="text-xl py-4">{{ 'myProjects.settings.wikiConfigureTitle' | translate }}</h3>
+      <osf-settings-project-form-card
+        [formGroup]="projectForm"
+        (submitForm)="submitForm()"
+        (resetForm)="resetForm()"
+      ></osf-settings-project-form-card>
 
-        <p class="pb-4">{{ 'myProjects.settings.wikiConfigureText' | translate }}</p>
+      <osf-settings-storage-location-card
+        [location]="'United States'"
+        [locationText]="'Storage location cannot be changed after project is created.'"
+      ></osf-settings-storage-location-card>
 
-        <osf-project-detail-setting-accordion [title]="'Project name example'" [rightControls]="rightControls['wiki']">
-          <div class="flex align-items-baseline gap-2">
-            <i class="pi pi-minus text-sm icon-space"></i>
-            <span>Sub text</span>
-          </div>
-        </osf-project-detail-setting-accordion>
-      </p-card>
+      <osf-settings-view-only-links-card [tableData]="tableData"></osf-settings-view-only-links-card>
 
-      <p-card>
-        <h3 class="text-xl pb-4">{{ 'myProjects.settings.commenting' | translate }}</h3>
-
-        <div class="flex flex-column gap-3">
-          <div class="flex gap-3">
-            <p-radio-button
-              [ariaLabel]="'Select ' + 'myProjects.settings.contributorsCanPost' | translate"
-              name="contributorsCanPost"
-              value="0"
-              [(ngModel)]="commenting"
-            ></p-radio-button>
-            <p>{{ 'myProjects.settings.contributorsCanPost' | translate }}</p>
-          </div>
+      <osf-settings-access-requests-card [formControl]="accessRequest"></osf-settings-access-requests-card>
 
-          <div class="flex gap-3">
-            <p-radio-button
-              [ariaLabel]="'Select ' + 'myProjects.settings.osfUserCanPost' | translate"
-              name="osfUserCanPost"
-              value="1"
-              [(ngModel)]="commenting"
-            >
-            </p-radio-button>
+      <osf-settings-wiki-card
+        [formControl]="wiki"
+        [rightControls]="rightControls['wiki']"
+        [accessOptions]="accessOptions"
+        (accessChange)="onAccessChange($event)"
+      ></osf-settings-wiki-card>
 
-            <p>{{ 'myProjects.settings.osfUserCanPost' | translate }}</p>
-          </div>
-        </div>
-      </p-card>
+      <osf-settings-commenting-card [(commenting)]="commenting"></osf-settings-commenting-card>
 
       <p-card>
         <h3 class="text-xl pb-4">{{ 'myProjects.settings.emailNotifications' | translate }}</h3>
@@ -181,7 +54,7 @@ <h3 class="text-xl pb-4">{{ 'myProjects.settings.redirectLink' | translate }}</h
             id="redirectLink"
             name="ongoing"
           ></p-checkbox>
-          <label for="redirectLink" class="ml-2">
+          <label for="redirectLink" class="input-label ml-2">
             {{ 'myProjects.settings.redirectLinkText' | translate }}
           </label>
         </div>
diff --git a/src/app/features/project/settings/settings.component.scss b/src/app/features/project/settings/settings.component.scss
index 5eba2ad1f..065495b94 100644
--- a/src/app/features/project/settings/settings.component.scss
+++ b/src/app/features/project/settings/settings.component.scss
@@ -16,6 +16,7 @@
 
 .input-label {
   color: var.$dark-blue-1;
+  margin-bottom: 0;
 }
 
 .delete-icon {
diff --git a/src/app/features/project/settings/settings.component.ts b/src/app/features/project/settings/settings.component.ts
index 672f041dd..2b89a9eb3 100644
--- a/src/app/features/project/settings/settings.component.ts
+++ b/src/app/features/project/settings/settings.component.ts
@@ -3,10 +3,7 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { Button } from 'primeng/button';
 import { Card } from 'primeng/card';
 import { Checkbox } from 'primeng/checkbox';
-import { InputText } from 'primeng/inputtext';
-import { RadioButton } from 'primeng/radiobutton';
 import { TabPanels } from 'primeng/tabs';
-import { Textarea } from 'primeng/textarea';
 
 import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
@@ -14,12 +11,19 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 
-import { ProjectDetailSettingAccordionComponent } from '@osf/features/project/settings/components';
+import {
+  ProjectDetailSettingAccordionComponent,
+  SettingsAccessRequestsCardComponent,
+  SettingsCommentingCardComponent,
+  SettingsProjectFormCardComponent,
+  SettingsStorageLocationCardComponent,
+  SettingsViewOnlyLinksCardComponent,
+  SettingsWikiCardComponent,
+} from '@osf/features/project/settings/components';
 import { mockSettingsData } from '@osf/features/project/settings/mock-data';
 import { LinkTableModel } from '@osf/features/project/settings/models';
 import { RightControl } from '@osf/features/project/settings/models/right-control.model';
 import { ShareIndexingEnum } from '@osf/features/settings/account-settings/components/share-indexing/enums/share-indexing.enum';
-import { ViewOnlyTableComponent } from '@shared/components';
 import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component';
 import { ProjectForm } from '@shared/entities/create-project-form.interface';
 import { ProjectFormControls } from '@shared/entities/create-project-form-controls.enum';
@@ -32,21 +36,24 @@ import { IS_WEB } from '@shared/utils/breakpoints.tokens';
     SubHeaderComponent,
     TabPanels,
     FormsModule,
-    InputText,
     ReactiveFormsModule,
-    Textarea,
     Card,
     Button,
-    ViewOnlyTableComponent,
     Checkbox,
     ProjectDetailSettingAccordionComponent,
-    RadioButton,
     RouterLink,
     NgOptimizedImage,
+    SettingsProjectFormCardComponent,
+    SettingsStorageLocationCardComponent,
+    SettingsViewOnlyLinksCardComponent,
+    SettingsAccessRequestsCardComponent,
+    SettingsWikiCardComponent,
+    SettingsCommentingCardComponent,
   ],
   templateUrl: './settings.component.html',
   styleUrl: './settings.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class SettingsComponent {
   protected readonly isDesktop = toSignal(inject(IS_WEB));
@@ -63,8 +70,8 @@ export class SettingsComponent {
       nonNullable: true,
     }),
   });
-  accessRequest = new FormControl<boolean>(false);
-  wiki = new FormControl<boolean>(false);
+  accessRequest = new FormControl(false);
+  wiki = new FormControl(false);
   redirectLink = new FormControl<boolean>(false);
 
   tableData: LinkTableModel[];
@@ -105,4 +112,8 @@ export class SettingsComponent {
   resetForm(): void {
     this.projectForm.reset();
   }
+
+  onAccessChange(event: string): void {
+    console.log(event);
+  }
 }
diff --git a/src/app/shared/components/view-only-table/view-only-table.component.ts b/src/app/shared/components/view-only-table/view-only-table.component.ts
index a29c6075a..9aaa8ad6c 100644
--- a/src/app/shared/components/view-only-table/view-only-table.component.ts
+++ b/src/app/shared/components/view-only-table/view-only-table.component.ts
@@ -17,6 +17,7 @@ import { LinkTableModel } from '@osf/features/project/settings/models';
   templateUrl: './view-only-table.component.html',
   styleUrl: './view-only-table.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class ViewOnlyTableComponent {
   tableData = input.required<LinkTableModel[]>();