diff --git a/public/css/admin.css b/public/css/admin.css
index 6be934e2..e69e854a 100644
--- a/public/css/admin.css
+++ b/public/css/admin.css
@@ -33,17 +33,24 @@
 	z-index: 100;
 	color: #fff;
 }
-#crop_editor input[type=number] {
-	width: 75px;
-	background: #555;
+#crop_editor .input-group-text {
+	background-color: rgba(233, 236, 239, 0.5);
+	border-color: rgba(233, 236, 239, 0.5);
 	color: #fff;
 }
+#crop_editor input[type=number] {
+	background: #555;
+	border-color: rgba(233, 236, 239, 0.5);
+	color: #fff;
+	width: 85px;
+}
 #crop_editor input[type=checkbox] {
 	vertical-align: middle;
 }
 .crop_position {
 	background: rgba(0, 0, 0, 1.0);
 	border: none;
+	display: flex;
 	padding: 5px;
 	text-align: center;
 }
diff --git a/public/js/crop_editor.js b/public/js/crop_editor.js
index 286f1da5..5aa64c60 100644
--- a/public/js/crop_editor.js
+++ b/public/js/crop_editor.js
@@ -16,6 +16,7 @@ class CropEditor {
 
 	initDOM() {
 		this.container = document.createElement("div");
+		this.container.className = 'container-fluid';
 		this.container.id = "crop_editor";
 
 		this.initPositionForm();
@@ -27,71 +28,70 @@ class CropEditor {
 
 	initPositionForm() {
 		this.position = document.createElement("fieldset");
-		this.position.className = "crop_position";
+		this.position.className = "crop_position flex-row justify-content-center";
 		this.container.appendChild(this.position);
 
-		let source_x_label = document.createTextNode("Source X:");
-		this.position.appendChild(source_x_label);
+		const addNumericControl = (label, changeEvent) => {
+			const column = document.createElement('div');
+			column.className = 'col-auto';
+			this.position.appendChild(column);
 
-		this.source_x = document.createElement("input");
-		this.source_x.className = 'form-control d-inline';
-		this.source_x.type = 'number';
-		this.source_x.addEventListener("change", this.positionBoundary.bind(this));
-		this.source_x.addEventListener("keyup", this.positionBoundary.bind(this));
-		this.position.appendChild(this.source_x);
+			const group = document.createElement('div');
+			group.className = 'input-group';
+			column.appendChild(group);
 
-		let source_y_label = document.createTextNode("Source Y:");
-		this.position.appendChild(source_y_label);
+			const labelEl = document.createElement("span");
+			labelEl.className = 'input-group-text';
+			labelEl.textContent = label;
+			group.appendChild(labelEl);
 
-		this.source_y = document.createElement("input");
-		this.source_y.className = 'form-control d-inline';
-		this.source_y.type = 'number';
-		this.source_y.addEventListener("change", this.positionBoundary.bind(this));
-		this.source_y.addEventListener("keyup", this.positionBoundary.bind(this));
-		this.position.appendChild(this.source_y);
+			const control = document.createElement("input");
+			control.className = 'form-control';
+			control.type = 'number';
+			control.addEventListener("change", changeEvent);
+			control.addEventListener("keyup", changeEvent);
+			group.appendChild(control);
 
-		let crop_width_label = document.createTextNode("Crop width:");
-		this.position.appendChild(crop_width_label);
+			return control;
+		};
 
-		this.crop_width = document.createElement("input");
-		this.crop_width.className = 'form-control d-inline';
-		this.crop_width.type = 'number';
-		this.crop_width.addEventListener("change", this.positionBoundary.bind(this));
-		this.crop_width.addEventListener("keyup", this.positionBoundary.bind(this));
-		this.position.appendChild(this.crop_width);
+		this.source_x = addNumericControl("Source X:", this.positionBoundary);
+		this.source_y = addNumericControl("Source Y:", this.positionBoundary);
+		this.crop_width = addNumericControl("Crop width:", this.positionBoundary);
+		this.crop_height = addNumericControl("Crop height:", this.positionBoundary);
 
-		let crop_height_label = document.createTextNode("Crop height:");
-		this.position.appendChild(crop_height_label);
+		const otherColumn = document.createElement('div');
+		otherColumn.className = 'col-auto text-nowrap';
+		this.position.appendChild(otherColumn);
 
-		this.crop_height = document.createElement("input");
-		this.crop_height.className = 'form-control d-inline';
-		this.crop_height.type = 'number';
-		this.crop_height.addEventListener("change", this.positionBoundary.bind(this));
-		this.crop_height.addEventListener("keyup", this.positionBoundary.bind(this));
-		this.position.appendChild(this.crop_height);
-
-		this.crop_constrain_label = document.createElement("label");
-		this.position.appendChild(this.crop_constrain_label);
+		const constrainContainer = document.createElement("div");
+		constrainContainer.className = 'form-checkbox d-inline';
+		otherColumn.appendChild(constrainContainer);
 
 		this.crop_constrain = document.createElement("input");
 		this.crop_constrain.checked = true;
+		this.crop_constrain.className = 'form-check-input';
+		this.crop_constrain.id = 'check_constrain';
 		this.crop_constrain.type = 'checkbox';
-		this.crop_constrain_label.appendChild(this.crop_constrain);
+		constrainContainer.appendChild(this.crop_constrain);
 
-		this.crop_constrain_text = document.createTextNode('Constrain proportions');
-		this.crop_constrain_label.appendChild(this.crop_constrain_text);
+		this.crop_constrain_label = document.createElement("label");
+		this.crop_constrain_label.className = 'form-check-label';
+		this.crop_constrain_label.htmlFor = 'check_constrain';
+		this.crop_constrain_label.textContent = 'Constrain proportions';
+		constrainContainer.appendChild(this.crop_constrain_label);
 
 		this.save_button = document.createElement("span");
 		this.save_button.className = "btn btn-light";
 		this.save_button.textContent = "Save";
 		this.save_button.addEventListener('click', this.save.bind(this));
-		this.position.appendChild(this.save_button);
+		otherColumn.appendChild(this.save_button);
 
 		this.abort_button = document.createElement("span");
 		this.abort_button.className = "btn btn-danger";
 		this.abort_button.textContent = "Abort";
 		this.abort_button.addEventListener('click', this.hide.bind(this));
-		this.position.appendChild(this.abort_button);
+		otherColumn.appendChild(this.abort_button);
 	}
 
 	initImageContainer() {
@@ -175,7 +175,7 @@ class CropEditor {
 		this.source_x.max = source.naturalWidth - 1;
 		this.source_y.max = source.naturalHeight - 1;
 
-		this.crop_constrain_text.textContent = `Constrain proportions (${current.crop_width} × ${current.crop_height})`;
+		this.crop_constrain_label.textContent = `Constrain proportions (${current.crop_width} × ${current.crop_height})`;
 	}
 
 	showContainer() {