diff --git a/projects/nshmp-apps/src/app/hazard/dynamic/services/app.service.ts b/projects/nshmp-apps/src/app/hazard/dynamic/services/app.service.ts
index 07a2865292a2e917caed9ce48fb673a4e7345b67..02276f6306cbb03b410379eba9f8884cabfa6374 100644
--- a/projects/nshmp-apps/src/app/hazard/dynamic/services/app.service.ts
+++ b/projects/nshmp-apps/src/app/hazard/dynamic/services/app.service.ts
@@ -41,7 +41,6 @@ import {
 import {NshmId} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/nshm';
 import {Parameter} from '@ghsc/nshmp-utils-ts/libs/nshmp-ws-utils/metadata';
 import {PlotlyPlot} from '@ghsc/nshmp-utils-ts/libs/plotly';
-import * as d3 from 'd3-scale-chromatic';
 import deepEqual from 'deep-equal';
 import {PlotData} from 'plotly.js';
 import {environment} from 'projects/nshmp-apps/src/environments/environment';
@@ -381,7 +380,11 @@ export class AppService
     form: DynamicHazardControlForm,
     returnPeriod: number
   ): PlotlyPlot {
-    const data = responseData.hazardCurves.map(response => {
+    const hazardCurves = responseData.hazardCurves.filter(
+      response => response.imt.value !== Imt.PGV.toString()
+    );
+
+    const data = hazardCurves.map((response, index) => {
       const imt = response.imt.value as Imt;
 
       const sourceTypeData = hazardUtils.getSourceTypeData(
@@ -396,12 +399,14 @@ export class AppService
 
       const plotlyData: Partial<PlotData> = {
         hovertemplate: '%{x} g, %{y} AFE',
+        line: {
+          color: hazardUtils.color(index, hazardCurves.length),
+        },
         mode: 'lines+markers',
         name:
           imt === Imt.PGA || imt === Imt.PGV
             ? imt
             : `${imtToPeriod(imt)} s ${imt.substring(0, 2)}`,
-        visible: imt !== Imt.PGV,
         x: xy.xs,
         y: xy.ys,
       };
@@ -527,10 +532,17 @@ export class AppService
     const lines: Partial<PlotData>[] = [];
 
     spectra.responseSpectrum.forEach((spectrum, iSpectra) => {
-      let color = d3.schemeCategory10[iSpectra];
+      let lineWidth = 2;
+      let markerSize = 7;
+
+      const color = hazardUtils.color(
+        iSpectra,
+        spectra.responseSpectrum.length
+      );
 
       if (spectrum.returnPeriod === returnPeriodValue) {
-        color = 'black';
+        lineWidth = 4;
+        markerSize = 12;
       }
 
       const spectraX: number[] = [];
@@ -548,7 +560,7 @@ export class AppService
             legendgroup: imt,
             marker: {
               color,
-              size: 7,
+              size: markerSize,
               symbol: 'square',
             },
             mode: 'markers',
@@ -567,6 +579,10 @@ export class AppService
         hovertemplate: '%{y} g',
         line: {
           color,
+          width: lineWidth,
+        },
+        marker: {
+          size: markerSize,
         },
         mode: 'lines+markers',
         name:
diff --git a/projects/nshmp-apps/src/app/hazard/static/services/app.service.ts b/projects/nshmp-apps/src/app/hazard/static/services/app.service.ts
index 4b74f773e5aa28c11358c9736a33f730694607e6..b184f2ca4073a6970e780039e1b14a7d410b60f0 100644
--- a/projects/nshmp-apps/src/app/hazard/static/services/app.service.ts
+++ b/projects/nshmp-apps/src/app/hazard/static/services/app.service.ts
@@ -42,7 +42,6 @@ import {
 import {StaticNshmMetadata} from '@ghsc/nshmp-utils-ts/libs/nshmp-ws-static/nshm-service';
 import {Parameter} from '@ghsc/nshmp-utils-ts/libs/nshmp-ws-utils/metadata';
 import {PlotlyPlot} from '@ghsc/nshmp-utils-ts/libs/plotly';
-import * as d3 from 'd3-scale-chromatic';
 import deepEqual from 'deep-equal';
 import {PlotData} from 'plotly.js';
 import {environment} from 'projects/nshmp-apps/src/environments/environment';
@@ -414,28 +413,33 @@ export class AppService
     form: HazardControlForm,
     returnPeriod: number
   ): PlotlyPlot {
-    let data = responseData
-      .filter(response => response.metadata.imt.value !== Imt.PGV.toString())
-      .map(response => {
-        const imt = response.metadata.imt.value as Imt;
-
-        const label = imt === Imt.PGA ? imt : `${imtToPeriod(imt)} s`;
-
-        const xy = hazardUtils.updateXySequence(
-          form,
-          hazardUtils.cleanXySequence(response.data),
-          imt
-        );
-        const plotlyData: Partial<PlotData> = {
-          hovertemplate: '%{x} g, %{y} AFE',
-          mode: 'lines+markers',
-          name: label,
-          x: xy.xs,
-          y: xy.ys,
-        };
-
-        return plotlyData;
-      });
+    const staticResponseData = responseData.filter(
+      response => response.metadata.imt.value !== Imt.PGV.toString()
+    );
+
+    let data = staticResponseData.map((response, index) => {
+      const imt = response.metadata.imt.value as Imt;
+
+      const label = imt === Imt.PGA ? imt : `${imtToPeriod(imt)} s`;
+
+      const xy = hazardUtils.updateXySequence(
+        form,
+        hazardUtils.cleanXySequence(response.data),
+        imt
+      );
+      const plotlyData: Partial<PlotData> = {
+        hovertemplate: '%{x} g, %{y} AFE',
+        line: {
+          color: hazardUtils.color(index, staticResponseData.length),
+        },
+        mode: 'lines+markers',
+        name: label,
+        x: xy.xs,
+        y: xy.ys,
+      };
+
+      return plotlyData;
+    });
 
     const metadata = [...responseData].shift().metadata;
     const layout = plotUtils.updatePlotLabels({
@@ -636,10 +640,13 @@ export class AppService
 
     returnPeriods.forEach((returnPeriod, iReturnPeriod) => {
       const spectrum = Maths.responseSpectrum(hazardCurves, returnPeriod);
-      let color = d3.schemeCategory10[iReturnPeriod];
+      let lineWidth = 2;
+      let markerSize = 7;
+      const color = hazardUtils.color(iReturnPeriod, returnPeriods.length);
 
       if (returnPeriod === returnPeriodValue) {
-        color = 'black';
+        lineWidth = 4;
+        markerSize = 12;
       }
 
       const spectraX: number[] = [];
@@ -657,7 +664,7 @@ export class AppService
             legendgroup: imt,
             marker: {
               color,
-              size: 7,
+              size: markerSize,
               symbol: 'square',
             },
             mode: 'markers',
@@ -676,6 +683,10 @@ export class AppService
         hovertemplate: '%{y} g',
         line: {
           color,
+          width: lineWidth,
+        },
+        marker: {
+          size: markerSize,
         },
         mode: 'lines+markers',
         name: returnPeriodAltName[returnPeriod] ?? `${returnPeriod} yr`,