diff --git a/client/src/App.js b/client/src/App.js
index 725eeab8..ed2e90b8 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -24,7 +24,7 @@ function App() {
         
           <Route path="/appointmentScheduler" element={<AppointmentScheduler/>}/>
 
-          <Route path="addFood" element={<AddFood/>}/>
+          <Route path="/addFood" element={<AddFood/>} />
 
         </Routes>
       </Router>      
diff --git a/client/src/components/Food.js b/client/src/components/Food.js
index d2897442..b891bdfa 100644
--- a/client/src/components/Food.js
+++ b/client/src/components/Food.js
@@ -3,6 +3,8 @@ import './Food.css'
 import Tags from './Tags.js'
 import edit_item from './../images/edit_item.png'
 import pen from './../images/pen.svg'
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
+
 
 function Food(props) {
     function editItem () {
@@ -25,13 +27,15 @@ function Food(props) {
                     </div>
                 </div>
                 <div className = "editIn">
+                {/* <Link to="/thankyou" state={{date: selectedDate.label, time: selectedTime.label}} onClick= {submitForm} className = "submit-button" style = {{textDecoration: 'none'}}>Submit</Link> */}
                     <div>
-                        <button className="editButton" onClick={editItem}>
+                        {/* <button className="editButton" onClick={editItem}> */}
+                        <Link to="/addFood" state = {{name: props.name, tags: props.tags, inStock: true, image: props.image}} className = "editButton">
                             <img src={pen} className="penFormat" alt="pen"/>
                             <div className="editItem">
                                 Edit Item
                             </div>
-                        </button>
+                        </Link>
                     </div>
                     <div style={{paddingLeft: "6%"}} className ="inStock">
                         <span style={{paddingRight: "11%"}}>In Stock</span>
diff --git a/client/src/pages/AddFood.css b/client/src/pages/AddFood.css
index 9134f2e5..e504c45a 100644
--- a/client/src/pages/AddFood.css
+++ b/client/src/pages/AddFood.css
@@ -36,6 +36,22 @@
     border-radius: 10px 10px 10px 10px;
 }
 
+/* .save-item-button-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 15vw;
+    height: 5.5vh;
+    margin-top: 43%;
+    margin-right: 27%;
+    border-radius: 40px;
+    color: white;
+    background-color: #264425;
+    font-size: 2.25vh;
+    font-weight: 800;
+    font-family: 'Montserrat';
+} */
+
 .save-item-button-container {
     display: flex;
     justify-content: center;
@@ -52,7 +68,73 @@
     font-family: 'Montserrat';
 }
 
-.item-selections {
+.save-item-button-container-2 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 15vw;
+    height: 5.5vh;
+    margin-top: 43%;
+    margin-left: -33%;
+    border-radius: 40px;
+    color: white;
+    background-color: #264425;
+    font-size: 2.25vh;
+    font-weight: 800;
+    font-family: 'Montserrat';
+}
+
+.delete-item-button-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 15vw;
+    height: 5.5vh;
+    margin-top: 43%;
+    margin-left: -17%;
+    border-radius: 40px;
+    color: white;
+    background-color: #264425;
+    font-size: 2.25vh;
+    font-weight: 800;
+    font-family: 'Montserrat';
+}
+
+.delete-item-button-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 15vw;
+    height: 5.5vh;
+    margin-top: 43%;
+    margin-right: 27%;
+    border-radius: 40px;
+    color: white;
+    background-color: #264425;
+    font-size: 2.25vh;
+    font-weight: 800;
+    font-family: 'Montserrat';
+
+    /* display: flex;
+    align-items: center;
+    margin-left: 1%;
+    justify-content: center;
+    width: 10vw;
+    height: 5.5vh;
+    border-radius: 20px;
+    border: #588157 solid 1px;
+    background-color: red;
+    color: #588157;
+    font-size: 2.25vh;
+    font-family: 'Montserrat'; */
+}
+
+.add-item-image-display {
+    display: flex;
+    justify-content: center;
+}
+
+.add-item-selections {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -62,16 +144,16 @@
 
 .upload-image {
     display: flex;
-    justify-content: column;
+    justify-content: center;
     flex-direction: column;
     height: 80%;
     width: 40%;
-    padding-left: 10%;
+    /* padding-left: 10%; */
     font-family: "Montserrat";
     font-size: 150%;
 }
 
-.stock-dropdown {
+.add-item-stock-dropdown {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -79,12 +161,13 @@
     width: 30vw;
 }
 
-.categories-dropdown {
+.add-item-categories-dropdown {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     padding-bottom: 2vh;
     width: 30vw;
+    
 }
 
 p#filterControlLabel {
@@ -105,14 +188,20 @@ p#filterControlLabel {
     width: 30vw;
 }
 
-.item-name-textbox {
+.add-item-button-container {
+    display: flex;
+    flex-direction: row;
+    background-color: blue;
+}
+
+.add-item-name-textbox {
     width: 30vw;
     height: 5vh;
     border-radius: .5vw;
     border: solid #ACB9AC;
 }
 
-label, input {
+label.add-item-name-input, input {
     display:flex;
     flex-direction: column;
     border-radius: 4px 4px 4px 4px;
@@ -146,7 +235,8 @@ label, input {
     border-radius: 100px;
     border: #264425 solid 1px;
     margin-top: 8%;
-    margin-left: -10%;
+    margin-left: 20%;
+    /* margin-left: -10%; */
     background-color: white;
 }
 
@@ -189,13 +279,15 @@ label, input {
 
 .right-side-container {
     display: flex;
-    justify-content: center;
+    align-items: center;
     height: 50vh;
     width: 50vw;
+    flex-direction: column;
 }
 
 .upload-image-header {
-    margin-top: 2.5%;
+    display: flex;
+    justify-content: center;
     font-weight: 450;
     height: 5%;
     font: 'inter';
@@ -207,8 +299,40 @@ label, input {
     color:#B8B8B8;
     margin-top: 2.5%;  
     font-weight: 300; 
+}
 
+.addTagsFormat {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-content: left;
+    flex-wrap: wrap;
+    overflow-x: scroll;
+}
+
+.imgFormat {
+    display: flex;
+    justify-content: center;
+    height: 50px;
+    width: 50px;
 }
+.add-item-custom-dropdown {
+    /* overflow-x: auto;
+    overflow-y: hidden; */
+    display: flex;
+    flex-direction: row; 
+    height: 20%;
+
+    /* overflow-x: scroll; */
+    /* overflow-y: hidden; */
+    /* flex-wrap: nowrap; */
+    /* justify-content: start; */
+}
+
+.app {
+    height: 40px;
+    overflow-x: scroll;
+  }
 
 @media screen and (orientation: portrait) {
     .add-food-component-container {
@@ -257,6 +381,9 @@ label, input {
         width: 80vw;
         font-weight: 600;
         padding-top: 2vh;
+        /* display: inline-block;
+        white-space: nowrap;
+        text-overflow: ellipsis; */
     }
     .right-side-container {
         display: flex;
@@ -276,5 +403,4 @@ label, input {
         margin-top: 5%;
         margin-left: 20%;
     }
-
 }
diff --git a/client/src/pages/AddFood.js b/client/src/pages/AddFood.js
index 1af02898..193bab97 100644
--- a/client/src/pages/AddFood.js
+++ b/client/src/pages/AddFood.js
@@ -2,8 +2,11 @@ import './AddFood.css';
 import saveitembutton from './../images/saveitembutton.png';
 import Select, { NonceProvider } from 'react-select';
 import makeAnimated from 'react-select/animated';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import UploadImageButton from './../components/UploadImageButton.js';
+import { useLocation } from "react-router-dom";
+import Tags from '../components/Tags.js'
+import { unstable_renderSubtreeIntoContainer } from 'react-dom';
 
 const todayStock = [
     { value: 'in stock', label: 'In stock today' },
@@ -62,47 +65,120 @@ const customStyles = {
 }
 
 export default function AddFood() {
+
+    const location = useLocation();
+    const [edit, setEdit] = useState(true);
+    const [itemName, setItemName] = useState("");
+    const [stockAvailability, setStockAvailability] = useState("");
+    const [tags, setTags] = useState([]);
+    
+
+    
+    useEffect(() => {
+        setItemName(location.state.name);
+        setTags(location.state.tags);
+        
+
+        // if (tags.length == 0) {
+        //     const returnTags = dictionaryHelper();
+
+        //     console.log("return tags");
+        //     console.log(returnTags);
+        //     setTags(returnTags);
+
+        //     console.log("check tags");
+        //     console.log(tags);
+
+        // }
+
+        if (location.state.inStock == true) {
+            setStockAvailability("In Stock Today");
+        }
+        else {setStockAvailability("Out of Stock Today");}
+    
+
+      });
+
+    console.log(tags);
+
+    // function dictionaryHelper() {
+    //     const listOfTags = [];
+    //     for (let i = 0; i < location.state.tags.length; i++) {
+    //         listOfTags.push({label: location.state.tags[i], value: i})
+    //     }
+
+    //     return listOfTags
+    // }
+
+    function headerDisplay() {
+        if (edit) {
+            return (
+                <div>
+                <h1>Edit Item</h1>
+                <p>Edit an existing item in the stock directory.</p>
+                </div>   
+            )}
+        return (
+            <div>
+                <h1>Add Item</h1>
+                <p>Add a new item to the stock directory.</p>
+            </div>
+            )
+        }
+
+    function displayTags() {
+        return (
+            <div className = "addTagsFormat">
+                        {tags.map((tag) => {
+                            return (
+                            <Tags name={tag} />
+                        );})}
+                </div>
+        )
+    }
+        
+
     return(
         <div className = 'add-food-component-container'>
             <div className = 'add-food-component-header'>
-                <div>
-                    <h1>Add Item</h1>
-                    <p>Add a new item to the stock directory.</p>
-                </div>
+                {headerDisplay()}
             </div>
                 <div className = 'main-add-food-component-container'>
-                    <div className = 'item-selections'> 
-                        <div className = "item-name">
+                    <div className = 'add-item-selections'> 
                             <form>
-                                <label className = "item-name-input">
+                                <label className = "add-item-name-input">
                                     Item Name 
                                     </label>
-                                    <input className = "item-name-textbox" type="text" name="name" />
+                                    <input className = "add-item-name-textbox" defaultValue={itemName} type="text" name="name" />
                             </form>
-                        </div>
 
-                        <div className="stock-dropdown">
-                            <label className = "item-name-input">Set Stock Availability</label>
-                            <div id="filter-dropdown">
-                                <Select className="custom-dropdown"
-                                    menuPlacement='auto'
-                                    menuPosition='fixed'
+                        <div className="add-item-stock-dropdown">
+                            <label className = "add-item-name-input">Set Stock Availability</label>
+                            <div>
+                                <Select className="add-item-custom-dropdown"
+                                    placeholder="select..."
                                     styles={customStyles}
                                     closeMenuOnSelect={true}
                                     components={animatedComponents}
-                                    placeholder="Select..."
+                                    defaultInputValue={stockAvailability} 
                                     options={todayStock}
                                 />
                             </div>
                         </div>
 
-                        <div className="categories-dropdown">
-                            <label className = "item-name-input">Select Dietary Categories (Optional)</label>
+                        <div className="add-item-categories-dropdown">
+                            <label className = "add-item-name-input">Select Dietary Categories (Optional)</label>
                             <div>
-                                <Select className="custom-dropdown"
-                                    styles={customStyles}
+                                <Select className="add-item-custom-dropdown"
                                     closeMenuOnSelect={true}
+                                    styles={customStyles}
                                     components={animatedComponents}
+                                    defaultValue={tags}
+                                    
+                                    // placeholder = {tags.map((tag) => {
+                                    //     return (
+                                    //     <Tags name={tag}/>
+                                    // );})}
                                     isMulti
                                     options={dietaryCategories}
                                 />
@@ -111,13 +187,19 @@ export default function AddFood() {
                     </div>
  
                     <div className = 'right-side-container'>
-                        <div className = 'upload-image-header'>Upload Image <span class='optional-text'>(Optional)</span></div>
+                        <div className = 'upload-image-header'>Upload Image <span className='optional-text'>(Optional)</span></div>
                         <UploadImageButton/>
+                        
+                        <div className = "add-item-image-display">
+                            <img src={location.state.image} className="imgFormat" alt="food image"/>
+                        </div>
+
                     </div>
                 </div>
             
-                <input className = "save-item-button-container" type="button" value="Save Item"></input>
-        
+                <input className = "save-item-button-container" type = "button" value="Save Item"></input>
+                <input className = "save-item-button-container-2" type="button" value="Delete Item"></input>
+
         </div>
     )
 }
diff --git a/client/src/pages/MobileUserNavbar.js b/client/src/pages/MobileUserNavbar.js
new file mode 100644
index 00000000..a4d8fed3
--- /dev/null
+++ b/client/src/pages/MobileUserNavbar.js
@@ -0,0 +1,54 @@
+import './MobNavbar.css';
+import bfpLogo from './../images/bfpLogo.svg';
+import xButton from './../images/isbees-x-symbol.svg';
+import groceries from './../images/navBarImage.png';
+import React, { useState } from 'react';
+import dropdownIcon from './../images/dropdown-icon.svg'
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
+
+function MobNavbar() {
+    const [dropdown, setDropdown] = useState(0);
+    function setTrue() {
+        setDropdown(true)
+    }
+    function setFalse() {
+        setDropdown(false)
+    }
+    if (dropdown) {
+        return (
+            <div className='canvas'>
+                <div className = "dropNavBar">
+                    <img src = {bfpLogo} className = "logo"></img>
+                    <button onClick={setFalse}>
+                        <img src = {xButton} className = "xButton" />
+                    </button>
+                </div>
+                <div className ='imageAndDropDowns'>
+                    <img src = {groceries} className = "dropDownLogo"></img>
+                    <div className='dropDownLinks'>
+                        <a href="https://www.berkeleyfoodpantry.org/aboutus" 
+                        target="_blank" rel="noopener noreferrer" className='dropDownText' onClick = {setFalse}>About the Pantry</a>
+                        <Link to = "/stockListingAdmin" onClick={setFalse} className = 'dropDownText'> View Today's Stock </Link>
+                        <a href="google.com" className='dropDownText'>Schedule Appointment</a>
+                        <Link to = "/adminLogin" onClick={setFalse} className = 'dropDownText'> Login </Link>
+                        {/* <a href="google.com" className='dropDownText'>Edit Today's Stock</a>
+                        <a href="google.com" className='dropDownText'>View Appointments</a>
+                        <a href="google.com" className='dropDownText'>Logout</a> */}
+                    </div>
+                </div>
+            </div>
+        )
+    } 
+    return (
+            <div className='navBar'>
+                <img src = {bfpLogo} className = "logo"></img>
+                <button onClick={setTrue}>
+                    <img src = {dropdownIcon} className = "icon"></img>
+                </button>
+            </div>
+            
+    )
+    
+}
+
+export default MobNavbar;
\ No newline at end of file
diff --git a/client/src/pages/StockListingAdmin.js b/client/src/pages/StockListingAdmin.js
index 02200f17..b5ede4ae 100644
--- a/client/src/pages/StockListingAdmin.js
+++ b/client/src/pages/StockListingAdmin.js
@@ -84,9 +84,25 @@ const customStyles = {
     },
 }
 
+function dictionaryHelper(foodTags) {
+    const listOfTags = [];
+    // for (let i = 0; i < location.state.tags.length; i++) {
+    //     listOfTags.push({label: location.state.tags[i], value: i})
+    // }
+    const newArr = [] 
+    for (let i = 0; i < foodTags.length; i++) { 
+        const temp = {label: foodTags[i], value: i}; 
+        newArr.push(temp);
+    }
+
+    console.log(newArr);
+
+    return newArr;
+}
 
 
 export function StockListingAdmin() {
+
     return (
         <div className="entireContent">
 
@@ -100,7 +116,7 @@ export function StockListingAdmin() {
                     </div>
 
                     <div className="rightSide">
-                        <button type="button" class="btn" className="addButton">
+                        <button type="button" className="btn">
                             <img src={isbesPlusSign}></img>
                             <div className="addItem"> Add new item </div>
                         </button>
@@ -155,22 +171,22 @@ export function StockListingAdmin() {
                             <div className="showFilter">
                                 <div className="showText"> Show </div>
                                 <div className="form-check">
-                                    <label class="form-check-label" for="exampleRadios1">
-                                        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" unchecked></input>
+                                    <label className="form-check-label" for="exampleRadios1">
+                                        <input className="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" unchecked></input>
                                         All items
                                     </label>
                                 </div>
 
                                 <div className="form-check">
-                                    <label class="form-check-label" for="exampleRadios1">
-                                        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" unchecked></input>
+                                    <label className="form-check-label" for="exampleRadios1">
+                                        <input className="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" unchecked></input>
                                         In stock items only
                                     </label>
                                 </div>
                                 
                                 <div className="form-check">
-                                    <label class="form-check-label" for="exampleRadios1">
-                                        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" unchecked></input>
+                                    <label className="form-check-label" for="exampleRadios1">
+                                        <input className="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" unchecked></input>
                                         Not in stock items only
                                     </label>
                                 </div>
@@ -179,7 +195,7 @@ export function StockListingAdmin() {
                         </div>
                     </div>
                     <div className="filterItemDisplay">
-                    <Food name="Apple" image={apple} in_stock={true} tags={["Vegetarian", "Vegan", "Gluten-free", "Fruit", "Fruit" ]} />
+                    <Food name="Apple" image={apple} in_stock={true} tags={dictionaryHelper(["Vegetarian", "Vegan", "Gluten-free", "Fruit", "Fruit" ])} />
                     <Food name="Banana" image={banana} in_stock={true} tags={["Vegetarian", "Vegan", "Gluten-free", "Fruit", "Fruit" ]} />
                     <Food name="Coconut" image={cocunut} in_stock={true} tags={["Vegetarian", "Vegan", "Gluten-free", "Fruit", "Fruit" ]} />
                     <Food name="Donut" image={donut} in_stock={true} tags={["Vegetarian", "Vegan", "Gluten-free", "Fruit", "Fruit" ]} />
@@ -253,8 +269,8 @@ export function StockListingUser() {
 
                             <div className="showFilter">
                                 <div className="form-check">
-                                    <label class="form-check-label" for="exampleRadios1">
-                                        <input class="form-check-input" type="checkbox" name="exampleRadios" id="exampleRadios1" value="option1" unchecked></input>
+                                    <label className="form-check-label" for="exampleRadios1">
+                                        <input className="form-check-input" type="checkbox" name="exampleRadios" id="exampleRadios1" value="option1" unchecked></input>
                                         Only show items in stock today.
                                     </label>
                                 </div>
@@ -275,4 +291,5 @@ export function StockListingUser() {
         </div>
     )
 
-    }
\ No newline at end of file
+    }
+    
\ No newline at end of file
diff --git a/client/src/pages/UserNavbar.js b/client/src/pages/UserNavbar.js
new file mode 100644
index 00000000..0f053b29
--- /dev/null
+++ b/client/src/pages/UserNavbar.js
@@ -0,0 +1,17 @@
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
+import './Navbar.css';
+import berkeleyfoodpantrylogo from './../images/berkeley-food-pantry-logo.png';
+
+export default function AdminLoginNavbar() {
+   return(
+      <div className= "navbarContainer">
+         <img src={berkeleyfoodpantrylogo} className = "navbarLogo" alt = "navbar logo"></img>
+            <ul className = "navbar-container"> 
+                  <Link to="https://www.berkeleyfoodpantry.org/aboutus" className = "headerTags" style={{ textDecoration: 'none'}} >About the Pantry</Link>
+                  <Link to="/stockListingAdmin" className = "headerTags" style={{ textDecoration: 'none' }}>View Today's Stock</Link>
+                  <Link to="/appointmentScheduler" className = "headerTags" style={{ textDecoration: 'none' }}>Schedule Appointment</Link>
+                  <Link to="/adminLogin" className = "headerTags" style={{ textDecoration: 'none' }}>Login</Link>
+            </ul>
+      </div>
+   )
+}