diff --git a/libs/cde-visualization/src/lib/components/metadata/metadata.component.html b/libs/cde-visualization/src/lib/components/metadata/metadata.component.html
index 9da39646c..8fe9ad0cc 100644
--- a/libs/cde-visualization/src/lib/components/metadata/metadata.component.html
+++ b/libs/cde-visualization/src/lib/components/metadata/metadata.component.html
@@ -1,142 +1,134 @@
-<mat-accordion displayMode="flat" hideToggle>
-  <mat-expansion-panel expanded #panel>
-    <mat-expansion-panel-header (click)="togglePanel($event, panel)">
-      <mat-panel-title class="title">
-        <button mat-icon-button hraIconButtonSize="large" [hraMicroTooltip]="panel.expanded ? 'Collapse' : 'Expand'">
-          <mat-icon class="expansion-indicator">{{ panel.expanded ? 'remove' : 'add' }}</mat-icon>
-        </button>
-        {{ metadata().sampleExtra ? 'Sample ' : '' }}Metadata
-        <button
-          mat-icon-button
-          [matMenuTriggerFor]="menu"
-          [hraIconButtonSize]="'large'"
-          aria-label="Icon to open nested menu"
-          hraMicroTooltip="More"
-          (click)="$event.stopPropagation()"
-        >
-          <mat-icon>more_vert</mat-icon>
-        </button>
-        <mat-menu #menu="matMenu" [class]="'metadata-overlay'">
-          <button
-            mat-menu-item
-            [matMenuTriggerFor]="infoSubMenu"
-            class="expanded"
-            matRipple
-            matRippleColor="#201E3D14"
-            (click)="$event.stopImmediatePropagation()"
-          >
-            <mat-icon>info</mat-icon>
-            <span>Info</span>
-            <mat-icon class="expand-arrow">arrow_right</mat-icon>
-          </button>
-          <button mat-menu-item (click)="toggleEmptyFields()">
-            <mat-icon>{{ showEmptyFields() ? 'visibility_off' : 'visibility' }}visibility</mat-icon>
-            {{ showEmptyFields() ? 'Hide' : 'Show' }} Unknown Metadata
-          </button>
-          <a
-            mat-menu-item
-            href="https://github.com/hubmapconsortium/hra-ui/blob/main/apps/cde-visualization-wc/EMBEDDING.md"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <mat-icon>code</mat-icon>
-            Embed App
-          </a>
-          <mat-menu #infoSubMenu="matMenu" [class]="'info-sub-menu'">
-            Visualization metadata for the sample dataset.
-          </mat-menu>
-        </mat-menu>
-      </mat-panel-title>
-    </mat-expansion-panel-header>
-    <div class="metadata-details">
-      <div>
-        @if (isFieldVisible('title')) {
-          <span>
-            {{ titleLabel() }}
-          </span>
-          <span>
-            @if (metadata().sampleExtra; as extra) {
-              <a
-                mat-button
-                hraButtonSize="small"
-                [attr.href]="extra.sampleUrl"
-                target="_blank"
-                rel="noreferrer noopener"
-                >{{ metadata().title }}</a
-              >
-            } @else {
-              <span>{{ metadata().title | defaultTo: 'Unknown' }}</span>
-            }
-          </span>
-        }
-      </div>
-      <div>
-        <span>Source Data</span>
+<hra-expansion-panel [title]="'Sample Metadata'">
+  <hra-expansion-panel-actions>
+    <button
+      mat-icon-button
+      [matMenuTriggerFor]="menu"
+      [hraIconButtonSize]="'large'"
+      aria-label="Icon to open nested menu"
+      hraMicroTooltip="More"
+      (click)="$event.stopPropagation()"
+    >
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu" [class]="'metadata-overlay'">
+      <button
+        mat-menu-item
+        [matMenuTriggerFor]="infoSubMenu"
+        class="expanded"
+        matRipple
+        matRippleColor="#201E3D14"
+        (click)="$event.stopImmediatePropagation()"
+      >
+        <mat-icon>info</mat-icon>
+        <span>Info</span>
+        <mat-icon class="expand-arrow">arrow_right</mat-icon>
+      </button>
+      <button mat-menu-item (click)="toggleEmptyFields()">
+        <mat-icon>{{ showEmptyFields() ? 'visibility_off' : 'visibility' }}visibility</mat-icon>
+        {{ showEmptyFields() ? 'Hide' : 'Show' }} Unknown Metadata
+      </button>
+      <a
+        mat-menu-item
+        href="https://github.com/hubmapconsortium/hra-ui/blob/main/apps/cde-visualization-wc/EMBEDDING.md"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <mat-icon>code</mat-icon>
+        Embed App
+      </a>
+      <mat-menu #infoSubMenu="matMenu" [class]="'info-sub-menu'">
+        Visualization metadata for the sample dataset.
+      </mat-menu>
+    </mat-menu>
+  </hra-expansion-panel-actions>
+  <div class="metadata-details">
+    <div>
+      @if (isFieldVisible('title')) {
+        <span>
+          {{ titleLabel() }}
+        </span>
         <span>
           @if (metadata().sampleExtra; as extra) {
             <a
               mat-button
               hraButtonSize="small"
-              [attr.href]="extra.sourceDataUrl"
+              [attr.href]="extra.sampleUrl"
               target="_blank"
               rel="noreferrer noopener"
-              >{{ metadata().sourceData }}</a
+              >{{ metadata().title }}</a
             >
           } @else {
-            <span>{{ metadata().sourceData | defaultTo: 'Unknown' }}</span>
+            <span>{{ metadata().title | defaultTo: 'Unknown' }}</span>
           }
         </span>
-      </div>
-      @if (isFieldVisible('colorMap')) {
-        <div>
-          <span>Color Map</span>
-          <span>{{ metadata().colorMap | defaultTo: 'Default' }}</span>
-        </div>
-      }
-      @if (isFieldVisible('organ')) {
-        <div>
-          <span>Organ</span>
-          <span>{{ metadata().organ | defaultTo: 'Unknown' }}</span>
-        </div>
-      }
-      @if (isFieldVisible('technology')) {
-        <div>
-          <span>Technology</span>
-          <span>{{ metadata().technology | defaultTo: 'Unknown' }}</span>
-        </div>
-      }
-      @if (isFieldVisible('sex')) {
-        <div>
-          <span>Sex</span>
-          <span>{{ metadata().sex | defaultTo: 'Unknown' }}</span>
-        </div>
-      }
-      @if (isFieldVisible('age')) {
-        <div>
-          <span>Age</span>
-          <span>{{ metadata().age | defaultTo: 'Unknown' }}</span>
-        </div>
-      }
-      @if (isFieldVisible('thickness')) {
-        <div>
-          <span>Thickness (µm)</span>
-          <span>{{ metadata().thickness | defaultTo: 'Unknown' }}</span>
-        </div>
-      }
-      @if (isFieldVisible('pixelSize')) {
-        <div>
-          <span>Pixel Size (µm/pixel)</span>
-          <span>{{ metadata().pixelSize | defaultTo: 'Unknown' }}</span>
-        </div>
       }
+    </div>
+    <div>
+      <span>Source Data</span>
+      <span>
+        @if (metadata().sampleExtra; as extra) {
+          <a
+            mat-button
+            hraButtonSize="small"
+            [attr.href]="extra.sourceDataUrl"
+            target="_blank"
+            rel="noreferrer noopener"
+            >{{ metadata().sourceData }}</a
+          >
+        } @else {
+          <span>{{ metadata().sourceData | defaultTo: 'Unknown' }}</span>
+        }
+      </span>
+    </div>
+    @if (isFieldVisible('colorMap')) {
+      <div>
+        <span>Color Map</span>
+        <span>{{ metadata().colorMap | defaultTo: 'Default' }}</span>
+      </div>
+    }
+    @if (isFieldVisible('organ')) {
       <div>
-        <span>Creation Date</span>
-        <span>{{ formatCreationTimestamp(dateFormat) | defaultTo: 'Unknown' }}</span>
+        <span>Organ</span>
+        <span>{{ metadata().organ | defaultTo: 'Unknown' }}</span>
       </div>
+    }
+    @if (isFieldVisible('technology')) {
       <div>
-        <span>Creation Time</span>
-        <span>{{ formatCreationTimestamp(timeFormat) | defaultTo: 'Unknown' }}</span>
+        <span>Technology</span>
+        <span>{{ metadata().technology | defaultTo: 'Unknown' }}</span>
       </div>
+    }
+    @if (isFieldVisible('sex')) {
+      <div>
+        <span>Sex</span>
+        <span>{{ metadata().sex | defaultTo: 'Unknown' }}</span>
+      </div>
+    }
+    @if (isFieldVisible('age')) {
+      <div>
+        <span>Age</span>
+        <span>{{ metadata().age | defaultTo: 'Unknown' }}</span>
+      </div>
+    }
+    @if (isFieldVisible('thickness')) {
+      <div>
+        <span>Thickness (µm)</span>
+        <span>{{ metadata().thickness | defaultTo: 'Unknown' }}</span>
+      </div>
+    }
+    @if (isFieldVisible('pixelSize')) {
+      <div>
+        <span>Pixel Size (µm/pixel)</span>
+        <span>{{ metadata().pixelSize | defaultTo: 'Unknown' }}</span>
+      </div>
+    }
+    <div>
+      <span>Creation Date</span>
+      <span>{{ formatCreationTimestamp(dateFormat) | defaultTo: 'Unknown' }}</span>
+    </div>
+    <div>
+      <span>Creation Time</span>
+      <span>{{ formatCreationTimestamp(timeFormat) | defaultTo: 'Unknown' }}</span>
     </div>
-  </mat-expansion-panel>
-</mat-accordion>
+  </div>
+</hra-expansion-panel>
diff --git a/libs/cde-visualization/src/lib/components/metadata/metadata.component.scss b/libs/cde-visualization/src/lib/components/metadata/metadata.component.scss
index 1e42cb19d..79d605313 100644
--- a/libs/cde-visualization/src/lib/components/metadata/metadata.component.scss
+++ b/libs/cde-visualization/src/lib/components/metadata/metadata.component.scss
@@ -3,7 +3,7 @@
   --mat-text-button-hover-state-layer-opacity: 0;
   --mat-text-button-pressed-state-layer-opacity: 0;
 
-  .mat-expansion-panel {
+  hra-expansion-panel {
     --mat-expansion-container-shape: 0;
     --mat-expansion-header-expanded-state-height: auto;
     --mat-expansion-header-collapsed-state-height: auto;
@@ -14,26 +14,20 @@
     border-style: solid;
     box-shadow: none;
 
-    .mat-expansion-panel-header {
-      padding: 0.5rem 0.75rem;
-
-      .title {
-        font: var(--sys-label-medium);
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-      }
-    }
-
     ::ng-deep {
       .mat-expansion-panel-body {
         padding: 0 1rem;
       }
     }
 
+    ::ng-deep .header {
+      margin: 0.5rem 0.75rem;
+    }
+
     .metadata-details {
       display: flex;
       flex-direction: column;
+      margin: 0 0.75rem;
       margin-bottom: 0.75rem;
 
       > div {
diff --git a/libs/cde-visualization/src/lib/components/metadata/metadata.component.ts b/libs/cde-visualization/src/lib/components/metadata/metadata.component.ts
index 25ce94f5a..700ab13a1 100644
--- a/libs/cde-visualization/src/lib/components/metadata/metadata.component.ts
+++ b/libs/cde-visualization/src/lib/components/metadata/metadata.component.ts
@@ -10,6 +10,11 @@ import { MatMenuModule } from '@angular/material/menu';
 import { IconButtonSizeDirective } from '@hra-ui/design-system/icon-button';
 import { MicroTooltipDirective } from '@hra-ui/design-system/micro-tooltip';
 import { ButtonSizeDirective } from '@hra-ui/design-system/button';
+import {
+  ExpansionPanelActionsComponent,
+  ExpansionPanelComponent,
+  ExpansionPanelHeaderContentComponent,
+} from '@hra-ui/design-system/expansion-panel';
 
 /** List of metadata fields that can be hidden */
 const HIDABLE_FIELDS: (keyof Metadata)[] = [
@@ -53,6 +58,9 @@ export class DefaultToPipe implements PipeTransform {
     IconButtonSizeDirective,
     MicroTooltipDirective,
     ButtonSizeDirective,
+    ExpansionPanelComponent,
+    ExpansionPanelActionsComponent,
+    ExpansionPanelHeaderContentComponent,
   ],
   templateUrl: './metadata.component.html',
   styleUrl: './metadata.component.scss',