diff --git a/src/components/DrawArea.tsx b/src/components/DrawArea.tsx
index e85a7dde..c6d7db1e 100644
--- a/src/components/DrawArea.tsx
+++ b/src/components/DrawArea.tsx
@@ -85,7 +85,21 @@ const DrawArea: FunctionComponent<IDrawArea> = ({
         }}
       >
         <Layer>
-          <Image image={image} />
+          <Image
+            image={image}
+            onMouseOver={(event) => {
+              document.body.style.cursor = "grab";
+            }}
+            onMouseDown={(event) => {
+              document.body.style.cursor = "grabbing";
+            }}
+            onMouseUp={(event) => {
+              document.body.style.cursor = "grab";
+            }}
+            onMouseLeave={(event) => {
+              document.body.style.cursor = "default";
+            }}
+          />
           {ignoreAreas.map((rect, i) => {
             return (
               <Rectangle
diff --git a/src/components/Rectangle.jsx b/src/components/Rectangle.jsx
index da225535..70017b56 100644
--- a/src/components/Rectangle.jsx
+++ b/src/components/Rectangle.jsx
@@ -63,6 +63,18 @@ const Rectangle = ({ shapeProps, isSelected, onSelect, onChange }) => {
             height: Math.max(node.height() * scaleY),
           });
         }}
+        onMouseOver={(event) => {
+          document.body.style.cursor = "pointer";
+        }}
+        onMouseDown={(event) => {
+          document.body.style.cursor = "grabbing";
+        }}
+        onMouseUp={(event) => {
+          document.body.style.cursor = "grab";
+        }}
+        onMouseLeave={(event) => {
+          document.body.style.cursor = "default";
+        }}
       />
       {isSelected && (
         <Transformer