diff --git a/app/javascript/chat/draw/index.jsx b/app/javascript/chat/draw/index.jsx
index d8cd41d93..f5a4dff61 100644
--- a/app/javascript/chat/draw/index.jsx
+++ b/app/javascript/chat/draw/index.jsx
@@ -18,6 +18,7 @@ import { Button } from '@crayons';
  */
 function Draw({ sendCanvasImage }) {
   const canvasRef = useRef(null);
+  const canvasWidth = useRef(null);
   const [isDrawing, setIsDrawing] = useState(false);
   const [drawColor, setDrawColor] = useState('#F58F8E');
   const [coordinates, setCoordinates] = useState({});
@@ -72,7 +73,6 @@ function Draw({ sendCanvasImage }) {
 
   const handleDragHover = (e) => {
     e.preventDefault();
-
     canvasRef.current.classList.add('opacity-25');
   };
 
@@ -98,11 +98,14 @@ function Draw({ sendCanvasImage }) {
     setIsDrawing(false);
   };
 
+  useEffect(() => {
+    canvasRef.current.width = canvasWidth.current.clientWidth;
+  }, [canvasWidth]);
+
   useEffect(() => {
     if (!canvasRef.current) {
       return;
     }
-
     const context = canvasRef.current.getContext('2d');
 
     if (isDrawing) {
@@ -135,6 +138,7 @@ function Draw({ sendCanvasImage }) {
       <div
         aria-hidden
         className="connect-draw__draw-area"
+        ref={canvasWidth}
         onMouseUp={handleMouseUp}
       >
         <canvas
@@ -146,7 +150,6 @@ function Draw({ sendCanvasImage }) {
           onDragOver={handleDragHover}
           onDragExit={handleDragExit}
           height="600"
-          width="400"
         />
         <div className="connect-draw__actions">
           <Button