diff --git a/app/pages/cart/QuantityControl.tsx b/app/pages/cart/QuantityControl.tsx
new file mode 100644
index 0000000..4317684
--- /dev/null
+++ b/app/pages/cart/QuantityControl.tsx
@@ -0,0 +1,35 @@
+import { Minus, Plus } from 'lucide-react'
+import type { ReactElement } from 'react'
+import { Button } from '~/components/ui/Button'
+
+type QuantityControlProperties = {
+  quantity: number
+  handleQuantityChange: (quantity: number) => void
+}
+
+export function QuantityControl({ quantity = 1, handleQuantityChange }: QuantityControlProperties): ReactElement {
+  const handleDecrease = (): void => {
+    if (quantity > 1) handleQuantityChange(quantity - 1)
+  }
+
+  const handleIncrease = (): void => {
+    handleQuantityChange(quantity + 1)
+  }
+
+  return (
+    <div className="flex gap-2">
+      <Button
+        variant="gray"
+        className="w-6 h-6 rounded-sm cursor-pointer"
+        onClick={handleDecrease}
+        disabled={quantity === 1}
+      >
+        <Minus />
+      </Button>
+      <div className="w-6 h-6 flex justify-center items-center">{quantity}</div>
+      <Button variant="gray" className="w-6 h-6 rounded-sm cursor-pointer" onClick={handleIncrease}>
+        <Plus />
+      </Button>
+    </div>
+  )
+}