diff --git a/projects/nshmp-apps/src/app/hazard/disagg/components/plots/plots.component.html b/projects/nshmp-apps/src/app/hazard/disagg/components/plots/plots.component.html
index bac86fee0f7ef29aae7631a0063bfd963a201ced..18e337e2e16daed2bb005df63a0d3ae8ad398ba9 100644
--- a/projects/nshmp-apps/src/app/hazard/disagg/components/plots/plots.component.html
+++ b/projects/nshmp-apps/src/app/hazard/disagg/components/plots/plots.component.html
@@ -62,9 +62,49 @@
 
 <!-- Disagg plot -->
 <nshmp-lib-ng-hazard-disagg-plot
+  #disaggPlot
   [inputs]="{
+    allowDrag: true,
     component: form.value.disaggComponent,
     imt: form.value.imt,
     responseData: serviceResponse()?.response,
   }"
 />
+
+<div>
+  <div>
+    X:
+    <mat-slider min="-330" max="300" step="1">
+      <input
+        type="range"
+        matSliderThumb
+        [(ngModel)]="cameraOrigin.x"
+        (valueChange)="setOrigin()"
+      />
+    </mat-slider>
+  </div>
+
+  <div>
+    Y:
+    <mat-slider min="-330" max="300" step="1">
+      <input
+        type="range"
+        matSliderThumb
+        [(ngModel)]="cameraOrigin.y"
+        (valueChange)="setOrigin()"
+      />
+    </mat-slider>
+  </div>
+
+  <div>
+    Z:
+    <mat-slider min="-330" max="300" step="1">
+      <input
+        type="range"
+        matSliderThumb
+        [(ngModel)]="cameraOrigin.z"
+        (valueChange)="setOrigin()"
+      />
+    </mat-slider>
+  </div>
+</div>
diff --git a/projects/nshmp-apps/src/app/hazard/disagg/components/plots/plots.component.ts b/projects/nshmp-apps/src/app/hazard/disagg/components/plots/plots.component.ts
index 9e5b92f31000b1232e92a6aa643dabbfffa04a4d..e23c0ffa099a6cca334d45aba7d5e6eb520d19e4 100644
--- a/projects/nshmp-apps/src/app/hazard/disagg/components/plots/plots.component.ts
+++ b/projects/nshmp-apps/src/app/hazard/disagg/components/plots/plots.component.ts
@@ -1,16 +1,23 @@
 import {AsyncPipe} from '@angular/common';
-import {Component} from '@angular/core';
-import {ReactiveFormsModule} from '@angular/forms';
+import {Component, viewChild} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButton} from '@angular/material/button';
 import {MatOption} from '@angular/material/core';
 import {MatDivider} from '@angular/material/divider';
 import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatSelect} from '@angular/material/select';
+import {MatSliderModule} from '@angular/material/slider';
 import {NshmpLibNgHazardDisaggPlotComponent} from '@ghsc/nshmp-lib-ng/hazard';
 import {NshmpTemplateService} from '@ghsc/nshmp-template';
 
 import {AppService} from '../../services/app.service';
 
+interface CameraOrigin {
+  x: number;
+  y: number;
+  z: number;
+}
+
 /**
  * Disaggregation plot with select menu of component.
  */
@@ -25,6 +32,8 @@ import {AppService} from '../../services/app.service';
     MatOption,
     AsyncPipe,
     ReactiveFormsModule,
+    MatSliderModule,
+    FormsModule,
   ],
   selector: 'app-plots',
   standalone: true,
@@ -39,6 +48,14 @@ export class PlotsComponent {
   /** Disaggreagtion service response */
   serviceResponse = this.service.serviceResponse;
 
+  cameraOrigin: CameraOrigin = {
+    x: 280,
+    y: -150,
+    z: 180,
+  };
+
+  disaggPlot = viewChild.required(NshmpLibNgHazardDisaggPlotComponent);
+
   constructor(
     public service: AppService,
     public templateService: NshmpTemplateService
@@ -48,4 +65,13 @@ export class PlotsComponent {
   exportReport(): void {
     print();
   }
+
+  setOrigin(): void {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    this.disaggPlot().view.setOrigin(
+      this.cameraOrigin.x,
+      this.cameraOrigin.y,
+      this.cameraOrigin.z
+    );
+  }
 }