diff --git a/apps/cde-ui/src/app/models/create-visualization-page-types.ts b/apps/cde-ui/src/app/models/create-visualization-page-types.ts
index 3c92fc800..db5fdec5c 100644
--- a/apps/cde-ui/src/app/models/create-visualization-page-types.ts
+++ b/apps/cde-ui/src/app/models/create-visualization-page-types.ts
@@ -1,3 +1,5 @@
+import { CellTypeTableData } from '../services/cell-type-data-service';
+
 export type ColorMap = Record<string, [number, number, number]>;
 
 export interface VisualizationSettings {
@@ -7,14 +9,6 @@ export interface VisualizationSettings {
   colorMap: ColorMap;
 }
 
-export interface CellTypeTableData {
-  x: number;
-  y: number;
-  cellType: string;
-  z?: number;
-  ontologyId?: string;
-}
-
 export interface MetaData {
   title?: string;
   sex: string;
diff --git a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.html b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.html
index 3155b5340..8e5a73588 100644
--- a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.html
+++ b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.html
@@ -3,10 +3,10 @@ <h1 class="title">Create a Cell Distance Visualization</h1>
 
   <mat-card class="creation-step data">
     <mat-card-header>
-      <mat-card-title>
-        <div class="step-number">1</div>
+      <h2 mat-card-title class="step-title">
+        <span class="step-number">1</span>
         Format and Upload Data
-      </mat-card-title>
+      </h2>
     </mat-card-header>
     <mat-card-actions>
       <div class="left-side">
@@ -63,10 +63,10 @@ <h3 class="subtitle">Cell Type Table Template</h3>
 
   <mat-card class="creation-step anchor">
     <mat-card-header>
-      <mat-card-title>
-        <div class="step-number">2</div>
+      <h2 mat-card-title class="step-title">
+        <span class="step-number">2</span>
         Optional: Select Anchor Cell Type
-      </mat-card-title>
+      </h2>
     </mat-card-header>
     <mat-card-actions>
       <mat-form-field class="anchor-select">
@@ -81,10 +81,10 @@ <h3 class="subtitle">Cell Type Table Template</h3>
 
   <mat-card class="creation-step metadata" formGroupName="metadata">
     <mat-card-header>
-      <mat-card-title>
-        <div class="step-number">3</div>
+      <h2 mat-card-title class="step-title">
+        <span class="step-number">3</span>
         Add Metadata
-      </mat-card-title>
+      </h2>
     </mat-card-header>
     <mat-card-actions>
       <div class="row-1">
@@ -153,10 +153,10 @@ <h3 class="subtitle">Cell Type Table Template</h3>
 
   <mat-card class="creation-step colors">
     <mat-card-header>
-      <mat-card-title>
-        <div class="step-number">4</div>
+      <h2 mat-card-title class="step-title">
+        <span class="step-number">4</span>
         Optional: Configure Color Map
-      </mat-card-title>
+      </h2>
     </mat-card-header>
     <mat-card-actions>
       <mat-button-toggle-group aria-label="Font Style" formControlName="colorMapOption">
@@ -212,10 +212,10 @@ <h3 class="subtitle">Color Map Template</h3>
 
   <mat-card class="creation-step visualize">
     <mat-card-header>
-      <mat-card-title>
-        <div class="step-number">5</div>
+      <h2 mat-card-title class="step-title">
+        <span class="step-number">5</span>
         Visualize Cell Distance Data
-      </mat-card-title>
+      </h2>
     </mat-card-header>
     <mat-card-actions>
       <button type="submit" mat-button (click)="onSubmit()">Visualize</button>
diff --git a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.scss b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.scss
index 6d90f99db..94746290f 100644
--- a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.scss
+++ b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.scss
@@ -1,7 +1,4 @@
 :host {
-  --mat-card-title-text-font: 'Metropolis';
-  --mat-card-title-text-size: 42px;
-  --mat-card-title-text-line-height: 52.5px;
   --mdc-elevated-card-container-shape: 1rem;
   --mdc-elevated-card-container-elevation: 0px 5px 16px 0px #201e3d3d;
 
@@ -70,28 +67,28 @@
       margin: 0;
     }
 
+    .step-title {
+      display: flex;
+
+      .step-number {
+        width: 56px;
+        height: 56px;
+        background: #464954;
+        text-align: center;
+        padding: 1rem;
+        line-height: 28px;
+        margin-right: 1.5rem;
+        border-radius: 50%;
+        font-size: 24px;
+        color: white;
+      }
+    }
+
     mat-card {
       padding: 3.5rem 4rem;
 
       mat-card-header {
         padding: 0 0 3rem;
-
-        mat-card-title {
-          display: flex;
-
-          .step-number {
-            width: 56px;
-            height: 56px;
-            background: #464954;
-            text-align: center;
-            padding: 1rem;
-            line-height: 28px;
-            margin-right: 1.5rem;
-            border-radius: 50%;
-            font-size: 24px;
-            color: white;
-          }
-        }
       }
 
       mat-card-actions {
diff --git a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts
index 84d76d290..18f6cac7c 100644
--- a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts
+++ b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts
@@ -9,9 +9,9 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { produce } from 'immer';
+import { parse } from 'papaparse';
 
 import {
-  CellTypeTableData,
   ColorMap,
   CsvType,
   DEFAULT_COLOR_MAP,
@@ -20,8 +20,12 @@ import {
   MetadataSelectOption,
   VisualizationSettings,
 } from '../../models/create-visualization-page-types';
-import { CellTypeDataService } from '../../services/cell-type-data-service';
-import { MockCellTypeDataService } from '../../services/service.mock';
+import {
+  CellTypeData,
+  CellTypeDataService,
+  CellTypeTableData,
+  ColorMapData,
+} from '../../services/cell-type-data-service';
 
 @Component({
   selector: 'cde-create-visualization-page',
@@ -38,12 +42,7 @@ import { MockCellTypeDataService } from '../../services/service.mock';
     ReactiveFormsModule,
     MatIconModule,
   ],
-  providers: [
-    {
-      provide: CellTypeDataService,
-      useExisting: MockCellTypeDataService,
-    },
-  ],
+  providers: [CellTypeDataService],
   templateUrl: './create-visualization-page.component.html',
   styleUrl: './create-visualization-page.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -129,12 +128,15 @@ export class CreateVisualizationPageComponent {
     }
 
     const file = inputTarget.files[0];
-    const fileReader = new FileReader();
-
-    fileReader.onload = () => {
-      if (type === 'data') {
-        this.cellTypeDataService.getCellTypeData().then((result) => {
-          this.cellTypes = result.map((result) => {
+    parse(file, {
+      header: true,
+      skipEmptyLines: true,
+      dynamicTyping: true,
+      complete: (r) => {
+        if (type === 'data') {
+          const data = r.data as CellTypeData;
+          const results = this.cellTypeDataService.getCellTypeData(data);
+          this.cellTypes = results.map((result) => {
             return {
               value: result.cellType,
               viewValue: result.cellType
@@ -144,14 +146,13 @@ export class CreateVisualizationPageComponent {
             };
           });
           this.setDefaultCellType();
-          this.uploadedData = result;
-        });
-      } else {
-        this.cellTypeDataService.getColorMap().then((result) => {
-          this.colorMap = result;
-        });
-      }
-    };
+          this.uploadedData = results;
+        } else {
+          const data = r.data as ColorMapData;
+          this.colorMap = this.cellTypeDataService.getColorMap(data);
+        }
+      },
+    });
 
     if (type === 'data') {
       this.dataUploaded = true;
@@ -160,7 +161,6 @@ export class CreateVisualizationPageComponent {
       this.colorMapUploaded = true;
       this.uploadedColorMapFile = file.name;
     }
-    fileReader.readAsText(file);
   }
 
   removeFile(type: CsvType) {
diff --git a/apps/cde-ui/src/app/services/cell-type-data-service.ts b/apps/cde-ui/src/app/services/cell-type-data-service.ts
index afb9956b6..d03adf7d3 100644
--- a/apps/cde-ui/src/app/services/cell-type-data-service.ts
+++ b/apps/cde-ui/src/app/services/cell-type-data-service.ts
@@ -1,9 +1,60 @@
 import { Injectable } from '@angular/core';
-import { CellTypeTableData, ColorMap } from '../models/create-visualization-page-types';
+import { z } from 'zod';
 
-@Injectable()
-export abstract class CellTypeDataService {
-  abstract getCellTypeData(): Promise<CellTypeTableData[]>;
+import { ColorMap } from '../models/create-visualization-page-types';
 
-  abstract getColorMap(): Promise<ColorMap>;
+export interface CellTypeTableData {
+  x: number;
+  y: number;
+  cellType: string;
+  z?: number;
+  ontologyId?: string;
+}
+
+const CELL_TYPE_DATA = z
+  .object({
+    x: z.number(),
+    y: z.number(),
+    z: z.number().optional(),
+    Cell_Type: z.string(),
+    Ontology_ID: z.string().optional(),
+  })
+  .array();
+
+export type CellTypeData = z.infer<typeof CELL_TYPE_DATA>;
+
+const COLOR_MAP_DATA = z
+  .object({
+    cell: z.string(),
+    R: z.number(),
+    G: z.number(),
+    B: z.number(),
+  })
+  .array();
+
+export type ColorMapData = z.infer<typeof COLOR_MAP_DATA>;
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CellTypeDataService {
+  getCellTypeData(cellTypeData: CellTypeData): CellTypeTableData[] {
+    return cellTypeData.map((row) => {
+      return {
+        x: row.x,
+        y: row.y,
+        z: row.z,
+        cellType: row.Cell_Type,
+        ontologyId: row.Ontology_ID,
+      };
+    });
+  }
+
+  getColorMap(colorMapData: ColorMapData): ColorMap {
+    const result: ColorMap = {};
+    colorMapData.forEach((row) => {
+      result[row.cell] = [row.R, row.G, row.B];
+    });
+    return result;
+  }
 }
diff --git a/apps/cde-ui/src/app/services/service.mock.ts b/apps/cde-ui/src/app/services/service.mock.ts
deleted file mode 100644
index 102e95f6f..000000000
--- a/apps/cde-ui/src/app/services/service.mock.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Injectable } from '@angular/core';
-import { parse } from 'papaparse';
-import { CellTypeDataService } from './cell-type-data-service';
-import { CellTypeTableData, ColorMap } from '../models/create-visualization-page-types';
-import { z } from 'zod';
-
-const MOCK_ENDPOINT = 'assets/TEMP/mock-cell-type-data.csv';
-const MOCK_COLOR_ENDPOINT = 'assets/TEMP/mock-color-map-data.csv';
-
-const CELL_TYPE_DATA = z
-  .object({
-    x: z.number(),
-    y: z.number(),
-    z: z.number().optional(),
-    Cell_Type: z.string(),
-    Ontology_ID: z.string().optional(),
-  })
-  .array();
-
-type CellTypeData = z.infer<typeof CELL_TYPE_DATA>;
-
-const COLOR_MAP_DATA = z
-  .object({
-    cell: z.string(),
-    R: z.number(),
-    G: z.number(),
-    B: z.number(),
-  })
-  .array();
-
-type ColorMapData = z.infer<typeof COLOR_MAP_DATA>;
-
-async function fetchFromCsv(endpoint: string) {
-  return fetch(endpoint, {
-    headers: {
-      Accept: 'text/csv',
-    },
-  })
-    .then((r) => r.text())
-    .then((r) => parse(r, { header: true, skipEmptyLines: true, dynamicTyping: true }).data);
-}
-
-@Injectable({
-  providedIn: 'root',
-})
-export class MockCellTypeDataService extends CellTypeDataService {
-  override async getCellTypeData(datasetsApi = MOCK_ENDPOINT): Promise<CellTypeTableData[]> {
-    const cellTypeData = (await fetchFromCsv(datasetsApi)) as CellTypeData;
-    const results: CellTypeTableData[] = [];
-    for (const row of cellTypeData) {
-      results.push({
-        x: row.x,
-        y: row.y,
-        z: row.z,
-        cellType: row.Cell_Type,
-        ontologyId: row.Ontology_ID,
-      });
-    }
-    return results;
-  }
-
-  override async getColorMap(colorMapApi = MOCK_COLOR_ENDPOINT): Promise<ColorMap> {
-    const colorMapData = (await fetchFromCsv(colorMapApi)) as ColorMapData;
-    const results: ColorMap = {};
-    for (const row of colorMapData) {
-      results[row.cell] = [row.R, row.G, row.B];
-    }
-    return results;
-  }
-}
diff --git a/apps/cde-ui/src/assets/TEMP/mock-cell-type-data.csv b/apps/cde-ui/src/assets/TEMP/mock-cell-type-data.csv
deleted file mode 100644
index 1c5c31f31..000000000
--- a/apps/cde-ui/src/assets/TEMP/mock-cell-type-data.csv
+++ /dev/null
@@ -1,5 +0,0 @@
-x,y,z,Cell_Type,Ontology_ID
-1,2,3,type a,abc
-2,3,4,type b,def
-3,4,5,type c,ghi
-4,5,6,type d,jkl
diff --git a/apps/cde-ui/src/assets/TEMP/mock-color-map-data.csv b/apps/cde-ui/src/assets/TEMP/mock-color-map-data.csv
deleted file mode 100644
index 81c6945b0..000000000
--- a/apps/cde-ui/src/assets/TEMP/mock-color-map-data.csv
+++ /dev/null
@@ -1,3 +0,0 @@
-cell,R,G,B
-cell 1,12,24,35
-cell 2,33,73,24
diff --git a/apps/cde-ui/src/assets/fonts/fonts.scss b/apps/cde-ui/src/assets/fonts/fonts.scss
deleted file mode 100644
index ef57edf85..000000000
--- a/apps/cde-ui/src/assets/fonts/fonts.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@font-face {
-  font-family: 'Metropolis';
-  font-style: normal;
-  font-weight: 400;
-  src: url('./metropolis.regular.otf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Metropolis';
-  font-style: bold;
-  font-weight: 500;
-  src: url('./metropolis.medium.otf') format('truetype');
-}