diff --git a/.forgejo/workflows/deploy_staging.yml b/.forgejo/workflows/deploy_staging.yml
index 3b44d24..0dccd66 100644
--- a/.forgejo/workflows/deploy_staging.yml
+++ b/.forgejo/workflows/deploy_staging.yml
@@ -20,9 +20,12 @@ jobs:
       - name: Run django tests
         working-directory: core
         run: python3 manage.py test
+      - name: Run django coverage
+        working-directory: core
+        run: coverage manage.py test
 
   deploy:
-    needs: [test]
+    needs: [ test ]
     runs-on: docker
     steps:
       - uses: actions/checkout@v4
diff --git a/core/inventory/migrations/0009_comment.py b/core/inventory/migrations/0009_comment.py
new file mode 100644
index 0000000..0a5f720
--- /dev/null
+++ b/core/inventory/migrations/0009_comment.py
@@ -0,0 +1,23 @@
+# Generated by Django 4.2.7 on 2024-11-22 22:02
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('inventory', '0008_alter_item_event_alter_itemplacement_container_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Comment',
+            fields=[
+                ('id', models.AutoField(primary_key=True, serialize=False)),
+                ('comment', models.TextField()),
+                ('timestamp', models.DateTimeField(auto_now_add=True)),
+                ('item', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='comments', to='inventory.item')),
+            ],
+        ),
+    ]
diff --git a/core/inventory/models.py b/core/inventory/models.py
index 46a38f0..fbbe0a9 100644
--- a/core/inventory/models.py
+++ b/core/inventory/models.py
@@ -1,7 +1,6 @@
 from itertools import groupby
 
-from django.core.files.base import ContentFile
-from django.db import models, IntegrityError
+from django.db import models
 from django_softdelete.models import SoftDeleteModel, SoftDeleteManager
 
 
diff --git a/core/mail/migrations/0007_alter_eventaddress_address.py b/core/mail/migrations/0007_alter_eventaddress_address.py
index 7b979a5..5d71449 100644
--- a/core/mail/migrations/0007_alter_eventaddress_address.py
+++ b/core/mail/migrations/0007_alter_eventaddress_address.py
@@ -1,4 +1,4 @@
-# Generated by Django 4.2.7 on 2024-11-18 01:50
+# Generated by Django 4.2.7 on 2024-11-22 18:57
 
 from django.db import migrations, models
 
diff --git a/core/tickets/tests/v2/test_tickets.py b/core/tickets/tests/v2/test_tickets.py
index d2101b5..8f72392 100644
--- a/core/tickets/tests/v2/test_tickets.py
+++ b/core/tickets/tests/v2/test_tickets.py
@@ -117,6 +117,7 @@ class IssueApiTest(TestCase):
         self.assertEqual(response.json()[0]['timeline'][5]['item']['description'], "foo")
         self.assertEqual(response.json()[0]['timeline'][5]['item']['event'], "evt")
         self.assertEqual(response.json()[0]['timeline'][5]['item']['box'], "box1")
+        self.assertEqual(len(response.json()[0]['related_items']), 1)
         self.assertEqual(response.json()[0]['related_items'][0]['description'], "foo")
         self.assertEqual(response.json()[0]['related_items'][0]['event'], "evt")
         self.assertEqual(response.json()[0]['related_items'][0]['box'], "box1")
@@ -313,16 +314,6 @@ class IssueApiTest(TestCase):
                                     content_type='application/json')
         self.assertEqual(response.status_code, 400)
 
-    # def test_post_comment(self):
-    #    issue = IssueThread.objects.create(
-    #        name="test issue",
-    #    )
-    #    response = self.client.post('/api/2/comments/', {'comment': 'test', 'issue_thread': issue.id})
-    #    self.assertEqual(response.status_code, 201)
-    #    self.assertEqual(response.json()['comment'], 'test')
-    #    self.assertEqual(response.json()['issue_thread'], issue.id)
-    #    self.assertEqual(response.json()['timestamp'], response.json()['timestamp'])
-
     def test_post_comment_altenative(self):
         issue = IssueThread.objects.create(
             name="test issue",
diff --git a/web/src/components/EditItem.vue b/web/src/components/EditItem.vue
index 9bea6f9..833bfd5 100644
--- a/web/src/components/EditItem.vue
+++ b/web/src/components/EditItem.vue
@@ -12,13 +12,16 @@
             field="description"
             :validation-fn="str => str && str.length > 0"
         />
-        <InputCombo
-            label="box"
-            :model="item"
-            nameKey="box"
-            uniqueKey="cid"
-            :options="boxes"
-        />
+        <div class="form-group">
+            <label for="box">box</label>
+            <InputCombo
+                label="box"
+                :model="item"
+                nameKey="box"
+                uniqueKey="cid"
+                :options="boxes"
+            />
+        </div>
     </div>
 </template>
 
diff --git a/web/src/components/ItemTimeline.vue b/web/src/components/ItemTimeline.vue
new file mode 100644
index 0000000..fcf20ca
--- /dev/null
+++ b/web/src/components/ItemTimeline.vue
@@ -0,0 +1,222 @@
+<template>
+    <ol class="timeline">
+        <li v-for="(item, index) in timeline" :key="index"
+            :class="{'timeline-item':true, 'extra-space': item.type === 'mail'}">
+            <span class="timeline-item-icon filled-icon" v-if="item.type === 'mail'">
+                <font-awesome-icon icon="envelope"/>
+            </span>
+            <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'comment'">
+                <font-awesome-icon icon="comment"/>
+            </span>
+            <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'state'"
+                  :class="'bg-' + stateInfo(item.state).color">
+                <font-awesome-icon :icon="stateInfo(item.state).icon"/>
+            </span>
+            <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'assignment'" :class="'bg-secondary'">
+                <font-awesome-icon icon="user"/>
+            </span>
+            <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'item_relation'">
+                <font-awesome-icon icon="object-group"/>
+            </span>
+            <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'shipping_voucher'">
+                <font-awesome-icon icon="truck"/>
+            </span>
+            <span class="timeline-item-icon faded-icon" v-else>
+                <font-awesome-icon icon="pen"/>
+            </span>
+            <TimelineMail v-if="item.type === 'mail'" :item="item"/>
+            <TimelineComment v-else-if="item.type === 'comment'" :item="item"/>
+            <TimelineStateChange v-else-if="item.type === 'state'" :item="item"/>
+            <TimelineAssignment v-else-if="item.type === 'assignment'" :item="item"/>
+            <TimelineRelatedItem v-else-if="item.type === 'item_relation'" :item="item"/>
+            <TimelineShippingVoucher v-else-if="item.type === 'shipping_voucher'" :item="item"/>
+            <p v-else>{{ item }}</p>
+        </li>
+        <li class="timeline-item">
+            <span class="timeline-item-icon | faded-icon">
+                <font-awesome-icon icon="comment"/>
+            </span>
+            <div class="new-comment card bg-dark">
+                <div class="">
+                    <textarea placeholder="add comment..." v-model="newComment" class="form-control">
+                    </textarea>
+                    <AsyncButton class="btn btn-primary float-right" :task="addCommentAndClear">
+                        <font-awesome-icon icon="comment"/>
+                        Save Comment
+                    </AsyncButton>
+                </div>
+            </div>
+        </li>
+    </ol>
+</template>
+
+<script>
+
+import TimelineMail from "@/components/TimelineMail.vue";
+import TimelineComment from "@/components/TimelineComment.vue";
+import TimelineStateChange from "@/components/TimelineStateChange.vue";
+import {mapActions, mapGetters} from "vuex";
+import TimelineAssignment from "@/components/TimelineAssignment.vue";
+import TimelineRelatedItem from "@/components/TimelineRelatedItem.vue";
+import TimelineShippingVoucher from "@/components/TimelineShippingVoucher.vue";
+import AsyncButton from "@/components/inputs/AsyncButton.vue";
+
+export default {
+    name: 'Timeline',
+    components: {
+        TimelineShippingVoucher, AsyncButton,
+        TimelineRelatedItem, TimelineAssignment, TimelineStateChange, TimelineComment, TimelineMail
+    },
+    props: {
+        timeline: {
+            type: Array,
+            default: () => []
+        }
+    },
+    emits: ['sendMail', 'addComment'],
+    data: () => ({
+        newMail: "",
+        newComment: ""
+    }),
+    computed: {
+        ...mapGetters(['stateInfo']),
+        newestMailSubject() {
+            const mail = this.timeline.filter(item => item.type === 'mail').pop();
+            return mail ? mail.subject : "";
+        },
+    },
+    methods: {
+        ...mapActions(['sendMail', 'postComment']),
+        sendMailAndClear: async function () {
+            await this.sendMail(this.newMail);
+            this.newMail = "";
+        },
+        addCommentAndClear: async function () {
+            await this.postComment(this.newComment);
+            this.newComment = "";
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+button,
+input,
+select,
+textarea {
+    font: inherit;
+}
+
+a {
+    color: inherit;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+}
+
+/* End basic CSS override */
+
+.timeline {
+    width: 85%;
+    display: flex;
+    flex-direction: column;
+    padding: 32px 0 32px 32px;
+    border-left: 2px solid var(--gray);
+    font-size: 1.125rem;
+    margin: 0 auto;
+}
+
+.timeline-item {
+    display: flex;
+    gap: 24px;
+
+    & + * {
+        margin-top: 24px;
+    }
+
+    & + .extra-space {
+        margin-top: 48px;
+    }
+}
+
+.new-comment, .new-mail {
+    width: 100%;
+
+    textarea, input {
+        border: 1px solid var(--gray);
+        border-radius: 6px;
+        height: 5em;
+        padding: 8px 16px;
+
+        &::placeholder {
+            color: var(--gray-dark);
+        }
+
+        &:focus {
+            border-color: var(--gray-dark);
+            outline: 0; /* Don't actually do this */
+            box-shadow: 0 0 0 4px var(--dark);
+        }
+    }
+}
+
+.timeline-item-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    margin-left: -57px;
+    flex-shrink: 0;
+    overflow: hidden;
+
+    svg {
+        width: 20px;
+        height: 20px;
+    }
+
+    &.faded-icon {
+        background-color: var(--secondary);
+        color: var(--light);
+    }
+
+    &.filled-icon {
+        background-color: var(--primary);
+        color: var(--light);
+    }
+}
+
+
+.button {
+    border: 0;
+    display: inline-flex;
+    vertical-align: middle;
+    margin-right: 4px;
+    margin-top: 12px;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    height: 32px;
+    padding: 0 8px;
+    background-color: var(--dark);
+    flex-shrink: 0;
+    cursor: pointer;
+    border-radius: 99em;
+
+    &:hover {
+        background-color: var(--gray);
+    }
+}
+
+
+</style>
\ No newline at end of file
diff --git a/web/src/components/inputs/InputCombo.vue b/web/src/components/inputs/InputCombo.vue
index 50b5459..9a2c5fc 100644
--- a/web/src/components/inputs/InputCombo.vue
+++ b/web/src/components/inputs/InputCombo.vue
@@ -1,6 +1,4 @@
 <template>
-    <div class="form-group">
-        <label :for="label">{{ label }}</label>
         <div class="input-group">
             <div class="input-group-prepend">
                 <button
@@ -34,7 +32,6 @@
             </div>
             <Addon type="Combo Box" :is-valid="isValid"/>
         </div>
-    </div>
 </template>
 
 <script>
diff --git a/web/src/router.js b/web/src/router.js
index e82611e..c97ef3e 100644
--- a/web/src/router.js
+++ b/web/src/router.js
@@ -18,6 +18,7 @@ import Settings from "@/views/admin/Settings.vue";
 import AccessControl from "@/views/admin/AccessControl.vue";
 import {default as BoxesAdmin} from "@/views/admin/Boxes.vue"
 import Shipping from "@/views/admin/Shipping.vue";
+import Item from "@/views/Item.vue";
 import Notifications from "@/views/admin/Notifications.vue";
 
 const routes = [
@@ -30,7 +31,7 @@ const routes = [
             {requiresAuth: true, requiresPermission: 'view_item'}
     },
     {
-        path: '/:event/item/:uid/', name: 'item', component: Items, meta:
+        path: '/:event/item/:id/', name: 'item', component: Item, meta:
             {requiresAuth: true, requiresPermission: 'view_item'}
     },
     {
diff --git a/web/src/store.js b/web/src/store.js
index 87b13a5..e64f2b0 100644
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -151,13 +151,11 @@ const store = createStore({
         setItems(state, {slug, items}) {
             state.loadedItems[slug] = items;
             state.loadedItems = {...state.loadedItems};
-            console.log(state.loadedItems)
         },
         replaceItems(state, items) {
             const groups = Object.groupBy(items, i => i.event ? i.event : 'none')
             for (const [key, value] of Object.entries(groups)) state.loadedItems[key] = value;
             state.loadedItems = {...state.loadedItems};
-            console.log(state.loadedItems)
         },
         updateItem(state, updatedItem) {
             const item = state.loadedItems[updatedItem.event ? updatedItem.event : 'none'].filter(
@@ -173,13 +171,11 @@ const store = createStore({
         setTickets(state, {slug, tickets}) {
             state.loadedTickets[slug] = tickets;
             state.loadedTickets = {...state.loadedTickets};
-            console.log(state.loadedTickets)
         },
         replaceTickets(state, tickets) {
             const groups = Object.groupBy(tickets, t => t.event ? t.event : 'none')
             for (const [key, value] of Object.entries(groups)) state.loadedTickets[key] = value;
             state.loadedTickets = {...state.loadedTickets};
-            console.log(state.loadedTickets)
         },
         updateTicket(state, updatedTicket) {
             const ticket = state.loadedTickets[updatedTicket.event ? updatedTicket.event : 'none'].filter(
diff --git a/web/src/views/Item.vue b/web/src/views/Item.vue
new file mode 100644
index 0000000..5318bb9
--- /dev/null
+++ b/web/src/views/Item.vue
@@ -0,0 +1,134 @@
+<template>
+    <AsyncLoader :loaded="!!item.id">
+        <div class="container-fluid px-xl-5 mt-3">
+            <div class="row">
+                <div class="col-xl-8 offset-xl-2">
+                    <div class="card bg-dark text-light mb-2" id="filters">
+                        <div class="card-header">
+                            <h3>Item #{{ item.id }} - {{ item.description }}</h3>
+                        </div>
+                        <div>
+                            {{ item }}
+                        </div>
+                        <ItemTimeline :timeline="item.timeline" @sendMail="handleMail" @addComment="handleComment"/>
+                        <div class="card-footer d-flex justify-content-between">
+                            <button class="btn btn-secondary mr-2" @click="$router.go(-1)">Back</button>
+                            <div class="btn-group">
+                                <button class="btn btn-outline-success"
+                                        @click.stop="confirm('return Item?') && markItemReturned(item)"
+                                        title="returned">
+                                    <font-awesome-icon icon="check"/>
+                                </button>
+                                <button class="btn btn-outline-secondary" @click.stop="openEditingModalWith(item)"
+                                        title="edit">
+                                    <font-awesome-icon icon="edit"/>
+                                </button>
+                                <button class="btn btn-outline-danger"
+                                        @click.stop="confirm('delete Item?') && deleteItem(item)"
+                                        title="delete">
+                                    <font-awesome-icon icon="trash"/>
+                                </button>
+                            </div>
+
+                            <InputCombo
+                                label="box"
+                                :model="item"
+                                nameKey="box"
+                                uniqueKey="cid"
+                                :options="boxes"
+                            />
+                            <div class="btn-group">
+                                <select class="form-control" v-model="selected_state">
+                                    <option v-for="status in state_options" :value="status.value">{{
+                                            status.text
+                                        }}
+                                    </option>
+                                </select>
+                                <button class="form-control btn btn-success"
+                                        @click="changeTicketStatus(item)"
+                                        :disabled="(selected_state == item.state)">
+                                    Change&nbsp;Status
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </AsyncLoader>
+</template>
+
+<script>
+import {mapActions, mapGetters, mapState} from 'vuex';
+import ItemTimeline from "@/components/ItemTimeline.vue";
+import ClipboardButton from "@/components/inputs/ClipboardButton.vue";
+import AsyncLoader from "@/components/AsyncLoader.vue";
+import InputCombo from "@/components/inputs/InputCombo.vue";
+import InputString from "@/components/inputs/InputString.vue";
+
+export default {
+    name: 'Item',
+    components: {InputString, InputCombo, AsyncLoader, ClipboardButton, ItemTimeline},
+    data() {
+        return {
+            selected_state: null,
+            selected_assignee: null,
+            shipping_voucher_type: null,
+        }
+    },
+    computed: {
+        ...mapState(['state_options', 'users']),
+        ...mapGetters(['availableShippingVoucherTypes', 'getAllItems', 'route', 'getBoxes']),
+        item() {
+            const id = parseInt(this.route.params.id)
+            const ret = this.getAllItems.find(item => item.id === id);
+            return ret ? ret : {};
+        },
+        boxes() {
+            console.log(this.getBoxes);
+            return this.getBoxes.map(obj => ({cid: obj.cid, box: obj.name}));
+        }
+    },
+    methods: {
+        ...mapActions(['deleteItem', 'markItemReturned', 'sendMail', 'updateTicketPartial', 'postComment']),
+        ...mapActions(['loadTickets', 'fetchTicketStates', 'loadUsers', 'scheduleAfterInit']),
+        ...mapActions(['claimShippingVoucher', 'fetchShippingVouchers', 'loadEventItems', 'loadBoxes']),
+        handleMail(mail) {
+            this.sendMail({
+                id: this.item.id,
+                message: mail
+            })
+        },
+        handleComment(comment) {
+            this.postComment({
+                id: this.item.id,
+                message: comment
+            })
+        },
+        changeTicketStatus(item) {
+            item.state = this.selected_state;
+            this.updateTicketPartial({
+                id: item.id,
+                state: this.selected_state,
+            })
+        },
+        //assignTicket(item) {
+        //    item.assigned_to = this.selected_assignee;
+        //    this.updateTicketPartial({
+        //        id: item.id,
+        //        assigned_to: this.selected_assignee
+        //    })
+        //},
+    },
+    mounted() {
+        this.scheduleAfterInit(() => [Promise.all([this.loadEventItems(), this.loadBoxes()]).then(() => {
+            this.selected_state = this.item.state;
+            this.selected_assignee = this.item.assigned_to
+        })]);
+    }
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/web/src/views/Items.vue b/web/src/views/Items.vue
index 2f9e5ed..e3ba0a0 100644
--- a/web/src/views/Items.vue
+++ b/web/src/views/Items.vue
@@ -20,7 +20,7 @@
                         :columns="['uid', 'description', 'box']"
                         :items="getEventItems"
                         :keyName="'uid'"
-                        @itemActivated="openLightboxModalWith($event)"
+                        @itemActivated="showItemDetail"
                     >
                         <template #actions="{ item }">
                             <div class="btn-group">
@@ -47,7 +47,7 @@
                 :items="getEventItems"
                 :keyName="'uid'"
                 v-slot="{ item }"
-                @itemActivated="openLightboxModalWith($event)"
+                @itemActivated="showItemDetail"
             >
                 <AuthenticatedImage v-if="item.file" cached
                                     :src="`/media/2/256/${item.file}/`"
@@ -88,6 +88,7 @@ import {mapActions, mapGetters, mapState} from 'vuex';
 import Lightbox from '../components/Lightbox';
 import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
 import AsyncLoader from "@/components/AsyncLoader.vue";
+import router from "@/router";
 
 export default {
     name: 'Items',
@@ -102,6 +103,9 @@ export default {
     },
     methods: {
         ...mapActions(['deleteItem', 'markItemReturned', 'loadEventItems', 'updateItem', 'scheduleAfterInit']),
+        showItemDetail(item) {
+            router.push({name: 'item', params: {id: item.id}});
+        },
         openLightboxModalWith(item) {
             this.lightboxHash = item.file;
         },