diff --git a/src/server/backend/api/getHandler.js b/src/server/backend/api/getHandler.js
index 6a2c646..d827f95 100644
--- a/src/server/backend/api/getHandler.js
+++ b/src/server/backend/api/getHandler.js
@@ -30,10 +30,9 @@ class GETHandler {
                 if ( query.event ) {
                     db.getJSONDataSimple( 'booked', query.event ).then( data => {
                         db.getDataSimple( 'temp', 'user_id', session.id ).then( dat => {
-                            resolve( { 'booked': data ?? {}, 'user': dat[ 0 ] ? JSON.parse( dat[ 0 ].data )[ query.event ] ?? {} : {} } );
+                            resolve( { 'booked': data ? data.booked : {}, 'user': dat[ 0 ] ? JSON.parse( dat[ 0 ].data )[ query.event ] ?? {} : {} } );
                         } );
                     } ).catch( error => {
-                        console.error( error );
                         reject( { 'code': 500, 'message': error } );
                     } );
                 } else {
diff --git a/src/server/backend/api/postHandler.js b/src/server/backend/api/postHandler.js
index fd4e4c4..14a3f45 100644
--- a/src/server/backend/api/postHandler.js
+++ b/src/server/backend/api/postHandler.js
@@ -12,6 +12,7 @@ const db = require( '../db/db.js' );
 class POSTHandler {
     constructor () {
         this.allSelectedSeats = { 'TestEvent2': [ { 'id': 'secAr1s1', 'component': 1 } ] };
+        this.ticketTotals = {};
     }
 
     // Add lang in the future
diff --git a/src/webapp/main/src/App.vue b/src/webapp/main/src/App.vue
index 5aa67d0..77a8f44 100644
--- a/src/webapp/main/src/App.vue
+++ b/src/webapp/main/src/App.vue
@@ -183,7 +183,7 @@ export default {
         // } else if ( window.webpage.engine.presto ) {
         //     alert( 'Welcome! We have detected that you are a very old version of Opera or related browser. As a modern webapp, libreevent does only support modern browsers. If you run into issues whilst using this webapp, please switch to a modern browser, like Firefox.' )
         // }
-        this.theme = localStorage.getItem( 'theme' ) ? localStorage.getItem( 'theme' ) : '';
+        this.theme = localStorage.getItem( 'theme' ) ?? '';
         if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || this.theme === '☼' ) {
             document.documentElement.classList.add( 'dark' );
             this.theme = '☼';
diff --git a/src/webapp/main/src/components/noseatplan.vue b/src/webapp/main/src/components/noseatplan.vue
index b1a6aad..ffbb499 100644
--- a/src/webapp/main/src/components/noseatplan.vue
+++ b/src/webapp/main/src/components/noseatplan.vue
@@ -65,6 +65,7 @@ export default {
             } else {
                 this.cartHandling( 'select', this.tickets[ id ], option );
             }
+            // TODO: make call to server to reserve ticket
         },
         cartHandling ( operation, data, option ) {
             if ( operation === 'select' ) {
@@ -99,6 +100,7 @@ export default {
                     }
                 }
             }
+            // TODO: Make call to server to deselect ticket
         },
         loadTickets () {
             // TODO: Load from server
diff --git a/src/webapp/main/src/components/seatplan.vue b/src/webapp/main/src/components/seatplan.vue
deleted file mode 100644
index 124cd92..0000000
--- a/src/webapp/main/src/components/seatplan.vue
+++ /dev/null
@@ -1,379 +0,0 @@
-<template>
-    <div class="seatingWrapper">
-        <div class="sidebar">
-            <h2>{{ eventInfo.name }}</h2>
-            <h3>{{ eventInfo.date }}</h3>
-            <h3>{{ eventInfo.location }}</h3>
-            <h3>Selected tickets</h3>
-            <table class="price-table" v-for="event in selectedSeats">
-                <tr v-if="Object.keys( event.selectedSeats ).length">
-                    <h4>{{ event.name }}</h4>
-                </tr>
-                <tr v-for="ticket in event.selectedSeats">
-                    <td>{{ ticket.name }} ({{ ticket.ageGroup }})</td>
-                    <td>{{ eventInfo[ 'currency' ] }} {{ ticket[ 'price' ] }}</td>
-                </tr>
-            </table>
-            <h3>Total: {{ eventInfo[ 'currency' ] }} {{ total }}</h3>
-            <router-link to="/cart">To cart</router-link>
-        </div>
-        <div class="seatingPlan">
-            <h3>Seating plan</h3>
-            <p>{{ eventInfo.RoomName }}</p>
-            <p class="stage" v-if="eventInfo.stage">Stage</p>
-            <div class="seating">
-                <table>
-                    <tr v-for="row in seating">
-                        <td>
-                            {{ row.name }}
-                        </td>
-                        <td v-for="place in row.content">
-                            <div :class="place.category" class="active" v-if="place.available" @click="selectSeat( place.id, row.id )">
-                                <div v-if="place.selected" :title="row.name + ', ' + place.name + ' is currently selected, click to deselect'">
-                                    <span class="material-symbols-outlined">done</span>
-                                </div>
-                                <div v-else :title="row.name + ', ' + place.name + ' is not currently selected, click to select'">
-                                    <span class="material-symbols-outlined">living</span>
-                                </div>
-                            </div>
-                            <div v-else class="occupied">
-                                <span class="material-symbols-outlined">close</span>
-                            </div>
-                        </td>
-                    </tr>
-                </table>
-            </div>
-        </div>
-        <div class="overlay" id="overlay">
-            <div class="popup">
-                <div class="popup-content">
-                    <div class="close-container">
-                        <span class="material-symbols-outlined close-button" @click="closePopup()">close</span>
-                    </div>
-                    <div class="popup-content-wrapper">
-                        <h3>Choose a ticket option</h3>
-                        <ul v-for="group in eventInfo.ageGroups">
-                            <li @click="storeSeat( group.id )" class="option">{{ group.name }} <i v-if="group.age">(0 - 15.99 years)</i> - {{ eventInfo.currency }} {{ pricingCurrentlySelected[ group.id ] }}</li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="overlay" id="placeNotAvailable">
-            <div class="popup">
-                <div class="popup-content">
-                    <div class="close-container">
-                        <span class="material-symbols-outlined close-button" @click="closePlaceNotAvailablePopup()">close</span>
-                    </div>
-                    <div class="popup-content-wrapper">
-                        <h3>One or more seat(s) you have previously selected is/are no longer available!</h3>
-                        <p>Please select another one!</p>
-                        <button class="button" @click="closePlaceNotAvailablePopup()">Ok</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'seatplan',
-    props: {
-        ticketID: String
-    },
-    data () {
-        return {
-            seating: { 'r1': { 'name': 'Row 1', 'id': 'r1', 'content':{ 'S1':{ 'name': 'Seat 1', 'id': 'S1', 'available': true, 'selected': false, 'category':'1' } } }, 'r2': { 'name': 'Row 2', 'id': 'r2', 'content':{ 'S1':{ 'name': 'S1', 'id': 'S1', 'available': true, 'selected': false, 'category':'2' } } } },
-            eventInfo: { 'name': 'TestEvent2', 'location': 'TestLocation2', 'date': 'TestDate2', 'RoomName': 'TestRoom2', 'currency': 'CHF', 'categories': { '1': { 'price': { '1':25, '2':35 }, 'bg': 'black', 'fg': 'white', 'name': 'Category 1' }, '2': { 'price': { '1':15, '2':20 }, 'bg': 'green', 'fg': 'white', 'name': 'Category 2' } }, 'ageGroups': { '1':{ 'id': 1, 'name':'Child', 'age':'0 - 15.99' }, '2':{ 'id': 2, 'name': 'Adult', 'age': null } }, 'ageGroupCount': 2, 'stage': true, 'maxTickets': 2 },
-            selectedSeats: {},
-            pricingCurrentlySelected: {},
-            total: 0,
-        }
-    },
-    methods: {
-        loadPreviouslySelected () {
-            /* 
-                This function is called whenever the data on the webpage is to be reloaded
-            */
-            
-            // load data from cart and set up cart if not available
-            let cart = sessionStorage.getItem( 'cart' ) ? JSON.parse( sessionStorage.getItem( 'cart' ) ) : {};
-            cart[ this.ticketID ?? 'default' ] = cart[ this.ticketID ?? 'default' ] ? cart[ this.ticketID ?? 'default' ] : { 'name': this.eventInfo.name, 'date': this.eventInfo.date, 'location': this.eventInfo.location, 'currency': this.eventInfo.currency };
-            cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] ? cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] : {};
-            
-            let data = cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] ? cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] : {};
-            
-            let showError = false
-            for ( let i in data ) {
-                if ( this.seating[ data[ i ][ 'row' ] ][ 'content' ][ data[ i ][ 'seat' ] ][ 'available' ] ) {
-                    this.seating[ data[ i ][ 'row' ] ][ 'content' ][ data[ i ][ 'seat' ] ][ 'selected' ] = true;
-                } else {
-                    showError = true;
-                    delete data[ i ];
-                }
-            }
-            
-            if ( showError ) {
-                setTimeout( function () {
-                    $( '#placeNotAvailable' ).show( 200 );
-                    console.log( 'showing error message' );
-                }, 500 );
-            }
-
-            // check if no ticket selected and prevent writing if no ticket
-            // selected to not show too many events
-            let isEmpty = sessionStorage.getItem( 'selectedTicket' ) ? false : true;
-            
-            if ( !isEmpty ) {
-                cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = data;
-                sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
-            }
-            
-            this.selectedSeats = cart;
-            this.sumUp();
-        },
-        sumUp () {
-            // This function calculates the total price of the tickets for this event.
-            let cart = sessionStorage.getItem( 'cart' ) ? JSON.parse( sessionStorage.getItem( 'cart' ) ) : {};
-            
-            let price = 0;
-            for ( let i in cart ) {
-                for ( let entry in cart[ i ][ 'selectedSeats' ] ) {
-                    price += parseInt( cart[ i ][ 'selectedSeats' ][ entry ][ 'price' ] );
-                }
-            }
-            
-            let back = {};
-
-            back[ 'total' ] = price;
-            back[ 'currency' ] = this.eventInfo.currency;
-
-            this.total = price;
-            
-
-            // check if no ticket selected and prevent writing if no ticket
-            // selected to not show too many events
-            let isEmpty = sessionStorage.getItem( 'selectedTicket' ) ? false : true;
-
-            if ( !isEmpty ) {
-                sessionStorage.setItem( 'backend', JSON.stringify( back ) );            
-                sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
-            }
-        },
-        closePlaceNotAvailablePopup () {
-            $( '#placeNotAvailable' ).hide( 300 );
-        },
-        selectSeat( placeID, rowID ) {
-            /* 
-                This function allows the user to select a seat and deselect it, if it has previously
-                been selected.
-            */
-            sessionStorage.setItem( 'tempStorage', JSON.stringify( { 1:[ placeID, rowID ] } ) );
-            let cart = sessionStorage.getItem( 'cart' ) ? JSON.parse( sessionStorage.getItem( 'cart' ) ) : {};
-            cart[ this.ticketID ?? 'default' ] = cart[ this.ticketID ?? 'default' ] ? cart[ this.ticketID ?? 'default' ] : {};
-            cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] ? cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] : {};
-            
-            let data = cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] ? cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] : {};
-
-            let isDeleting = false;
-                        
-            for ( let i in data ) {
-                if ( data[ i ][ 'seat' ] == placeID && data[ i ][ 'row' ] == rowID ) {
-                    delete data[ i ];
-                    isDeleting = true;
-                }
-            }
-            
-            this.seating[ rowID ][ 'content' ][ placeID ][ 'selected' ] = !isDeleting;
-            
-            if ( isDeleting ) {
-                cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = data;
-                sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
-                this.selectedSeats = cart;
-                this.sumUp();
-            } else {
-                if ( this.eventInfo.ageGroupCount > 1 ) {
-                    $( '#overlay' ).show( 200 );
-                } else {
-                    this.storeSeat( '1' );
-                }
-            }
-
-            this.pricingCurrentlySelected = this.eventInfo[ 'categories' ][ this.seating[ rowID ][ 'content' ][ placeID ][ 'category' ] ][ 'price' ];
-        },
-        closePopup () {
-            // This function closes the popup and sets the seat to not selected
-            $( '#overlay' ).hide( 200 );
-            let seat = JSON.parse( sessionStorage.getItem( 'tempStorage' ) );
-            this.seating[ seat[ 1 ][ 1 ] ][ 'content' ][ seat[ 1 ][ 0 ] ][ 'selected' ] = false;
-        },
-        storeSeat( ticketOption ) {
-            /* 
-                This function stores a ticket into the event's selected seat sessionStorage.
-            */
-
-            let cart = sessionStorage.getItem( 'cart' ) ? JSON.parse( sessionStorage.getItem( 'cart' ) ) : {};
-            cart[ this.ticketID ?? 'default' ] = cart[ this.ticketID ?? 'default' ] ? cart[ this.ticketID ?? 'default' ] : { 'name': this.eventInfo.name, 'date': this.eventInfo.date, 'location': this.eventInfo.location, 'currency': this.eventInfo.currency };
-            cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] ? cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] : {};
-
-            let data = cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] ? cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] : {};
-
-            let seat = JSON.parse( sessionStorage.getItem( 'tempStorage' ) );
-
-            let ticket = this.seating[ seat[ 1 ][ 1 ] ][ 'content' ][ seat[ 1 ][ 0 ] ];
-            let ticketData = { 'name': ticket[ 'name' ], 'categoryID': ticketOption, 'category': this.eventInfo[ 'categories' ][ ticket[ 'category' ] ], 'price': this.eventInfo[ 'categories' ][ this.seating[ seat[ 1 ][ 1 ] ][ 'content' ][ seat[ 1 ][ 0 ] ][ 'category' ] ][ 'price' ][ ticketOption ], 'row':seat[ 1 ][ 1 ], 'seat':seat[ 1 ][ 0 ], 'ageGroup': this.eventInfo[ 'ageGroups' ][ ticketOption ][ 'name' ] };
-            data[ String( seat[ 1 ][ 1 ] ) + String( seat[ 1 ][ 0 ] ) ] = ticketData;
-
-            cart[ this.ticketID ?? 'default' ][ 'selectedSeats' ] = data;
-
-            
-            sessionStorage.setItem( 'cart', JSON.stringify( cart ) );
-            $( '#overlay' ).hide( 200 );
-            this.selectedSeats = cart;
-            this.sumUp();
-        },
-    },
-    created() {
-        this.loadPreviouslySelected();
-    }
-}
-</script>
-
-<style scoped>
-    .seatingWrapper {
-        display: grid;
-        grid-template-areas:
-        'main main main sidebar'
-        'main main main sidebar'
-        'main main main sidebar'
-        'main main main sidebar'
-        'main main main sidebar'
-        'main main main sidebar'
-        'main main main sidebar'
-        'main main main sidebar'
-        'main main main sidebar';
-        height: 100%;
-    }
-
-    .sidebar {
-        grid-area: sidebar;
-        background-color: var( --accent-background );
-        color: var( --secondary-color );
-        overflow: scroll;
-    }
-
-    .seatingPlan {
-        grid-area: main;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: justify;
-        overflow: scroll;
-    }
-
-    .active {
-        cursor: pointer;
-    }
-
-    .occupied {
-        background-color: var( --hover-color );
-        padding: 0.4%;
-    }
-
-    .overlay {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: var( --overlay-color );
-        height: 100%;
-        width: 100%;
-    }
-
-    .popup {
-        height: 100%;
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .popup-content {
-        background-color: var( --background-color );
-        height: 60%;
-        width: 50%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: flex-start;
-        border-radius: 50px;
-    }
-
-    .popup-content-wrapper {
-        display: flex;
-        height: 90%;
-        width: 100%;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        overflow: scroll;
-    }
-
-    .close-container {
-        width: 100%;
-        display: flex;
-        justify-content: flex-end;
-    }
-    .close-button {
-        cursor: pointer;
-        margin-right: 3vh;
-        margin-top: 3vh;
-    }
-
-    .option {
-        list-style: none;
-        padding: 7px 15px;
-        border-radius: 10px;
-        border-color: var( --primary-color );
-        border-style: solid;
-        border-width: 1px;
-        margin: 3px 0px;
-        cursor: pointer;
-    }
-
-    .stage {
-        border-color: var( --primary-color );
-        border-style: solid;
-        width: 80%;
-        height: 7%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .button {
-        background-color: var( --accent-background );
-        color: var( --secondary-color );
-        font-weight: bold;
-        font-size: 110%;
-        border-radius: 20px;
-        border-style: none;
-        padding: 10px 40px;
-        transition: 0.6s;
-    }
-
-    .button:hover {
-        background-color: var( --accent-background-hover );
-        transition: 0.3s;
-        cursor: pointer;
-    }
-
-    .price-table {
-        width: 100%;
-    }
-</style>
diff --git a/src/webapp/main/src/components/seatplan/userApp/userWindow.vue b/src/webapp/main/src/components/seatplan/userApp/userWindow.vue
index 0aa1cc5..a638b6f 100644
--- a/src/webapp/main/src/components/seatplan/userApp/userWindow.vue
+++ b/src/webapp/main/src/components/seatplan/userApp/userWindow.vue
@@ -299,10 +299,14 @@
 
                 if ( this.cart[ this.event.name ] ) {
                     let tickets = this.cart[ this.event.name ][ 'tickets' ];
-                    for ( let ticket in tickets ) {
-                        this.draggables[ tickets[ ticket ].comp ][ 'data' ][ 'unavailableSeats' ][ ticket ] = 'sel';
+                    for ( let seat in tickets ) {
+                        if ( !unavailableSeats[ data.user[ seat ].component ] ) {
+                            unavailableSeats[ data.reserved[ seat ].component ] = {};
+                        }
+                        unavailableSeats[ tickets[ seat ].component ][ tickets[ seat ].id ] = 'sel';
                     }
                 }
+
             },
             scaleUp ( valueArray ) {
                 const allowedAttributes = [ 'w', 'h', 'x', 'y' ];
@@ -433,23 +437,51 @@
                 if ( !this.cart[ this.event.name ] ) {
                     this.cart[ this.event.name ] = { 'displayName': this.event.name, 'tickets': {} };
                 }
-
+                
                 for ( let group in data.data ) {
                     if ( !this.cart[ this.event.name ][ 'tickets' ][ 'ticket' + data.component + '_' + group ] ) {
                         if ( data.data[ group ] > 0 ) {
-                            this.cart[ this.event.name ][ 'tickets' ][ 'ticket' + data.component + '_' + group ] = { 'displayName': 'Ticket ' + data.component + ' (' + this.event.ageGroups[ group ].name + ')', 'price': this.event.categories[ this.draggables[ data.component ].category ].price[ group ], 'id': 'ticket' + data.component + '_' + group, 'count': data.data[ group ], 'comp': data.component };
+                            const options = {
+                                method: 'post',
+                                body: JSON.stringify( { 'id': 'ticket' + data.component + '_' + group, 'component': data.component, 'ticketOption': '', 'eventID': this.event.name, 'count': data.data[ group ] } ),
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    'charset': 'utf-8'
+                                }
+                            };
+                            fetch( localStorage.getItem( 'url' ) + '/API/reserveTicket', options ).then( res => {
+                                if ( res.status === 200 ) {
+                                    this.cart[ this.event.name ][ 'tickets' ][ 'ticket' + data.component + '_' + group ] = { 'displayName': 'Ticket ' + data.component + ' (' + this.event.ageGroups[ group ].name + ')', 'price': this.event.categories[ this.draggables[ data.component ].category ].price[ group ], 'id': 'ticket' + data.component + '_' + group, 'count': data.data[ group ], 'comp': data.component };
+                                } else if ( res.status === 409 ) {
+                                    setTimeout( () => {
+                                        this.$refs.popups.openPopup( 'Unfortunately, the seat you just tried to select was reserved by somebody else since the last time the seat plan was refreshed. Please select another one. We are sorry for the inconvenience.', {}, 'string' );
+                                    }, 300 );
+                                }
+                                if ( Object.keys( this.cart[ this.event.name ][ 'tickets' ] ).length < 1 ) {
+                                    delete this.cart[ this.event.name ];
+                                }
+
+                                this.$refs.cart.calculateTotal();
+                                localStorage.setItem( 'cart', JSON.stringify( this.cart ) );
+                            } );
                         } else {
                             delete this.cart[ this.event.name ][ 'tickets' ][ 'ticket' + data.component + '_' + group ];
+                            const options = {
+                                method: 'post',
+                                body: JSON.stringify( { 'id': 'ticket' + data.component + '_' + group, 'eventID': this.event.name } ),
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    'charset': 'utf-8'
+                                }
+                            };
+                            fetch( localStorage.getItem( 'url' ) + '/API/deselectTicket', options ).then( res => {
+                                res.text().then( text => {
+                                    console.log( text );
+                                } );
+                            } );
                         }
                     }
                 }
-                // TODO: Make call to server to reserve ticket
-                if ( Object.keys( this.cart[ this.event.name ][ 'tickets' ] ).length < 1 ) {
-                    delete this.cart[ this.event.name ];
-                }
-
-                this.$refs.cart.calculateTotal();
-                localStorage.setItem( 'cart', JSON.stringify( this.cart ) );
             }
         },
         created () {
diff --git a/src/webapp/main/src/views/purchasing/TicketsOrderingView.vue b/src/webapp/main/src/views/purchasing/TicketsOrderingView.vue
index bdec675..3fd788d 100644
--- a/src/webapp/main/src/views/purchasing/TicketsOrderingView.vue
+++ b/src/webapp/main/src/views/purchasing/TicketsOrderingView.vue
@@ -59,9 +59,6 @@
                 this.$router.push( '/tickets' );
             }
             this.eventID = sessionStorage.getItem( 'selectedTicket' );
-            // if ( this.eventID == 'test2' ) {
-            //     this.hasSeatplan = false;
-            // }
         }
     };
 </script>