diff --git a/package-lock.json b/package-lock.json
index 16f2147a..1ba00854 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,8 @@
             "license": "MIT",
             "dependencies": {
                 "hazardous": "^0.3.0",
-                "node-api-dotnet": "^0.9.19"
+                "node-api-dotnet": "^0.9.19",
+                "vue-advanced-cropper": "^2.8.9"
             },
             "devDependencies": {
                 "@dnd-kit/vue": "^0.3.2",
@@ -422,7 +423,6 @@
             "version": "7.27.1",
             "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
             "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=6.9.0"
@@ -432,7 +432,6 @@
             "version": "7.28.5",
             "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
             "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=6.9.0"
@@ -466,7 +465,6 @@
             "version": "7.29.0",
             "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
             "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/types": "^7.29.0"
@@ -578,7 +576,6 @@
             "version": "7.29.0",
             "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
             "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/helper-string-parser": "^7.27.1",
@@ -2453,7 +2450,6 @@
             "version": "1.5.5",
             "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
             "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/@jridgewell/trace-mapping": {
@@ -4547,7 +4543,6 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.29.tgz",
             "integrity": "sha512-cuzPhD8fwRHk8IGfmYaR4eEe4cAyJEL66Ove/WZL7yWNL134nqLddSLwNRIsFlnnW1kK+p8Ck3viFnC0chXCXw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/parser": "^7.29.0",
@@ -4561,7 +4556,6 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.29.tgz",
             "integrity": "sha512-n0G5o7R3uBVmVxjTIYcz7ovr8sy7QObFG8OQJ3xGCDNhbG60biP/P5KnyY8NLd81OuT1WJflG7N4KWYHaeeaIg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/compiler-core": "3.5.29",
@@ -4572,7 +4566,6 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.29.tgz",
             "integrity": "sha512-oJZhN5XJs35Gzr50E82jg2cYdZQ78wEwvRO6Y63TvLVTc+6xICzJHP1UIecdSPPYIbkautNBanDiWYa64QSFIA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/parser": "^7.29.0",
@@ -4590,7 +4583,6 @@
             "version": "0.30.21",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
             "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@jridgewell/sourcemap-codec": "^1.5.5"
@@ -4600,7 +4592,6 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.29.tgz",
             "integrity": "sha512-Y/ARJZE6fpjzL5GH/phJmsFwx3g6t2KmHKHx5q+MLl2kencADKIrhH5MLF6HHpRMmlRAYBRSvv347Mepf1zVNw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/compiler-dom": "3.5.29",
@@ -4647,7 +4638,6 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.29.tgz",
             "integrity": "sha512-zcrANcrRdcLtmGZETBxWqIkoQei8HaFpZWx/GHKxx79JZsiZ8j1du0VUJtu4eJjgFvU/iKL5lRXFXksVmI+5DA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/shared": "3.5.29"
@@ -4657,7 +4647,6 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.29.tgz",
             "integrity": "sha512-8DpW2QfdwIWOLqtsNcds4s+QgwSaHSJY/SUe04LptianUQ/0xi6KVsu/pYVh+HO3NTVvVJjIPL2t6GdeKbS4Lg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/reactivity": "3.5.29",
@@ -4668,7 +4657,6 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.29.tgz",
             "integrity": "sha512-AHvvJEtcY9tw/uk+s/YRLSlxxQnqnAkjqvK25ZiM4CllCZWzElRAoQnCM42m9AHRLNJ6oe2kC5DCgD4AUdlvXg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/reactivity": "3.5.29",
@@ -4681,7 +4669,6 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.29.tgz",
             "integrity": "sha512-G/1k6WK5MusLlbxSE2YTcqAAezS+VuwHhOvLx2KnQU7G2zCH6KIb+5Wyt6UjMq7a3qPzNEjJXs1hvAxDclQH+g==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/compiler-ssr": "3.5.29",
@@ -4695,7 +4682,6 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.29.tgz",
             "integrity": "sha512-w7SR0A5zyRByL9XUkCfdLs7t9XOHUyJ67qPGQjOou3p6GvBeBW+AVjUUmlxtZ4PIYaRvE+1LmK44O4uajlZwcg==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/@vue/test-utils": {
@@ -5723,6 +5709,12 @@
                 "url": "https://polar.sh/cva"
             }
         },
+        "node_modules/classnames": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+            "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+            "license": "MIT"
+        },
         "node_modules/cli-cursor": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
@@ -6099,7 +6091,6 @@
             "version": "3.2.3",
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
             "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/data-urls": {
@@ -6161,6 +6152,12 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/debounce": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+            "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
+            "license": "MIT"
+        },
         "node_modules/debug": {
             "version": "4.4.3",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -6485,6 +6482,12 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/easy-bem": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz",
+            "integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==",
+            "license": "MIT"
+        },
         "node_modules/echarts": {
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
@@ -6938,7 +6941,6 @@
             "version": "7.0.1",
             "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
             "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
-            "dev": true,
             "license": "BSD-2-Clause",
             "engines": {
                 "node": ">=0.12"
@@ -7353,7 +7355,6 @@
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
             "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/esutils": {
@@ -9528,7 +9529,6 @@
             "version": "3.3.11",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
             "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
-            "dev": true,
             "funding": [
                 {
                     "type": "github",
@@ -10067,7 +10067,6 @@
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
             "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-            "dev": true,
             "license": "ISC"
         },
         "node_modules/picomatch": {
@@ -10124,7 +10123,6 @@
             "version": "8.5.6",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
             "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
-            "dev": true,
             "funding": [
                 {
                     "type": "opencollective",
@@ -11316,7 +11314,6 @@
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
             "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-            "dev": true,
             "license": "BSD-3-Clause",
             "engines": {
                 "node": ">=0.10.0"
@@ -11985,7 +11982,7 @@
             "version": "5.9.3",
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
             "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-            "dev": true,
+            "devOptional": true,
             "license": "Apache-2.0",
             "peer": true,
             "bin": {
@@ -12447,7 +12444,6 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.29.tgz",
             "integrity": "sha512-BZqN4Ze6mDQVNAni0IHeMJ5mwr8VAJ3MQC9FmprRhcBYENw+wOAAjRj8jfmN6FLl0j96OXbR+CjWhmAmM+QGnA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/compiler-dom": "3.5.29",
@@ -12465,6 +12461,24 @@
                 }
             }
         },
+        "node_modules/vue-advanced-cropper": {
+            "version": "2.8.9",
+            "resolved": "https://registry.npmjs.org/vue-advanced-cropper/-/vue-advanced-cropper-2.8.9.tgz",
+            "integrity": "sha512-1jc5gO674kVGpJKekoaol6ZlwaF5VYDLSBwBOUpViW0IOrrRsyLw6XNszjEqgbavvqinlKNS6Kqlom3B5M72Tw==",
+            "license": "MIT",
+            "dependencies": {
+                "classnames": "^2.2.6",
+                "debounce": "^1.2.0",
+                "easy-bem": "^1.0.2"
+            },
+            "engines": {
+                "node": ">=8",
+                "npm": ">=5"
+            },
+            "peerDependencies": {
+                "vue": "^3.0.0"
+            }
+        },
         "node_modules/vue-component-type-helpers": {
             "version": "1.6.5",
             "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-1.6.5.tgz",
diff --git a/package.json b/package.json
index 341e2204..434ad7cc 100644
--- a/package.json
+++ b/package.json
@@ -187,7 +187,8 @@
     },
     "dependencies": {
         "hazardous": "^0.3.0",
-        "node-api-dotnet": "^0.9.19"
+        "node-api-dotnet": "^0.9.19",
+        "vue-advanced-cropper": "^2.8.9"
     },
     "engines": {
         "node": ">=24.10.0",
diff --git a/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue b/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue
index 401f471b..8ff11648 100644
--- a/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue
+++ b/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue
@@ -18,8 +18,6 @@
                     accept="image/*"
                     style="display: none"
                     @change="onFileChangeAvatarImage" />
-                <span>{{ t('dialog.change_content_image.description') }}</span>
-                <br />
                 <Button
                     variant="outline"
                     size="sm"
@@ -28,19 +26,46 @@
                     <Upload />
                     {{ t('dialog.change_content_image.upload') }}
                 </Button>
-                <br />
-                <div class="inline-block p-1 pb-0 hover:rounded-sm">
+                <div class="text-xs text-muted-foreground mb-4 mt-1 flex items-center gap-1">
+                    <Info /> {{ t('dialog.change_content_image.description') }}
+                </div>
+
+                <div v-if="cropperImageSrc" class="mt-4">
+                    <Cropper
+                        ref="cropperRef"
+                        class="h-100 max-h-full"
+                        :src="cropperImageSrc"
+                        :stencil-props="{ aspectRatio: 4 / 3 }"
+                        image-restriction="stencil" />
+                </div>
+
+                <div v-else class="flex justify-center items-center">
                     <img :src="previousImageUrl" class="img-size" loading="lazy" />
                 </div>
             </div>
+            <DialogFooter>
+                <template v-if="cropperImageSrc">
+                    <Button
+                        variant="secondary"
+                        size="sm"
+                        :disabled="changeAvatarImageDialogLoading"
+                        @click="cancelCrop">
+                        {{ t('dialog.change_content_image.cancel') }}
+                    </Button>
+                    <Button size="sm" :disabled="changeAvatarImageDialogLoading" @click="onConfirmCrop">
+                        {{ t('dialog.change_content_image.confirm') }}
+                    </Button>
+                </template>
+            </DialogFooter>
         </DialogContent>
     </Dialog>
 </template>
 
 <script setup>
-    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { Info, Upload } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
-    import { Upload } from 'lucide-vue-next';
+    import { Cropper } from 'vue-advanced-cropper';
     import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
@@ -53,6 +78,8 @@
     import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
     import { useAvatarStore } from '../../../stores';
 
+    import 'vue-advanced-cropper/dist/style.css';
+
     const { t } = useI18n();
 
     const { avatarDialog } = storeToRefs(useAvatarStore());
@@ -69,7 +96,14 @@
         }
     });
 
+    const MAX_PREVIEW_SIZE = 800;
+
     const changeAvatarImageDialogLoading = ref(false);
+    const cropperRef = ref(null);
+    const cropperImageSrc = ref('');
+    const selectedFile = ref(null);
+    const originalImage = ref(null);
+    const previewScale = ref(1);
     const avatarImage = ref({
         base64File: '',
         fileMd5: '',
@@ -81,7 +115,15 @@
 
     const emit = defineEmits(['update:changeAvatarImageDialogVisible', 'update:previousImageUrl']);
 
+    function resetCropState() {
+        cropperImageSrc.value = '';
+        selectedFile.value = null;
+        originalImage.value = null;
+        previewScale.value = 1;
+    }
+
     function closeDialog() {
+        resetCropState();
         emit('update:changeAvatarImageDialogVisible', false);
     }
 
@@ -104,46 +146,109 @@
             return;
         }
 
+        selectedFile.value = file;
         const r = new FileReader();
-        const finalize = () => {
-            changeAvatarImageDialogLoading.value = false;
-            clearInput();
-        };
-        r.onerror = finalize;
-        r.onabort = finalize;
-        r.onload = async function () {
-            const uploadPromise = (async () => {
-                const base64File = await resizeImageToFitLimits(btoa(r.result.toString()));
-                // 10MB
-                if (LINUX) {
-                    // use new website upload process on Linux, we're missing the needed libraries for Unity method
-                    // website method clears avatar name and is missing world image uploading
-                    await initiateUpload(base64File);
-                    return;
+        r.onload = () => {
+            const img = new Image();
+            img.onload = () => {
+                originalImage.value = img;
+                if (img.width > MAX_PREVIEW_SIZE || img.height > MAX_PREVIEW_SIZE) {
+                    const scale = Math.min(MAX_PREVIEW_SIZE / img.width, MAX_PREVIEW_SIZE / img.height);
+                    previewScale.value = scale;
+                    const cvs = document.createElement('canvas');
+                    cvs.width = Math.round(img.width * scale);
+                    cvs.height = Math.round(img.height * scale);
+                    const ctx = cvs.getContext('2d');
+                    ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
+                    cropperImageSrc.value = cvs.toDataURL('image/jpeg', 0.9);
+                } else {
+                    previewScale.value = 1;
+                    cropperImageSrc.value = r.result;
                 }
-                await initiateUploadLegacy(base64File, file);
-            })();
-            toast.promise(uploadPromise, {
-                loading: t('message.upload.loading'),
-                success: t('message.upload.success'),
-                error: t('message.upload.error')
-            });
+            };
+            img.onerror = () => {
+                resetCropState();
+            };
+            img.src = r.result;
+        };
+        r.onerror = () => {
+            resetCropState();
+            toast.error(t('message.file.not_image'));
+        };
+        r.readAsDataURL(file);
+        clearInput();
+    }
+
+    function cancelCrop() {
+        resetCropState();
+    }
+
+    function onConfirmCrop() {
+        const { coordinates } = cropperRef.value.getResult();
+        if (!coordinates || !originalImage.value) {
+            return;
+        }
+
+        // Scale coordinates back
+        const scale = previewScale.value;
+        const srcX = Math.round(coordinates.left / scale);
+        const srcY = Math.round(coordinates.top / scale);
+        const srcW = Math.round(coordinates.width / scale);
+        const srcH = Math.round(coordinates.height / scale);
+
+        const cropCanvas = document.createElement('canvas');
+        cropCanvas.width = srcW;
+        cropCanvas.height = srcH;
+        const ctx = cropCanvas.getContext('2d');
+        ctx.drawImage(originalImage.value, srcX, srcY, srcW, srcH, 0, 0, srcW, srcH);
+
+        cropCanvas.toBlob((blob) => {
+            const r = new FileReader();
+            const finalize = () => {
+                changeAvatarImageDialogLoading.value = false;
+                resetCropState();
+            };
+            r.onerror = finalize;
+            r.onabort = finalize;
+            r.onload = async function () {
+                const uploadPromise = (async () => {
+                    const bytes = new Uint8Array(r.result);
+                    let binary = '';
+                    for (let i = 0; i < bytes.length; i++) {
+                        binary += String.fromCharCode(bytes[i]);
+                    }
+                    const base64File = await resizeImageToFitLimits(btoa(binary));
+                    // 10MB
+                    if (LINUX) {
+                        // use new website upload process on Linux, we're missing the needed libraries for Unity method
+                        // website method clears avatar name and is missing world image uploading
+                        await initiateUpload(base64File);
+                        return;
+                    }
+                    await initiateUploadLegacy(base64File, blob);
+                })();
+                toast.promise(uploadPromise, {
+                    loading: t('message.upload.loading'),
+                    success: t('message.upload.success'),
+                    error: t('message.upload.error')
+                });
+                try {
+                    await uploadPromise;
+                } catch (error) {
+                    console.error('avatar image upload process failed:', error);
+                } finally {
+                    finalize();
+                }
+            };
+
+            changeAvatarImageDialogLoading.value = true;
             try {
-                await uploadPromise;
+                r.readAsArrayBuffer(blob);
             } catch (error) {
-                console.error('avatar image upload process failed:', error);
-            } finally {
+                console.error('Failed to read cropped image', error);
                 finalize();
             }
-        };
-
-        changeAvatarImageDialogLoading.value = true;
-        try {
-            r.readAsBinaryString(file);
-        } catch (error) {
-            console.error('Failed to read file', error);
-            finalize();
-        }
+        }, 'image/png');
     }
 
     async function initiateUploadLegacy(base64File, file) {
diff --git a/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue b/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue
index d7e30e93..d2f38395 100644
--- a/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue
+++ b/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue
@@ -18,25 +18,46 @@
                     accept="image/*"
                     style="display: none"
                     @change="onFileChangeWorldImage" />
-                <span>{{ t('dialog.change_content_image.description') }}</span>
-                <br />
                 <Button variant="outline" size="sm" :disabled="changeWorldImageDialogLoading" @click="uploadWorldImage">
                     <Upload />
                     {{ t('dialog.change_content_image.upload') }}
                 </Button>
-                <br />
-                <div class="inline-block p-1 pb-0 hover:rounded-sm">
+                <div class="text-xs text-muted-foreground mb-4 mt-1 flex items-center gap-1">
+                    <Info /> {{ t('dialog.change_content_image.description') }}
+                </div>
+
+                <div v-if="cropperImageSrc" class="mt-4">
+                    <Cropper
+                        ref="cropperRef"
+                        class="h-100 max-h-full"
+                        :src="cropperImageSrc"
+                        :stencil-props="{ aspectRatio: 4 / 3 }"
+                        image-restriction="stencil" />
+                </div>
+
+                <div v-else class="flex justify-center items-center">
                     <img :src="previousImageUrl" class="img-size" loading="lazy" />
                 </div>
             </div>
+            <DialogFooter>
+                <template v-if="cropperImageSrc">
+                    <Button variant="secondary" size="sm" :disabled="changeWorldImageDialogLoading" @click="cancelCrop">
+                        {{ t('dialog.change_content_image.cancel') }}
+                    </Button>
+                    <Button size="sm" :disabled="changeWorldImageDialogLoading" @click="onConfirmCrop">
+                        {{ t('dialog.change_content_image.confirm') }}
+                    </Button>
+                </template>
+            </DialogFooter>
         </DialogContent>
     </Dialog>
 </template>
 
 <script setup>
-    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { Info, Upload } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
-    import { Upload } from 'lucide-vue-next';
+    import { Cropper } from 'vue-advanced-cropper';
     import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
@@ -49,6 +70,8 @@
     import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
     import { useWorldStore } from '../../../stores';
 
+    import 'vue-advanced-cropper/dist/style.css';
+
     const { t } = useI18n();
 
     const { worldDialog } = storeToRefs(useWorldStore());
@@ -65,7 +88,14 @@
         }
     });
 
+    const MAX_PREVIEW_SIZE = 800;
+
     const changeWorldImageDialogLoading = ref(false);
+    const cropperRef = ref(null);
+    const cropperImageSrc = ref('');
+    const selectedFile = ref(null);
+    const originalImage = ref(null);
+    const previewScale = ref(1);
     const worldImage = ref({
         base64File: '',
         fileMd5: '',
@@ -77,7 +107,15 @@
 
     const emit = defineEmits(['update:changeWorldImageDialogVisible', 'update:previousImageUrl']);
 
+    function resetCropState() {
+        cropperImageSrc.value = '';
+        selectedFile.value = null;
+        originalImage.value = null;
+        previewScale.value = 1;
+    }
+
     function closeDialog() {
+        resetCropState();
         emit('update:changeWorldImageDialogVisible', false);
     }
 
@@ -100,41 +138,104 @@
             return;
         }
 
+        selectedFile.value = file;
         const r = new FileReader();
-        const finalize = () => {
-            changeWorldImageDialogLoading.value = false;
-            clearInput();
+        r.onload = () => {
+            const img = new Image();
+            img.onload = () => {
+                originalImage.value = img;
+                if (img.width > MAX_PREVIEW_SIZE || img.height > MAX_PREVIEW_SIZE) {
+                    const scale = Math.min(MAX_PREVIEW_SIZE / img.width, MAX_PREVIEW_SIZE / img.height);
+                    previewScale.value = scale;
+                    const cvs = document.createElement('canvas');
+                    cvs.width = Math.round(img.width * scale);
+                    cvs.height = Math.round(img.height * scale);
+                    const ctx = cvs.getContext('2d');
+                    ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
+                    cropperImageSrc.value = cvs.toDataURL('image/jpeg', 0.9);
+                } else {
+                    previewScale.value = 1;
+                    cropperImageSrc.value = r.result;
+                }
+            };
+            img.onerror = () => {
+                resetCropState();
+            };
+            img.src = r.result;
         };
-        r.onerror = finalize;
-        r.onabort = finalize;
-        r.onload = async function () {
-            const uploadPromise = (async () => {
-                const base64File = await resizeImageToFitLimits(btoa(r.result.toString()));
-                // 10MB
-                await initiateUploadLegacy(base64File, file);
-                // await initiateUpload(base64File);
-            })();
-            toast.promise(uploadPromise, {
-                loading: t('message.upload.loading'),
-                success: t('message.upload.success'),
-                error: t('message.upload.error')
-            });
+        r.onerror = () => {
+            resetCropState();
+            toast.error(t('message.file.not_image'));
+        };
+        r.readAsDataURL(file);
+        clearInput();
+    }
+
+    function cancelCrop() {
+        resetCropState();
+    }
+
+    function onConfirmCrop() {
+        const { coordinates } = cropperRef.value.getResult();
+        if (!coordinates || !originalImage.value) {
+            return;
+        }
+
+        // scale back
+        const scale = previewScale.value;
+        const srcX = Math.round(coordinates.left / scale);
+        const srcY = Math.round(coordinates.top / scale);
+        const srcW = Math.round(coordinates.width / scale);
+        const srcH = Math.round(coordinates.height / scale);
+
+        const cropCanvas = document.createElement('canvas');
+        cropCanvas.width = srcW;
+        cropCanvas.height = srcH;
+        const ctx = cropCanvas.getContext('2d');
+        ctx.drawImage(originalImage.value, srcX, srcY, srcW, srcH, 0, 0, srcW, srcH);
+
+        cropCanvas.toBlob((blob) => {
+            const r = new FileReader();
+            const finalize = () => {
+                changeWorldImageDialogLoading.value = false;
+                resetCropState();
+            };
+            r.onerror = finalize;
+            r.onabort = finalize;
+            r.onload = async function () {
+                const uploadPromise = (async () => {
+                    const bytes = new Uint8Array(r.result);
+                    let binary = '';
+                    for (let i = 0; i < bytes.length; i++) {
+                        binary += String.fromCharCode(bytes[i]);
+                    }
+                    const base64File = await resizeImageToFitLimits(btoa(binary));
+                    // 10MB
+                    await initiateUploadLegacy(base64File, blob);
+                    // await initiateUpload(base64File);
+                })();
+                toast.promise(uploadPromise, {
+                    loading: t('message.upload.loading'),
+                    success: t('message.upload.success'),
+                    error: t('message.upload.error')
+                });
+                try {
+                    await uploadPromise;
+                } catch (error) {
+                    console.error('World image upload process failed:', error);
+                } finally {
+                    finalize();
+                }
+            };
+
+            changeWorldImageDialogLoading.value = true;
             try {
-                await uploadPromise;
+                r.readAsArrayBuffer(blob);
             } catch (error) {
-                console.error('World image upload process failed:', error);
-            } finally {
+                console.error('Failed to read cropped image', error);
                 finalize();
             }
-        };
-
-        changeWorldImageDialogLoading.value = true;
-        try {
-            r.readAsBinaryString(file);
-        } catch (error) {
-            console.error('Failed to read file', error);
-            finalize();
-        }
+        }, 'image/png');
     }
 
     async function initiateUploadLegacy(base64File, file) {
diff --git a/src/localization/en.json b/src/localization/en.json
index 28694048..693c7e51 100644
--- a/src/localization/en.json
+++ b/src/localization/en.json
@@ -1707,7 +1707,9 @@
             "avatar": "Change Avatar Image",
             "world": "Change World Image",
             "description": "Recommended image size: 1200x900px (4:3)",
-            "upload": "Upload Image"
+            "upload": "Upload Image",
+            "confirm": "Confirm Crop",
+            "cancel": "Cancel"
         },
         "screenshot_metadata": {
             "header": "Screenshot Metadata",
diff --git a/src/shared/utils/imageUpload.js b/src/shared/utils/imageUpload.js
index 3caeb904..55ae038b 100644
--- a/src/shared/utils/imageUpload.js
+++ b/src/shared/utils/imageUpload.js
@@ -22,7 +22,8 @@ function getInputElement(selector) {
 export function handleImageUploadInput(event, options = {}) {
     const {
         inputSelector,
-        maxSize = 100000000,
+        // 20MB
+        maxSize = 20000000,
         acceptPattern = /image.*/,
         tooLargeMessage,
         invalidTypeMessage,