diff --git a/backend/public/product_editor.html b/backend/public/product_editor.html
index b5858a6..dd2f2ad 100644
--- a/backend/public/product_editor.html
+++ b/backend/public/product_editor.html
@@ -62,6 +62,7 @@
             #wrapper {
                 display: flex;
                 justify-content: center;
+                flex-wrap: wrap;
                 gap: 2rem;
             }
             #wrapper form {
@@ -78,6 +79,13 @@
                 height: 150px;
                 background-color: #fff;
             }
+            #coords {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: space-between;
+                height: 100%;
+            }
         </style>
     </head>
     <body>
@@ -150,6 +158,30 @@
                     <button id="save">Save</button>
                 </form>
             </fieldset>
+            <fieldset>
+                <legend>Coords</legend>
+
+                <form id="coords">
+                    <table>
+                        <tr>
+                            <td><label for="product-id">id: </label></td>
+                            <td>
+                                <input id="product-id" type="text">
+                            </td>
+                        </tr>
+                        <tr>
+                            <td><label for="coords-x">x: </label></td>
+                            <td><input id="coords-x" type="number"></td>
+                        </tr>
+                        <tr>
+                            <td><label for="coords-y">y: </label></td>
+                            <td><input id="coords-y" type="number"></td>
+                        </tr>
+                    </table>
+                    <div><img id="preview" src="" alt=""></div>
+                    <button id="save">Save</button>
+                </form>
+            </fieldset>
         </div>
     </body>
 </html>
diff --git a/backend/public/product_editor.js b/backend/public/product_editor.js
index f295dc5..0ee8984 100644
--- a/backend/public/product_editor.js
+++ b/backend/public/product_editor.js
@@ -18,6 +18,13 @@ const imageUploader = {
     preview: document.querySelector("#image-uploader #preview"),
     fileInput: document.querySelector("#image-uploader #file"),
 };
+const coords = {
+    form: document.querySelector("#coords"),
+    idInput: document.querySelector("#coords #product-id"),
+    xInput: document.querySelector("#coords #coords-x"),
+    yInput: document.querySelector("#coords #coords-y"),
+    saveButton: document.querySelector("#coords #save"),
+};
 
 let products = [];
 
@@ -32,6 +39,9 @@ function selectProduct(product) {
     editor.descriptionTextarea.value = product.description;
     editor.coordInput.value = product.coord_id.toString();
     editor.barcodeInput.value = product.barcode.toString();
+
+    imageUploader.idInput.value = product.id;
+    coords.idInput.value = product.id;
 }
 
 function loadProduct() {
@@ -146,7 +156,7 @@ imageUploader.form
     });
 imageUploader.fileInput
     .addEventListener("input", (e) => {
-        console.log(e);
+        e.preventDefault();
         const image = imageUploader.fileInput.files[0];
         const data = URL.createObjectURL(image);
         imageUploader.preview.src = data;
@@ -170,3 +180,19 @@ imageUploader.saveButton
             body: buffer,
         }).then((res) => res.json());
     });
+coords.form
+    .addEventListener("submit", (e) => {
+        e.preventDefault();
+    });
+coords.saveButton
+    .addEventListener("click", async (_e) => {
+        const product_id = parseInt(coords.idInput.value);
+        const x = parseInt(coords.xInput.value);
+        const y = parseInt(coords.yInput.value);
+
+        await fetch(`/api/products/set_coords`, {
+            method: "post",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ product_id, x, y }),
+        }).then((res) => res.json());
+    });
