diff --git a/src/app/features/files/components/create-folder-dialog/create-folder-dialog.component.html b/src/app/features/files/components/create-folder-dialog/create-folder-dialog.component.html
index cbeb82b17..0ca1b259b 100644
--- a/src/app/features/files/components/create-folder-dialog/create-folder-dialog.component.html
+++ b/src/app/features/files/components/create-folder-dialog/create-folder-dialog.component.html
@@ -11,10 +11,9 @@
 
     <div class="flex justify-content-end gap-2">
       <p-button
-        type="button"
         severity="secondary"
         [label]="'common.buttons.cancel' | translate"
-        (click)="dialogRef.close()"
+        (onClick)="dialogRef.close()"
       ></p-button>
       <p-button type="submit" [label]="'common.buttons.create' | translate" [disabled]="!folderForm.valid"></p-button>
     </div>
diff --git a/src/app/features/files/components/edit-file-metadata-dialog/edit-file-metadata-dialog.component.html b/src/app/features/files/components/edit-file-metadata-dialog/edit-file-metadata-dialog.component.html
index 7d1ac831c..3916e08d1 100644
--- a/src/app/features/files/components/edit-file-metadata-dialog/edit-file-metadata-dialog.component.html
+++ b/src/app/features/files/components/edit-file-metadata-dialog/edit-file-metadata-dialog.component.html
@@ -39,13 +39,7 @@
   </div>
 
   <div class="flex btn-full-width gap-2 mt-4">
-    <p-button
-      [label]="'common.buttons.cancel' | translate"
-      severity="info"
-      class="w-full"
-      (click)="cancel()"
-      type="button"
-    />
+    <p-button [label]="'common.buttons.cancel' | translate" severity="info" class="w-full" (onClick)="cancel()" />
     <p-button
       [label]="'common.buttons.save' | translate"
       class="w-full"
diff --git a/src/app/features/files/components/file-keywords/file-keywords.component.html b/src/app/features/files/components/file-keywords/file-keywords.component.html
index 531240f29..495d7d9e5 100644
--- a/src/app/features/files/components/file-keywords/file-keywords.component.html
+++ b/src/app/features/files/components/file-keywords/file-keywords.component.html
@@ -6,7 +6,7 @@ <h2>{{ 'files.detail.keywords.title' | translate }}</h2>
 
     <p-button
       [label]="'common.buttons.add' | translate"
-      (click)="addTag()"
+      (onClick)="addTag()"
       [disabled]="isTagsLoading() || keywordControl.invalid"
     >
     </p-button>
diff --git a/src/app/features/files/components/file-metadata/file-metadata.component.html b/src/app/features/files/components/file-metadata/file-metadata.component.html
index e6038fa22..581576b68 100644
--- a/src/app/features/files/components/file-metadata/file-metadata.component.html
+++ b/src/app/features/files/components/file-metadata/file-metadata.component.html
@@ -3,13 +3,11 @@
     <h2>{{ 'files.detail.fileMetadata.title' | translate }}</h2>
 
     <div class="flex gap-2">
-      <p-button severity="secondary" (click)="downloadFileMetadata()">
-        <i class="fas fa-download p-1"></i>
-      </p-button>
+      <p-button severity="secondary" icon="fas fa-download" (click)="downloadFileMetadata()" />
 
       <p-button
         severity="secondary"
-        (click)="openEditFileMetadataDialog()"
+        (onClick)="openEditFileMetadataDialog()"
         [label]="'files.detail.fileMetadata.edit' | translate"
       ></p-button>
     </div>
diff --git a/src/app/features/files/components/file-revisions/file-revisions.component.html b/src/app/features/files/components/file-revisions/file-revisions.component.html
index b67282be0..c1d7baacf 100644
--- a/src/app/features/files/components/file-revisions/file-revisions.component.html
+++ b/src/app/features/files/components/file-revisions/file-revisions.component.html
@@ -46,7 +46,7 @@ <h2>{{ 'files.detail.revisions.title' | translate }}</h2>
                   icon="fas fa-download"
                   variant="text"
                   [label]="'files.detail.revisions.actions.download' | translate"
-                  (click)="downloadRevision(item.version)"
+                  (onClick)="downloadRevision(item.version)"
                 ></p-button>
 
                 <p class="ml-auto mr-1">{{ item.downloads }}</p>
diff --git a/src/app/features/files/pages/community-metadata/community-metadata.component.html b/src/app/features/files/pages/community-metadata/community-metadata.component.html
deleted file mode 100644
index 6f2da09d0..000000000
--- a/src/app/features/files/pages/community-metadata/community-metadata.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<osf-sub-header title="File Name" />
-
-<!-- [KP] TODO: wait for cedar be done by Volodymyr -->
diff --git a/src/app/features/files/pages/community-metadata/community-metadata.component.scss b/src/app/features/files/pages/community-metadata/community-metadata.component.scss
deleted file mode 100644
index 5f81e6c60..000000000
--- a/src/app/features/files/pages/community-metadata/community-metadata.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  flex: 1;
-}
diff --git a/src/app/features/files/pages/community-metadata/community-metadata.component.spec.ts b/src/app/features/files/pages/community-metadata/community-metadata.component.spec.ts
deleted file mode 100644
index ef51d55f9..000000000
--- a/src/app/features/files/pages/community-metadata/community-metadata.component.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CommunityMetadataComponent } from './community-metadata.component';
-
-describe('CommunityMetadataComponent', () => {
-  let component: CommunityMetadataComponent;
-  let fixture: ComponentFixture<CommunityMetadataComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [CommunityMetadataComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(CommunityMetadataComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/features/files/pages/community-metadata/community-metadata.component.ts b/src/app/features/files/pages/community-metadata/community-metadata.component.ts
deleted file mode 100644
index a29325b53..000000000
--- a/src/app/features/files/pages/community-metadata/community-metadata.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-import { SubHeaderComponent } from '@shared/components';
-
-@Component({
-  selector: 'osf-community-metadata',
-  imports: [SubHeaderComponent],
-  templateUrl: './community-metadata.component.html',
-  styleUrl: './community-metadata.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class CommunityMetadataComponent {}
diff --git a/src/app/features/files/pages/file-detail/file-detail.component.html b/src/app/features/files/pages/file-detail/file-detail.component.html
index ab9fc18be..f20b65a42 100644
--- a/src/app/features/files/pages/file-detail/file-detail.component.html
+++ b/src/app/features/files/pages/file-detail/file-detail.component.html
@@ -27,15 +27,11 @@
       }
 
       @if (file()?.links?.download) {
-        <p-button severity="secondary" (click)="downloadFile(file()?.links?.download!)">
-          <i class="fas fa-download p-1"></i>
-        </p-button>
+        <p-button severity="secondary" icon="fas fa-download" (click)="downloadFile(file()?.links?.download!)" />
       }
       @if (file()?.links?.render) {
         <div class="relative">
-          <p-button severity="secondary" (click)="embedMenu.toggle($event)">
-            <i class="fas fa-file-import p-1"></i>
-          </p-button>
+          <p-button severity="secondary" icon="fas fa-file-import" (click)="embedMenu.toggle($event)" />
 
           <p-menu appendTo="body" [model]="embedItems" popup #embedMenu>
             <ng-template #item let-item>
@@ -46,9 +42,7 @@
       }
       @if (file()?.links?.html) {
         <div class="relative">
-          <p-button severity="secondary" (click)="shareMenu.toggle($event)">
-            <i class="fas fa-share-nodes p-1"></i>
-          </p-button>
+          <p-button severity="secondary" icon="fas fa-share-nodes" (click)="shareMenu.toggle($event)" />
 
           <p-menu appendTo="body" [model]="shareItems" popup #shareMenu>
             <ng-template #item let-item>
@@ -58,9 +52,7 @@
         </div>
       }
       @if (file() && !isAnonymous()) {
-        <p-button severity="danger" (click)="confirmDelete(file()!)">
-          <i class="fas fa-trash p-1"></i>
-        </p-button>
+        <p-button severity="danger" icon="fas fa-trash" (click)="confirmDelete(file()!)" />
       }
     </div>
   </div>
diff --git a/src/app/features/files/pages/files/files.component.scss b/src/app/features/files/pages/files/files.component.scss
index 59649a57b..c9be697b1 100644
--- a/src/app/features/files/pages/files/files.component.scss
+++ b/src/app/features/files/pages/files/files.component.scss
@@ -1,4 +1,3 @@
-@use "styles/variables" as var;
 @use "styles/mixins" as mix;
 
 :host {
@@ -8,7 +7,7 @@
 }
 
 .blue-text {
-  color: var.$pr-blue-1;
+  color: var(--pr-blue-1);
 }
 
 .filename {
diff --git a/src/app/features/metadata/components/cedar-template-form/cedar-template-form.component.html b/src/app/features/metadata/components/cedar-template-form/cedar-template-form.component.html
index 465feaaa0..b0b2971b5 100644
--- a/src/app/features/metadata/components/cedar-template-form/cedar-template-form.component.html
+++ b/src/app/features/metadata/components/cedar-template-form/cedar-template-form.component.html
@@ -1,7 +1,7 @@
 @if (template()) {
   <div class="cedar-template-form bg-white">
     @if (readonly()) {
-      <div class="flex justify-content-between p-4">
+      <div class="flex justify-content-between gap-4 p-4">
         @if (existingRecord()?.attributes?.is_published) {
           <h3 class="text-lg">{{ 'project.metadata.addMetadata.publishedText' | translate }}</h3>
         } @else {
diff --git a/src/app/features/metadata/components/cedar-template-form/cedar-template-form.component.ts b/src/app/features/metadata/components/cedar-template-form/cedar-template-form.component.ts
index 8261001a9..d55d895ed 100644
--- a/src/app/features/metadata/components/cedar-template-form/cedar-template-form.component.ts
+++ b/src/app/features/metadata/components/cedar-template-form/cedar-template-form.component.ts
@@ -20,6 +20,7 @@ import {
 import { CEDAR_CONFIG, CEDAR_VIEWER_CONFIG } from '@osf/features/metadata/constants';
 import { CedarMetadataHelper } from '@osf/features/metadata/helpers';
 import {
+  CedarEditorElement,
   CedarMetadataDataTemplateJsonApi,
   CedarMetadataRecordData,
   CedarRecordDataBinding,
@@ -27,14 +28,6 @@ import {
 
 import 'cedar-artifact-viewer';
 
-interface CedarEditorElement extends HTMLElement {
-  currentMetadata?: unknown;
-  instanceObject?: unknown;
-  dataQualityReport?: {
-    isValid: boolean;
-  };
-}
-
 @Component({
   selector: 'osf-cedar-template-form',
   imports: [CommonModule, Button, TranslatePipe],
diff --git a/src/app/features/metadata/models/cedar-editor-element.model.ts b/src/app/features/metadata/models/cedar-editor-element.model.ts
new file mode 100644
index 000000000..1bba87eac
--- /dev/null
+++ b/src/app/features/metadata/models/cedar-editor-element.model.ts
@@ -0,0 +1,7 @@
+export interface CedarEditorElement extends HTMLElement {
+  currentMetadata?: unknown;
+  instanceObject?: unknown;
+  dataQualityReport?: {
+    isValid: boolean;
+  };
+}
diff --git a/src/app/features/metadata/models/index.ts b/src/app/features/metadata/models/index.ts
index eea8ea80e..d8be253cc 100644
--- a/src/app/features/metadata/models/index.ts
+++ b/src/app/features/metadata/models/index.ts
@@ -1,3 +1,4 @@
+export * from './cedar-editor-element.model';
 export * from './cedar-metadata-template.model';
 export * from './description-result.model';
 export * from './funding-dialog.model';
diff --git a/src/app/features/metadata/pages/add-metadata/add-metadata.component.html b/src/app/features/metadata/pages/add-metadata/add-metadata.component.html
index 9bb0b4bb9..7fc6f84f4 100644
--- a/src/app/features/metadata/pages/add-metadata/add-metadata.component.html
+++ b/src/app/features/metadata/pages/add-metadata/add-metadata.component.html
@@ -13,16 +13,11 @@ <h2>{{ 'project.metadata.addMetadata.selectTemplate' | translate }}</h2>
           <div [innerHTML]="'project.metadata.addMetadata.cedarInfo' | translate"></div>
         </section>
 
-        <div class="flex gap-2 flex-wrap sm:gap-4">
+        <div class="flex gap-2 flex-wrap mt-4 sm:gap-4">
           @for (meta of cedarTemplates()?.data; track meta.id) {
             <div
-              class="flex flex-column gap-4 metadata border-1 grey-border-color border-round-xl p-4 align-items-center"
-              [class.cursor-pointer]="!hasExistingRecord(meta.id)"
-              [class.cursor-not-allowed]="hasExistingRecord(meta.id)"
-              (click)="onSelect(meta)"
-              (keydown.enter)="onSelect(meta)"
-              [tabindex]="hasExistingRecord(meta.id) ? -1 : 0"
-              role="button"
+              class="flex flex-column align-items-center gap-4 border-1 grey-border-color border-round-xl p-4"
+              [class.metadata-item]="isMedium()"
             >
               <div class="flex flex-row gap-4">
                 <h2>{{ meta.attributes.template.title }}</h2>
@@ -56,7 +51,7 @@ <h2>{{ meta.attributes.template.title }}</h2>
             class="w-10rem"
             [label]="'common.buttons.cancel' | translate"
             severity="info"
-            (click)="onCancel()"
+            (onClick)="onCancel()"
           ></p-button>
           @if (hasMultiplePages()) {
             <p-button
@@ -64,7 +59,7 @@ <h2>{{ meta.attributes.template.title }}</h2>
               class="w-10rem"
               [label]="'common.buttons.next' | translate"
               [disabled]="!hasNextPage()"
-              (click)="onNext()"
+              (onClick)="onNext()"
             ></p-button>
           }
         </div>
diff --git a/src/app/features/metadata/pages/add-metadata/add-metadata.component.scss b/src/app/features/metadata/pages/add-metadata/add-metadata.component.scss
index 75061e4f9..5cdc23e44 100644
--- a/src/app/features/metadata/pages/add-metadata/add-metadata.component.scss
+++ b/src/app/features/metadata/pages/add-metadata/add-metadata.component.scss
@@ -1,7 +1,3 @@
-.metadata {
+.metadata-item {
   flex-basis: calc(50% - 1.5rem);
-
-  @media (max-width: 576px) {
-    flex-basis: 100%;
-  }
 }
diff --git a/src/app/features/metadata/pages/add-metadata/add-metadata.component.ts b/src/app/features/metadata/pages/add-metadata/add-metadata.component.ts
index a78eac2ba..0c9b31a1f 100644
--- a/src/app/features/metadata/pages/add-metadata/add-metadata.component.ts
+++ b/src/app/features/metadata/pages/add-metadata/add-metadata.component.ts
@@ -15,10 +15,11 @@ import {
   OnInit,
   signal,
 } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { ResourceType } from '@osf/shared/enums';
+import { IS_MEDIUM } from '@osf/shared/helpers';
 import { LoadingSpinnerComponent, SubHeaderComponent } from '@shared/components';
 import { ToastService } from '@shared/services';
 
@@ -47,6 +48,8 @@ export class AddMetadataComponent implements OnInit {
   private readonly destroyRef = inject(DestroyRef);
   private readonly activatedRoute = inject(ActivatedRoute);
 
+  readonly isMedium = toSignal(inject(IS_MEDIUM));
+
   private resourceId = '';
   isEditMode = true;
   selectedTemplate: CedarMetadataDataTemplateJsonApi | null = null;
diff --git a/src/app/shared/components/metadata-tabs/metadata-tabs.component.html b/src/app/shared/components/metadata-tabs/metadata-tabs.component.html
index a0076119f..ab4d6984d 100644
--- a/src/app/shared/components/metadata-tabs/metadata-tabs.component.html
+++ b/src/app/shared/components/metadata-tabs/metadata-tabs.component.html
@@ -16,24 +16,22 @@
           @if (tab.id === 'osf') {
             <ng-content></ng-content>
           } @else {
-            <div class="p-3">
-              @if (selectedCedarTemplate() && selectedCedarRecord()) {
-                <osf-cedar-template-form
-                  [template]="selectedCedarTemplate()!"
-                  [existingRecord]="selectedCedarRecord()!"
-                  [readonly]="cedarFormReadonly()"
-                  [showEditButton]="true"
-                  (emitData)="onCedarFormSubmit($event)"
-                  (changeTemplate)="onCedarFormChangeTemplate()"
-                  (editMode)="onCedarFormEdit()"
-                />
-              } @else {
-                <div class="text-center py-8">
-                  <p class="text-lg mb-4">{{ 'project.metadata.addMetadata.loadingCedar' | translate }}</p>
-                  <p class="text-sm text-gray-600">{{ tab.label }}</p>
-                </div>
-              }
-            </div>
+            @if (selectedCedarTemplate() && selectedCedarRecord()) {
+              <osf-cedar-template-form
+                [template]="selectedCedarTemplate()!"
+                [existingRecord]="selectedCedarRecord()!"
+                [readonly]="cedarFormReadonly()"
+                [showEditButton]="true"
+                (emitData)="onCedarFormSubmit($event)"
+                (changeTemplate)="onCedarFormChangeTemplate()"
+                (editMode)="onCedarFormEdit()"
+              />
+            } @else {
+              <div class="text-center py-8">
+                <p class="text-lg mb-4">{{ 'project.metadata.addMetadata.loadingCedar' | translate }}</p>
+                <p class="text-sm text-gray-600">{{ tab.label }}</p>
+              </div>
+            }
           }
         </p-tabpanel>
       }