diff --git a/app/views/settings/profile/edit.html.haml b/app/views/settings/profile/edit.html.haml
index 7cd29926..f19a4a32 100644
--- a/app/views/settings/profile/edit.html.haml
+++ b/app/views/settings/profile/edit.html.haml
@@ -2,36 +2,38 @@
   .card-body
     = bootstrap_form_for(current_user, url: settings_profile_picture_path, html: { multipart: true }, method: :patch, data: { turbo: false }) do |f|
 
-      .d-flex#profile-picture-media
-        .flex-shrink-0
-          %img.avatar-lg.me-3{ src: current_user.profile_picture.url(:medium) }
-        .flex-grow-1
-          = f.file_field :profile_picture, accept: APP_CONFIG[:accepted_image_formats].join(",")
+      %div{ data: { controller: "cropper", cropper_aspect_ratio_value: "1"}}
+        .d-flex#profile-picture-media
+          .flex-shrink-0
+            %img.avatar-lg.me-3{ src: current_user.profile_picture.url(:medium) }
+          .flex-grow-1
+            = f.file_field :profile_picture, accept: APP_CONFIG[:accepted_image_formats].join(","), data: { cropper_target: "input", action: "cropper#change" }
 
-      .row.d-none#profile-picture-crop-controls
-        .col-sm-10.col-md-8
-          %strong= t(".adjust.profile_picture")
-          %img#profile-picture-cropper{ src: current_user.profile_picture.url(:medium) }
+        .row.d-none#profile-picture-crop-controls{ data: { cropper_target: "controls" } }
+          .col-sm-10.col-md-8
+            %strong= t(".adjust.profile_picture")
+            %img#profile-picture-cropper{ src: current_user.profile_picture.url(:medium), data: { cropper_target: "cropper" } }
 
-      .row.mb-2#profile-header-media
-        .col-xs-12.col-md-6
-          %img.mw-100.me-3{ src: current_user.profile_header.url(:mobile) }
-        .col-xs-12.col-md-6.mt-3.mt-sm-0.ps-3.pe-3
-          = f.file_field :profile_header, accept: APP_CONFIG[:accepted_image_formats].join(",")
+        - %i[profile_picture_x profile_picture_y profile_picture_w profile_picture_h].each do |attrib|
+          = f.hidden_field attrib, id: attrib, data: { cropper_target: attrib.to_s.split("_").last }
 
-      .row.d-none#profile-header-crop-controls
-        .col-sm-10.col-md-8
-          %strong= t(".adjust.profile_header")
-          %img#profile-header-cropper{ src: current_user.profile_header.url(:web) }
+      %div{ data: { controller: "cropper", cropper_aspect_ratio_value: "0.23"}}
+        .row.mb-2#profile-header-media
+          .col-xs-12.col-md-6
+            %img.mw-100.me-3{ src: current_user.profile_header.url(:mobile) }
+          .col-xs-12.col-md-6.mt-3.mt-sm-0.ps-3.pe-3
+            = f.file_field :profile_header, accept: APP_CONFIG[:accepted_image_formats].join(","), data: { cropper_target: "input", action: "cropper#change" }
+
+        .row.d-none#profile-header-crop-controls{ data: { cropper_target: "controls" } }
+          .col-sm-10.col-md-8
+            %strong= t(".adjust.profile_header")
+            %img#profile-header-cropper{ src: current_user.profile_header.url(:web), data: { cropper_target: "cropper" } }
+
+        - %i[profile_header_x profile_header_y profile_header_w profile_header_h].each do |attrib|
+          = f.hidden_field attrib, id: attrib, data: { cropper_target: attrib.to_s.split("_").last }
 
       = f.check_box :show_foreign_themes
 
-      - %i[profile_picture_x profile_picture_y profile_picture_w profile_picture_h].each do |attrib|
-        = f.hidden_field attrib, id: attrib
-
-      - %i[profile_header_x profile_header_y profile_header_w profile_header_h].each do |attrib|
-        = f.hidden_field attrib, id: attrib
-
       = f.primary t(".submit_picture")
 .card
   .card-body