diff --git a/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.html b/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.html
index 7c2335eb4..cdc6b62e1 100644
--- a/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.html
+++ b/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.html
@@ -1,142 +1,150 @@
-<span class="cell-types-label">
-  Cell Types
-  <button
-    mat-icon-button
-    [matMenuTriggerFor]="menu"
-    hraMicroTooltip="More"
-    hraIconButtonSize="large"
-    data-testid="trigger"
-  >
-    <mat-icon>more_vert</mat-icon>
-  </button>
-  <mat-menu #menu="matMenu">
-    <button mat-menu-item [matMenuTriggerFor]="infoSubMenu" class="expanded" matRipple matRippleColor="#201E3D14">
-      <mat-icon>info</mat-icon>
-      <span>Info</span>
-      <mat-icon class="expand-arrow">arrow_right</mat-icon>
-    </button>
-    <button mat-menu-item [matMenuTriggerFor]="downloadSubMenu" class="expanded" matRipple matRippleColor="#201E3D14">
-      <mat-icon>download</mat-icon>
-      <span>Download</span>
-      <mat-icon class="expand-arrow">arrow_right</mat-icon>
-    </button>
-    <button mat-menu-item (click)="toggleLinksColumn()">
-      <mat-icon>{{ hideCellLinkData() ? 'visibility' : 'visibility_off' }}visibility</mat-icon>
-      {{ hideCellLinkData() ? 'Show' : 'Hide' }} Cell Link Data
-    </button>
-    <button mat-menu-item (click)="resetAllColors.emit()">
-      <mat-icon>reset_wrench</mat-icon>
-      Reset All Colors
-    </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>
-  <mat-menu #infoSubMenu="matMenu" [class]="'info-sub-menu'">
-    {{ infoToolTipDescription }}
-  </mat-menu>
-  <mat-menu #downloadSubMenu="matMenu">
-    <button mat-menu-item (click)="downloadNodes.emit()">
-      <mat-icon>download</mat-icon>
-      <span>Cells CSV</span>
-    </button>
-    <button mat-menu-item (click)="downloadEdges.emit()">
-      <mat-icon>download</mat-icon>
-      <span>Cell Links CSV</span>
-    </button>
-    <button mat-menu-item (click)="downloadColorMap.emit()">
-      <mat-icon>download</mat-icon>
-      <span>Cell Color Map CSV</span>
-    </button>
-  </mat-menu>
-</span>
-
-<div class="total-ct-label">
-  <span>{{ selection().length }}</span>
-  Total Cell Types
-</div>
-<div class="total-cells">
-  <span data-testid="total-cell-count">{{ totalCellCount() | number }}</span>
-  Total Cells
-</div>
-@if (!hideCellLinkData()) {
-  <div class="total-cell-links">
-    <span data-testid="total-cell-link-count">{{ totalCellLinksCount() | number }}</span>
-    Total Cell Links
+<hra-expansion-panel [title]="'Cell Types'" disabled="">
+  <hra-expansion-panel-actions>
+    <span class="cell-types-label">
+      <button
+        mat-icon-button
+        [matMenuTriggerFor]="menu"
+        hraMicroTooltip="More"
+        hraIconButtonSize="large"
+        data-testid="trigger"
+      >
+        <mat-icon>more_vert</mat-icon>
+      </button>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item [matMenuTriggerFor]="infoSubMenu" class="expanded" matRipple matRippleColor="#201E3D14">
+          <mat-icon>info</mat-icon>
+          <span>Info</span>
+          <mat-icon class="expand-arrow">arrow_right</mat-icon>
+        </button>
+        <button
+          mat-menu-item
+          [matMenuTriggerFor]="downloadSubMenu"
+          class="expanded"
+          matRipple
+          matRippleColor="#201E3D14"
+        >
+          <mat-icon>download</mat-icon>
+          <span>Download</span>
+          <mat-icon class="expand-arrow">arrow_right</mat-icon>
+        </button>
+        <button mat-menu-item (click)="toggleLinksColumn()">
+          <mat-icon>{{ hideCellLinkData() ? 'visibility' : 'visibility_off' }}visibility</mat-icon>
+          {{ hideCellLinkData() ? 'Show' : 'Hide' }} Cell Link Data
+        </button>
+        <button mat-menu-item (click)="resetAllColors.emit()">
+          <mat-icon>reset_wrench</mat-icon>
+          Reset All Colors
+        </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>
+      <mat-menu #infoSubMenu="matMenu" [class]="'info-sub-menu'">
+        {{ infoToolTipDescription }}
+      </mat-menu>
+      <mat-menu #downloadSubMenu="matMenu">
+        <button mat-menu-item (click)="downloadNodes.emit()">
+          <mat-icon>download</mat-icon>
+          <span>Cells CSV</span>
+        </button>
+        <button mat-menu-item (click)="downloadEdges.emit()">
+          <mat-icon>download</mat-icon>
+          <span>Cell Links CSV</span>
+        </button>
+        <button mat-menu-item (click)="downloadColorMap.emit()">
+          <mat-icon>download</mat-icon>
+          <span>Cell Color Map CSV</span>
+        </button>
+      </mat-menu>
+    </span>
+  </hra-expansion-panel-actions>
+  <div class="total-ct-label">
+    <span>{{ selection().length }}</span>
+    Total Cell Types
+  </div>
+  <div class="total-cells">
+    <span data-testid="total-cell-count">{{ totalCellCount() | number }}</span>
+    Total Cells
   </div>
-}
+  @if (!hideCellLinkData()) {
+    <div class="total-cell-links">
+      <span data-testid="total-cell-link-count">{{ totalCellLinksCount() | number }}</span>
+      Total Cell Links
+    </div>
+  }
 
-<ng-scrollbar
-  class="table-overflow-container"
-  externalViewport=".scroll-viewport"
-  externalContentWrapper="tbody"
-  externalSpacer="tbody"
-  asyncDetection="auto"
-  hraScrollOverflowFade
-  [scrollOverflowFadeOffset]="36"
->
-  <div class="scroll-viewport">
-    <table
-      mat-table
-      [dataSource]="dataSource"
-      [trackBy]="trackByName"
-      matSort
-      matSortDirection="desc"
-      matSortActive="count"
-      aria-label="Cell Types Count Table"
-    >
-      <ng-container matColumnDef="select">
-        <th mat-header-cell *matHeaderCellDef>
-          <mat-checkbox
-            (change)="toggleAllRows()"
-            [checked]="selectionState() === 'full'"
-            [indeterminate]="selectionState() === 'partial'"
-            [aria-label]="getCheckboxLabel(selectionState() === 'full')"
-          >
-          </mat-checkbox>
-        </th>
-        <td mat-cell *matCellDef="let row; let index = index">
-          <mat-checkbox
-            (click)="$event.stopPropagation()"
-            (change)="toggleRow(row)"
-            [checked]="isSelected(row)"
-            [aria-label]="getCheckboxLabel(isSelected(row), index + 1)"
-          >
-          </mat-checkbox>
-        </td>
-      </ng-container>
+  <ng-scrollbar
+    class="table-overflow-container"
+    externalViewport=".scroll-viewport"
+    externalContentWrapper="tbody"
+    externalSpacer="tbody"
+    asyncDetection="auto"
+    hraScrollOverflowFade
+    [scrollOverflowFadeOffset]="36"
+  >
+    <div class="scroll-viewport">
+      <table
+        mat-table
+        [dataSource]="dataSource"
+        [trackBy]="trackByName"
+        matSort
+        matSortDirection="desc"
+        matSortActive="count"
+        aria-label="Cell Types Count Table"
+      >
+        <ng-container matColumnDef="select">
+          <th mat-header-cell *matHeaderCellDef>
+            <mat-checkbox
+              (change)="toggleAllRows()"
+              [checked]="selectionState() === 'full'"
+              [indeterminate]="selectionState() === 'partial'"
+              [aria-label]="getCheckboxLabel(selectionState() === 'full')"
+            >
+            </mat-checkbox>
+          </th>
+          <td mat-cell *matCellDef="let row; let index = index">
+            <mat-checkbox
+              (click)="$event.stopPropagation()"
+              (change)="toggleRow(row)"
+              [checked]="isSelected(row)"
+              [aria-label]="getCheckboxLabel(isSelected(row), index + 1)"
+            >
+            </mat-checkbox>
+          </td>
+        </ng-container>
 
-      <ng-container matColumnDef="cellType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="name" start="desc">Cell Type</th>
-        <td mat-cell *matCellDef="let element" class="name">
-          <cde-color-picker-label
-            [label]="element.name"
-            [color]="element.color"
-            [isAnchor]="element.name === selectedCellType()"
-            (colorChange)="updateColor(element, $event)"
-          >
-          </cde-color-picker-label>
-        </td>
-      </ng-container>
+        <ng-container matColumnDef="cellType">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header="name" start="desc">Cell Type</th>
+          <td mat-cell *matCellDef="let element" class="name">
+            <cde-color-picker-label
+              [label]="element.name"
+              [color]="element.color"
+              [isAnchor]="element.name === selectedCellType()"
+              (colorChange)="updateColor(element, $event)"
+            >
+            </cde-color-picker-label>
+          </td>
+        </ng-container>
 
-      <ng-container matColumnDef="count">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="count" start="desc">#Cells</th>
-        <td mat-cell *matCellDef="let element">{{ element.count.toLocaleString() }}</td>
-      </ng-container>
+        <ng-container matColumnDef="count">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header="count" start="desc">#Cells</th>
+          <td mat-cell *matCellDef="let element">{{ element.count.toLocaleString() }}</td>
+        </ng-container>
 
-      <ng-container matColumnDef="links">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="outgoingEdgeCount" start="desc">#Links</th>
-        <td mat-cell *matCellDef="let element">{{ element.outgoingEdgeCount.toLocaleString() }}</td>
-      </ng-container>
+        <ng-container matColumnDef="links">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header="outgoingEdgeCount" start="desc">#Links</th>
+          <td mat-cell *matCellDef="let element">{{ element.outgoingEdgeCount.toLocaleString() }}</td>
+        </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="columns(); sticky: true"></tr>
-      <tr mat-row *matRowDef="let row; columns: columns()"></tr>
-    </table>
-  </div>
-</ng-scrollbar>
+        <tr mat-header-row *matHeaderRowDef="columns(); sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: columns()"></tr>
+      </table>
+    </div>
+  </ng-scrollbar>
+</hra-expansion-panel>
diff --git a/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.scss b/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.scss
index ff2e63b1f..448a062f4 100644
--- a/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.scss
+++ b/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.scss
@@ -20,15 +20,6 @@ $blue-theme: mat.m2-define-light-theme(
 
 :host {
   @include mat.button-color($blue-theme);
-
-  display: grid;
-  grid:
-    'cell-types . download'
-    'total-cell-types total-cells total-cell-links'
-    'table table table' 1fr
-    / auto 1fr auto;
-  align-items: start;
-  row-gap: 0.75rem;
   overflow: hidden;
   padding: 0.75rem 1rem;
   border-width: 0 2px 0px 0px;
@@ -48,34 +39,30 @@ $blue-theme: mat.m2-define-light-theme(
   --mat-table-header-container-height: 2rem;
   --mat-menu-item-label-text-color: var(--sys-primary);
 
-  &:not(:has(.total-cell-links)) {
-    grid:
-      'cell-types . download'
-      'total-cell-types . total-cells'
-      'table table table' 1fr
-      / auto 1fr auto;
-  }
+  ::ng-deep {
+    hra-expansion-panel {
+      .header {
+        margin-bottom: 0.25rem;
 
-  span.cell-types-label {
-    font: var(--sys-label-medium);
-    letter-spacing: var(--sys-label-medium-tracking);
-    grid-area: cell-types;
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-  }
+        .title {
+          font: var(--sys-label-medium);
+        }
+      }
 
-  button.download-csv {
-    --mdc-filled-button-label-text-color: #{button-text-color};
-    grid-area: download;
-    padding: 0.3438rem 0.5rem;
-
-    .mat-icon {
-      margin-left: unset;
-      margin-right: 0.125rem;
-      font-size: 1.25rem;
-      height: 1.25rem;
-      width: 1.25rem;
+      .expansion-body {
+        display: grid;
+        grid:
+          'total-cell-types total-cells total-cell-links'
+          'table table table' 1fr
+          / auto 1fr auto;
+
+        &:not(:has(.total-cell-links)) {
+          grid:
+            'total-cell-types . total-cells'
+            'table table table' 1fr
+            / auto 1fr auto;
+        }
+      }
     }
   }
 
@@ -84,6 +71,7 @@ $blue-theme: mat.m2-define-light-theme(
   .total-cell-links {
     font: var(--sys-label-small);
     letter-spacing: var(--sys-label-medium-tracking);
+    margin: 0.25rem 0;
 
     span {
       display: block;
@@ -92,7 +80,6 @@ $blue-theme: mat.m2-define-light-theme(
     }
   }
 
-  .mat-caption,
   .total-ct-label {
     grid-area: total-cell-types;
   }
@@ -229,7 +216,7 @@ $blue-theme: mat.m2-define-light-theme(
 
 ::ng-deep {
   div.mat-mdc-menu-panel {
-    max-width: 308px;
+    max-width: 19.25rem;
     &.info-sub-menu .mat-mdc-menu-content {
       padding: 1rem 1rem;
     }
diff --git a/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.ts b/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.ts
index 9e4cc6c54..21cd65014 100644
--- a/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.ts
+++ b/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.ts
@@ -33,6 +33,11 @@ import { CellTypeEntry } from '../../models/cell-type';
 import { TOOLTIP_POSITION_RIGHT_SIDE } from '../../shared/tooltip-position';
 import { ColorPickerLabelComponent } from '../color-picker-label/color-picker-label.component';
 import { MicroTooltipDirective } from '@hra-ui/design-system/micro-tooltip';
+import {
+  ExpansionPanelActionsComponent,
+  ExpansionPanelComponent,
+  ExpansionPanelHeaderContentComponent,
+} from '@hra-ui/design-system/expansion-panel';
 /**
  * Cell Type Component
  */
@@ -56,6 +61,9 @@ import { MicroTooltipDirective } from '@hra-ui/design-system/micro-tooltip';
     TooltipCardComponent,
     MatSnackBarModule,
     MicroTooltipDirective,
+    ExpansionPanelComponent,
+    ExpansionPanelActionsComponent,
+    ExpansionPanelHeaderContentComponent,
   ],
   templateUrl: './cell-types.component.html',
   styleUrl: './cell-types.component.scss',