diff --git a/src/templates/_components/app/line-item-cart.twig b/src/templates/_components/app/line-item-cart.twig
index e03b678..de92dab 100644
--- a/src/templates/_components/app/line-item-cart.twig
+++ b/src/templates/_components/app/line-item-cart.twig
@@ -62,10 +62,10 @@
 					{{ actionInput('commerce/cart/update-cart') }}
 					<div class="inline-flex bg-white border border-gray-300 rounded-lg overflow-hidden">
 
-						<button type="button"
-								class="flex justify-center items-center w-[38px] h-[38px] text-[var(--brandColor)]"
-								@click="remove"
-						>
+            <button type="button"
+              class="flex justify-center items-center w-[38px] h-[38px] text-[var(--brandColor)]"
+              @click="decrement"
+            >
               <span v-cloak v-if="qty <= 1">
                 <span class="sr-only">{{ 'Remove from cart'|t('foster-checkout') }}</span>
                 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20" class="fill-current">
@@ -164,6 +164,7 @@
 				</button>
 
 				<button
+          type="button"
 					class="inline-flex justify-start items-center gap-2 text-sm underline text-gray-500 hover:no-underline hover:text-gray-700"
 					@click="remove"
 				>
diff --git a/src/web/assets/checkout/dist/js/app.js b/src/web/assets/checkout/dist/js/app.js
index ff95fb2..727f9d7 100644
--- a/src/web/assets/checkout/dist/js/app.js
+++ b/src/web/assets/checkout/dist/js/app.js
@@ -58,8 +58,12 @@ const LineItem = (props) => {
     },
     decrement() {
       this.removeMessages()
-      this.qty = this.qty > 1 ? (this.qty - 1) : 1;
-      this.updateQty();
+      if(this.qty === 1) {
+        this.remove();
+      } else {
+        this.qty = this.qty > 1 ? (this.qty - 1) : 1;
+        this.updateQty();
+      }
     },
     async remove() {
       const form = document.querySelector(`#lineItemQty-${props.id}`);