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 830fbbd82..6bd36af3e 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
@@ -15,8 +15,8 @@
       <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
+      <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>restart_alt</mat-icon>
@@ -31,8 +31,8 @@
       Embed App
     </a>
   </mat-menu>
-  <mat-menu #infoSubMenu="matMenu">
-    <hra-tooltip-card [content]="infoToolTip" [small]="true"></hra-tooltip-card>
+  <mat-menu #infoSubMenu="matMenu" [class]="'info-sub-menu'">
+    {{ infoToolTipDescription }}
   </mat-menu>
   <mat-menu #downloadSubMenu="matMenu">
     <button mat-menu-item (click)="downloadNodes.emit()">
@@ -58,10 +58,12 @@
   <span data-testid="total-cell-count">{{ totalCellCount() | number }}</span>
   Total Cells
 </div>
-<div class="total-cell-links">
-  <span data-testid="total-cell-link-count">{{ totalCellLinksCount() | number }}</span>
-  Total Cell Links
-</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"
@@ -104,7 +106,7 @@
       </ng-container>
 
       <ng-container matColumnDef="cellType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header start="desc">Cell Type</th>
+        <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"
@@ -117,17 +119,17 @@
       </ng-container>
 
       <ng-container matColumnDef="count">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header start="desc">#Cells</th>
+        <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 start="desc">#Links</th>
+        <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>
+      <tr mat-header-row *matHeaderRowDef="columns(); sticky: true"></tr>
+      <tr mat-row *matRowDef="let row; columns: columns()"></tr>
     </table>
   </div>
 </ng-scrollbar>
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 1d106195e..ecaf5a5ad 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
@@ -48,6 +48,14 @@ $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;
+  }
+
   span.cell-types-label {
     font: var(--sys-label-medium);
     letter-spacing: var(--sys-label-medium-tracking);
@@ -219,6 +227,16 @@ $blue-theme: mat.m2-define-light-theme(
   }
 }
 
-::ng-deep .mat-mdc-menu-content button {
-  color: var(--sys-primary);
+::ng-deep {
+  .mat-mdc-menu-content button {
+    color: var(--sys-primary);
+  }
+
+  div.mat-mdc-menu-panel {
+    max-width: 308px;
+    &.info-sub-menu .mat-mdc-menu-content {
+      padding: 1rem 1rem;
+      color: var(--sys-primary);
+    }
+  }
 }
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 adbaad9da..e2f410deb 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
@@ -11,6 +11,7 @@ import {
   input,
   model,
   output,
+  signal,
   viewChild,
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
@@ -25,7 +26,7 @@ import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { Rgb } from '@hra-ui/design-system/color-picker';
 import { IconButtonSizeDirective } from '@hra-ui/design-system/icon-button';
 import { ScrollingModule } from '@hra-ui/design-system/scrolling';
-import { TooltipCardComponent, TooltipContent } from '@hra-ui/design-system/tooltip-card';
+import { TooltipCardComponent } from '@hra-ui/design-system/tooltip-card';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { map } from 'rxjs';
 import { CellTypeEntry } from '../../models/cell-type';
@@ -80,11 +81,14 @@ export class CellTypesComponent {
   /** Output event for reset color */
   readonly resetAllColors = output();
 
-  /** Base columns to be displayed in the table */
-  private readonly baseColumns = ['select', 'cellType', 'count'];
-
   /** Columns to be displayed in the table */
-  protected columns = [...this.baseColumns, 'links'];
+  protected readonly columns = computed(() => {
+    if (this.hideCellLinkData()) {
+      return ['select', 'cellType', 'count'];
+    } else {
+      return ['select', 'cellType', 'count', 'links'];
+    }
+  });
 
   /** Tooltip position configuration */
   protected readonly tooltipPosition = TOOLTIP_POSITION_RIGHT_SIDE;
@@ -93,15 +97,11 @@ export class CellTypesComponent {
   protected readonly sort = viewChild.required(MatSort);
 
   /** Content for Info Tooltip card */
-  protected readonly infoToolTip: TooltipContent[] = [
-    {
-      description:
-        'Show/hide cell types in the visualization and plots. Hide cell links from this table view. Update colors for individual cell types. Download CSVs for the current configurations of cell types, cell links, and cell type color map formatting.',
-    },
-  ];
+  protected readonly infoToolTipDescription: string =
+    'Show/hide cell types in the visualization and plots. Hide cell links from this table view. Update colors for individual cell types. Download CSVs for the current configurations of cell types, cell links, and cell type color map formatting.';
 
   /** Flag to toggle cell links row visibility */
-  protected hideCellLinkData = false;
+  protected hideCellLinkData = signal(false);
 
   /** Bind sort state to data source */
   protected readonly sortBindRef = effect(() => (this.dataSource.sort = this.sort()));
@@ -223,16 +223,7 @@ export class CellTypesComponent {
     }
   }
 
-  private updateColumns() {
-    if (this.hideCellLinkData) {
-      this.columns = this.columns.filter((column) => column !== 'links');
-    } else if (!this.columns.includes('links')) {
-      this.columns = [...this.baseColumns, 'links'];
-    }
-  }
-
   toggleLinksColumn(): void {
-    this.hideCellLinkData = !this.hideCellLinkData;
-    this.updateColumns();
+    this.hideCellLinkData.set(!this.hideCellLinkData);
   }
 }