diff --git a/client/src/app.js b/client/src/app.js
index d2596a7..56f0024 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -8,10 +8,16 @@ import Modal from './modal';
 function App() {
 
   const [data, setData] = useState();
+  const [boxID, setBoxID] = useState();
   const [boxName, setBoxName] = useState('');
   const [boxDescription, setBoxDescription] = useState('');
-  const [showFormBox, setShowFormBox] = useState(false);
-  const [showBox, setShowBox] = useState(false);
+  const [showModalBox, setShowModalBox] = useState(false);
+  const [showModalItem, setShowModalItem] = useState(false);
+
+  const [editBoxBool, setEditBoxBool] = useState(false);
+  const [editDataBox, setEditDataBox] = useState({});
+
+
   //fetch all box data
   useEffect(() => {
     const fetchData = async () => {
@@ -39,7 +45,15 @@ function App() {
       console.log(error);
     }
   }
+  const editBox = async (boxData) => {
+    try {
+      const response = await axios.put(`${api.baseApiUrl}/${boxData.id}`, boxData);
+      setData(response.data);
+    }
+    catch (error) {
 
+    }
+  }
   const removeBox = async (id) => {
     try {
       const response = await axios.delete(`${api.baseApiUrl}/${id}`);
@@ -52,23 +66,27 @@ function App() {
     }
   }
 
-  const handleBoxName = (e) => {
+  const handleNameBox = (e) => {
     setBoxName(e.target.value);
   }
- 
+
   const handleBoxDescription = (e) => {
     setBoxDescription(e.target.value);
   }
-  
+
   const handleSubmitBox = (event) => {
     event.preventDefault();
-    setShowFormBox(false);
+    setShowModalBox(false);
     clearForm();
     const boxData = {
+      id: boxID,
       name: boxName,
       description: boxDescription
     };
-    createBox(boxData);
+    if (editBoxBool)
+      editBox(boxData);
+    else
+      createBox(boxData);
     return false;
   }
 
@@ -76,41 +94,53 @@ function App() {
     removeBox(id);
   }
   const handleAddBox = () => {
-    setShowFormBox(true);
+    //open modal
+    setShowModalBox(true);
+  }
+  const clearForm = () => {
+    setEditBoxBool(false);
+    setBoxName('');
+    setBoxDescription('');
+    setBoxID(null);
+  }
+  const handleEditBox = (id) => {
+    const box = data.find(box => box._id === id);
+    setEditBoxBool(true);
+    setBoxName(box.name);
+    setBoxDescription(box.description);
+    setBoxID(id);
+    setShowModalBox(true);
   }
- const clearForm = () => {
-        setBoxName();
-        setBoxDescription();
-    }
   const boxHandler = {
-      handleSubmit: handleSubmitBox,
-      handleRemove: handleRemoveBox,
-      handleName: handleBoxName,
-      handleDescription: handleBoxDescription
+    handleSubmit: handleSubmitBox,
+    handleRemove: handleRemoveBox,
+    handleName: handleNameBox,
+    handleDescription: handleBoxDescription,
+    handleEdit: handleEditBox
   };
-  
+
   const createItem = async (id, itemData) => {
-      try {
-          const response = await axios.post(`${api.baseApiUrl}/${id}/item`, itemData);
-          const boxData = [...data];
-          boxData.splice(boxData.findIndex(box => box._id === id),1,response.data);
-          setData(boxData);
-      }
-      catch (error) {
-          console.log(error);
-      }
+    try {
+      const response = await axios.post(`${api.baseApiUrl}/${id}/item`, itemData);
+      const boxData = [...data];
+      boxData.splice(boxData.findIndex(box => box._id === id), 1, response.data);
+      setData(boxData);
+    }
+    catch (error) {
+      console.log(error);
+    }
   }
 
   const removeItem = async (boxID, itemID) => {
-      try {
-          const boxData = [...data];
-          const response = await axios.delete(`${api.baseApiUrl}/${boxID}/item/${itemID}`);
-          boxData.splice(boxData.findIndex(box => box._id === boxID),1,response.data);
-          setData(boxData);
-      }
-      catch (error) {
-          console.log(error);
-      }
+    try {
+      const boxData = [...data];
+      const response = await axios.delete(`${api.baseApiUrl}/${boxID}/item/${itemID}`);
+      boxData.splice(boxData.findIndex(box => box._id === boxID), 1, response.data);
+      setData(boxData);
+    }
+    catch (error) {
+      console.log(error);
+    }
   }
   const handleAddItem = (id) => {
     const boxData = [...data];
@@ -119,33 +149,35 @@ function App() {
     setData(boxData);
   }
   const handleRemoveItem = (boxID, itemID) => {
-      removeItem(boxID, itemID);
+    removeItem(boxID, itemID);
   }
   const handleSubmitItem = (event) => {
-      event.preventDefault();
-      clearForm();
-      const formData = new FormData(event.target);      
-      const id = formData.get('id');
-      const itemData = {
-          name: formData.get('name'),
-          description: formData.get('description')
-      }
-      createItem(id, itemData);
-      return false;
+  
+    event.preventDefault();
+    clearForm();
+    const formData = new FormData(event.target);
+    const id = formData.get('id');
+    const itemData = {
+      name: formData.get('name'),
+      description: formData.get('description')
+    }
+    createItem(id, itemData);
+    return false;
   }
 
   const itemHandler = {
-      handleSubmit: handleSubmitItem,
-      handleRemove: handleRemoveItem,
-      handleAddItem: handleAddItem,
+    handleSubmit: handleSubmitItem,
+    handleRemove: handleRemoveItem,
+    handleAddItem: handleAddItem,
   };
 
-  const formNewBox =
+  const boxForm =
     <form onSubmit={boxHandler.handleSubmit}>
+      <input id="id" name="id" value={boxID} readOnly hidden></input>
       <legend>New Box</legend>
       <fieldset>
         <label htmlFor="box-name">name
-          <input onChange={boxHandler.handleName} value={boxName} id="box-name" name="name" type="text" />
+          <input autoFocus onChange={boxHandler.handleName} value={boxName} id="box-name" name="name" type="text" />
         </label>
         <label htmlFor="box-description">description
           <input onChange={boxHandler.handleDescription} value={boxDescription} id="box-description" name="description" type="text" />
@@ -156,22 +188,20 @@ function App() {
 
   return (
     <>
-        {showBox && <Modal />}
-
+      {<Modal show={showModalBox} edit={editBoxBool} content={boxForm} /> } 
       <ul className="list-box">
-      {data && data.map((box, index) => {
-        return (
-          <Box
-            key={index}
-            boxData={box}
-            handleRemoveBox={boxHandler.handleRemove}
-            itemHandler={itemHandler}
+        {data && data.map((box, index) => {
+          return (
+            <Box
+              key={index}
+              boxData={box}
+              boxHandler={boxHandler}
+              itemHandler={itemHandler}
             />
-        );
-      })}
-    </ul>      
-    {!showFormBox && <button onClick={handleAddBox}>add box</button>}
-    {showFormBox && formNewBox}
+          );
+        })}
+      </ul>
+      {<button onClick={handleAddBox}>add box</button>}
     </>
   );
 
diff --git a/client/src/box.js b/client/src/box.js
index e2b2d44..d35d158 100644
--- a/client/src/box.js
+++ b/client/src/box.js
@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import Item from './item';
+import Modal from './modal';
 
-const Box = ({ boxData, handleRemoveBox, itemHandler }) => {
+const Box = ({ boxData, boxHandler, itemHandler }) => {
     const [itemName, setItemName] = useState('');
     const [itemDescription, setItemDescription] = useState('');
-
+    
     const handleName = (e) => {
         setItemName(e.target.value)
     }
@@ -26,6 +27,8 @@ const Box = ({ boxData, handleRemoveBox, itemHandler }) => {
     </form>
 
     return (
+        <>
+        {<Modal content={formNewItem} show={boxData.showItemForm} />}
         <li className="box">
             <h2 className="box-title">{boxData.name}</h2>
             <div className="box-subtitle">
@@ -42,9 +45,10 @@ const Box = ({ boxData, handleRemoveBox, itemHandler }) => {
                         handleRemove={itemHandler.handleRemove} />
                 }))}
             </ul>
-            <button className="remove-box" onClick={() => handleRemoveBox(boxData._id)}>remove box</button>
-            {boxData.showItemForm && formNewItem}
+            <button className="edit-box" onClick={() => boxHandler.handleEdit(boxData._id)}>edit</button>
+            <button className="remove-box" onClick={() => boxHandler.handleRemove(boxData._id)}>remove</button>
         </li>
+        </>
     )
 }
 
diff --git a/client/src/item.js b/client/src/item.js
index a516861..e0ce3d4 100644
--- a/client/src/item.js
+++ b/client/src/item.js
@@ -1,9 +1,9 @@
 import React from 'react';
 
-const item = ({ data, handleRemove, boxID }) => {
-    console.log(boxID)
+const item = ({ data, handleRemove, handleEdit, boxID }) => {
     return (<li className="item">
         <p className="item-name">{data.name}</p>
+        <button onClick={() => console.log('edit')}>edit</button>
         <button onClick={() => handleRemove(boxID, data._id)}>remove</button>
     </li>);
 };
diff --git a/client/src/modal.js b/client/src/modal.js
index fa25837..f2bb9f6 100644
--- a/client/src/modal.js
+++ b/client/src/modal.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import './styles/modal.css';
 
-const Modal = () => {
-    return (
+const Modal = ({show, content}) => {
+    return show ?
         <div className='modal-container'>
             <div className='modal-content'>
-                <h1>modal title</h1>
+                {content}
             </div>
         </div>
-    );
+    : null;
 }
 
 export default Modal;
\ No newline at end of file
diff --git a/client/src/styles/app.css b/client/src/styles/app.css
index 287a40c..441a848 100644
--- a/client/src/styles/app.css
+++ b/client/src/styles/app.css
@@ -1,4 +1,4 @@
-form > fieldset > label {
+ form > fieldset > label {
     display: flex;
 }
 
@@ -12,9 +12,10 @@ li {
 }
 li.item {
     display: grid;
-    grid-template-columns: 1fr 4em;
-    column-gap: 1em;
+    grid-template-columns: 1fr auto auto;
+    column-gap: 0.1em;
     margin: 0.4em 0 0 0;
+    padding: 0;
 }
 h1, h2, h3, h4 {
     font-weight:normal;
@@ -26,7 +27,7 @@ border: none;
 font-size: 0.8em;
 padding: 0.1em;
 }
-button.remove-box {
+button.remove-box, button.edit-box {
     width: 100%;
 }
 button:hover {
@@ -51,4 +52,4 @@ ul.list-box-item {
 }
 p {
     margin: 0;
-}
\ No newline at end of file
+}
diff --git a/client/src/styles/modal.css b/client/src/styles/modal.css
index 5def33c..f322b23 100644
--- a/client/src/styles/modal.css
+++ b/client/src/styles/modal.css
@@ -1,9 +1,10 @@
 .modal-container {
+    top: 0;
+    left: 0;
+    position: absolute;
     display: flex;
- 
     justify-content: center;
     align-items: center;
-    position: absolute;
     height: 100%;
     width: 100%;
     background-color: rgba(0,0,0,0.2);
diff --git a/server/server.js b/server/server.js
index f1a3ee9..85d8dbd 100644
--- a/server/server.js
+++ b/server/server.js
@@ -55,7 +55,13 @@ app.post('/box', async (request, response) => {
     const updatedBoxes = await getAllBoxes();
     response.send(updatedBoxes);
 });
-
+//edit box
+app.put('/box/:id', async (request, response) => {
+    const id = request.params.id;
+    await Box.updateOne({_id: id},{ $set: request.body});
+    const updatedBoxes = await getAllBoxes();
+    response.send(updatedBoxes);
+});
 //delete box
 app.delete('/box/:id', async (request, response) => {
     await Box.deleteOne({_id: request.params.id});