diff --git a/client/src/api.js b/client/src/api.js
new file mode 100644
index 0000000..6574fdd
--- /dev/null
+++ b/client/src/api.js
@@ -0,0 +1,13 @@
+const SERVER_IP_ADDRESS = 'localhost';
+const SERVER_PORT = '5000';
+const PROTOCOL = 'http';
+const databaseName = 'box';
+const baseApiUrl = `${PROTOCOL}://${SERVER_IP_ADDRESS}:${SERVER_PORT}/${databaseName}`;
+
+export default {
+    SERVER_IP_ADDRESS,
+    SERVER_PORT,
+    PROTOCOL,
+    databaseName,
+    baseApiUrl
+}
\ No newline at end of file
diff --git a/client/src/app.js b/client/src/app.js
index c04b2dc..9e64fb8 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -1,12 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
+import Box from './box';
 import './styles/app.css';
-
-const SERVER_IP_ADDRESS = 'localhost';
-const SERVER_PORT = '5000';
-const PROTOCOL = 'http';
-const databaseName = 'box';
-const baseApiUrl = `${PROTOCOL}://${SERVER_IP_ADDRESS}:${SERVER_PORT}/${databaseName}`;
+=import baseApiUrl from './api';
 
 function App() {
 
@@ -22,13 +18,15 @@ function App() {
   const [boxName, setBoxName] = useState('');
   const [boxDescription, setBoxDescription] = useState('');
 
+
+  
   const fetchDataAsync = async () => {
     try {
       const resp = await axios.get(baseApiUrl);
       setData(resp.data);
     }
-    catch (e) {
-      console.log(e);
+    catch (error) {
+      console.log(error);
     }
   }
 
@@ -52,15 +50,27 @@ function App() {
     }
   }
 
+  
+
+  const deleteItem = async (id) => {
+    try {
+      const response = await axios.delete(`${baseApiUrl}/item/${id}`);
+      setData(response.data);
+    }
+    catch (error) {
+      console.log(error);
+    }
+  }
+
   const handleBoxName = (e) => {
     setBoxName(e.target.value);
   }
-  
+ 
   const handleBoxDescription = (e) => {
     setBoxDescription(e.target.value);
   }
-
-  const handleSubmit = (event) => {
+  
+  const handleSubmitBox = (event) => {
     event.preventDefault();
     const boxData = {
       name: boxName,
@@ -69,35 +79,34 @@ function App() {
     createBox(boxData);
     return false;
   }
-  const handleRemove = (id) => {
-    console.log(id);
+
+  const handleRemoveBox = (id) => {
     deleteBox(id);
   }
 
+  
+ 
+
+  const handler = {
+    box: {
+      handleSubmit: handleSubmitBox,
+      handleRemove: handleRemoveBox,
+      handleName: handleBoxName,
+      handleDescription: handleBoxDescription,
+    },
+  };
   const lstBoxes = data.map((box) => {
     return (
       <ul className="list-box">
-        <li className="box">
-          <p className="box-name">{box.name}</p>
-          <ul className="list-box-item">
-            {box.item.map(((item) => {
-              return (<li className="item">
-                <p>{item.name}</p>
-                <ul>
-                  <li>{item.description}</li>
-                  <li>{item.quantity}</li>
-                </ul>
-              </li>);
-            }))}
-          </ul>
-        </li>
-        <button onClick={() => handleRemove(box._id)}>delete</button>
+        <Box data={box} handler={handler}/>
       </ul>
     );
   });
 
+  
+
   const formNewBox =
-    <form>
+    <form onSubmit={handleSubmitBox}>
       <legend>New Box</legend>
       <fieldset>
         <label htmlFor="box-name">name
@@ -107,8 +116,7 @@ function App() {
           <input onChange={handleBoxDescription} value={boxDescription} id="box-description" name="description" type="text" />
         </label>
       </fieldset>
-
-      <button onClick={handleSubmit}>submit</button>
+      <button type="submit">submit</button>
     </form>
 
   return (
diff --git a/client/src/box.js b/client/src/box.js
new file mode 100644
index 0000000..bb6eade
--- /dev/null
+++ b/client/src/box.js
@@ -0,0 +1,72 @@
+import React, {useState, setState} from 'react';
+import Item from './item';
+import baseApiUrl from './api';
+
+const [showFormItem, setShowFormItem] = useState(false);
+const [itemName, setItemName] = useState('');
+const [itemDescription, setItemDescription] = useState('');
+const handleItemName = (e) => {
+    setItemName(e.target.value);
+  }
+const handleItemDescription = (e) => {
+    setItemDescription(e.target.value);
+  }
+
+  const handleAddItem = () => {
+    setShowFormItem(true);
+  }
+  const handleSubmitItem = (event) => {
+    event.preventDefault();
+    const id = (event.target).querySelector("#id").value;
+    const itemData= {
+      name: itemName,
+      description: itemDescription
+    }
+    createItem(id, itemData);
+    return false;
+  }
+  const createItem = async (id, itemData) => {
+    try {
+      const response = await axios.post(`${baseApiUrl}/${id}/item`, itemData);
+      const update = [...data];
+      update.splice(data.findIndex((box) => box._id === id), 1, response.data);
+      console.log(update);
+      setData(update);
+    }
+    catch(error) {
+      console.log(error);
+    }
+  }
+const Box = ({data, handler}) => {
+    const [items, setItems] = useState(data.item);
+    return (
+        <li className="box">
+          <p className="box-name">{data.name}</p>
+          <ul className="list-box-item">
+            {items.map(((item) => {
+              return <Item data={item} handler={handler.item} />
+            }))}
+          </ul>
+          <button onClick={() => handler.box.remove(data._id)}>delete</button>
+          <button onClick={handler.box.add}>add item</button>
+
+          {showFormItem &&
+          <form onSubmit={handleSubmitItem}>
+            <legend>New Item</legend>
+            <fieldset>
+              <input id="id" name="id" value={data._id} hidden></input>
+              <label htmlFor="item-name">name
+            <input onChange={handleItemName} value={itemName} id="item-name" name="name" type="text"></input>
+              </label>
+              <label htmlFor="item-description">description
+            <input onChange={handleItemDescription} value={itemDescription} id="item-description" name="description" type="text"></input>
+              </label>
+            </fieldset>
+            <button type="submit">submit</button>
+          </form>}
+        </li>
+        
+    )
+}
+
+export default Box;
\ No newline at end of file
diff --git a/client/src/item.js b/client/src/item.js
new file mode 100644
index 0000000..99f479a
--- /dev/null
+++ b/client/src/item.js
@@ -0,0 +1,13 @@
+import React, {useState, setState } from 'react';
+
+const item = ({data, handler}) => {
+    return (<li className="item">
+    <p>{data.name}</p>
+    <ul>
+      <li>{data.description}</li>
+      <li>{data.quantity}</li>
+    </ul>
+  </li>);
+};
+
+export default item;
\ No newline at end of file
diff --git a/client/src/styles/app.css b/client/src/styles/app.css
index 1796490..1aa60c6 100644
--- a/client/src/styles/app.css
+++ b/client/src/styles/app.css
@@ -4,8 +4,4 @@ form > fieldset > label {
 
 form > fieldset {
     border: none;
-}
-
-.item {
-    display: none;
 }
\ No newline at end of file
diff --git a/server/server.js b/server/server.js
index b7aa824..070c447 100644
--- a/server/server.js
+++ b/server/server.js
@@ -6,7 +6,7 @@ const cors = require('cors');
 app.use(cors(), express.json());
 
 const port = process.env.PORT || 5000;
-const MONGO_IP_ADDRESS = '192.168.1.2';
+const MONGO_IP_ADDRESS = '192.168.100.102';
 
 mongoose.connect(`mongodb://${MONGO_IP_ADDRESS}/storage`, {useNewUrlParser: true});
 const db = mongoose.connection;
@@ -21,16 +21,11 @@ db.once('open', function() {
 
 /*------------MODELS------------*/
 //create schema
-var itemSchema = new mongoose.Schema({
-    name: String,
-    quantity: Number,
-    description: String,
-});
 var boxSchema = new mongoose.Schema({
     id: String,
     name: String,
     description: String,
-    item: [itemSchema],
+    item: [mongoose.Schema.Types.Mixed],
 });
 
 //compile schema into model
@@ -46,7 +41,7 @@ app.get('/box', async (request, response) => {
     response.send(boxes);
 });
 
-// create new box
+// create box
 app.post('/box', async (request, response) => {
     Box.create(request.body, (error, document) => {
         if(error) return request.next(error);
@@ -58,19 +53,52 @@ app.post('/box', async (request, response) => {
 
 //delete box
 app.delete('/box/:id', async (request, response) => {
-    Box.deleteOne({_id: request.params.id}, (error, document) => {
+    await Box.deleteOne({_id: request.params.id}, (error, document) => {
         if(error)return null;
         return document;
     });
     const updatedBoxes = await getAllBoxes();
     response.send(updatedBoxes);
-})
+});
+
+//create item
+app.post('/box/:id/item', async (request, response) => {
+    const id = request.params.id;
+    const query = {_id: id};
+    const box = Box.updateOne(query,{
+        $push: { item: request.body }
+    }, (error, document) => {
+        if(error)return null;
+        return document;
+    });
+    const updatedBox = await getBox(id);
+    response.send(updatedBox);
+});
+
+//delete item //THIS IS NOT WORKING
+app.delete('/item/:id', async (request, response) => {
+    Item.deleteOne({_id: request.params.id}, (error, document) => {
+        if(error)return null;
+        return document;
+    });
+    const updatedBoxes = await getAllBoxes();
+    response.send(updatedBoxes);
+});
+
 
 /*------------/CONTROLLER------------*/
 
 const getAllBoxes = async (queryParameters) => {
     queryParameters = queryParameters ?? {};
-    const data = Box.find(queryParameters, (error, document) => {
+    const data = await Box.find(queryParameters, (error, document) => {
+        if(error) return null;
+        return document;
+    });
+    return data;
+}
+
+const getBox = async (id) => {
+    const data = await Box.findById(id, (error, document) => {
         if(error) return null;
         return document;
     });