diff --git a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/plot-settings-panel/plot-settings-panel.component.html b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/plot-settings-panel/plot-settings-panel.component.html
index 8775ecff78297c48171ee6cb44059c5c35067bb9..04a8e478cd20fcfd7c18410fc9f8c5a7c49bd147 100644
--- a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/plot-settings-panel/plot-settings-panel.component.html
+++ b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/plot-settings-panel/plot-settings-panel.component.html
@@ -1 +1 @@
-<p>plot-settings-panel works!</p>
+<nshmp-lib-ng-plot-settings-expansion-panel [plots]="plots()" />
diff --git a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/plot-settings-panel/plot-settings-panel.component.ts b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/plot-settings-panel/plot-settings-panel.component.ts
index 5d03478a56393ad21293558d704065a72184c301..828b597b96c2e7faa565dbd56ac69a9beaf95a35 100644
--- a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/plot-settings-panel/plot-settings-panel.component.ts
+++ b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/plot-settings-panel/plot-settings-panel.component.ts
@@ -1,10 +1,103 @@
-import {Component} from '@angular/core';
+import {Component, computed} from '@angular/core';
+import {
+  NshmpLibNgPlotSettingsExpansionPanelComponent,
+  NshmpPlot,
+  PlotSettingsPlots,
+} from '@ghsc/nshmp-lib-ng/plot';
+
+import {AppService} from '../../services/app.service';
 
 @Component({
-  imports: [],
+  imports: [NshmpLibNgPlotSettingsExpansionPanelComponent],
   selector: 'app-plot-settings-panel',
   standalone: true,
   styleUrl: './plot-settings-panel.component.scss',
   templateUrl: './plot-settings-panel.component.html',
 })
-export class PlotSettingsPanelComponent {}
+export class PlotSettingsPanelComponent {
+  plots = computed<PlotSettingsPlots[]>(() => {
+    const plots = this.service.plots();
+    const defaultPlots = this.service.defaultPlots();
+    const expanded = false;
+
+    return [
+      {
+        defaultPlotSetting: defaultPlots.temperature.settingsForm.getRawValue(),
+        expanded,
+        plot: plots.temperature,
+        updatePlot: plot => this.updateTemperature(plot),
+      },
+      {
+        defaultPlotSetting: defaultPlots.porosity.settingsForm.getRawValue(),
+        expanded,
+        plot: plots.porosity,
+        updatePlot: plot => this.updatePorosity(plot),
+      },
+      {
+        defaultPlotSetting: defaultPlots.vs.settingsForm.getRawValue(),
+        expanded,
+        plot: plots.vs,
+        updatePlot: plot => this.updateVs(plot),
+      },
+      {
+        defaultPlotSetting: defaultPlots.vp.settingsForm.getRawValue(),
+        expanded,
+        plot: plots.vp,
+        updatePlot: plot => this.updateVp(plot),
+      },
+      {
+        defaultPlotSetting: defaultPlots.density.settingsForm.getRawValue(),
+        expanded,
+        plot: plots.density,
+        updatePlot: plot => this.updateDensity(plot),
+      },
+    ];
+  });
+
+  constructor(public service: AppService) {}
+
+  updateDensity(density: NshmpPlot): void {
+    this.service.updateState({
+      plots: {
+        ...this.service.plots(),
+        density,
+      },
+    });
+  }
+
+  updatePorosity(porosity: NshmpPlot): void {
+    this.service.updateState({
+      plots: {
+        ...this.service.plots(),
+        porosity,
+      },
+    });
+  }
+
+  updateTemperature(temperature: NshmpPlot): void {
+    this.service.updateState({
+      plots: {
+        ...this.service.plots(),
+        temperature,
+      },
+    });
+  }
+
+  updateVp(vp: NshmpPlot): void {
+    this.service.updateState({
+      plots: {
+        ...this.service.plots(),
+        vp,
+      },
+    });
+  }
+
+  updateVs(vs: NshmpPlot): void {
+    this.service.updateState({
+      plots: {
+        ...this.service.plots(),
+        vs,
+      },
+    });
+  }
+}