diff --git a/src/common/trajectories/view/view.component.html b/src/common/trajectories/view/view.component.html
index f76a3dd8..dbb47526 100644
--- a/src/common/trajectories/view/view.component.html
+++ b/src/common/trajectories/view/view.component.html
@@ -86,6 +86,8 @@ <h4 class="modal-title">{{'trajectories.view.change-color-header' | translate}}<
             tooltip="{{'trajectories.view.graph-ticks-tooltip' | translate}}" (onToggled)="onAxisTypeChanged($event)">
           </n52-string-toggler>
         </div>
+        <button type="button" class="btn btn-light" (click)="zoomOut()">Zoom Out
+        </button>
         <hr>
         <div class="chart-control">
           <n52-bool-toggler [value]="graphOptions.dotted" icon="line-chart"
diff --git a/src/common/trajectories/view/view.component.ts b/src/common/trajectories/view/view.component.ts
index 8b57d1c2..9aae62b2 100644
--- a/src/common/trajectories/view/view.component.ts
+++ b/src/common/trajectories/view/view.component.ts
@@ -28,6 +28,23 @@ export class TrajectoriesViewComponent implements OnInit {
 
     public zoomToGeometry: GeoJSON.LineString;
 
+    public zoomOut() {
+       // Calculate the new timespan by reducing the current timespan
+       const newTimespan = new Timespan(
+         this.timespan.from - (this.timespan.to - this.timespan.from) / 2,
+           this.timespan.to + (this.timespan.to - this.timespan.from) / 2
+    );
+
+       // Fetch new data based on the updated timespan
+        this.servicesConnector.getDatasetData(this.trajectory, newTimespan).subscribe(
+          data => {
+        this.graphData = data.values;
+        this.timespan = new Timespan(newTimespan.from, newTimespan.to);
+        this.selectedTimespan = new Timespan(newTimespan.from, newTimespan.to);
+        }
+      );
+   }
+
     public timespan: Timespan;
 
     public datasetIds: Array<string>;