diff --git a/.prettierrc b/.prettierrc
index 7aaa14162..151b6b9b4 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1 +1,2 @@
 printWidth: 100
+trailingComma: all
diff --git a/pydatalab/pydatalab/models/__init__.py b/pydatalab/pydatalab/models/__init__.py
index f62483822..2d13e371f 100644
--- a/pydatalab/pydatalab/models/__init__.py
+++ b/pydatalab/pydatalab/models/__init__.py
@@ -4,6 +4,7 @@
 
 from pydatalab.models.cells import Cell
 from pydatalab.models.collections import Collection
+from pydatalab.models.equipment import Equipment
 from pydatalab.models.files import File
 from pydatalab.models.people import Person
 from pydatalab.models.samples import Sample
@@ -13,6 +14,16 @@
     "samples": Sample,
     "starting_materials": StartingMaterial,
     "cells": Cell,
+    "equipment": Equipment,
 }
 
-__all__ = ("File", "Sample", "StartingMaterial", "Person", "Cell", "Collection", "ITEM_MODELS")
+__all__ = (
+    "File",
+    "Sample",
+    "StartingMaterial",
+    "Person",
+    "Cell",
+    "Collection",
+    "Equipment",
+    "ITEM_MODELS",
+)
diff --git a/pydatalab/pydatalab/models/equipment.py b/pydatalab/pydatalab/models/equipment.py
new file mode 100644
index 000000000..d6c0587a4
--- /dev/null
+++ b/pydatalab/pydatalab/models/equipment.py
@@ -0,0 +1,20 @@
+from typing import Optional
+
+from pydantic import Field
+
+from pydatalab.models.items import Item
+
+
+class Equipment(Item):
+    """A model for representing an experimental sample."""
+
+    type: str = Field("equipment", const="equipment", pattern="^equipment$")
+
+    serial_numbers: Optional[str]
+    """A string describing one or more serial numbers for the instrument."""
+
+    manufacturer: Optional[str]
+    """The manufacturer of this piece of equipment"""
+
+    location: Optional[str]
+    """Place where the equipment is located"""
diff --git a/pydatalab/pydatalab/routes/v0_1/items.py b/pydatalab/pydatalab/routes/v0_1/items.py
index 45fe281a1..01ced9e71 100644
--- a/pydatalab/pydatalab/routes/v0_1/items.py
+++ b/pydatalab/pydatalab/routes/v0_1/items.py
@@ -74,6 +74,56 @@ def dereference_files(file_ids: List[Union[str, ObjectId]]) -> Dict[str, Dict]:
     return results
 
 
+def get_equipment_summary():
+    if not current_user.is_authenticated and not CONFIG.TESTING:
+        return (
+            jsonify(
+                status="error",
+                message="Authorization required to access chemical inventory.",
+            ),
+            401,
+        )
+
+    _project = {
+        "_id": 0,
+        "creators": {
+            "display_name": 1,
+            "contact_email": 1,
+        },
+        # "collections": {
+        #     "collection_id": 1,
+        #     "title": 1,
+        # },
+        "item_id": 1,
+        "name": 1,
+        "nblocks": {"$size": "$display_order"},
+        "characteristic_chemical_formula": 1,
+        "type": 1,
+        "date": 1,
+        "refcode": 1,
+        "location": 1,
+    }
+
+    items = [
+        doc
+        for doc in flask_mongo.db.items.aggregate(
+            [
+                {
+                    "$match": {
+                        "type": "equipment",
+                        **get_default_permissions(user_only=False),
+                    }
+                },
+                {"$project": _project},
+            ]
+        )
+    ]
+    return jsonify({"status": "success", "items": items})
+
+
+get_equipment_summary.methods = ("GET",)  # type: ignore
+
+
 def get_starting_materials():
     if not current_user.is_authenticated and not CONFIG.TESTING:
         return (
@@ -276,7 +326,10 @@ def search_items():
     if isinstance(types, str):
         types = types.split(",")  # should figure out how to parse as list automatically
 
-    match_obj = {"$text": {"$search": query}, **get_default_permissions(user_only=False)}
+    match_obj = {
+        "$text": {"$search": query},
+        **get_default_permissions(user_only=False),
+    }
     if types is not None:
         match_obj["type"] = {"$in": types}
 
@@ -360,7 +413,11 @@ def _create_sample(sample_dict: dict, copy_from_item_id: Optional[str] = None) -
             sample_dict = copied_doc
 
         elif copied_doc["type"] == "cells":
-            for component in ("positive_electrode", "negative_electrode", "electrolyte"):
+            for component in (
+                "positive_electrode",
+                "negative_electrode",
+                "electrolyte",
+            ):
                 if copied_doc.get(component):
                     existing_consituent_ids = [
                         constituent["item"].get("item_id", None)
@@ -402,7 +459,10 @@ def _create_sample(sample_dict: dict, copy_from_item_id: Optional[str] = None) -
         # locally for testing creator UI elements
         new_sample["creator_ids"] = [24 * "0"]
         new_sample["creators"] = [
-            {"display_name": "Public testing user", "contact_email": "datalab@odbx.science"}
+            {
+                "display_name": "Public testing user",
+                "contact_email": "datalab@odbx.science",
+            }
         ]
     else:
         new_sample["creator_ids"] = [current_user.person.immutable_id]
@@ -458,29 +518,36 @@ def _create_sample(sample_dict: dict, copy_from_item_id: Optional[str] = None) -
             400,
         )
 
+    sample_list_entry = {
+        "refcode": data_model.refcode,
+        "item_id": data_model.item_id,
+        "nblocks": 0,
+        "date": data_model.date,
+        "name": data_model.name,
+        "creator_ids": data_model.creator_ids,
+        # TODO: This workaround for creators & collections is still gross, need to figure this out properly
+        "creators": [json.loads(c.json(exclude_unset=True)) for c in data_model.creators]
+        if data_model.creators
+        else [],
+        "collections": [
+            json.loads(c.json(exclude_unset=True, exclude_none=True))
+            for c in data_model.collections
+        ]
+        if data_model.collections
+        else [],
+        "type": data_model.type,
+    }
+
+    # hack to let us use _create_sample() for equipment too. We probably want to make
+    # a more general create_item() to more elegantly handle different returns.
+    if data_model.type == "equipment":
+        sample_list_entry["location"] = data_model.location
+
     data = (
         {
             "status": "success",
             "item_id": data_model.item_id,
-            "sample_list_entry": {
-                "refcode": data_model.refcode,
-                "item_id": data_model.item_id,
-                "nblocks": 0,
-                "date": data_model.date,
-                "name": data_model.name,
-                "creator_ids": data_model.creator_ids,
-                # TODO: This workaround for creators & collections is still gross, need to figure this out properly
-                "creators": [json.loads(c.json(exclude_unset=True)) for c in data_model.creators]
-                if data_model.creators
-                else [],
-                "collections": [
-                    json.loads(c.json(exclude_unset=True, exclude_none=True))
-                    for c in data_model.collections
-                ]
-                if data_model.collections
-                else [],
-                "type": data_model.type,
-            },
+            "sample_list_entry": sample_list_entry,
         },
         201,  # 201: Created
     )
@@ -585,7 +652,12 @@ def get_item_data(item_id, load_blocks: bool = False):
     # retrieve the entry from the database:
     cursor = flask_mongo.db.items.aggregate(
         [
-            {"$match": {"item_id": item_id, **get_default_permissions(user_only=False)}},
+            {
+                "$match": {
+                    "item_id": item_id,
+                    **get_default_permissions(user_only=False),
+                }
+            },
             {"$lookup": creators_lookup()},
             {"$lookup": collections_lookup()},
             {"$lookup": files_lookup()},
@@ -708,7 +780,14 @@ def save_item():
     updated_data = request_json["data"]
 
     # These keys should not be updated here and cannot be modified by the user through this endpoint
-    for k in ("_id", "file_ObjectIds", "creators", "creator_ids", "item_id", "relationships"):
+    for k in (
+        "_id",
+        "file_ObjectIds",
+        "creators",
+        "creator_ids",
+        "item_id",
+        "relationships",
+    ):
         if k in updated_data:
             del updated_data[k]
 
@@ -827,6 +906,7 @@ def search_users():
 ENDPOINTS: Dict[str, Callable] = {
     "/samples/": get_samples,
     "/starting-materials/": get_starting_materials,
+    "/equipment/": get_equipment_summary,
     "/search-items/": search_items,
     "/search-users/": search_users,
     "/new-sample/": create_sample,
diff --git a/webapp/package.json b/webapp/package.json
index befffd914..7170e06f4 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -63,9 +63,9 @@
     "cypress": "^13.6.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-vue": "^8.0.3",
-    "prettier": "^2.4.1",
+    "prettier": "3.0.3",
     "typescript": "~3.9.3",
     "web-worker": "^1.2.0"
   }
diff --git a/webapp/src/components/CreateEquipmentModal.vue b/webapp/src/components/CreateEquipmentModal.vue
new file mode 100644
index 000000000..8bcb28132
--- /dev/null
+++ b/webapp/src/components/CreateEquipmentModal.vue
@@ -0,0 +1,246 @@
+<template>
+  <form @submit.prevent="submitForm" class="modal-enclosure">
+    <Modal
+      :modelValue="modelValue"
+      @update:modelValue="$emit('update:modelValue', $event)"
+      :disableSubmit="Boolean(equipmentIDValidationMessage) || !Boolean(item_id)"
+    >
+      <template v-slot:header> Add equipment </template>
+
+      <template v-slot:body>
+        <div class="form-row">
+          <div class="form-group col-md-6">
+            <label for="equipment-id" class="col-form-label">ID:</label>
+            <input v-model="item_id" type="text" class="form-control" id="equipment-id" required />
+            <div class="form-error" v-html="equipmentIDValidationMessage"></div>
+          </div>
+          <div class="form-group col-md-6">
+            <label for="item-type-select" class="col-form-label">Type:</label>
+            <select
+              v-model="item_type"
+              class="form-control"
+              id="item-type-select"
+              required
+              disabled
+            >
+              <option v-for="(obj, type) in availableTypes" :key="type" :value="type">
+                {{ obj.display }}
+              </option>
+            </select>
+          </div>
+          <div class="form-group col-md-6">
+            <label for="date" class="col-form-label">Date Created:</label>
+            <input
+              type="datetime-local"
+              v-model="date"
+              class="form-control"
+              id="date"
+              :min="agesAgo"
+              :max="oneYearOn()"
+              required
+            />
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="form-group col-md-12">
+            <label for="name">Name:</label>
+            <input id="name" type="text" v-model="name" class="form-control" />
+          </div>
+          <div class="form-group col-md-12">
+            <label for="name">Location:</label>
+            <input id="name" type="text" v-model="location" class="form-control" />
+          </div>
+        </div>
+        <!-- All item types can be added to a collection, so this is always available -->
+        <!--         <div class="form-row">
+          <div class="col-md-12 form-group">
+            <label id="startInCollection">(Optional) Insert into collection:</label>
+            <CollectionSelect
+              aria-labelledby="startInCollection"
+              multiple
+              v-model="startInCollection"
+            />
+          </div>
+        </div> -->
+        <div class="form-row">
+          <div class="col-md-12 form-group">
+            <label id="copyFromSelectLabel"
+              >(Optional) Copy from existing {{ itemTypeDisplayName }}:</label
+            >
+            <ItemSelect
+              aria-labelledby="copyFromSelectLabel"
+              :modelValue="selectedItemToCopy"
+              :typesToQuery="[item_type]"
+              @update:modelValue="
+                selectedItemToCopy = $event;
+                setCopiedName();
+              "
+            />
+          </div>
+        </div>
+        <!-- dynamically insert addons to this modal for each item type. On mount, the component
+        should emit a callback that can be called to get properly formatted
+        data to provide to the server -->
+        <!--         <component
+          :is="itemCreateModalAddonComponent"
+          @startingDataCallback="(callback) => (startingDataCallback = callback)"
+        /> -->
+      </template>
+    </Modal>
+  </form>
+</template>
+
+<script>
+import Modal from "@/components/Modal.vue";
+import ItemSelect from "@/components/ItemSelect.vue";
+import { createNewItem } from "@/server_fetch_utils.js";
+import { itemTypes } from "@/resources.js";
+// import CollectionSelect from "@/components/CollectionSelect.vue";
+export default {
+  name: "CreateEquipmentModal",
+  data() {
+    return {
+      item_id: null,
+      item_type: "equipment",
+      date: this.now(),
+      name: "",
+      location: "",
+      startingDataCallback: null,
+      // startInCollection: null,
+      takenItemIds: [], // this holds ids that have been tried, whereas the computed takenEquipmentIds holds ids in the equipment table
+      selectedItemToCopy: null,
+      agesAgo: new Date("1970-01-01").toISOString().slice(0, -8), // a datetime for the unix epoch start
+      //this is all just to filter an object in javascript:
+      availableTypes: { equipment: itemTypes["equipment"] },
+    };
+  },
+  props: {
+    modelValue: Boolean,
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    itemTypeDisplayName() {
+      return itemTypes[this.item_type].display;
+    },
+    itemCreateModalAddonComponent() {
+      return itemTypes[this.item_type].itemCreateModalAddon;
+    },
+    takenEquipmentIds() {
+      return this.$store.state.equipment_list
+        ? this.$store.state.equipment_list.map((x) => x.item_id)
+        : [];
+    },
+    equipmentIDValidationMessage() {
+      if (this.item_id == null) {
+        return "";
+      } // Don't throw an error before the user starts typing
+
+      if (
+        this.takenItemIds.includes(this.item_id) ||
+        this.takenEquipmentIds.includes(this.item_id)
+      ) {
+        return `<a href='edit/${this.item_id}'>${this.item_id}</a> already in use.`;
+      }
+      if (!/^[a-zA-Z0-9._-]+$/.test(this.item_id)) {
+        return "ID can only contain alphanumeric characters, dashes ('-') and underscores ('_') and periods ('.')";
+      }
+      if (/^[._-]/.test(this.item_id) | /[._-]$/.test(this.item_id)) {
+        return "ID cannot start or end with puncutation";
+      }
+      if (this.item_id.length < 1 || this.item_id.length > 40) {
+        return "ID must be between 1 and 40 characters in length";
+      }
+      return "";
+    },
+  },
+  methods: {
+    async submitForm() {
+      console.log("new equipment form submit triggered");
+
+      // get any extra data by calling the optional callback from the type-specific addon component
+      // const extraData = this.startingDataCallback && this.startingDataCallback();
+      // let startingCollection = [];
+      // if (this.startInCollection != null) {
+      //   startingCollection = this.startInCollection.map((x) => ({
+      //     collection_id: x.collection_id,
+      //     immutable_id: x.immutable_id,
+      //     type: "collections",
+      //   }));
+      // }
+
+      await createNewItem(
+        this.item_id,
+        this.item_type,
+        this.date,
+        this.name,
+        null, // no startingCollection
+        { location: this.location }, // no extra data
+        this.selectedItemToCopy && this.selectedItemToCopy.item_id,
+      )
+        .then(() => {
+          this.$emit("update:modelValue", false); // close this modal
+          document.getElementById(this.item_id).scrollIntoView({ behavior: "smooth" });
+          this.item_id = null;
+          this.name = null;
+          this.date = this.now(); // reset date to the new current time
+        })
+        .catch((error) => {
+          console.log("THERE WAS AN ERROR");
+          console.log(error);
+          let is_item_id_error = false;
+          try {
+            if (error.includes("item_id_validation_error")) {
+              this.takenItemIds.push(this.item_id);
+              is_item_id_error = true;
+            }
+          } catch (e) {
+            console.log("error parsing error message", e);
+          } finally {
+            if (!is_item_id_error) {
+              alert("Error with creating new equipment: " + error);
+            }
+          }
+        });
+    },
+    oneYearOn() {
+      // returns a timestamp 1 year from now
+      let d = new Date();
+      d.setFullYear(d.getFullYear() + 1);
+      return d.toISOString().slice(0, -8);
+    },
+    now() {
+      // returns a timestamp for right now
+      return new Date().toISOString().slice(0, -8);
+    },
+
+    setCopiedName() {
+      if (!this.selectedItemToCopy) {
+        this.name = "";
+      }
+      this.name = `COPY OF ${this.selectedItemToCopy.name}`;
+    },
+  },
+  components: {
+    Modal,
+    ItemSelect,
+    // CollectionSelect,
+  },
+};
+</script>
+
+<style scoped>
+.form-error {
+  color: red;
+}
+
+:deep(.form-error a) {
+  color: #820000;
+  font-weight: 600;
+}
+
+.modal-enclosure :deep(.modal-content) {
+  max-height: 90vh;
+  overflow: auto;
+  scroll-behavior: smooth;
+}
+</style>
diff --git a/webapp/src/components/EquipmentInformation.vue b/webapp/src/components/EquipmentInformation.vue
new file mode 100644
index 000000000..bcfd53f23
--- /dev/null
+++ b/webapp/src/components/EquipmentInformation.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="container">
+    <!-- Item information -->
+    <div id="equipment-information" class="form-row">
+      <div class="form-group col-md-2 col-sm-4">
+        <label for="item_id" class="mr-2">Refcode</label>
+        <div><FormattedRefcode :refcode="Refcode" /></div>
+      </div>
+      <div class="form-group col-md-2 col-sm-4">
+        <label for="item_id" class="mr-2">Item id</label>
+        <input id="item_id" class="form-control-plaintext" readonly="true" :value="item_id" />
+      </div>
+      <div class="form-group col-md-6 col-sm-8">
+        <label for="name" class="mr-2">Name</label>
+        <input id="name" v-model="Name" class="form-control" />
+      </div>
+      <div class="form-group col-md-2 col-sm-4">
+        <label for="datetime-local" class="mr-2">Date</label>
+        <input
+          type="datetime-local"
+          v-model="EquipmentDate"
+          id="date-opened"
+          class="form-control"
+        />
+      </div>
+    </div>
+    <div class="form-row">
+      <div class="form-group col-md-2">
+        <label id="collections" class="mr-2">Collections</label>
+        <div>
+          <CollectionList aria-labelledby="collections" :collections="Collections" />
+        </div>
+      </div>
+      <div class="form-group col-md-5">
+        <label for="chemform" class="mr-2">Manufacturer</label>
+        <span>
+          <input id="Manufacturer" v-model="Manufacturer" class="form-control" />
+        </span>
+      </div>
+      <div class="form-group col-md-5">
+        <label for="location" class="mr-2">Location</label>
+        <input id="location" v-model="Location" class="form-control" />
+      </div>
+    </div>
+    <div class="form-row">
+      <div class="form-group col-md-8">
+        <label for="serial-input" class="mr-2">Serial no(s).</label>
+        <input id="serial-input" v-model="SerialNos" class="form-control" />
+      </div>
+      <div class="col-md-4 pb-3">
+        <label id="maintainers-label" class="mr-2">Maintainers</label>
+        <div class="mx-auto">
+          <Creators aria-labelledby="maintainers-label" :creators="Maintainers" :size="36" />
+        </div>
+      </div>
+    </div>
+    <label class="mr-2">Description</label>
+    <TinyMceInline v-model="ItemDescription"></TinyMceInline>
+
+    <TableOfContents
+      class="mb-3"
+      :item_id="item_id"
+      :informationSections="tableOfContentsSections"
+    />
+  </div>
+</template>
+
+<script>
+import { createComputedSetterForItemField } from "@/field_utils.js";
+import TinyMceInline from "@/components/TinyMceInline";
+import TableOfContents from "@/components/TableOfContents";
+import CollectionList from "@/components/CollectionList";
+import FormattedRefcode from "@/components/FormattedRefcode";
+
+export default {
+  data() {
+    return {
+      tableOfContentsSections: [
+        { title: "Equipment Information", targetID: "equipment-information" },
+        { title: "Table of Contents", targetID: "table-of-contents" },
+      ],
+    };
+  },
+  props: {
+    item_id: String,
+  },
+  computed: {
+    item() {
+      return this.$store.state.all_item_data[this.item_id];
+    },
+    ItemDescription: createComputedSetterForItemField("description"),
+    Collections: createComputedSetterForItemField("collections"),
+    Manufacturer: createComputedSetterForItemField("manufacturer"),
+    Name: createComputedSetterForItemField("name"),
+    Location: createComputedSetterForItemField("location"),
+    Refcode: createComputedSetterForItemField("refcode"),
+    EquipmentDate: createComputedSetterForItemField("date"),
+    SerialNos: createComputedSetterForItemField("serial_numbers"),
+    Maintainers: createComputedSetterForItemField("creators"),
+  },
+  components: {
+    TinyMceInline,
+    CollectionList,
+    TableOfContents,
+    FormattedRefcode,
+  },
+};
+</script>
+
+<style scoped>
+label {
+  font-weight: 500;
+  color: #298651;
+}
+</style>
diff --git a/webapp/src/components/EquipmentTable.vue b/webapp/src/components/EquipmentTable.vue
new file mode 100644
index 000000000..76f47df3e
--- /dev/null
+++ b/webapp/src/components/EquipmentTable.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="isEquipmentFetchError" class="alert alert-danger">
+    <font-awesome-icon icon="exclamation-circle" />&nbsp;Server Error. Equipment list could not be
+    retreived.
+  </div>
+  <table class="table table-hover table-sm" data-testid="equipment-table">
+    <thead>
+      <tr>
+        <th scope="col">ID</th>
+        <th scope="col">Type</th>
+        <th scope="col">Name</th>
+        <th class="text-center" scope="col">Date created</th>
+        <th class="text-center" scope="col">Location</th>
+        <th class="text-center" scope="col"># of blocks</th>
+        <th scope="col"></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        :id="equipment.item_id"
+        v-for="equipment in equipments"
+        :key="equipment.item_id"
+        v-on:click.exact="goToEditPage(equipment.item_id)"
+        v-on:click.meta="openEditPageInNewTab(equipment.item_id)"
+        v-on:click.ctrl="openEditPageInNewTab(equipment.item_id)"
+      >
+        <td align="left" class="table-item-id">
+          <FormattedItemName
+            :item_id="equipment.item_id"
+            :itemType="equipment?.type"
+            enableModifiedClick
+          />
+        </td>
+        <td align="center">{{ itemTypes[equipment.type].display }}</td>
+        <td align="left">{{ equipment.name }}</td>
+        <td class="text-center">{{ $filters.IsoDatetimeToDate(equipment.date) }}</td>
+        <td class="left">{{ equipment.location }}</td>
+        <td align="center"><Creators :creators="equipment.creators" /></td>
+        <td class="text-right">{{ equipment.nblocks }}</td>
+        <td align="right">
+          <!--           <button
+            type="button"
+            class="close"
+            @click.stop="deleteEquipment(equipment)"
+            aria-label="delete"
+          >
+            <span aria-hidden="true" style="color: grey">&times;</span>
+          </button> -->
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+import FormattedItemName from "@/components/FormattedItemName";
+import Creators from "@/components/Creators";
+import { getEquipmentList } from "@/server_fetch_utils.js"; // deleteEquipment
+import { itemTypes } from "@/resources.js";
+
+export default {
+  data() {
+    return {
+      isEquipmentFetchError: false,
+      itemTypes: itemTypes,
+    };
+  },
+  computed: {
+    equipments() {
+      return this.$store.state.equipment_list;
+    },
+  },
+  methods: {
+    goToEditPage(item_id) {
+      this.$router.push(`/edit/${item_id}`);
+    },
+    openEditPageInNewTab(item_id) {
+      window.open(`/edit/${item_id}`, "_blank");
+    },
+    getEquipment() {
+      getEquipmentList().catch(() => {
+        this.isEquipmentFetchError = true;
+      });
+    },
+    // deleteEquipment(equipment) {
+    //   if (confirm(`Are you sure you want to delete equipment "${equipment.item_id}"?`)) {
+    //     console.log("deleting...");
+    //     deleteEquipment(equipment.item_id);
+    //   }
+    //   console.log("delete cancelled...");
+    // },
+  },
+  created() {
+    this.getEquipment();
+  },
+  components: {
+    FormattedItemName,
+    Creators,
+  },
+};
+</script>
+
+<style scoped>
+.clickable {
+  cursor: pointer;
+}
+</style>
diff --git a/webapp/src/components/FormattedItemName.ce.vue b/webapp/src/components/FormattedItemName.ce.vue
new file mode 100644
index 000000000..0e58505e9
--- /dev/null
+++ b/webapp/src/components/FormattedItemName.ce.vue
@@ -0,0 +1,97 @@
+<template>
+  <span v-if="item_id">
+    <span
+      class="badge badge-light mr-2"
+      :class="{ clickable: enableClick || enableModifiedClick }"
+      :style="{ backgroundColor: badgeColor }"
+      @click.exact="enableClick ? openEditPageInNewTab() : null"
+      @click.meta.stop="enableModifiedClick ? openEditPageInNewTab() : null"
+      @click.ctrl.stop="enableModifiedClick ? openEditPageInNewTab() : null"
+    >
+      {{ item_id }}
+    </span>
+    {{ shortenedName }}
+    <span v-if="chemform && chemform != ' '"> [ <ChemicalFormula :formula="chemform" /> ] </span>
+  </span>
+  <span v-else>
+    <!-- <font-awesome-icon v-if="selecting" :icon="['far', 'plus-square']" /> -->
+    {{ shortenedName }}
+  </span>
+</template>
+
+<script>
+import { itemTypes } from "@/resources.js";
+import ChemicalFormula from "@/components/ChemicalFormula.vue";
+
+export default {
+  props: {
+    item_id: String,
+    itemType: String,
+    selecting: {
+      type: Boolean,
+      default: false,
+    },
+    name: {
+      type: String,
+      default: null,
+    },
+    chemform: {
+      type: String,
+      default: null,
+    },
+    enableClick: {
+      type: Boolean,
+      default: false,
+    },
+    enableModifiedClick: {
+      type: Boolean,
+      default: false,
+    },
+    maxLength: {
+      type: Number,
+      default: NaN,
+    },
+  },
+  computed: {
+    badgeColor() {
+      return itemTypes[this.itemType]?.lightColor || "LightGrey";
+    },
+    shortenedName() {
+      if (this.maxLength && this.maxLength < this.name.length) {
+        return this.name.substring(0, this.maxLength) + "...";
+      } else {
+        return this.name || "";
+      }
+    },
+  },
+  methods: {
+    openEditPageInNewTab() {
+      this.$emit("itemIdClicked");
+      window.open(`/edit/${this.item_id}`, "_blank");
+    },
+  },
+  components: {
+    ChemicalFormula,
+  },
+  emits: ["itemIdClicked"],
+};
+</script>
+
+<style scoped>
+.clickable {
+  cursor: pointer;
+}
+
+.badge {
+  border: 2px solid transparent;
+}
+
+.mr-2 {
+  margin-right: 0.5rem !important;
+}
+
+.badge-light {
+  color: #212529;
+  /*  background-color: #f8f9fa;*/
+}
+</style>
diff --git a/webapp/src/components/Navbar.vue b/webapp/src/components/Navbar.vue
index 32cc867b8..90371aa1b 100644
--- a/webapp/src/components/Navbar.vue
+++ b/webapp/src/components/Navbar.vue
@@ -13,6 +13,8 @@
     <router-link to="/samples">Samples</router-link> |
     <router-link to="/collections">Collections</router-link> |
     <router-link to="/starting-materials">Inventory</router-link> |
+    <router-link to="/equipment">Equipment</router-link> |
+
     <router-link to="/item-graph"
       ><font-awesome-icon icon="project-diagram" />&nbsp;Graph View</router-link
     >
diff --git a/webapp/src/components/SampleTable.vue b/webapp/src/components/SampleTable.vue
index 88b71eacf..80094db60 100644
--- a/webapp/src/components/SampleTable.vue
+++ b/webapp/src/components/SampleTable.vue
@@ -33,7 +33,7 @@
             enableModifiedClick
           />
         </td>
-        <td aligh="center">{{ itemTypes[sample.type].display }}</td>
+        <td align="center">{{ itemTypes[sample.type].display }}</td>
         <td align="left">{{ sample.name }}</td>
         <td><ChemicalFormula :formula="sample.chemform" /></td>
         <td class="text-center">{{ $filters.IsoDatetimeToDate(sample.date) }}</td>
diff --git a/webapp/src/components/TinyMceInline.vue b/webapp/src/components/TinyMceInline.vue
index eeb5c7ab1..30c1113dd 100644
--- a/webapp/src/components/TinyMceInline.vue
+++ b/webapp/src/components/TinyMceInline.vue
@@ -8,13 +8,13 @@
       menubar: false,
       placeholder: 'Add a description',
       toolbar_location: 'bottom',
-      plugins: 'hr image link lists charmap table',
+      plugins: 'hr image link lists charmap table emoticons code',
       table_default_styles: {
         width: '50%',
         'margin-left': '1rem',
       },
       toolbar:
-        'bold italic underline strikethrough superscript subscript forecolor backcolor removeformat | 		alignleft aligncenter alignright | bullist numlist indent outdent | headergroup insertgroup | table',
+        'bold italic underline strikethrough superscript subscript forecolor backcolor removeformat |     alignleft aligncenter alignright | bullist numlist indent outdent | headergroup insertgroup | table | code',
       toolbar_groups: {
         formatgroup: {
           icon: 'format',
@@ -40,16 +40,81 @@
       },
       skin: false, // important so that skin is loaded correctly, oddly
       content_css: false, // ^ same
+      setup: editorSetupFunction,
+      extended_valid_elements: 'item-reference[*]',
+      custom_elements: 'item-reference',
     }"
   />
 </template>
 
 <script>
-// import {createComputedSetterForBlockField} from "@/field_utils.js"
+import tinymce from "tinymce/tinymce";
+// import FormattedItemName from "@/components/FormattedItemName.vue";
 
 export default {
   data: function () {
-    return { content: this.modelValue };
+    return {
+      content: this.modelValue,
+    };
+  },
+  methods: {
+    editorSetupFunction(editor) {
+      var specialChars = [
+        { text: "exclamation mark", value: "!" },
+        { text: "at", value: "@" },
+        { text: "hash", value: "#" },
+        { text: "dollars", value: "$" },
+        { text: "percent sign", value: "%" },
+        { text: "caret", value: "^" },
+        { text: "ampersand", value: "&" },
+        { text: "asterisk", value: "*" },
+      ];
+
+      var onAction = function (autocompleteApi, rng, value) {
+        // const formattedItemName = createApp(FormattedItemName, {
+        //   item_id: "test",
+        //   itemType: "samples",
+        //   name: value,
+        //   chemform: "H2O",
+        //   enableClick: true,
+        //   enableModifiedClick: true,
+        // });
+        // formattedItemName.mount(rng.startContainer);
+        editor.selection.setRng(rng);
+        console.log(value);
+        editor.insertContent(
+          "<item-reference item_id='test_id' chemform='H2O' item-type='samples'></item-reference>",
+        );
+        // editor.insertContent(value);
+        // autocompleteApi.hide();
+      };
+
+      var getMatchedChars = function (pattern) {
+        return specialChars.filter(function (char) {
+          return char.text.indexOf(pattern) !== -1;
+        });
+      };
+
+      editor.ui.registry.addAutocompleter("specialchars", {
+        ch: "@",
+        minChars: 1,
+        columns: "auto",
+        onAction: onAction,
+        fetch: function (pattern) {
+          return new tinymce.util.Promise(function (resolve) {
+            var results = getMatchedChars(pattern).map(function (char) {
+              return {
+                type: "autocompleteitem",
+                value: char.value,
+                text: char.text,
+                icon: char.value,
+              };
+            });
+            resolve(results);
+          });
+        },
+      });
+    },
   },
   props: ["modelValue", "placeholder"],
   emits: ["update:modelValue"],
@@ -74,11 +139,11 @@ export default {
 
 /* styles for the tables.. but they don't work in scoped*/
 /*table {
-	width: 50%;
-	margin-left: 1rem;
+  width: 50%;
+  margin-left: 1rem;
 }
 tbody tr:first-child {
-	font-weight: 600;
-	background-color: #edfff5;
+  font-weight: 600;
+  background-color: #edfff5;
 }*/
 </style>
diff --git a/webapp/src/components/datablocks/DataBlockBase.vue b/webapp/src/components/datablocks/DataBlockBase.vue
index af26591e9..ef556d384 100644
--- a/webapp/src/components/datablocks/DataBlockBase.vue
+++ b/webapp/src/components/datablocks/DataBlockBase.vue
@@ -67,7 +67,7 @@ export default {
     },
     blockType() {
       try {
-        return this.block["blockType"];
+        return this.block["blocktype"];
       } catch {
         return "Block type not found";
       }
diff --git a/webapp/src/main.js b/webapp/src/main.js
index 651d3dceb..93fc6cdcb 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -4,7 +4,7 @@ import "bootstrap/dist/css/bootstrap.css";
 // import 'bootstrap-vue/dist/bootstrap-vue.css'
 
 import { API_URL } from "@/resources.js";
-import { createApp } from "vue";
+import { createApp, defineCustomElement } from "vue";
 import App from "./App.vue";
 import router from "./router";
 
@@ -86,13 +86,15 @@ import "tinymce/themes/silver";
 import "tinymce/skins/ui/oxide/skin.min.css";
 import "tinymce/skins/ui/oxide/content.min.css";
 import "tinymce/skins/content/default/content.min.css";
-// import "tinymce/plugins/emoticons" // not working for some reason
 import "tinymce/plugins/hr";
 import "tinymce/plugins/image";
 import "tinymce/plugins/link";
 import "tinymce/plugins/lists";
 import "tinymce/plugins/charmap";
 import "tinymce/plugins/table";
+import "tinymce/plugins/emoticons";
+import "tinymce/plugins/emoticons/js/emojis";
+import "tinymce/plugins/code";
 
 // import "@uppy/vue"
 
@@ -105,6 +107,11 @@ import store from "./store";
 // css for vue-select
 import "vue-select/dist/vue-select.css";
 
+import FormattedItemName from "@/components/FormattedItemName.ce.vue";
+
+const FormattedItemNameWebComponent = defineCustomElement(FormattedItemName);
+customElements.define("item-reference", FormattedItemNameWebComponent);
+
 const app = createApp(App);
 
 app
diff --git a/webapp/src/resources.js b/webapp/src/resources.js
index e58607460..77d1a6522 100644
--- a/webapp/src/resources.js
+++ b/webapp/src/resources.js
@@ -15,6 +15,7 @@ import CellInformation from "@/components/CellInformation";
 import SampleCreateModalAddon from "@/components/itemCreateModalAddons/SampleCreateModalAddon";
 import CellCreateModalAddon from "@/components/itemCreateModalAddons/CellCreateModalAddon";
 import CollectionInformation from "@/components/CollectionInformation";
+import EquipmentInformation from "@/components/EquipmentInformation";
 
 // Look for values set in .env file. Use defaults if `null` is not explicitly handled elsewhere in the code.
 export const API_URL =
@@ -94,6 +95,14 @@ export const itemTypes = {
     isCreateable: false,
     display: "user",
   },
+  equipment: {
+    itemInformationComponent: EquipmentInformation,
+    navbarColor: "#c77c02",
+    navbarName: "Equipment",
+    lightColor: "#f7d6a1",
+    labelColor: "#c77c02",
+    display: "equipment",
+  },
 };
 
 export const cellFormats = {
diff --git a/webapp/src/router/index.js b/webapp/src/router/index.js
index ab371244f..4e4bc3558 100644
--- a/webapp/src/router/index.js
+++ b/webapp/src/router/index.js
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
 // import Home from '../views/Home.vue'
 // import Test from '../views/Test.vue'
 import Samples from "../views/Samples.vue";
+import Equipment from "../views/Equipment.vue";
 import SamplesNext from "../views/SamplesNext.vue";
 import StartingMaterials from "../views/StartingMaterials.vue";
 import StartingMaterialsNext from "../views/StartingMaterialsNext.vue";
@@ -29,6 +30,12 @@ const routes = [
     alias: "/",
     component: Samples,
   },
+  {
+    path: "/equipment",
+    name: "equipment",
+    alias: "/",
+    component: Equipment,
+  },
   { path: "/next/samples", name: "samples-next", alias: "/next", component: SamplesNext },
   {
     path: "/edit/:id",
diff --git a/webapp/src/server_fetch_utils.js b/webapp/src/server_fetch_utils.js
index 582bbb59a..530247cbb 100644
--- a/webapp/src/server_fetch_utils.js
+++ b/webapp/src/server_fetch_utils.js
@@ -116,7 +116,13 @@ export function createNewItem(
     console.log("received the following data from fetch new-sample:");
     console.log(response_json.sample_list_entry);
     console.log(`item_id: ${item_id}`);
-    store.commit("prependToSampleList", response_json.sample_list_entry);
+    const returned_type = response_json.sample_list_entry.type;
+    if (returned_type === "samples" || returned_type === "cells") {
+      store.commit("prependToSampleList", response_json.sample_list_entry);
+    }
+    if (returned_type === "equipment") {
+      store.commit("prependToEquipmentList", response_json.sample_list_entry);
+    }
     return "success";
   });
 }
@@ -214,6 +220,18 @@ export function getStartingMaterialList() {
     });
 }
 
+export function getEquipmentList() {
+  return fetch_get(`${API_URL}/equipment/`)
+    .then(function (response_json) {
+      store.commit("setEquipmentList", response_json.items);
+    })
+    .catch((error) => {
+      console.error("Error when fetching equipment list");
+      console.error(error);
+      throw error;
+    });
+}
+
 export function searchItems(query, nresults = 100, types = null) {
   // construct a url with parameters:
   var url = new URL(`${API_URL}/search-items/`);
diff --git a/webapp/src/store/index.js b/webapp/src/store/index.js
index 3ca5b2cfc..6b9ae3a3e 100644
--- a/webapp/src/store/index.js
+++ b/webapp/src/store/index.js
@@ -12,6 +12,7 @@ export default createStore({
     all_collection_children: {},
     all_collection_parents: {},
     sample_list: [],
+    equipment_list: [],
     starting_material_list: [],
     collection_list: [],
     saved_status_items: {},
@@ -39,6 +40,10 @@ export default createStore({
       // collectionSummaries is an array of json objects summarizing the available collections
       state.collection_list = collectionSummaries;
     },
+    setEquipmentList(state, equipmentSummaries) {
+      // equipmentSummary is an array of json objects summarizing the available samples
+      state.equipment_list = equipmentSummaries;
+    },
     appendToSampleList(state, sampleSummary) {
       // sampleSummary is a json object summarizing the new sample
       state.sample_list.push(sampleSummary);
@@ -47,6 +52,10 @@ export default createStore({
       // sampleSummary is a json object summarizing the new sample
       state.sample_list.unshift(sampleSummary);
     },
+    prependToEquipmentList(state, equipmentSummary) {
+      // sampleSummary is a json object summarizing the new sample
+      state.equipment_list.unshift(equipmentSummary);
+    },
     prependToCollectionList(state, collectionSummary) {
       // collectionSummary is a json object summarizing the new collection
       state.collection_list.unshift(collectionSummary);
diff --git a/webapp/src/views/Equipment.vue b/webapp/src/views/Equipment.vue
new file mode 100644
index 000000000..5ada3b28a
--- /dev/null
+++ b/webapp/src/views/Equipment.vue
@@ -0,0 +1,61 @@
+<template>
+  <Navbar />
+
+  <div id="tableContainer" class="container">
+    <div class="row">
+      <div class="col-sm-12 mx-auto mb-3">
+        <button class="btn btn-default" @click="createEquipmentModalIsOpen = true">
+          Add an item
+        </button>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm-12 mx-auto">
+        <EquipmentTable />
+      </div>
+    </div>
+  </div>
+  <CreateEquipmentModal v-model="createEquipmentModalIsOpen" />
+</template>
+
+<script>
+import Navbar from "@/components/Navbar";
+import EquipmentTable from "@/components/EquipmentTable";
+import CreateEquipmentModal from "@/components/CreateEquipmentModal";
+
+export default {
+  name: "Equipments",
+  data() {
+    return {
+      createEquipmentModalIsOpen: false,
+    };
+  },
+  components: {
+    Navbar,
+    EquipmentTable,
+    CreateEquipmentModal,
+  },
+};
+</script>
+
+<style scoped>
+.fade {
+  opacity: 0;
+  transition: opacity 0.15s linear;
+}
+.fade.show {
+  opacity: 1;
+}
+
+#tableContainer.overlay:after {
+  content: "";
+  display: block;
+  position: fixed; /* could also be absolute */
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+</style>
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 2578ee565..f93c1680e 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -1559,6 +1559,11 @@
   resolved "https://registry.yarnpkg.com/@one-ini/wasm/-/wasm-0.1.1.tgz#6013659736c9dbfccc96e8a9c2b3de317df39323"
   integrity sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==
 
+"@pkgr/core@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.0.tgz#7d8dacb7fdef0e4387caf7396cbd77f179867d06"
+  integrity sha512-Zwq5OCzuwJC2jwqmpEQt7Ds1DTi6BWSwoGkbb1n9pO3hzb35BoJELx7c0T23iDkBGkh2e7tvOtjF3tr3OaQHDQ==
+
 "@polka/url@^1.0.0-next.20":
   version "1.0.0-next.21"
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
@@ -5317,12 +5322,13 @@ eslint-plugin-cypress@^2.11.2:
   dependencies:
     globals "^13.20.0"
 
-eslint-plugin-prettier@^4.0.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"
-  integrity sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==
+eslint-plugin-prettier@^5.0.0:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz#17cfade9e732cef32b5f5be53bd4e07afd8e67e1"
+  integrity sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==
   dependencies:
     prettier-linter-helpers "^1.0.0"
+    synckit "^0.8.6"
 
 eslint-plugin-vue@^8.0.3:
   version "8.7.1"
@@ -9189,7 +9195,12 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-"prettier@^1.18.2 || ^2.0.0", prettier@^2.4.1:
+prettier@3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643"
+  integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==
+
+"prettier@^1.18.2 || ^2.0.0":
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
@@ -10375,6 +10386,14 @@ symbol-observable@^1.0.4:
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
 
+synckit@^0.8.6:
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.8.tgz#fe7fe446518e3d3d49f5e429f443cf08b6edfcd7"
+  integrity sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==
+  dependencies:
+    "@pkgr/core" "^0.1.0"
+    tslib "^2.6.2"
+
 table@^6.0.9:
   version "6.8.1"
   resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"
@@ -10598,6 +10617,11 @@ tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.1.tgz#fd8c9a0ff42590b25703c0acb3de3d3f4ede0410"
   integrity sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==
 
+tslib@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 tunnel-agent@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"