diff --git a/app/src/modules/builder/groups/zoneGroup.tsx b/app/src/modules/builder/groups/zoneGroup.tsx
index 91be7f5..92d9c8b 100644
--- a/app/src/modules/builder/groups/zoneGroup.tsx
+++ b/app/src/modules/builder/groups/zoneGroup.tsx
@@ -576,24 +576,50 @@ const ZoneGroup: React.FC = () => {
                   </mesh>
                 );
               })}
-            {!toggleView && (
-              <Html
-                // data
-                key={zone.zoneId}
-                position={[
-                  zone.viewPortCenter[0],
-                  zone.viewPortCenter[1] + 4,
-                  zone.viewPortCenter[2],
-                ]}
-                // class
-                className="zone-name-wrapper"
-                // other
-                center
-                distanceFactor={20}
-              >
-                <div className="zone-name">{zone.zoneName}</div>
-              </Html>
-            )}
+            {!toggleView &&
+              (() => {
+                const points3D = zone.points || [];
+                const coords2D = points3D.map((p: any) => [p[0], p[2]]);
+
+                // Ensure the polygon is closed
+                if (
+                  coords2D.length >= 3 &&
+                  (coords2D[0][0] !== coords2D[coords2D.length - 1][0] ||
+                    coords2D[0][1] !== coords2D[coords2D.length - 1][1])
+                ) {
+                  coords2D.push(coords2D[0]);
+                }
+
+                const polygon = turf.polygon([coords2D]);
+                const center2D = turf.center(polygon).geometry.coordinates;
+
+                // Calculate the average Y value
+                const sumY = points3D.reduce(
+                  (sum: number, p: any) => sum + p[1],
+                  0
+                );
+                const avgY = points3D.length > 0 ? sumY / points3D.length : 0;
+
+                const htmlPosition: [number, number, number] = [
+                  center2D[0],
+                  avgY + (CONSTANTS.zoneConfig.height || 0) + 1.5,
+                  center2D[1],
+                ];
+
+                return (
+                  <Html
+                    // data
+                    key={zone.zoneId}
+                    position={htmlPosition}
+                    // class
+                    className="zone-name-wrapper"
+                    // others
+                    center
+                  >
+                    <div className="zone-name">{zone.zoneName}</div>
+                  </Html>
+                );
+              })()}
           </group>
         ))}
       </group>
