diff --git a/resources/ts/back/Components/Inputs/CompleteInputFile.tsx b/resources/ts/back/Components/Inputs/CompleteInputFile.tsx
index 5bf7cf62..63e715bd 100644
--- a/resources/ts/back/Components/Inputs/CompleteInputFile.tsx
+++ b/resources/ts/back/Components/Inputs/CompleteInputFile.tsx
@@ -9,7 +9,7 @@ import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 // * Other
 import InputError from "@/back/Components/InputError";
-import ImageCropperLogic from "@/back/Components/Inputs/ImageCropper/ImageCropperLogic";
+import ImageCropper from "@/back/Components/Inputs/ImageCropper";
 import useTrans from "@/hooks/use-translations";
 import str from "@/hooks/use-string";
 import { useToast } from "@/hooks/use-toast";
@@ -53,7 +53,7 @@ export default function ImageCropperWrapper(props: ImageCropperWrapperProps) {
     const { url } = usePage().props.appEnv as AppEnv;
     const [isReset, setIsReset] = useState<boolean>(false);
     const finalFileName = `${fileName}.png`;
-    console.log(value)
+
     const [selectedFile, setSelectedFile] = useState<FileWithPreview | null>(
         () => {
             // When there is an image selected but not stored yet.
@@ -234,7 +234,7 @@ export default function ImageCropperWrapper(props: ImageCropperWrapperProps) {
             {selectedFile ? (
                 <div className="relative">
                     {inputType === enumDynamicFieldTypes.image.value && (
-                        <ImageCropperLogic
+                        <ImageCropper
                             dialogOpen={isDialogOpen}
                             value={value}
                             reset={reset}
diff --git a/resources/ts/back/Components/Inputs/ImageCropper/ImageCropperLogic.tsx b/resources/ts/back/Components/Inputs/ImageCropper.tsx
similarity index 88%
rename from resources/ts/back/Components/Inputs/ImageCropper/ImageCropperLogic.tsx
rename to resources/ts/back/Components/Inputs/ImageCropper.tsx
index 43636fdf..b7fd63ba 100644
--- a/resources/ts/back/Components/Inputs/ImageCropper/ImageCropperLogic.tsx
+++ b/resources/ts/back/Components/Inputs/ImageCropper.tsx
@@ -64,7 +64,7 @@ import { cn } from "@/lib/utils";
   };
 
   /* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */
-  interface ImageCropperLogicProps {
+  interface ImageCropperProps {
     dialogOpen: boolean;
     name: string;
     value?: string | File | null;
@@ -80,7 +80,7 @@ import { cn } from "@/lib/utils";
   }
   /* eslint-enable no-unused-vars, @typescript-eslint/no-unused-vars */
 
-  export default function ImageCropperLogic({
+  export default function ImageCropper({
     dialogOpen,
     setDialogOpen,
     selectedFile,
@@ -93,7 +93,7 @@ import { cn } from "@/lib/utils";
     isReset,
     url,
     finalFileName,
-  }: ImageCropperLogicProps) {
+  }: ImageCropperProps) {
     const { errors } = usePage().props;
 
     const aspect = 1;
@@ -135,104 +135,59 @@ import { cn } from "@/lib/utils";
      * @param cropLocalization Crop localization in the image.
      * @return string
      */
-    function getCroppedImg(
-      image: HTMLImageElement,
-      cropLocalization: PixelCrop,
-    ): string {
+    function getCroppedImg(image: HTMLImageElement, crop: PixelCrop): string {
       const canvas = document.createElement("canvas");
-
-      // NOUVEAU CALCUL: l'image a une taille de base (scaleFactor) + zoom appliqué via transform
-      const baseDisplayedWidth = originalDimensions.width * scaleFactor;
-      const baseDisplayedHeight = originalDimensions.height * scaleFactor;
-      const effectiveZoom = 1 + zoom;
-
-      // Calculer l'échelle vers l'image naturelle
-      const scaleToNatural = image.naturalWidth / baseDisplayedWidth;
-
-      // Les coordonnées de crop doivent être ajustées pour le zoom transform
-      // Le zoom étant centré, on doit calculer le décalage
-      const zoomOffsetX =
-        (baseDisplayedWidth * effectiveZoom - baseDisplayedWidth) / 2;
-      const zoomOffsetY =
-        (baseDisplayedHeight * effectiveZoom - baseDisplayedHeight) / 2;
-
-      // Ajuster les coordonnées par rapport à la position ET au zoom
-      const adjustedCropX =
-        ((cropLocalization.x - imagePosition.x + zoomOffsetX) / effectiveZoom) *
-        scaleToNatural;
-      const adjustedCropY =
-        ((cropLocalization.y - imagePosition.y + zoomOffsetY) / effectiveZoom) *
-        scaleToNatural;
-      const cropWidth = (cropLocalization.width / effectiveZoom) * scaleToNatural;
-      const cropHeight =
-        (cropLocalization.height / effectiveZoom) * scaleToNatural;
-
-      // Calculer l'angle en radians
-      const rad = (rotation * Math.PI) / 180;
-
-      // Créer un canvas temporaire assez grand pour contenir toute la rotation
-      const tmpCanvas = document.createElement("canvas");
-      const tmpCtx = tmpCanvas.getContext("2d")!;
-      tmpCanvas.width = image.naturalWidth;
-      tmpCanvas.height = image.naturalHeight;
-
-      tmpCtx.save();
-
-      // Appliquer les filtres CSS au contexte du canvas (sauf blur qui ne marche pas bien)
-      tmpCtx.filter = `brightness(${brightness}%) contrast(${contrast}%) saturate(${saturation}%) sepia(${sepia}%) grayscale(${grayscale}%)`;
-
-      // Placer le centre de rotation
-      tmpCtx.translate(tmpCanvas.width / 2, tmpCanvas.height / 2);
-
-      // Appliquer seulement le flip (le scale est maintenant dans les dimensions)
-      tmpCtx.scale(flipX ? -1 : 1, flipY ? -1 : 1);
-
-      // Appliquer rotation
-      const getRotation = () => {
-        if (flipX && flipY) return rad;
-        if (flipX || flipY) return -rad;
-        return rad;
-      };
-      tmpCtx.rotate(getRotation());
-
-      // Dessiner l'image au centre avec les filtres appliqués
-      tmpCtx.drawImage(image, -image.naturalWidth / 2, -image.naturalHeight / 2);
-
-      tmpCtx.restore();
-
-      // Maintenant, extraire la zone cropée depuis le canvas temporaire
-      const imageData = tmpCtx.getImageData(
-        adjustedCropX,
-        adjustedCropY,
-        cropWidth,
-        cropHeight,
-      );
-
-      // IMPORTANT: Redimensionner à la taille finale souhaitée (validationRules)
       canvas.width = validationRules.width;
       canvas.height = validationRules.height;
-
       const ctx = canvas.getContext("2d")!;
-
-      // Créer un canvas temporaire avec l'image cropée
-      const tempCanvas = document.createElement("canvas");
-      const tempCtx = tempCanvas.getContext("2d")!;
-      tempCanvas.width = cropWidth;
-      tempCanvas.height = cropHeight;
-      tempCtx.putImageData(imageData, 0, 0);
-
-      // Redimensionner l'image cropée aux dimensions finales souhaitées
-      ctx.drawImage(
-        tempCanvas,
-        0,
-        0,
-        cropWidth,
-        cropHeight, // Source
-        0,
-        0,
-        validationRules.width,
-        validationRules.height, // Destination
+    
+      const tmpCanvas = document.createElement("canvas");
+      tmpCanvas.width = maxContainerWidth;
+      tmpCanvas.height = maxContainerHeight;
+      const tmpCtx = tmpCanvas.getContext("2d")!;
+    
+      tmpCtx.save();
+    
+      // Taille de l'image affichée avec zoom
+      const displayedWidth = originalDimensions.width * scaleFactor * (1 + zoom);
+      const displayedHeight = originalDimensions.height * scaleFactor * (1 + zoom);
+    
+      // Coin supérieur gauche réel après zoom
+      const offsetX = imagePosition.x - (displayedWidth - originalDimensions.width * scaleFactor) / 2;
+      const offsetY = imagePosition.y - (displayedHeight - originalDimensions.height * scaleFactor) / 2;
+    
+      // Déplacer au centre pour rotation + flip
+      tmpCtx.translate(offsetX + displayedWidth / 2, offsetY + displayedHeight / 2);
+      tmpCtx.rotate((rotation * Math.PI) / 180);
+      tmpCtx.scale(flipX ? -1 : 1, flipY ? -1 : 1);
+    
+      // Appliquer les filtres
+      tmpCtx.filter = `brightness(${brightness}%) contrast(${contrast}%) saturate(${saturation}%) sepia(${sepia}%) grayscale(${grayscale}%)`;
+    
+      // Dessiner l'image centrée
+      tmpCtx.drawImage(
+        image,
+        -displayedWidth / 2,
+        -displayedHeight / 2,
+        displayedWidth,
+        displayedHeight
       );
+    
+      tmpCtx.restore();
+    
+      // Extraire la zone cropée visible
+      ctx.drawImage(
+        tmpCanvas,
+        crop.x,
+        crop.y,
+        crop.width,
+        crop.height,
+        0,
+        0,
+        canvas.width,
+        canvas.height
+      );
+    
       return canvas.toDataURL("image/png");
     }
 
@@ -726,7 +681,6 @@ import { cn } from "@/lib/utils";
               <ReactCrop
                 crop={cropZone}
                 onChange={(_, percentCrop) => setCropZone(percentCrop)}
-                onComplete={() => {}}
                 aspect={aspect}
                 className="w-full"
                 locked
@@ -752,20 +706,12 @@ import { cn } from "@/lib/utils";
                       position: "absolute",
                       left: `${imagePosition.x}px`,
                       top: `${imagePosition.y}px`,
-                      width:
-                        originalDimensions.width > 0
-                          ? `${originalDimensions.width * scaleFactor}px`
-                          : "auto",
-                      height:
-                        originalDimensions.height > 0
-                          ? `${originalDimensions.height * scaleFactor}px`
-                          : "auto",
+                      width: originalDimensions.width > 0 ? `${originalDimensions.width * scaleFactor}px` : "auto",
+                      height: originalDimensions.height > 0 ? `${originalDimensions.height * scaleFactor}px` : "auto",
                       transform: `scale(${1 + zoom}) rotate(${rotation}deg) scaleX(${flipX ? -1 : 1}) scaleY(${flipY ? -1 : 1})`,
                       filter: `brightness(${brightness}%) contrast(${contrast}%) saturate(${saturation}%) sepia(${sepia}%) grayscale(${grayscale}%)`,
                       transformOrigin: "center center",
-                      transition: isDragging
-                        ? "none"
-                        : "transform 0.2s ease, filter 0.2s ease",
+                      transition: !isDragging ? "transform 0.2s ease, filter 0.2s ease" :  "none",
                       cursor: isDragging ? "grabbing" : "grab",
                       userSelect: "none",
                     }}