diff --git a/web/admin/src/components/ConfigTabs.vue b/web/admin/src/components/ConfigTabs.vue
index 93f2a14..aacb7d6 100644
--- a/web/admin/src/components/ConfigTabs.vue
+++ b/web/admin/src/components/ConfigTabs.vue
@@ -14,5 +14,8 @@ const props = defineProps({
     <li class="nav-item">
       <router-link :class="['nav-link', { active: props.activeTab === 'TaskTypes' }]" :to="{ name: 'TaskTypesList'}">TaskTypes</router-link>
     </li>
+    <li class="nav-item">
+      <router-link :class="['nav-link', { active: props.activeTab === 'Orders' }]" :to="{ name: 'OrdersSettingsPage'}">Orders</router-link>
+    </li>
   </ul>
 </template>
diff --git a/web/admin/src/composables/useUnits.js b/web/admin/src/composables/useUnits.js
new file mode 100644
index 0000000..c5a53f0
--- /dev/null
+++ b/web/admin/src/composables/useUnits.js
@@ -0,0 +1,23 @@
+import { ref } from 'vue'
+
+export function useUnits() {
+
+  const units = ref([
+    {
+      'name':'ounces',
+      'displayName': 'Ounces (dry)',
+    },
+    {
+      'name': 'ounces-liquid',
+      'displayName': 'Ounces (liquid)',
+    },
+    {
+      'name': 'pounds',
+      'displayName': 'Pounds',
+    }
+  ])
+
+  return {
+    units
+  }
+}
diff --git a/web/admin/src/config.js b/web/admin/src/config.js
index d735265..5c3349b 100644
--- a/web/admin/src/config.js
+++ b/web/admin/src/config.js
@@ -6,6 +6,9 @@ export let config = {
   OrganizationName: import.meta.env.VITE_ORGANIZATION_NAME || 'ORGANIZATION_NAME',
   ProjectLongName: import.meta.env.VITE_PROJECT_LONG_NAME || 'PROJECT_LONG_NAME',
   AdminProjectLongName: import.meta.env.VITE_ADMIN_PROJECT_LONG_NAME || 'ADMIN_PROJECT_LONG_NAME',
+  orders: {
+    showWeights: false,
+  },
 
   meta: {
     Home: {
diff --git a/web/admin/src/pages/orders/OrderFormPage.vue b/web/admin/src/pages/orders/OrderFormPage.vue
index 7c73301..6beec4a 100644
--- a/web/admin/src/pages/orders/OrderFormPage.vue
+++ b/web/admin/src/pages/orders/OrderFormPage.vue
@@ -1,66 +1,29 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, onBeforeMount } from 'vue'
+import { config } from '@/config.js'
+import { collection, getFirestore, query, where, doc, getDoc, getDocs, addDoc, updateDoc, deleteDoc, orderBy } from 'firebase/firestore'
 import OrdersTabs from '@/components/OrdersTabs.vue'
 import dayjs from 'dayjs'
 import { VueDraggable } from 'vue-draggable-plus'
+import { useUnits } from '@/composables/useUnits.js'
+import { useRouter } from 'vue-router'
 
+const props = defineProps({
+  id: String,
+})
+
+const router = useRouter()
+const db = getFirestore()
 const showSaveMessage = ref(false)
 const showErrMessage = ref(false)
+const showDeleteMessage = ref(false)
 const saveMessage = ref('')
 const errMessage = ref('')
+const deleteMessage = ref('Form deleted')
+const units = useUnits().units
 
 
-const items = ref([
-  {
-    name: 'Apples',
-    id: 'apples',
-    num: 6,
-    maxTotal: 400,
-    weight: 6,      // weight in ounces
-  },
-  {
-    name: 'Beans',
-    id: 'beans',
-    num: 2,
-    maxTotal: 400,
-    weight: 6,
-  },
-  {
-    name: 'Milk',
-    id: 'milk',
-    num: 1,
-    maxTotal: 400,
-    weight: 6,
-  },
-  {
-    name: 'Peas',
-    id: 'peas',
-    num: 2,
-    maxTotal: 400,
-    weight: 6,
-  },
-  {
-    name: 'Rice',
-    id: 'rice',
-    num: 1,
-    maxTotal: 400,
-    weight: 6,
-  },
-  {
-    name: 'Diapers',
-    id: 'diapers',
-    num: 1,
-    maxTotal: 20,
-    weight: 6,
-  },
-  {
-    name: 'Toothpaste',
-    id: 'toothpaste',
-    num: 1,
-    maxTotal: 10,
-    weight: 6,
-  },
-])
+const items = ref([])
 
 const formData = ref({
   beginDate: dayjs().toDate(),
@@ -88,6 +51,38 @@ const onRemoveOrder = (ev) => {
   calculateWeight()
 }
 
+const resetShowMessages = () => {
+  showSaveMessage.value = false
+  showErrMessage.value = false
+  showDeleteMessage.value = false
+  errMessage.value = 'An error occurred'
+}
+
+const getItems = async() => {
+  try {
+    const q = query(collection(db, 'item'), orderBy('name', 'asc'))
+    const orderItems = await getDocs(q)
+    const itemArray = []
+    orderItems.forEach( (item) => {
+      itemArray.push({
+        id: item.id,
+        num: 1,
+        maxTotal: 100,
+        ...item.data()})
+    })
+    items.value = itemArray
+
+  } catch (err) {
+    errMessage.value = 'Error occurred reading items'
+    console.error(err)
+    showErrMessage.value = true
+  }
+}
+
+
+onBeforeMount(async() => {
+  await getItems()
+})
 </script>
 
 <template>
@@ -180,7 +175,7 @@ const onRemoveOrder = (ev) => {
       </div>
     </div>
 
-    <div class="row mb-3">
+    <div class="row mb-3" v-if="config.orders.showWeights">
       <div class="col">
         Estimated weight of order: {{ orderForm.estimatedTotalWeight / 16.0 }} pounds
       </div>
diff --git a/web/admin/src/pages/orders/OrderItemListPage.vue b/web/admin/src/pages/orders/OrderItemListPage.vue
index 9e40dfd..d3586b1 100644
--- a/web/admin/src/pages/orders/OrderItemListPage.vue
+++ b/web/admin/src/pages/orders/OrderItemListPage.vue
@@ -1,12 +1,65 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, onBeforeMount } from 'vue'
 import OrdersTabs from '@/components/OrdersTabs.vue'
+import { collection, getFirestore, query, where, doc, getDocs, addDoc, updateDoc, orderBy } from 'firebase/firestore'
+import SortableTableHeader from '@/components/SortableTableHeader.vue'
 
+const db = getFirestore()
+const items = ref()
+const sortBy = ref("name")
+const sortAsc = ref(true)
+
+
+const refreshList = async () => {
+  const q = query(collection(db, "item"), orderBy(sortBy.value, sortAsc.value ? "asc" : "desc"))
+  const itemRef = await getDocs(q)
+  const itemarray = []
+  itemRef.forEach((item)=> {
+    itemarray.push({id:item.id,...item.data()})
+  })
+  items.value = itemarray
+}
+
+const sortList = param => {
+  sortAsc.value = sortBy.value === param ? !sortAsc.value : true
+  sortBy.value = param
+
+  refreshList()
+}
+
+onBeforeMount( async () => {
+  await refreshList()
+})
 </script>
 
 <template>
 <div class="container">
   <OrdersTabs activeTab="Items" />
 
+  <div class="mt-3">
+    <router-link class="btn btn-primary" :to="{'name':'OrderItemPage'}">New Item</router-link>
+  </div>
+
+    <div class="table-responsive-md">
+      <table class="table table-striped table-hover">
+        <thead>
+          <tr>
+            <SortableTableHeader heading="Name" sortKey="name" :sortBy="sortBy" :sortAsc="sortAsc" @sort-list="sortList" />
+            <th scope="col">Inventory</th>
+            <th scope="col">Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in items" :key="item.id">
+            <td>{{item.name}}</td>
+            <td>{{item.numInventory}}</td>
+            <td>
+              <router-link class="btn btn-sm btn-primary" :to="{name:'OrderItemPage', params:{id:item.id} }">Edit</router-link>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
 </div>
 </template>
diff --git a/web/admin/src/pages/orders/OrderItemPage.vue b/web/admin/src/pages/orders/OrderItemPage.vue
index 447bfc8..0d56ba2 100644
--- a/web/admin/src/pages/orders/OrderItemPage.vue
+++ b/web/admin/src/pages/orders/OrderItemPage.vue
@@ -1,12 +1,166 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, onBeforeMount } from 'vue'
+import { config } from '@/config.js'
+import { collection, getFirestore, query, where, doc, getDoc, getDocs, addDoc, updateDoc, deleteDoc } from 'firebase/firestore'
 import OrdersTabs from '@/components/OrdersTabs.vue'
+import { useUnits } from '@/composables/useUnits.js'
+import { useRouter } from 'vue-router'
 
+const props = defineProps({
+  id: String,
+})
+
+const router = useRouter()
+const db = getFirestore()
+const showSaveMessage = ref(false)
+const showErrMessage = ref(false)
+const showDeleteMessage = ref(false)
+const saveMessage = ref('Item Saved')
+const errMessage = ref('An error occurred')
+const deleteMessage = ref('Item Deleted')
+
+const units = useUnits().units
+
+const item = ref(
+  {
+    name: '',
+    numInventory: 0,
+    weight: 0,
+    weightUnits: "ounces"
+  }
+)
+const oldName = ref('')
+
+const resetShowMessages = () => {
+  showSaveMessage.value = false
+  showErrMessage.value = false
+  showDeleteMessage.value = false
+  errMessage.value = 'An error occurred'
+}
+
+const deleteItem = async() => {
+  resetShowMessages()
+  try {
+    await deleteDoc(doc(db, 'item', props.id))
+    showDeleteMessage.value = true
+    router.push({name: 'OrderItemListPage'})
+  } catch(err) {
+    showErrMessage.value = true
+    console.error(err)
+  }
+}
+
+const saveItem = async () => {
+  resetShowMessages()
+  try {
+    // convert numInventory to number
+    item.value.numInventory = Number(item.value.numInventory)
+    item.value.weight = Number(item.value.weight)
+
+    if (props.id !== null && props.id !== '' && props.id !== undefined) {
+      const itemRef = doc(db, 'item', props.id)
+      if (item.value.name !== oldName.value) {
+        // check if there is something with the new name
+        const q = query(collection(db, 'item'), where('name', '==', item.value.name))
+        const docs = await getDocs(q)
+        if (docs.size > 0) {
+          errMessage.value = 'Item with name ' + item.value.name + ' already exists'
+          showErrMessage = true
+          return
+        }
+      }
+
+      await updateDoc(itemRef, item.value)
+      showSaveMessage.value = true
+    } else {
+
+      const q = query(collection(db, 'item'), where('name', '==', item.value.name))
+      const docs = await getDocs(q)
+      if (docs.size > 0) {
+        errMessage.value = 'Item with name ' + item.value.name + ' already exists'
+        showErrMessage = true
+        return
+      }
+
+      const itemRef = await addDoc(collection(db, 'item'), item.value)
+      router.push({name: 'OrderItemListPage'})
+
+    }
+  } catch(err) {
+    showErrMessage.value = true
+    console.error(err)
+  }
+}
+
+onBeforeMount(async() => {
+  try {
+    if (props.id) {
+      const itemRef = doc(db, 'item', props.id)
+      const itemSnap = await getDoc(itemRef)
+      if (itemSnap.exists()) {
+        item.value = itemSnap.data()
+        oldName.value = itemSnap.data().name
+      } else {
+        showErrMessage.value = true
+        errMessage.value = 'Item does not exist'
+      }
+    }
+  } catch(err) {
+    showErrMessage.value = true
+    console.error(err)
+  }
+})
 </script>
 
 <template>
 <div class="container">
-  <OrdersTabs activeTab="Form" />
+  <OrdersTabs activeTab="Items" />
+
+  <h1>Order Item</h1>
+
+  <form @submit.prevent="saveItem">
+    <div v-if="showSaveMessage" class="p-3 text-bg-success">{{saveMessage}}</div>
+    <div v-if="showDeleteMessage" class="p-3 text-bg-success">{{deleteMessage}}</div>
+    <div v-if="showErrMessage" class="p-3 text-bg-danger">{{errMessage}}</div>
+
+    <div class="row mb-3">
+      <div class="col">
+        <label class="form-label" for="itemName">Name</label>
+        <input id="itemName" type="text" class="form-control" v-model="item.name" required>
+      </div>
+    </div>
+
+    <div class="row mb-3">
+      <div class="col">
+        <label class="form-label" for="numInventory">Number in Inventory</label>
+        <input id="numInventory" type="text" class="form-control" v-model="item.numInventory" required>
+      </div>
+    </div>
+
+    <div v-if="config.orders.showWeights" class="row mb-3">
+      <div class="col">
+        <label class="form-label" for="weight">Weight</label>
+        <input id="weight" type="text" class="form-control" v-model="item.weight" required>
+      </div>
+    </div>
+
+    <div v-if="config.orders.showWeights" class="row mb-3">
+      <div class="col">
+        <label class="form-label" for="weightUnits">Weight Units</label>
+        <select id="weightUnits" class="form-select" v-model="item.weightUnits">
+          <option v-for="(u,i) in units" :value="u.name" :key="u.name">{{u.displayName}}</option>
+        </select>
+      </div>
+    </div>
 
+    <div class="row mb-3">
+      <div class="col">
+        <button type="submit" class="btn btn-primary">Save</button>
+      </div>
+      <div class="col text-end">
+        <button @click.prevent="deleteItem" class="btn btn-danger" :disabled="props.id === '' || props.id === null || props.id === undefined">Delete</button>
+      </div>
+    </div>
+  </form>
 </div>
 </template>
diff --git a/web/admin/src/pages/orders/OrdersSettingsPage.vue b/web/admin/src/pages/orders/OrdersSettingsPage.vue
new file mode 100644
index 0000000..ce18b6d
--- /dev/null
+++ b/web/admin/src/pages/orders/OrdersSettingsPage.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { ref } from 'vue'
+import { config } from '@/config.js'
+import ConfigTabs from '@/components/ConfigTabs.vue'
+
+
+
+</script>
+
+<template>
+<div class="container">
+  <ConfigTabs activeTab="Orders" class="mb-3"/>
+  <div class="mt-3">
+    <strong>Show Item Weights:</strong> {{ config.orders.showWeights }}
+  </div>
+</div>
+</template>
diff --git a/web/admin/src/router.js b/web/admin/src/router.js
index c84faf0..05e0520 100644
--- a/web/admin/src/router.js
+++ b/web/admin/src/router.js
@@ -78,6 +78,12 @@ const routes = [
     component: () => import('@/pages/orders/OrdersDashboardPage.vue'),
     meta: { requiresLogin: true, admin: true },
   },
+  {
+    path: '/orders/settings',
+    name: 'OrdersSettingsPage',
+    component: () => import('@/pages/orders/OrdersSettingsPage.vue'),
+    meta: { requiresLogin: true, admin: true },
+  },
   {
     path: '/orders/form',
     name: 'OrderFormPage',
@@ -96,6 +102,13 @@ const routes = [
     component: () => import('@/pages/orders/OrderItemListPage.vue'),
     meta: { requiresLogin: true, admin: true },
   },
+  {
+    path: '/orders/items/item/:id?',
+    name: 'OrderItemPage',
+    props: true,
+    component: () => import('@/pages/orders/OrderItemPage.vue'),
+    meta: { requiresLogin: true, admin: true },
+  },
   {
     path: '/profile/:uid?',
     name: 'Profile',
diff --git a/web/firestore.rules b/web/firestore.rules
index 82e9ab1..5d86578 100644
--- a/web/firestore.rules
+++ b/web/firestore.rules
@@ -110,5 +110,11 @@ service cloud.firestore {
       allow create, read, update: if request.auth.uid == uid || request.auth.token.admin == true;
       allow list: if request.auth.token.admin == true;
     }
+
+    match /item/{id} {
+      allow create, read, update, delete: if request.auth != null && request.auth.token.admin == true;
+    }
+
+
   }
 }