diff --git a/src/app/features/preprints/components/index.ts b/src/app/features/preprints/components/index.ts
index c22b6221a..9d0394975 100644
--- a/src/app/features/preprints/components/index.ts
+++ b/src/app/features/preprints/components/index.ts
@@ -5,6 +5,7 @@ export { GeneralInformationComponent } from './preprint-details/general-informat
 export { ModerationStatusBannerComponent } from './preprint-details/moderation-status-banner/moderation-status-banner.component';
 export { PreprintFileSectionComponent } from './preprint-details/preprint-file-section/preprint-file-section.component';
 export { PreprintMakeDecisionComponent } from './preprint-details/preprint-make-decision/preprint-make-decision.component';
+export { PreprintMetricsInfoComponent } from './preprint-details/preprint-metrics-info/preprint-metrics-info.component';
 export { PreprintTombstoneComponent } from './preprint-details/preprint-tombstone/preprint-tombstone.component';
 export { PreprintWarningBannerComponent } from './preprint-details/preprint-warning-banner/preprint-warning-banner.component';
 export { ShareAndDownloadComponent } from './preprint-details/share-and-download/share-and-download.component';
diff --git a/src/app/features/preprints/components/preprint-details/general-information/general-information.component.html b/src/app/features/preprints/components/preprint-details/general-information/general-information.component.html
index b0df7c2b1..1864e4d31 100644
--- a/src/app/features/preprints/components/preprint-details/general-information/general-information.component.html
+++ b/src/app/features/preprints/components/preprint-details/general-information/general-information.component.html
@@ -1,26 +1,8 @@
 <p-card>
   @if (preprint()) {
     @let preprintValue = preprint()!;
-    <div class="flex flex-column gap-4">
-      <section class="flex flex-column gap-2">
-        <h3>{{ 'preprints.preprintStepper.common.labels.abstract' | translate }}</h3>
-        <osf-truncated-text [maxVisibleLines]="2" [text]="preprintValue.description" />
-      </section>
-
-      @if (affiliatedInstitutions().length) {
-        <osf-affiliated-institutions-view [institutions]="affiliatedInstitutions()" />
-      }
-
-      @if (preprintValue.nodeId) {
-        <section class="flex flex-column gap-2">
-          <h3>{{ 'preprints.details.supplementalMaterials' | translate }}</h3>
-          <a class="font-bold flex gap-1" [href]="nodeLink()">
-            {{ nodeLink() }}
-            <osf-icon iconClass="fa fa-external-link-alt" />
-          </a>
-        </section>
-      }
 
+    <div class="flex flex-column gap-4">
       <section class="flex flex-column gap-2">
         <h3>{{ 'preprints.preprintStepper.review.sections.metadata.authors' | translate }}</h3>
 
@@ -33,17 +15,16 @@ <h3>{{ 'preprints.preprintStepper.review.sections.metadata.authors' | translate
         </div>
       </section>
 
-      @if (preprintProvider()?.assertionsEnabled) {
-        <section class="flex flex-column gap-2">
-          <h3>{{ 'preprints.preprintStepper.review.sections.authorAssertions.conflictOfInterest' | translate }}</h3>
+      <section class="flex flex-column gap-2">
+        <h3>{{ 'preprints.preprintStepper.common.labels.abstract' | translate }}</h3>
+        <osf-truncated-text [maxVisibleLines]="2" [text]="preprintValue.description" />
+      </section>
 
-          @if (preprintValue.hasCoi) {
-            {{ preprintValue.coiStatement }}
-          } @else {
-            <p>{{ 'preprints.preprintStepper.review.sections.authorAssertions.noCoi' | translate }}</p>
-          }
-        </section>
+      @if (affiliatedInstitutions().length) {
+        <osf-affiliated-institutions-view [institutions]="affiliatedInstitutions()" />
+      }
 
+      @if (preprintProvider()?.assertionsEnabled) {
         <section class="flex flex-column gap-2">
           <h3>{{ 'preprints.preprintStepper.review.sections.authorAssertions.publicData' | translate }}</h3>
 
@@ -104,6 +85,28 @@ <h3>
         </section>
       }
 
+      @if (preprintValue.nodeId) {
+        <section class="flex flex-column gap-2">
+          <h3>{{ 'preprints.details.supplementalMaterials' | translate }}</h3>
+          <a class="font-bold flex gap-1" [href]="nodeLink()">
+            {{ nodeLink() }}
+            <osf-icon iconClass="fa fa-external-link-alt" />
+          </a>
+        </section>
+      }
+
+      @if (preprintProvider()?.assertionsEnabled) {
+        <section class="flex flex-column gap-2">
+          <h3>{{ 'preprints.preprintStepper.review.sections.authorAssertions.conflictOfInterest' | translate }}</h3>
+
+          @if (preprintValue.hasCoi) {
+            {{ preprintValue.coiStatement }}
+          } @else {
+            <p>{{ 'preprints.preprintStepper.review.sections.authorAssertions.noCoi' | translate }}</p>
+          }
+        </section>
+      }
+
       <osf-preprint-doi-section
         [preprintProvider]="preprintProvider()"
         (preprintVersionSelected)="preprintVersionSelected.emit($event)"
diff --git a/src/app/features/preprints/components/preprint-details/general-information/general-information.component.ts b/src/app/features/preprints/components/preprint-details/general-information/general-information.component.ts
index c7fdf8ed9..c3cbfac6b 100644
--- a/src/app/features/preprints/components/preprint-details/general-information/general-information.component.ts
+++ b/src/app/features/preprints/components/preprint-details/general-information/general-information.component.ts
@@ -9,7 +9,6 @@ import { ChangeDetectionStrategy, Component, computed, effect, inject, input, On
 import { FormsModule } from '@angular/forms';
 
 import { ENVIRONMENT } from '@core/provider/environment.provider';
-import { PreprintDoiSectionComponent } from '@osf/features/preprints/components/preprint-details/preprint-doi-section/preprint-doi-section.component';
 import { ApplicabilityStatus, PreregLinkInfo } from '@osf/features/preprints/enums';
 import { PreprintProviderDetails } from '@osf/features/preprints/models';
 import { FetchPreprintById, PreprintSelectors } from '@osf/features/preprints/store/preprint';
@@ -18,10 +17,17 @@ import {
   ContributorsListComponent,
   IconComponent,
   TruncatedTextComponent,
-} from '@shared/components';
-import { ResourceType } from '@shared/enums';
-import { ContributorsSelectors, GetAllContributors, ResetContributorsState } from '@shared/stores';
-import { FetchResourceInstitutions, InstitutionsSelectors } from '@shared/stores/institutions';
+} from '@osf/shared/components';
+import { ResourceType } from '@osf/shared/enums';
+import {
+  ContributorsSelectors,
+  FetchResourceInstitutions,
+  GetAllContributors,
+  InstitutionsSelectors,
+  ResetContributorsState,
+} from '@osf/shared/stores';
+
+import { PreprintDoiSectionComponent } from '../preprint-doi-section/preprint-doi-section.component';
 
 @Component({
   selector: 'osf-preprint-general-information',
diff --git a/src/app/features/preprints/components/preprint-details/preprint-file-section/preprint-file-section.component.html b/src/app/features/preprints/components/preprint-details/preprint-file-section/preprint-file-section.component.html
index 5ee1164b7..121fc728a 100644
--- a/src/app/features/preprints/components/preprint-details/preprint-file-section/preprint-file-section.component.html
+++ b/src/app/features/preprints/components/preprint-details/preprint-file-section/preprint-file-section.component.html
@@ -1,15 +1,10 @@
-<section
-  class="p-card p-card-body card gap-4 file-section-height"
-  [class.medium]="isMedium()"
-  [class.large]="isLarge()"
-  [class.small]="!isMedium() && !isLarge()"
->
+<section class="p-card p-card-body card gap-4 flex flex-1 file-section-height">
   @if (safeLink()) {
     <iframe
       [src]="safeLink()"
       (load)="isIframeLoading = false"
       [hidden]="isIframeLoading"
-      title="Rendering of document"
+      [title]="'preprints.details.file.renderingDocument' | translate"
       allowfullscreen=""
       width="100%"
       class="flex-1 border-none"
diff --git a/src/app/features/preprints/components/preprint-details/preprint-file-section/preprint-file-section.component.scss b/src/app/features/preprints/components/preprint-details/preprint-file-section/preprint-file-section.component.scss
index 79989691e..c205f2091 100644
--- a/src/app/features/preprints/components/preprint-details/preprint-file-section/preprint-file-section.component.scss
+++ b/src/app/features/preprints/components/preprint-details/preprint-file-section/preprint-file-section.component.scss
@@ -1,13 +1,10 @@
+:host {
+  display: flex;
+  flex: 1;
+}
+
 .file-section-height {
   min-height: 400px;
-
-  &.medium {
-    min-height: 700px;
-  }
-
-  &.large {
-    min-height: 1100px;
-  }
 }
 
 .card {
diff --git a/src/app/features/preprints/components/preprint-details/preprint-file-section/preprint-file-section.component.ts b/src/app/features/preprints/components/preprint-details/preprint-file-section/preprint-file-section.component.ts
index 1190aa29e..31f55482a 100644
--- a/src/app/features/preprints/components/preprint-details/preprint-file-section/preprint-file-section.component.ts
+++ b/src/app/features/preprints/components/preprint-details/preprint-file-section/preprint-file-section.component.ts
@@ -13,9 +13,9 @@ import { DomSanitizer } from '@angular/platform-browser';
 
 import { ProviderReviewsWorkflow } from '@osf/features/preprints/enums';
 import { PreprintSelectors } from '@osf/features/preprints/store/preprint';
+import { LoadingSpinnerComponent } from '@osf/shared/components';
 import { IS_LARGE, IS_MEDIUM } from '@osf/shared/helpers';
-import { LoadingSpinnerComponent } from '@shared/components';
-import { DataciteService } from '@shared/services/datacite/datacite.service';
+import { DataciteService } from '@osf/shared/services/datacite/datacite.service';
 
 @Component({
   selector: 'osf-preprint-file-section',
diff --git a/src/app/features/preprints/components/preprint-details/preprint-metrics-info/preprint-metrics-info.component.html b/src/app/features/preprints/components/preprint-details/preprint-metrics-info/preprint-metrics-info.component.html
new file mode 100644
index 000000000..9f44a3f6b
--- /dev/null
+++ b/src/app/features/preprints/components/preprint-details/preprint-metrics-info/preprint-metrics-info.component.html
@@ -0,0 +1,9 @@
+<p-card>
+  @if (metrics()) {
+    <div class="flex flex-row gap-1 font-bold">
+      <span>{{ 'preprints.details.share.views' | translate }}: {{ metrics()!.views }}</span>
+      <span>|</span>
+      <span>{{ 'preprints.details.share.downloads' | translate }}: {{ metrics()!.downloads }}</span>
+    </div>
+  }
+</p-card>
diff --git a/src/app/features/preprints/components/preprint-details/preprint-metrics-info/preprint-metrics-info.component.scss b/src/app/features/preprints/components/preprint-details/preprint-metrics-info/preprint-metrics-info.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/preprints/components/preprint-details/preprint-metrics-info/preprint-metrics-info.component.spec.ts b/src/app/features/preprints/components/preprint-details/preprint-metrics-info/preprint-metrics-info.component.spec.ts
new file mode 100644
index 000000000..4b9034cc7
--- /dev/null
+++ b/src/app/features/preprints/components/preprint-details/preprint-metrics-info/preprint-metrics-info.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PreprintMetricsInfoComponent } from './preprint-metrics-info.component';
+
+describe('PreprintMetricsInfoComponent', () => {
+  let component: PreprintMetricsInfoComponent;
+  let fixture: ComponentFixture<PreprintMetricsInfoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PreprintMetricsInfoComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PreprintMetricsInfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/preprints/components/preprint-details/preprint-metrics-info/preprint-metrics-info.component.ts b/src/app/features/preprints/components/preprint-details/preprint-metrics-info/preprint-metrics-info.component.ts
new file mode 100644
index 000000000..c9e8219b9
--- /dev/null
+++ b/src/app/features/preprints/components/preprint-details/preprint-metrics-info/preprint-metrics-info.component.ts
@@ -0,0 +1,18 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Card } from 'primeng/card';
+
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+import { PreprintMetrics } from '@osf/features/preprints/models';
+
+@Component({
+  selector: 'osf-preprint-metrics-info',
+  imports: [Card, TranslatePipe],
+  templateUrl: './preprint-metrics-info.component.html',
+  styleUrl: './preprint-metrics-info.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PreprintMetricsInfoComponent {
+  metrics = input<PreprintMetrics>();
+}
diff --git a/src/app/features/preprints/components/preprint-details/share-and-download/share-and-download.component.html b/src/app/features/preprints/components/preprint-details/share-and-download/share-and-download.component.html
index 0c5b0319b..ad4b90756 100644
--- a/src/app/features/preprints/components/preprint-details/share-and-download/share-and-download.component.html
+++ b/src/app/features/preprints/components/preprint-details/share-and-download/share-and-download.component.html
@@ -1,77 +1,23 @@
-<p-card class="card">
-  <div class="flex flex-column gap-4">
-    <div class="flex flex-column justify-content-between gap-2 md:flex-row md:align-items-center">
-      @if (preprint() && preprintProvider()) {
-        <a pButton severity="secondary" [href]="downloadLink()" (click)="logDownload()">
-          {{
-            'preprints.details.share.downloadPreprint' | translate: { documentType: preprintProvider()?.preprintWord }
-          }}
-        </a>
-      }
+<div class="flex align-items-center gap-2">
+  <p-button
+    icon="fas fa-download text-2xl"
+    styleClass="px-4"
+    [pTooltip]="
+      'preprints.details.share.downloadPreprint' | translate: { documentType: preprintProvider()?.preprintWord }
+    "
+    tooltipPosition="bottom"
+    (onClick)="download()"
+    [attr.aria-label]="
+      'preprints.details.share.downloadPreprint' | translate: { documentType: preprintProvider()?.preprintWord }
+    "
+  />
 
-      @if (metrics()) {
-        <section class="flex flex-row gap-1 font-bold">
-          <span>{{ 'preprints.details.share.views' | translate }}: {{ metrics()!.views }}</span>
-          <span>|</span>
-          <span>{{ 'preprints.details.share.downloads' | translate }}: {{ metrics()!.downloads }}</span>
-        </section>
-      }
-
-      @if (isPreprintLoading()) {
-        <p-skeleton width="10rem" height="2.75rem" />
-        <p-skeleton width="15rem" height="2.75rem" />
-      }
-    </div>
-
-    <div class="flex flex-row justify-content-start gap-1">
-      <a
-        class="social-link flex align-items-center justify-content-center"
-        [href]="emailShareLink()"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <osf-icon [iconClass]="`fas fa-envelope fa-xl`" />
-      </a>
-      <a
-        class="social-link flex align-items-center justify-content-center"
-        [href]="twitterShareLink()"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <osf-icon [iconClass]="`fab fa-x-twitter fa-xl`" />
-      </a>
-      <a
-        class="social-link flex align-items-center justify-content-center"
-        [href]="facebookShareLink()"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <osf-icon [iconClass]="`fab fa-facebook-f fa-xl`" />
-      </a>
-      <a
-        class="social-link flex align-items-center justify-content-center"
-        [href]="linkedInShareLink()"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <osf-icon [iconClass]="`fab fa-linkedin-in fa-xl`" />
-      </a>
-      <a
-        class="social-link flex align-items-center justify-content-center"
-        [href]="mastodonShareLink()"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <osf-icon [iconClass]="`fab fa-mastodon fa-xl`" />
-      </a>
-      <a
-        class="social-link flex align-items-center justify-content-center"
-        [href]="blueskyShareLink()"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <osf-icon [iconClass]="`fab fa-bluesky fa-xl`" />
-      </a>
-    </div>
-  </div>
-</p-card>
+  @if (preprint() && preprintProvider()) {
+    <osf-socials-share-button
+      [resourceId]="preprint()!.id"
+      [resourceTitle]="preprint()!.title"
+      [resourceType]="resourceType"
+      [resourceProvider]="preprintProvider()!.id"
+    ></osf-socials-share-button>
+  }
+</div>
diff --git a/src/app/features/preprints/components/preprint-details/share-and-download/share-and-download.component.scss b/src/app/features/preprints/components/preprint-details/share-and-download/share-and-download.component.scss
index e4223887b..e69de29bb 100644
--- a/src/app/features/preprints/components/preprint-details/share-and-download/share-and-download.component.scss
+++ b/src/app/features/preprints/components/preprint-details/share-and-download/share-and-download.component.scss
@@ -1,22 +0,0 @@
-@use "styles/mixins" as mix;
-@use "styles/variables" as var;
-
-.social-link {
-  background-color: var(--pr-blue-1);
-  border-radius: mix.rem(8px);
-  color: var(--white);
-  padding: mix.rem(7px);
-  width: mix.rem(36px);
-  height: mix.rem(36px);
-
-  &:hover {
-    background-color: var(--pr-blue-3);
-    text-decoration: none;
-  }
-}
-
-.card {
-  @media (max-width: var.$breakpoint-sm) {
-    --p-card-body-padding: 0.75rem;
-  }
-}
diff --git a/src/app/features/preprints/components/preprint-details/share-and-download/share-and-download.component.spec.ts b/src/app/features/preprints/components/preprint-details/share-and-download/share-and-download.component.spec.ts
index 04311ebc6..0e11fe9c3 100644
--- a/src/app/features/preprints/components/preprint-details/share-and-download/share-and-download.component.spec.ts
+++ b/src/app/features/preprints/components/preprint-details/share-and-download/share-and-download.component.spec.ts
@@ -6,16 +6,13 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { PreprintProviderDetails } from '@osf/features/preprints/models';
 import { PreprintSelectors } from '@osf/features/preprints/store/preprint';
-import { IconComponent } from '@shared/components';
-import { SocialShareLinks } from '@shared/models';
-import { SocialShareService } from '@shared/services';
-import { DataciteService } from '@shared/services/datacite/datacite.service';
+import { SocialsShareButtonComponent } from '@osf/shared/components';
+import { DataciteService } from '@osf/shared/services/datacite/datacite.service';
 
 import { ShareAndDownloadComponent } from './share-and-download.component';
 
 import { PREPRINT_MOCK } from '@testing/mocks/preprint.mock';
 import { PREPRINT_PROVIDER_DETAILS_MOCK } from '@testing/mocks/preprint-provider-details';
-import { SOCIAL_SHARE_LINKS_MOCK } from '@testing/mocks/social-share-links.mock';
 import { TranslationServiceMock } from '@testing/mocks/translation.service.mock';
 import { OSFTestingModule } from '@testing/osf.testing.module';
 import { provideMockStore } from '@testing/providers/store-provider.mock';
@@ -24,39 +21,26 @@ describe('ShareAndDownloadComponent', () => {
   let component: ShareAndDownloadComponent;
   let fixture: ComponentFixture<ShareAndDownloadComponent>;
   let dataciteService: jest.Mocked<DataciteService>;
-  let socialShareService: jest.Mocked<SocialShareService>;
 
   const mockPreprint = PREPRINT_MOCK;
   const mockProvider: PreprintProviderDetails = PREPRINT_PROVIDER_DETAILS_MOCK;
-  const mockShareLinks: SocialShareLinks = SOCIAL_SHARE_LINKS_MOCK;
 
   beforeEach(async () => {
     dataciteService = {
       logIdentifiableDownload: jest.fn().mockReturnValue(of(void 0)),
     } as any;
 
-    socialShareService = {
-      createDownloadUrl: jest.fn().mockReturnValue('https://example.com/download/preprint-1'),
-      createPreprintUrl: jest.fn().mockReturnValue('https://example.com/preprint/preprint-1'),
-      generateAllSharingLinks: jest.fn().mockReturnValue(mockShareLinks),
-    } as any;
-
     await TestBed.configureTestingModule({
-      imports: [ShareAndDownloadComponent, OSFTestingModule, MockComponent(IconComponent)],
+      imports: [ShareAndDownloadComponent, OSFTestingModule, MockComponent(SocialsShareButtonComponent)],
       providers: [
         TranslationServiceMock,
         MockProvider(DataciteService, dataciteService),
-        MockProvider(SocialShareService, socialShareService),
         provideMockStore({
           signals: [
             {
               selector: PreprintSelectors.getPreprint,
               value: mockPreprint,
             },
-            {
-              selector: PreprintSelectors.isPreprintLoading,
-              value: false,
-            },
           ],
         }),
       ],
@@ -77,85 +61,6 @@ describe('ShareAndDownloadComponent', () => {
     expect(preprint).toBe(mockPreprint);
   });
 
-  it('should return preprint loading state from store', () => {
-    const loading = component.isPreprintLoading();
-    expect(loading).toBe(false);
-  });
-
-  it('should compute metrics from preprint', () => {
-    const metrics = component.metrics();
-    expect(metrics).toBe(mockPreprint.metrics);
-  });
-
-  it('should return null metrics when no preprint', () => {
-    jest.spyOn(component, 'preprint').mockReturnValue(null);
-    const metrics = component.metrics();
-    expect(metrics).toBeNull();
-  });
-
-  it('should compute download link from preprint', () => {
-    const downloadLink = component.downloadLink();
-    expect(downloadLink).toBe('https://example.com/download/preprint-1');
-    expect(socialShareService.createDownloadUrl).toHaveBeenCalledWith('preprint-1');
-  });
-
-  it('should return default download link when no preprint', () => {
-    jest.spyOn(component, 'preprint').mockReturnValue(null);
-    const downloadLink = component.downloadLink();
-    expect(downloadLink).toBe('#');
-  });
-
-  it('should return null shareable content when no preprint or provider', () => {
-    jest.spyOn(component, 'preprint').mockReturnValue(null);
-    const shareableContent = (component as any).shareableContent();
-    expect(shareableContent).toBeNull();
-  });
-
-  it('should compute share links from shareable content', () => {
-    const shareLinks = component.shareLinks();
-    expect(shareLinks).toBe(mockShareLinks);
-    expect(socialShareService.generateAllSharingLinks).toHaveBeenCalled();
-  });
-
-  it('should return null share links when no shareable content', () => {
-    jest.spyOn(component as any, 'shareableContent').mockReturnValue(null);
-    const shareLinks = component.shareLinks();
-    expect(shareLinks).toBeNull();
-  });
-
-  it('should compute email share link', () => {
-    const emailLink = component.emailShareLink();
-    expect(emailLink).toBe(mockShareLinks.email);
-  });
-
-  it('should compute twitter share link', () => {
-    const twitterLink = component.twitterShareLink();
-    expect(twitterLink).toBe(mockShareLinks.twitter);
-  });
-
-  it('should compute facebook share link', () => {
-    const facebookLink = component.facebookShareLink();
-    expect(facebookLink).toBe(mockShareLinks.facebook);
-  });
-
-  it('should compute linkedIn share link', () => {
-    const linkedInLink = component.linkedInShareLink();
-    expect(linkedInLink).toBe(mockShareLinks.linkedIn);
-  });
-
-  it('should return empty string for share links when no share links', () => {
-    jest.spyOn(component, 'shareLinks').mockReturnValue(null);
-    expect(component.emailShareLink()).toBe('');
-    expect(component.twitterShareLink()).toBe('');
-    expect(component.facebookShareLink()).toBe('');
-    expect(component.linkedInShareLink()).toBe('');
-  });
-
-  it('should call dataciteService.logIdentifiableDownload when logDownload is called', () => {
-    component.logDownload();
-    expect(dataciteService.logIdentifiableDownload).toHaveBeenCalledWith(component.preprint$);
-  });
-
   it('should handle preprint provider input', () => {
     const provider = component.preprintProvider();
     expect(provider).toBe(mockProvider);
diff --git a/src/app/features/preprints/components/preprint-details/share-and-download/share-and-download.component.ts b/src/app/features/preprints/components/preprint-details/share-and-download/share-and-download.component.ts
index cf4c4739d..5d4cd6374 100644
--- a/src/app/features/preprints/components/preprint-details/share-and-download/share-and-download.component.ts
+++ b/src/app/features/preprints/components/preprint-details/share-and-download/share-and-download.component.ts
@@ -2,23 +2,22 @@ import { select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
-import { ButtonDirective } from 'primeng/button';
-import { Card } from 'primeng/card';
-import { Skeleton } from 'primeng/skeleton';
+import { Button } from 'primeng/button';
+import { Tooltip } from 'primeng/tooltip';
 
-import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, inject, input } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 
 import { PreprintProviderDetails } from '@osf/features/preprints/models';
 import { PreprintSelectors } from '@osf/features/preprints/store/preprint';
-import { IconComponent } from '@shared/components';
-import { ShareableContent } from '@shared/models';
-import { SocialShareService } from '@shared/services';
-import { DataciteService } from '@shared/services/datacite/datacite.service';
+import { SocialsShareButtonComponent } from '@osf/shared/components';
+import { ResourceType } from '@osf/shared/enums';
+import { SocialShareService } from '@osf/shared/services';
+import { DataciteService } from '@osf/shared/services/datacite/datacite.service';
 
 @Component({
   selector: 'osf-preprint-share-and-download',
-  imports: [Card, IconComponent, Skeleton, ButtonDirective, TranslatePipe],
+  imports: [Button, SocialsShareButtonComponent, TranslatePipe, Tooltip],
   templateUrl: './share-and-download.component.html',
   styleUrl: './share-and-download.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -32,54 +31,18 @@ export class ShareAndDownloadComponent {
 
   preprint = select(PreprintSelectors.getPreprint);
   preprint$ = toObservable(this.preprint);
-  isPreprintLoading = select(PreprintSelectors.isPreprintLoading);
+  resourceType = ResourceType.Preprint;
 
-  metrics = computed(() => {
+  download() {
     const preprint = this.preprint();
 
-    if (!preprint) return null;
+    if (!preprint) {
+      return;
+    }
 
-    return preprint.metrics!;
-  });
+    const downloadLink = this.socialShareService.createDownloadUrl(preprint.id);
+    window.open(downloadLink)?.focus();
 
-  downloadLink = computed(() => {
-    const preprint = this.preprint();
-
-    if (!preprint) return '#';
-
-    return this.socialShareService.createDownloadUrl(preprint.id);
-  });
-
-  logDownload() {
     this.dataciteService.logIdentifiableDownload(this.preprint$).pipe(takeUntilDestroyed(this.destroyRef)).subscribe();
   }
-
-  private shareableContent = computed((): ShareableContent | null => {
-    const preprint = this.preprint();
-    const preprintProvider = this.preprintProvider();
-
-    if (!preprint || !preprintProvider) return null;
-
-    return {
-      id: preprint.id,
-      title: preprint.title,
-      description: preprint.description,
-      url: this.socialShareService.createPreprintUrl(preprint.id, preprintProvider.id),
-    };
-  });
-
-  shareLinks = computed(() => {
-    const content = this.shareableContent();
-
-    if (!content) return null;
-
-    return this.socialShareService.generateAllSharingLinks(content);
-  });
-
-  emailShareLink = computed(() => this.shareLinks()?.email || '');
-  twitterShareLink = computed(() => this.shareLinks()?.twitter || '');
-  facebookShareLink = computed(() => this.shareLinks()?.facebook || '');
-  linkedInShareLink = computed(() => this.shareLinks()?.linkedIn || '');
-  mastodonShareLink = computed(() => this.shareLinks()?.mastodon || '');
-  blueskyShareLink = computed(() => this.shareLinks()?.bluesky || '');
 }
diff --git a/src/app/features/preprints/pages/preprint-details/preprint-details.component.html b/src/app/features/preprints/pages/preprint-details/preprint-details.component.html
index 19110e3c9..38aaef76b 100644
--- a/src/app/features/preprints/pages/preprint-details/preprint-details.component.html
+++ b/src/app/features/preprints/pages/preprint-details/preprint-details.component.html
@@ -42,9 +42,11 @@ <h1>{{ preprint()?.title }}</h1>
 
     <div class="flex flex-column justify-content-end gap-2 md:flex-row">
       @if (isPreprintLoading() || isPreprintProviderLoading() || areContributorsLoading()) {
-        <p-skeleton width="10rem" height="2.25rem" />
-        <p-skeleton width="10rem" height="2.25rem" />
-        <p-skeleton width="10rem" height="2.25rem" />
+        <p-skeleton width="11rem" height="2.75rem" />
+        <p-skeleton width="11rem" height="2.75rem" />
+        <p-skeleton width="11rem" height="2.75rem" />
+        <p-skeleton width="3.125rem" height="2.75rem" />
+        <p-skeleton width="3.125rem" height="2.75rem" />
       } @else {
         @if (editButtonVisible()) {
           <p-button
@@ -71,6 +73,8 @@ <h1>{{ preprint()?.title }}</h1>
             (click)="handleWithdrawClicked()"
           />
         }
+
+        <osf-preprint-share-and-download [preprintProvider]="preprintProvider()" />
       }
     </div>
   </section>
@@ -99,16 +103,18 @@ <h1>{{ preprint()?.title }}</h1>
 
     @if (!preprint()?.dateWithdrawn) {
       <section class="flex-1 flex flex-column gap-4 align-items-start lg:flex-row">
-        <section class="w-12 lg:w-6">
+        <section class="flex flex-column flex-1 h-full w-12 lg:w-8">
           <osf-preprint-file-section [providerReviewsWorkflow]="preprintProvider()?.reviewsWorkflow || null" />
         </section>
 
-        <section class="flex flex-column gap-4 w-12 lg:w-6">
-          <osf-preprint-share-and-download [preprintProvider]="preprintProvider()" />
+        <section class="flex flex-column gap-4 w-12 lg:w-4">
           <osf-preprint-general-information
             [preprintProvider]="preprintProvider()"
             (preprintVersionSelected)="fetchPreprint($event)"
           />
+
+          <osf-preprint-metrics-info [metrics]="preprint()?.metrics"></osf-preprint-metrics-info>
+
           <osf-preprint-additional-info [preprintProviderId]="providerId()" />
         </section>
       </section>
diff --git a/src/app/features/preprints/pages/preprint-details/preprint-details.component.ts b/src/app/features/preprints/pages/preprint-details/preprint-details.component.ts
index 780815bd3..8db420ff6 100644
--- a/src/app/features/preprints/pages/preprint-details/preprint-details.component.ts
+++ b/src/app/features/preprints/pages/preprint-details/preprint-details.component.ts
@@ -33,6 +33,7 @@ import {
   ModerationStatusBannerComponent,
   PreprintFileSectionComponent,
   PreprintMakeDecisionComponent,
+  PreprintMetricsInfoComponent,
   PreprintTombstoneComponent,
   ShareAndDownloadComponent,
   StatusBannerComponent,
@@ -73,6 +74,7 @@ import { PreprintWarningBannerComponent } from '../../components/preprint-detail
     PreprintWarningBannerComponent,
     ModerationStatusBannerComponent,
     PreprintMakeDecisionComponent,
+    PreprintMetricsInfoComponent,
     RouterLink,
   ],
   templateUrl: './preprint-details.component.html',
diff --git a/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.html b/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.html
index f04cb53aa..221bcb1c1 100644
--- a/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.html
+++ b/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.html
@@ -97,26 +97,11 @@
           }
 
           @if (resource.isPublic && !hasViewOnly()) {
-            <p-button
-              class="flex"
-              (onClick)="socialsActionMenu.toggle($event)"
-              [pTooltip]="'project.overview.tooltips.share' | translate"
-              tooltipPosition="bottom"
-              [ariaLabel]="'project.overview.tooltips.share' | translate"
-            >
-              <span class="font-bold">{{ socialsActionItems().length }}</span>
-              <i class="fas fa-share-nodes text-2xl"></i>
-              <p-menu appendTo="body" #socialsActionMenu [model]="socialsActionItems()" popup>
-                <ng-template #item let-item>
-                  <a class="p-menu-item-link" [href]="item.url" target="_blank" rel="noopener noreferrer">
-                    <div class="social-link flex align-items-center justify-content-center">
-                      <osf-icon [iconClass]="`${item.icon} fa-sm`"></osf-icon>
-                    </div>
-                    {{ item.label | translate }}
-                  </a>
-                </ng-template>
-              </p-menu>
-            </p-button>
+            <osf-socials-share-button
+              [resourceId]="currentResource().id"
+              [resourceTitle]="currentResource().title"
+              [resourceType]="currentResource().resourceType"
+            ></osf-socials-share-button>
           }
         </div>
       </div>
diff --git a/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.scss b/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.scss
index c935e55e2..a5c7df749 100644
--- a/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.scss
+++ b/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.scss
@@ -6,17 +6,3 @@
   color: var(--pr-blue-1);
   font-size: 1.5rem;
 }
-
-.social-link {
-  background-color: var(--pr-blue-1);
-  border-radius: 0.25rem;
-  color: var(--white);
-  padding: 0.125rem;
-  width: 1.125rem;
-  height: 1.125rem;
-
-  &:hover {
-    background-color: var(--pr-blue-3);
-    text-decoration: none;
-  }
-}
diff --git a/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.ts b/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.ts
index a9090aa7e..876e1c046 100644
--- a/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.ts
+++ b/src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.ts
@@ -17,11 +17,11 @@ import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 import { UserSelectors } from '@core/store/user';
 import { ClearDuplicatedProject, ProjectOverviewSelectors } from '@osf/features/project/overview/store';
-import { IconComponent } from '@osf/shared/components';
+import { SocialsShareButtonComponent } from '@osf/shared/components';
 import { ResourceType } from '@osf/shared/enums';
-import { ShareableContent, ToolbarResource } from '@osf/shared/models';
+import { ToolbarResource } from '@osf/shared/models';
 import { FileSizePipe } from '@osf/shared/pipes';
-import { CustomDialogService, SocialShareService, ToastService } from '@osf/shared/services';
+import { CustomDialogService, ToastService } from '@osf/shared/services';
 import {
   AddResourceToBookmarks,
   BookmarksSelectors,
@@ -31,7 +31,6 @@ import {
 } from '@osf/shared/stores';
 import { hasViewOnlyParam } from '@shared/helpers';
 
-import { SocialsShareActionItem } from '../../models';
 import { DuplicateDialogComponent } from '../duplicate-dialog/duplicate-dialog.component';
 import { ForkDialogComponent } from '../fork-dialog/fork-dialog.component';
 import { TogglePublicityDialogComponent } from '../toggle-publicity-dialog/toggle-publicity-dialog.component';
@@ -48,7 +47,7 @@ import { TogglePublicityDialogComponent } from '../toggle-publicity-dialog/toggl
     NgClass,
     RouterLink,
     FileSizePipe,
-    IconComponent,
+    SocialsShareButtonComponent,
   ],
   templateUrl: './overview-toolbar.component.html',
   styleUrl: './overview-toolbar.component.scss',
@@ -58,7 +57,6 @@ export class OverviewToolbarComponent {
   private store = inject(Store);
   private customDialogService = inject(CustomDialogService);
   private toastService = inject(ToastService);
-  private socialShareService = inject(SocialShareService);
 
   private readonly router = inject(Router);
   private readonly route = inject(ActivatedRoute);
@@ -69,7 +67,7 @@ export class OverviewToolbarComponent {
 
   isCollectionsRoute = input<boolean>(false);
   canEdit = input.required<boolean>();
-  currentResource = input.required<ToolbarResource | null>();
+  currentResource = input.required<ToolbarResource>();
   projectDescription = input<string>('');
   showViewOnlyLinks = input<boolean>(true);
 
@@ -79,10 +77,6 @@ export class OverviewToolbarComponent {
   bookmarkedProjects = select(MyResourcesSelectors.getBookmarks);
   duplicatedProject = select(ProjectOverviewSelectors.getDuplicatedProject);
   isAuthenticated = select(UserSelectors.isAuthenticated);
-  socialsActionItems = computed(() => {
-    const shareableContent = this.createShareableContent();
-    return shareableContent ? this.buildSocialActionItems(shareableContent) : [];
-  });
 
   hasViewOnly = computed(() => hasViewOnlyParam(this.router));
 
@@ -229,68 +223,4 @@ export class OverviewToolbarComponent {
         complete: () => this.actions.clearDuplicatedProject(),
       });
   }
-
-  private createShareableContent(): ShareableContent | null {
-    const resource = this.currentResource();
-    const description = this.projectDescription();
-
-    if (!resource?.isPublic) {
-      return null;
-    }
-
-    return {
-      id: resource.id,
-      title: resource.title,
-      description,
-      url: this.buildResourceUrl(resource),
-    };
-  }
-
-  private buildResourceUrl(resource: ToolbarResource): string {
-    switch (resource.resourceType) {
-      case ResourceType.Project:
-        return this.socialShareService.createProjectUrl(resource.id);
-      case ResourceType.Registration:
-        return this.socialShareService.createRegistrationUrl(resource.id);
-      default:
-        return `${window.location.origin}/${resource.id}`;
-    }
-  }
-
-  private buildSocialActionItems(shareableContent: ShareableContent): SocialsShareActionItem[] {
-    const shareLinks = this.socialShareService.generateAllSharingLinks(shareableContent);
-
-    return [
-      {
-        label: 'project.overview.actions.socials.email',
-        icon: 'fas fa-envelope',
-        url: shareLinks.email,
-      },
-      {
-        label: 'project.overview.actions.socials.x',
-        icon: 'fab fa-x-twitter',
-        url: shareLinks.twitter,
-      },
-      {
-        label: 'project.overview.actions.socials.linkedIn',
-        icon: 'fab fa-linkedin',
-        url: shareLinks.linkedIn,
-      },
-      {
-        label: 'project.overview.actions.socials.facebook',
-        icon: 'fab fa-facebook-f',
-        url: shareLinks.facebook,
-      },
-      {
-        label: 'project.overview.actions.socials.mastodon',
-        icon: 'fab fa-mastodon',
-        url: shareLinks.mastodon,
-      },
-      {
-        label: 'project.overview.actions.socials.bluesky',
-        icon: 'fab fa-bluesky',
-        url: shareLinks.bluesky,
-      },
-    ];
-  }
 }
diff --git a/src/app/features/project/overview/models/index.ts b/src/app/features/project/overview/models/index.ts
index 7a6789398..ffa3996aa 100644
--- a/src/app/features/project/overview/models/index.ts
+++ b/src/app/features/project/overview/models/index.ts
@@ -2,4 +2,3 @@ export * from './addon-tree-item.model';
 export * from './formatted-citation-item.model';
 export * from './privacy-status.model';
 export * from './project-overview.models';
-export * from './socials-share-action-item.model';
diff --git a/src/app/features/project/overview/project-overview.component.html b/src/app/features/project/overview/project-overview.component.html
index a31557c6b..f9d5a7850 100644
--- a/src/app/features/project/overview/project-overview.component.html
+++ b/src/app/features/project/overview/project-overview.component.html
@@ -12,14 +12,16 @@
     />
   </div>
 
-  <div class="px-3 pb-5 flex flex-column sm:px-5">
-    <osf-overview-toolbar
-      [isCollectionsRoute]="isCollectionsRoute()"
-      [currentResource]="currentResource()"
-      [projectDescription]="project.description"
-      [canEdit]="hasAdminAccess()"
-    />
-  </div>
+  @if (currentProject()) {
+    <div class="px-3 pb-5 flex flex-column sm:px-5">
+      <osf-overview-toolbar
+        [isCollectionsRoute]="isCollectionsRoute()"
+        [currentResource]="currentResource()!"
+        [projectDescription]="project.description"
+        [canEdit]="hasAdminAccess()"
+      />
+    </div>
+  }
 
   <div class="flex flex-wrap gap-4 bg-white h-full p-3 flex-column sm:p-4 lg:flex-row">
     @if (isCollectionsRoute()) {
diff --git a/src/app/features/registry/pages/registry-overview/registry-overview.component.html b/src/app/features/registry/pages/registry-overview/registry-overview.component.html
index 8280fd1cb..387f1f2a6 100644
--- a/src/app/features/registry/pages/registry-overview/registry-overview.component.html
+++ b/src/app/features/registry/pages/registry-overview/registry-overview.component.html
@@ -15,7 +15,7 @@
     @if (showToolbar()) {
       <div class="pb-5 pl-4 ml-auto w-full md:pr-4">
         <osf-overview-toolbar
-          [currentResource]="toolbarResource()"
+          [currentResource]="toolbarResource()!"
           [showViewOnlyLinks]="false"
           [canEdit]="hasWriteAccess()"
         />
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index 9857ff339..a67e812cc 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -46,6 +46,7 @@ export { SearchHelpTutorialComponent } from './search-help-tutorial/search-help-
 export { SearchInputComponent } from './search-input/search-input.component';
 export { SearchResultsContainerComponent } from './search-results-container/search-results-container.component';
 export { SelectComponent } from './select/select.component';
+export { SocialsShareButtonComponent } from './socials-share-button/socials-share-button.component';
 export { StatisticCardComponent } from './statistic-card/statistic-card.component';
 export { StepperComponent } from './stepper/stepper.component';
 export { SubHeaderComponent } from './sub-header/sub-header.component';
diff --git a/src/app/shared/components/socials-share-button/socials-share-button.component.html b/src/app/shared/components/socials-share-button/socials-share-button.component.html
new file mode 100644
index 000000000..7e5c57271
--- /dev/null
+++ b/src/app/shared/components/socials-share-button/socials-share-button.component.html
@@ -0,0 +1,19 @@
+<p-button
+  icon="fas fa-share-nodes text-2xl"
+  styleClass="px-4"
+  [pTooltip]="'project.overview.tooltips.share' | translate"
+  tooltipPosition="bottom"
+  [ariaLabel]="'project.overview.tooltips.share' | translate"
+  (onClick)="socialsActionMenu.toggle($event)"
+>
+  <p-menu appendTo="body" #socialsActionMenu [model]="socialsActionItems()" popup>
+    <ng-template #item let-item>
+      <a class="p-menu-item-link" [href]="item.url" target="_blank" rel="noopener noreferrer">
+        <div class="social-link flex align-items-center justify-content-center">
+          <osf-icon [iconClass]="`${item.icon} fa-sm`"></osf-icon>
+        </div>
+        {{ item.label | translate }}
+      </a>
+    </ng-template>
+  </p-menu>
+</p-button>
diff --git a/src/app/shared/components/socials-share-button/socials-share-button.component.scss b/src/app/shared/components/socials-share-button/socials-share-button.component.scss
new file mode 100644
index 000000000..5a4fc67ca
--- /dev/null
+++ b/src/app/shared/components/socials-share-button/socials-share-button.component.scss
@@ -0,0 +1,13 @@
+.social-link {
+  background-color: var(--pr-blue-1);
+  border-radius: 0.25rem;
+  color: var(--white);
+  padding: 0.125rem;
+  width: 1.125rem;
+  height: 1.125rem;
+
+  &:hover {
+    background-color: var(--pr-blue-3);
+    text-decoration: none;
+  }
+}
diff --git a/src/app/shared/components/socials-share-button/socials-share-button.component.spec.ts b/src/app/shared/components/socials-share-button/socials-share-button.component.spec.ts
new file mode 100644
index 000000000..d13d418b0
--- /dev/null
+++ b/src/app/shared/components/socials-share-button/socials-share-button.component.spec.ts
@@ -0,0 +1,61 @@
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockComponent, MockPipe, MockProvider } from 'ng-mocks';
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResourceType } from '@osf/shared/enums';
+import { SocialShareService } from '@osf/shared/services';
+
+import { IconComponent } from '../icon/icon.component';
+
+import { SocialsShareButtonComponent } from './socials-share-button.component';
+
+describe('SocialsShareButtonComponent', () => {
+  let component: SocialsShareButtonComponent;
+  let fixture: ComponentFixture<SocialsShareButtonComponent>;
+  let service: SocialShareService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SocialsShareButtonComponent, MockComponent(IconComponent), MockPipe(TranslatePipe)],
+      providers: [MockProvider(SocialShareService)],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SocialsShareButtonComponent);
+    component = fixture.componentInstance;
+    service = TestBed.inject(SocialShareService);
+
+    jest.spyOn(service, 'createPreprintUrl').mockReturnValue('https://web/preprints/providerX/id123');
+    jest.spyOn(service, 'createGuidUrl').mockReturnValue('https://web/guid-id999');
+    jest.spyOn(service, 'generateSocialActionItems').mockReturnValue([]);
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('uses createPreprintUrl when resourceType is Preprint', () => {
+    fixture.componentRef.setInput('resourceId', 'id123');
+    fixture.componentRef.setInput('resourceProvider', 'providerX');
+    fixture.componentRef.setInput('resourceTitle', 'Title');
+    fixture.componentRef.setInput('resourceType', ResourceType.Preprint);
+    fixture.detectChanges();
+
+    component.socialsActionItems();
+
+    expect(service.createPreprintUrl).toHaveBeenCalledWith('id123', 'providerX');
+    expect(service.createGuidUrl).not.toHaveBeenCalled();
+  });
+
+  it('uses createGuidUrl when resourceType is not Preprint', () => {
+    fixture.componentRef.setInput('resourceId', 'id999');
+    fixture.componentRef.setInput('resourceTitle', 'Another Title');
+    fixture.componentRef.setInput('resourceType', ResourceType.Project);
+    fixture.detectChanges();
+
+    component.socialsActionItems();
+
+    expect(service.createGuidUrl).toHaveBeenCalledWith('id999');
+    expect(service.createPreprintUrl).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/app/shared/components/socials-share-button/socials-share-button.component.ts b/src/app/shared/components/socials-share-button/socials-share-button.component.ts
new file mode 100644
index 000000000..5906560d6
--- /dev/null
+++ b/src/app/shared/components/socials-share-button/socials-share-button.component.ts
@@ -0,0 +1,44 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { Menu } from 'primeng/menu';
+import { Tooltip } from 'primeng/tooltip';
+
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+
+import { ResourceType } from '@osf/shared/enums';
+import { SocialShareContentModel } from '@osf/shared/models';
+import { SocialShareService } from '@osf/shared/services';
+
+import { IconComponent } from '../icon/icon.component';
+
+@Component({
+  selector: 'osf-socials-share-button',
+  imports: [Menu, Button, Tooltip, IconComponent, TranslatePipe],
+  templateUrl: './socials-share-button.component.html',
+  styleUrl: './socials-share-button.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SocialsShareButtonComponent {
+  private readonly socialShareService = inject(SocialShareService);
+
+  resourceId = input.required<string>();
+  resourceTitle = input.required<string>();
+  resourceType = input.required<ResourceType>();
+  resourceProvider = input<string>('');
+
+  socialsActionItems = computed(() => {
+    const resourceUrl =
+      this.resourceType() === ResourceType.Preprint
+        ? this.socialShareService.createPreprintUrl(this.resourceId(), this.resourceProvider())
+        : this.socialShareService.createGuidUrl(this.resourceId());
+
+    const shareableContent: SocialShareContentModel = {
+      id: this.resourceId(),
+      title: this.resourceTitle(),
+      url: resourceUrl,
+    };
+
+    return this.socialShareService.generateSocialActionItems(shareableContent);
+  });
+}
diff --git a/src/app/shared/constants/index.ts b/src/app/shared/constants/index.ts
index ea425dd27..0fb592994 100644
--- a/src/app/shared/constants/index.ts
+++ b/src/app/shared/constants/index.ts
@@ -21,5 +21,6 @@ export * from './search-tab-options.const';
 export * from './search-tutorial-steps.const';
 export * from './social-links.const';
 export * from './social-links.const';
+export * from './social-platforms.const';
 export * from './social-share.config';
 export * from './sort-options.const';
diff --git a/src/app/shared/constants/social-platforms.const.ts b/src/app/shared/constants/social-platforms.const.ts
new file mode 100644
index 000000000..a1689fad3
--- /dev/null
+++ b/src/app/shared/constants/social-platforms.const.ts
@@ -0,0 +1,34 @@
+import { SocialPlatformConfig } from '../models';
+
+export const SOCIAL_PLATFORMS: SocialPlatformConfig[] = [
+  {
+    label: 'project.overview.actions.socials.email',
+    icon: 'fas fa-envelope',
+    urlKey: 'email',
+  },
+  {
+    label: 'project.overview.actions.socials.x',
+    icon: 'fab fa-x-twitter',
+    urlKey: 'twitter',
+  },
+  {
+    label: 'project.overview.actions.socials.linkedIn',
+    icon: 'fab fa-linkedin',
+    urlKey: 'linkedIn',
+  },
+  {
+    label: 'project.overview.actions.socials.facebook',
+    icon: 'fab fa-facebook-f',
+    urlKey: 'facebook',
+  },
+  {
+    label: 'project.overview.actions.socials.mastodon',
+    icon: 'fab fa-mastodon',
+    urlKey: 'mastodon',
+  },
+  {
+    label: 'project.overview.actions.socials.bluesky',
+    icon: 'fab fa-bluesky',
+    urlKey: 'bluesky',
+  },
+];
diff --git a/src/app/shared/models/index.ts b/src/app/shared/models/index.ts
index 84ff8ba7e..789b99b07 100644
--- a/src/app/shared/models/index.ts
+++ b/src/app/shared/models/index.ts
@@ -45,8 +45,7 @@ export * from './search';
 export * from './search-filters.model';
 export * from './select-option.model';
 export * from './severity.type';
-export * from './social-icon.model';
-export * from './social-share.model';
+export * from './socials';
 export * from './status-info.model';
 export * from './step-option.model';
 export * from './store';
diff --git a/src/app/shared/models/social-share.model.ts b/src/app/shared/models/social-share.model.ts
deleted file mode 100644
index b44798fef..000000000
--- a/src/app/shared/models/social-share.model.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export interface ShareableContent {
-  id: string;
-  title: string;
-  description?: string;
-  url: string;
-}
-
-export interface SocialShareLinks {
-  email: string;
-  twitter: string;
-  facebook: string;
-  linkedIn: string;
-  mastodon: string;
-  bluesky: string;
-}
diff --git a/src/app/shared/models/socials/index.ts b/src/app/shared/models/socials/index.ts
new file mode 100644
index 000000000..39949c806
--- /dev/null
+++ b/src/app/shared/models/socials/index.ts
@@ -0,0 +1,5 @@
+export * from './social-icon.model';
+export * from './social-platform-config.model';
+export * from './social-share-content.model';
+export * from './social-share-links.model';
+export * from './socials-share-action-item.model';
diff --git a/src/app/shared/models/social-icon.model.ts b/src/app/shared/models/socials/social-icon.model.ts
similarity index 100%
rename from src/app/shared/models/social-icon.model.ts
rename to src/app/shared/models/socials/social-icon.model.ts
diff --git a/src/app/shared/models/socials/social-platform-config.model.ts b/src/app/shared/models/socials/social-platform-config.model.ts
new file mode 100644
index 000000000..9e3428cc8
--- /dev/null
+++ b/src/app/shared/models/socials/social-platform-config.model.ts
@@ -0,0 +1,7 @@
+import { SocialShareLinksModel } from './social-share-links.model';
+
+export interface SocialPlatformConfig {
+  label: string;
+  icon: string;
+  urlKey: keyof SocialShareLinksModel;
+}
diff --git a/src/app/shared/models/socials/social-share-content.model.ts b/src/app/shared/models/socials/social-share-content.model.ts
new file mode 100644
index 000000000..fc5b94031
--- /dev/null
+++ b/src/app/shared/models/socials/social-share-content.model.ts
@@ -0,0 +1,5 @@
+export interface SocialShareContentModel {
+  id: string;
+  title: string;
+  url: string;
+}
diff --git a/src/app/shared/models/socials/social-share-links.model.ts b/src/app/shared/models/socials/social-share-links.model.ts
new file mode 100644
index 000000000..13dde8268
--- /dev/null
+++ b/src/app/shared/models/socials/social-share-links.model.ts
@@ -0,0 +1,8 @@
+export interface SocialShareLinksModel {
+  email: string;
+  twitter: string;
+  facebook: string;
+  linkedIn: string;
+  mastodon: string;
+  bluesky: string;
+}
diff --git a/src/app/features/project/overview/models/socials-share-action-item.model.ts b/src/app/shared/models/socials/socials-share-action-item.model.ts
similarity index 100%
rename from src/app/features/project/overview/models/socials-share-action-item.model.ts
rename to src/app/shared/models/socials/socials-share-action-item.model.ts
diff --git a/src/app/shared/services/social-share.service.ts b/src/app/shared/services/social-share.service.ts
index 20977c169..262684cb0 100644
--- a/src/app/shared/services/social-share.service.ts
+++ b/src/app/shared/services/social-share.service.ts
@@ -2,8 +2,8 @@ import { inject, Injectable } from '@angular/core';
 
 import { ENVIRONMENT } from '@core/provider/environment.provider';
 
-import { SOCIAL_SHARE_URLS } from '../constants';
-import { ShareableContent, SocialShareLinks } from '../models';
+import { SOCIAL_PLATFORMS, SOCIAL_SHARE_URLS } from '../constants';
+import { SocialShareContentModel, SocialShareLinksModel, SocialsShareActionItem } from '../models';
 
 @Injectable({
   providedIn: 'root',
@@ -15,69 +15,75 @@ export class SocialShareService {
     return this.environment.webUrl;
   }
 
-  generateEmailLink(content: ShareableContent): string {
+  generateAllSharingLinks(content: SocialShareContentModel): SocialShareLinksModel {
+    return {
+      email: this.generateEmailLink(content),
+      twitter: this.generateTwitterLink(content),
+      facebook: this.generateFacebookLink(content),
+      linkedIn: this.generateLinkedInLink(content),
+      mastodon: this.generateMastodonLink(content),
+      bluesky: this.generateBlueskyLink(content),
+    };
+  }
+
+  createPreprintUrl(preprintId: string, providerId: string): string {
+    return `${this.webUrl}/preprints/${providerId}/${preprintId}`;
+  }
+
+  createGuidUrl(guid: string): string {
+    return `${this.webUrl}/${guid}`;
+  }
+
+  createDownloadUrl(resourceId: string): string {
+    return `${this.webUrl}/download/${resourceId}`;
+  }
+
+  generateSocialActionItems(content: SocialShareContentModel): SocialsShareActionItem[] {
+    const shareLinks = this.generateAllSharingLinks(content);
+
+    return SOCIAL_PLATFORMS.map((platform) => ({
+      label: platform.label,
+      icon: platform.icon,
+      url: shareLinks[platform.urlKey],
+    }));
+  }
+
+  private generateEmailLink(content: SocialShareContentModel): string {
     const subject = encodeURIComponent(content.title);
     const body = encodeURIComponent(content.url);
 
     return `${SOCIAL_SHARE_URLS.email}?subject=${subject}&body=${body}`;
   }
 
-  generateTwitterLink(content: ShareableContent): string {
+  private generateTwitterLink(content: SocialShareContentModel): string {
     const url = encodeURIComponent(content.url);
     const text = encodeURIComponent(content.title);
 
     return `${SOCIAL_SHARE_URLS.twitter.preview_url}?url=${url}&text=${text}&via=${SOCIAL_SHARE_URLS.twitter.viaHandle}`;
   }
 
-  generateFacebookLink(content: ShareableContent): string {
+  private generateFacebookLink(content: SocialShareContentModel): string {
     const href = encodeURIComponent(content.url);
 
     return `${SOCIAL_SHARE_URLS.facebook}?u=${href}`;
   }
 
-  generateLinkedInLink(content: ShareableContent): string {
+  private generateLinkedInLink(content: SocialShareContentModel): string {
     const url = encodeURIComponent(content.url);
 
     return `${SOCIAL_SHARE_URLS.linkedIn}?url=${url}`;
   }
 
-  generateMastodonLink(content: ShareableContent): string {
+  private generateMastodonLink(content: SocialShareContentModel): string {
     const url = encodeURIComponent(content.url);
     const text = encodeURIComponent(content.title);
 
     return `${SOCIAL_SHARE_URLS.mastodon}?url=${url}&text=${text}`;
   }
 
-  generateBlueskyLink(content: ShareableContent): string {
+  private generateBlueskyLink(content: SocialShareContentModel): string {
     const text = encodeURIComponent(`${content.title} ${content.url}`);
 
     return `${SOCIAL_SHARE_URLS.bluesky}?text=${text}`;
   }
-
-  generateAllSharingLinks(content: ShareableContent): SocialShareLinks {
-    return {
-      email: this.generateEmailLink(content),
-      twitter: this.generateTwitterLink(content),
-      facebook: this.generateFacebookLink(content),
-      linkedIn: this.generateLinkedInLink(content),
-      mastodon: this.generateMastodonLink(content),
-      bluesky: this.generateBlueskyLink(content),
-    };
-  }
-
-  createPreprintUrl(preprintId: string, providerId: string): string {
-    return `${this.webUrl}/preprints/${providerId}/${preprintId}`;
-  }
-
-  createProjectUrl(projectId: string): string {
-    return `${this.webUrl}/${projectId}`;
-  }
-
-  createRegistrationUrl(registrationId: string, providerId = 'osf'): string {
-    return `${this.webUrl}/registries/${providerId}/${registrationId}`;
-  }
-
-  createDownloadUrl(resourceId: string): string {
-    return `${this.webUrl}/download/${resourceId}`;
-  }
 }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 4ab3b39e2..58c0b767d 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -2317,6 +2317,7 @@
         "noDoi": "No DOI"
       },
       "file": {
+        "renderingDocument": "Rendering document",
         "version": "Version: {{version}}",
         "downloadVersion": "Version {{version}}, {{date}}",
         "downloadPreviousVersion": "Download previous version",
diff --git a/src/testing/mocks/social-share-links.mock.ts b/src/testing/mocks/social-share-links.mock.ts
index 86bafcc8d..c7f9beb6f 100644
--- a/src/testing/mocks/social-share-links.mock.ts
+++ b/src/testing/mocks/social-share-links.mock.ts
@@ -1,10 +1,14 @@
-import { SocialShareLinks } from '@shared/models';
+import { SocialShareLinksModel } from '@shared/models';
 
-export const SOCIAL_SHARE_LINKS_MOCK: SocialShareLinks = {
+export const SOCIAL_SHARE_LINKS_MOCK: SocialShareLinksModel = {
   email:
     'mailto:?subject=Sample%20Preprint%20Title&body=Check%20out%20this%20preprint%3A%20https%3A//example.com/preprint/preprint-1',
   twitter:
     'https://twitter.com/intent/tweet?text=Sample%20Preprint%20Title&url=https%3A//example.com/preprint/preprint-1',
   facebook: 'https://www.facebook.com/sharer/sharer.php?u=https%3A//example.com/preprint/preprint-1',
   linkedIn: 'https://www.linkedin.com/sharing/share-offsite/?url=https%3A//example.com/preprint/preprint-1',
+  mastodon:
+    'https://mastodonshare.com/?url=https%3A%2F%2Fstaging4.osf.io%2Fpreprints%2Flawarchive%2Fm5sy9_v1&text=test',
+  bluesky:
+    'https://bsky.app/intent/compose?text=test%20https%3A%2F%2Fstaging4.osf.io%2Fpreprints%2Flawarchive%2Fm5sy9_v1',
 };