diff --git a/web/src/components/CollapsableCards.vue b/web/src/components/CollapsableCards.vue
index 554a960..c91420d 100644
--- a/web/src/components/CollapsableCards.vue
+++ b/web/src/components/CollapsableCards.vue
@@ -73,23 +73,15 @@ export default {
     data() {
         return {
             collapsed: [],
-            symbols: ['▲', '▼', '▶', '◀'],
         };
     },
     created() {
-        const query = this.$router.currentRoute ? (this.$router.currentRoute.query ? this.$router.currentRoute.query.collapsed : null) : null;
+        const query = this.route ? (this.route.query ? this.route.query.collapsed : null) : null;
         if (query !== null && query !== undefined) {
             this.collapsed = this.unpackInt(parseInt(query), this.sections.length);
         } else {
             this.collapsed = this.sections.map(() => true);
         }
-
-        //this.$router.push({...this.$router.currentRoute, query: {...this.$router.currentRoute.query, layout}});
-        //this.collapsed = this.sections.map(() => true);
-        /*this.columns.map(e => ({
-            k: e,
-            v: this.$store.getters.getFilters[e]
-        })).filter(e => e.v).forEach(e => this.setFilter(e.k, e.v));*/
     },
     computed: {
         grouped_items() {
@@ -116,8 +108,8 @@ export default {
                 const encoded = this.packInt(this.collapsed).toString()
                 if (this.route.query.collapsed !== encoded)
                     this.$router.push({
-                        ...this.$router.currentRoute,
-                        query: {...this.$router.currentRoute.query, collapsed: encoded}
+                        ...this.route,
+                        query: {...this.route.query, collapsed: encoded}
                     });
             },
             deep: true,
diff --git a/web/src/components/ExpandableTable.vue b/web/src/components/ExpandableTable.vue
new file mode 100644
index 0000000..6bd5175
--- /dev/null
+++ b/web/src/components/ExpandableTable.vue
@@ -0,0 +1,124 @@
+<template>
+    <table class="table table-striped table-dark">
+        <thead>
+        <tr>
+            <th>
+            </th>
+            <th scope="col" v-for="(column, index) in columns" :key="index">
+                <div class="input-group">
+                    <div class="input-group-prepend">
+                        <button
+                            :class="[ 'btn', column === sortBy ? 'btn-outline-info' : 'btn-outline-secondary' ]"
+                            @click="toggleSort(column)"
+                        >
+                            {{ column }}
+                            <span :class="{ 'text-info': column === sortBy }">
+                                    <font-awesome-icon :icon="getSortIcon(column)"/>
+                                </span>
+                        </button>
+                    </div>
+                    <input
+                        type="text"
+                        class="form-control"
+                        placeholder="filter"
+                        :value="filters[column]"
+                        @input="changeFilter(column, $event.target.value)"
+                    >
+                </div>
+            </th>
+            <th>
+                <slot name="header_actions"/>
+            </th>
+        </tr>
+        </thead>
+        <tbody v-for="(item, index) in internalItems" :key="item[keyName]" style="border-top: none">
+        <tr @click="toggle(index)">
+            <td>
+                <font-awesome-icon icon="angle-right" style="width: 1em;" v-if="collapsed[index]"/>
+                <font-awesome-icon icon="angle-down" style="width: 1em;" v-else/>
+            </td>
+            <td v-for="(column, index) in columns" :key="index">{{ item[column] }}</td>
+            <td>
+                <slot v-bind:id="index" v-bind:item="item" name="actions"/>
+            </td>
+        </tr>
+        <tr v-if="!collapsed[index]">
+            <td :colspan="columns.length + 2">
+                <slot v-bind:id="index" v-bind:item="item" name="detail"/>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</template>
+
+<script>
+import DataContainer from '@/mixins/data-container';
+import router from '../router';
+import {mapGetters} from "vuex";
+
+export default {
+    name: 'ExpandableTable',
+    mixins: [DataContainer],
+    created() {
+        this.columns.map(e => ({
+            k: e,
+            v: this.$store.getters.getFilters[e]
+        })).filter(e => e.v).forEach(e => this.setFilter(e.k, e.v));
+
+        const query = this.route ? (this.route.query ? this.route.query.collapsed : null) : null;
+        if (query !== null && query !== undefined) {
+            this.collapsed = this.unpackInt(parseInt(query), this.internalItems.length);
+        } else {
+            this.collapsed = this.internalItems.map(() => true);
+        }
+    },
+    data() {
+        return {
+            collapsed: [],
+        };
+    },
+    computed: {
+        ...mapGetters(['route']),
+    },
+    methods: {
+        changeFilter(col, val) {
+            this.setFilter(col, val);
+            let newquery = Object.entries({
+                ...this.$store.getters.getFilters,
+                [col]: val
+            }).reduce((a, [k, v]) => (v ? {...a, [k]: v} : a), {});
+            router.push({query: newquery});
+        },
+        packInt(arr) {
+            return arr.reduce((a, e, i) => a + (e ? 0 : 2 ** i), 0);
+        },
+        unpackInt(n, l) {
+            return [...Array(l)].map((e, i) => (n & 2 ** i) === 0);
+        },
+        toggle(index) {
+            const collapsed = [...this.collapsed]
+            collapsed[index] = !collapsed[index];
+            this.collapsed = collapsed;
+        },
+    },
+    watch: {
+        collapsed: {
+            handler() {
+                const encoded = this.packInt(this.collapsed).toString()
+                if (this.route.query.collapsed !== encoded)
+                    this.$router.push({
+                        ...this.route,
+                        query: {...this.route.query, collapsed: encoded}
+                    });
+            },
+            deep: true,
+        },
+    },
+};
+</script>
+
+<style>
+.table-body-move {
+    transition: transform 1s;
+}
+</style>
\ No newline at end of file
diff --git a/web/src/store.js b/web/src/store.js
index 9ab6504..87b13a5 100644
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -359,6 +359,13 @@ const store = createStore({
                 commit('replaceEvents', [...state.events.filter(e => e.eid !== event_id)])
             }
         },
+        async updateEvent({commit, dispatch, state}, {id, partial_event}){
+            console.log(id, partial_event);
+            const {data, success} = await http.patch(`/2/events/${id}/`, partial_event, state.user.token);
+            if (success) {
+                commit('replaceEvents', [...state.events.filter(e => e.eid !== id), data])
+            }
+        },
         async fetchTicketStates({commit, state, getters}) {
             if (!state.user.token) return;
             if (state.fetchedData.states > Date.now() - 1000 * 60 * 60 * 24) return;
diff --git a/web/src/views/admin/Events.vue b/web/src/views/admin/Events.vue
index 1aab608..e2ff952 100644
--- a/web/src/views/admin/Events.vue
+++ b/web/src/views/admin/Events.vue
@@ -1,50 +1,102 @@
 <template>
-    <Table
-        :columns="['slug', 'name']"
-        :items="events"
-        :keyName="'slug'"
-    >
-        <template v-slot:header_actions>
-            <button class="btn btn-success" @click.prevent="openAddEventModal">
-                <font-awesome-icon icon="plus"/>
-                Create Event
-            </button>
-        </template>
-        <template v-slot:actions="{ item }">
-            <div class="btn-group">
-                <button class="btn btn-secondary" @click.stop="changeEvent(item)">
-                    <font-awesome-icon icon="archive"/>
-                    use
+    <AsyncLoader :loaded="events.length > 0">
+        <ExpandableTable v-if="!!events" :columns="['slug', 'name']" :items="events" :keyName="'slug'">
+            <template v-slot:header_actions>
+                <button class="btn btn-success" @click.prevent="openAddEventModal">
+                    <font-awesome-icon icon="plus"/>
+                    Create Event
                 </button>
-                <button class="btn btn-danger" @click.stop="safeDeleteEvent(item.eid)">
-                    <font-awesome-icon icon="trash"/>
-                    delete
-                </button>
-            </div>
-        </template>
-    </Table>
+            </template>
+            <template v-slot:actions="{ item }">
+                <div class="btn-group">
+                    <button class="btn btn-secondary" @click.stop="changeEvent(item)" style="white-space: nowrap;">
+                        <font-awesome-icon icon="archive"/>&nbsp;use
+                    </button>
+                    <button class="btn btn-danger" @click.stop="safeDeleteEvent(item.eid)" style="white-space: nowrap;">
+                        <font-awesome-icon icon="trash"/>&nbsp;delete
+                    </button>
+                </div>
+            </template>
+            <template v-slot:detail="{id, item }">
+                <div class="row">
+                    <div class="col">
+                        <input type="date" class="form-control form-control-sm" title="Buildup Start"
+                               v-model="item.pre_start" disabled style="opacity: 1"
+                               :max="item.start" @focus="prepare_date_field">
+                    </div>
+                    <div class="col">
+                        <input type="date" class="form-control form-control-sm" title="Official Event Start"
+                               v-model="item.start" disabled style="opacity: 1"
+                               :min="item.pre_start" :max="item.end" @focus="prepare_date_field">
+                    </div>
+                    <div class="col">
+                        <input type="date" class="form-control form-control-sm" title="Official Event End"
+                               v-model="item.end" disabled style="opacity: 1"
+                               :min="item.start" :max="item.post_end" @focus="prepare_date_field">
+                    </div>
+                    <div class="col">
+                        <input type="date" class="form-control form-control-sm" title="Teardown End"
+                               v-model="item.post_end" disabled style="opacity: 1"
+                               :min="item.end" @focus="prepare_date_field">
+                    </div>
+                </div>
+                <div class="mt-3">
+                    <label class="mr-3">Addresses: </label>
+                    <div v-for="(address, a_id) in item.addresses" class="btn-group btn-group-sm mr-3"
+                         @click.stop="deleteAddress(id, a_id)">
+                        <button class="btn btn-secondary" disabled style="opacity: 1">
+                            {{ address }}
+                        </button>
+                        <button class="btn btn-danger">
+                            <font-awesome-icon icon="trash"/>
+                        </button>
+                    </div>
+                    <div class="btn-group btn-group-sm">
+                        <input type="text" v-model="new_address[id]">
+                        <button class="btn btn-secondary" @click.stop="addAddress(id)" style="white-space: nowrap;">
+                            <font-awesome-icon icon="envelope"/>&nbsp;add
+                        </button>
+                    </div>
+                </div>
+            </template>
+        </ExpandableTable>
+    </AsyncLoader>
 </template>
 
 <script>
 import {mapActions, mapMutations, mapState} from 'vuex';
-import Table from '@/components/Table';
+import ExpandableTable from "@/components/ExpandableTable.vue";
+import AsyncLoader from "@/components/AsyncLoader.vue";
 
 export default {
     name: 'Events',
-    components: {Table},
+    components: {AsyncLoader, ExpandableTable},
     computed: mapState(['events']),
+    data() {
+        return {new_address: []}
+    },
     methods: {
-        ...mapActions(['changeEvent', 'deleteEvent']),
+        ...mapActions(['changeEvent', 'deleteEvent', 'updateEvent']),
         ...mapMutations(['openAddEventModal']),
         safeDeleteEvent(id) {
             if (confirm('do you want to completely delete this event and related data?')) {
                 this.deleteEvent(id)
             }
         },
+        addAddress(id) {
+            const a = this.new_address[id];
+            if (!this.events[id].addresses.includes(a))
+                this.events[id].addresses.push(a)
+            this.new_address[id] = ""
+            this.updateEvent({id: this.events[id].eid, partial_event: {addresses: this.events[id].addresses}});
+        },
+        deleteAddress(id, a_id) {
+            this.events[id].addresses = this.events[id].addresses.filter((e, i) => i !== a_id);
+            this.updateEvent({id: this.events[id].eid, partial_event: {addresses: this.events[id].addresses}});
+        }
     },
 };
 </script>
 
 <style scoped>
-
 </style>
\ No newline at end of file