diff --git a/app/src/modules/builder/zone/zoneCreator/zoneCreator.tsx b/app/src/modules/builder/zone/zoneCreator/zoneCreator.tsx
index c5c6ef4..f181d2a 100644
--- a/app/src/modules/builder/zone/zoneCreator/zoneCreator.tsx
+++ b/app/src/modules/builder/zone/zoneCreator/zoneCreator.tsx
@@ -9,6 +9,8 @@ import { getUserData } from "../../../../functions/getUserData";
 import ReferencePoint from "../../point/reference/referencePoint";
 import ReferenceZone from "./referenceZone";
 
+import getCenteroidPoint from "../../functions/getCenteroid";
+
 import { upsertZoneApi } from "../../../../services/factoryBuilder/zone/upsertZoneApi";
 
 function ZoneCreator() {
@@ -95,14 +97,17 @@ function ZoneCreator() {
             }
 
             if (tempPoints.length > 2 && isCreating && snappedPoint && snappedPoint.pointUuid === tempPoints[0].pointUuid) {
+                const vec2Points = tempPoints.map((p) => new THREE.Vector2(parseFloat(p.position[0].toFixed(2)), parseFloat(p.position[2].toFixed(2))));
+                const viewPortPosition = getCenteroidPoint(vec2Points);
+
                 const zone: Zone = {
                     zoneUuid: THREE.MathUtils.generateUUID(),
                     zoneName: `Zone `,
                     points: tempPoints,
                     zoneColor,
                     zoneHeight,
-                    viewPortPosition: [0, 0, 0],
-                    viewPortTarget: [0, 0, 0],
+                    viewPortPosition: viewPortPosition ? [viewPortPosition.x, 10, viewPortPosition.y] : [0, 0, 0],
+                    viewPortTarget: viewPortPosition ? [viewPortPosition.x, 0, viewPortPosition.y] : [0, 0, 0],
                 };
 
                 addZone(zone);
@@ -147,14 +152,17 @@ function ZoneCreator() {
                 setIsCreating(true);
             } else if (pointIntersects) {
                 if (tempPoints.length > 2 && isCreating && pointIntersects.object.uuid === tempPoints[0].pointUuid) {
+                    const vec2Points = tempPoints.map((p) => new THREE.Vector2(parseFloat(p.position[0].toFixed(2)), parseFloat(p.position[2].toFixed(2))));
+                    const viewPortPosition = getCenteroidPoint(vec2Points);
+
                     const zone: Zone = {
                         zoneUuid: THREE.MathUtils.generateUUID(),
                         zoneName: "Zone",
                         points: tempPoints,
                         zoneColor,
                         zoneHeight,
-                        viewPortPosition: [0, 0, 0],
-                        viewPortTarget: [0, 0, 0],
+                        viewPortPosition: viewPortPosition ? [viewPortPosition.x, 10, viewPortPosition.y] : [0, 0, 0],
+                        viewPortTarget: viewPortPosition ? [viewPortPosition.x, 0, viewPortPosition.y] : [0, 0, 0],
                     };
 
                     addZone(zone);
@@ -208,14 +216,17 @@ function ZoneCreator() {
             event.preventDefault();
             if (isCreating) {
                 if (tempPoints.length >= 3) {
+                    const vec2Points = tempPoints.map((p) => new THREE.Vector2(parseFloat(p.position[0].toFixed(2)), parseFloat(p.position[2].toFixed(2))));
+                    const viewPortPosition = getCenteroidPoint(vec2Points);
+
                     const zone: Zone = {
                         zoneUuid: THREE.MathUtils.generateUUID(),
                         zoneName: "Zone",
                         points: tempPoints,
                         zoneColor,
                         zoneHeight,
-                        viewPortPosition: [0, 0, 0],
-                        viewPortTarget: [0, 0, 0],
+                        viewPortPosition: viewPortPosition ? [viewPortPosition.x, 10, viewPortPosition.y] : [0, 0, 0],
+                        viewPortTarget: viewPortPosition ? [viewPortPosition.x, 0, viewPortPosition.y] : [0, 0, 0],
                     };
 
                     addZone(zone);