diff --git a/src/components/PatternCanvas/PatternCanvas.tsx b/src/components/PatternCanvas/PatternCanvas.tsx
index fae8a58..dbddabf 100644
--- a/src/components/PatternCanvas/PatternCanvas.tsx
+++ b/src/components/PatternCanvas/PatternCanvas.tsx
@@ -1,4 +1,4 @@
-import { useRef, useMemo } from "react";
+import { useRef, useMemo, memo } from "react";
 import { useShallow } from "zustand/react/shallow";
 import {
   useMachineStore,
@@ -23,7 +23,7 @@ import { ZoomControls } from "./ZoomControls";
 import { PatternLayer } from "./PatternLayer";
 import { useCanvasViewport, usePatternTransform } from "@/hooks";
 
-export function PatternCanvas() {
+export const PatternCanvas = memo(function PatternCanvas() {
   // Machine store
   const { sewingProgress, machineInfo } = useMachineStore(
     useShallow((state) => ({
@@ -277,4 +277,4 @@ export function PatternCanvas() {
       </CardContent>
     </Card>
   );
-}
+});
diff --git a/src/components/PatternCanvas/PatternLayer.tsx b/src/components/PatternCanvas/PatternLayer.tsx
index d104877..c9d61f3 100644
--- a/src/components/PatternCanvas/PatternLayer.tsx
+++ b/src/components/PatternCanvas/PatternLayer.tsx
@@ -5,7 +5,7 @@
  * Handles both interactive (draggable/rotatable) and locked states
  */
 
-import { useMemo, type RefObject } from "react";
+import { useMemo, memo, type RefObject } from "react";
 import { Group, Transformer } from "react-konva";
 import type Konva from "konva";
 import type { KonvaEventObject } from "konva/lib/Node";
@@ -30,7 +30,7 @@ interface PatternLayerProps {
   attachTransformer?: () => void;
 }
 
-export function PatternLayer({
+export const PatternLayer = memo(function PatternLayer({
   pesData,
   offset,
   rotation = 0,
@@ -143,4 +143,4 @@ export function PatternLayer({
       )}
     </>
   );
-}
+});