diff --git a/package-lock.json b/package-lock.json
index 001c7435d6..1cc75c7679 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -49,6 +49,7 @@
         "clsx": "^2.1.1",
         "codemirror": "5.65.12",
         "cookies-js": "^1.2.2",
+        "cropperjs": "^1.6.2",
         "cva": "^1.0.0-beta.3",
         "floating-vue": "^5.2.2",
         "fuzzysort": "^3.1.0",
@@ -4068,6 +4069,12 @@
       "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
       "license": "MIT"
     },
+    "node_modules/cropperjs": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.2.tgz",
+      "integrity": "sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
diff --git a/package.json b/package.json
index 5ee5f6ea33..04333222d0 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "clsx": "^2.1.1",
     "codemirror": "5.65.12",
     "cookies-js": "^1.2.2",
+    "cropperjs": "^1.6.2",
     "cva": "^1.0.0-beta.3",
     "floating-vue": "^5.2.2",
     "fuzzysort": "^3.1.0",
diff --git a/resources/js/components/assets/Editor/CropEditor.vue b/resources/js/components/assets/Editor/CropEditor.vue
new file mode 100644
index 0000000000..d877eb2207
--- /dev/null
+++ b/resources/js/components/assets/Editor/CropEditor.vue
@@ -0,0 +1,542 @@
+<template>
+    <Stack size="full" :open="open" inset @update:open="$emit('update:open', $event)" :show-close-button="false">
+        <div class="min-h-0 flex h-full flex-col bg-gray-100 dark:bg-dark-800">
+            <!-- Header -->
+            <header class="relative flex w-full items-center justify-between px-4 py-3 border-b dark:border-gray-700">
+                <Heading size="lg">{{ __('Crop Image') }}</Heading>
+                <ui-button variant="ghost" icon="x" round @click="close" :aria-label="__('Close')" />
+            </header>
+
+            <!-- Content -->
+            <div class="flex flex-1 flex-col overflow-auto bg-black relative min-h-0 w-full items-center justify-center" role="img" :aria-label="__('Image crop area')">
+                <div class="px-3 lg:px-6 min-h-0">
+                    <img ref="image" :src="image" :alt="__('Image to crop')" class="max-w-full max-h-full" />
+                </div>
+            </div>
+
+            <!-- Footer -->
+            <div class="flex items-center justify-between gap-3 border-t dark:border-gray-700 px-4 py-3">
+                <div class="flex gap-3">
+                    <Select
+                        v-model="selectedRatio"
+                        :options="aspectRatios"
+                        option-label="label"
+                        option-value="value"
+                        :placeholder="__('Aspect ratio')"
+                        size="sm"
+                        class="w-48"
+                        :aria-label="__('Select aspect ratio')"
+                        @update:modelValue="setAspectRatio"
+                    />
+                    <Button
+                        v-if="selectedRatio !== null"
+                        icon="flip-vertical"
+                        :variant="isFlipped ? 'pressed' : 'ghost'"
+                        size="sm"
+                        :text="__('Flip Orientation')"
+                        :aria-label="__('Flip crop orientation')"
+                        :aria-pressed="isFlipped"
+                        @click="toggleOrientation"
+                    />
+                </div>
+                <div class="flex gap-3">
+                    <Button variant="ghost" :text="__('Cancel')" :aria-label="__('Cancel cropping')" @click="close" />
+                    <Button variant="ghost" :text="__('Reset')" :aria-label="__('Reset crop selection')" @click="reset" />
+                    <Button variant="primary" :text="__('Finish')" :aria-label="__('Finish cropping')" :disabled="!cropper" @click="crop" />
+                </div>
+            </div>
+        </div>
+    </Stack>
+</template>
+
+<script>
+import Cropper from 'cropperjs';
+import 'cropperjs/dist/cropper.css';
+import {
+    Stack,
+    Heading,
+    Button,
+    Select,
+} from '@ui';
+
+export default {
+    emits: ['cropped', 'closed', 'update:open'],
+
+    components: {
+        Stack,
+        Heading,
+        Button,
+        Select,
+    },
+
+    props: {
+        image: {
+            type: String,
+            required: true,
+        },
+        mimeType: {
+            type: String,
+            required: true,
+        },
+        open: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    data() {
+        return {
+            cropper: null,
+            selectedRatio: null,
+            baseRatio: null,
+            isFlipped: false,
+            escBinding: null,
+            enterBinding: null,
+            isOptionKeyPressed: false,
+            initialCropBoxCenter: null,
+            isAdjustingCropBox: false,
+            animationFrameId: null,
+            aspectRatios: [
+                { label: '16:9', value: 16 / 9 },
+                { label: '4:3', value: 4 / 3 },
+                { label: '3:2', value: 3 / 2 },
+                { label: '2:1', value: 2 / 1 },
+                { label: '1:1', value: 1 },
+            ],
+        };
+    },
+
+    watch: {
+        open(newValue) {
+            if (newValue) {
+                // Wait for Stack to open and image to be visible
+                this.$nextTick(() => {
+                    setTimeout(() => {
+                        this.initCropper();
+                    }, 100);
+                });
+                // Bind keyboard shortcuts when editor opens
+                this.bindKeyboardShortcuts();
+            } else {
+                // Unbind keyboard shortcuts when editor closes
+                this.unbindKeyboardShortcuts();
+                if (this.cropper) {
+                    this.cropper.destroy();
+                    this.cropper = null;
+                    // Reset state to initial values
+                    this.selectedRatio = null;
+                    this.baseRatio = null;
+                    this.isFlipped = false;
+                }
+            }
+        },
+    },
+
+    beforeUnmount() {
+        this.unbindKeyboardShortcuts();
+        if (this.cropper) {
+            this.cropper.destroy();
+        }
+    },
+
+    methods: {
+        initCropper() {
+            const imageElement = this.$refs.image;
+            if (!imageElement) return;
+
+            // Destroy existing cropper if any
+            if (this.cropper) {
+                this.cropper.destroy();
+                this.cropper = null;
+            }
+
+            // Set crossOrigin attribute to handle CORS images
+            // This allows canvas operations on cross-origin images if CORS headers are present
+            if (imageElement.crossOrigin === null) {
+                imageElement.crossOrigin = 'anonymous';
+            }
+
+            // Wait for image to load if not already loaded
+            if (imageElement.complete) {
+                this.createCropper(imageElement);
+            } else {
+                imageElement.addEventListener('load', () => {
+                    this.createCropper(imageElement);
+                }, { once: true });
+            }
+        },
+
+        createCropper(imageElement) {
+            try {
+                this.cropper = new Cropper(imageElement, {
+                    aspectRatio: NaN,
+                    viewMode: 1,
+                    dragMode: 'move',
+                    autoCropArea: 1,
+                    restore: false,
+                    guides: true,
+                    center: true,
+                    highlight: false,
+                    cropBoxMovable: true,
+                    cropBoxResizable: true,
+                    toggleable: false,
+                    zoomable: true,
+                    scalable: false,
+                    rotatable: false,
+                    responsive: true,
+                });
+
+                // Add event listeners for center-based resizing with Option/Alt key
+                this.setupCropperEvents();
+            } catch (error) {
+                // Handle SecurityError from tainted canvas (cross-origin without CORS)
+                if (error.name === 'SecurityError' || error.message?.includes('tainted') || error.message?.includes('cross-origin')) {
+                    this.$toast.error(__('Unable to crop image from external source. The image must be served with proper CORS headers.'));
+                    this.close();
+                } else {
+                    // Re-throw other errors
+                    throw error;
+                }
+            }
+        },
+
+        setupCropperEvents() {
+            if (!this.cropper) return;
+
+            const imageElement = this.$refs.image;
+            if (!imageElement) return;
+
+            // Store initial crop box center when crop starts
+            imageElement.addEventListener('cropstart', () => {
+                const cropBoxData = this.cropper.getCropBoxData();
+                this.initialCropBoxCenter = {
+                    x: cropBoxData.left + cropBoxData.width / 2,
+                    y: cropBoxData.top + cropBoxData.height / 2,
+                };
+                this.isAdjustingCropBox = false;
+            });
+
+            // Adjust crop box position to maintain center when Option/Alt is held during resize
+            // Use requestAnimationFrame to throttle updates and prevent lag
+            imageElement.addEventListener('cropmove', () => {
+                if (!this.isOptionKeyPressed || !this.initialCropBoxCenter || this.isAdjustingCropBox) {
+                    return;
+                }
+
+                // Cancel any pending animation frame
+                if (this.animationFrameId) {
+                    cancelAnimationFrame(this.animationFrameId);
+                }
+
+                // Schedule update on next animation frame to throttle
+                this.animationFrameId = requestAnimationFrame(() => {
+                    this.adjustCropBoxCenter();
+                });
+            });
+
+            // Reset tracking when crop ends
+            imageElement.addEventListener('cropend', () => {
+                if (this.animationFrameId) {
+                    cancelAnimationFrame(this.animationFrameId);
+                    this.animationFrameId = null;
+                }
+                this.initialCropBoxCenter = null;
+                this.isAdjustingCropBox = false;
+            });
+        },
+
+        adjustCropBoxCenter() {
+            if (!this.cropper || !this.isOptionKeyPressed || !this.initialCropBoxCenter || this.isAdjustingCropBox) {
+                return;
+            }
+
+            this.isAdjustingCropBox = true;
+
+            const cropBoxData = this.cropper.getCropBoxData();
+            const currentCenter = {
+                x: cropBoxData.left + cropBoxData.width / 2,
+                y: cropBoxData.top + cropBoxData.height / 2,
+            };
+
+            // Calculate how far the center has moved
+            const centerDeltaX = currentCenter.x - this.initialCropBoxCenter.x;
+            const centerDeltaY = currentCenter.y - this.initialCropBoxCenter.y;
+
+            // Only adjust if center has moved significantly (more than 1px)
+            if (Math.abs(centerDeltaX) > 1 || Math.abs(centerDeltaY) > 1) {
+                // Adjust position to maintain the original center
+                const newLeft = this.initialCropBoxCenter.x - cropBoxData.width / 2;
+                const newTop = this.initialCropBoxCenter.y - cropBoxData.height / 2;
+
+                this.cropper.setCropBoxData({
+                    left: newLeft,
+                    top: newTop,
+                    width: cropBoxData.width,
+                    height: cropBoxData.height,
+                });
+            }
+
+            this.isAdjustingCropBox = false;
+        },
+
+        setAspectRatio(ratio) {
+            if (!this.cropper) return;
+
+            if (ratio === null) {
+                this.cropper.setAspectRatio(NaN);
+                this.baseRatio = null;
+                this.isFlipped = false;
+            } else {
+                this.baseRatio = ratio;
+                this.isFlipped = false;
+                this.applyCurrentRatio();
+                // Expand crop box to fill available space
+                this.expandCropBoxToFill();
+            }
+        },
+
+        toggleOrientation() {
+            if (!this.cropper || this.baseRatio === null) return;
+
+            // Toggle the flipped state
+            this.isFlipped = !this.isFlipped;
+            this.applyCurrentRatio();
+            // Expand crop box to fill available space after flipping
+            this.expandCropBoxToFill();
+        },
+
+        applyCurrentRatio() {
+            if (!this.cropper || this.baseRatio === null) return;
+
+            const ratioToApply = this.isFlipped ? 1 / this.baseRatio : this.baseRatio;
+
+            // Find if the ratio to apply matches one in our list
+            const matchingRatio = this.aspectRatios.find(r => Math.abs(r.value - ratioToApply) < 0.001);
+
+            if (matchingRatio && matchingRatio.value === ratioToApply) {
+                // If the ratio is in our list, update the select to show it
+                this.selectedRatio = matchingRatio.value;
+            }
+
+            // Apply the ratio to the cropper
+            this.cropper.setAspectRatio(ratioToApply);
+        },
+
+        expandCropBoxToFill() {
+            if (!this.cropper) return;
+
+            const canvasData = this.cropper.getCanvasData();
+
+            // Calculate the maximum crop box size that fits within the canvas
+            // while maintaining the aspect ratio
+            let cropWidth = canvasData.width;
+            let cropHeight = canvasData.height;
+
+            if (this.baseRatio !== null) {
+                const ratioToApply = this.isFlipped ? 1 / this.baseRatio : this.baseRatio;
+
+                // Calculate dimensions that fit within canvas while maintaining ratio
+                if (canvasData.width / canvasData.height > ratioToApply) {
+                    // Canvas is wider than ratio, fit to height
+                    cropWidth = canvasData.height * ratioToApply;
+                    cropHeight = canvasData.height;
+                } else {
+                    // Canvas is taller than ratio, fit to width
+                    cropWidth = canvasData.width;
+                    cropHeight = canvasData.width / ratioToApply;
+                }
+            }
+
+            // Center the crop box
+            const left = canvasData.left + (canvasData.width - cropWidth) / 2;
+            const top = canvasData.top + (canvasData.height - cropHeight) / 2;
+
+            this.cropper.setCropBoxData({
+                left,
+                top,
+                width: cropWidth,
+                height: cropHeight,
+            });
+        },
+
+        crop() {
+            if (!this.cropper) return;
+
+            try {
+                // Get crop box data in natural image coordinates
+                const cropBoxData = this.cropper.getCropBoxData();
+                const imageData = this.cropper.getImageData();
+
+                // Calculate the crop dimensions in natural image coordinates
+                // Scale from display coordinates to natural coordinates
+                const scaleX = imageData.naturalWidth / imageData.width;
+                const scaleY = imageData.naturalHeight / imageData.height;
+
+                const naturalCropWidth = cropBoxData.width * scaleX;
+                const naturalCropHeight = cropBoxData.height * scaleY;
+
+                // Use the calculated dimensions to preserve aspect ratio
+                const canvas = this.cropper.getCroppedCanvas({
+                    width: naturalCropWidth,
+                    height: naturalCropHeight,
+                });
+
+                if (!canvas) {
+                    this.$toast.error(__('Failed to crop image'));
+                    return;
+                }
+
+                // Determine quality based on format (PNG doesn't use quality parameter)
+                // Note: canvas.toBlob() doesn't support GIF - browsers silently fall back to PNG
+                // So we need to convert GIF to PNG to match what's actually produced
+                let outputMimeType = this.mimeType;
+                if (outputMimeType === 'image/gif') {
+                    outputMimeType = 'image/png';
+                }
+
+                const quality = outputMimeType === 'image/jpeg' || outputMimeType === 'image/webp' ? 0.95 : undefined;
+
+                canvas.toBlob((blob) => {
+                    if (!blob) {
+                        this.$toast.error(__('Failed to create cropped image'));
+                        return;
+                    }
+
+                    // Determine file extension from MIME type
+                    const extensionMap = {
+                        'image/jpeg': 'jpg',
+                        'image/png': 'png',
+                        'image/webp': 'webp',
+                        'image/gif': 'gif',
+                    };
+                    const extension = extensionMap[outputMimeType] || 'png';
+
+                    // Convert blob to File object with correct MIME type and extension
+                    // This ensures the server can properly validate the file
+                    const file = new File([blob], `cropped-image.${extension}`, { type: outputMimeType });
+
+                    this.$emit('cropped', { blob: file, mimeType: outputMimeType });
+                    this.close();
+                }, outputMimeType, quality);
+            } catch (error) {
+                // Handle SecurityError from tainted canvas (cross-origin without CORS)
+                if (error.name === 'SecurityError' || error.message?.includes('tainted') || error.message?.includes('cross-origin')) {
+                    this.$toast.error(__('Unable to crop image from external source. The image must be served with proper CORS headers.'));
+                    return;
+                }
+                // Re-throw other errors
+                throw error;
+            }
+        },
+
+        reset() {
+            if (this.cropper) {
+                this.selectedRatio = null;
+                this.baseRatio = null;
+                this.isFlipped = false;
+                this.cropper.setAspectRatio(NaN);
+                // Reset to full canvas (image) bounds
+                const canvasData = this.cropper.getCanvasData();
+                this.cropper.setCropBoxData({
+                    left: canvasData.left,
+                    top: canvasData.top,
+                    width: canvasData.width,
+                    height: canvasData.height,
+                });
+            }
+        },
+
+        bindKeyboardShortcuts() {
+            // Escape to close
+            this.escBinding = this.$keys.bindGlobal('esc', (e) => {
+                e.preventDefault();
+                this.close();
+            });
+
+            // Enter to finish (only if cropper is ready and not in a form field)
+            this.enterBinding = this.$keys.bindGlobal('enter', (e) => {
+                if (this.cropper && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
+                    // Check if focus is not in an input/textarea/select
+                    const activeElement = document.activeElement;
+                    const isInFormField = activeElement && (
+                        activeElement.tagName === 'INPUT' ||
+                        activeElement.tagName === 'TEXTAREA' ||
+                        activeElement.tagName === 'SELECT'
+                    );
+                    if (!isInFormField) {
+                        e.preventDefault();
+                        this.crop();
+                    }
+                }
+            });
+
+            // Track Option/Alt key for center-based resizing
+            window.addEventListener('keydown', this.handleKeyDown);
+            window.addEventListener('keyup', this.handleKeyUp);
+        },
+
+        handleKeyDown(event) {
+            // Track Option key (Alt on Windows/Linux, Option on Mac)
+            // On Mac, Option key produces event.key === 'Alt', not 'Meta'
+            if (event.key === 'Alt' || event.altKey) {
+                this.isOptionKeyPressed = true;
+            }
+        },
+
+        handleKeyUp(event) {
+            // Release Option key tracking
+            // On Mac, Option key produces event.key === 'Alt', not 'Meta'
+            if (event.key === 'Alt') {
+                this.isOptionKeyPressed = false;
+            }
+        },
+
+        unbindKeyboardShortcuts() {
+            if (this.escBinding) {
+                this.escBinding.destroy();
+                this.escBinding = null;
+            }
+            if (this.enterBinding) {
+                this.enterBinding.destroy();
+                this.enterBinding = null;
+            }
+            // Remove Option/Alt key listeners
+            window.removeEventListener('keydown', this.handleKeyDown);
+            window.removeEventListener('keyup', this.handleKeyUp);
+            // Cancel any pending animation frames
+            if (this.animationFrameId) {
+                cancelAnimationFrame(this.animationFrameId);
+                this.animationFrameId = null;
+            }
+            this.isOptionKeyPressed = false;
+            this.isAdjustingCropBox = false;
+        },
+
+        close() {
+            // Cancel any pending animation frames
+            if (this.animationFrameId) {
+                cancelAnimationFrame(this.animationFrameId);
+                this.animationFrameId = null;
+            }
+            if (this.cropper) {
+                this.cropper.destroy();
+                this.cropper = null;
+            }
+            // Reset state to initial values
+            this.selectedRatio = null;
+            this.baseRatio = null;
+            this.isFlipped = false;
+            this.isAdjustingCropBox = false;
+            this.initialCropBoxCenter = null;
+            this.$emit('update:open', false);
+            this.$emit('closed');
+        },
+    },
+};
+</script>
+
+<style>
+    .cropper-bg {
+        background-image: none !important;
+    }
+</style>
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index 12ea14c97d..4f81f58ad8 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -39,6 +39,7 @@
                                 v-slot="{ actions }"
                             >
                                 <ui-button inset size="sm" v-if="isImage && isFocalPointEditorEnabled" @click.prevent="openFocalPointEditor" icon="focus" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Focal Point')" />
+                                <ui-button inset size="sm" v-if="isImage" @click.prevent="openCropEditor" icon="crop" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Crop')" />
                                 <ui-button inset size="sm" v-if="isImage && asset && asset.can_be_transparent" @click="showCheckerboard = !showCheckerboard" icon="eye" variant="ghost" :class="[showCheckerboard ? '[&_svg]:!opacity-45' : '[&_svg]:!opacity-100']" :text="__('Transparency')" />
                                 <ui-button inset size="sm" v-if="canRunAction('rename_asset')" @click.prevent="runAction(actions, 'rename_asset')" icon="rename" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Rename')" />
                                 <ui-button inset size="sm" v-if="canRunAction('move_asset')" @click.prevent="runAction(actions, 'move_asset')" icon="move-folder" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Move to Folder')" />
@@ -167,6 +168,29 @@
                 @closed="closeFocalPointEditor"
             />
 
+            <crop-editor
+                v-if="asset && asset.isImage"
+                :image="asset.preview"
+                :mime-type="asset.mimeType"
+                :open="showCropEditor"
+                @cropped="handleCropped"
+                @closed="closeCropEditor"
+                @update:open="showCropEditor = $event"
+            />
+
+        <confirmation-modal
+            v-model:open="showCropConfirmation"
+            :title="__('Save Cropped Image')"
+            :body-text="__('Would you like to save this as a new copy or replace the original image?')"
+            :button-text="__('Replace Original')"
+            :cancel-text="__('Save as New Copy')"
+            :danger="false"
+            :busy="uploadingCrop"
+            @confirm="uploadCroppedImage(true)"
+            @cancel-clicked="uploadCroppedImage(false)"
+            @cancel="handleCropConfirmationDismissed"
+        />
+
         <confirmation-modal
             v-model:open="closingWithChanges"
             :title="__('Unsaved Changes')"
@@ -182,8 +206,10 @@
 
 <script>
 import FocalPointEditor from './FocalPointEditor.vue';
+import CropEditor from './CropEditor.vue';
 import PdfViewer from './PdfViewer.vue';
 import { pick, flatten } from 'lodash-es';
+import { router } from '@inertiajs/vue3';
 import {
     Dropdown,
     DropdownMenu,
@@ -204,6 +230,7 @@ export default {
         DropdownItem,
         ItemActions,
         FocalPointEditor,
+        CropEditor,
         PdfViewer,
         PublishContainer,
         PublishTabs,
@@ -239,11 +266,16 @@ export default {
             fields: null,
             fieldset: null,
             showFocalPointEditor: false,
+            showCropEditor: false,
             showCheckerboard: true,
             error: null,
             errors: {},
             actions: [],
             closingWithChanges: false,
+            croppedBlob: null,
+            croppedMimeType: null,
+            showCropConfirmation: false,
+            uploadingCrop: false,
         };
     },
 
@@ -288,6 +320,7 @@ export default {
     events: {
         'close-child-editor': function () {
             this.closeFocalPointEditor();
+            this.closeCropEditor();
             this.closeImageEditor();
             this.closeRenamer();
         },
@@ -305,7 +338,7 @@ export default {
 
             const url = cp_url(`assets/${utf8btoa(this.id)}`);
 
-            this.$axios.get(url).then((response) => {
+            return this.$axios.get(url).then((response) => {
                 const data = response.data.data;
                 this.asset = data;
 
@@ -381,6 +414,161 @@ export default {
             this.$dirty.add(this.publishContainer);
         },
 
+        openCropEditor() {
+            this.showCropEditor = true;
+        },
+
+        closeCropEditor() {
+            this.showCropEditor = false;
+        },
+
+        handleCropped({ blob, mimeType }) {
+            this.croppedBlob = blob;
+            this.croppedMimeType = mimeType;
+            // Close crop editor first, then show confirmation
+            this.closeCropEditor();
+            this.$nextTick(() => {
+                this.showCropConfirmation = true;
+            });
+        },
+
+        handleCropConfirmationDismissed() {
+            // User dismissed the modal (Escape/click outside) - only clear state if no upload is in progress
+            // If upload is in progress, the blob should be preserved for retry on failure
+            if (!this.uploadingCrop) {
+                this.croppedBlob = null;
+                this.croppedMimeType = null;
+            }
+        },
+
+        async uploadCroppedImage(replaceOriginal) {
+            if (!this.croppedBlob || !this.asset) return;
+
+            this.uploadingCrop = true;
+
+            try {
+                // Extract container and folder from asset ID (format: container::path)
+                const [containerHandle, assetPath] = this.id.split('::');
+
+                // Extract folder from path (dirname)
+                const pathParts = assetPath.split('/');
+                let filename = pathParts.pop();
+                const folder = pathParts.length > 0 ? pathParts.join('/') : '/';
+
+                // Update filename extension only when saving as new copy
+                // When replacing original, keep original filename so server can find it to overwrite
+                const shouldUpdateExtension = !replaceOriginal && this.croppedMimeType && (
+                    this.croppedMimeType !== this.asset.mimeType
+                );
+
+                if (shouldUpdateExtension) {
+                    const extensionMap = {
+                        'image/jpeg': '.jpg',
+                        'image/png': '.png',
+                        'image/webp': '.webp',
+                        'image/gif': '.gif',
+                    };
+                    const newExtension = extensionMap[this.croppedMimeType];
+                    if (newExtension) {
+                        // Remove old extension and add new one
+                        const nameWithoutExt = filename.replace(/\.[^/.]+$/, '');
+                        filename = nameWithoutExt + newExtension;
+                    }
+                }
+
+                // Create FormData
+                const formData = new FormData();
+                // Use the File object directly - it already has the correct name and MIME type
+                // If we need a different filename, create a new File with that name
+                const fileToUpload = filename !== this.croppedBlob.name
+                    ? new File([this.croppedBlob], filename, { type: this.croppedBlob.type })
+                    : this.croppedBlob;
+                formData.append('file', fileToUpload);
+                formData.append('container', containerHandle);
+                formData.append('folder', folder);
+                formData.append('_token', Statamic.$config.get('csrfToken'));
+
+                if (replaceOriginal) {
+                    formData.append('option', 'overwrite');
+                } else {
+                    // Use timestamp option to avoid conflicts when saving as new copy
+                    formData.append('option', 'timestamp');
+                }
+
+                const url = cp_url('assets');
+                const response = await this.$axios.post(url, formData, {
+                    headers: {
+                        'Content-Type': 'multipart/form-data',
+                    },
+                });
+
+                if (response.data && response.data.data) {
+                    this.$toast.success(replaceOriginal ? __('Image replaced successfully') : __('Cropped image saved successfully'));
+
+                    // If replacing, reload the current asset and bust browser cache; if new copy, redirect to the new asset
+                    if (replaceOriginal) {
+                        // Store original URLs for cache busting
+                        const originalPreview = this.asset?.preview;
+                        const originalThumbnail = this.asset?.thumbnail;
+
+                        // Reload the asset and wait for it to complete
+                        await this.load();
+
+                        // After reload completes, add cache-busting parameter to force browser to reload images
+                        if (this.asset) {
+                            const timestamp = Date.now();
+
+                            // Update preview URL with cache-busting parameter
+                            if (this.asset.preview) {
+                                const previewUrl = this.asset.preview.split('?')[0];
+                                this.asset.preview = `${previewUrl}?t=${timestamp}`;
+                            }
+
+                            // Update thumbnail URL with cache-busting parameter
+                            if (this.asset.thumbnail) {
+                                const thumbnailUrl = this.asset.thumbnail.split('?')[0];
+                                this.asset.thumbnail = `${thumbnailUrl}?t=${timestamp}`;
+                            }
+
+                            // Also directly update any img elements in the DOM that match the original URLs
+                            if (originalPreview || originalThumbnail) {
+                                document.querySelectorAll('img').forEach((img) => {
+                                    const imgSrc = img.src || img.getAttribute('src') || '';
+                                    const imgSrcBase = imgSrc.split('?')[0];
+
+                                    if (originalPreview && imgSrcBase === originalPreview.split('?')[0]) {
+                                        img.src = `${imgSrcBase}?t=${timestamp}`;
+                                    } else if (originalThumbnail && imgSrcBase === originalThumbnail.split('?')[0]) {
+                                        img.src = `${imgSrcBase}?t=${timestamp}`;
+                                    }
+                                });
+                            }
+                        }
+                    } else {
+                        // Extract container and path from the new asset ID (format: container::path)
+                        const newAssetId = response.data.data.id;
+                        const [containerHandle, assetPath] = newAssetId.split('::');
+
+                        // Navigate to the edit URL for the new asset
+                        const editUrl = cp_url(`assets/browse/${containerHandle}/${assetPath}/edit`);
+                        router.get(editUrl);
+                    }
+                }
+
+                this.croppedBlob = null;
+                this.croppedMimeType = null;
+                this.showCropConfirmation = false;
+            } catch (error) {
+                if (error.response && error.response.data) {
+                    this.$toast.error(error.response.data.message || __('Failed to upload cropped image'));
+                } else {
+                    this.$toast.error(__('Failed to upload cropped image'));
+                }
+            } finally {
+                this.uploadingCrop = false;
+            }
+        },
+
         updateValues(values) {
             let updated = { ...event, focus: values.focus };
 
diff --git a/resources/js/components/ui/Modal/ConfirmationModal.vue b/resources/js/components/ui/Modal/ConfirmationModal.vue
index 5d1c12f067..1035adc857 100644
--- a/resources/js/components/ui/Modal/ConfirmationModal.vue
+++ b/resources/js/components/ui/Modal/ConfirmationModal.vue
@@ -1,12 +1,13 @@
 <script setup>
 import { computed, onBeforeUnmount, onMounted, ref, useSlots } from 'vue';
-import { Modal, ModalClose, Button, Icon } from '@/components/ui';
+import { Modal, Button, Icon } from '@/components/ui';
 
 const emit = defineEmits([
     'update:open',
     'opened',
     'confirm',
-    'cancel'
+    'cancel',
+    'cancel-clicked'
 ]);
 
 const props = defineProps({
@@ -48,6 +49,8 @@ const props = defineProps({
     },
 });
 
+const cancelButtonClicked = ref(false);
+
 function updateModalOpen(open) {
     if (! open && props.busy) {
         return;
@@ -55,7 +58,18 @@ function updateModalOpen(open) {
 
     emit('update:open', open);
 
-    if (! open) emit('cancel');
+    if (! open) {
+        if (cancelButtonClicked.value) {
+            emit('cancel-clicked');
+            cancelButtonClicked.value = false;
+        }
+        emit('cancel');
+    }
+}
+
+function handleCancelClick() {
+    cancelButtonClicked.value = true;
+    updateModalOpen(false);
 }
 
 function submit() {
@@ -97,13 +111,13 @@ const shouldCloseOnSubmit = computed(() => {
 
         <template v-if="cancellable || submittable" #footer>
             <div class="flex items-center justify-end space-x-3 pt-3 pb-1">
-                <ModalClose asChild v-if="cancellable">
-                    <Button
-                        variant="ghost"
-                        :disabled="busy"
-                        :text="__(cancelText)"
-                    />
-                </ModalClose>
+                <Button
+                    v-if="cancellable"
+                    variant="ghost"
+                    :disabled="busy"
+                    :text="__(cancelText)"
+                    @click="handleCancelClick"
+                />
                 <Button
                     v-if="submittable"
                     type="submit"
diff --git a/resources/svg/icons/crop.svg b/resources/svg/icons/crop.svg
new file mode 100644
index 0000000000..0f364af507
--- /dev/null
+++ b/resources/svg/icons/crop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.35447 13.25c-0.5182 -3.62742 -0.5182 -8.87258 0 -12.5" stroke-width="1"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.6455 0.75c0.5182 3.62742 0.5182 8.87258 0 12.5" stroke-width="1"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M0.75 10.6459c3.62742 0.5182 8.87258 0.5182 12.5 0" stroke-width="1"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M0.75 3.35423c3.62742 -0.5182 8.87258 -0.5182 12.5 0" stroke-width="1"/></svg>
\ No newline at end of file