diff --git a/web/src/components/CollapsableCards.vue b/web/src/components/CollapsableCards.vue
index 14f0bc9..de09afe 100644
--- a/web/src/components/CollapsableCards.vue
+++ b/web/src/components/CollapsableCards.vue
@@ -47,7 +47,6 @@
 </template>
 
 <script>
-import router from '../router';
 
 export default {
     name: 'CollapsableCards',
@@ -76,7 +75,15 @@ export default {
         };
     },
     created() {
-        this.collapsed = this.sections.map(() => true);
+        const query = this.$router.currentRoute.query.collapsed;
+        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]
@@ -85,21 +92,31 @@ export default {
     computed: {
         grouped_items() {
             return this.sections.map(section => this.items.filter(item => item[this.keyName] === section.slug));
-        }
+        },
+
     },
     methods: {
-        toggle(index) {
-            this.collapsed[index] = !this.collapsed[index];
-            this.$forceUpdate();
+        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.$router.currentRoute.query.collapsed !== encoded)
+                    this.$router.push({...this.$router.currentRoute, query: {...this.$router.currentRoute.query, collapsed: encoded}});
+            },
+            deep: true,
         },
-        /*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});
-        },*/
     },
 };
 </script>
diff --git a/web/src/components/Navbar.vue b/web/src/components/Navbar.vue
index 0acf387..46b4ff8 100644
--- a/web/src/components/Navbar.vue
+++ b/web/src/components/Navbar.vue
@@ -123,6 +123,7 @@ export default {
     },
     methods: {
         ...mapActions(['changeEvent', 'changeView', 'searchEventItems']),
+        ...mapMutations(['logout']),
         navigateTo(link) {
             if (this.$router.currentRoute.path !== link)
                 this.$router.push(link);
diff --git a/web/src/components/TimelineMail.vue b/web/src/components/TimelineMail.vue
index 8033805..0c0f6f7 100644
--- a/web/src/components/TimelineMail.vue
+++ b/web/src/components/TimelineMail.vue
@@ -87,7 +87,6 @@ export default {
     methods: {
         openLightboxModalWith(attachment) {
             this.lightboxHash = attachment.hash;
-            console.log(this.lightboxHash);
         },
         closeLightboxModal() { // Closes the editing modal and discards the edited copy of the item.
             this.lightboxHash = null;
diff --git a/web/src/components/inputs/InputPhoto.vue b/web/src/components/inputs/InputPhoto.vue
index 5b022d5..e50033b 100644
--- a/web/src/components/inputs/InputPhoto.vue
+++ b/web/src/components/inputs/InputPhoto.vue
@@ -3,7 +3,7 @@
         <img
             v-if="!capturing"
             class="img-fluid rounded mx-auto d-block mb-3 img-preview"
-            :src="dataImage || `https://c3lf.de/api/1/thumbs/${model[field]}`"
+            :src="dataImage"
             alt="Image not available."
         />
         <video
@@ -108,11 +108,23 @@ export default {
                 });
                 console.log('Error: ', error);
             };
+        },
+        loadImage() {
+            this.fetchImage('/media/2/' + this.model[this.field] + '/').then((response) => {
+                const mime_type = response.headers.get("content-type");
+                response.arrayBuffer().then((buf) => {
+                    const base64 = btoa(new Uint8Array(buf)
+                        .reduce((data, byte) => data + String.fromCharCode(byte), ""));
+                    this.dataImage = "data:" + mime_type + ";base64," + base64;
+                });
+            })
         }
     },
     mounted() {
         if (!this.model[this.field])
             this.openStream();
+        else
+            this.loadImage();
     },
     beforeDestroy() {
         this.closeStream();