diff --git a/src/app/core/theme/components.ts b/src/app/core/theme/components.ts
index 54d8fe2a2..123bddf02 100644
--- a/src/app/core/theme/components.ts
+++ b/src/app/core/theme/components.ts
@@ -2,25 +2,6 @@ import { primitives } from './primitives';
 
 export const components = {
   button: {
-    root: {
-      success: {
-        hoverBackground: primitives.colors.greenThree,
-        hoverBorderColor: primitives.colors.greenThree,
-      },
-      danger: {
-        hoverBackground: primitives.colors.redThree,
-        hoverBorderColor: primitives.colors.redThree,
-      },
-      secondary: {
-        background: primitives.colors.bgBlueThree,
-        hoverBackground: primitives.colors.bgBlueTwo,
-        activeBackground: primitives.colors.bgBlueThree,
-        borderColor: primitives.colors.bgBlueThree,
-        hoverBorderColor: primitives.colors.bgBlueTwo,
-        color: primitives.colors.darkBlueTwo,
-        hoverColor: primitives.colors.prBlueThree,
-      },
-    },
     outlined: {
       primary: {
         hoverBackground: primitives.colors.bgBlueTwo,
@@ -34,6 +15,14 @@ export const components = {
     colorScheme: {
       light: {
         root: {
+          success: {
+            hoverBackground: primitives.colors.greenThree,
+            hoverBorderColor: primitives.colors.greenThree,
+          },
+          danger: {
+            hoverBackground: primitives.colors.redThree,
+            hoverBorderColor: primitives.colors.redThree,
+          },
           info: {
             background: primitives.colors.transparent,
             hoverBackground: primitives.colors.transparent,
@@ -45,6 +34,15 @@ export const components = {
             hoverColor: primitives.colors.darkBlueOne,
             activeColor: primitives.colors.darkBlueOne,
           },
+          secondary: {
+            background: primitives.colors.bgBlueThree,
+            hoverBackground: primitives.colors.bgBlueTwo,
+            activeBackground: primitives.colors.bgBlueThree,
+            borderColor: primitives.colors.bgBlueThree,
+            hoverBorderColor: primitives.colors.bgBlueTwo,
+            color: primitives.colors.darkBlueTwo,
+            hoverColor: primitives.colors.prBlueThree,
+          },
         },
       },
     },
diff --git a/src/app/features/admin-institutions/components/admin-table/admin-table.component.html b/src/app/features/admin-institutions/components/admin-table/admin-table.component.html
index d1de12dac..5b666686e 100644
--- a/src/app/features/admin-institutions/components/admin-table/admin-table.component.html
+++ b/src/app/features/admin-institutions/components/admin-table/admin-table.component.html
@@ -70,17 +70,17 @@
 
 <div class="relative">
   <p-table
+    class="institution-admin-table"
     [columns]="selectedColumnsComputed()"
     [value]="isLoading() ? skeletonData : tableData()"
     [scrollable]="true"
     [sortMode]="'single'"
-    (onSort)="onSort($event)"
     [lazy]="true"
     [sortField]="sortField()"
     [sortOrder]="sortOrder()"
     [customSort]="true"
     [resetPageOnSort]="false"
-    class="institution-admin-table"
+    (onSort)="onSort($event)"
   >
     <ng-template #header let-columns>
       <tr>
diff --git a/src/app/features/admin-institutions/pages/institutions-preprints/institutions-preprints.component.ts b/src/app/features/admin-institutions/pages/institutions-preprints/institutions-preprints.component.ts
index c80773de5..8c44bff77 100644
--- a/src/app/features/admin-institutions/pages/institutions-preprints/institutions-preprints.component.ts
+++ b/src/app/features/admin-institutions/pages/institutions-preprints/institutions-preprints.component.ts
@@ -4,7 +4,7 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 
-import { CommonModule } from '@angular/common';
+import { LowerCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, OnDestroy, OnInit, signal } from '@angular/core';
 
 import { CurrentResourceType, ResourceType } from '@osf/shared/enums/resource-type.enum';
@@ -33,7 +33,7 @@ import { InstitutionsAdminSelectors } from '../../store';
 
 @Component({
   selector: 'osf-institutions-preprints',
-  imports: [CommonModule, AdminTableComponent, TranslatePipe, Button, FiltersSectionComponent],
+  imports: [Button, AdminTableComponent, FiltersSectionComponent, LowerCasePipe, TranslatePipe],
   templateUrl: './institutions-preprints.component.html',
   styleUrl: './institutions-preprints.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/app/features/admin-institutions/pages/institutions-registrations/institutions-registrations.component.ts b/src/app/features/admin-institutions/pages/institutions-registrations/institutions-registrations.component.ts
index d68ab8fae..a3c859bee 100644
--- a/src/app/features/admin-institutions/pages/institutions-registrations/institutions-registrations.component.ts
+++ b/src/app/features/admin-institutions/pages/institutions-registrations/institutions-registrations.component.ts
@@ -4,7 +4,7 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 
-import { CommonModule } from '@angular/common';
+import { LowerCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, OnDestroy, OnInit, signal } from '@angular/core';
 
 import { CurrentResourceType, ResourceType } from '@osf/shared/enums/resource-type.enum';
@@ -34,7 +34,7 @@ import { InstitutionsAdminSelectors } from '../../store';
 
 @Component({
   selector: 'osf-institutions-registrations',
-  imports: [CommonModule, AdminTableComponent, TranslatePipe, Button, FiltersSectionComponent],
+  imports: [Button, AdminTableComponent, FiltersSectionComponent, LowerCasePipe, TranslatePipe],
   templateUrl: './institutions-registrations.component.html',
   styleUrl: './institutions-registrations.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/app/features/auth/pages/forgot-password/forgot-password.component.html b/src/app/features/auth/pages/forgot-password/forgot-password.component.html
index 1aff6b60e..304cc4b05 100644
--- a/src/app/features/auth/pages/forgot-password/forgot-password.component.html
+++ b/src/app/features/auth/pages/forgot-password/forgot-password.component.html
@@ -23,13 +23,9 @@ <h2 class="text-center">{{ 'auth.forgotPassword.title' | translate }}</h2>
 
   <div class="my-4">
     @if (message()) {
-      <p-message
-        styleClass="w-full"
-        [severity]="message()?.severity"
-        closable="true"
-        [text]="message()!.content | translate"
-        (onClose)="onCloseMessage()"
-      />
+      <p-message styleClass="w-full" [severity]="message()?.severity" closable="true" (onClose)="onCloseMessage()">
+        {{ message()!.content | translate }}
+      </p-message>
     }
   </div>
 </div>
diff --git a/src/app/features/auth/pages/reset-password/reset-password.component.html b/src/app/features/auth/pages/reset-password/reset-password.component.html
index 5ec7f3b96..38624b8b1 100644
--- a/src/app/features/auth/pages/reset-password/reset-password.component.html
+++ b/src/app/features/auth/pages/reset-password/reset-password.component.html
@@ -8,7 +8,6 @@ <h2 class="text-center">{{ 'auth.resetPassword.title' | translate }}</h2>
         <p-password
           inputId="newPassword"
           formControlName="newPassword"
-          styleClass="w-full"
           [toggleMask]="true"
           [feedback]="false"
           autocomplete="new-password"
@@ -22,7 +21,6 @@ <h2 class="text-center">{{ 'auth.resetPassword.title' | translate }}</h2>
         <p-password
           inputId="confirmNewPassword"
           formControlName="confirmNewPassword"
-          styleClass="w-full"
           [toggleMask]="true"
           [feedback]="false"
           autocomplete="new-password"
diff --git a/src/app/features/auth/pages/sign-up/sign-up.component.html b/src/app/features/auth/pages/sign-up/sign-up.component.html
index 64daf4caa..42b97fc48 100644
--- a/src/app/features/auth/pages/sign-up/sign-up.component.html
+++ b/src/app/features/auth/pages/sign-up/sign-up.component.html
@@ -87,7 +87,6 @@ <h2 class="text-center">{{ 'auth.signUp.title' | translate }}</h2>
             [toggleMask]="true"
             [feedback]="false"
             autocomplete="new-password"
-            styleClass="w-full"
           ></p-password>
           <osf-password-input-hint [control]="signUpForm.controls['password']" />
         </div>
diff --git a/src/app/features/collections/components/add-to-collection/project-metadata-step/project-metadata-step.component.html b/src/app/features/collections/components/add-to-collection/project-metadata-step/project-metadata-step.component.html
index 758781c74..030ec51ce 100644
--- a/src/app/features/collections/components/add-to-collection/project-metadata-step/project-metadata-step.component.html
+++ b/src/app/features/collections/components/add-to-collection/project-metadata-step/project-metadata-step.component.html
@@ -92,7 +92,7 @@ <h3>{{ 'collections.addToCollection.resourceMetadata' | translate }}</h3>
           />
           @let license = selectedLicense();
           @if (license) {
-            <p-divider styleClass="mt-3 mb-3" />
+            <p-divider class="my-3" />
             @if (license.requiredFields.length) {
               <div class="flex flex-column gap-3 mb-3 w-full md:flex-row">
                 <div class="w-full md:w-6">
diff --git a/src/app/features/files/pages/files/files.component.html b/src/app/features/files/pages/files/files.component.html
index 79c645900..43d076f6b 100644
--- a/src/app/features/files/pages/files/files.component.html
+++ b/src/app/features/files/pages/files/files.component.html
@@ -11,11 +11,11 @@
     <div class="flex flex-grow-0 w-full sm:w-30rem">
       @if (!isRegistration()) {
         <p-select
+          class="w-full"
           inputId="in_label"
           [options]="rootFoldersOptions()"
           [(ngModel)]="currentRootFolder"
           (onChange)="handleRootFolderChange($event.value)"
-          styleClass="w-full"
           variant="filled"
         >
           <ng-template #selectedItem let-selectedOption>
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 4b40ecae9..fa14d8476 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
@@ -18,11 +18,9 @@
     [paginator]="true"
     [totalRecords]="tableParams().totalRecords"
     paginatorDropdownAppendTo="body"
-    [resizableColumns]="true"
     [scrollable]="true"
     [sortMode]="'single'"
     [lazy]="true"
-    [lazyLoadOnInit]="true"
     (onPage)="onPageChange($event)"
     (onSort)="onSort($event)"
     [sortField]="sortColumn()"
diff --git a/src/app/features/my-projects/my-projects.component.html b/src/app/features/my-projects/my-projects.component.html
index 6e6e81133..e3a806661 100644
--- a/src/app/features/my-projects/my-projects.component.html
+++ b/src/app/features/my-projects/my-projects.component.html
@@ -27,87 +27,95 @@
           ></osf-select>
         }
 
-        <p-tabpanel [value]="tabOption.Projects" class="flex flex-column gap-4 flex-1">
-          <div class="flex flex-column gap-4 md:flex-row md:align-items-center">
-            <osf-search-input
-              class="flex-1"
-              [placeholder]="'myProjects.table.searchPlaceholder' | translate"
-              [control]="searchControl"
-            />
+        <p-tabpanel [value]="tabOption.Projects">
+          <section class="flex flex-column gap-4 flex-1">
+            <div class="flex flex-column gap-4 md:flex-row md:align-items-center">
+              <osf-search-input
+                class="flex-1"
+                [placeholder]="'myProjects.table.searchPlaceholder' | translate"
+                [control]="searchControl"
+              />
 
-            <osf-select
-              class="flex-1"
-              [options]="projectFilterOption"
-              [(selectedValue)]="selectedProjectFilterOption"
-              [fullWidth]="true"
-              (changeValue)="onProjectFilterChange()"
-            ></osf-select>
-          </div>
+              <osf-select
+                class="flex-1"
+                [options]="projectFilterOption"
+                [(selectedValue)]="selectedProjectFilterOption"
+                [fullWidth]="true"
+                (changeValue)="onProjectFilterChange()"
+              ></osf-select>
+            </div>
 
-          <osf-my-projects-table
-            [items]="projects()"
-            [tableParams]="tableParams()"
-            [sortColumn]="sortColumn()"
-            [sortOrder]="sortOrder()"
-            [isLoading]="isLoading()"
-            (pageChange)="onPageChange($event)"
-            (sort)="onSort($event)"
-            (itemClick)="navigateToProject($event)"
-          />
+            <osf-my-projects-table
+              [items]="projects()"
+              [tableParams]="tableParams()"
+              [sortColumn]="sortColumn()"
+              [sortOrder]="sortOrder()"
+              [isLoading]="isLoading()"
+              (pageChange)="onPageChange($event)"
+              (sort)="onSort($event)"
+              (itemClick)="navigateToProject($event)"
+            />
+          </section>
         </p-tabpanel>
 
-        <p-tabpanel [value]="tabOption.Registrations" class="flex flex-column gap-4 flex-1">
-          <osf-search-input
-            [placeholder]="'myProjects.table.searchPlaceholder' | translate"
-            [control]="searchControl"
-          />
+        <p-tabpanel [value]="tabOption.Registrations">
+          <section class="flex flex-column gap-4 flex-1">
+            <osf-search-input
+              [placeholder]="'myProjects.table.searchPlaceholder' | translate"
+              [control]="searchControl"
+            />
 
-          <osf-my-projects-table
-            [items]="registrations()"
-            [tableParams]="tableParams()"
-            [sortColumn]="sortColumn()"
-            [sortOrder]="sortOrder()"
-            [isLoading]="isLoading()"
-            (pageChange)="onPageChange($event)"
-            (sort)="onSort($event)"
-            (itemClick)="navigateToRegistry($event)"
-          />
+            <osf-my-projects-table
+              [items]="registrations()"
+              [tableParams]="tableParams()"
+              [sortColumn]="sortColumn()"
+              [sortOrder]="sortOrder()"
+              [isLoading]="isLoading()"
+              (pageChange)="onPageChange($event)"
+              (sort)="onSort($event)"
+              (itemClick)="navigateToRegistry($event)"
+            />
+          </section>
         </p-tabpanel>
 
-        <p-tabpanel [value]="tabOption.Preprints" class="flex flex-column gap-4 flex-1">
-          <osf-search-input
-            [placeholder]="'myProjects.table.searchPlaceholder' | translate"
-            [control]="searchControl"
-          />
+        <p-tabpanel [value]="tabOption.Preprints">
+          <section class="flex flex-column gap-4 flex-1">
+            <osf-search-input
+              [placeholder]="'myProjects.table.searchPlaceholder' | translate"
+              [control]="searchControl"
+            />
 
-          <osf-my-projects-table
-            [items]="preprints()"
-            [tableParams]="tableParams()"
-            [sortColumn]="sortColumn()"
-            [sortOrder]="sortOrder()"
-            [isLoading]="isLoading()"
-            (pageChange)="onPageChange($event)"
-            (sort)="onSort($event)"
-            (itemClick)="navigateToProject($event)"
-          />
+            <osf-my-projects-table
+              [items]="preprints()"
+              [tableParams]="tableParams()"
+              [sortColumn]="sortColumn()"
+              [sortOrder]="sortOrder()"
+              [isLoading]="isLoading()"
+              (pageChange)="onPageChange($event)"
+              (sort)="onSort($event)"
+              (itemClick)="navigateToProject($event)"
+            />
+          </section>
         </p-tabpanel>
 
-        <p-tabpanel [value]="tabOption.Bookmarks" class="flex flex-column gap-4 flex-1">
-          <osf-search-input
-            [placeholder]="'myProjects.table.searchPlaceholder' | translate"
-            [control]="searchControl"
-          />
+        <p-tabpanel [value]="tabOption.Bookmarks">
+          <section class="flex flex-column gap-4 flex-1">
+            <osf-search-input
+              [placeholder]="'myProjects.table.searchPlaceholder' | translate"
+              [control]="searchControl"
+            />
 
-          <osf-my-projects-table
-            [items]="bookmarks()"
-            [tableParams]="tableParams()"
-            [sortColumn]="sortColumn()"
-            [sortOrder]="sortOrder()"
-            [isLoading]="isLoading()"
-            (pageChange)="onPageChange($event)"
-            (sort)="onSort($event)"
-            (itemClick)="navigateToProject($event)"
-          />
+            <osf-my-projects-table
+              [items]="bookmarks()"
+              [tableParams]="tableParams()"
+              [sortColumn]="sortColumn()"
+              [sortOrder]="sortOrder()"
+              [isLoading]="isLoading()"
+              (pageChange)="onPageChange($event)"
+              (sort)="onSort($event)"
+              (itemClick)="navigateToProject($event)"
+            />
+          </section>
         </p-tabpanel>
       </p-tabpanels>
     </p-tabs>
diff --git a/src/app/features/preprints/components/stepper/author-assertion-step/author-assertions-step.component.html b/src/app/features/preprints/components/stepper/author-assertion-step/author-assertions-step.component.html
index 6840ebace..0cc639bef 100644
--- a/src/app/features/preprints/components/stepper/author-assertion-step/author-assertions-step.component.html
+++ b/src/app/features/preprints/components/stepper/author-assertion-step/author-assertions-step.component.html
@@ -1,6 +1,6 @@
 <h2>{{ 'preprints.preprintStepper.authorAssertions.title' | translate }}</h2>
 
-<p-card styleClass="mt-4" class="card">
+<p-card class="card mt-4">
   <div>
     <h2>{{ 'preprints.preprintStepper.authorAssertions.conflictOfInterest.title' | translate }}</h2>
 
@@ -52,7 +52,7 @@ <h2>{{ 'preprints.preprintStepper.authorAssertions.conflictOfInterest.title' | t
   </div>
 </p-card>
 
-<p-card styleClass="mt-4" class="card">
+<p-card class="card mt-4">
   <div>
     <h2>{{ 'preprints.preprintStepper.authorAssertions.publicData.title' | translate }}</h2>
 
@@ -131,7 +131,7 @@ <h2>{{ 'preprints.preprintStepper.authorAssertions.publicData.title' | translate
   </div>
 </p-card>
 
-<p-card styleClass="mt-4" class="card">
+<p-card class="card mt-4">
   <div>
     <h2>{{ 'preprints.preprintStepper.authorAssertions.publicPreregistration.title' | translate }}</h2>
 
diff --git a/src/app/features/preprints/components/stepper/file-step/file-step.component.html b/src/app/features/preprints/components/stepper/file-step/file-step.component.html
index ee8b37860..e3530c1ae 100644
--- a/src/app/features/preprints/components/stepper/file-step/file-step.component.html
+++ b/src/app/features/preprints/components/stepper/file-step/file-step.component.html
@@ -62,7 +62,7 @@ <h2>{{ 'preprints.preprintStepper.file.title' | translate }}</h2>
 }
 
 @if (selectedFileSource() === PreprintFileSource.Project && !preprintFile() && !isPreprintFileLoading()) {
-  <p-card styleClass="mt-6" class="card">
+  <p-card class="card mt-6">
     <div>
       <p class="line-height-3">
         {{ 'preprints.preprintStepper.projectSelection.description' | translate }}
@@ -73,8 +73,7 @@ <h2>{{ 'preprints.preprintStepper.file.title' | translate }}</h2>
 
       <p-select
         id="project-select"
-        class="w-12 md:w-6"
-        styleClass="mt-4"
+        class="w-12 md:w-6 mt-4"
         appendTo="body"
         optionLabel="name"
         optionValue="id"
diff --git a/src/app/features/preprints/components/stepper/preprints-metadata-step/preprints-metadata-step.component.html b/src/app/features/preprints/components/stepper/preprints-metadata-step/preprints-metadata-step.component.html
index 624123cc0..5f5fe2e0f 100644
--- a/src/app/features/preprints/components/stepper/preprints-metadata-step/preprints-metadata-step.component.html
+++ b/src/app/features/preprints/components/stepper/preprints-metadata-step/preprints-metadata-step.component.html
@@ -8,7 +8,7 @@ <h2>{{ 'preprints.preprintStepper.metadata.title' | translate }}</h2>
   </div>
 }
 
-<p-card class="w-full card" styleClass="mt-4">
+<p-card class="w-full card mt-4">
   <h2 class="mb-2">{{ 'shared.license.title' | translate }}</h2>
 
   <p class="mb-1">{{ 'shared.license.description' | translate }}</p>
@@ -43,7 +43,7 @@ <h2 class="mb-2">{{ 'shared.license.title' | translate }}</h2>
   </div>
 }
 
-<p-card styleClass="mt-4" class="card">
+<p-card class="card mt-4">
   <div>
     <h2>{{ 'preprints.preprintStepper.metadata.tagsTitle' | translate }}</h2>
 
@@ -53,7 +53,7 @@ <h2>{{ 'preprints.preprintStepper.metadata.tagsTitle' | translate }}</h2>
   </div>
 </p-card>
 
-<p-card styleClass="mt-4" class="card">
+<p-card class="card mt-4">
   <div>
     <h2>{{ 'preprints.preprintStepper.metadata.publicationDoi.title' | translate }}</h2>
 
@@ -69,13 +69,12 @@ <h2>{{ 'preprints.preprintStepper.metadata.publicationDoi.title' | translate }}<
   </div>
 </p-card>
 
-<p-card styleClass="mt-4" class="card">
+<p-card class="card mt-4">
   <h2>{{ 'preprints.preprintStepper.metadata.publicationDateTitle' | translate }}</h2>
 
   <p-datePicker
     inputId="publicationDate"
-    class="w-full"
-    styleClass="mt-4"
+    class="w-full mt-4"
     [formControl]="metadataForm.controls['originalPublicationDate']"
     [iconDisplay]="'input'"
     [showIcon]="true"
@@ -89,7 +88,7 @@ <h2>{{ 'preprints.preprintStepper.metadata.publicationDateTitle' | translate }}<
   </p-datePicker>
 </p-card>
 
-<p-card styleClass="mt-4" class="card">
+<p-card class="card mt-4">
   <h2 class="mb-4">{{ 'preprints.preprintStepper.metadata.publicationCitationTitle' | translate }}</h2>
 
   <osf-text-input
diff --git a/src/app/features/preprints/components/stepper/review-step/review-step.component.html b/src/app/features/preprints/components/stepper/review-step/review-step.component.html
index 236dc3d20..34fe92790 100644
--- a/src/app/features/preprints/components/stepper/review-step/review-step.component.html
+++ b/src/app/features/preprints/components/stepper/review-step/review-step.component.html
@@ -20,7 +20,7 @@ <h2>{{ 'preprints.preprintStepper.review.title' | translate | titlecase }}</h2>
   {{ 'preprints.preprintStepper.review.supportCenter' | translate }}
 </p>
 
-<p-card styleClass="mt-4" class="card">
+<p-card class="card mt-4">
   <div class="flex flex-column gap-4">
     <h2>{{ 'preprints.preprintStepper.review.sections.titleAndAbstract.title' | translate }}</h2>
 
@@ -57,7 +57,7 @@ <h3>{{ 'preprints.preprintStepper.common.labels.abstract' | translate }}</h3>
   </div>
 </p-card>
 
-<p-card styleClass="mt-4" class="card">
+<p-card class="card mt-4">
   <div class="flex flex-column gap-4">
     <h2>{{ 'preprints.preprintStepper.review.sections.metadata.title' | translate }}</h2>
 
@@ -146,7 +146,7 @@ <h3>{{ 'preprints.preprintStepper.review.sections.metadata.publicationCitation'
 </p-card>
 
 @if (provider().assertionsEnabled) {
-  <p-card styleClass="mt-4" class="card">
+  <p-card class="card mt-4">
     <div class="flex flex-column gap-4">
       <h2>{{ 'preprints.preprintStepper.review.sections.authorAssertions.title' | translate }}</h2>
 
@@ -220,7 +220,7 @@ <h3>
   </p-card>
 }
 
-<p-card styleClass="mt-4" class="card">
+<p-card class="card mt-4">
   <div class="flex flex-column gap-4">
     <h2>{{ 'preprints.preprintStepper.review.sections.supplements.title' | translate }}</h2>
     @if (preprintProject()) {
diff --git a/src/app/features/preprints/components/stepper/supplements-step/supplements-step.component.html b/src/app/features/preprints/components/stepper/supplements-step/supplements-step.component.html
index 271498f42..157ec963a 100644
--- a/src/app/features/preprints/components/stepper/supplements-step/supplements-step.component.html
+++ b/src/app/features/preprints/components/stepper/supplements-step/supplements-step.component.html
@@ -41,8 +41,7 @@ <h2>{{ 'preprints.preprintStepper.supplements.title' | translate }}</h2>
 
         <p-select
           id="project-select"
-          class="w-12 md:w-6"
-          styleClass="mt-4"
+          class="w-12 md:w-6 mt-4"
           appendTo="body"
           optionLabel="name"
           optionValue="id"
diff --git a/src/app/features/preprints/components/stepper/title-and-abstract-step/title-and-abstract-step.component.html b/src/app/features/preprints/components/stepper/title-and-abstract-step/title-and-abstract-step.component.html
index 9091466b8..ee713dae2 100644
--- a/src/app/features/preprints/components/stepper/title-and-abstract-step/title-and-abstract-step.component.html
+++ b/src/app/features/preprints/components/stepper/title-and-abstract-step/title-and-abstract-step.component.html
@@ -1,6 +1,6 @@
 <h2>{{ 'preprints.preprintStepper.titleAndAbstract.title' | translate }}</h2>
 
-<p-card styleClass="mt-4" class="card">
+<p-card class="cardmt-4">
   <div class="flex flex-column gap-3">
     <div class="flex flex-column">
       <osf-text-input
diff --git a/src/app/features/profile/profile.component.html b/src/app/features/profile/profile.component.html
index 958d22e05..4cbfd0669 100644
--- a/src/app/features/profile/profile.component.html
+++ b/src/app/features/profile/profile.component.html
@@ -2,7 +2,7 @@
   <osf-loading-spinner />
 } @else {
   @if (user()) {
-    <div class="mt-7 px-3 md:px-5 xl:px-4">
+    <div class="mt-6">
       @if (user()?.mergedBy) {
         <p-message class="overview-message w-full mb-4" severity="info">
           <ng-template #container>
diff --git a/src/app/features/project/overview/components/delete-component-dialog/delete-component-dialog.component.html b/src/app/features/project/overview/components/delete-component-dialog/delete-component-dialog.component.html
index 3e7b3eb6c..e21baff10 100644
--- a/src/app/features/project/overview/components/delete-component-dialog/delete-component-dialog.component.html
+++ b/src/app/features/project/overview/components/delete-component-dialog/delete-component-dialog.component.html
@@ -2,7 +2,7 @@
   @if (hasSubComponents()) {
     <p>{{ 'project.overview.dialog.deleteComponent.listMessage' | translate }}</p>
     @if (isLoading()) {
-      <p-skeleton styleClass="mt-2" width="100%" height="4rem" />
+      <p-skeleton class="mt-2" width="100%" height="4rem" />
     } @else {
       <ul class="flex flex-column gap-1 mt-2 pl-4">
         @for (component of components(); track component.id) {
diff --git a/src/app/features/project/project-addons/project-addons.component.html b/src/app/features/project/project-addons/project-addons.component.html
index 8b47ca55d..3fcf71ec0 100644
--- a/src/app/features/project/project-addons/project-addons.component.html
+++ b/src/app/features/project/project-addons/project-addons.component.html
@@ -5,6 +5,7 @@
       <p-tab [value]="AddonTabValue.ALL_ADDONS" data-test-all-addons-tab>
         {{ 'settings.addons.tabs.allAddons' | translate }}
       </p-tab>
+
       <p-tab [value]="AddonTabValue.CONNECTED_ADDONS" data-test-configured-addons-tab>
         {{ 'settings.addons.tabs.connectedAddons' | translate }}
       </p-tab>
@@ -17,48 +18,57 @@
         [(selectedValue)]="selectedTab"
         [fullWidth]="true"
       />
-      <p-tabpanel [value]="AddonTabValue.ALL_ADDONS" class="flex flex-column mt-4 gap-5">
-        <p>
-          {{ 'settings.addons.description' | translate }}
-        </p>
-        <osf-addons-toolbar
-          [categoryOptions]="categoryOptions()"
-          [searchControl]="searchControl"
-          [(selectedCategory)]="selectedCategory"
-        />
-        @if (!isAllAddonsTabLoading()) {
-          <osf-addon-card-list
-            [cards]="filteredAddonCards()"
-            [isConnected]="false"
-            [hasAdminAccess]="hasAdminAccess()"
+
+      <p-tabpanel [value]="AddonTabValue.ALL_ADDONS">
+        <section class="flex flex-column mt-4 gap-5">
+          <p>
+            {{ 'settings.addons.description' | translate }}
+          </p>
+
+          <osf-addons-toolbar
+            [categoryOptions]="categoryOptions()"
+            [searchControl]="searchControl"
+            [(selectedCategory)]="selectedCategory"
           />
-        } @else {
-          <div class="flex-1 mt-4 md:mt-8 lg:pt-5">
-            <osf-loading-spinner />
-          </div>
-        }
+
+          @if (!isAllAddonsTabLoading()) {
+            <osf-addon-card-list
+              [cards]="filteredAddonCards()"
+              [isConnected]="false"
+              [hasAdminAccess]="hasAdminAccess()"
+            />
+          } @else {
+            <div class="flex-1 mt-4 md:mt-8 lg:pt-5">
+              <osf-loading-spinner />
+            </div>
+          }
+        </section>
       </p-tabpanel>
-      <p-tabpanel [value]="AddonTabValue.CONNECTED_ADDONS" class="flex flex-column gap-5">
-        <p>
-          {{ 'settings.addons.connectedDescription' | translate }}
-        </p>
-        <osf-addons-toolbar
-          [categoryOptions]="categoryOptions()"
-          [searchControl]="searchControl"
-          [(selectedCategory)]="selectedCategory"
-        />
 
-        @if (!isConfiguredAddonsLoading()) {
-          <osf-addon-card-list
-            [cards]="allConfiguredAddons()"
-            [isConnected]="false"
-            [hasAdminAccess]="hasAdminAccess()"
+      <p-tabpanel [value]="AddonTabValue.CONNECTED_ADDONS">
+        <section class="flex flex-column gap-5">
+          <p>
+            {{ 'settings.addons.connectedDescription' | translate }}
+          </p>
+
+          <osf-addons-toolbar
+            [categoryOptions]="categoryOptions()"
+            [searchControl]="searchControl"
+            [(selectedCategory)]="selectedCategory"
           />
-        } @else {
-          <div class="flex-1 mt-6 md:mt-8 lg:pt-7">
-            <osf-loading-spinner />
-          </div>
-        }
+
+          @if (!isConfiguredAddonsLoading()) {
+            <osf-addon-card-list
+              [cards]="allConfiguredAddons()"
+              [isConnected]="false"
+              [hasAdminAccess]="hasAdminAccess()"
+            />
+          } @else {
+            <div class="flex-1 mt-6 md:mt-8 lg:pt-7">
+              <osf-loading-spinner />
+            </div>
+          }
+        </section>
       </p-tabpanel>
     </p-tabpanels>
   </p-tabs>
diff --git a/src/app/features/project/settings/components/delete-project-dialog/delete-project-dialog.component.html b/src/app/features/project/settings/components/delete-project-dialog/delete-project-dialog.component.html
index afb2c977b..499c065ef 100644
--- a/src/app/features/project/settings/components/delete-project-dialog/delete-project-dialog.component.html
+++ b/src/app/features/project/settings/components/delete-project-dialog/delete-project-dialog.component.html
@@ -1,7 +1,7 @@
 @if (hasAdminAccessForAllComponents()) {
   <p>{{ 'project.deleteProject.dialog.listMessage' | translate }}</p>
   @if (isLoading()) {
-    <p-skeleton styleClass="mt-2" width="100%" height="4rem" />
+    <p-skeleton class="mt-2" width="100%" height="4rem" />
   } @else {
     <ul class="flex flex-column gap-1 mt-2 pl-4">
       @for (project of projects(); track project.id) {
diff --git a/src/app/features/registries/components/confirm-registration-dialog/confirm-registration-dialog.component.html b/src/app/features/registries/components/confirm-registration-dialog/confirm-registration-dialog.component.html
index 033bacab6..14609bffe 100644
--- a/src/app/features/registries/components/confirm-registration-dialog/confirm-registration-dialog.component.html
+++ b/src/app/features/registries/components/confirm-registration-dialog/confirm-registration-dialog.component.html
@@ -46,7 +46,7 @@
   </div>
   @if (showDateControl) {
     <p-datePicker
-      styleClass="mt-2"
+      class="mt-2"
       id="embargoDate"
       formControlName="embargoDate"
       dataType="string"
diff --git a/src/app/features/registries/components/custom-step/custom-step.component.html b/src/app/features/registries/components/custom-step/custom-step.component.html
index a8131803e..3424906dd 100644
--- a/src/app/features/registries/components/custom-step/custom-step.component.html
+++ b/src/app/features/registries/components/custom-step/custom-step.component.html
@@ -58,7 +58,7 @@ <h3 class="mb-2">
           </label>
 
           @if (q.exampleText) {
-            <p-inplace #inplaceRef styleClass="mb-4">
+            <p-inplace #inplaceRef class="mb-4">
               <ng-template #display>
                 <span class="text-primary font-medium">{{ 'common.links.showExample' | translate }} </span>
               </ng-template>
diff --git a/src/app/features/registries/components/registries-metadata-step/registries-license/registries-license.component.html b/src/app/features/registries/components/registries-metadata-step/registries-license/registries-license.component.html
index 0366f69b3..8394e9505 100644
--- a/src/app/features/registries/components/registries-metadata-step/registries-license/registries-license.component.html
+++ b/src/app/features/registries/components/registries-metadata-step/registries-license/registries-license.component.html
@@ -1,4 +1,4 @@
-<p-card class="w-full card" styleClass="mt-4" (focusout)="onFocusOut()">
+<p-card class="w-full card mt-4" (focusout)="onFocusOut()">
   <h2 class="mb-2">{{ 'shared.license.title' | translate }}</h2>
 
   <p class="mb-1">{{ 'shared.license.description' | translate }}</p>
diff --git a/src/app/features/registries/pages/my-registrations/my-registrations.component.html b/src/app/features/registries/pages/my-registrations/my-registrations.component.html
index 45a6b4e5f..234d32b0d 100644
--- a/src/app/features/registries/pages/my-registrations/my-registrations.component.html
+++ b/src/app/features/registries/pages/my-registrations/my-registrations.component.html
@@ -30,52 +30,56 @@
           ></osf-select>
         }
 
-        <p-tabpanel [value]="RegistrationTab.Drafts" class="flex flex-column gap-4 flex-1">
-          @if (isDraftRegistrationsLoading()) {
-            @for (item of skeletons; track $index) {
-              <p-skeleton width="100%" height="21.5rem" borderRadius="0.5rem" />
+        <p-tabpanel [value]="RegistrationTab.Drafts">
+          <section class="flex flex-column gap-4 flex-1">
+            @if (isDraftRegistrationsLoading()) {
+              @for (item of skeletons; track $index) {
+                <p-skeleton width="100%" height="21.5rem" borderRadius="0.5rem" />
+              }
+            } @else {
+              @if (draftRegistrationsTotalCount() === 0) {
+                <ng-container *ngTemplateOutlet="noRegistration"></ng-container>
+              }
+              @for (registration of draftRegistrations(); track registration.id) {
+                <osf-registration-card
+                  [isDraft]="true"
+                  [registrationData]="registration"
+                  (deleteDraft)="onDeleteDraft($event)"
+                />
+              }
+              @if (draftRegistrationsTotalCount() > itemsPerPage) {
+                <osf-custom-paginator
+                  [first]="draftFirst"
+                  [totalCount]="draftRegistrationsTotalCount()"
+                  (pageChanged)="onDraftsPageChange($event)"
+                />
+              }
             }
-          } @else {
-            @if (draftRegistrationsTotalCount() === 0) {
-              <ng-container *ngTemplateOutlet="noRegistration"></ng-container>
-            }
-            @for (registration of draftRegistrations(); track registration.id) {
-              <osf-registration-card
-                [isDraft]="true"
-                [registrationData]="registration"
-                (deleteDraft)="onDeleteDraft($event)"
-              />
-            }
-            @if (draftRegistrationsTotalCount() > itemsPerPage) {
-              <osf-custom-paginator
-                [first]="draftFirst"
-                [totalCount]="draftRegistrationsTotalCount()"
-                (pageChanged)="onDraftsPageChange($event)"
-              />
-            }
-          }
+          </section>
         </p-tabpanel>
 
         <p-tabpanel [value]="RegistrationTab.Submitted" class="flex flex-column gap-4 flex-1">
-          @if (isSubmittedRegistrationsLoading()) {
-            @for (item of skeletons; track $index) {
-              <p-skeleton width="100%" height="21.5rem" borderRadius="0.5rem" />
+          <section class="flex flex-column gap-4 flex-1">
+            @if (isSubmittedRegistrationsLoading()) {
+              @for (item of skeletons; track $index) {
+                <p-skeleton width="100%" height="21.5rem" borderRadius="0.5rem" />
+              }
+            } @else {
+              @if (submittedRegistrationsTotalCount() === 0) {
+                <ng-container *ngTemplateOutlet="noRegistration"></ng-container>
+              }
+              @for (registration of submittedRegistrations(); track $index) {
+                <osf-registration-card [registrationData]="registration" />
+              }
+              @if (submittedRegistrationsTotalCount() > itemsPerPage) {
+                <osf-custom-paginator
+                  [first]="submittedFirst"
+                  [totalCount]="submittedRegistrationsTotalCount()"
+                  (pageChanged)="onSubmittedPageChange($event)"
+                />
+              }
             }
-          } @else {
-            @if (submittedRegistrationsTotalCount() === 0) {
-              <ng-container *ngTemplateOutlet="noRegistration"></ng-container>
-            }
-            @for (registration of submittedRegistrations(); track $index) {
-              <osf-registration-card [registrationData]="registration" />
-            }
-            @if (submittedRegistrationsTotalCount() > itemsPerPage) {
-              <osf-custom-paginator
-                [first]="submittedFirst"
-                [totalCount]="submittedRegistrationsTotalCount()"
-                (pageChanged)="onSubmittedPageChange($event)"
-              />
-            }
-          }
+          </section>
         </p-tabpanel>
       </p-tabpanels>
     </p-tabs>
diff --git a/src/app/features/settings/account-settings/components/change-password/change-password.component.html b/src/app/features/settings/account-settings/components/change-password/change-password.component.html
index d34479af4..34a031456 100644
--- a/src/app/features/settings/account-settings/components/change-password/change-password.component.html
+++ b/src/app/features/settings/account-settings/components/change-password/change-password.component.html
@@ -10,7 +10,6 @@ <h2>{{ 'settings.accountSettings.changePassword.title' | translate }}</h2>
       <p-password
         inputId="old-password"
         class="w-full"
-        styleClass="w-full"
         [formControlName]="AccountSettingsPasswordFormControls.OldPassword"
         [toggleMask]="true"
         [feedback]="false"
@@ -34,7 +33,6 @@ <h2>{{ 'settings.accountSettings.changePassword.title' | translate }}</h2>
         <p-password
           inputId="new-password"
           class="w-full"
-          styleClass="w-full"
           [formControlName]="AccountSettingsPasswordFormControls.NewPassword"
           [toggleMask]="true"
           [feedback]="false"
@@ -67,7 +65,6 @@ <h2>{{ 'settings.accountSettings.changePassword.title' | translate }}</h2>
         <p-password
           inputId="confirm-password"
           class="w-full"
-          styleClass="w-full"
           [formControlName]="AccountSettingsPasswordFormControls.ConfirmPassword"
           [toggleMask]="true"
           [feedback]="false"
diff --git a/src/app/features/settings/account-settings/components/change-password/change-password.component.ts b/src/app/features/settings/account-settings/components/change-password/change-password.component.ts
index 288d7a414..3332f0de9 100644
--- a/src/app/features/settings/account-settings/components/change-password/change-password.component.ts
+++ b/src/app/features/settings/account-settings/components/change-password/change-password.component.ts
@@ -6,7 +6,7 @@ import { Button } from 'primeng/button';
 import { Card } from 'primeng/card';
 import { Password } from 'primeng/password';
 
-import { CommonModule } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
 import { ChangeDetectionStrategy, Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -32,7 +32,7 @@ import { UpdatePassword } from '../../store';
 
 @Component({
   selector: 'osf-change-password',
-  imports: [Card, ReactiveFormsModule, Password, CommonModule, Button, TranslatePipe, PasswordInputHintComponent],
+  imports: [Card, ReactiveFormsModule, Password, Button, NgClass, TranslatePipe, PasswordInputHintComponent],
   templateUrl: './change-password.component.html',
   styleUrl: './change-password.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/app/features/settings/account-settings/components/default-storage-location/default-storage-location.component.html b/src/app/features/settings/account-settings/components/default-storage-location/default-storage-location.component.html
index 5b1cc1587..37e80eba6 100644
--- a/src/app/features/settings/account-settings/components/default-storage-location/default-storage-location.component.html
+++ b/src/app/features/settings/account-settings/components/default-storage-location/default-storage-location.component.html
@@ -6,13 +6,7 @@ <h2>{{ 'settings.accountSettings.defaultStorageLocation.title' | translate }}</h
   </p>
 
   <div class="mt-4">
-    <p-select
-      class="w-full"
-      styleClass="w-full"
-      optionLabel="name"
-      [options]="regions()"
-      [(ngModel)]="selectedRegion"
-    ></p-select>
+    <p-select class="w-full" optionLabel="name" [options]="regions()" [(ngModel)]="selectedRegion"></p-select>
   </div>
 
   <div class="flex justify-content-end mt-4">
diff --git a/src/app/features/settings/developer-apps/developer-apps-container.component.spec.ts b/src/app/features/settings/developer-apps/developer-apps-container.component.spec.ts
index 9ce430ea0..37577ae72 100644
--- a/src/app/features/settings/developer-apps/developer-apps-container.component.spec.ts
+++ b/src/app/features/settings/developer-apps/developer-apps-container.component.spec.ts
@@ -1,65 +1,70 @@
-import { TranslateService } from '@ngx-translate/core';
-import { MockComponent, MockProvider } from 'ng-mocks';
-
-import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
-
-import { Subject } from 'rxjs';
+import { MockProvider } from 'ng-mocks';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
 
-import { DeveloperAppAddEditFormComponent } from '@osf/features/settings/developer-apps/components';
-import { SubHeaderComponent } from '@osf/shared/components/sub-header/sub-header.component';
-import { ToastService } from '@osf/shared/services/toast.service';
+import { CustomDialogService } from '@osf/shared/services/custom-dialog.service';
 
+import { DeveloperAppAddEditFormComponent } from './components';
 import { DeveloperAppsContainerComponent } from './developer-apps-container.component';
 
 import { provideOSFCore } from '@testing/osf.testing.provider';
+import {
+  CustomDialogServiceMockBuilder,
+  CustomDialogServiceMockType,
+} from '@testing/providers/custom-dialog-provider.mock';
+import { RouterMockBuilder, RouterMockType } from '@testing/providers/router-provider.mock';
 
 describe('DeveloperAppsContainerComponent', () => {
   let component: DeveloperAppsContainerComponent;
   let fixture: ComponentFixture<DeveloperAppsContainerComponent>;
-  let translateService: TranslateService;
-  let dialogRefMock: Partial<DynamicDialogRef>;
-  let dialogService: DialogService;
-  let openSpy: jest.SpyInstance;
-  let translateSpy: jest.SpyInstance;
-
-  beforeEach(async () => {
-    dialogRefMock = { onClose: new Subject<void>() };
-
-    await TestBed.configureTestingModule({
-      imports: [DeveloperAppsContainerComponent, MockComponent(SubHeaderComponent)],
-      providers: [MockProvider(DialogService), MockProvider(ToastService), provideOSFCore()],
-    }).compileComponents();
+  let routerMock: RouterMockType;
+  let customDialogServiceMock: CustomDialogServiceMockType;
+
+  function setup(url = '/settings/developer-apps') {
+    routerMock = RouterMockBuilder.create().withUrl(url).build();
+    customDialogServiceMock = CustomDialogServiceMockBuilder.create().withDefaultOpen().build();
+
+    TestBed.configureTestingModule({
+      imports: [DeveloperAppsContainerComponent],
+      providers: [
+        provideOSFCore(),
+        MockProvider(Router, routerMock),
+        MockProvider(CustomDialogService, customDialogServiceMock),
+      ],
+    });
 
     fixture = TestBed.createComponent(DeveloperAppsContainerComponent);
     component = fixture.componentInstance;
+    fixture.detectChanges();
+  }
 
-    translateService = TestBed.inject(TranslateService);
-    dialogService = fixture.debugElement.injector.get(DialogService);
+  it('should create', () => {
+    setup();
 
-    openSpy = jest.spyOn(dialogService, 'open').mockReturnValue(dialogRefMock as DynamicDialogRef);
-    translateSpy = jest.spyOn(translateService, 'instant').mockReturnValue('Create Developer App');
+    expect(component).toBeTruthy();
+  });
 
-    fixture.detectChanges();
+  it('should set isBaseRoute to true when current url is base route', () => {
+    setup('/settings/developer-apps');
+
+    expect(component.isBaseRoute()).toBe(true);
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('should set isBaseRoute to false when current url is not base route', () => {
+    setup('/settings/developer-apps/create');
+
+    expect(component.isBaseRoute()).toBe(false);
   });
 
-  it('should open dialog with 500px width', () => {
+  it('should open create developer app dialog with expected config', () => {
+    setup();
+
     component.createDeveloperApp();
 
-    expect(openSpy).toHaveBeenCalledWith(DeveloperAppAddEditFormComponent, {
+    expect(customDialogServiceMock.open).toHaveBeenCalledWith(DeveloperAppAddEditFormComponent, {
+      header: 'settings.developerApps.form.createTitle',
       width: '500px',
-      focusOnShow: false,
-      header: 'Create Developer App',
-      breakpoints: { '768px': '95vw' },
-      closeOnEscape: true,
-      modal: true,
-      closable: true,
     });
-    expect(translateSpy).toHaveBeenCalledWith('settings.developerApps.form.createTitle');
   });
 });
diff --git a/src/app/features/settings/settings-addons/settings-addons.component.html b/src/app/features/settings/settings-addons/settings-addons.component.html
index 28f1a4a77..e4c22cb83 100644
--- a/src/app/features/settings/settings-addons/settings-addons.component.html
+++ b/src/app/features/settings/settings-addons/settings-addons.component.html
@@ -18,43 +18,47 @@
         [(selectedValue)]="selectedTab"
         [fullWidth]="true"
       />
-      <p-tabpanel [value]="AddonTabValue.ALL_ADDONS" class="flex flex-column mt-4 gap-5">
-        <p>
-          {{ 'settings.addons.description' | translate }}
-        </p>
+      <p-tabpanel [value]="AddonTabValue.ALL_ADDONS">
+        <section class="flex flex-column mt-4 gap-5">
+          <p>
+            {{ 'settings.addons.description' | translate }}
+          </p>
 
-        <osf-addons-toolbar
-          [categoryOptions]="categoryOptions()"
-          [searchControl]="searchControl"
-          [(selectedCategory)]="selectedCategory"
-        />
+          <osf-addons-toolbar
+            [categoryOptions]="categoryOptions()"
+            [searchControl]="searchControl"
+            [(selectedCategory)]="selectedCategory"
+          />
 
-        @if (!isAddonsLoading()) {
-          <osf-addon-card-list [cards]="filteredAddonCards()" [isConnected]="false" [hasAdminAccess]="true" />
-        } @else {
-          <div class="mt-8">
-            <osf-loading-spinner />
-          </div>
-        }
+          @if (!isAddonsLoading()) {
+            <osf-addon-card-list [cards]="filteredAddonCards()" [isConnected]="false" [hasAdminAccess]="true" />
+          } @else {
+            <div class="mt-8">
+              <osf-loading-spinner />
+            </div>
+          }
+        </section>
       </p-tabpanel>
 
-      <p-tabpanel [value]="AddonTabValue.CONNECTED_ADDONS" class="flex flex-column gap-5">
-        <p>
-          {{ 'settings.addons.connectedDescription' | translate }}
-        </p>
-        <osf-addons-toolbar
-          [categoryOptions]="categoryOptions()"
-          [searchControl]="searchControl"
-          [(selectedCategory)]="selectedCategory"
-        />
+      <p-tabpanel [value]="AddonTabValue.CONNECTED_ADDONS">
+        <section class="flex flex-column mt-4 gap-5">
+          <p>
+            {{ 'settings.addons.connectedDescription' | translate }}
+          </p>
+          <osf-addons-toolbar
+            [categoryOptions]="categoryOptions()"
+            [searchControl]="searchControl"
+            [(selectedCategory)]="selectedCategory"
+          />
 
-        @if (!isAuthorizedAddonsLoading()) {
-          <osf-addon-card-list [cards]="allAuthorizedAddons()" [isConnected]="true" [hasAdminAccess]="true" />
-        } @else {
-          <div class="mt-8">
-            <osf-loading-spinner />
-          </div>
-        }
+          @if (!isAuthorizedAddonsLoading()) {
+            <osf-addon-card-list [cards]="allAuthorizedAddons()" [isConnected]="true" [hasAdminAccess]="true" />
+          } @else {
+            <div class="mt-8">
+              <osf-loading-spinner />
+            </div>
+          }
+        </section>
       </p-tabpanel>
     </p-tabpanels>
   </p-tabs>
diff --git a/src/app/shared/components/addons/addon-setup-account-form/addon-setup-account-form.component.html b/src/app/shared/components/addons/addon-setup-account-form/addon-setup-account-form.component.html
index a5b7955aa..4dc56c510 100644
--- a/src/app/shared/components/addons/addon-setup-account-form/addon-setup-account-form.component.html
+++ b/src/app/shared/components/addons/addon-setup-account-form/addon-setup-account-form.component.html
@@ -24,7 +24,7 @@ <h2 class="mb-2">
         {{ 'settings.addons.form.fields.secretKey' | translate }}
       </h2>
       <p-password
-        styleClass="mb-5 w-full"
+        class="mb-5 w-full"
         [feedback]="false"
         [toggleMask]="true"
         [placeholder]="'settings.addons.form.fields.secretKey' | translate"
@@ -37,7 +37,7 @@ <h2 class="mb-2">
         {{ 'settings.addons.form.fields.apiToken' | translate }}
       </h2>
       <p-password
-        styleClass="mb-4 w-full"
+        class="mb-4 w-full"
         [feedback]="false"
         [toggleMask]="true"
         [placeholder]="'settings.addons.form.fields.apiToken' | translate"
@@ -71,7 +71,7 @@ <h2 class="mb-2">
         {{ 'settings.addons.form.fields.personalAccessToken' | translate }}
       </h2>
       <p-password
-        styleClass="mb-4 w-full"
+        class="mb-4 w-full"
         [feedback]="false"
         [toggleMask]="true"
         [placeholder]="'settings.addons.form.fields.personalAccessToken' | translate"
diff --git a/src/app/shared/components/files-tree/files-tree.component.html b/src/app/shared/components/files-tree/files-tree.component.html
index 16a1b52f1..fa2954b12 100644
--- a/src/app/shared/components/files-tree/files-tree.component.html
+++ b/src/app/shared/components/files-tree/files-tree.component.html
@@ -24,8 +24,7 @@
     <div class="flex-1">
       <div class="files-table flex">
         <p-tree
-          class="tree-table"
-          styleClass="w-full md:w-[30rem]"
+          class="tree-table w-full"
           [draggableNodes]="!hasViewOnly() && supportUpload()"
           [droppableNodes]="!hasViewOnly() && supportUpload()"
           [lazy]="true"
diff --git a/src/app/shared/components/generic-filter/generic-filter.component.html b/src/app/shared/components/generic-filter/generic-filter.component.html
index 71a47aaa9..4288d45f2 100644
--- a/src/app/shared/components/generic-filter/generic-filter.component.html
+++ b/src/app/shared/components/generic-filter/generic-filter.component.html
@@ -5,13 +5,13 @@
     </div>
   } @else {
     <p-multiSelect
+      class="w-full"
       [id]="filterOperator()"
       [options]="filterOptions()"
       optionLabel="label"
       optionValue="value"
       [ngModel]="selectedOptionValues()"
       [placeholder]="placeholder()"
-      styleClass="w-full"
       appendTo="body"
       filter
       resetFilterOnHide="false"
diff --git a/src/app/shared/components/license/license.component.html b/src/app/shared/components/license/license.component.html
index 6ca534fd6..3ad93cb67 100644
--- a/src/app/shared/components/license/license.component.html
+++ b/src/app/shared/components/license/license.component.html
@@ -10,7 +10,7 @@
   (onChange)="onSelectLicense($event.value)"
 />
 @if (selectedLicense()) {
-  <p-divider styleClass="mt-3 mb-3" />
+  <p-divider class="my-3" />
   @if (selectedLicense()!.requiredFields.length) {
     <form [formGroup]="licenseForm" class="flex flex-column gap-3 mb-3 w-full md:flex-row">
       <div class="w-full md:w-6">
diff --git a/src/app/shared/components/my-projects-table/my-projects-table.component.html b/src/app/shared/components/my-projects-table/my-projects-table.component.html
index 3ebfec6b0..00a334364 100644
--- a/src/app/shared/components/my-projects-table/my-projects-table.component.html
+++ b/src/app/shared/components/my-projects-table/my-projects-table.component.html
@@ -7,17 +7,15 @@
   [paginator]="tableParams().paginator"
   [totalRecords]="tableParams().totalRecords"
   paginatorDropdownAppendTo="body"
-  [resizableColumns]="true"
   [scrollable]="true"
   [sortMode]="'single'"
   [lazy]="true"
-  [lazyLoadOnInit]="true"
-  (onPage)="onPageChange($event)"
-  (onSort)="onSort($event)"
   [sortField]="sortColumn()"
   [sortOrder]="sortOrder()"
   [customSort]="true"
   [resetPageOnSort]="false"
+  (onSort)="onSort($event)"
+  (onPage)="onPageChange($event)"
 >
   <ng-template #header>
     <tr>
@@ -25,13 +23,16 @@
         {{ 'myProjects.table.columns.title' | translate }}
         <p-sortIcon field="title" />
       </th>
+
       <th>{{ 'myProjects.table.columns.contributors' | translate }}</th>
+
       <th pSortableColumn="dateModified">
         {{ 'myProjects.table.columns.modified' | translate }}
         <p-sortIcon field="dateModified" />
       </th>
     </tr>
   </ng-template>
+
   <ng-template #body let-item>
     @if (item?.id) {
       <tr (click)="onItemClick(item)">
@@ -41,9 +42,11 @@
             <span class="overflow-ellipsis">{{ item.title }}</span>
           </p>
         </td>
+
         <td>
           <osf-contributors-list-shortener [data]="item.contributors" />
         </td>
+
         <td>{{ item.dateModified | date: 'MMM d, y, h:mm a' }}</td>
       </tr>
     } @else {
diff --git a/src/app/shared/components/my-projects-table/my-projects-table.component.ts b/src/app/shared/components/my-projects-table/my-projects-table.component.ts
index 0cd62cda7..a309d648d 100644
--- a/src/app/shared/components/my-projects-table/my-projects-table.component.ts
+++ b/src/app/shared/components/my-projects-table/my-projects-table.component.ts
@@ -4,7 +4,7 @@ import { SortEvent } from 'primeng/api';
 import { Skeleton } from 'primeng/skeleton';
 import { TableModule, TablePageEvent } from 'primeng/table';
 
-import { CommonModule } from '@angular/common';
+import { DatePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 
 import { SortOrder } from '@osf/shared/enums/sort-order.enum';
@@ -16,7 +16,7 @@ import { IconComponent } from '../icon/icon.component';
 
 @Component({
   selector: 'osf-my-projects-table',
-  imports: [CommonModule, TableModule, IconComponent, Skeleton, TranslatePipe, ContributorsListShortenerComponent],
+  imports: [TableModule, Skeleton, IconComponent, ContributorsListShortenerComponent, TranslatePipe, DatePipe],
   templateUrl: './my-projects-table.component.html',
   styleUrl: './my-projects-table.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/app/shared/components/registration-blocks-data/registration-blocks-data.component.html b/src/app/shared/components/registration-blocks-data/registration-blocks-data.component.html
index 33ae60402..0f3e2636a 100644
--- a/src/app/shared/components/registration-blocks-data/registration-blocks-data.component.html
+++ b/src/app/shared/components/registration-blocks-data/registration-blocks-data.component.html
@@ -4,7 +4,7 @@ <h4 class="mb-2">
       {{ question.displayText }}
 
       @if (!isOriginalRevision() && updatedKeysMap()[question.responseKey!]) {
-        <p-tag styleClass="font-bold" [value]="'common.labels.updated' | translate" severity="warn"></p-tag>
+        <p-tag class="font-bold" [value]="'common.labels.updated' | translate" severity="warn"></p-tag>
       }
     </h4>
 
diff --git a/src/app/shared/components/status-badge/status-badge.component.html b/src/app/shared/components/status-badge/status-badge.component.html
index f046b3ade..0f2b18722 100644
--- a/src/app/shared/components/status-badge/status-badge.component.html
+++ b/src/app/shared/components/status-badge/status-badge.component.html
@@ -1,3 +1,3 @@
 @if (label) {
-  <p-tag styleClass="font-bold" [value]="label | translate" [severity]="severity"></p-tag>
+  <p-tag class="font-bold" [value]="label | translate" [severity]="severity"></p-tag>
 }
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 9d07abddf..1fabaa4b2 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
@@ -35,7 +35,7 @@
             {{ item.name }}
           </td>
           <td>
-            <div class="relative">
+            <div class="relative w-14rem">
               <input
                 [id]="item.link"
                 [attr.aria-label]="'Link for ' + item.link"
diff --git a/src/app/shared/components/wiki/compare-section/compare-section.component.html b/src/app/shared/components/wiki/compare-section/compare-section.component.html
index 80e0b801c..91b82208f 100644
--- a/src/app/shared/components/wiki/compare-section/compare-section.component.html
+++ b/src/app/shared/components/wiki/compare-section/compare-section.component.html
@@ -14,7 +14,7 @@ <h2 class="mr-2">{{ 'project.wiki.compare' | translate }}</h2>
 
       <p-select
         class="w-full"
-        styleClass="select-version"
+        [pt]="{ label: { class: 'text-sm' } }"
         [options]="mappedVersions()"
         [ngModel]="selectedVersion"
         (onChange)="onVersionChange($event.value)"
@@ -22,8 +22,8 @@ <h2 class="mr-2">{{ 'project.wiki.compare' | translate }}</h2>
       />
     </div>
 
-    <p-panel styleClass="compare-view" showHeader="false">
-      <div lass="mt-3" [innerHTML]="content()"></div>
+    <p-panel class="compare-view" showHeader="false">
+      <div class="mt-3" [innerHTML]="content()"></div>
     </p-panel>
   </p-panel>
 }
diff --git a/src/app/shared/components/wiki/view-section/view-section.component.html b/src/app/shared/components/wiki/view-section/view-section.component.html
index 9c6fee8c4..5eebca4b3 100644
--- a/src/app/shared/components/wiki/view-section/view-section.component.html
+++ b/src/app/shared/components/wiki/view-section/view-section.component.html
@@ -14,7 +14,7 @@ <h2 class="mr-2">{{ 'project.wiki.view' | translate }}</h2>
 
       <p-select
         class="w-full"
-        styleClass="select-version"
+        [pt]="{ label: { class: 'text-sm' } }"
         [options]="mappedVersions()"
         [ngModel]="selectedVersion()"
         (onChange)="onVersionChange($event.value)"
diff --git a/src/app/shared/components/wiki/view-section/view-section.component.scss b/src/app/shared/components/wiki/view-section/view-section.component.scss
index 9b074b59e..de605d06a 100644
--- a/src/app/shared/components/wiki/view-section/view-section.component.scss
+++ b/src/app/shared/components/wiki/view-section/view-section.component.scss
@@ -1,8 +1,3 @@
 :host {
   flex: 1 1 25%;
 }
-
-.select-version {
-  max-width: 100%;
-  font-size: 0.875rem;
-}
diff --git a/src/app/shared/services/custom-dialog.service.ts b/src/app/shared/services/custom-dialog.service.ts
index cab95a744..717625696 100644
--- a/src/app/shared/services/custom-dialog.service.ts
+++ b/src/app/shared/services/custom-dialog.service.ts
@@ -16,6 +16,7 @@ export class CustomDialogService {
     closeOnEscape: true,
     modal: true,
     closable: true,
+    draggable: false,
     breakpoints: { '768px': '95vw' },
   };
 
diff --git a/src/styles/overrides/accordion.scss b/src/styles/overrides/accordion.scss
index c2121cb4d..c436e8683 100644
--- a/src/styles/overrides/accordion.scss
+++ b/src/styles/overrides/accordion.scss
@@ -7,13 +7,16 @@
   --p-accordion-content-padding: 0;
 
   .p-accordionheader {
-    .p-iconwrapper {
-      transform: rotate(180deg);
+    .p-icon {
       color: var(--grey-1);
     }
   }
 }
 
+.p-accordionpanel:not(.p-accordionpanel-active) .p-accordioncontent-content {
+  display: none;
+}
+
 .resource,
 .license,
 .metadata-accordion {
@@ -21,15 +24,13 @@
     --p-accordion-panel-border-width: 0;
 
     .p-accordionheader {
-      .p-iconwrapper {
+      .p-icon {
         background: var(--bg-blue-3);
-        height: 2rem;
-        min-width: 2rem;
         border-radius: 50%;
-
-        svg {
-          color: var(--pr-blue-1);
-        }
+        color: var(--pr-blue-1);
+        padding: 0.5rem;
+        height: 2rem;
+        width: 2rem;
       }
     }
   }
@@ -65,15 +66,13 @@
     border: none;
   }
 
-  .p-iconwrapper {
+  .p-icon {
     background: var(--bg-blue-3);
-    height: 2rem;
-    min-width: 2rem;
     border-radius: 50%;
-
-    svg {
-      color: var(--pr-blue-1);
-    }
+    color: var(--pr-blue-1);
+    padding: 0.5rem;
+    height: 2rem;
+    width: 2rem;
   }
 }
 
diff --git a/src/styles/overrides/chip.scss b/src/styles/overrides/chip.scss
index bbff4aa63..113ac0ac3 100644
--- a/src/styles/overrides/chip.scss
+++ b/src/styles/overrides/chip.scss
@@ -5,8 +5,8 @@
   --p-chip-padding-y: 0.25rem;
   --p-chip-padding-x: 0.75rem;
   --p-chip-remove-icon-color: var(--dark-blue-1);
-  --p-chip-remove-icon-font-size: 0.875rem;
-  --p-chip-remove-icon-size: 0.875rem;
+  --p-chip-remove-icon-font-size: 0.7rem;
+  --p-chip-remove-icon-size: 0.7rem;
 
   &:has(.p-chip-remove-icon) {
     padding-inline-end: var(--p-chip-padding-x);
diff --git a/src/styles/overrides/select.scss b/src/styles/overrides/select.scss
index 6aa14352c..442f2e773 100644
--- a/src/styles/overrides/select.scss
+++ b/src/styles/overrides/select.scss
@@ -31,10 +31,10 @@
     --p-select-padding-y: 0;
     --p-select-padding-x: 0;
     --p-select-shadow: none;
-    font-size: 0.875rem;
     border: none;
 
     .p-select-label {
+      font-size: 0.875rem;
       white-space: nowrap;
     }
   }
diff --git a/src/styles/overrides/table.scss b/src/styles/overrides/table.scss
index 416cee613..3eca5e3fc 100644
--- a/src/styles/overrides/table.scss
+++ b/src/styles/overrides/table.scss
@@ -6,7 +6,7 @@ p-table {
   --p-datatable-row-color: var(--dark-blue-1);
   --p-datatable-column-title-font-weight: 700;
 
-  .p-datatable {
+  &.p-datatable {
     border: 1px solid var(--grey-2);
     border-radius: 0.5rem;
     padding: 1.5rem;
@@ -33,9 +33,9 @@ p-table {
       border: none;
     }
 
-    .p-sortable-column-icon {
+    .p-datatable-sort-icon {
       color: var(--grey-1);
-      margin-left: 0.6rem;
+      margin-left: 0.5rem;
     }
 
     td {
@@ -80,7 +80,7 @@ p-table {
 }
 
 .view-only-table {
-  .p-datatable {
+  &.p-datatable {
     padding: 0.125rem;
 
     td,
@@ -113,7 +113,7 @@ p-table {
 }
 
 .link-project-table {
-  .p-datatable {
+  &.p-datatable {
     padding: 0 0.5rem 0.5rem 0.5rem;
   }
 
@@ -139,14 +139,14 @@ p-table {
 @media (max-width: var.$breakpoint-xl) {
   .addon-table,
   .my-projects-table {
-    .p-datatable {
+    &.p-datatable {
       padding: 1rem;
       overflow-x: auto;
     }
   }
 
   .my-projects-table {
-    .p-datatable {
+    &.p-datatable {
       overflow-x: auto;
     }
 
@@ -162,7 +162,7 @@ p-table {
     overflow-x: auto;
     width: 100%;
 
-    .p-datatable {
+    &.p-datatable {
       padding: 1rem;
       width: 100%;
 
@@ -181,7 +181,7 @@ p-table {
   }
 
   .my-projects-table {
-    .p-datatable {
+    &.p-datatable {
       overflow-x: auto;
       width: 100%;
     }
diff --git a/src/styles/overrides/tabs.scss b/src/styles/overrides/tabs.scss
index e6e9f8c48..099ddb9ad 100644
--- a/src/styles/overrides/tabs.scss
+++ b/src/styles/overrides/tabs.scss
@@ -1,5 +1,8 @@
-.p-tablist-tab-list {
+.p-tablist {
   --p-tabs-tablist-background: transparent;
+}
+
+.p-tablist-tab-list {
   --p-tabs-tablist-border-width: 0;
 
   .p-tablist-active-bar {