diff --git a/app/javascript/retrospring/features/settings/crop.ts b/app/javascript/retrospring/features/settings/crop.ts
new file mode 100644
index 00000000..e7e201d2
--- /dev/null
+++ b/app/javascript/retrospring/features/settings/crop.ts
@@ -0,0 +1,62 @@
+import 'croppr/dist/croppr.css';
+import Croppr from 'croppr';
+
+const readImage = (file, callback) => callback((window.URL || window.webkitURL).createObjectURL(file));
+
+export function profilePictureChangeHandler(event: Event) {
+  const input = event.target as HTMLInputElement;
+
+  const cropControls = document.querySelector('#profile-picture-crop-controls');
+  cropControls.classList.toggle('d-none');
+
+  if (input.files && input.files[0]) {
+    readImage(input.files[0], (src) => {
+      const updateValues = (data) => {
+        document.querySelector<HTMLInputElement>('#profile_picture_x').value = data.x;
+        document.querySelector<HTMLInputElement>('#profile_picture_y').value = data.y;
+        document.querySelector<HTMLInputElement>('#profile_picture_w').value = data.width;
+        document.querySelector<HTMLInputElement>('#profile_picture_h').value = data.height;
+      }
+
+      const cropper = document.querySelector<HTMLImageElement>('#profile-picture-cropper');
+      cropper.src = src;
+
+      new Croppr(cropper, {
+        aspectRatio: 1,
+        startSize: [100, 100, '%'],
+        onCropStart: updateValues,
+        onCropMove: updateValues,
+        onCropEnd: updateValues
+      });
+    });
+  }
+}
+
+export function profileHeaderChangeHandler(event: Event) {
+  const input = event.target as HTMLInputElement;
+
+  const cropControls = document.querySelector('#profile-header-crop-controls');
+  cropControls.classList.toggle('d-none');
+
+  if (input.files && input.files[0]) {
+    readImage(input.files[0], (src) => {
+      const updateValues = (data) => {
+        document.querySelector<HTMLInputElement>('#profile_header_x').value = data.x;
+        document.querySelector<HTMLInputElement>('#profile_header_y').value = data.y;
+        document.querySelector<HTMLInputElement>('#profile_header_w').value = data.width;
+        document.querySelector<HTMLInputElement>('#profile_header_h').value = data.height;
+      }
+
+      const cropper = document.querySelector<HTMLImageElement>('#profile-header-cropper');
+      cropper.src = src;
+
+      new Croppr(cropper, {
+        aspectRatio: 7/30,
+        startSize: [100, 100, '%'],
+        onCropStart: updateValues,
+        onCropMove: updateValues,
+        onCropEnd: updateValues
+      });
+    });
+  }
+}
\ No newline at end of file