diff --git a/apps/cde-ui/src/app/components/file-upload/file-upload.component.scss b/apps/cde-ui/src/app/components/file-upload/file-upload.component.scss
index 53bf58dd7..c92ddbe76 100644
--- a/apps/cde-ui/src/app/components/file-upload/file-upload.component.scss
+++ b/apps/cde-ui/src/app/components/file-upload/file-upload.component.scss
@@ -1,28 +1,4 @@
 :host {
-  // .upload-success {
-  //   height: 2.5rem;
-  //   display: flex;
-  //   align-items: center;
-  //   padding: 0 1rem;
-  //   background: var(--sys-surface-container);
-  //   gap: 0.5rem;
-  //   border-radius: 1rem;
-  //   font: var(--sys-label-large);
-
-  //   .filename {
-  //     display: flex;
-  //   }
-
-  //   .file-name {
-  //     color: var(--sys-primary);
-  //   }
-
-  //   .remove-file {
-  //     color: var(--sys-secondary);
-  //     cursor: pointer;
-  //   }
-  // }
-
   hra-error-indicator {
     margin-bottom: 2rem;
   }
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 69b483ad7..61b01d461 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
@@ -17,7 +17,7 @@
     <h1 class="title">Create a Cell Distance Visualization</h1>
   </div>
 
-  <div class="card data-upload">
+  <hra-workflow-card class="card data-upload" [allowUpload]="true" [loadProgress]="nodeProgress">
     <h2 class="header">
       <hra-step-indicator class="step-number" [value]="1"></hra-step-indicator>
       <span class="card-title">Upload Data</span>
@@ -84,15 +84,16 @@ <h2 class="header">
       (loadStarted)="clearNodes()"
       (loadCompleted)="setNodes($event[0])"
       (loadCancelled)="clearNodes()"
-      (loadErrored)="nodesLoadError = $event"
+      (loadErrored)="nodesLoadError = $event; nodeProgress = 0"
       [errorMessage]="nodesErrorMessage"
       [errorActionMessage]="nodesErrorActionMessage"
+      (progress)="nodeProgress = $event"
       #nodesFileUpload
     >
     </cde-file-upload>
-  </div>
+  </hra-workflow-card>
 
-  <div class="card organize-data" formGroupName="headers">
+  <hra-workflow-card class="card organize-data" formGroupName="headers">
     <h2 class="header">
       <hra-step-indicator class="step-number" [value]="2"></hra-step-indicator>
       <span class="card-title">Organize Data</span>
@@ -200,9 +201,9 @@ <h2 class="header">
         </mat-select>
       </mat-form-field>
     </div>
-  </div>
+  </hra-workflow-card>
 
-  <div class="card parameters" formGroupName="parameters">
+  <hra-workflow-card class="card parameters" formGroupName="parameters">
     <h2 class="header">
       <hra-step-indicator class="step-number" [value]="3"></hra-step-indicator>
       <div class="card-title">Configure Parameters</div>
@@ -265,9 +266,9 @@ <h2 class="header">
         <input matInput type="number" formControlName="pixelSizeZ" min="0" cdeMarkEmptyFormControl />
       </mat-form-field>
     </div>
-  </div>
+  </hra-workflow-card>
 
-  <div class="card metadata" formGroupName="metadata">
+  <hra-workflow-card class="card metadata" formGroupName="metadata">
     <h2 class="header">
       <hra-step-indicator class="step-number" [value]="4"></hra-step-indicator>
       <div class="card-title">Optional: Add Metadata</div>
@@ -293,55 +294,66 @@ <h2 class="header">
       </ng-template>
     </h2>
 
-    <mat-form-field subscriptSizing="dynamic">
-      <mat-label>Visualization Title</mat-label>
-      <input matInput formControlName="title" cdeMarkEmptyFormControl />
-    </mat-form-field>
-
-    <mat-form-field subscriptSizing="dynamic">
-      <mat-label>Imaging Technology</mat-label>
-      <input matInput formControlName="technology" cdeMarkEmptyFormControl />
-    </mat-form-field>
-
-    <mat-form-field hraSelectSize="medium" subscriptSizing="dynamic">
-      <mat-label>Organ</mat-label>
-      <mat-select
-        disableRipple
-        formControlName="organ"
-        [panelClass]="['options-container', 'options-container-medium']"
-        cdeMarkEmptyFormControl
-      >
-        @for (organ of organs(); track organ) {
-          <mat-option [value]="organ">{{ organ.label | titlecase }}</mat-option>
-        }
-      </mat-select>
-    </mat-form-field>
-
-    <mat-form-field hraSelectSize="medium" subscriptSizing="dynamic">
-      <mat-label>Sex</mat-label>
-      <mat-select
-        disableRipple
-        formControlName="sex"
-        [panelClass]="['options-container', 'options-container-medium']"
-        cdeMarkEmptyFormControl
-      >
-        <mat-option value="Male">Male</mat-option>
-        <mat-option value="Female">Female</mat-option>
-      </mat-select>
-    </mat-form-field>
-
-    <mat-form-field subscriptSizing="dynamic">
-      <mat-label>Age</mat-label>
-      <input matInput type="number" formControlName="age" min="0" max="120" cdeMarkEmptyFormControl />
-    </mat-form-field>
-
-    <mat-form-field subscriptSizing="dynamic">
-      <mat-label>Thickness (µm)</mat-label>
-      <input matInput type="number" formControlName="thickness" min="0" cdeMarkEmptyFormControl />
-    </mat-form-field>
-  </div>
+    <div class="row">
+      <mat-form-field subscriptSizing="dynamic">
+        <mat-label>Visualization Title</mat-label>
+        <input matInput formControlName="title" cdeMarkEmptyFormControl />
+      </mat-form-field>
+
+      <mat-form-field subscriptSizing="dynamic">
+        <mat-label>Imaging Technology</mat-label>
+        <input matInput formControlName="technology" cdeMarkEmptyFormControl />
+      </mat-form-field>
+    </div>
+
+    <div class="row">
+      <mat-form-field hraSelectSize="medium" subscriptSizing="dynamic">
+        <mat-label>Organ</mat-label>
+        <mat-select
+          disableRipple
+          formControlName="organ"
+          [panelClass]="['options-container', 'options-container-medium']"
+          cdeMarkEmptyFormControl
+        >
+          @for (organ of organs(); track organ) {
+            <mat-option [value]="organ">{{ organ.label | titlecase }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field hraSelectSize="medium" subscriptSizing="dynamic">
+        <mat-label>Sex</mat-label>
+        <mat-select
+          disableRipple
+          formControlName="sex"
+          [panelClass]="['options-container', 'options-container-medium']"
+          cdeMarkEmptyFormControl
+        >
+          <mat-option value="Male">Male</mat-option>
+          <mat-option value="Female">Female</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+
+    <div class="row">
+      <mat-form-field subscriptSizing="dynamic">
+        <mat-label>Age</mat-label>
+        <input matInput type="number" formControlName="age" min="0" max="120" cdeMarkEmptyFormControl />
+      </mat-form-field>
 
-  <div class="color-config card" [class.custom]="useCustomColorMap">
+      <mat-form-field subscriptSizing="dynamic">
+        <mat-label>Thickness (µm)</mat-label>
+        <input matInput type="number" formControlName="thickness" min="0" cdeMarkEmptyFormControl />
+      </mat-form-field>
+    </div>
+  </hra-workflow-card>
+
+  <hra-workflow-card
+    class="color-config card"
+    [class.custom]="useCustomColorMap"
+    [allowUpload]="true"
+    [loadProgress]="colorProgress"
+  >
     <h2 class="header">
       <hra-step-indicator class="step-number" [value]="5"></hra-step-indicator>
       <div class="card-title">Optional: Configure Colors</div>
@@ -413,17 +425,18 @@ <h2 class="header">
         [options]="colorMapLoaderOptions"
         (loadCompleted)="setCustomColorMap($event[0])"
         (loadCancelled)="clearCustomColorMap()"
-        (loadErrored)="customColorMapLoadError = $event"
+        (loadErrored)="customColorMapLoadError = $event; colorProgress = 0"
         [errorMessage]="colorErrorMessage"
         [errorActionMessage]="colorErrorActionMessage"
+        (progress)="colorProgress = $event"
         #customColorMapFileUpload
         data-testid="color-map-upload"
       >
       </cde-file-upload>
     }
-  </div>
+  </hra-workflow-card>
 
-  <div class="card visualize">
+  <hra-workflow-card class="card visualize">
     <h2 class="header">
       <hra-step-indicator class="step-number" [value]="6"></hra-step-indicator>
       <div class="card-title">Visualize Cell Distance Data</div>
@@ -455,6 +468,7 @@ <h2 class="header">
     }
 
     <button
+      class="visualize-button"
       mat-flat-button
       hraCallToActionButton
       hraPrimaryButton
@@ -466,6 +480,6 @@ <h2 class="header">
       Visualize
       <mat-icon class="material-symbols-rounded" iconPositionEnd>arrow_right_alt</mat-icon>
     </button>
-  </div>
+  </hra-workflow-card>
 </form>
 <hra-footer></hra-footer>
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 63ad977c5..17c15df28 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
@@ -43,32 +43,25 @@
     }
   }
 
-  .card {
-    box-shadow: 0rem 0.3125rem 1rem 0rem #201e3d3d;
-    border-radius: 1rem;
-    padding: 2rem;
-    width: 42rem;
-
-    .header {
-      grid-area: header;
-      display: flex;
-      align-items: center;
-      height: 2.5rem;
-      margin: 0 0 2rem 0;
+  .header {
+    grid-area: header;
+    display: flex;
+    align-items: center;
+    height: 2.5rem;
+    margin: 0;
 
-      .step-number {
-        margin-right: 0.75rem;
-      }
+    .step-number {
+      margin-right: 0.75rem;
+    }
 
-      .card-title {
-        margin-right: 0.75rem;
-        font: var(--sys-title-large);
-      }
+    .card-title {
+      margin-right: 0.75rem;
+      font: var(--sys-title-large);
+    }
 
-      .info {
-        margin: 0.25rem;
-        cursor: pointer;
-      }
+    .info {
+      margin: 0.25rem;
+      cursor: pointer;
     }
   }
 
@@ -103,24 +96,6 @@
     height: 3rem;
   }
 
-  .data-upload {
-    display: grid;
-    grid:
-      'header header'
-      'table table'
-      'upload-csv .' / auto 1fr;
-    grid-template-rows: auto auto auto;
-    row-gap: 2rem;
-
-    .header {
-      margin-bottom: 0;
-    }
-
-    .upload-csv {
-      grid-area: upload-csv;
-    }
-  }
-
   .organize-data {
     .required-headers,
     .optional-headers {
@@ -130,10 +105,6 @@
       font: var(--sys-label-large);
     }
 
-    .optional-headers {
-      margin-top: 2rem;
-    }
-
     .subheader {
       grid-area: subheader;
       margin-bottom: 1rem;
@@ -145,71 +116,47 @@
   }
 
   .parameters {
-    .parameters-1 {
+    .parameters-1,
+    .parameters-2 {
       display: grid;
-      grid: '. .';
       column-gap: 1.5rem;
-      margin-bottom: 2rem;
+    }
+
+    .parameters-1 {
+      grid: '. .';
     }
 
     .parameters-2 {
-      display: grid;
       grid: '. . .';
-      column-gap: 1.5rem;
     }
   }
 
   .metadata {
-    display: grid;
-    gap: 2rem;
-    column-gap: 1.5rem;
-    grid: 'header header';
+    .row {
+      display: flex;
+      justify-content: space-between;
+      gap: 1.5rem;
 
-    .header {
-      grid-area: header;
-      margin-bottom: 0;
+      mat-form-field {
+        flex-grow: 1;
+      }
     }
   }
 
   .color-config {
-    display: grid;
-    grid:
-      'header header'
-      'toggle toggle' / auto 1fr;
-
-    &.custom {
-      grid:
-        'header header'
-        'toggle toggle'
-        'table table'
-        'upload-colormap .' / auto 1fr;
-    }
-
     table {
       width: 66%;
-      margin-top: 2rem;
 
       th,
       td {
         min-width: 0;
       }
     }
-
-    mat-button-toggle-group {
-      grid-area: toggle;
-    }
-
-    .upload-colormap {
-      grid-area: upload-colormap;
-      margin-top: 2rem;
-    }
   }
 
   .visualize {
     .visualize-button {
-      mat-icon {
-        margin-left: 0.25rem;
-      }
+      width: fit-content;
     }
   }
 }
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 46ce5fa63..a243abf82 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
@@ -30,6 +30,7 @@ import { CardData, NavHeaderComponent } from '@hra-ui/design-system/nav-header';
 import { SelectSizeDirective } from '@hra-ui/design-system/select';
 import { StepIndicatorComponent } from '@hra-ui/design-system/step-indicator';
 import { TooltipCardComponent, TooltipContent } from '@hra-ui/design-system/tooltip-card';
+import { WorkflowCardComponent } from '@hra-ui/design-system/workflow-card';
 import { ParseError } from 'papaparse';
 
 import { MarkEmptyFormControlDirective } from '../../components/empty-form-control/empty-form-control.directive';
@@ -181,6 +182,7 @@ function optionalValue<T>(): T | null {
     ToggleButtonSizeDirective,
     TooltipCardComponent,
     ErrorIndicatorComponent,
+    WorkflowCardComponent,
   ],
   templateUrl: './create-visualization-page.component.html',
   styleUrl: './create-visualization-page.component.scss',
@@ -354,6 +356,11 @@ export class CreateVisualizationPageComponent {
   /** Color map CSV load error */
   customColorMapLoadError?: ExtendedFileLoadError;
 
+  /** Node CSV load progress*/
+  nodeProgress = 0;
+  /** Color map CSV load progress */
+  colorProgress = 0;
+
   /** Error message for nodes uploading */
   get nodesErrorMessage(): string {
     return this.nodesLoadError ? this.formatErrorMessage(this.nodesLoadError) : '';
@@ -450,6 +457,7 @@ export class CreateVisualizationPageComponent {
    * Clears all nodes and node load errors
    */
   clearNodes(): void {
+    this.nodeProgress = 0;
     this.nodes = undefined;
     this.nodesLoadError = undefined;
     this.setHeaders([]);
@@ -507,6 +515,7 @@ export class CreateVisualizationPageComponent {
    * Clears custom color map
    */
   clearCustomColorMap(): void {
+    this.colorProgress = 0;
     this.customColorMap = undefined;
     this.customColorMapLoadError = undefined;
   }
diff --git a/libs/design-system/workflow-card/ng-package.json b/libs/design-system/workflow-card/ng-package.json
new file mode 100644
index 000000000..c781f0df4
--- /dev/null
+++ b/libs/design-system/workflow-card/ng-package.json
@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}
diff --git a/libs/design-system/workflow-card/src/index.ts b/libs/design-system/workflow-card/src/index.ts
new file mode 100644
index 000000000..184212aef
--- /dev/null
+++ b/libs/design-system/workflow-card/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/workflow-card.component';
diff --git a/libs/design-system/workflow-card/src/lib/workflow-card.component.html b/libs/design-system/workflow-card/src/lib/workflow-card.component.html
new file mode 100644
index 000000000..cb3191533
--- /dev/null
+++ b/libs/design-system/workflow-card/src/lib/workflow-card.component.html
@@ -0,0 +1,11 @@
+<div class="content" [class.allow-upload]="allowUpload()">
+  <ng-content></ng-content>
+</div>
+@if (allowUpload()) {
+  <mat-progress-bar
+    mode="determinate"
+    [class.ready]="loadProgress() === 0"
+    [class.fully-loaded]="loadProgress() === 1"
+    [value]="loadProgress() * 100"
+  ></mat-progress-bar>
+}
diff --git a/libs/design-system/workflow-card/src/lib/workflow-card.component.scss b/libs/design-system/workflow-card/src/lib/workflow-card.component.scss
new file mode 100644
index 000000000..b564af7ce
--- /dev/null
+++ b/libs/design-system/workflow-card/src/lib/workflow-card.component.scss
@@ -0,0 +1,36 @@
+:host {
+  display: block;
+  width: 42rem;
+  border-radius: 1rem;
+  overflow: hidden;
+  box-shadow: 0rem 0.3125rem 1rem 0rem rgb(from var(--sys-shadow) r g b / 0.24);
+  background-color: white;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    padding: 2rem;
+
+    &.allow-upload {
+      padding-bottom: 1.5rem;
+    }
+  }
+
+  mat-progress-bar {
+    --mdc-linear-progress-track-height: 0.5rem;
+    --mdc-linear-progress-active-indicator-height: 0.5rem;
+    --mdc-linear-progress-active-indicator-color: var(--sys-inverse-surface);
+    --mdc-linear-progress-track-color: var(--sys-surface-container-high);
+
+    &.ready {
+      --mdc-linear-progress-track-color: transparent;
+      --mdc-linear-progress-active-indicator-color: transparent;
+    }
+
+    &.fully-loaded {
+      opacity: 0;
+      transition-delay: 0.5s;
+    }
+  }
+}
diff --git a/libs/design-system/workflow-card/src/lib/workflow-card.component.stories.ts b/libs/design-system/workflow-card/src/lib/workflow-card.component.stories.ts
new file mode 100644
index 000000000..66c940225
--- /dev/null
+++ b/libs/design-system/workflow-card/src/lib/workflow-card.component.stories.ts
@@ -0,0 +1,44 @@
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { WorkflowCardComponent } from './workflow-card.component';
+
+const meta: Meta = {
+  title: 'WorkflowCardComponent',
+  decorators: [
+    moduleMetadata({
+      imports: [WorkflowCardComponent],
+    }),
+  ],
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/Explorer-Components?node-id=1286-4',
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<WorkflowCardComponent>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+    <hra-workflow-card>
+      <div>HEADER</div>
+      <div>placeholder row content</div>
+      <div>placeholder row content</div>
+      <div>placeholder row content</div>
+      <div>placeholder row content</div>
+    </hra-workflow-card>
+    `,
+    styles: [
+      `div {
+        height: 3rem;
+        text-align: center;
+        font: var(--sys-display-small);
+        letter-spacing: var(--sys-display-small-tracking);
+        color: var(--sys-tertiary);
+        background: var(--sys-outline-variant);
+      }`,
+    ],
+  }),
+};
diff --git a/libs/design-system/workflow-card/src/lib/workflow-card.component.ts b/libs/design-system/workflow-card/src/lib/workflow-card.component.ts
new file mode 100644
index 000000000..24e186978
--- /dev/null
+++ b/libs/design-system/workflow-card/src/lib/workflow-card.component.ts
@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+
+/**
+ * Component that appears when users are completing a workflow process
+ */
+@Component({
+  selector: 'hra-workflow-card',
+  standalone: true,
+  imports: [CommonModule, MatProgressBarModule],
+  templateUrl: './workflow-card.component.html',
+  styleUrl: './workflow-card.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WorkflowCardComponent {
+  /** Current data load progress */
+  loadProgress = input<number>(0);
+
+  /** Whether the card allows uploading of files */
+  allowUpload = input<boolean>(false);
+}
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 52c65732b..7e2e470a9 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -152,6 +152,9 @@
       "@hra-ui/design-system/tree": [
         "libs/design-system/tree/src/index.ts"
       ],
+      "@hra-ui/design-system/workflow-card": [
+        "libs/design-system/workflow-card/src/index.ts"
+      ],
       "@hra-ui/services": [
         "libs/services/src/index.ts"
       ],