diff --git a/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.html b/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.html
index a6007214a..fc3376e45 100644
--- a/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.html
+++ b/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.html
@@ -1,21 +1,23 @@
 <div class="mb-4 mt-4 flex gap-3 flex-wrap">
   @if (activeFilters().programArea.length) {
     @for (filter of activeFilters().programArea; track filter) {
-      <p-chip [label]="filter" [removable]="true" (onRemove)="onRemoveProgramAreaFilter(filter)">
-        <ng-template pTemplate="removeicon">
-          <i class="osf-icon-close text-xs font-bold text-align-center" tabindex="0" role="button"></i>
-        </ng-template>
-      </p-chip>
+      <p-chip
+        [label]="filter"
+        removeIcon="fas fa-close"
+        removable
+        (onRemove)="onRemoveProgramAreaFilter(filter)"
+      ></p-chip>
     }
   }
 
   @if (activeFilters().collectedType.length) {
     @for (filter of activeFilters().collectedType; track filter) {
-      <p-chip [label]="filter" [removable]="true" (onRemove)="onRemoveCollectedTypeFilter(filter)">
-        <ng-template pTemplate="removeicon">
-          <i class="osf-icon-close text-xs font-bold text-align-center" tabindex="0" role="button"></i>
-        </ng-template>
-      </p-chip>
+      <p-chip
+        [label]="filter"
+        removeIcon="fas fa-close"
+        removable
+        (onRemove)="onRemoveProgramAreaFilter(filter)"
+      ></p-chip>
     }
   }
 </div>
diff --git a/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.ts b/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.ts
index a33896b4c..71f89cf53 100644
--- a/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.ts
+++ b/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.ts
@@ -1,6 +1,5 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
-import { PrimeTemplate } from 'primeng/api';
 import { Chip } from 'primeng/chip';
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
@@ -9,7 +8,7 @@ import { CollectionsSelectors, SetCollectedTypeFilters, SetProgramAreaFilters }
 
 @Component({
   selector: 'osf-collections-filter-chips',
-  imports: [Chip, PrimeTemplate],
+  imports: [Chip],
   templateUrl: './collections-filter-chips.component.html',
   styleUrl: './collections-filter-chips.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/app/features/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.html b/src/app/features/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.html
index bfdf735af..671963626 100644
--- a/src/app/features/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.html
+++ b/src/app/features/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.html
@@ -1,119 +1,60 @@
 @if (filters().dateCreated.value) {
   @let dateCreated = filters().dateCreated.filterName + ': ' + filters().dateCreated.label;
-  <p-chip [label]="dateCreated" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.DateCreated)"
-        (keydown.enter)="clearFilter(FilterType.DateCreated)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip
+    [label]="dateCreated"
+    removeIcon="fas fa-close"
+    removable
+    (onRemove)="clearFilter(FilterType.DateCreated)"
+  ></p-chip>
 }
 
 @if (filters().funder.value) {
   @let funder = filters().funder.filterName + ': ' + filters().funder.label;
-  <p-chip [label]="funder" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.Funder)"
-        (keydown.enter)="clearFilter(FilterType.Funder)"
-      ></i>
-    </ng-template>
-  </p-chip>
+
+  <p-chip [label]="funder" removeIcon="fas fa-close" removable (onRemove)="clearFilter(FilterType.Funder)"></p-chip>
 }
 
 @if (filters().subject.value) {
   @let subject = filters().subject.filterName + ': ' + filters().subject.label;
-  <p-chip [label]="subject" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.Subject)"
-        (keydown.enter)="clearFilter(FilterType.Subject)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip [label]="subject" removeIcon="fas fa-close" removable (onRemove)="clearFilter(FilterType.Subject)"></p-chip>
 }
 
 @if (filters().license.value) {
   @let license = filters().license.filterName + ': ' + filters().license.label;
-  <p-chip [label]="license" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.License)"
-        (keydown.enter)="clearFilter(FilterType.License)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip [label]="license" removeIcon="fas fa-close" removable (onRemove)="clearFilter(FilterType.License)"></p-chip>
 }
 
 @if (filters().resourceType.value) {
   @let resourceType = filters().resourceType.filterName + ': ' + filters().resourceType.label;
-  <p-chip [label]="resourceType" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.ResourceType)"
-        (keydown.enter)="clearFilter(FilterType.ResourceType)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip
+    [label]="resourceType"
+    removeIcon="fas fa-close"
+    removable
+    (onRemove)="clearFilter(FilterType.ResourceType)"
+  ></p-chip>
 }
 
 @if (filters().institution.value) {
   @let institution = filters().institution.filterName + ': ' + filters().institution.label;
-  <p-chip [label]="institution" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.Institution)"
-        (keydown.enter)="clearFilter(FilterType.Institution)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip
+    [label]="institution"
+    removeIcon="fas fa-close"
+    removable
+    (onRemove)="clearFilter(FilterType.Institution)"
+  ></p-chip>
 }
 
 @if (filters().provider.value) {
   @let provider = filters().provider.filterName + ': ' + filters().provider.label;
-  <p-chip [label]="provider" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.Provider)"
-        (keydown.enter)="clearFilter(FilterType.Provider)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip [label]="provider" removeIcon="fas fa-close" removable (onRemove)="clearFilter(FilterType.Provider)"></p-chip>
 }
 
 @if (filters().partOfCollection.value) {
   @let partOfCollection = filters().partOfCollection.filterName + ': ' + filters().partOfCollection.label;
-  <p-chip [label]="partOfCollection" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.PartOfCollection)"
-        (keydown.enter)="clearFilter(FilterType.PartOfCollection)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip
+    [label]="partOfCollection"
+    removeIcon="fas fa-close"
+    removable
+    (onRemove)="clearFilter(FilterType.PartOfCollection)"
+  ></p-chip>
 }
diff --git a/src/app/features/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.ts b/src/app/features/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.ts
index 0d0136a57..64f3e0588 100644
--- a/src/app/features/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.ts
+++ b/src/app/features/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.ts
@@ -1,6 +1,5 @@
 import { Store } from '@ngxs/store';
 
-import { PrimeTemplate } from 'primeng/api';
 import { Chip } from 'primeng/chip';
 
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
@@ -23,7 +22,7 @@ import {
 
 @Component({
   selector: 'osf-my-profile-filter-chips',
-  imports: [Chip, PrimeTemplate],
+  imports: [Chip],
   templateUrl: './my-profile-filter-chips.component.html',
   styleUrl: './my-profile-filter-chips.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.html b/src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.html
index 70aa971f4..1daff2552 100644
--- a/src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.html
+++ b/src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.html
@@ -88,58 +88,28 @@ <h3>Sort by:</h3>
               <osf-resource-card [item]="item" />
             }
 
-            <div class="flex column-gap-4 w-full justify-content-center pt-5">
+            <div class="flex column-gap-2 w-full justify-content-center pt-2">
               @if (first() && prev()) {
-                <svg
-                  width="13"
-                  height="13"
-                  tabindex="0"
-                  role="button"
-                  viewBox="0 0 10 10"
-                  class="switch-icon"
-                  (click)="switchPage(first())"
-                  (keydown.enter)="switchPage(first())"
-                >
-                  <path
-                    d="M7.6875 0.193231C7.925 -0.0124607 8.2575 -0.0593271 8.54 0.0786686C8.8225 0.216664 9 0.510881 9 0.833739L9 9.16555C9 9.48841 8.82 9.78262 8.54 9.92062C8.26 10.0586 7.9275 10.0144 7.6875 9.80606L2.8875 5.64015L2.6 5.3902L2.6 9.16555C2.6 9.6264 2.2425 9.99873 1.8 9.99873C1.3575 9.99873 1 9.6264 1 9.16555L1 0.833739C1 0.372886 1.3575 0.000557899 1.8 0.000557899C2.2425 0.000557899 2.6 0.372886 2.6 0.833739L2.6 4.60909L2.8875 4.35914L7.6875 0.193231Z"
-                    fill="#8B97A4"
-                  />
-                </svg>
+                <p-button icon="fas fa-angles-left" severity="contrast" text (click)="switchPage(first())"> </p-button>
               }
 
-              <svg
-                [class]="{ 'icon-disabled': !prev(), 'icon-active': prev() }"
-                tabindex="0"
-                role="button"
-                width="13"
-                height="13"
-                viewBox="0 0 10 10"
-                class="switch-icon"
+              <p-button
+                icon="fas fa-angle-left"
+                severity="contrast"
+                text
+                [disabled]="!prev()"
                 (click)="switchPage(prev())"
-                (keydown.enter)="switchPage(prev())"
               >
-                <path
-                  d="M2.29285 4.2937C1.90238 4.68416 1.90238 5.31827 2.29285 5.70873L6.29129 9.70707C6.57868 9.99445 7.00664 10.0788 7.38149 9.9226C7.75635 9.76642 8 9.40407 8 8.99799L8 1.00132C8 0.598365 7.75635 0.232892 7.38149 0.0767078C7.00664 -0.0794773 6.57868 0.00798607 6.29129 0.292242L2.29285 4.29058V4.2937Z"
-                  fill="#8B97A4"
-                />
-              </svg>
+              </p-button>
 
-              <svg
-                [class]="{ 'icon-disabled': !next(), 'icon-active': next() }"
-                tabindex="0"
-                role="button"
-                width="13"
-                height="13"
-                viewBox="0 0 10 10"
-                class="switch-icon"
+              <p-button
+                icon="fas fa-angle-right"
+                severity="contrast"
+                text
+                [disabled]="!next()"
                 (click)="switchPage(!next() ? first() : next())"
-                (keydown.enter)="switchPage(!next() ? first() : next())"
               >
-                <path
-                  d="M7.70715 5.7063C8.09762 5.31584 8.09762 4.68173 7.70715 4.29127L3.70871 0.292933C3.42132 0.00555328 2.99336 -0.0787866 2.61851 0.0773983C2.24365 0.233583 2 0.595932 2 1.00201V8.99868C2 9.40164 2.24365 9.76711 2.61851 9.92329C2.99336 10.0795 3.42132 9.99201 3.70871 9.70776L7.70715 5.70942V5.7063Z"
-                  fill="#8B97A4"
-                />
-              </svg>
+              </p-button>
             </div>
           }
         </div>
diff --git a/src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.ts b/src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.ts
index 1ac8619b9..da02d9ede 100644
--- a/src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.ts
+++ b/src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.ts
@@ -1,5 +1,6 @@
 import { Store } from '@ngxs/store';
 
+import { Button } from 'primeng/button';
 import { DataView } from 'primeng/dataview';
 import { Select } from 'primeng/select';
 
@@ -28,6 +29,7 @@ import { MyProfileResourceFiltersSelectors } from '../my-profile-resource-filter
     Select,
     FormsModule,
     ResourceCardComponent,
+    Button,
   ],
   templateUrl: './my-profile-resources.component.html',
   styleUrl: './my-profile-resources.component.scss',
diff --git a/src/app/features/preprints/components/preprints-filter-chips/preprints-filter-chips.component.html b/src/app/features/preprints/components/preprints-filter-chips/preprints-filter-chips.component.html
index 1626a7853..d11232584 100644
--- a/src/app/features/preprints/components/preprints-filter-chips/preprints-filter-chips.component.html
+++ b/src/app/features/preprints/components/preprints-filter-chips/preprints-filter-chips.component.html
@@ -1,74 +1,24 @@
 @if (filters().creator.value) {
   @let creator = filters().creator.filterName + ': ' + filters().creator.label;
-  <p-chip [label]="creator" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.Creator)"
-        (keydown.enter)="clearFilter(FilterType.Creator)"
-      ></i>
-    </ng-template>
-  </p-chip>
-}
-
-@if (filters().dateCreated.value) {
-  @let dateCreated = filters().dateCreated.filterName + ': ' + filters().dateCreated.label;
-  <p-chip [label]="dateCreated" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.DateCreated)"
-        (keydown.enter)="clearFilter(FilterType.DateCreated)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip [label]="creator" removeIcon="fas fa-close" removable (onRemove)="clearFilter(FilterType.Creator)"></p-chip>
 }
 
 @if (filters().subject.value) {
   @let subject = filters().subject.filterName + ': ' + filters().subject.label;
-  <p-chip [label]="subject" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.Subject)"
-        (keydown.enter)="clearFilter(FilterType.Subject)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip [label]="subject" removeIcon="fas fa-close" removable (onRemove)="clearFilter(FilterType.Subject)"></p-chip>
 }
 
 @if (filters().license.value) {
   @let license = filters().license.filterName + ': ' + filters().license.label;
-  <p-chip [label]="license" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.License)"
-        (keydown.enter)="clearFilter(FilterType.License)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip [label]="license" removeIcon="fas fa-close" removable (onRemove)="clearFilter(FilterType.License)"></p-chip>
 }
 
 @if (filters().institution.value) {
   @let institution = filters().institution.filterName + ': ' + filters().institution.label;
-  <p-chip [label]="institution" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.Institution)"
-        (keydown.enter)="clearFilter(FilterType.Institution)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip
+    [label]="institution"
+    removeIcon="fas fa-close"
+    removable
+    (onRemove)="clearFilter(FilterType.Institution)"
+  ></p-chip>
 }
diff --git a/src/app/features/preprints/components/preprints-filter-chips/preprints-filter-chips.component.ts b/src/app/features/preprints/components/preprints-filter-chips/preprints-filter-chips.component.ts
index f9461b526..a0a880991 100644
--- a/src/app/features/preprints/components/preprints-filter-chips/preprints-filter-chips.component.ts
+++ b/src/app/features/preprints/components/preprints-filter-chips/preprints-filter-chips.component.ts
@@ -1,6 +1,5 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
-import { PrimeTemplate } from 'primeng/api';
 import { Chip } from 'primeng/chip';
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
@@ -18,7 +17,7 @@ import { FilterType } from '@osf/shared/enums';
 
 @Component({
   selector: 'osf-preprints-filter-chips',
-  imports: [Chip, PrimeTemplate],
+  imports: [Chip],
   templateUrl: './preprints-filter-chips.component.html',
   styleUrl: './preprints-filter-chips.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/app/features/preprints/components/preprints-resources/preprints-resources.component.html b/src/app/features/preprints/components/preprints-resources/preprints-resources.component.html
index 98a51588a..e90f3badd 100644
--- a/src/app/features/preprints/components/preprints-resources/preprints-resources.component.html
+++ b/src/app/features/preprints/components/preprints-resources/preprints-resources.component.html
@@ -85,58 +85,29 @@ <h4>Sort by:</h4>
                 <osf-resource-card [item]="item" />
               }
 
-              <div class="flex column-gap-4 w-full justify-content-center pt-5">
+              <div class="flex column-gap-2 w-full justify-content-center pt-2">
                 @if (first() && prev()) {
-                  <svg
-                    width="13"
-                    height="13"
-                    tabindex="0"
-                    role="button"
-                    viewBox="0 0 10 10"
-                    class="cursor-pointer"
-                    (click)="switchPage(first())"
-                    (keydown.enter)="switchPage(first())"
-                  >
-                    <path
-                      d="M7.6875 0.193231C7.925 -0.0124607 8.2575 -0.0593271 8.54 0.0786686C8.8225 0.216664 9 0.510881 9 0.833739L9 9.16555C9 9.48841 8.82 9.78262 8.54 9.92062C8.26 10.0586 7.9275 10.0144 7.6875 9.80606L2.8875 5.64015L2.6 5.3902L2.6 9.16555C2.6 9.6264 2.2425 9.99873 1.8 9.99873C1.3575 9.99873 1 9.6264 1 9.16555L1 0.833739C1 0.372886 1.3575 0.000557899 1.8 0.000557899C2.2425 0.000557899 2.6 0.372886 2.6 0.833739L2.6 4.60909L2.8875 4.35914L7.6875 0.193231Z"
-                      fill="#8B97A4"
-                    />
-                  </svg>
+                  <p-button icon="fas fa-angles-left" severity="contrast" text (click)="switchPage(first())">
+                  </p-button>
                 }
 
-                <svg
-                  [class]="{ 'icon-disabled': !prev(), 'icon-active': prev() }"
-                  tabindex="0"
-                  role="button"
-                  width="13"
-                  height="13"
-                  viewBox="0 0 10 10"
-                  class="cursor-pointer"
+                <p-button
+                  icon="fas fa-angle-left"
+                  severity="contrast"
+                  text
+                  [disabled]="!prev()"
                   (click)="switchPage(prev())"
-                  (keydown.enter)="switchPage(prev())"
                 >
-                  <path
-                    d="M2.29285 4.2937C1.90238 4.68416 1.90238 5.31827 2.29285 5.70873L6.29129 9.70707C6.57868 9.99445 7.00664 10.0788 7.38149 9.9226C7.75635 9.76642 8 9.40407 8 8.99799L8 1.00132C8 0.598365 7.75635 0.232892 7.38149 0.0767078C7.00664 -0.0794773 6.57868 0.00798607 6.29129 0.292242L2.29285 4.29058V4.2937Z"
-                    fill="#8B97A4"
-                  />
-                </svg>
+                </p-button>
 
-                <svg
-                  [class]="{ 'icon-disabled': !next(), 'icon-active': next() }"
-                  tabindex="0"
-                  role="button"
-                  width="13"
-                  height="13"
-                  viewBox="0 0 10 10"
-                  class="cursor-pointer"
+                <p-button
+                  icon="fas fa-angle-right"
+                  severity="contrast"
+                  text
+                  [disabled]="!next()"
                   (click)="switchPage(!next() ? first() : next())"
-                  (keydown.enter)="switchPage(!next() ? first() : next())"
                 >
-                  <path
-                    d="M7.70715 5.7063C8.09762 5.31584 8.09762 4.68173 7.70715 4.29127L3.70871 0.292933C3.42132 0.00555328 2.99336 -0.0787866 2.61851 0.0773983C2.24365 0.233583 2 0.595932 2 1.00201V8.99868C2 9.40164 2.24365 9.76711 2.61851 9.92329C2.99336 10.0795 3.42132 9.99201 3.70871 9.70776L7.70715 5.70942V5.7063Z"
-                    fill="#8B97A4"
-                  />
-                </svg>
+                </p-button>
               </div>
             }
           </div>
diff --git a/src/app/features/preprints/components/preprints-resources/preprints-resources.component.ts b/src/app/features/preprints/components/preprints-resources/preprints-resources.component.ts
index 1d3b7d4c6..e4e68b74b 100644
--- a/src/app/features/preprints/components/preprints-resources/preprints-resources.component.ts
+++ b/src/app/features/preprints/components/preprints-resources/preprints-resources.component.ts
@@ -1,5 +1,6 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
+import { Button } from 'primeng/button';
 import { DataView } from 'primeng/dataview';
 import { Select } from 'primeng/select';
 
@@ -31,6 +32,7 @@ import { IS_WEB, IS_XSMALL } from '@shared/utils';
     PreprintsFilterChipsComponent,
     DataView,
     ResourceCardComponent,
+    Button,
   ],
   templateUrl: './preprints-resources.component.html',
   styleUrl: './preprints-resources.component.scss',
diff --git a/src/app/features/search/components/filter-chips/filter-chips.component.html b/src/app/features/search/components/filter-chips/filter-chips.component.html
index b55a1cba0..7d7cb94a7 100644
--- a/src/app/features/search/components/filter-chips/filter-chips.component.html
+++ b/src/app/features/search/components/filter-chips/filter-chips.component.html
@@ -1,134 +1,65 @@
 @if (filters().creator.value && !isMyProfilePage()) {
   @let creator = filters().creator.filterName + ': ' + filters().creator.label;
-  <p-chip [label]="creator" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.Creator)"
-        (keydown.enter)="clearFilter(FilterType.Creator)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip [label]="creator" removeIcon="fas fa-close" removable (onRemove)="clearFilter(FilterType.Creator)"></p-chip>
 }
 
 @if (filters().dateCreated.value) {
   @let dateCreated = filters().dateCreated.filterName + ': ' + filters().dateCreated.label;
-  <p-chip [label]="dateCreated" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.DateCreated)"
-        (keydown.enter)="clearFilter(FilterType.DateCreated)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip
+    [label]="dateCreated"
+    removeIcon="fas fa-close"
+    removable
+    (onRemove)="clearFilter(FilterType.DateCreated)"
+  ></p-chip>
 }
 
 @if (filters().funder.value) {
   @let funder = filters().funder.filterName + ': ' + filters().funder.label;
-  <p-chip [label]="funder" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.Funder)"
-        (keydown.enter)="clearFilter(FilterType.Funder)"
-      ></i>
-    </ng-template>
-  </p-chip>
+
+  <p-chip [label]="funder" removeIcon="fas fa-close" removable (onRemove)="clearFilter(FilterType.Funder)"></p-chip>
 }
 
 @if (filters().subject.value) {
   @let subject = filters().subject.filterName + ': ' + filters().subject.label;
-  <p-chip [label]="subject" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.Subject)"
-        (keydown.enter)="clearFilter(FilterType.Subject)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip [label]="subject" removeIcon="fas fa-close" removable (onRemove)="clearFilter(FilterType.Subject)"></p-chip>
 }
 
 @if (filters().license.value) {
   @let license = filters().license.filterName + ': ' + filters().license.label;
-  <p-chip [label]="license" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.License)"
-        (keydown.enter)="clearFilter(FilterType.License)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip [label]="license" removeIcon="fas fa-close" removable (onRemove)="clearFilter(FilterType.License)"></p-chip>
 }
 
 @if (filters().resourceType.value) {
   @let resourceType = filters().resourceType.filterName + ': ' + filters().resourceType.label;
-  <p-chip [label]="resourceType" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.ResourceType)"
-        (keydown.enter)="clearFilter(FilterType.ResourceType)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip
+    [label]="resourceType"
+    removeIcon="fas fa-close"
+    removable
+    (onRemove)="clearFilter(FilterType.ResourceType)"
+  ></p-chip>
 }
 
 @if (filters().institution.value) {
   @let institution = filters().institution.filterName + ': ' + filters().institution.label;
-  <p-chip [label]="institution" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.Institution)"
-        (keydown.enter)="clearFilter(FilterType.Institution)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip
+    [label]="institution"
+    removeIcon="fas fa-close"
+    removable
+    (onRemove)="clearFilter(FilterType.Institution)"
+  ></p-chip>
 }
 
 @if (filters().provider.value) {
   @let provider = filters().provider.filterName + ': ' + filters().provider.label;
-  <p-chip [label]="provider" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.Provider)"
-        (keydown.enter)="clearFilter(FilterType.Provider)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip [label]="provider" removeIcon="fas fa-close" removable (onRemove)="clearFilter(FilterType.Provider)"></p-chip>
 }
 
 @if (filters().partOfCollection.value) {
   @let partOfCollection = filters().partOfCollection.filterName + ': ' + filters().partOfCollection.label;
-  <p-chip [label]="partOfCollection" [removable]="true">
-    <ng-template pTemplate="removeicon">
-      <i
-        class="osf-icon-close text-xs font-bold text-align-center"
-        tabindex="0"
-        role="button"
-        (click)="clearFilter(FilterType.PartOfCollection)"
-        (keydown.enter)="clearFilter(FilterType.PartOfCollection)"
-      ></i>
-    </ng-template>
-  </p-chip>
+  <p-chip
+    [label]="partOfCollection"
+    removeIcon="fas fa-close"
+    removable
+    (onRemove)="clearFilter(FilterType.PartOfCollection)"
+  ></p-chip>
 }
diff --git a/src/app/features/search/components/filter-chips/filter-chips.component.ts b/src/app/features/search/components/filter-chips/filter-chips.component.ts
index 4038543ca..1f73dedfd 100644
--- a/src/app/features/search/components/filter-chips/filter-chips.component.ts
+++ b/src/app/features/search/components/filter-chips/filter-chips.component.ts
@@ -1,6 +1,5 @@
 import { Store } from '@ngxs/store';
 
-import { PrimeTemplate } from 'primeng/api';
 import { Chip } from 'primeng/chip';
 
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
@@ -24,7 +23,7 @@ import {
 
 @Component({
   selector: 'osf-filter-chips',
-  imports: [Chip, PrimeTemplate],
+  imports: [Chip],
   templateUrl: './filter-chips.component.html',
   styleUrl: './filter-chips.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/app/features/search/components/resources/resources.component.html b/src/app/features/search/components/resources/resources.component.html
index 9a28361e3..3bc257cb5 100644
--- a/src/app/features/search/components/resources/resources.component.html
+++ b/src/app/features/search/components/resources/resources.component.html
@@ -89,58 +89,28 @@ <h3>Sort by:</h3>
               <osf-resource-card [item]="item" />
             }
 
-            <div class="flex column-gap-4 w-full justify-content-center pt-5">
+            <div class="flex column-gap-2 w-full justify-content-center pt-2">
               @if (first() && prev()) {
-                <svg
-                  width="13"
-                  height="13"
-                  tabindex="0"
-                  role="button"
-                  viewBox="0 0 10 10"
-                  class="switch-icon custom-dark-hover"
-                  (click)="switchPage(first())"
-                  (keydown.enter)="switchPage(first())"
-                >
-                  <path
-                    d="M7.6875 0.193231C7.925 -0.0124607 8.2575 -0.0593271 8.54 0.0786686C8.8225 0.216664 9 0.510881 9 0.833739L9 9.16555C9 9.48841 8.82 9.78262 8.54 9.92062C8.26 10.0586 7.9275 10.0144 7.6875 9.80606L2.8875 5.64015L2.6 5.3902L2.6 9.16555C2.6 9.6264 2.2425 9.99873 1.8 9.99873C1.3575 9.99873 1 9.6264 1 9.16555L1 0.833739C1 0.372886 1.3575 0.000557899 1.8 0.000557899C2.2425 0.000557899 2.6 0.372886 2.6 0.833739L2.6 4.60909L2.8875 4.35914L7.6875 0.193231Z"
-                    fill="#8B97A4"
-                  />
-                </svg>
+                <p-button icon="fas fa-angles-left" severity="contrast" text (click)="switchPage(first())"> </p-button>
               }
 
-              <svg
-                [class]="{ 'icon-disabled': !prev(), 'icon-active': prev() }"
-                tabindex="0"
-                role="button"
-                width="13"
-                height="13"
-                viewBox="0 0 10 10"
-                class="switch-icon"
+              <p-button
+                icon="fas fa-angle-left"
+                severity="contrast"
+                text
+                [disabled]="!prev()"
                 (click)="switchPage(prev())"
-                (keydown.enter)="switchPage(prev())"
               >
-                <path
-                  d="M2.29285 4.2937C1.90238 4.68416 1.90238 5.31827 2.29285 5.70873L6.29129 9.70707C6.57868 9.99445 7.00664 10.0788 7.38149 9.9226C7.75635 9.76642 8 9.40407 8 8.99799L8 1.00132C8 0.598365 7.75635 0.232892 7.38149 0.0767078C7.00664 -0.0794773 6.57868 0.00798607 6.29129 0.292242L2.29285 4.29058V4.2937Z"
-                  fill="#8B97A4"
-                />
-              </svg>
+              </p-button>
 
-              <svg
-                [class]="{ 'icon-disabled': !next(), 'icon-active': next() }"
-                tabindex="0"
-                role="button"
-                width="13"
-                height="13"
-                viewBox="0 0 10 10"
-                class="switch-icon"
+              <p-button
+                icon="fas fa-angle-right"
+                severity="contrast"
+                text
+                [disabled]="!next()"
                 (click)="switchPage(!next() ? first() : next())"
-                (keydown.enter)="switchPage(!next() ? first() : next())"
               >
-                <path
-                  d="M7.70715 5.7063C8.09762 5.31584 8.09762 4.68173 7.70715 4.29127L3.70871 0.292933C3.42132 0.00555328 2.99336 -0.0787866 2.61851 0.0773983C2.24365 0.233583 2 0.595932 2 1.00201V8.99868C2 9.40164 2.24365 9.76711 2.61851 9.92329C2.99336 10.0795 3.42132 9.99201 3.70871 9.70776L7.70715 5.70942V5.7063Z"
-                  fill="#8B97A4"
-                />
-              </svg>
+              </p-button>
             </div>
           }
         </div>
diff --git a/src/app/features/search/components/resources/resources.component.ts b/src/app/features/search/components/resources/resources.component.ts
index a5f310593..08b81b172 100644
--- a/src/app/features/search/components/resources/resources.component.ts
+++ b/src/app/features/search/components/resources/resources.component.ts
@@ -2,6 +2,7 @@ import { Store } from '@ngxs/store';
 
 import { AccordionModule } from 'primeng/accordion';
 import { AutoCompleteModule } from 'primeng/autocomplete';
+import { Button } from 'primeng/button';
 import { DataViewModule } from 'primeng/dataview';
 import { Select } from 'primeng/select';
 import { TableModule } from 'primeng/table';
@@ -35,6 +36,7 @@ import { ResourceFiltersSelectors } from '../resource-filters/store';
     Select,
     NgOptimizedImage,
     ResourceCardComponent,
+    Button,
   ],
   templateUrl: './resources.component.html',
   styleUrl: './resources.component.scss',
diff --git a/src/assets/styles/_base.scss b/src/assets/styles/_base.scss
index e76385c06..9f657d0ab 100644
--- a/src/assets/styles/_base.scss
+++ b/src/assets/styles/_base.scss
@@ -27,6 +27,7 @@
   i {
     @include mix.flex-center;
     font-size: mix.rem(16px);
+    outline: none;
   }
 
   h1 {
@@ -82,11 +83,6 @@
       display: block;
     }
   }
-
-  i,
-  svg {
-    outline: none;
-  }
 }
 
 @layer base {
diff --git a/src/assets/styles/overrides/chip.scss b/src/assets/styles/overrides/chip.scss
index bd5282d21..f2741562d 100644
--- a/src/assets/styles/overrides/chip.scss
+++ b/src/assets/styles/overrides/chip.scss
@@ -1,33 +1,34 @@
-@use "assets/styles/variables" as var;
-
 .p-chip {
-  height: fit-content;
-  width: fit-content;
-  background: var.$bg-blue-3;
-  border-radius: 4px;
-  padding: 4px 12px 4px 12px;
+  --p-chip-background: var(--bg-blue-3);
+  --p-chip-border-radius: 0.25rem;
+  --p-chip-color: var(--dark-blue-1);
+  --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;
+
+  &:has(.p-chip-remove-icon) {
+    padding-inline-end: var(--p-chip-padding-x);
+  }
 
   &:hover {
-    background: var.$bg-blue-2;
-    color: var.$pr-blue-3;
-    cursor: pointer;
+    --p-chip-background: var(--bg-blue-2);
+    --p-chip-color: var(--pr-blue-3);
 
-    i,
     .p-chip-remove-icon {
-      color: var.$pr-blue-1;
+      --p-chip-remove-icon-color: var(--pr-blue-1);
     }
   }
 
   .p-chip-label {
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.7rem;
+    line-height: 1.5rem;
   }
 
   .p-chip-remove-icon {
     display: flex;
     align-items: center;
-    margin-left: 12px;
+    margin-top: 2px;
   }
 }
 
diff --git a/src/assets/styles/overrides/confirmation-dialog.scss b/src/assets/styles/overrides/confirmation-dialog.scss
index 440afe4fa..22a2c7dd6 100644
--- a/src/assets/styles/overrides/confirmation-dialog.scss
+++ b/src/assets/styles/overrides/confirmation-dialog.scss
@@ -1,45 +1,26 @@
-@use "../variables" as var;
-@use "../mixins" as mix;
-
 .p-dialog-mask {
   z-index: 2103 !important;
 }
 
 .p-dialog {
-  min-height: mix.rem(224px);
-  width: mix.rem(550px);
-  margin: 1rem;
-
-  .p-dialog-header {
-    padding: 24px;
-
-    .p-dialog-header-actions {
-      .p-button {
-        padding-right: 0.2rem;
-      }
-    }
-
-    .p-dialog-title {
-      font-size: 18px;
-      font-weight: 700;
-      text-transform: capitalize;
-    }
-
-    &.ng-star-inserted {
-      p-button > button {
-        background: transparent;
-        color: var.$grey-1;
-      }
-    }
+  --p-dialog-header-padding: 1.5rem;
+  --p-button-text-secondary-color: var(--grey-1);
+  --p-button-text-secondary-hover-background: var(--grey-3);
+  --p-button-text-secondary-active-background: var(--grey-1);
+  --p-dialog-title-font-size: 1.125rem;
+  --p-dialog-title-font-weight: 700;
+  --p-dialog-content-padding: 0 1.5rem 1.5rem;
+  --p-dialog-footer-padding: 0 1.5rem 1.5rem;
+
+  .p-dialog-title {
+    text-transform: capitalize;
   }
 
   .p-dialog-content {
-    padding: 0 24px 24px;
     align-items: start;
   }
 
   .p-dialog-footer {
-    padding: 0 24px 24px;
     justify-content: center;
 
     p-button {
@@ -56,18 +37,10 @@
   }
 }
 
-.p-dialog-align-center {
-  .p-dialog {
-    .p-dialog-content {
-      align-items: center;
-    }
-  }
+.p-dialog-align-center .p-dialog .p-dialog-content {
+  align-items: center;
 }
 
-.p-dialog-overflow-visible {
-  .p-dialog {
-    .p-dialog-content {
-      overflow-y: visible;
-    }
-  }
+.p-dialog-overflow-visible .p-dialog .p-dialog-content {
+  overflow-y: visible;
 }