diff --git a/extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts b/extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts
index f6d097897..497df2d54 100644
--- a/extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts
+++ b/extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts
@@ -249,6 +249,7 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
     const type = viewportInfo.getViewportType();
     const background = viewportInfo.getBackground();
     const orientation = viewportInfo.getOrientation();
+    const displayArea = viewportInfo.getDisplayArea();
 
     const viewportInput: Types.PublicViewportInput = {
       viewportId,
@@ -257,6 +258,7 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
       defaultOptions: {
         background,
         orientation,
+        displayArea,
       },
     };
 
diff --git a/extensions/cornerstone/src/services/ViewportService/Viewport.ts b/extensions/cornerstone/src/services/ViewportService/Viewport.ts
index 42fa56046..685652279 100644
--- a/extensions/cornerstone/src/services/ViewportService/Viewport.ts
+++ b/extensions/cornerstone/src/services/ViewportService/Viewport.ts
@@ -21,6 +21,7 @@ export type ViewportOptions = {
   presentationIds?: UITypes.PresentationIds;
   orientation?: Enums.OrientationAxis;
   background?: Types.Point3;
+  displayArea?: Types.DisplayArea;
   syncGroups?: SyncGroup[];
   initialImageOptions?: InitialImageOptions;
   customViewportProps?: Record<string, unknown>;
@@ -39,6 +40,7 @@ export type PublicViewportOptions = {
   viewportId?: string;
   orientation?: Enums.OrientationAxis;
   background?: Types.Point3;
+  displayArea?: Types.DisplayArea;
   syncGroups?: SyncGroup[];
   initialImageOptions?: InitialImageOptions;
   customViewportProps?: Record<string, unknown>;
@@ -265,6 +267,10 @@ class ViewportInfo {
     return this.viewportOptions.orientation;
   }
 
+  public getDisplayArea(): Types.DisplayArea {
+    return this.viewportOptions.displayArea;
+  }
+
   public getInitialImageOptions(): InitialImageOptions {
     return this.viewportOptions.initialImageOptions;
   }
diff --git a/platform/docs/docs/platform/extensions/modules/hpModule.md b/platform/docs/docs/platform/extensions/modules/hpModule.md
index 39d6408e5..922d9e04e 100644
--- a/platform/docs/docs/platform/extensions/modules/hpModule.md
+++ b/platform/docs/docs/platform/extensions/modules/hpModule.md
@@ -448,6 +448,7 @@ As you can see in the hanging protocol we defined three viewports (but only show
    - `toolGroupId`: tool group that will be used for the viewport (optional)
    - `initialImageOptions`: initial image options (optional - can be specific imageIndex number or preset (first, middle, last))
    - `syncGroups`: sync groups for the viewport (optional)
+   -The `displayArea` parameter refers to the designated area within the viewport where a specific portion of the image can be displayed. This parameter is optional and allows you to choose the location of the image within the viewport. For example, in mammography images, you can display the left breast on the left side of the viewport and the right breast on the right side, with the chest wall positioned in the middle. To understand how to define the display area, you can refer to the live example provided by CornerstoneJS [here](https://www.cornerstonejs.org/live-examples/programaticpanzoom).
 
 
 2. `displaySets`: defines the display sets that are displayed on a viewport. It is an array of objects, each object being one display set.