diff --git a/app/(website)/settings/components/UploadImageForm.tsx b/app/(website)/settings/components/UploadImageForm.tsx
index 7c7ed53..298e21a 100644
--- a/app/(website)/settings/components/UploadImageForm.tsx
+++ b/app/(website)/settings/components/UploadImageForm.tsx
@@ -18,11 +18,18 @@ type UploadImageFormProps = {
 export default function UploadImageForm({ type }: UploadImageFormProps) {
   const t = useT("pages.settings.components.uploadImage");
   const [file, setFile] = useState<File | null>(null);
+  const [hasChanged, setHasChanged] = useState(false);
   const [isFileUploading, setIsFileUploading] = useState(false);
 
   const { self } = useSelf();
-
   const { trigger: triggerUserUpload } = useUserUpload();
+  const { toast } = useToast();
+
+  const handleFileChange = (f: File | null) => {
+    setFile(f);
+    if (f)
+      setHasChanged(true);
+  };
 
   const localizedType = t(`types.${type}`);
 
@@ -33,13 +40,20 @@ export default function UploadImageForm({ type }: UploadImageFormProps) {
     const urlToFetch = type === "avatar" ? self.avatar_url : self.banner_url;
 
     fetch(urlToFetch).then(async (res) => {
-      const file = await res.blob();
-      setFile(new File([file], "file.png"));
+      const blob = await res.blob();
+      const ext
+        = blob.type === "image/gif"
+          ? "gif"
+          : blob.type === "image/png"
+            ? "png"
+            : blob.type === "image/webp"
+              ? "webp"
+              : "jpg";
+
+      setFile(new File([blob], `file.${ext}`, { type: blob.type }));
     });
   }, [file, self, type]);
 
-  const { toast } = useToast();
-
   const uploadFile = async () => {
     if (file === null)
       return;
@@ -52,15 +66,16 @@ export default function UploadImageForm({ type }: UploadImageFormProps) {
         type,
       },
       {
-        onSuccess(_data, _key, _config) {
+        onSuccess() {
           toast({
             title: t("toast.success", { type: localizedType }),
             variant: "success",
             className: "capitalize",
           });
           setIsFileUploading(false);
+          setHasChanged(false);
         },
-        onError(err, _key, _config) {
+        onError(err) {
           toast({
             title: err?.message ?? t("toast.error"),
             variant: "destructive",
@@ -74,16 +89,18 @@ export default function UploadImageForm({ type }: UploadImageFormProps) {
   return (
     <>
       <ImageSelect
-        setFile={setFile}
+        setFile={handleFileChange}
         file={file}
         isWide={type === "banner"}
         maxFileSizeBytes={5 * 1024 * 1024}
+        enableCrop
+        type={type}
       />
       <Button
         isLoading={isFileUploading}
         onClick={uploadFile}
-        className="mt-2 w-40 text-sm"
-        variant="secondary"
+        className={`mt-2 w-40 text-sm${hasChanged ? " text-black" : ""}`}
+        variant={hasChanged ? "default" : "secondary"}
       >
         <CloudUpload />
         {t("button", { type: localizedType })}
diff --git a/components/General/ImageCropDialog.tsx b/components/General/ImageCropDialog.tsx
new file mode 100644
index 0000000..05e7348
--- /dev/null
+++ b/components/General/ImageCropDialog.tsx
@@ -0,0 +1,279 @@
+"use client";
+
+import { Grid, Image as ImageIcon, RotateCcw } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { Area } from "react-easy-crop";
+import Cropper from "react-easy-crop";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useT } from "@/lib/i18n/utils";
+import { cn } from "@/lib/utils";
+
+type ImageCropDialogProps = {
+  file: File | null;
+  type: "avatar" | "banner";
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCropped: (file: File) => void;
+};
+
+function readFileAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener("load", () => {
+      if (typeof reader.result === "string") {
+        resolve(reader.result);
+      }
+      else {
+        reject(new Error("Failed to read file"));
+      }
+    });
+    reader.addEventListener("error", () => {
+      reject(reader.error ?? new Error("Failed to read file"));
+    });
+    reader.readAsDataURL(file);
+  });
+}
+
+async function loadImage(src: string): Promise<HTMLImageElement> {
+  return await new Promise((resolve, reject) => {
+    const img = new window.Image();
+    img.addEventListener("load", () => resolve(img));
+    img.addEventListener("error", () => reject(new Error("Failed to load image")));
+    img.src = src;
+  });
+}
+
+async function getCroppedImage(
+  imageSrc: string,
+  cropAreaPixels: Area,
+  type: "avatar" | "banner",
+): Promise<Blob> {
+  const image = await loadImage(imageSrc);
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+
+  if (!ctx) {
+    throw new Error("Failed to get canvas context");
+  }
+
+  const targetWidth = type === "avatar" ? 512 : 2048;
+  const targetHeight = type === "avatar" ? 512 : 512;
+
+  canvas.width = targetWidth;
+  canvas.height = targetHeight;
+
+  ctx.imageSmoothingQuality = "high";
+
+  ctx.drawImage(
+    image,
+    cropAreaPixels.x,
+    cropAreaPixels.y,
+    cropAreaPixels.width,
+    cropAreaPixels.height,
+    0,
+    0,
+    targetWidth,
+    targetHeight,
+  );
+
+  return await new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (blob) {
+        resolve(blob);
+      }
+      else {
+        reject(new Error("Failed to create blob from canvas"));
+      }
+    }, "image/png");
+  });
+}
+
+const MIN_ZOOM = 1;
+const MAX_ZOOM = 3;
+
+export default function ImageCropDialog({
+  file,
+  type,
+  open,
+  onOpenChange,
+  onCropped,
+}: ImageCropDialogProps) {
+  const t = useT("components.imageCropDialog");
+
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+  const [crop, setCrop] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(MIN_ZOOM);
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const [showGrid, setShowGrid] = useState(false);
+
+  const aspect = useMemo(() => (type === "avatar" ? 1 / 1 : 4 / 1), [type]);
+
+  useEffect(() => {
+    if (!file || !open)
+      return;
+
+    let active = true;
+    readFileAsDataUrl(file)
+      .then((dataUrl) => {
+        if (active)
+          setImageSrc(dataUrl);
+      })
+      .catch(() => {
+        if (active)
+          setImageSrc(null);
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [file, open]);
+
+  const onCropComplete = useCallback((_croppedArea: Area, croppedAreaPixelsParam: Area) => {
+    setCroppedAreaPixels(croppedAreaPixelsParam);
+  }, []);
+
+  const handleClose = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) {
+        setImageSrc(null);
+        setCrop({ x: 0, y: 0 });
+        setZoom(MIN_ZOOM);
+        setCroppedAreaPixels(null);
+        setIsSaving(false);
+        setShowGrid(false);
+      }
+      onOpenChange(nextOpen);
+    },
+    [onOpenChange],
+  );
+
+  const handleSave = useCallback(async () => {
+    if (!imageSrc || !croppedAreaPixels || !file)
+      return;
+
+    try {
+      setIsSaving(true);
+      const blob = await getCroppedImage(imageSrc, croppedAreaPixels, type);
+      const croppedFile = new File([blob], file.name, { type: "image/png" });
+      onCropped(croppedFile);
+      handleClose(false);
+    }
+    catch (error) {
+      console.error("Failed to crop image", error);
+      setIsSaving(false);
+    }
+  }, [croppedAreaPixels, file, handleClose, imageSrc, onCropped, type]);
+
+  const handleReset = useCallback(() => {
+    setZoom(MIN_ZOOM);
+    setCrop({ x: 0, y: 0 });
+  }, []);
+
+  if (!file)
+    return null;
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{type === "avatar" ? t("titleAvatar") : t("titleBanner")}</DialogTitle>
+          <DialogDescription>
+            {type === "avatar" ? t("descriptionAvatar") : t("descriptionBanner")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="relative h-72 w-full overflow-hidden rounded-lg bg-black/60">
+            {imageSrc && (
+              <Cropper
+                image={imageSrc}
+                crop={crop}
+                zoom={zoom}
+                aspect={aspect}
+                cropShape={type === "avatar" ? "round" : "rect"}
+                showGrid={showGrid}
+                restrictPosition
+                onCropChange={setCrop}
+                onZoomChange={setZoom}
+                onCropComplete={onCropComplete}
+                minZoom={MIN_ZOOM}
+                maxZoom={MAX_ZOOM}
+              />
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-center gap-2">
+              <ImageIcon className="size-4 text-muted-foreground" />
+              <input
+                type="range"
+                min={MIN_ZOOM}
+                max={MAX_ZOOM}
+                step={0.01}
+                value={zoom}
+                onChange={e => setZoom(Number(e.target.value))}
+                className={cn(
+                  "h-2 w-1/2 cursor-pointer appearance-none rounded-full bg-muted focus:outline-none",
+                  "[&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:shadow-sm",
+                  "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-primary [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:shadow-sm",
+                )}
+              />
+              <ImageIcon className="size-6 text-muted-foreground" />
+            </div>
+
+            <div className="flex items-center justify-center gap-2 pt-1">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="gap-1 px-2 text-muted-foreground"
+                onClick={() => setShowGrid(prev => !prev)}
+              >
+                {showGrid ? t("hideGrid") : t("showGrid")}
+                <Grid className="size-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="gap-1 px-2 text-muted-foreground"
+                onClick={handleReset}
+              >
+                <RotateCcw className="size-4" />
+                {t("reset")}
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className="mt-4">
+          <Button
+            variant="outline"
+            type="button"
+            onClick={() => handleClose(false)}
+            disabled={isSaving}
+          >
+            {t("cancel")}
+          </Button>
+          <Button
+            type="button"
+            className="text-black"
+            onClick={handleSave}
+            isLoading={isSaving}
+            disabled={!imageSrc || !croppedAreaPixels}
+          >
+            {t("save")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/General/ImageSelect.tsx b/components/General/ImageSelect.tsx
index 2080f7b..4926d09 100644
--- a/components/General/ImageSelect.tsx
+++ b/components/General/ImageSelect.tsx
@@ -1,15 +1,18 @@
-import Image from "next/image";
+import { useEffect, useId, useState } from "react";
 
+import ImageCropDialog from "@/components/General/ImageCropDialog";
 import Spinner from "@/components/Spinner";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { useToast } from "@/hooks/use-toast";
 import { useT } from "@/lib/i18n/utils";
 
 type Props = {
-  setFile: React.Dispatch<React.SetStateAction<File | null>>;
+  setFile: (file: File | null) => void;
   file: File | null;
   isWide?: boolean;
   maxFileSizeBytes?: number;
+  enableCrop?: boolean;
+  type?: "avatar" | "banner";
 };
 
 export default function ImageSelect({
@@ -17,66 +20,121 @@ export default function ImageSelect({
   file,
   isWide,
   maxFileSizeBytes,
+  enableCrop,
+  type,
 }: Props) {
   const t = useT("components.imageSelect");
-  const uniqueId = Math.random().toString(36).slice(7);
+  const inputId = useId();
 
   const { toast } = useToast();
 
+  const [rawFileForCrop, setRawFileForCrop] = useState<File | null>(null);
+  const [isCropOpen, setIsCropOpen] = useState(false);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!file) {
+      setPreviewUrl(null);
+      return;
+    }
+
+    const url = URL.createObjectURL(file);
+    setPreviewUrl(url);
+
+    return () => URL.revokeObjectURL(url);
+  }, [file]);
+
+  const handleFileSelected = (nextFile: File) => {
+    const isGif = nextFile.type === "image/gif";
+    const shouldCrop = Boolean(enableCrop && type && !isGif);
+
+    if (shouldCrop) {
+      setRawFileForCrop(nextFile);
+      setIsCropOpen(true);
+      return;
+    }
+
+    setFile(nextFile);
+  };
+
+  const handleCropped = (croppedFile: File) => {
+    setFile(croppedFile);
+    setRawFileForCrop(null);
+  };
+
   return (
-    <div className="flex w-full items-center justify-center">
-      <label htmlFor={uniqueId} className="w-full cursor-pointer">
-        <div
-          className={`flex flex-col items-center justify-center ${
-            isWide
-              ? "w-72 max-w-full flex-shrink md:w-96"
-              : "w-40 max-w-full flex-shrink"
-          }`}
-        >
-          <div className="flex w-full items-center justify-center rounded-lg bg-transparent">
-            <input
-              type="file"
-              id={uniqueId}
-              accept=".png, .jpg, .jpeg, .gif"
-              className="hidden"
-              onChange={(e) => {
-                const file = e.target.files?.[0];
-                if (!file)
-                  return;
-                if (maxFileSizeBytes && file.size > maxFileSizeBytes) {
-                  toast({
-                    title: t("imageTooBig"),
-                    variant: "destructive",
-                  });
-                  return;
-                }
-                if (e.target.files)
-                  setFile(file);
-              }}
-            />
-
-            {file ? (
-              <div className="w-full flex-shrink">
-                <AspectRatio ratio={isWide ? 4 / 1 : 1 / 1} className="w-full">
-                  <div className="relative size-full">
-                    <Image
-                      src={URL.createObjectURL(file)}
-                      alt="avatar"
-                      fill
-                      style={{ objectFit: "cover" }}
-                      className="smooth-transition rounded-lg hover:opacity-80"
-                    />
-                  </div>
-                </AspectRatio>
-              </div>
-            ) : (
-              <div className="mx-auto px-12">
-                <Spinner size="lg" />
-              </div>
-            )}
+    <>
+      <div className="flex w-full items-center justify-center">
+        <label htmlFor={inputId} className="w-full cursor-pointer">
+          <div
+            className={`flex flex-col items-center justify-center ${
+              isWide
+                ? "w-72 max-w-full flex-shrink md:w-96"
+                : "w-40 max-w-full flex-shrink"
+            }`}
+          >
+            <div className="flex w-full items-center justify-center rounded-lg bg-transparent">
+              <input
+                type="file"
+                id={inputId}
+                accept="image/png,image/jpeg,image/gif"
+                className="hidden"
+                onChange={(e) => {
+                  const nextFile = e.target.files?.[0];
+                  e.currentTarget.value = "";
+
+                  if (!nextFile)
+                    return;
+
+                  if (maxFileSizeBytes && nextFile.size > maxFileSizeBytes) {
+                    toast({
+                      title: t("imageTooBig"),
+                      variant: "destructive",
+                    });
+                    return;
+                  }
+
+                  handleFileSelected(nextFile);
+                }}
+              />
+
+              {file ? (
+                <div className="w-full flex-shrink">
+                  <AspectRatio ratio={isWide ? 4 / 1 : 1 / 1} className="w-full">
+                    <div className="relative size-full overflow-hidden rounded-lg">
+                      {previewUrl ? (
+                        <img
+                          src={previewUrl}
+                          alt="upload preview"
+                          className="smooth-transition size-full object-cover hover:opacity-80"
+                        />
+                      ) : (
+                        <div className="flex size-full items-center justify-center">
+                          <Spinner size="lg" />
+                        </div>
+                      )}
+                    </div>
+                  </AspectRatio>
+                </div>
+              ) : (
+                <div className="mx-auto px-12">
+                  <Spinner size="lg" />
+                </div>
+              )}
+            </div>
           </div>
-        </div>
-      </label>
-    </div>
+        </label>
+      </div>
+
+      {enableCrop && type && rawFileForCrop && (
+        <ImageCropDialog
+          file={rawFileForCrop}
+          type={type}
+          open={isCropOpen}
+          onOpenChange={setIsCropOpen}
+          onCropped={handleCropped}
+        />
+      )}
+    </>
   );
 }
diff --git a/lib/i18n/messages/de.json b/lib/i18n/messages/de.json
index f7caefc..2eb866c 100644
--- a/lib/i18n/messages/de.json
+++ b/lib/i18n/messages/de.json
@@ -139,6 +139,18 @@
     "imageSelect": {
       "imageTooBig": "Das ausgewählte Bild ist zu groß!"
     },
+    "imageCropDialog": {
+      "titleAvatar": "Avatar anpassen",
+      "descriptionAvatar": "Ziehe und zoome, um auszuwählen, wie dein Avatar angezeigt wird.",
+      "titleBanner": "Banner anpassen",
+      "descriptionBanner": "Ziehe und zoome, um auszuwählen, wie dein Banner angezeigt wird.",
+      "zoom": "Zoom",
+      "cancel": "Abbrechen",
+      "save": "Speichern",
+      "showGrid": "Raster anzeigen",
+      "hideGrid": "Raster ausblenden",
+      "reset": "Zurücksetzen"
+    },
     "notFound": {
       "meta": {
         "title": "Seite fehlt | {appName}",
diff --git a/lib/i18n/messages/en-GB.json b/lib/i18n/messages/en-GB.json
index ff683ee..bdb4d93 100644
--- a/lib/i18n/messages/en-GB.json
+++ b/lib/i18n/messages/en-GB.json
@@ -139,6 +139,18 @@
     "imageSelect": {
       "imageTooBig": "sewected image is too big!"
     },
+    "imageCropDialog": {
+      "titleAvatar": "adjust youw avatw",
+      "descriptionAvatar": "dwag and zoom to choose how youw avatw wiww appeaw.",
+      "titleBanner": "adjust youw bannew",
+      "descriptionBanner": "dwag and zoom to choose how youw bannew wiww appeaw.",
+      "zoom": "zoom",
+      "cancel": "cancew",
+      "save": "save",
+      "showGrid": "show gwid",
+      "hideGrid": "hide gwid",
+      "reset": "weset"
+    },
     "notFound": {
       "meta": {
         "title": "not fouwnd | {appName}",
diff --git a/lib/i18n/messages/en.json b/lib/i18n/messages/en.json
index 298f729..bc84cfc 100644
--- a/lib/i18n/messages/en.json
+++ b/lib/i18n/messages/en.json
@@ -412,6 +412,48 @@
         "context": "Error message when selected image exceeds maximum file size"
       }
     },
+    "imageCropDialog": {
+      "titleAvatar": {
+        "text": "Adjust your avatar",
+        "context": "Title for the avatar crop dialog"
+      },
+      "descriptionAvatar": {
+        "text": "Drag and zoom to choose how your avatar will appear.",
+        "context": "Description text for the avatar crop dialog"
+      },
+      "titleBanner": {
+        "text": "Adjust your banner",
+        "context": "Title for the banner crop dialog"
+      },
+      "descriptionBanner": {
+        "text": "Drag and zoom to choose how your banner will appear.",
+        "context": "Description text for the banner crop dialog"
+      },
+      "zoom": {
+        "text": "Zoom",
+        "context": "Label for zoom control in image crop dialog"
+      },
+      "cancel": {
+        "text": "Cancel",
+        "context": "Button label to cancel cropping"
+      },
+      "save": {
+        "text": "Save",
+        "context": "Button label to confirm cropping"
+      },
+      "showGrid": {
+        "text": "Show grid",
+        "context": "Button label to show the grid overlay in image crop dialog"
+      },
+      "hideGrid": {
+        "text": "Hide grid",
+        "context": "Button label to hide the grid overlay in image crop dialog"
+      },
+      "reset": {
+        "text": "Reset",
+        "context": "Button label to reset zoom and position in image crop dialog"
+      }
+    },
     "notFound": {
       "meta": {
         "title": {
diff --git a/lib/i18n/messages/es.json b/lib/i18n/messages/es.json
index 6408b64..50e4212 100644
--- a/lib/i18n/messages/es.json
+++ b/lib/i18n/messages/es.json
@@ -139,6 +139,18 @@
     "imageSelect": {
       "imageTooBig": "¡La imagen seleccionada es demasiado grande!"
     },
+    "imageCropDialog": {
+      "titleAvatar": "Ajusta tu avatar",
+      "descriptionAvatar": "Arrastra y haz zoom para elegir cómo se verá tu avatar.",
+      "titleBanner": "Ajusta tu banner",
+      "descriptionBanner": "Arrastra y haz zoom para elegir cómo se verá tu banner.",
+      "zoom": "Zoom",
+      "cancel": "Cancelar",
+      "save": "Guardar",
+      "showGrid": "Mostrar cuadrícula",
+      "hideGrid": "Ocultar cuadrícula",
+      "reset": "Restablecer"
+    },
     "notFound": {
       "meta": {
         "title": "Página no encontrada | {appName}",
diff --git a/lib/i18n/messages/fr.json b/lib/i18n/messages/fr.json
index f597ab4..2dd69a7 100644
--- a/lib/i18n/messages/fr.json
+++ b/lib/i18n/messages/fr.json
@@ -139,6 +139,18 @@
     "imageSelect": {
       "imageTooBig": "L'image sélectionnée est trop grande !"
     },
+    "imageCropDialog": {
+      "titleAvatar": "Ajuster votre avatar",
+      "descriptionAvatar": "Faites glisser et zoomez pour choisir l'apparence de votre avatar.",
+      "titleBanner": "Ajuster votre bannière",
+      "descriptionBanner": "Faites glisser et zoomez pour choisir l'apparence de votre bannière.",
+      "zoom": "Zoom",
+      "cancel": "Annuler",
+      "save": "Enregistrer",
+      "showGrid": "Afficher la grille",
+      "hideGrid": "Masquer la grille",
+      "reset": "Réinitialiser"
+    },
     "notFound": {
       "meta": {
         "title": "Page manquante | {appName}",
diff --git a/lib/i18n/messages/ja.json b/lib/i18n/messages/ja.json
index c3ab4f9..ee4e1d5 100644
--- a/lib/i18n/messages/ja.json
+++ b/lib/i18n/messages/ja.json
@@ -139,6 +139,18 @@
     "imageSelect": {
       "imageTooBig": "選択した画像が大きすぎます！"
     },
+    "imageCropDialog": {
+      "titleAvatar": "アバターを調整",
+      "descriptionAvatar": "ドラッグとズームで、アバターの見え方を調整します。",
+      "titleBanner": "バナーを調整",
+      "descriptionBanner": "ドラッグとズームで、バナーの見え方を調整します。",
+      "zoom": "ズーム",
+      "cancel": "キャンセル",
+      "save": "保存",
+      "showGrid": "グリッドを表示",
+      "hideGrid": "グリッドを非表示",
+      "reset": "リセット"
+    },
     "notFound": {
       "meta": {
         "title": "ページが見つかりません | {appName}",
diff --git a/lib/i18n/messages/ru.json b/lib/i18n/messages/ru.json
index f04f4b7..3bdc922 100644
--- a/lib/i18n/messages/ru.json
+++ b/lib/i18n/messages/ru.json
@@ -139,6 +139,18 @@
     "imageSelect": {
       "imageTooBig": "Выбранное изображение слишком большое!"
     },
+    "imageCropDialog": {
+      "titleAvatar": "Настройка аватара",
+      "descriptionAvatar": "Перемещайте и увеличивайте изображение, чтобы выбрать, как будет выглядеть ваш аватар.",
+      "titleBanner": "Настройка баннера",
+      "descriptionBanner": "Перемещайте и увеличивайте изображение, чтобы выбрать, как будет выглядеть ваш баннер.",
+      "zoom": "Масштаб",
+      "cancel": "Отмена",
+      "save": "Сохранить",
+      "showGrid": "Показать сетку",
+      "hideGrid": "Скрыть сетку",
+      "reset": "Сбросить"
+    },
     "notFound": {
       "meta": {
         "title": "Страница не найдена | {appName}",
diff --git a/lib/i18n/messages/uk.json b/lib/i18n/messages/uk.json
index 5703834..1476716 100644
--- a/lib/i18n/messages/uk.json
+++ b/lib/i18n/messages/uk.json
@@ -139,6 +139,18 @@
     "imageSelect": {
       "imageTooBig": "Вибране зображення занадто велике!"
     },
+    "imageCropDialog": {
+      "titleAvatar": "Налаштувати аватар",
+      "descriptionAvatar": "Перетягніть та збільшуйте зображення, щоб обрати, як виглядатиме ваш аватар.",
+      "titleBanner": "Налаштувати банер",
+      "descriptionBanner": "Перетягніть та збільшуйте зображення, щоб обрати, як виглядатиме ваш банер.",
+      "zoom": "Масштаб",
+      "cancel": "Скасувати",
+      "save": "Зберегти",
+      "showGrid": "Показати сітку",
+      "hideGrid": "Сховати сітку",
+      "reset": "Скинути"
+    },
     "notFound": {
       "meta": {
         "title": "Не знайдено | {appName}",
diff --git a/lib/i18n/messages/zh-CN.json b/lib/i18n/messages/zh-CN.json
index 540b43d..77cc38a 100644
--- a/lib/i18n/messages/zh-CN.json
+++ b/lib/i18n/messages/zh-CN.json
@@ -139,6 +139,18 @@
     "imageSelect": {
       "imageTooBig": "所选图片太大！"
     },
+    "imageCropDialog": {
+      "titleAvatar": "调整头像",
+      "descriptionAvatar": "拖动并缩放以选择头像的显示效果。",
+      "titleBanner": "调整横幅",
+      "descriptionBanner": "拖动并缩放以选择横幅的显示效果。",
+      "zoom": "缩放",
+      "cancel": "取消",
+      "save": "保存",
+      "showGrid": "显示网格",
+      "hideGrid": "隐藏网格",
+      "reset": "重置"
+    },
     "notFound": {
       "meta": {
         "title": "无法找到网页 | {appName}",
diff --git a/package-lock.json b/package-lock.json
index 8f19579..5ae19d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,6 +47,7 @@
         "next-themes": "^0.4.6",
         "react": "19.1.0",
         "react-dom": "19.1.0",
+        "react-easy-crop": "^5.5.6",
         "react-hook-form": "^7.55.0",
         "recharts": "^2.15.2",
         "sharp": "^0.33.5",
diff --git a/package.json b/package.json
index 17a9b1d..11e78ea 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "next-themes": "^0.4.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-easy-crop": "^5.5.6",
     "react-hook-form": "^7.55.0",
     "recharts": "^2.15.2",
     "sharp": "^0.33.5",