diff --git a/core/tickets/serializers.py b/core/tickets/serializers.py
index 00acff6..897fdf8 100644
--- a/core/tickets/serializers.py
+++ b/core/tickets/serializers.py
@@ -127,7 +127,8 @@ class IssueSerializer(serializers.ModelSerializer):
                 'type': 'shipping_code',
                 'id': shipping_code.id,
                 'timestamp': shipping_code.used_at,
-                'code': ShippingCodeSerializer(shipping_code).data,
+                'code': shipping_code.code,
+                'code_type': shipping_code.type,
             })
         return sorted(timeline, key=lambda x: x['timestamp'])
 
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 0dcb2bb..c9ad60f 100644
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -50,6 +50,15 @@ const store = createStore({
 
         showAddBoxModal: false,
         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,
@@ -497,6 +506,7 @@ const store = createStore({
                 "loadedItems",
                 "messageTemplates",
                 "messageTemplatesVariables",
+                "shippingCodes",
             ],
             watch: [
                 "test",
@@ -509,6 +519,7 @@ const store = createStore({
                 "loadedItems",
                 "messageTemplates",
                 "messageTemplatesVariables",
+                "shippingCodes",
             ],
             mutations: [
                 //"replaceTickets",
diff --git a/web/src/views/admin/Shipping.vue b/web/src/views/admin/Shipping.vue
index 227dfe8..20d7341 100644
--- a/web/src/views/admin/Shipping.vue
+++ b/web/src/views/admin/Shipping.vue
@@ -1,42 +1,36 @@
 <template>
     <div>
         <h3>Shipping Codes</h3>
-        <ul>
-            <li v-for="code in shippingCodes" :key="code.code">
-                <span v-if="code.issue_thread == null">{{ code.type }} - {{ code.code }}</span>
-                <span v-else><s>{{ code.type }} - {{ code.code }}</s> <a
-                    :href="'/'+ getEventSlug + '/ticket/' + code.issue_thread">Issue</a></span>
-            </li>
-        </ul>
-        <!--Table
-            :columns="['type', 'code']"
-            :items="shippingCodes"
-            :keyName="'code'"
-        >
-            <template #actions="{ item }">
-                <div class="btn-group">
-                    <button class="btn btn-secondary" @click.stop="alert(item)">
-                        <font-awesome-icon icon="archive"/>
-                        use
-                    </button>
-                    <button class="btn btn-danger" @click.stop="">
-                        <font-awesome-icon icon="trash"/>
-                        delete
-                    </button>
-                </div>
-            </template>
-        </Table-->
+        <div class="mt-3">
+            <h5>Shipping Code Types</h5>
+            <span v-for="(type, key) in availableShippingCodeTypes()" :key="key" class="mr-2">
+                <span v-if="type.count > 2" class="badge badge-success">{{ type.name }} - {{ type.count }}</span>
+                <span v-else-if="type.count > 0" class="badge badge-warning" v-if="type.count > 0">
+                    {{ type.name }} - {{ type.count }}
+                </span>
+                <span v-else class="badge badge-danger">{{ type.name }}</span>
+            </span>
+        </div>
+        <div class="mt-3">
+            <h5>Available Shipping Codes</h5>
+            <ul>
+                <li v-for="code in shippingCodes" :key="code.code">
+                    <span v-if="code.issue_thread == null">{{ code.type }} - {{ code.code }}</span>
+                    <span v-else><s style="color:var(--danger)">{{ code.type }} - {{ code.code }}</s> use in <a
+                        :href="'/'+ getEventSlug + '/ticket/' + code.issue_thread">#{{ code.issue_thread }}</a></span>
+                </li>
+            </ul>
+        </div>
         <div class="mt-3">
             <textarea class="form-control mb-3" rows="5" placeholder="Shipping Code List" v-model="bulk_codes"
                       v-if="bulk"></textarea>
             <div class="input-group">
                 <input type="text" class="form-control" placeholder="Shipping Code" v-model="code" v-if="!bulk">
                 <select class="form-control" v-model="type">
-                    <option value="2kg-de">2kg DE</option>
-                    <option value="2kg-eu">2kg EU</option>
-                    <option value="5kg-de">5kg DE</option>
-                    <option value="5kg-eu">5kg EU</option>
-                    <option value="10kg-de">10kg DE</option>
+                    <option v-for="it in Object.keys(shippingCodeTypes)" :value="it">{{
+                            shippingCodeTypes[it]
+                        }}
+                    </option>
                 </select>
                 <div class="input-group-prepend">
                     <div class="input-group-text">
@@ -69,25 +63,34 @@ export default {
         };
     },
     computed: {
-        ...mapState(['shippingCodes']),
+        ...mapState(['shippingCodes', 'shippingCodeTypes']),
         ...mapGetters(['getEventSlug']),
     },
     methods: {
         ...mapActions(['fetchShippingCodes', 'createShippingCode']),
         createSingleOrBulkShippingCode() {
             if (this.bulk) {
-                const jobs = this.bulk_codes.split('\n').map(code => {
-                    return this.createShippingCode({code: code.trim(), type: this.type});
-                });
-                Promise.all(jobs).then(() => {
-                    this.bulk_codes = '';
-                });
+                const list = this.bulk_codes.split('\n');
+                if (confirm('Are you sure you want to add ' + list.length + ' shipping codes as ' + this.type + '?')) {
+                    const jobs = list.map(code => {
+                        return this.createShippingCode({code: code.trim(), type: this.type});
+                    });
+                    Promise.all(jobs).then(() => {
+                        this.bulk_codes = '';
+                    });
+                }
             } else {
                 this.createShippingCode({code: this.code, type: this.type}).then(() => {
                     this.code = '';
                 });
             }
         },
+        availableShippingCodeTypes() {
+            return Object.keys(this.shippingCodeTypes).map(key => {
+                var count = this.shippingCodes.filter(code => code.type === key && code.issue_thread === null).length;
+                return {id: key, count: count, name: this.shippingCodeTypes[key]};
+            });
+        },
     },
     mounted() {
         this.fetchShippingCodes();