diff --git a/docs/todo/core.md b/docs/todo/core.md
index e630d22..91ff686 100644
--- a/docs/todo/core.md
+++ b/docs/todo/core.md
@@ -1,11 +1,13 @@
 # @idraw/core
 
-* [x] FireFox's Compatibility Question (And Safair Browser) 
+* [] Support gradient color
 * [] Area select
+* [] Move elements that in selected-area
 * [] Listen keyboard action
-* [x] Hover element style
 * [] Keep all num two decimals
-* [] Get center point at screen
+* [] Lock Element
+* [x] FireFox's Compatibility Question (And Safair Browser) 
+* [x] Hover element style
 * [x] Cursor style
 * [x] Can't controll element at scroll-area
 * [x] Disable controll element
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index ed28286..f96f20f 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -357,6 +357,9 @@ class Core {
   }
 
   private [_handleHover](point: TypePoint): void {
+    if (this[_mode] === Mode.SELECT_AREA) {
+      this[_board].resetCursor();
+    }
     if (this[_cursorStatus] === CursorStatus.NULL) {
       const cursor = this[_mapper].judgePointCursor(point, this[_data]);
       this[_board].setCursor(cursor);
diff --git a/packages/core/src/lib/draw/index.ts b/packages/core/src/lib/draw/index.ts
index 6d33215..624551d 100644
--- a/packages/core/src/lib/draw/index.ts
+++ b/packages/core/src/lib/draw/index.ts
@@ -34,8 +34,6 @@ export function drawContext(
     drawBgColor(ctx, data.bgColor);
   }
 
-  drawAreaWrapper(ctx, helperConfig);
-
   if (!(data.elements.length > 0)) {
     return;
   }
@@ -64,7 +62,8 @@ export function drawContext(
       }
     }
   }
+  
   drawElementWrapper(ctx, helperConfig);
-  // drawDisplayContextScrollWrapper(ctx, helperConfig)
+  drawAreaWrapper(ctx, helperConfig);
 }
 
diff --git a/packages/core/src/lib/draw/wrapper.ts b/packages/core/src/lib/draw/wrapper.ts
index 49b23b6..f2f83f5 100644
--- a/packages/core/src/lib/draw/wrapper.ts
+++ b/packages/core/src/lib/draw/wrapper.ts
@@ -70,7 +70,7 @@ export function drawAreaWrapper(ctx: TypeContext, config: TypeHelperConfig) {
 
     clearContext(ctx);
     ctx.beginPath();
-    ctx.setLineDash([]);
+    ctx.setLineDash(wrapper.lineDash);
     ctx.setLineWidth(wrapper.lineWidth);
     ctx.setStrokeStyle(wrapper.color);
     ctx.moveTo(wrapper.x, wrapper.y);
diff --git a/packages/core/src/lib/helper.ts b/packages/core/src/lib/helper.ts
index 635858c..e0ad421 100644
--- a/packages/core/src/lib/helper.ts
+++ b/packages/core/src/lib/helper.ts
@@ -17,8 +17,9 @@ import { rotateContext, } from './transform';
 
 const { deepClone } = util.data;
 
-const areaLineWidth = 2;
+const areaLineWidth = 1.5;
 const areaColor = '#2ab6f1';
+const areaLineDash = [4, 3];
 
 export class Helper implements TypeHelper {
 
@@ -114,14 +115,20 @@ export class Helper implements TypeHelper {
     const start = this._areaStart;
     const end = this._areaEnd;
 
+    const transform = this._ctx.getTransform();
+    const { scale = 1, scrollX = 0, scrollY = 0 } = transform;
+
     this._helperConfig.selectedAreaWrapper = {
-      x: Math.min(start.x, end.x),
-      y: Math.min(start.y, end.y),
-      w: Math.abs(end.x - start.x),
-      h: Math.abs(end.y - start.y),
+      x: (Math.min(start.x, end.x) - scrollX) / scale,
+      y: (Math.min(start.y, end.y) - scrollY) / scale,
+      w: Math.abs(end.x - start.x) / scale,
+      h: Math.abs(end.y - start.y) / scale,
       startPoint: {x: start.x, y: start.y},
       endPoint: {x: end.x, y: end.y},
-      lineWidth: areaLineWidth,
+      lineWidth: areaLineWidth / scale,
+      lineDash: areaLineDash.map((num) => {
+        return num / scale
+      }),
       color: areaColor,
     }
   }
diff --git a/packages/types/src/lib/helper.ts b/packages/types/src/lib/helper.ts
index 7e8815b..b9bfcc6 100644
--- a/packages/types/src/lib/helper.ts
+++ b/packages/types/src/lib/helper.ts
@@ -13,6 +13,7 @@ type TypeHelperConfig = {
     startPoint: TypePoint;
     endPoint: TypePoint;
     lineWidth: number;
+    lineDash: number[];
     color: string;
   };
   selectedElementWrapper?: {