diff --git a/components/editor/background-options/normal-gradient-picker.tsx b/components/editor/background-options/normal-gradient-picker.tsx
index b00690c..f0b5f10 100644
--- a/components/editor/background-options/normal-gradient-picker.tsx
+++ b/components/editor/background-options/normal-gradient-picker.tsx
@@ -39,7 +39,7 @@ export default function NormalGradientPicker() {
     setNoise,
   } = useBackgroundOptions()
 
-  const { images, setImages } = useImageOptions()
+  const { images, updateImage } = useImageOptions()
   const { selectedImage } = useSelectedLayers()
   const [dominantColor, setDominantColor] = useState(null)
 
@@ -132,20 +132,15 @@ export default function NormalGradientPicker() {
           return gradient
         })
 
-        setImages(
-          images.map((image, index) =>
-            index === images.length - 1
-              ? {
-                  ...image,
-                  dominantColor,
-                  palletes,
-                  linearGradients,
-                  meshGradients,
-                  radialGradients,
-                }
-              : image
-          )
-        )
+        if (images.length > 0) {
+          updateImage(images[images.length - 1].id, {
+            dominantColor,
+            palletes,
+            linearGradients,
+            meshGradients,
+            radialGradients,
+          })
+        }
 
         return {
           linearGradients,
diff --git a/components/editor/canvas-options/resolution-button.tsx b/components/editor/canvas-options/resolution-button.tsx
index a52796d..ffeb2c2 100644
--- a/components/editor/canvas-options/resolution-button.tsx
+++ b/components/editor/canvas-options/resolution-button.tsx
@@ -30,7 +30,7 @@ export function ResolutionButton({
   const [isHovering, setIsHovering] = useState(false)
 
   const { setResolution, setScaleFactor, domResolution } = useResizeCanvas()
-  const { images, setImages, initialImageUploaded } = useImageOptions()
+  const { images, updateImageStyle, initialImageUploaded } = useImageOptions()
   const { selectedImage } = useSelectedLayers()
 
   const [domWidth]: number[] = domResolution.split('x').map(Number)
@@ -84,20 +84,9 @@ export function ResolutionButton({
               padding
             )
             setResolution(newResolution.toString())
-            selectedImage &&
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          imageSize: '0.75',
-                        },
-                      }
-                    : image
-                )
-              )
+            if (selectedImage) {
+              updateImageStyle(selectedImage, { imageSize: '0.75' })
+            }
           }
         }}
         aria-label={name}
@@ -129,20 +118,9 @@ export function ResolutionButton({
               padding
             )
             setResolution(newResolution.toString())
-            selectedImage &&
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          imageSize: '0.75',
-                        },
-                      }
-                    : image
-                )
-              )
+            if (selectedImage) {
+              updateImageStyle(selectedImage, { imageSize: '0.75' })
+            }
           }
         }}
         aria-label={name}
diff --git a/components/editor/frame-options/frame-picker.tsx b/components/editor/frame-options/frame-picker.tsx
index 0e2926f..4e2c1da 100644
--- a/components/editor/frame-options/frame-picker.tsx
+++ b/components/editor/frame-options/frame-picker.tsx
@@ -13,26 +13,18 @@ import { cn } from '@/utils/button-utils'
 export default function FramePicker() {
   const { setFrameHeight, frameHeight } = useFrameOptions()
   const { selectedImage } = useSelectedLayers()
-  const { setImages, images } = useImageOptions()
+  const { updateImage, images } = useImageOptions()
   const { setShowControls } = useMoveable()
 
   const frameChangeHandler = (frame: FrameTypes) => {
-    selectedImage &&
-      setImages(
-        images.map((image, index) =>
-          index === selectedImage - 1
-            ? {
-                ...image,
-                frame,
-                style: {
-                  ...image.style,
-                  imageRoundness:
-                    frame === 'None' ? 0.4 : frame === 'Arc' ? 1.5 : 0.7,
-                },
-              }
-            : image
-        )
-      )
+    if (selectedImage) {
+      updateImage(selectedImage, {
+        frame,
+        style: {
+          imageRoundness: frame === 'None' ? 0.4 : frame === 'Arc' ? 1.5 : 0.7,
+        },
+      })
+    }
     setShowControls(false)
   }
 
diff --git a/components/editor/image-context-menu.tsx b/components/editor/image-context-menu.tsx
index 6c5fa51..4a117a9 100644
--- a/components/editor/image-context-menu.tsx
+++ b/components/editor/image-context-menu.tsx
@@ -50,7 +50,7 @@ export default function ContextMenuImage({
     height: 50,
   })
   const imgRef = useRef<HTMLImageElement>(null)
-  const { setImages, images } = useImageOptions()
+  const { updateImage, updateImageStyle, images } = useImageOptions()
   const [isRemovingBackground, setIsRemovingBackground] = useState(false)
   const [isBgRemovalDialogOpen, setIsBgRemovalDialogOpen] = useState(false)
   const [isProcessingBackground, setIsProcessingBackground] = useState(false)
@@ -70,16 +70,7 @@ export default function ContextMenuImage({
     }
 
     if (selectedImage) {
-      setImages(
-        images.map((image, index) =>
-          index === selectedImage - 1
-            ? {
-                ...image,
-                image: '',
-              }
-            : image
-        )
-      )
+      updateImage(selectedImage, { image: '' })
     }
 
     setSelectedImage(null)
@@ -87,22 +78,12 @@ export default function ContextMenuImage({
 
   const bringToFrontOrBack = (direction: 'front' | 'back') => {
     if (selectedImage) {
-      setImages(
-        images.map((image, index) =>
-          index === selectedImage - 1
-            ? {
-                ...image,
-                style: {
-                  ...image.style,
-                  zIndex:
-                    direction === 'front'
-                      ? image.style.zIndex + 1
-                      : image.style.zIndex - 1,
-                },
-              }
-            : image
-        )
-      )
+      updateImageStyle(selectedImage, {
+        zIndex:
+          direction === 'front'
+            ? images[selectedImage - 1]?.style.zIndex + 1
+            : images[selectedImage - 1]?.style.zIndex - 1,
+      })
     }
   }
 
@@ -201,17 +182,9 @@ export default function ContextMenuImage({
     )
 
     const base64Image = canvas.toDataURL('image/png')
-    selectedImage &&
-      setImages(
-        images.map((image, index) =>
-          index === selectedImage - 1
-            ? {
-                ...image,
-                image: base64Image,
-              }
-            : image
-        )
-      )
+    if (selectedImage) {
+      updateImage(selectedImage, { image: base64Image })
+    }
   }
 
   return (
@@ -429,21 +402,13 @@ export default function ContextMenuImage({
             <Button
               onClick={() => {
                 if (selectedImage && processedImageUrl) {
-                  setImages(
-                    images.map((img, index) =>
-                      index === selectedImage - 1
-                        ? {
-                            ...img,
-                            image: processedImageUrl,
-                            style: {
-                              ...img.style,
-                              shadowName: 'None',
-                              imageShadow: '0 0 0 0',
-                            },
-                          }
-                        : img
-                    )
-                  )
+                  updateImage(selectedImage, {
+                    image: processedImageUrl,
+                    style: {
+                      shadowName: 'None',
+                      imageShadow: '0 0 0 0',
+                    },
+                  })
                 }
                 setIsBgRemovalDialogOpen(false)
                 setProcessedImageUrl(null)
@@ -463,7 +428,7 @@ export default function ContextMenuImage({
 }
 
 function ReplaceImage() {
-  const { setImages, images } = useImageOptions()
+  const { updateImage, images } = useImageOptions()
   const { selectedImage, setSelectedImage } = useSelectedLayers()
 
   const { setImagesCheck, imagesCheck } = useColorExtractor()
@@ -478,18 +443,12 @@ function ReplaceImage() {
       })
       const extractedColors = result.slice(0, 12)
 
-      selectedImage &&
-        setImages(
-          images.map((image, index) =>
-            index === selectedImage - 1
-              ? {
-                  ...image,
-                  image: imageUrl,
-                  colors: extractedColors,
-                }
-              : image
-          )
-        )
+      if (selectedImage) {
+        updateImage(selectedImage, {
+          image: imageUrl,
+          colors: extractedColors,
+        })
+      }
 
       setImagesCheck([...imagesCheck, imageUrl])
     }
diff --git a/components/editor/image-options/add-image-button.tsx b/components/editor/image-options/add-image-button.tsx
index 827577c..6f60bc3 100644
--- a/components/editor/image-options/add-image-button.tsx
+++ b/components/editor/image-options/add-image-button.tsx
@@ -9,7 +9,7 @@ import Dropzone from 'react-dropzone'
 type AddImageButtonProps = {}
 
 export default function AddImageButton({}: AddImageButtonProps) {
-  const { setImages, images, defaultStyle } = useImageOptions()
+  const { addImage, images, defaultStyle } = useImageOptions()
   const { imagesCheck, setImagesCheck } = useColorExtractor()
   const uploadRef = useRef<HTMLInputElement>(null)
   const { automaticResolution, setResolution } = useResizeCanvas()
@@ -17,20 +17,17 @@ export default function AddImageButton({}: AddImageButtonProps) {
 
   const handleImageUpload = (file: File) => {
     const imageUrl = URL.createObjectURL(file)
-    setImages([
-      ...images,
-      {
-        image: imageUrl,
-        id: images.length + 1,
-        style:
-          images.length < 1
-            ? defaultStyle
-            : {
-                ...defaultStyle,
-                imageSize: '0.5',
-              },
-      },
-    ])
+    addImage({
+      image: imageUrl,
+      id: images.length + 1,
+      style:
+        images.length < 1
+          ? defaultStyle
+          : {
+              ...defaultStyle,
+              imageSize: '0.5',
+            },
+    })
     setImagesCheck([...imagesCheck, imageUrl])
 
     if (images.length > 0) return
diff --git a/components/editor/image-options/shadow-settings.tsx b/components/editor/image-options/shadow-settings.tsx
index 3745bf2..2b1bc4f 100644
--- a/components/editor/image-options/shadow-settings.tsx
+++ b/components/editor/image-options/shadow-settings.tsx
@@ -15,7 +15,7 @@ import { Slider } from '@/components/ui/slider'
 import { useMoveable } from '@/store/use-moveable'
 
 export default function ShadowSettings() {
-  const { images, setImages, defaultStyle } = useImageOptions()
+  const { images, updateImageStyle } = useImageOptions()
   const { showControls } = useMoveable()
   const { selectedImage } = useSelectedLayers()
 
@@ -44,45 +44,27 @@ export default function ShadowSettings() {
     fullName: string
     preview: string
   }) => {
-    selectedImage &&
-      setImages(
-        images.map((image, index) =>
-          index === selectedImage - 1
-            ? {
-                ...image,
-                style: {
-                  ...image.style,
-                  imageShadow: shadow.shadow,
-                  shadowName: shadow.fullName,
-                  shadowPreview: shadow.preview,
-                },
-              }
-            : image
-        )
-      )
+    if (selectedImage) {
+      updateImageStyle(selectedImage, {
+        imageShadow: shadow.shadow,
+        shadowName: shadow.fullName,
+        shadowPreview: shadow.preview,
+      })
+    }
   }
 
   const handleColorChange = (color: string) => {
-    selectedImage &&
-      setImages(
-        images.map((image, index) =>
-          index === selectedImage - 1
-            ? {
-                ...image,
-                style: {
-                  ...image.style,
-                  shadowColor: color,
-                  imageShadow:
-                    shadows.find(
-                      (shadow) =>
-                        shadow.fullName ===
-                        (images[selectedImage - 1]?.style.shadowName ?? '')
-                    )?.shadow ?? '',
-                },
-              }
-            : image
-        )
-      )
+    if (selectedImage) {
+      updateImageStyle(selectedImage, {
+        shadowColor: color,
+        imageShadow:
+          shadows.find(
+            (shadow) =>
+              shadow.fullName ===
+              (images[selectedImage - 1]?.style.shadowName ?? '')
+          )?.shadow ?? '',
+      })
+    }
   }
 
   return (
@@ -166,20 +148,11 @@ export default function ShadowSettings() {
           max={1}
           step={0.01}
           onValueChange={(value) => {
-            selectedImage &&
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          shadowOpacity: value[0],
-                        },
-                      }
-                    : image
-                )
-              )
+            if (selectedImage) {
+              updateImageStyle(selectedImage, {
+                shadowOpacity: value[0],
+              })
+            }
           }}
           value={
             images.length !== 0 && selectedImage
@@ -190,37 +163,17 @@ export default function ShadowSettings() {
             if (images.length === 0 || !selectedImage) return
             if (Number(images[selectedImage - 1]?.style.shadowOpacity) >= 1)
               return
-            setImages(
-              images.map((image, index) =>
-                index === selectedImage - 1
-                  ? {
-                      ...image,
-                      style: {
-                        ...image.style,
-                        shadowOpacity: Number(image.style.shadowOpacity) + 0.01,
-                      },
-                    }
-                  : image
-              )
-            )
+            updateImageStyle(selectedImage, {
+              shadowOpacity: Number(images[selectedImage - 1]?.style.shadowOpacity) + 0.01,
+            })
           }}
           onDecrement={() => {
             if (images.length === 0 || !selectedImage) return
             if (Number(images[selectedImage - 1]?.style.shadowOpacity) <= 0)
               return
-            setImages(
-              images.map((image, index) =>
-                index === selectedImage - 1
-                  ? {
-                      ...image,
-                      style: {
-                        ...image.style,
-                        shadowOpacity: Number(image.style.shadowOpacity) - 0.01,
-                      },
-                    }
-                  : image
-              )
-            )
+            updateImageStyle(selectedImage, {
+              shadowOpacity: Number(images[selectedImage - 1]?.style.shadowOpacity) - 0.01,
+            })
           }}
         />
       </div>
diff --git a/components/editor/moveable-component.tsx b/components/editor/moveable-component.tsx
index 2a3e021..0a25030 100644
--- a/components/editor/moveable-component.tsx
+++ b/components/editor/moveable-component.tsx
@@ -32,7 +32,7 @@ const Moveable = makeMoveable<
 export default function MoveableComponent({ id }: { id: string }) {
   const { quality } = useImageQualityStore()
   const { domResolution, scaleFactor, exactDomResolution } = useResizeCanvas()
-  const { setImages, images } = useImageOptions()
+  const { updateImageStyle, updateImage, images } = useImageOptions()
   const { selectedImage } = useSelectedLayers()
   const moveableRef = React.useRef<any>(null)
   const { width, height } = splitWidthHeight(exactDomResolution)
@@ -88,21 +88,12 @@ export default function MoveableComponent({ id }: { id: string }) {
         // @ts-expect-error
         const yPerc = (lastEvent?.translate[1] / target?.offsetHeight) * 100
 
-        selectedImage &&
-          setImages(
-            images.map((image, index) =>
-              index === selectedImage - 1
-                ? {
-                    ...image,
-                    style: {
-                      ...image.style,
-                      translateX: xPerc,
-                      translateY: yPerc,
-                    },
-                  }
-                : image
-            )
-          )
+        if (selectedImage) {
+          updateImageStyle(selectedImage, {
+            translateX: xPerc,
+            translateY: yPerc,
+          })
+        }
       }}
       scalable={true}
       keepRatio={true}
@@ -139,22 +130,13 @@ export default function MoveableComponent({ id }: { id: string }) {
           // @ts-expect-error
           (lastEvent?.drag?.translate[1] / target.offsetHeight) * 100
 
-        selectedImage &&
-          setImages(
-            images.map((image, index) =>
-              index === selectedImage - 1
-                ? {
-                    ...image,
-                    style: {
-                      ...image.style,
-                      translateX: xPerc,
-                      translateY: yPerc,
-                      imageSize: `${scaleX}`,
-                    },
-                  }
-                : image
-            )
-          )
+        if (selectedImage) {
+          updateImageStyle(selectedImage, {
+            translateX: xPerc,
+            translateY: yPerc,
+            imageSize: `${scaleX}`,
+          })
+        }
       }}
       rotatable={!isMultipleTargetSelected}
       rotationPosition={'top'}
@@ -178,20 +160,9 @@ export default function MoveableComponent({ id }: { id: string }) {
       onRotateEnd={({ target, lastEvent }) => {
         const rotate = lastEvent.rotate
 
-        selectedImage &&
-          setImages(
-            images.map((image, index) =>
-              index === selectedImage - 1
-                ? {
-                    ...image,
-                    style: {
-                      ...image.style,
-                      rotate: rotate,
-                    },
-                  }
-                : image
-            )
-          )
+        if (selectedImage) {
+          updateImageStyle(selectedImage, { rotate })
+        }
       }}
       snapRotationThreshold={2}
       snapRotationDegrees={[0, 90, 180, 270]}
@@ -268,7 +239,9 @@ export default function MoveableComponent({ id }: { id: string }) {
             return image
           })
 
-          setImages(updatedImages)
+          updatedImages.forEach((img) => {
+            updateImage(img.id, { image: img.image, style: img.style })
+          })
         }
       }}
     />
diff --git a/components/editor/perspective-options/index.tsx b/components/editor/perspective-options/index.tsx
index e4fb05c..e91bb31 100644
--- a/components/editor/perspective-options/index.tsx
+++ b/components/editor/perspective-options/index.tsx
@@ -6,7 +6,7 @@ import { useImageOptions, useSelectedLayers } from '@/store/use-image-options'
 import { useMoveable } from '@/store/use-moveable'
 
 export default function PerspectiveOptions() {
-  const { images, setImages } = useImageOptions()
+  const { images, updateImageStyle } = useImageOptions()
    const { selectedImage } = useSelectedLayers()
   const { setShowControls } = useMoveable()
 
@@ -30,21 +30,12 @@ export default function PerspectiveOptions() {
           const { type, x, y } = event
           if (type === 'move') {
             setShowControls(false)
-            selectedImage &&
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          rotateX: y! * 20,
-                          rotateY: x! * 20,
-                        },
-                      }
-                    : image
-                )
-              )
+            if (selectedImage) {
+              updateImageStyle(selectedImage, {
+                rotateX: y! * 20,
+                rotateY: x! * 20,
+              })
+            }
           } else if (type === 'stop') {
             setShowControls(true)
           }
diff --git a/components/editor/perspective-options/rotate-options.tsx b/components/editor/perspective-options/rotate-options.tsx
index f9cb5e2..45a31f3 100644
--- a/components/editor/perspective-options/rotate-options.tsx
+++ b/components/editor/perspective-options/rotate-options.tsx
@@ -5,7 +5,7 @@ import { RotateCcw } from 'lucide-react'
 import { useImageOptions, useSelectedLayers } from '@/store/use-image-options'
 
 export default function RotateOptions() {
-  const { images, setImages } = useImageOptions()
+  const { images, updateImageStyle } = useImageOptions()
   const { selectedImage } = useSelectedLayers()
   const { setShowControls } = useMoveable()
 
@@ -28,22 +28,11 @@ export default function RotateOptions() {
           variant="secondary"
           size="sm"
           className="ml-auto translate-x-2"
-          onClick={() =>
-            selectedImage &&
-            setImages(
-              images.map((image, index) =>
-                index === selectedImage - 1
-                  ? {
-                      ...image,
-                      style: {
-                        ...image.style,
-                        perspective: 2000,
-                      },
-                    }
-                  : image
-              )
-            )
-          }
+          onClick={() => {
+            if (selectedImage) {
+              updateImageStyle(selectedImage, { perspective: 2000 })
+            }
+          }}
         >
           <RotateCcw size={15} className="text-dark/80" />
         </Button>
@@ -61,20 +50,9 @@ export default function RotateOptions() {
               : [2000]
           }
           onValueChange={(value: number[]) => {
-            selectedImage &&
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          perspective: value[0],
-                        },
-                      }
-                    : image
-                )
-              )
+            if (selectedImage) {
+              updateImageStyle(selectedImage, { perspective: value[0] })
+            }
             setShowControls(false)
           }}
           onValueCommit={() => setShowControls(true)}
@@ -82,38 +60,18 @@ export default function RotateOptions() {
             if (selectedImage) {
               if (images[selectedImage - 1]?.style.perspective >= 6500) return
 
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          perspective: Number(image.style.perspective) + 500,
-                        },
-                      }
-                    : image
-                )
-              )
+              updateImageStyle(selectedImage, {
+                perspective: Number(images[selectedImage - 1]?.style.perspective) + 500,
+              })
             }
           }}
           onDecrement={() => {
             if (selectedImage) {
               if (images[selectedImage - 1]?.style.perspective <= 0) return
 
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          perspective: Number(image.style.perspective) - 500,
-                        },
-                      }
-                    : image
-                )
-              )
+              updateImageStyle(selectedImage, {
+                perspective: Number(images[selectedImage - 1]?.style.perspective) - 500,
+              })
             }
           }}
         />
@@ -135,20 +93,9 @@ export default function RotateOptions() {
           size="sm"
           className="ml-auto translate-x-2"
           onClick={() => {
-            selectedImage &&
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          rotateX: 0.0001,
-                        },
-                      }
-                    : image
-                )
-              )
+            if (selectedImage) {
+              updateImageStyle(selectedImage, { rotateX: 0.0001 })
+            }
           }}
         >
           <RotateCcw size={15} className="text-dark/80" />
@@ -165,20 +112,9 @@ export default function RotateOptions() {
             selectedImage ? [images[selectedImage - 1]?.style.rotateX] : [0]
           }
           onValueChange={(value: number[]) => {
-            selectedImage &&
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          rotateX: value[0],
-                        },
-                      }
-                    : image
-                )
-              )
+            if (selectedImage) {
+              updateImageStyle(selectedImage, { rotateX: value[0] })
+            }
             setShowControls(false)
           }}
           onValueCommit={() => setShowControls(true)}
@@ -186,38 +122,18 @@ export default function RotateOptions() {
             if (selectedImage) {
               if (images[selectedImage - 1]?.style.rotateX >= 180) return
 
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          rotateX: Number(image.style.rotateX) + 1,
-                        },
-                      }
-                    : image
-                )
-              )
+              updateImageStyle(selectedImage, {
+                rotateX: Number(images[selectedImage - 1]?.style.rotateX) + 1,
+              })
             }
           }}
           onDecrement={() => {
             if (selectedImage) {
               if (images[selectedImage - 1]?.style.rotateX <= -180) return
 
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          rotateX: Number(image.style.rotateX) - 1,
-                        },
-                      }
-                    : image
-                )
-              )
+              updateImageStyle(selectedImage, {
+                rotateX: Number(images[selectedImage - 1]?.style.rotateX) - 1,
+              })
             }
           }}
         />
@@ -237,20 +153,9 @@ export default function RotateOptions() {
           size="sm"
           className="ml-auto translate-x-2"
           onClick={() => {
-            selectedImage &&
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          rotateY: 0,
-                        },
-                      }
-                    : image
-                )
-              )
+            if (selectedImage) {
+              updateImageStyle(selectedImage, { rotateY: 0 })
+            }
           }}
         >
           <RotateCcw size={15} className="text-dark/80" />
@@ -267,20 +172,9 @@ export default function RotateOptions() {
             selectedImage ? [images[selectedImage - 1]?.style.rotateY] : [0]
           }
           onValueChange={(value: number[]) => {
-            selectedImage &&
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          rotateY: value[0],
-                        },
-                      }
-                    : image
-                )
-              )
+            if (selectedImage) {
+              updateImageStyle(selectedImage, { rotateY: value[0] })
+            }
             setShowControls(false)
           }}
           onValueCommit={() => setShowControls(true)}
@@ -288,38 +182,18 @@ export default function RotateOptions() {
             if (selectedImage) {
               if (images[selectedImage - 1]?.style.rotateY >= 180) return
 
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          rotateY: Number(image.style.rotateY) + 1,
-                        },
-                      }
-                    : image
-                )
-              )
+              updateImageStyle(selectedImage, {
+                rotateY: Number(images[selectedImage - 1]?.style.rotateY) + 1,
+              })
             }
           }}
           onDecrement={() => {
             if (selectedImage) {
               if (images[selectedImage - 1]?.style.rotateY <= -180) return
 
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          rotateY: Number(image.style.rotateY) - 1,
-                        },
-                      }
-                    : image
-                )
-              )
+              updateImageStyle(selectedImage, {
+                rotateY: Number(images[selectedImage - 1]?.style.rotateY) - 1,
+              })
             }
           }}
         />
@@ -338,22 +212,11 @@ export default function RotateOptions() {
           variant="secondary"
           size="sm"
           className="ml-auto translate-x-2"
-          onClick={() =>
-            selectedImage &&
-            setImages(
-              images.map((image, index) =>
-                index === selectedImage - 1
-                  ? {
-                      ...image,
-                      style: {
-                        ...image.style,
-                        rotateZ: 0,
-                      },
-                    }
-                  : image
-              )
-            )
-          }
+          onClick={() => {
+            if (selectedImage) {
+              updateImageStyle(selectedImage, { rotateZ: 0 })
+            }
+          }}
         >
           <RotateCcw size={15} className="text-dark/80" />
         </Button>
@@ -369,20 +232,9 @@ export default function RotateOptions() {
             selectedImage ? [images[selectedImage - 1]?.style.rotateZ] : [0]
           }
           onValueChange={(value: number[]) => {
-            selectedImage &&
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          rotateZ: value[0],
-                        },
-                      }
-                    : image
-                )
-              )
+            if (selectedImage) {
+              updateImageStyle(selectedImage, { rotateZ: value[0] })
+            }
             setShowControls(false)
           }}
           onValueCommit={() => setShowControls(true)}
@@ -390,38 +242,18 @@ export default function RotateOptions() {
             if (selectedImage) {
               if (images[selectedImage - 1]?.style.rotateZ >= 180) return
 
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          rotateZ: Number(image.style.rotateZ) + 1,
-                        },
-                      }
-                    : image
-                )
-              )
+              updateImageStyle(selectedImage, {
+                rotateZ: Number(images[selectedImage - 1]?.style.rotateZ) + 1,
+              })
             }
           }}
           onDecrement={() => {
             if (selectedImage) {
               if (images[selectedImage - 1]?.style.rotateZ <= -180) return
 
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          rotateZ: Number(image.style.rotateZ) - 1,
-                        },
-                      }
-                    : image
-                )
-              )
+              updateImageStyle(selectedImage, {
+                rotateZ: Number(images[selectedImage - 1]?.style.rotateZ) - 1,
+              })
             }
           }}
         />
diff --git a/components/editor/position-options/position-control.tsx b/components/editor/position-options/position-control.tsx
index c4435b2..3c1456e 100644
--- a/components/editor/position-options/position-control.tsx
+++ b/components/editor/position-options/position-control.tsx
@@ -15,30 +15,19 @@ import { useEffect, useCallback } from 'react'
 import { useImageOptions, useSelectedLayers } from '@/store/use-image-options'
 
 export default function PositionControl() {
-  const { images, setImages } = useImageOptions()
+  const { images, updateImageStyle } = useImageOptions()
   const { selectedImage } = useSelectedLayers()
 
   const move = useCallback(
     (deltaX: number, deltaY: number) => {
-      selectedImage &&
-        setImages(
-          images.map((image, index) =>
-            index === selectedImage - 1
-              ? {
-                  ...image,
-                  style: {
-                    ...image.style,
-                    translateX:
-                      images[selectedImage - 1]?.style.translateX + deltaX,
-                    translateY:
-                      images[selectedImage - 1]?.style.translateY + deltaY,
-                  },
-                }
-              : image
-          )
-        )
+      if (selectedImage) {
+        updateImageStyle(selectedImage, {
+          translateX: images[selectedImage - 1]?.style.translateX + deltaX,
+          translateY: images[selectedImage - 1]?.style.translateY + deltaY,
+        })
+      }
     },
-    [images, setImages, selectedImage]
+    [images, updateImageStyle, selectedImage]
   )
 
   useEffect(() => {
@@ -68,21 +57,9 @@ export default function PositionControl() {
   }, [move])
 
   const centerImage = () => {
-    selectedImage &&
-      setImages(
-        images.map((image, index) =>
-          index === selectedImage - 1
-            ? {
-                ...image,
-                style: {
-                  ...image.style,
-                  translateX: 0,
-                  translateY: 0,
-                },
-              }
-            : image
-        )
-      )
+    if (selectedImage) {
+      updateImageStyle(selectedImage, { translateX: 0, translateY: 0 })
+    }
   }
 
   return (
diff --git a/components/editor/position-options/translate-control.tsx b/components/editor/position-options/translate-control.tsx
index 866c6e3..18962de 100644
--- a/components/editor/position-options/translate-control.tsx
+++ b/components/editor/position-options/translate-control.tsx
@@ -5,7 +5,7 @@ import { RotateCcw } from 'lucide-react'
 import { useImageOptions, useSelectedLayers } from '@/store/use-image-options'
 
 export default function TranslateOption() {
-  const { images, setImages } = useImageOptions()
+  const { images, updateImageStyle } = useImageOptions()
   const { selectedImage } = useSelectedLayers()
   const { setShowControls } = useMoveable()
 
@@ -24,20 +24,9 @@ export default function TranslateOption() {
           size="sm"
           className="ml-auto translate-x-2"
           onClick={() => {
-            selectedImage &&
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          translateX: 0,
-                        },
-                      }
-                    : image
-                )
-              )
+            if (selectedImage) {
+              updateImageStyle(selectedImage, { translateX: 0 })
+            }
           }}
         >
           <RotateCcw size={15} className="text-dark/80" />
@@ -54,56 +43,27 @@ export default function TranslateOption() {
             selectedImage ? [images[selectedImage - 1]?.style.translateX] : [0]
           }
           onValueChange={(value: number[]) => {
-            selectedImage &&
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          translateX: value[0],
-                        },
-                      }
-                    : image
-                )
-              )
+            if (selectedImage) {
+              updateImageStyle(selectedImage, { translateX: value[0] })
+            }
             setShowControls(false)
           }}
           onValueCommit={() => setShowControls(true)}
           onIncrement={() => {
-            selectedImage &&
-              (images[selectedImage - 1]?.style.translateX >= 1000 ||
-                setImages(
-                  images.map((image, index) =>
-                    index === selectedImage - 1
-                      ? {
-                          ...image,
-                          style: {
-                            ...image.style,
-                            translateX: image.style.translateX + 1,
-                          },
-                        }
-                      : image
-                  )
-                ))
+            if (selectedImage) {
+              if (images[selectedImage - 1]?.style.translateX >= 1000) return
+              updateImageStyle(selectedImage, {
+                translateX: images[selectedImage - 1]?.style.translateX + 1,
+              })
+            }
           }}
           onDecrement={() => {
-            selectedImage &&
-              (images[selectedImage - 1]?.style.translateX <= -1000 ||
-                setImages(
-                  images.map((image, index) =>
-                    index === selectedImage - 1
-                      ? {
-                          ...image,
-                          style: {
-                            ...image.style,
-                            translateX: image.style.translateX - 1,
-                          },
-                        }
-                      : image
-                  )
-                ))
+            if (selectedImage) {
+              if (images[selectedImage - 1]?.style.translateX <= -1000) return
+              updateImageStyle(selectedImage, {
+                translateX: images[selectedImage - 1]?.style.translateX - 1,
+              })
+            }
           }}
         />
       </div>
@@ -121,20 +81,9 @@ export default function TranslateOption() {
           size="sm"
           className="ml-auto translate-x-2"
           onClick={() => {
-            selectedImage &&
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          translateY: 0,
-                        },
-                      }
-                    : image
-                )
-              )
+            if (selectedImage) {
+              updateImageStyle(selectedImage, { translateY: 0 })
+            }
           }}
         >
           <RotateCcw size={15} className="text-dark/80" />
@@ -151,56 +100,27 @@ export default function TranslateOption() {
             selectedImage ? [images[selectedImage - 1]?.style.translateY] : [0]
           }
           onValueChange={(value: number[]) => {
-            selectedImage &&
-              setImages(
-                images.map((image, index) =>
-                  index === selectedImage - 1
-                    ? {
-                        ...image,
-                        style: {
-                          ...image.style,
-                          translateY: value[0],
-                        },
-                      }
-                    : image
-                )
-              )
+            if (selectedImage) {
+              updateImageStyle(selectedImage, { translateY: value[0] })
+            }
             setShowControls(false)
           }}
           onValueCommit={() => setShowControls(true)}
           onIncrement={() => {
-            selectedImage &&
-              (images[selectedImage - 1]?.style.translateY >= 500 ||
-                setImages(
-                  images.map((image, index) =>
-                    index === selectedImage - 1
-                      ? {
-                          ...image,
-                          style: {
-                            ...image.style,
-                            translateY: image.style.translateY + 1,
-                          },
-                        }
-                      : image
-                  )
-                ))
+            if (selectedImage) {
+              if (images[selectedImage - 1]?.style.translateY >= 500) return
+              updateImageStyle(selectedImage, {
+                translateY: images[selectedImage - 1]?.style.translateY + 1,
+              })
+            }
           }}
           onDecrement={() => {
-            selectedImage &&
-              (images[selectedImage - 1]?.style.translateY <= -500 ||
-                setImages(
-                  images.map((image, index) =>
-                    index === selectedImage - 1
-                      ? {
-                          ...image,
-                          style: {
-                            ...image.style,
-                            translateY: image.style.translateY - 1,
-                          },
-                        }
-                      : image
-                  )
-                ))
+            if (selectedImage) {
+              if (images[selectedImage - 1]?.style.translateY <= -500) return
+              updateImageStyle(selectedImage, {
+                translateY: images[selectedImage - 1]?.style.translateY - 1,
+              })
+            }
           }}
         />
       </div>
diff --git a/components/editor/text-context-menu.tsx b/components/editor/text-context-menu.tsx
index 0cdc33d..d7fe0f5 100644
--- a/components/editor/text-context-menu.tsx
+++ b/components/editor/text-context-menu.tsx
@@ -17,7 +17,7 @@ export default function ContextMenuText({
 }: {
   children: React.ReactNode
 }) {
-  const { setTexts, texts } = useImageOptions()
+  const { setTexts, texts, updateText, updateTextStyle } = useImageOptions()
   const { selectedText, setSelectedText } = useSelectedLayers()
   const { showTextControls, setShowTextControls } = useMoveable()
 
@@ -26,38 +26,19 @@ export default function ContextMenuText({
       setTexts([])
       return
     }
-    selectedText &&
-    setTexts(
-      texts.map((text, index) =>
-        index === selectedText - 1
-          ? {
-              ...text,
-              content: '',
-              text: '',
-            }
-          : text
-      )
-    )
+    if (selectedText) {
+      updateText(selectedText, { content: '' })
+    }
   }
 
   const bringToFrontOrBack = (direction: 'front' | 'back') => {
     if (selectedText) {
-      setTexts(
-        texts.map((text, index) =>
-          index === selectedText - 1
-            ? {
-                ...text,
-                style: {
-                  ...text.style,
-                  zIndex:
-                    direction === 'front'
-                      ? text.style.zIndex + 1
-                      : text.style.zIndex - 1,
-                },
-              }
-            : text
-        )
-      )
+      updateTextStyle(selectedText, {
+        zIndex:
+          direction === 'front'
+            ? texts[selectedText - 1].style.zIndex + 1
+            : texts[selectedText - 1].style.zIndex - 1,
+      })
     }
   }
 
diff --git a/components/editor/text-options/add-text-layer.tsx b/components/editor/text-options/add-text-layer.tsx
index 639ab8a..ed1d43d 100644
--- a/components/editor/text-options/add-text-layer.tsx
+++ b/components/editor/text-options/add-text-layer.tsx
@@ -5,19 +5,16 @@ import { Button } from '@/components/ui/button'
 import { useImageOptions } from '@/store/use-image-options'
 
 export default function AddTextLayer() {
-  const { setTexts, defaultTextStyle, texts } = useImageOptions()
+  const { addText, defaultTextStyle, texts } = useImageOptions()
 
   return (
     <Button
       onClick={() => {
-        setTexts([
-          ...texts,
-          {
-            content: 'Edit this text',
-            id: texts.length + 1,
-            style: defaultTextStyle,
-          },
-        ])
+        addText({
+          content: 'Edit this text',
+          id: texts.length + 1,
+          style: defaultTextStyle,
+        })
       }}
       size="lg"
       variant="stylish"
diff --git a/components/editor/text-options/font-settings.tsx b/components/editor/text-options/font-settings.tsx
index 9b938a0..ec3fb4b 100644
--- a/components/editor/text-options/font-settings.tsx
+++ b/components/editor/text-options/font-settings.tsx
@@ -29,76 +29,32 @@ const FontPicker = dynamic(
 )
 
 export default function FontSettings() {
-  const { setTexts, texts } = useImageOptions()
+  const { updateTextStyle, updateText, texts } = useImageOptions()
   const { selectedText } = useSelectedLayers()
   const { setShowTextControls } = useMoveable()
 
   const handleColorChange = (color: string) => {
-    selectedText &&
-      setTexts(
-        texts.map((text, index) =>
-          index === selectedText - 1
-            ? {
-                ...text,
-                style: {
-                  ...text.style,
-                  textColor: color,
-                },
-              }
-            : text
-        )
-      )
+    if (selectedText) {
+      updateTextStyle(selectedText, { textColor: color })
+    }
   }
 
   const handleShadowColorChange = (color: string) => {
-    selectedText &&
-      setTexts(
-        texts.map((text, index) =>
-          index === selectedText - 1
-            ? {
-                ...text,
-                style: {
-                  ...text.style,
-                  shadowColor: color,
-                },
-              }
-            : text
-        )
-      )
+    if (selectedText) {
+      updateTextStyle(selectedText, { shadowColor: color })
+    }
   }
 
   const handleAlignmentChange = (alignment: 'left' | 'center' | 'right') => {
-    selectedText &&
-      setTexts(
-        texts.map((text, index) =>
-          index === selectedText - 1
-            ? {
-                ...text,
-                style: {
-                  ...text.style,
-                  textAlign: alignment,
-                },
-              }
-            : text
-        )
-      )
+    if (selectedText) {
+      updateTextStyle(selectedText, { textAlign: alignment })
+    }
   }
 
   const handleFontWeight = (weight: number) => {
-    selectedText &&
-      setTexts(
-        texts.map((text, index) =>
-          index === selectedText - 1
-            ? {
-                ...text,
-                style: {
-                  ...text.style,
-                  fontWeight: weight,
-                },
-              }
-            : text
-        )
-      )
+    if (selectedText) {
+      updateTextStyle(selectedText, { fontWeight: weight })
+    }
   }
 
   return (
@@ -114,20 +70,9 @@ export default function FontSettings() {
         }
         variants={['200', '300', 'regular', '500', '600', '700', '800']}
         onChange={(font) => {
-          selectedText &&
-            setTexts(
-              texts.map((text, index) =>
-                index === selectedText - 1
-                  ? {
-                      ...text,
-                      style: {
-                        ...text.style,
-                        fontFamily: font.family,
-                      },
-                    }
-                  : text
-              )
-            )
+          if (selectedText) {
+            updateTextStyle(selectedText, { fontFamily: font.family })
+          }
         }}
       />
 
@@ -196,20 +141,9 @@ export default function FontSettings() {
           }
           onValueChange={(value: number[]) => {
             setShowTextControls(false)
-            selectedText &&
-              setTexts(
-                texts.map((text, index) =>
-                  index === selectedText - 1
-                    ? {
-                        ...text,
-                        style: {
-                          ...text.style,
-                          letterSpacing: value[0],
-                        },
-                      }
-                    : text
-                )
-              )
+            if (selectedText) {
+              updateTextStyle(selectedText, { letterSpacing: value[0] })
+            }
           }}
           onValueCommit={() => setShowTextControls(true)}
           onIncrement={() => {
@@ -219,19 +153,11 @@ export default function FontSettings() {
               texts.length === 0
             )
               return
-            setTexts(
-              texts.map((text, index) =>
-                index === selectedText - 1
-                  ? {
-                      ...text,
-                      style: {
-                        ...text.style,
-                        letterSpacing: Number(text.style.letterSpacing) + 0.001,
-                      },
-                    }
-                  : text
-              )
-            )
+            if (selectedText) {
+              updateTextStyle(selectedText, {
+                letterSpacing: Number(texts[selectedText - 1].style.letterSpacing) + 0.001,
+              })
+            }
           }}
           onDecrement={() => {
             if (!selectedText) return
@@ -240,19 +166,11 @@ export default function FontSettings() {
               texts.length === 0
             )
               return
-            setTexts(
-              texts.map((text, index) =>
-                index === selectedText - 1
-                  ? {
-                      ...text,
-                      style: {
-                        ...text.style,
-                        letterSpacing: Number(text.style.letterSpacing) - 0.001,
-                      },
-                    }
-                  : text
-              )
-            )
+            if (selectedText) {
+              updateTextStyle(selectedText, {
+                letterSpacing: Number(texts[selectedText - 1].style.letterSpacing) - 0.001,
+              })
+            }
           }}
         />
       </div>
@@ -340,20 +258,9 @@ export default function FontSettings() {
           max={1}
           step={0.01}
           onValueChange={(value) => {
-            selectedText &&
-              setTexts(
-                texts.map((text, index) =>
-                  index === selectedText - 1
-                    ? {
-                        ...text,
-                        style: {
-                          ...text.style,
-                          shadowOpacity: value[0],
-                        },
-                      }
-                    : text
-                )
-              )
+            if (selectedText) {
+              updateTextStyle(selectedText, { shadowOpacity: value[0] })
+            }
           }}
           value={
             texts.length !== 0 && selectedText
@@ -367,19 +274,12 @@ export default function FontSettings() {
               texts.length === 0
             )
               return
-            setTexts(
-              texts.map((text, index) =>
-                index === selectedText - 1
-                  ? {
-                      ...text,
-                      style: {
-                        ...text.style,
-                        shadowOpacity: Number(text.style.shadowOpacity) + 0.01,
-                      },
-                    }
-                  : text
-              )
-            )
+            if (selectedText) {
+              updateTextStyle(selectedText, {
+                shadowOpacity:
+                  Number(texts[selectedText - 1].style.shadowOpacity) + 0.01,
+              })
+            }
           }}
           onDecrement={() => {
             if (!selectedText) return
@@ -388,19 +288,12 @@ export default function FontSettings() {
               texts.length === 0
             )
               return
-            setTexts(
-              texts.map((text, index) =>
-                index === selectedText - 1
-                  ? {
-                      ...text,
-                      style: {
-                        ...text.style,
-                        shadowOpacity: Number(text.style.shadowOpacity) - 0.01,
-                      },
-                    }
-                  : text
-              )
-            )
+            if (selectedText) {
+              updateTextStyle(selectedText, {
+                shadowOpacity:
+                  Number(texts[selectedText - 1].style.shadowOpacity) - 0.01,
+              })
+            }
           }}
         />
       </div>
diff --git a/store/use-image-options.ts b/store/use-image-options.ts
index 825d146..ec1d1e6 100644
--- a/store/use-image-options.ts
+++ b/store/use-image-options.ts
@@ -39,6 +39,30 @@ export interface ImageItem {
   frame?: FrameTypes
 }
 
+export interface TextStyle {
+  textSize: string
+  textColor: string
+  textAlign: 'left' | 'center' | 'right'
+  fontWeight: number
+  fontFamily: string
+  letterSpacing: number
+  textShadow: string
+  shadowName: string
+  shadowColor: string
+  shadowOpacity: number
+  hasBackground: boolean
+  backgroundColor: string
+  padding: string
+  zIndex: number
+  position: string
+}
+
+export interface TextItem {
+  id: number
+  content: string
+  style: TextStyle
+}
+
 interface ImageOptionsState {
   scale: number
   setScale: (scale: number) => void
@@ -65,50 +89,13 @@ interface ImageOptionsState {
   getImage: (id: number) => ImageItem | undefined
   getImageIndex: (id: number) => number
 
-  texts: {
-    id: number
-    content: string
-    style: {
-      textSize: string
-      textColor: string
-      textAlign: 'left' | 'center' | 'right'
-      fontWeight: number
-      fontFamily: string
-      letterSpacing: number
-      textShadow: string
-      shadowName: string
-      shadowColor: string
-      shadowOpacity: number
-      hasBackground: boolean
-      backgroundColor: string
-      padding: string
-      zIndex: number
-      position: string
-    }
-  }[]
-  setTexts: (
-    texts: {
-      id: number
-      content: string
-      style: {
-        textSize: string
-        textColor: string
-        textAlign: 'left' | 'center' | 'right'
-        fontWeight: number
-        fontFamily: string
-        letterSpacing: number
-        textShadow: string
-        shadowName: string
-        shadowColor: string
-        shadowOpacity: number
-        hasBackground: boolean
-        backgroundColor: string
-        padding: string
-        zIndex: number
-        position: string
-      }
-    }[]
-  ) => void
+  texts: TextItem[]
+  setTexts: (texts: TextItem[]) => void
+  addText: (text: TextItem) => void
+  updateTextStyle: (id: number, style: Partial<TextStyle>) => void
+  updateText: (id: number, data: Partial<TextItem>) => void
+  getText: (id: number) => TextItem | undefined
+  getTextIndex: (id: number) => number
 
   defaultStyle: {
     imageSize: string
@@ -238,6 +225,30 @@ export const useImageOptions = create(
 
       texts: [],
       setTexts: (texts) => set({ texts }),
+      addText: (text) =>
+        set((state) => ({
+          texts: [...state.texts, text],
+        })),
+      updateTextStyle: (id, style) =>
+        set((state) => ({
+          texts: state.texts.map((txt) =>
+            txt.id === id ? { ...txt, style: { ...txt.style, ...style } } : txt
+          ),
+        })),
+      updateText: (id, data) =>
+        set((state) => ({
+          texts: state.texts.map((txt) =>
+            txt.id === id
+              ? {
+                  ...txt,
+                  ...data,
+                  style: { ...txt.style, ...(data.style ?? {}) },
+                }
+              : txt
+          ),
+        })),
+      getText: (id) => get().texts.find((txt) => txt.id === id),
+      getTextIndex: (id) => get().texts.findIndex((txt) => txt.id === id),
     }),
     {
       limit: 30,