diff --git a/ui/frontend/build_src/src/components/molecules/drawImage/drawImage.css.ts b/ui/frontend/build_src/src/components/molecules/drawImage/drawImage.css.ts
new file mode 100644
index 00000000..a806a2fc
--- /dev/null
+++ b/ui/frontend/build_src/src/components/molecules/drawImage/drawImage.css.ts
@@ -0,0 +1,20 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+
+
+export const DrawImageMain = style({
+  position: "relative",
+  width: "512px",
+  height: "512px",
+});
+
+globalStyle(`${DrawImageMain} > canvas`, {
+  position: "absolute",
+  top: "0",
+  left: "0",
+});
+
+globalStyle(`${DrawImageMain} > img`, {
+  position: "absolute",
+  top: "0",
+  left: "0",
+});
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx b/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx
index db5eec4a..36f2b1e7 100644
--- a/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx
+++ b/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx
@@ -7,6 +7,11 @@ type DrawImageProps = {
   imageData: string;
 };
 
+import {
+  DrawImageMain
+} from //@ts-ignore
+  './drawImage.css.ts';
+
 export default function DrawImage({ imageData }: DrawImageProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
@@ -15,28 +20,28 @@ export default function DrawImage({ imageData }: DrawImageProps) {
     ctx.fillRect(0, 0, 100, 100);
   };
 
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (canvas) {
-      if (imageData) {
-        const ctx = canvas.getContext("2d");
-        if (ctx) {
-          const img = new Image();
-          img.onload = () => {
-            ctx.drawImage(img, 0, 0);
-          };
-          img.src = imageData;
-        }
-      } else {
-        const ctx = canvas.getContext("2d");
-        if (ctx) {
-          draw(ctx);
-        }
-      }
-    } else {
-      console.log("canvas is null");
-    }
-  }, [imageData, draw]);
+  // useEffect(() => {
+  //   const canvas = canvasRef.current;
+  //   if (canvas) {
+  //     if (imageData) {
+  //       const ctx = canvas.getContext("2d");
+  //       if (ctx) {
+  //         const img = new Image();
+  //         img.onload = () => {
+  //           ctx.drawImage(img, 0, 0);
+  //         };
+  //         img.src = imageData;
+  //       }
+  //     } else {
+  //       const ctx = canvas.getContext("2d");
+  //       if (ctx) {
+  //         draw(ctx);
+  //       }
+  //     }
+  //   } else {
+  //     console.log("canvas is null");
+  //   }
+  // }, [imageData, draw]);
 
   const _handleMouseDown = (
     e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
@@ -45,16 +50,16 @@ export default function DrawImage({ imageData }: DrawImageProps) {
     const canvas = canvasRef.current;
     if (canvas) {
       const ctx = canvas.getContext("2d");
-      ctx.strokeStyle = "#ff0000";
+      ctx.strokeStyle = "#red";
       const {
-        nativeEvent: { x, y },
+        nativeEvent: { offsetX, offsetY },
       } = e;
 
-      console.log("x: " + x + " y: " + y);
-
-      ctx.moveTo(x, y);
-      ctx.lineTo(x + 1, y + 1);
-      ctx.stroke();
+      // console.log("x: " + x + " y: " + y);
+      ctx.beginPath();
+      ctx.moveTo(offsetX, offsetY);
+      // ctx.lineTo(x + 1, y + 1);
+      // ctx.stroke();
     }
   };
 
@@ -65,21 +70,25 @@ export default function DrawImage({ imageData }: DrawImageProps) {
     const canvas = canvasRef.current;
     if (canvas) {
       const ctx = canvas.getContext("2d");
-      // if (ctx) {
-      //   draw(ctx);
-      // }
+      if (ctx) {
+        // draw(ctx);
+      }
       const {
-        nativeEvent: { x, y },
+        nativeEvent: { offsetX, offsetY },
       } = e;
-      ctx.moveTo(x, y);
-      ctx.lineTo(x + 1, y + 1);
+
+      // console.log("x: " + x + " y: " + y);
+
+      // ctx.moveTo(x, y);
+      ctx?.lineTo(offsetX, offsetY);
       ctx.stroke();
       ctx.closePath();
     }
   };
 
   return (
-    <div>
+    <div className={DrawImageMain}>
+      <img src={imageData} />
       <canvas
         ref={canvasRef}
         width={512}
diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
index 0891306d..aede6cdf 100644
--- a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
@@ -115,9 +115,6 @@ export default function DisplayPanel() {
         {completedImages.length > 0 && (
           <>
             <div className={CurrentDisplay}>
-
-
-
               <GeneratedImage
                 key={completedImages[0].id}
                 imageData={completedImages[0].data}