diff --git a/web/src/components/TimelineShippingCode.vue b/web/src/components/TimelineShippingCode.vue
new file mode 100644
index 0000000..9f5ef02
--- /dev/null
+++ b/web/src/components/TimelineShippingCode.vue
@@ -0,0 +1,110 @@
+<template>
+    <div class="timeline-item-description">
+        <i class="avatar | small">
+            <font-awesome-icon icon="user"/>
+        </i>
+        <!--span><a href="#">$USER</a> has changed state to <span
+            class="badge badge-pill badge-primary" :class="'bg-' + colorLookup">{{ lookupState.text }}</span> at <time
+            :datetime="timestamp">{{ timestamp }}</time>
+        </span-->
+        {{item}}
+    </div>
+</template>
+
+<script>
+
+import {mapState} from "vuex";
+
+export default {
+    name: 'TimelineShippingCode',
+    props: {
+        'item': {
+            type: Object,
+            required: true
+        }
+    },
+    computed: {
+        ...mapState(['state_options']),
+        lookupState: function () {
+            try {
+                if (this.item.state)
+                    return this.state_options.find(state => state.value === this.item.state);
+            } catch (e) {
+            }
+            return {
+                text: 'Unknown',
+                value: 'unknown'
+            };
+        },
+        colorLookup: function () {
+            if (this.item.state.startsWith('closed_')) {
+                return 'secondary';
+            } else if (this.item.state.startsWith('pending_')) {
+                return 'warning';
+            } else if (this.item.state.startsWith('waiting_')) {
+                return 'primary';
+            } else {
+                return 'danger';
+            }
+        },
+        'timestamp': function () {
+            return new Date(this.item.timestamp).toLocaleString();
+        },
+
+    }
+};
+</script>
+
+<style scoped>
+
+
+a {
+    color: inherit;
+}
+
+
+.timeline-item-description {
+    display: flex;
+    padding-top: 6px;
+    gap: 8px;
+    color: var(--gray);
+
+    img {
+        flex-shrink: 0;
+    }
+
+    a {
+        /*color: var(--c-grey-500);*/
+        font-weight: 500;
+        text-decoration: none;
+
+        &:hover,
+        &:focus {
+            outline: 0; /* Don't actually do this */
+            color: var(--info);
+        }
+    }
+}
+
+.avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    overflow: hidden;
+    aspect-ratio: 1 / 1;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+
+    &.small {
+        width: 28px;
+        height: 28px;
+    }
+
+    img {
+        object-fit: cover;
+    }
+}
+
+</style>
\ No newline at end of file
diff --git a/web/src/store.js b/web/src/store.js
index 78178e6..e21456d 100644
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -60,6 +60,15 @@ const store = createStore({
             '10kg-eu': '10kg Paket (EU)',
         },
         test: ['foo', 'bar', 'baz'],
+
+        shippingCodeTypes: {
+            '2kg-de': '2kg Paket (DE)',
+            '5kg-de': '5kg Paket (DE)',
+            '10kg-de': '10kg Paket (DE)',
+            '2kg-eu': '2kg Paket (EU)',
+            '5kg-eu': '5kg Paket (EU)',
+            '10kg-eu': '10kg Paket (EU)',
+        }
     },
     getters: {
         route: state => router.currentRoute.value,