diff --git a/client/src/app.js b/client/src/app.js
index 5392da4..5fc7a27 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -23,7 +23,8 @@ function App() {
   const [itemID, setItemID] = useState(undefined);
   const [itemName, setItemName] = useState('');
   const [itemDescription, setItemDescription] = useState('');
-
+  const [itemQuantity, setItemQuantity] = useState(1);
+  
   const [filter, setFilter] = useState('');
   const [filteredData, setFilteredData] = useState([]);
 
@@ -241,7 +242,7 @@ function App() {
     setItemID(itemID);
     setItemName(item.name || '');
     setItemDescription(item.description || '');
-
+    setItemQuantity(item.quantity || 1);
   }
   const handleEditItem = (boxID, itemID) => {
     clearFormItem();
@@ -262,7 +263,8 @@ function App() {
     const itemData = {
       id: itemID,
       name: itemName,
-      description: itemDescription
+      description: itemDescription,
+      quantity: itemQuantity
     }
     if (editItemBool)
       editItem(boxID, itemID, itemData);
@@ -282,15 +284,17 @@ function App() {
     setItemID(undefined);
     setItemName('');
     setItemDescription('');
+    setItemQuantity(1);
   }
-
-
   const handleNameItem = (e) => {
     setItemName(e.target.value)
   }
   const handleDescriptionItem = (e) => {
     setItemDescription(e.target.value)
   }
+  const handleQuantityItem = (e) => {
+    setItemQuantity(parseInt(e.target.value));
+  }
   const itemHandler = {
     handleSubmit: handleSubmitItem,
     handleRemove: handleRemoveItem,
@@ -299,6 +303,7 @@ function App() {
     handleView: handleViewItem,
     handleName: handleNameItem,
     handleDescription: handleDescriptionItem,
+    handleQuantity: handleQuantityItem
   };
 
   const handleFilterChange = (event) => {
@@ -328,10 +333,13 @@ function App() {
     <fieldset>
       <input id="id" name="id" value={itemID} readOnly hidden></input>
       <label htmlFor="item-name">name
-    <input autoFocus onChange={itemHandler.handleName} value={itemName} id="item-name" name="name" type="text"></input>
+        <input autoFocus onChange={itemHandler.handleName} value={itemName} id="item-name" name="name" type="text"></input>
       </label>
       <label htmlFor="item-description">description
-    <input onChange={itemHandler.handleDescription} value={itemDescription} id="item-description" name="description" type="text"></input>
+        <input onChange={itemHandler.handleDescription} value={itemDescription} id="item-description" name="description" type="text"></input>
+      </label>
+      <label htmlFor="item-quantity">quantity
+        <input onChange={itemHandler.handleQuantity} value={itemQuantity} id="item-quantity" name="quantity" type="text"></input>
       </label>
     </fieldset>
     <button type="submit">submit</button>
diff --git a/server/server.js b/server/server.js
index 98be603..fe4fc18 100644
--- a/server/server.js
+++ b/server/server.js
@@ -95,7 +95,8 @@ app.put('/box/:boxId/item/:itemId', async (request, response) => {
     await Box.updateOne({ '_id': boxID, 'item._id': itemID }, {
         $set: {
             'item.$.name': request.body.name,
-            'item.$.description': request.body.description
+            'item.$.description': request.body.description,
+            'item.$.quantity': request.body.quantity
         }
     })
     const updatedBox = await getBox(boxID);