diff --git a/projects/website-angular/src/app/content/detail/icon-detail/icon-detail.component.html b/projects/website-angular/src/app/content/detail/icon-detail/icon-detail.component.html
index 7f96191..eb021f8 100644
--- a/projects/website-angular/src/app/content/detail/icon-detail/icon-detail.component.html
+++ b/projects/website-angular/src/app/content/detail/icon-detail/icon-detail.component.html
@@ -1,117 +1,144 @@
 <app-page-layout [showSidebar]="false" [showBreadcrumb]="false">
   @if (loading()) {
-    <div class="loading-container">
-      <mat-spinner diameter="48"></mat-spinner>
-    </div>
+  <div class="loading-container">
+    <mat-spinner diameter="48"></mat-spinner>
+  </div>
   } @else if (error()) {
-    <div class="error-container">
-      <h2>Icon not found</h2>
-      <p>The requested icon could not be found.</p>
-    </div>
+  <div class="error-container">
+    <h2>Icon not found</h2>
+    <p>The requested icon could not be found.</p>
+  </div>
   } @else if (icon()) {
-    <div class="icon-detail">
-      <app-tile variant="light">
-        <div class="icon-header">
-          <div class="icon-info">
-            <h1>{{ icon()!.name }}</h1>
+  <div class="icon-detail">
+    <app-tile variant="light">
+      <div class="icon-summary">
+        <h1>{{ icon()!.name }}</h1>
+        <dl class="summary-fields">
+          <div class="summary-row">
+            <dt>Preview</dt>
+            <dd>
+              <a class="download-link" [href]="getPngUrl()" download="{{ icon()!.name }}.png" title="Click to download PNG">
+                <span class="material-symbols-rounded">download</span>
+                PNG
+              </a>
+              <a class="download-link" [href]="getSvgUrl()" download="{{ icon()!.name }}.svg" title="Click to download SVG">
+                <span class="material-symbols-rounded">download</span>
+                SVG
+              </a>
+            </dd>
+            <div class="icon-preview">
+              <img [src]="getSvgUrl()" [alt]="icon()!.name" />
+            </div>
+          </div>
+          <div class="summary-row">
             @if (icon()!.iconCategories?.length) {
-              <div class="icon-categories">
-                @for (cat of icon()!.iconCategories; track cat) {
-                  <span class="category-tag">{{ cat }}</span>
-                }
-              </div>
+            <dt>Categories</dt>
+            <dd>
+              @for (cat of icon()!.iconCategories; track cat) {
+              <span>{{ cat }}</span>
+              }
+            </dd>
             }
           </div>
-          <div class="icon-preview">
-            <img [src]="getSvgUrl()" [alt]="icon()!.name" />
+          <div class="summary-row">
+            @if (icon()!.summation) {
+            <dt>Description</dt>
+            <dd [innerHTML]="icon()!.summation"></dd>
+            }
           </div>
-        </div>
-      </app-tile>
-
-      @if (icon()!.summation) {
-        <app-tile variant="light">
-          <h2>Description</h2>
-          <p [innerHTML]="icon()!.summation"></p>
-        </app-tile>
-      }
-
-      @if (icon()!.iconCuratorName || icon()!.iconDesignerName) {
-        <app-tile variant="light">
-          <h2>Credits</h2>
-          <div class="credits">
+          <div class="summary-row">
             @if (icon()!.iconCuratorName) {
-              <div class="credit-item">
-                <span class="credit-label">Curator:</span>
-                @if (icon()!.iconCuratorOrcidId) {
-                  <a [href]="'https://orcid.org/' + icon()!.iconCuratorOrcidId" target="_blank" rel="noopener">
-                    {{ icon()!.iconCuratorName }}
-                    <span class="material-symbols-rounded">open_in_new</span>
-                  </a>
-                } @else {
-                  <span>{{ icon()!.iconCuratorName }}</span>
-                }
-              </div>
+            <div class="credit-item">
+              <span class="credit-label">Curator</span>
+              @if (icon()!.iconCuratorOrcidId) {
+              <a
+                [href]="'https://orcid.org/' + icon()!.iconCuratorOrcidId"
+                target="_blank"
+                rel="noopener"
+              >
+                {{ icon()!.iconCuratorName }}
+                <span class="material-symbols-rounded">open_in_new</span>
+              </a>
+              } @else {
+              <span>{{ icon()!.iconCuratorName }}</span>
+              }
+            </div>
             }
+          </div>
+          <div class="summary-row">
             @if (icon()!.iconDesignerName) {
-              <div class="credit-item">
-                <span class="credit-label">Designer:</span>
-                @if (icon()!.iconDesignerUrl) {
-                  <a [href]="icon()!.iconDesignerUrl" target="_blank" rel="noopener">
-                    {{ icon()!.iconDesignerName }}
-                    <span class="material-symbols-rounded">open_in_new</span>
-                  </a>
-                } @else {
-                  <span>{{ icon()!.iconDesignerName }}</span>
-                }
-              </div>
+            <div class="credit-item">
+              <span class="credit-label">Designer</span>
+              @if (icon()!.iconDesignerUrl) {
+              <a
+                [href]="icon()!.iconDesignerUrl"
+                target="_blank"
+                rel="noopener"
+              >
+                {{ icon()!.iconDesignerName }}
+                <span class="material-symbols-rounded">open_in_new</span>
+              </a>
+              } @else {
+              <span>{{ icon()!.iconDesignerName }}</span>
+              }
+            </div>
             }
           </div>
-        </app-tile>
-      }
-
-      @if (getUniProtReferences().length) {
-        <app-tile variant="light">
-          <h2>External References</h2>
-          <div class="references">
-            @for (ref of getUniProtReferences(); track ref) {
-              <a [href]="'https://www.uniprot.org/uniprot/' + ref" target="_blank" rel="noopener" class="ref-link">
+          <div class="summary-row">
+            @if (getUniProtReferences().length) {
+            <dt>External References</dt>
+            <div class="references">
+              @for (ref of getUniProtReferences(); track ref) {
+              <a
+                [href]="'https://www.uniprot.org/uniprot/' + ref"
+                target="_blank"
+                rel="noopener"
+                class="ref-link"
+              >
                 UniProt: {{ ref }}
                 <span class="material-symbols-rounded">open_in_new</span>
               </a>
+              }
+            </div>
             }
           </div>
-        </app-tile>
-      }
-
-      @if (icon()!.iconPhysicalEntities?.length) {
-        <app-tile variant="light">
-          <h2>Physical Entities ({{ icon()!.iconPhysicalEntities.length }})</h2>
-          <div class="table-wrapper">
-            <table class="entities-table">
-              <thead>
-                <tr>
-                  <th>Name</th>
-                  <th>Identifier</th>
-                  <th>Type</th>
-                  <th>Compartment</th>
-                </tr>
-              </thead>
-              <tbody>
-                @for (entity of icon()!.iconPhysicalEntities; track entity.stId) {
+          <div class="summary-row">
+            @if (icon()!.iconPhysicalEntities?.length) {
+            <dt>
+              Physical Entities ({{ icon()!.iconPhysicalEntities.length }})
+            </dt>
+            <div class="table-wrapper">
+              <table class="entities-table">
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Identifier</th>
+                    <th>Type</th>
+                    <th>Compartment</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  @for (entity of icon()!.iconPhysicalEntities; track
+                  entity.stId) {
                   <tr>
                     <td>
-                      <a [routerLink]="'/content/detail/' + entity.stId">{{ entity.displayName || entity.name }}</a>
+                      <a [routerLink]="'/content/detail/' + entity.stId">{{
+                        entity.displayName || entity.name
+                      }}</a>
                     </td>
                     <td>{{ entity.stId }}</td>
                     <td>{{ entity.type }}</td>
                     <td>{{ entity.compartments }}</td>
                   </tr>
-                }
-              </tbody>
-            </table>
+                  }
+                </tbody>
+              </table>
+            </div>
+            }
           </div>
-        </app-tile>
-      }
-    </div>
+        </dl>
+      </div>
+    </app-tile>
+  </div>
   }
 </app-page-layout>
diff --git a/projects/website-angular/src/app/content/detail/icon-detail/icon-detail.component.scss b/projects/website-angular/src/app/content/detail/icon-detail/icon-detail.component.scss
index bad649b..073c859 100644
--- a/projects/website-angular/src/app/content/detail/icon-detail/icon-detail.component.scss
+++ b/projects/website-angular/src/app/content/detail/icon-detail/icon-detail.component.scss
@@ -32,6 +32,84 @@
   gap: 16px;
 }
 
+.icon-summary {
+  width: 100%;
+  margin: 16px;
+
+  h1 {
+    border-bottom: 1px solid var(--primary);
+    padding: 0 0 16px;
+    font-size: 1.5rem;
+
+    a {
+      color: var(--primary);
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .summary-fields {
+    margin: 0;
+
+    .summary-row {
+      display: flex;
+      gap: 12px;
+      padding: 6px 0;
+      border-bottom: 1px solid var(--outline, #eee);
+
+      .download-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        color: var(--primary);
+        text-decoration: none;
+        margin-right: 16px;
+
+        &:hover {
+          text-decoration: underline;
+        }
+
+        .material-symbols-rounded {
+          font-size: 16px;
+        }
+      }
+
+      .icon-preview {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        padding: 12px;
+
+        img {
+          height: 150px;
+          width: auto;
+          max-width: 100%;
+          max-height: 100%;
+          object-fit: contain;
+        }
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      dt {
+        font-weight: 600;
+        min-width: 100px;
+        flex-shrink: 0;
+      }
+
+      dd {
+        margin: 0;
+      }
+    }
+  }
+}
+
 .icon-header {
   display: flex;
   align-items: flex-start;
@@ -48,25 +126,6 @@
       font-size: 1.5rem;
     }
   }
-
-  .icon-preview {
-    flex-shrink: 0;
-    width: 120px;
-    height: 120px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid var(--outline, #ddd);
-    border-radius: 8px;
-    padding: 12px;
-    background: white;
-
-    img {
-      max-width: 100%;
-      max-height: 100%;
-      object-fit: contain;
-    }
-  }
 }
 
 .icon-categories {
@@ -151,7 +210,8 @@ h2 {
   width: 100%;
   border-collapse: collapse;
 
-  th, td {
+  th,
+  td {
     padding: 10px 14px;
     text-align: left;
     border-bottom: 1px solid var(--outline, #ddd);
diff --git a/projects/website-angular/src/app/content/detail/icon-detail/icon-detail.component.ts b/projects/website-angular/src/app/content/detail/icon-detail/icon-detail.component.ts
index e8cb120..cb19078 100644
--- a/projects/website-angular/src/app/content/detail/icon-detail/icon-detail.component.ts
+++ b/projects/website-angular/src/app/content/detail/icon-detail/icon-detail.component.ts
@@ -1,9 +1,9 @@
-import {Component, inject, OnInit, signal} from '@angular/core';
-import {ActivatedRoute, RouterLink} from '@angular/router';
-import {MatProgressSpinner} from '@angular/material/progress-spinner';
-import {PageLayoutComponent} from '../../../page-layout/page-layout.component';
-import {TileComponent} from '../../../reactome-components/tile/tile.component';
-import {IconService, IconEntry} from '../../../../services/icon.service';
+import { Component, inject, OnInit, signal } from '@angular/core';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { PageLayoutComponent } from '../../../page-layout/page-layout.component';
+import { TileComponent } from '../../../reactome-components/tile/tile.component';
+import { IconService, IconEntry } from '../../../../services/icon.service';
 
 @Component({
   selector: 'app-icon-detail',
@@ -45,8 +45,13 @@ export class IconDetailComponent implements OnInit {
     return stId ? `https://reactome.org/icon/${stId}.svg` : '';
   }
 
+  getPngUrl(): string {
+    const stId = this.icon()?.stId;
+    return stId ? `https://reactome.org/icon/${stId}.png` : '';
+  }
+
   getUniProtReferences(): string[] {
     const refs = this.icon()?.iconReferences ?? [];
-    return refs.filter(r => !r.includes(':'));
+    return refs.filter((r) => !r.includes(':'));
   }
 }
diff --git a/projects/website-angular/src/app/content/detail/interactor-detail/interactor-detail.component.html b/projects/website-angular/src/app/content/detail/interactor-detail/interactor-detail.component.html
index a1efee2..8a11ce4 100644
--- a/projects/website-angular/src/app/content/detail/interactor-detail/interactor-detail.component.html
+++ b/projects/website-angular/src/app/content/detail/interactor-detail/interactor-detail.component.html
@@ -1,91 +1,105 @@
 <app-page-layout [showSidebar]="false" [showBreadcrumb]="false">
   @if (loading()) {
-    <div class="loading-container">
-      <mat-spinner diameter="48"></mat-spinner>
-    </div>
+  <div class="loading-container">
+    <mat-spinner diameter="48"></mat-spinner>
+  </div>
   } @else if (error()) {
-    <div class="error-container">
-      <h2>Interactor not found</h2>
-      <p>No interaction data could be found for "{{ acc() }}".</p>
-    </div>
+  <div class="error-container">
+    <h2>Interactor not found</h2>
+    <p>No interaction data could be found for "{{ acc() }}".</p>
+  </div>
   } @else {
-    <div class="interactor-detail">
-      <app-tile variant="light">
-        <div class="interactor-summary">
-          <h1>
-            <a [href]="referenceURL()" target="_blank" rel="noopener">{{ displayName() }}</a>
-          </h1>
-          <dl class="summary-fields">
-            <div class="summary-row">
-              <dt>Type</dt>
-              <dd>{{ interactorType() }}</dd>
-            </div>
-            @if (species()) {
-              <div class="summary-row">
-                <dt>Species</dt>
-                <dd>{{ species() }}</dd>
-              </div>
-            }
-            @if (synonyms().length) {
-              <div class="summary-row">
-                <dt>Synonyms</dt>
-                <dd>{{ synonyms().join(', ') }}</dd>
-              </div>
-            }
-          </dl>
-        </div>
-      </app-tile>
-
-      @if (interactions().length) {
-        <app-tile variant="light">
-          <h2>Interaction Partners ({{ interactions().length }})</h2>
-          <div class="table-wrapper">
-            <table class="interactions-table">
-              <thead>
-                <tr>
-                  <th>Accession</th>
-                  <th>#Entities</th>
-                  <th>Reactome Entity</th>
-                  <th>Confidence Score</th>
-                  <th>Evidence (IntAct)</th>
-                </tr>
-              </thead>
-              <tbody>
-                @for (interaction of interactions(); track interaction.dbId) {
+  <div class="interactor-detail">
+    <app-tile variant="light">
+      <div class="interactor-summary">
+        <h1>
+          <a [href]="referenceURL()" target="_blank" rel="noopener">{{
+            displayName()
+          }}</a>
+        </h1>
+        <dl class="summary-fields">
+          <div class="summary-row">
+            <dt>Type</dt>
+            <dd>{{ interactorType() }}</dd>
+          </div>
+          @if (species()) {
+          <div class="summary-row">
+            <dt>Species</dt>
+            <dd>{{ species() }}</dd>
+          </div>
+          } @if (synonyms().length) {
+          <div class="summary-row">
+            <dt>Synonyms</dt>
+            <dd>{{ synonyms().join(", ") }}</dd>
+          </div>
+          } @if (interactions().length) {
+          <div class="summary-row">
+            <dt>Interaction Partners ({{ interactions().length }})</dt>
+            <dd class="table-wrapper">
+              <table class="interactions-table">
+                <thead>
+                  <tr>
+                    <th>Accession</th>
+                    <th>#Entities</th>
+                    <th>Reactome Entity</th>
+                    <th>Confidence Score</th>
+                    <th>Evidence (IntAct)</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  @for (interaction of interactions(); track interaction.dbId) {
                   <tr>
                     <td>
-                      <a [href]="interaction.url" target="_blank" rel="noopener">{{ interaction.identifier }}</a>
+                      <a
+                        [href]="interaction.url"
+                        target="_blank"
+                        rel="noopener"
+                        >{{ interaction.identifier }}</a
+                      >
                     </td>
-                    <td>{{ interaction.entitiesCount ?? '' }}</td>
+                    <td>{{ interaction.entitiesCount ?? "" }}</td>
                     <td class="entities-cell">
                       @if (entityMap()[interaction.identifier]; as entities) {
-                        @for (entity of entities; track entity.stId) {
-                          <a [routerLink]="'/content/detail/' + entity.stId" class="entity-link">{{ entity.displayName }}</a>
-                        }
-                      }
+                      @for (entity of entities; track entity.stId) {
+                      <a
+                        [routerLink]="'/content/detail/' + entity.stId"
+                        class="entity-link"
+                        >{{ entity.displayName }}</a
+                      >
+                      } }
                     </td>
-                    <td>{{ interaction.score | number:'1.3-3' }}</td>
+                    <td>{{ interaction.score | number : "1.3-3" }}</td>
                     <td>
                       @if (interaction.evidenceURL) {
-                        <a [href]="interaction.evidenceURL" target="_blank" rel="noopener" class="evidence-link">
-                          {{ interaction.evidenceCount }} pieces of evidence
-                          <span class="material-symbols-rounded">open_in_new</span>
-                        </a>
+                      <a
+                        [href]="interaction.evidenceURL"
+                        target="_blank"
+                        rel="noopener"
+                        class="evidence-link"
+                      >
+                        {{ interaction.evidenceCount }} pieces of evidence
+                        <span class="material-symbols-rounded"
+                          >open_in_new</span
+                        >
+                      </a>
                       } @else {
-                        {{ interaction.evidenceCount }}
+                      {{ interaction.evidenceCount }}
                       }
                     </td>
                   </tr>
-                }
-              </tbody>
-            </table>
+                  }
+                </tbody>
+              </table>
+            </dd>
+          </div>
+          } @else {
+          <div class="interactor-summary">
+            <p>No interaction partners found.</p>
           </div>
-        </app-tile>
-      } @else {
-        <app-tile variant="light">
-          <p>No interaction partners found.</p>
-        </app-tile>
-      }
-    </div>
+          }
+        </dl>
+      </div>
+    </app-tile>
+  </div>
   }
 </app-page-layout>
diff --git a/projects/website-angular/src/app/content/detail/interactor-detail/interactor-detail.component.scss b/projects/website-angular/src/app/content/detail/interactor-detail/interactor-detail.component.scss
index 8442555..c9470ed 100644
--- a/projects/website-angular/src/app/content/detail/interactor-detail/interactor-detail.component.scss
+++ b/projects/website-angular/src/app/content/detail/interactor-detail/interactor-detail.component.scss
@@ -33,8 +33,12 @@
 }
 
 .interactor-summary {
+  width: 100%;
+  margin: 16px;
+
   h1 {
-    margin: 0 0 16px;
+    border-bottom: 1px solid var(--primary);
+    padding: 0 0 16px;
     font-size: 1.5rem;
 
     a {
@@ -86,7 +90,8 @@ h2 {
   width: 100%;
   border-collapse: collapse;
 
-  th, td {
+  th,
+  td {
     padding: 10px 14px;
     text-align: left;
     border-bottom: 1px solid var(--outline, #ddd);