diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 8c22ccf78..93a3d729b 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -141,6 +141,11 @@ export const routes: Routes = [
             loadComponent: () =>
               import('@osf/features/project/analytics/analytics.component').then((mod) => mod.AnalyticsComponent),
           },
+          {
+            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 e69c6e7d5..0263a12b5 100644
--- a/src/app/core/constants/nav-items.constant.ts
+++ b/src/app/core/constants/nav-items.constant.ts
@@ -102,6 +102,10 @@ export const PROJECT_MENU_ITEMS: MenuItem[] = [
       },
       { label: 'navigation.project.contributors', routerLink: 'contributors' },
       { label: 'navigation.project.analytics', routerLink: 'analytics' },
+      {
+        label: 'navigation.project.settings',
+        routerLink: 'settings',
+      },
     ],
   },
 ];
diff --git a/src/app/features/meetings/pages/meeting-details/meeting-details.component.html b/src/app/features/meetings/pages/meeting-details/meeting-details.component.html
index cfa0e861f..234762b69 100644
--- a/src/app/features/meetings/pages/meeting-details/meeting-details.component.html
+++ b/src/app/features/meetings/pages/meeting-details/meeting-details.component.html
@@ -1,70 +1,74 @@
-<osf-sub-header [title]="meeting().title"
-                [description]="pageDescription()"/>
+<osf-sub-header [title]="meeting().title" [description]="pageDescription()" />
 
 <section class="flex-1 flex flex-column bg-white p-4">
-    <osf-search-input class="w-full mt-4"
-                      [searchValue]="searchValue()"
-                      (searchValueChange)="searchValue.set($event || '')"
-                      [placeholder]="'meetings.details.searchPlaceholder' | translate"/>
+  <osf-search-input
+    class="w-full mt-4"
+    [searchValue]="searchValue()"
+    (searchValueChange)="searchValue.set($event || '')"
+    [placeholder]="'meetings.details.searchPlaceholder' | translate"
+  />
 
-    <p-table [value]="meetingSubmissions()"
-             [rows]="tableParams().rows"
-             [first]="tableParams().firstRowIndex"
-             [rowsPerPageOptions]="tableParams().rowsPerPageOptions"
-             [paginator]="true"
-             [totalRecords]="tableParams().totalRecords"
-             paginatorDropdownAppendTo="body"
-             [resizableColumns]="true"
-             [autoLayout]="true"
-             [scrollable]="true"
-             [sortMode]="'single'"
-             [lazy]="true"
-             [lazyLoadOnInit]="true"
-             (onPage)="onPageChange($event)"
-             (onSort)="onSort($event)"
-             [sortField]="sortColumn()"
-             [customSort]="true">
-        <ng-template #header>
-            <tr>
-                <th pSortableColumn="title">
-                    {{ 'meetings.details.table.columns.title' | translate }}
-                    <p-sortIcon field="title"/>
-                </th>
-                <th pSortableColumn="authorName">
-                    {{ 'meetings.details.table.columns.author' | translate }}
-                    <p-sortIcon field="authorName"/>
-                </th>
-                <th pSortableColumn="meetingCategory">
-                    {{ 'meetings.details.table.columns.category' | translate }}
-                    <p-sortIcon field="meetingCategory"/>
-                </th>
-                <th pSortableColumn="dateCreated">
-                    {{ 'meetings.details.table.columns.dateCreated' | translate }}
-                    <p-sortIcon field="dateCreated"/>
-                </th>
-                <th pSortableColumn="downloadCount">
-                    {{ 'meetings.details.table.columns.downloads' | translate }}
-                    <p-sortIcon field="downloadCount"/>
-                </th>
-            </tr>
-        </ng-template>
-        <ng-template #body let-item>
-            <tr class="cursor-pointer"
-                [routerLink]="['/my-projects', item.id, 'overview']">
-                <td>{{ item.title }}</td>
-                <td>{{ item.authorName }}</td>
-                <td>{{ item.meetingCategory }}</td>
-                <td>{{ item.dateCreated | date: 'MMM d, y, h:mm a' }}</td>
-                <td>
-                    <p-button [label]="'meetings.details.downloadButton' | translate"
-                              icon="pi pi-download"
-                              class="mr-1"
-                              severity="secondary"
-                              [raised]="true"
-                              (click)="downloadSubmission($event, item)"/>
-                    {{ item.downloadCount }}
-                </td>
-            </tr>
-        </ng-template>
-    </p-table>
+  <p-table
+    [value]="meetingSubmissions()"
+    [rows]="tableParams().rows"
+    [first]="tableParams().firstRowIndex"
+    [rowsPerPageOptions]="tableParams().rowsPerPageOptions"
+    [paginator]="true"
+    [totalRecords]="tableParams().totalRecords"
+    paginatorDropdownAppendTo="body"
+    [resizableColumns]="true"
+    [autoLayout]="true"
+    [scrollable]="true"
+    [sortMode]="'single'"
+    [lazy]="true"
+    [lazyLoadOnInit]="true"
+    (onPage)="onPageChange($event)"
+    (onSort)="onSort($event)"
+    [sortField]="sortColumn()"
+    [customSort]="true"
+  >
+    <ng-template #header>
+      <tr>
+        <th pSortableColumn="title">
+          {{ 'meetings.details.table.columns.title' | translate }}
+          <p-sortIcon field="title" />
+        </th>
+        <th pSortableColumn="authorName">
+          {{ 'meetings.details.table.columns.author' | translate }}
+          <p-sortIcon field="authorName" />
+        </th>
+        <th pSortableColumn="meetingCategory">
+          {{ 'meetings.details.table.columns.category' | translate }}
+          <p-sortIcon field="meetingCategory" />
+        </th>
+        <th pSortableColumn="dateCreated">
+          {{ 'meetings.details.table.columns.dateCreated' | translate }}
+          <p-sortIcon field="dateCreated" />
+        </th>
+        <th pSortableColumn="downloadCount">
+          {{ 'meetings.details.table.columns.downloads' | translate }}
+          <p-sortIcon field="downloadCount" />
+        </th>
+      </tr>
+    </ng-template>
+    <ng-template #body let-item>
+      <tr class="cursor-pointer" [routerLink]="['/my-projects', item.id, 'overview']">
+        <td>{{ item.title }}</td>
+        <td>{{ item.authorName }}</td>
+        <td>{{ item.meetingCategory }}</td>
+        <td>{{ item.dateCreated | date: 'MMM d, y, h:mm a' }}</td>
+        <td>
+          <p-button
+            [label]="'meetings.details.downloadButton' | translate"
+            icon="pi pi-download"
+            class="mr-1"
+            severity="secondary"
+            [raised]="true"
+            (click)="downloadSubmission($event, item)"
+          />
+          {{ item.downloadCount }}
+        </td>
+      </tr>
+    </ng-template>
+  </p-table>
 </section>
diff --git a/src/app/features/meetings/pages/meetings-landing/meetings-landing.component.html b/src/app/features/meetings/pages/meetings-landing/meetings-landing.component.html
index bbd1b04da..ea3d603df 100644
--- a/src/app/features/meetings/pages/meetings-landing/meetings-landing.component.html
+++ b/src/app/features/meetings/pages/meetings-landing/meetings-landing.component.html
@@ -1,52 +1,57 @@
-<osf-sub-header [title]="'meetings.landing.title' | translate"
-                [icon]="'meetings'"
-                [description]="'meetings.landing.description' | translate"/>
+<osf-sub-header
+  [title]="'meetings.landing.title' | translate"
+  [icon]="'meetings'"
+  [description]="'meetings.landing.description' | translate"
+/>
 
-<section class="flex-1 flex flex-column bg-white p-4"
-         [class.mobile]="isXSmall()">
+<section class="flex-1 flex flex-column bg-white p-4" [class.mobile]="isXSmall()">
   <section class="mt-2">
     <p>{{ 'meetings.landing.submissionsNote' | translate }}</p>
   </section>
 
-  <osf-search-input class="w-full mt-4"
-                    [searchValue]="searchValue()"
-                    (searchValueChange)="searchValue.set($event || '')"
-                    [placeholder]="'meetings.landing.searchPlaceholder' | translate"/>
+  <osf-search-input
+    class="w-full mt-4"
+    [searchValue]="searchValue()"
+    (searchValueChange)="searchValue.set($event || '')"
+    [placeholder]="'meetings.landing.searchPlaceholder' | translate"
+  />
 
-  <p-table [value]="meetings()"
-           [rows]="tableParams().rows"
-           [first]="tableParams().firstRowIndex"
-           [rowsPerPageOptions]="tableParams().rowsPerPageOptions"
-           [paginator]="true"
-           [totalRecords]="tableParams().totalRecords"
-           paginatorDropdownAppendTo="body"
-           [resizableColumns]="true"
-           [autoLayout]="true"
-           [scrollable]="true"
-           [sortMode]="'single'"
-           [lazy]="true"
-           [lazyLoadOnInit]="true"
-           (onPage)="onPageChange($event)"
-           (onSort)="onSort($event)"
-           [sortField]="sortColumn()"
-           [customSort]="true">
+  <p-table
+    [value]="meetings()"
+    [rows]="tableParams().rows"
+    [first]="tableParams().firstRowIndex"
+    [rowsPerPageOptions]="tableParams().rowsPerPageOptions"
+    [paginator]="true"
+    [totalRecords]="tableParams().totalRecords"
+    paginatorDropdownAppendTo="body"
+    [resizableColumns]="true"
+    [autoLayout]="true"
+    [scrollable]="true"
+    [sortMode]="'single'"
+    [lazy]="true"
+    [lazyLoadOnInit]="true"
+    (onPage)="onPageChange($event)"
+    (onSort)="onSort($event)"
+    [sortField]="sortColumn()"
+    [customSort]="true"
+  >
     <ng-template #header>
       <tr>
         <th pSortableColumn="title">
           {{ 'meetings.landing.table.columns.title' | translate }}
-          <p-sortIcon field="title"/>
+          <p-sortIcon field="title" />
         </th>
         <th pSortableColumn="submissionsCount">
           {{ 'meetings.landing.table.columns.submissions' | translate }}
-          <p-sortIcon field="submissionsCount"/>
+          <p-sortIcon field="submissionsCount" />
         </th>
         <th pSortableColumn="location">
           {{ 'meetings.landing.table.columns.location' | translate }}
-          <p-sortIcon field="location"/>
+          <p-sortIcon field="location" />
         </th>
         <th pSortableColumn="startDate">
           {{ 'meetings.landing.table.columns.date' | translate }}
-          <p-sortIcon field="startDate"/>
+          <p-sortIcon field="startDate" />
         </th>
       </tr>
     </ng-template>
@@ -63,9 +68,7 @@
   <section class="flex lg:flex-row flex-column gap-3 w-full mt-6">
     <p-card class="lg:w-4 w-12">
       <div class="flex flex-column align-items-center justify-content-center gap-4 lg:h-18rem">
-        <img src="../../../../../assets/icons/colored/discover.svg"
-             alt="Discover"
-             class="w-8rem h-8rem"/>
+        <img src="../../../../../assets/icons/colored/discover.svg" alt="Discover" class="w-8rem h-8rem" />
         <h2>{{ 'meetings.landing.features.discover.title' | translate }}</h2>
         <p class="text-center">{{ 'meetings.landing.features.discover.description' | translate }}</p>
       </div>
@@ -73,9 +76,7 @@ <h2>{{ 'meetings.landing.features.discover.title' | translate }}</h2>
 
     <p-card class="lg:w-4 w-12 h-18rem">
       <div class="flex flex-column align-items-center justify-content-center gap-4 lg:h-18rem">
-        <img src="../../../../../assets/icons/colored/share.svg"
-             alt="Share"
-             class="w-8rem h-8rem"/>
+        <img src="../../../../../assets/icons/colored/share.svg" alt="Share" class="w-8rem h-8rem" />
         <h2>{{ 'meetings.landing.features.share.title' | translate }}</h2>
         <p class="text-center">{{ 'meetings.landing.features.share.description' | translate }}</p>
       </div>
@@ -83,9 +84,7 @@ <h2>{{ 'meetings.landing.features.share.title' | translate }}</h2>
 
     <p-card class="lg:w-4 w-12">
       <div class="flex flex-column align-items-center justify-content-center gap-4 lg:h-18rem">
-        <img src="../../../../../assets/icons/colored/enhance.svg"
-             alt="Enhance"
-             class="w-8rem h-8rem"/>
+        <img src="../../../../../assets/icons/colored/enhance.svg" alt="Enhance" class="w-8rem h-8rem" />
         <h2>{{ 'meetings.landing.features.enhance.title' | translate }}</h2>
         <p class="text-center">{{ 'meetings.landing.features.enhance.description' | translate }}</p>
       </div>
@@ -96,18 +95,10 @@ <h2>{{ 'meetings.landing.features.enhance.title' | translate }}</h2>
     <h2 class="text-2xl text-center">{{ 'meetings.landing.users.title' | translate }}</h2>
 
     <section class="flex flex-row justify-content-center align-items-start gap-7 flex-wrap">
-      <img src="assets/icons/colored/aps.svg"
-           alt="APS"
-           height="90"/>
-      <img src="assets/icons/colored/bitss.svg"
-           alt="BITSS"
-           height="90"/>
-      <img src="assets/icons/colored/nrao.svg"
-           alt="NRAO"
-           height="90"/>
-      <img src="assets/icons/colored/spsp.svg"
-           alt="SPSP"
-           height="90"/>
+      <img src="assets/icons/colored/aps.svg" alt="APS" height="90" />
+      <img src="assets/icons/colored/bitss.svg" alt="BITSS" height="90" />
+      <img src="assets/icons/colored/nrao.svg" alt="NRAO" height="90" />
+      <img src="assets/icons/colored/spsp.svg" alt="SPSP" height="90" />
     </section>
   </section>
 </section>
diff --git a/src/app/features/project/contributors/components/add-contributor-dialog/add-contributor-dialog.component.spec.ts b/src/app/features/project/contributors/components/add-contributor-dialog/add-contributor-dialog.component.spec.ts
index 888146c98..3857c8678 100644
--- a/src/app/features/project/contributors/components/add-contributor-dialog/add-contributor-dialog.component.spec.ts
+++ b/src/app/features/project/contributors/components/add-contributor-dialog/add-contributor-dialog.component.spec.ts
@@ -8,9 +8,8 @@ describe('AddContributorDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AddContributorDialogComponent]
-    })
-    .compileComponents();
+      imports: [AddContributorDialogComponent],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(AddContributorDialogComponent);
     component = fixture.componentInstance;
diff --git a/src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.html b/src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.html
index 1430fd514..fcfa1ac96 100644
--- a/src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.html
+++ b/src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.html
@@ -12,30 +12,39 @@
     />
   </div>
 
-  <hr class="break-line"/>
+  <hr class="break-line" />
 
   <div class="flex column-gap-2">
     <p-checkbox variant="filled" binary="true" [(ngModel)]="anonymous"></p-checkbox>
-    <p>Anonymize contributor list for this link (e.g., for blind peer review).
-      <span class="font-italic">Ensure the wiki pages, files, registration forms and add-ons do not contain identifying information.</span>
+    <p>
+      Anonymize contributor list for this link (e.g., for blind peer review).
+      <span class="font-italic"
+        >Ensure the wiki pages, files, registration forms and add-ons do not contain identifying information.</span
+      >
     </p>
   </div>
 
-  <hr class="break-line"/>
+  <hr class="break-line" />
 
-  <p>Which components would you like to associate with this link?
-    <span class="font-italic">Anyone with the private link can view—but not edit—the components associated with the link.</span>
+  <p>
+    Which components would you like to associate with this link?
+    <span class="font-italic"
+      >Anyone with the private link can view—but not edit—the components associated with the link.</span
+    >
   </p>
 
   <div class="flex flex-column gap-2">
     <div class="flex gap-1">
-      <p-checkbox variant="filled" binary="true" [(ngModel)]="componentExample1"></p-checkbox><p>Component Name Example</p>
+      <p-checkbox variant="filled" binary="true" [(ngModel)]="componentExample1"></p-checkbox>
+      <p>Component Name Example</p>
     </div>
     <div class="flex gap-1">
-      <p-checkbox variant="filled" binary="true" [(ngModel)]="componentExample2"></p-checkbox><p>Component Name Example</p>
+      <p-checkbox variant="filled" binary="true" [(ngModel)]="componentExample2"></p-checkbox>
+      <p>Component Name Example</p>
     </div>
     <div class="flex gap-1">
-      <p-checkbox variant="filled" binary="true" [(ngModel)]="componentExample3"></p-checkbox><p>Component Name Example</p>
+      <p-checkbox variant="filled" binary="true" [(ngModel)]="componentExample3"></p-checkbox>
+      <p>Component Name Example</p>
     </div>
   </div>
 
diff --git a/src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.spec.ts b/src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.spec.ts
index e5954f5bc..c5b3defdf 100644
--- a/src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.spec.ts
+++ b/src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.spec.ts
@@ -8,9 +8,8 @@ describe('CreateViewLinkDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [CreateViewLinkDialogComponent]
-    })
-    .compileComponents();
+      imports: [CreateViewLinkDialogComponent],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(CreateViewLinkDialogComponent);
     component = fixture.componentInstance;
diff --git a/src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.ts b/src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.ts
index f44a988d6..0ca384c5e 100644
--- a/src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.ts
+++ b/src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.ts
@@ -1,26 +1,21 @@
-import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core';
-import {Button} from "primeng/button";
-import {SearchInputComponent} from "@osf/shared";
-import {TranslatePipe} from "@ngx-translate/core";
-import {DynamicDialogRef} from 'primeng/dynamicdialog';
-import {InputText} from 'primeng/inputtext';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {Checkbox} from 'primeng/checkbox';
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { Checkbox } from 'primeng/checkbox';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+import { InputText } from 'primeng/inputtext';
+
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { SearchInputComponent } from '@osf/shared';
 
 @Component({
   selector: 'osf-create-view-link-dialog',
-  imports: [
-    Button,
-    SearchInputComponent,
-    TranslatePipe,
-    InputText,
-    ReactiveFormsModule,
-    FormsModule,
-    Checkbox
-  ],
+  imports: [Button, SearchInputComponent, TranslatePipe, InputText, ReactiveFormsModule, FormsModule, Checkbox],
   templateUrl: './create-view-link-dialog.component.html',
   styleUrl: './create-view-link-dialog.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CreateViewLinkDialogComponent {
   dialogRef = inject(DynamicDialogRef);
diff --git a/src/app/features/project/contributors/contributors.component.html b/src/app/features/project/contributors/contributors.component.html
index d00fc1371..070f7354e 100644
--- a/src/app/features/project/contributors/contributors.component.html
+++ b/src/app/features/project/contributors/contributors.component.html
@@ -47,7 +47,6 @@ <h1 class="title">Contributors</h1>
         </p-select>
       </div>
     </div>
-
   </div>
 
   <p-table
@@ -68,10 +67,10 @@ <h1 class="title">Contributors</h1>
   >
     <ng-template #header>
       <tr>
-        <th>{{'project.contributors.table.headers.name' | translate }}</th>
+        <th>{{ 'project.contributors.table.headers.name' | translate }}</th>
         <th>
           <div class="flex align-items-center">
-            <span>{{'project.contributors.table.headers.permissions' | translate }}</span>
+            <span>{{ 'project.contributors.table.headers.permissions' | translate }}</span>
             <i class="osf-icon-information blue-icon ml-1" [pTooltip]="permissionsTooltip" tooltipPosition="right"></i>
             <ng-template #permissionsTooltip>
               <div class="flex flex-column row-gap-3">
@@ -80,7 +79,7 @@ <h2>Permission Information</h2>
                 <div class="inside-list">
                   <p class="font-bold">Read</p>
                   <ul class="font-normal ml-4">
-                      <li>View project content and comment</li>
+                    <li>View project content and comment</li>
                   </ul>
                 </div>
 
@@ -102,27 +101,29 @@ <h2>Permission Information</h2>
                     <li>Public private settings</li>
                   </ul>
                 </div>
-
               </div>
             </ng-template>
           </div>
         </th>
         <th>
           <div class="flex align-items-center justify-content-center">
-            <span>{{'project.contributors.table.headers.contributor' | translate }}</span>
+            <span>{{ 'project.contributors.table.headers.contributor' | translate }}</span>
             <i class="osf-icon-information blue-icon ml-1" [pTooltip]="contributorTooltip" tooltipPosition="right"></i>
             <ng-template #contributorTooltip>
               <div class="flex flex-column row-gap-3">
                 <h2>Bibliographic Contributor Information</h2>
 
-                <span>Only bibliographic contributors will be displayed in the Contributors list and in project citations. Non-bibliographic contributors can read and modify the project as normal.</span>
+                <span
+                  >Only bibliographic contributors will be displayed in the Contributors list and in project citations.
+                  Non-bibliographic contributors can read and modify the project as normal.</span
+                >
               </div>
             </ng-template>
           </div>
         </th>
         <th>
           <div class="flex align-items-center justify-content-center">
-            <span>{{'project.contributors.table.headers.curator' | translate }}</span>
+            <span>{{ 'project.contributors.table.headers.curator' | translate }}</span>
             <i class="osf-icon-information blue-icon ml-1" [pTooltip]="curatorTooltip" tooltipPosition="right"></i>
             <ng-template #curatorTooltip>
               <div class="flex flex-column row-gap-3">
@@ -133,8 +134,8 @@ <h2>Curator Information</h2>
             </ng-template>
           </div>
         </th>
-        <th>{{'project.contributors.table.headers.employment' | translate }}</th>
-        <th>{{'project.contributors.table.headers.education' | translate }}</th>
+        <th>{{ 'project.contributors.table.headers.employment' | translate }}</th>
+        <th>{{ 'project.contributors.table.headers.education' | translate }}</th>
         <th></th>
       </tr>
     </ng-template>
@@ -146,7 +147,7 @@ <h2>Curator Information</h2>
           </p>
         </td>
         <td class="select-font-normal" style="width: 2.5rem">
-          <div class=" no-border-dropdown">
+          <div class="no-border-dropdown">
             <p-select
               [placeholder]="'project.contributors.permissionFilter' | translate"
               [options]="permissionsOptions"
@@ -156,10 +157,10 @@ <h2>Curator Information</h2>
               (ngModelChange)="onItemPermissionChange($event)"
             >
               <ng-template #selectedItem let-selectedOption>
-                  <p>{{ selectedOption.label | translate }}</p>
+                <p>{{ selectedOption.label | translate }}</p>
               </ng-template>
               <ng-template #item let-item>
-                  <p>{{ item.label | translate }}</p>
+                <p>{{ item.label | translate }}</p>
               </ng-template>
             </p-select>
           </div>
@@ -171,26 +172,23 @@ <h2>Curator Information</h2>
         </td>
         <td>
           <div class="flex align-items-center justify-content-center">
-            <p-checkbox variant="filled" binary="true"  [(ngModel)]="item.curator"></p-checkbox>
+            <p-checkbox variant="filled" binary="true" [(ngModel)]="item.curator"></p-checkbox>
           </div>
         </td>
         <td>
-          @if(item.employmentHistory){
+          @if (item.employmentHistory) {
             <a [href]="item.employmentHistory">Show employment history</a>
-          }
-          @else {
+          } @else {
             <span>No employment history</span>
           }
         </td>
         <td>
           <div class="flex column-gap-2">
-            @if(item.educationHistory){
+            @if (item.educationHistory) {
               <a [href]="item.educationHistory">Show education history</a>
-            }
-            @else {
+            } @else {
               <span>No education history</span>
             }
-
           </div>
         </td>
         <td><i class="osf-icon-trash red-icon"></i></td>
@@ -199,12 +197,13 @@ <h2>Curator Information</h2>
   </p-table>
 
   <div class="flex flex-column row-gap-4 mt-6">
-      <h2>{{'project.contributors.viewOnly' | translate}}</h2>
-      <p>{{'project.contributors.createLink' | translate}}</p>
-      <p-button class="w-10rem" [label]="'project.contributors.createButton' | translate" (click)="createViewLink()"></p-button>
-      <osf-view-only-table [tableData]="tableData"></osf-view-only-table>
+    <h2>{{ 'project.contributors.viewOnly' | translate }}</h2>
+    <p>{{ 'project.contributors.createLink' | translate }}</p>
+    <p-button
+      class="w-10rem"
+      [label]="'project.contributors.createButton' | translate"
+      (click)="createViewLink()"
+    ></p-button>
+    <osf-view-only-table [tableData]="tableData"></osf-view-only-table>
   </div>
-
-
-
 </section>
diff --git a/src/app/features/project/contributors/contributors.component.scss b/src/app/features/project/contributors/contributors.component.scss
index 2d5979f7f..4bb38421d 100644
--- a/src/app/features/project/contributors/contributors.component.scss
+++ b/src/app/features/project/contributors/contributors.component.scss
@@ -22,7 +22,6 @@
       display: flex;
       gap: 0.8rem;
 
-
       .search {
         width: 60%;
       }
@@ -31,7 +30,6 @@
         gap: 0.8rem;
         width: 40%;
       }
-
     }
 
     .red-icon {
diff --git a/src/app/features/project/contributors/contributors.component.spec.ts b/src/app/features/project/contributors/contributors.component.spec.ts
index 3852329cb..fb45f2cde 100644
--- a/src/app/features/project/contributors/contributors.component.spec.ts
+++ b/src/app/features/project/contributors/contributors.component.spec.ts
@@ -8,9 +8,8 @@ describe('ContributorsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ContributorsComponent]
-    })
-    .compileComponents();
+      imports: [ContributorsComponent],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(ContributorsComponent);
     component = fixture.componentInstance;
diff --git a/src/app/features/project/contributors/contributors.component.ts b/src/app/features/project/contributors/contributors.component.ts
index 3d1d1700e..880872ad8 100644
--- a/src/app/features/project/contributors/contributors.component.ts
+++ b/src/app/features/project/contributors/contributors.component.ts
@@ -14,15 +14,13 @@ import { FormsModule } from '@angular/forms';
 
 import { MY_PROJECTS_TABLE_PARAMS } from '@core/constants/my-projects-table.constants';
 import { AddContributorDialogComponent } from '@osf/features/project/contributors/components/add-contributor-dialog/add-contributor-dialog.component';
+import { CreateViewLinkDialogComponent } from '@osf/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component';
 import { LinkTableModel } from '@osf/features/project/settings';
 import { ViewOnlyTableComponent } from '@osf/shared';
 import { SearchInputComponent } from '@shared/components/search-input/search-input.component';
 import { SelectOption } from '@shared/entities/select-option.interface';
 import { TableParameters } from '@shared/entities/table-parameters.interface';
 import { IS_WEB, IS_XSMALL } from '@shared/utils/breakpoints.tokens';
-import {
-  CreateViewLinkDialogComponent
-} from "@osf/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component";
 
 @Component({
   selector: 'osf-contributors',
@@ -158,7 +156,9 @@ export class ContributorsComponent {
     this.pageChange.emit(event);
   }
 
-  protected onItemPermissionChange(event: TablePageEvent): void {}
+  protected onItemPermissionChange(event: TablePageEvent): void {
+    console.log(event);
+  }
 
   addContributor() {
     this.dialogRef = this.#dialogService.open(AddContributorDialogComponent, {
diff --git a/src/app/features/project/settings/components/index.ts b/src/app/features/project/settings/components/index.ts
index 74042b224..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 './accordion-table/accordion-table.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.html b/src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.html
new file mode 100644
index 000000000..fe6294db5
--- /dev/null
+++ b/src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.html
@@ -0,0 +1,56 @@
+<div
+  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
+      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>
+
+    <span class="font-medium text-color">{{ title() }}</span>
+  </div>
+
+  @if (rightControls().length > 0) {
+    <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) {
+            <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"
+    [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/project-detail-setting-accordion/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
new file mode 100644
index 000000000..320e8c125
--- /dev/null
+++ b/src/app/features/project/settings/components/project-detail-setting-accordion/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/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
new file mode 100644
index 000000000..78705a40c
--- /dev/null
+++ b/src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.ts
@@ -0,0 +1,26 @@
+import { Button } from 'primeng/button';
+import { DropdownModule } from 'primeng/dropdown';
+
+import { LowerCasePipe, NgClass } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { RightControl } from '@osf/features/project/settings/models/right-control.model';
+
+@Component({
+  selector: 'osf-project-detail-setting-accordion',
+  imports: [NgClass, DropdownModule, FormsModule, Button, LowerCasePipe],
+  templateUrl: './project-detail-setting-accordion.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProjectDetailSettingAccordionComponent {
+  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/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..efc4d9a51
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-access-requests-card/settings-access-requests-card.component.ts
@@ -0,0 +1,18 @@
+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',
+  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..f219023a2
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-commenting-card/settings-commenting-card.component.ts
@@ -0,0 +1,20 @@
+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',
+  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..48e3285a5
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-project-form-card/settings-project-form-card.component.ts
@@ -0,0 +1,26 @@
+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,
+})
+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..0874a84ec
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-storage-location-card/settings-storage-location-card.component.ts
@@ -0,0 +1,17 @@
+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',
+  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..720777bd4
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-view-only-links-card/settings-view-only-links-card.component.ts
@@ -0,0 +1,19 @@
+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',
+  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..f9baae456
--- /dev/null
+++ b/src/app/features/project/settings/components/settings-wiki-card/settings-wiki-card.component.ts
@@ -0,0 +1,24 @@
+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',
+  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/mock-data.ts b/src/app/features/project/settings/mock-data.ts
new file mode 100644
index 000000000..8b3ce49d5
--- /dev/null
+++ b/src/app/features/project/settings/mock-data.ts
@@ -0,0 +1,90 @@
+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,
+    },
+  ],
+  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/models/right-control.model.ts b/src/app/features/project/settings/models/right-control.model.ts
new file mode 100644
index 000000000..ab03e6dba
--- /dev/null
+++ 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 dada4425b..b4da870a7 100644
--- a/src/app/features/project/settings/settings.component.html
+++ b/src/app/features/project/settings/settings.component.html
@@ -2,178 +2,61 @@
   <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 class="flex flex-column">
-        <h3 class="text-xl pb-2">{{ 'myProjects.settings.viewOnlyLinks' | translate }}</h3>
-
-        <p>{{ 'myProjects.settings.viewOnlySubtitle' | translate }}</p>
-
-        <div class="mt-4">
-          <osf-view-only-table [tableData]="tableData"></osf-view-only-table>
-        </div>
-
-      </p-card>
-
-      <p-card>
-        <h3 class="text-xl pb-4">{{ 'myProjects.settings.accessRequests' | translate }}</h3>
+    <p-tabpanels role="tablist" class="flex flex-column gap-4 flex-1 w-full bg-white" [class.mobile]="!isDesktop()">
+      <osf-settings-project-form-card
+        [formGroup]="projectForm"
+        (submitForm)="submitForm()"
+        (resetForm)="resetForm()"
+      ></osf-settings-project-form-card>
 
-        <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>
+      <osf-settings-storage-location-card
+        [location]="'United States'"
+        [locationText]="'Storage location cannot be changed after project is created.'"
+      ></osf-settings-storage-location-card>
 
-        <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>
+      <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>
+      <osf-settings-access-requests-card [formControl]="accessRequest"></osf-settings-access-requests-card>
 
-        <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>
+      <osf-settings-wiki-card
+        [formControl]="wiki"
+        [rightControls]="rightControls['wiki']"
+        [accessOptions]="accessOptions"
+        (accessChange)="onAccessChange($event)"
+      ></osf-settings-wiki-card>
 
-          <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>
+      <osf-settings-commenting-card [(commenting)]="commenting"></osf-settings-commenting-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
+        <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>
             <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="input-label ml-2">
             {{ 'myProjects.settings.redirectLinkText' | translate }}
-          </p>
+          </label>
         </div>
       </p-card>
 
@@ -182,14 +65,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 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" />
+
+                <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..065495b94 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;
@@ -8,4 +8,20 @@
 
 .icon-space {
   padding: 0.7rem 1.1rem;
+
+  @media (max-width: 575px) {
+    padding: 0.8rem 0.75rem;
+  }
+}
+
+.input-label {
+  color: var.$dark-blue-1;
+  margin-bottom: 0;
+}
+
+.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..7cb884087 100644
--- a/src/app/features/project/settings/settings.component.ts
+++ b/src/app/features/project/settings/settings.component.ts
@@ -3,20 +3,27 @@ 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';
 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,
+  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 '@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';
@@ -29,16 +36,19 @@ import { IS_WEB } from '@shared/utils/breakpoints.tokens';
     SubHeaderComponent,
     TabPanels,
     FormsModule,
-    InputText,
     ReactiveFormsModule,
-    Textarea,
     Card,
     Button,
-    ViewOnlyTableComponent,
     Checkbox,
-    AccordionTableComponent,
-    RadioButton,
+    ProjectDetailSettingAccordionComponent,
     RouterLink,
+    NgOptimizedImage,
+    SettingsProjectFormCardComponent,
+    SettingsStorageLocationCardComponent,
+    SettingsViewOnlyLinksCardComponent,
+    SettingsAccessRequestsCardComponent,
+    SettingsWikiCardComponent,
+    SettingsCommentingCardComponent,
   ],
   templateUrl: './settings.component.html',
   styleUrl: './settings.component.scss',
@@ -59,66 +69,50 @@ 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[] = [
-    {
-      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 }[];
+  rightControls: { wiki: RightControl[]; notifications: RightControl[] };
+
+  constructor() {
+    [
+      this.tableData,
+      this.access,
+      this.accessOptions,
+      this.commentSetting,
+      this.fileSetting,
+      this.dropdownOptions,
+      this.affiliations,
+      this.rightControls,
+    ] = [
+      mockSettingsData.tableData,
+      mockSettingsData.access,
+      mockSettingsData.accessOptions,
+      mockSettingsData.commentSetting,
+      mockSettingsData.fileSetting,
+      mockSettingsData.dropdownOptions,
+      mockSettingsData.affiliations,
+      mockSettingsData.rightControls as { wiki: RightControl[]; notifications: RightControl[] },
+    ];
+  }
 
-  dropdownOptions = [
-    { label: 'Instantly', value: 'instantly' },
-    { label: 'Daily', value: 'daily' },
-    { label: 'Never', value: 'never' },
-  ];
   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);
+  onAccessChange(event: string): void {
+    console.log(event);
   }
 }
diff --git a/src/app/features/settings/addons/connect-addon/connect-addon.component.html b/src/app/features/settings/addons/connect-addon/connect-addon.component.html
index 667b70693..100e075f2 100644
--- a/src/app/features/settings/addons/connect-addon/connect-addon.component.html
+++ b/src/app/features/settings/addons/connect-addon/connect-addon.component.html
@@ -25,10 +25,10 @@ <h2>
                 <ng-template pTemplate="body" let-term>
                   <tr
                     [ngClass]="{
-                    'background-warning': term.type === 'warning',
-                    'background-success': term.type === 'info',
-                    'background-danger': term.type === 'danger',
-                  }"
+                      'background-warning': term.type === 'warning',
+                      'background-success': term.type === 'info',
+                      'background-danger': term.type === 'danger',
+                    }"
                   >
                     <td>{{ term.function }}</td>
                     <td>{{ term.status }}</td>
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index fbcdf31e6..5a1785edf 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -1,4 +1,3 @@
-export * from './view-only-table/view-only-table.component';
 export { AddProjectFormComponent } from './add-project-form/add-project-form.component';
 export { BarChartComponent } from './bar-chart/bar-chart.component';
 export { LineChartComponent } from './line-chart/line-chart.component';
@@ -8,3 +7,5 @@ export { PasswordInputHintComponent } from './password-input-hint/password-input
 export { PieChartComponent } from './pie-chart/pie-chart.component';
 export { SearchInputComponent } from './search-input/search-input.component';
 export { SubHeaderComponent } from './sub-header/sub-header.component';
+export * from './view-only-table/view-only-table.component';
+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
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/app/shared/components/view-only-table/view-only-table.component.scss b/src/app/shared/components/view-only-table/view-only-table.component.scss
index eb73a2095..c0f57541a 100644
--- 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
@@ -2,7 +2,7 @@
 
 .delete-icon {
   &:before {
-    color: var.$red-1;
+    color: var.$red-3;
     cursor: pointer;
   }
 }
@@ -13,4 +13,4 @@
   transform: translateY(-50%);
   width: 1.5rem;
   cursor: pointer;
-}
\ No newline at end of file
+}
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..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
@@ -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',
@@ -22,6 +22,7 @@ export class ViewOnlyTableComponent {
   tableData = input.required<LinkTableModel[]>();
 
   readonly #clipboard = inject(Clipboard);
+
   copy(link: string): void {
     this.#clipboard.copy(link);
   }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index fb37ff4fe..3214a66c2 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -252,8 +252,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"
     }
   },
   "project": {
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..1271cf45b 100644
--- a/src/assets/styles/overrides/button.scss
+++ b/src/assets/styles/overrides/button.scss
@@ -235,12 +235,16 @@
   }
 }
 
-.bg-primary-blue-second {
+.bg-primary-blue-second.p-button {
   background-color: var.$pr-blue-2;
 }
 
 .button-shadow-none {
   .p-button {
     box-shadow: none;
+
+    @media (max-width: 575px) {
+      padding: 0;
+    }
   }
 }
diff --git a/src/assets/styles/overrides/dropdown.scss b/src/assets/styles/overrides/dropdown.scss
index 28b14595c..dbbe388a4 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: 575px) {
+      max-width: 240px;
+    }
   }
 }