diff --git a/web/static/numerus.css b/web/static/numerus.css
index ee6d835..573fb83 100644
--- a/web/static/numerus.css
+++ b/web/static/numerus.css
@@ -567,8 +567,15 @@ main > nav {
 }
 
 .new-invoice-product {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    position: relative;
+}
+
+.new-invoice-product .delete-product {
+    position: absolute;
+    right: 0;
+    top: .75rem;
 }
 
 .new-invoice-product .input:nth-of-type(5) {
diff --git a/web/template/form.gohtml b/web/template/form.gohtml
index 354db3a..6235c76 100644
--- a/web/template/form.gohtml
+++ b/web/template/form.gohtml
@@ -145,10 +145,15 @@
 {{ define "invoice-product-form" -}}
     {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.invoiceProductForm*/ -}}
     <fieldset class="new-invoice-product"
+              x-data="{removeProduct() { $el.remove(); document.getElementById('recompute-button').click(); }}"
               data-hx-select="unset"
               data-hx-vals='{"index": {{ .Index }}}'
               data-hx-include="[name='product.quantity.{{ .Index }}']"
     >
+        <button x-cloak type="button" class="icon delete-product"
+                @click="removeProduct()"
+                aria-label="{{( gettext "Delete product from invoice" )}}"
+        ><i class="ri-delete-back-2-line"></i></button>
         {{ template "hidden-field" .InvoiceProductId }}
         {{ template "hidden-field" .ProductId }}
         {{ template "input-field" .Name }}