diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index 360c9ddc..7c027c2f 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -201,7 +201,25 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
       const dy = end.y - start.y
       const length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(1)) * 10
 
-      const midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2)
+      let midPoint
+
+      switch (this.direction) {
+        case 'north':
+          midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2 - 30)
+          break
+        case 'west':
+          midPoint = new fabric.Point((start.x + end.x) / 2 - 30, (start.y + end.y) / 2)
+          break
+        case 'south':
+          midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2 + 30)
+          break
+        case 'east':
+          midPoint = new fabric.Point((start.x + end.x) / 2 + 30, (start.y + end.y) / 2)
+          break
+        default:
+          midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2)
+          break
+      }
 
       const degree = (Math.atan2(dy, dx) * 180) / Math.PI
 
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index 04ec7685..858c13f7 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -1694,6 +1694,7 @@ export function useMode() {
 
     const polygon = createRoofPolygon(wall.points)
     const originPolygon = new QPolygon(wall.points, { fontSize: 0 })
+    originPolygon.setViewLengthText(false)
     let offsetPolygon
 
     let result = createMarginPolygon(polygon, wall.lines).vertices
diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js
index 83b6693f..07b46bc4 100644
--- a/src/util/qpolygon-utils.js
+++ b/src/util/qpolygon-utils.js
@@ -3072,58 +3072,58 @@ export const drawDirectionArrow = (polygon) => {
   switch (direction) {
     case 'north':
       points = [
-        { x: centerPoint.x, y: polygonMinY - 20 },
-        { x: centerPoint.x + 20, y: polygonMinY - 20 },
+        { x: centerPoint.x, y: polygonMinY - 50 },
         { x: centerPoint.x + 20, y: polygonMinY - 50 },
-        { x: centerPoint.x + 50, y: polygonMinY - 50 },
-        { x: centerPoint.x, y: polygonMinY - 80 },
-        { x: centerPoint.x - 50, y: polygonMinY - 50 },
+        { x: centerPoint.x + 20, y: polygonMinY - 80 },
+        { x: centerPoint.x + 50, y: polygonMinY - 80 },
+        { x: centerPoint.x, y: polygonMinY - 110 },
+        { x: centerPoint.x - 50, y: polygonMinY - 80 },
+        { x: centerPoint.x - 20, y: polygonMinY - 80 },
         { x: centerPoint.x - 20, y: polygonMinY - 50 },
-        { x: centerPoint.x - 20, y: polygonMinY - 20 },
       ]
 
-      stickeyPoint = { x: centerPoint.x, y: polygonMinY - 80 }
+      stickeyPoint = { x: centerPoint.x, y: polygonMinY - 110 }
       break
     case 'south':
       points = [
-        { x: centerPoint.x, y: polygonMaxY + 20 },
-        { x: centerPoint.x + 20, y: polygonMaxY + 20 },
+        { x: centerPoint.x, y: polygonMaxY + 50 },
         { x: centerPoint.x + 20, y: polygonMaxY + 50 },
-        { x: centerPoint.x + 50, y: polygonMaxY + 50 },
-        { x: centerPoint.x, y: polygonMaxY + 80 },
-        { x: centerPoint.x - 50, y: polygonMaxY + 50 },
+        { x: centerPoint.x + 20, y: polygonMaxY + 80 },
+        { x: centerPoint.x + 50, y: polygonMaxY + 80 },
+        { x: centerPoint.x, y: polygonMaxY + 110 },
+        { x: centerPoint.x - 50, y: polygonMaxY + 80 },
+        { x: centerPoint.x - 20, y: polygonMaxY + 80 },
         { x: centerPoint.x - 20, y: polygonMaxY + 50 },
-        { x: centerPoint.x - 20, y: polygonMaxY + 20 },
       ]
-      stickeyPoint = { x: centerPoint.x, y: polygonMaxY + 80 }
+      stickeyPoint = { x: centerPoint.x, y: polygonMaxY + 110 }
       break
     case 'west':
       points = [
-        { x: polygonMinX - 20, y: centerPoint.y },
-        { x: polygonMinX - 20, y: centerPoint.y + 20 },
+        { x: polygonMinX - 50, y: centerPoint.y },
         { x: polygonMinX - 50, y: centerPoint.y + 20 },
-        { x: polygonMinX - 50, y: centerPoint.y + 50 },
-        { x: polygonMinX - 80, y: centerPoint.y },
-        { x: polygonMinX - 50, y: centerPoint.y - 50 },
+        { x: polygonMinX - 80, y: centerPoint.y + 20 },
+        { x: polygonMinX - 80, y: centerPoint.y + 50 },
+        { x: polygonMinX - 110, y: centerPoint.y },
+        { x: polygonMinX - 80, y: centerPoint.y - 50 },
+        { x: polygonMinX - 80, y: centerPoint.y - 20 },
         { x: polygonMinX - 50, y: centerPoint.y - 20 },
-        { x: polygonMinX - 20, y: centerPoint.y - 20 },
       ]
 
-      stickeyPoint = { x: polygonMinX - 80, y: centerPoint.y }
+      stickeyPoint = { x: polygonMinX - 110, y: centerPoint.y }
       break
     case 'east':
       points = [
-        { x: polygonMaxX + 20, y: centerPoint.y },
-        { x: polygonMaxX + 20, y: centerPoint.y + 20 },
+        { x: polygonMaxX + 50, y: centerPoint.y },
         { x: polygonMaxX + 50, y: centerPoint.y + 20 },
-        { x: polygonMaxX + 50, y: centerPoint.y + 50 },
-        { x: polygonMaxX + 80, y: centerPoint.y },
-        { x: polygonMaxX + 50, y: centerPoint.y - 50 },
+        { x: polygonMaxX + 80, y: centerPoint.y + 20 },
+        { x: polygonMaxX + 80, y: centerPoint.y + 50 },
+        { x: polygonMaxX + 110, y: centerPoint.y },
+        { x: polygonMaxX + 80, y: centerPoint.y - 50 },
+        { x: polygonMaxX + 80, y: centerPoint.y - 20 },
         { x: polygonMaxX + 50, y: centerPoint.y - 20 },
-        { x: polygonMaxX + 20, y: centerPoint.y - 20 },
       ]
 
-      stickeyPoint = { x: polygonMaxX + 80, y: centerPoint.y }
+      stickeyPoint = { x: polygonMaxX + 110, y: centerPoint.y }
       break
   }