diff --git a/src/webapp/src/components/seatplan/userApp/seatplanComponents/seats/circular.vue b/src/webapp/src/components/seatplan/userApp/seatplanComponents/seats/circular.vue
index 4904f51..21a3e56 100644
--- a/src/webapp/src/components/seatplan/userApp/seatplanComponents/seats/circular.vue
+++ b/src/webapp/src/components/seatplan/userApp/seatplanComponents/seats/circular.vue
@@ -10,7 +10,14 @@
 <template>
     <div id="circularSeatplan">
         <div v-for="row in seats">
-            <span class="material-symbols-outlined seats" v-for="seat in row" :style="seat.style">living</span>
+            <div class="seats" v-for="seat in row" :style="seat.style" :id="seat.id">
+                <span class="material-symbols-outlined" :style="seat.scaling" @click="selectSeat( seat.row, seat.seat )" v-if="seat.status == 'av'" 
+                :title="seat.displayName + ', Available'">living</span>
+                <span class="material-symbols-outlined" :style="seat.scaling" v-else-if="seat.status == 'nav'"
+                :title="seat.displayName + ', Unavailable'">close</span>
+                <span class="material-symbols-outlined" :style="seat.scaling" v-else-if="seat.status == 'sel'"
+                :title="seat.displayName + ', Selected'">done</span>
+            </div>
         </div>
     </div>
 </template>
@@ -45,9 +52,9 @@ export default {
             type: Number,
             "default": 1,
         },
-        id: {
-            type: Number,
-            "default": 1
+        data: {
+            type: Object,
+            "default": { 'sector': 'A', 'sectorCount': 1, 'unavailableSeats': { 'secAr0s0': true } }
         }
     },
     data () {
@@ -64,26 +71,25 @@ export default {
             const size = 33;
             let count = Math.min( Math.floor( w / size ), Math.floor( h / size ) );
             this.seats = {};
-            let details = { 'data': {}, 'id': this.id };
             for ( let row = this.startingRow; row < count; row++ ) {
                 let nn = row * ( Math.PI / 2 );
-                details.data[ row ] = Math.floor( nn );
                 let r = row * size;
                 this.seats[ row ] = {};
                 for ( let n = 0; n < nn; n++ ) {
+                    this.seats[ row ][ n ] = { 'style': '', 'id': 'sec' + this.data.sector + 'r' + row + 's' + n, 'displayName': ( this.data.sectorCount > 1 ? 'Sector ' + this.data.sector + ', ' : '' ) + 'Row ' + ( row + 1 ) + ', Seat ' + ( n + 1 ), 'status': 'av', 'row': row, 'seat': n };
                     let phi = n * size / ( row * size );
                     if ( this.origin === 1 ) {
-                        this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; bottom: ${ r * Math.cos( phi ) * this.scaleFactor }px; left: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ phi }rad` };
+                        this.seats[ row ][ n ][ 'style' ] = `bottom: ${ r * Math.cos( phi ) * this.scaleFactor }px; left: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ phi }rad`;
                     } else if ( this.origin === 2 ) {
-                        this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; bottom: ${ r * Math.cos( phi ) * this.scaleFactor }px; right: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ Math.PI * 2 - phi }rad` };
+                        this.seats[ row ][ n ][ 'style' ] = `bottom: ${ r * Math.cos( phi ) * this.scaleFactor }px; right: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ Math.PI * 2 - phi }rad`;
                     } else if ( this.origin === 3 ) {
-                        this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; top: ${ r * Math.cos( phi ) * this.scaleFactor }px; right: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ phi + Math.PI }rad` };
+                        this.seats[ row ][ n ][ 'style' ] = `top: ${ r * Math.cos( phi ) * this.scaleFactor }px; right: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ phi + Math.PI }rad`;
                     } else if ( this.origin === 4 ) {
-                        this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; top: ${ r * Math.cos( phi ) * this.scaleFactor }px; left: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ Math.PI - phi }rad` };
+                        this.seats[ row ][ n ][ 'style' ] = `top: ${ r * Math.cos( phi ) * this.scaleFactor }px; left: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ Math.PI - phi }rad`;
                     }
+                    this.seats[ row ][ n ][ 'scaling' ] = `font-size: ${this.scaleFactor * 200}%; `;
                 }
             }
-            this.$emit( 'seatingInfo', details );
         },
         setScaleFactor () {
             for ( let row in this.seats ) {
@@ -92,6 +98,9 @@ export default {
                     this.seats[ row ][ seat ].style = `font-size: ${this.scaleFactor * 200}%;` + styles;
                 }
             }
+        },
+        selectSeat ( row, seat ) {
+            console.log( row + ' ' + seat );
         }
     },
     watch: {
diff --git a/src/webapp/src/components/seatplan/userApp/seatplanComponents/seats/rectangular.vue b/src/webapp/src/components/seatplan/userApp/seatplanComponents/seats/rectangular.vue
index 68adb99..1ee7fa1 100644
--- a/src/webapp/src/components/seatplan/userApp/seatplanComponents/seats/rectangular.vue
+++ b/src/webapp/src/components/seatplan/userApp/seatplanComponents/seats/rectangular.vue
@@ -10,7 +10,14 @@
 <template>
     <div id="rectangularSeatplan">
         <div v-for="row in seats" class="rows">
-            <span class="material-symbols-outlined seats" v-for="seat in row" :style="seat.style" @click="selectSeat( seat.id )">living</span>
+            <div class="seats" v-for="seat in row" :style="seat.style" :id="seat.id">
+                <span class="material-symbols-outlined" :style="seat.scaling" @click="selectSeat( seat.row, seat.seat )" v-if="seat.status == 'av'" 
+                :title="seat.displayName + ', Available'">living</span>
+                <span class="material-symbols-outlined" :style="seat.scaling" v-else-if="seat.status == 'nav'"
+                :title="seat.displayName + ', Unavailable'">close</span>
+                <span class="material-symbols-outlined" :style="seat.scaling" v-else-if="seat.status == 'sel'"
+                :title="seat.displayName + ', Selected'">done</span>
+            </div>
         </div>
     </div>
 </template>
@@ -41,9 +48,9 @@ export default {
             type: Number,
             "default": 1,
         },
-        id: {
-            type: Number,
-            "default": 1
+        data: {
+            type: Object,
+            "default": { 'sector': 'A', 'sectorCount': 1, 'unavailableSeats': { 'secAr0s0': true } }
         }
     },
     data () {
@@ -62,14 +69,22 @@ export default {
             for ( let row = 0; row < Math.floor( h / size ); row++ ) {
                 this.seats[ row ] = {};
                 for ( let n = 0; n < Math.floor( w / size ); n++ ) {
+                    this.seats[ row ][ n ] = { 'style': '', 'id': 'sec' + this.data.sector + 'r' + row + 's' + n, 'displayName': ( this.data.sectorCount > 1 ? 'Sector ' + this.data.sector + ', ' : '' ) + 'Row ' + ( row + 1 ) + ', Seat ' + ( n + 1 ), 'status': 'av', 'row': row, 'seat': n };
+                    // TODO: apply style of category
                     if ( this.origin === 1 ) {
-                        this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; bottom: ${ row * size * this.scaleFactor }px; left: ${ n * size * this.scaleFactor }px; rotate: ${ this.origin / 4 - 0.25 }turn;` };
+                        this.seats[ row ][ n ][ 'style' ] = `bottom: ${ row * size * this.scaleFactor }px; left: ${ n * size * this.scaleFactor }px; rotate: ${ this.origin / 4 - 0.25 }turn;`;
                     } else if ( this.origin === 2 ) {
-                        this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; bottom: ${ row * size * this.scaleFactor }px; right: ${ n * size * this.scaleFactor }px; rotate: ${ this.origin / 4 - 0.25 }turn;` };
+                        this.seats[ row ][ n ][ 'style' ] = `bottom: ${ row * size * this.scaleFactor }px; right: ${ n * size * this.scaleFactor }px; rotate: ${ this.origin / 4 - 0.25 }turn;`;
                     } else if ( this.origin === 3 ) {
-                        this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; top: ${ row * size * this.scaleFactor }px; right: ${ n * size * this.scaleFactor }px; rotate: ${ this.origin / 4 - 0.25 }turn;` };
+                        this.seats[ row ][ n ][ 'style' ] = `top: ${ row * size * this.scaleFactor }px; right: ${ n * size * this.scaleFactor }px; rotate: ${ this.origin / 4 - 0.25 }turn;`;
                     } else if ( this.origin === 4 ) {
-                        this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; top: ${ row * size * this.scaleFactor }px; left: ${ n * size * this.scaleFactor }px; rotate: ${ this.origin / 4 - 0.25 }turn;` };
+                        this.seats[ row ][ n ][ 'style' ] = `top: ${ row * size * this.scaleFactor }px; left: ${ n * size * this.scaleFactor }px; rotate: ${ this.origin / 4 - 0.25 }turn;`;
+                    }
+                    this.seats[ row ][ n ][ 'scaling' ] = `font-size: ${this.scaleFactor * 200}%; `;
+                    if ( this.data.unavailableSeats ) {
+                        if ( this.data.unavailableSeats[ this.seats[ row ][ n ][ 'id' ] ] ) {
+                            this.seats[ row ][ n ][ 'status' ] = 'nav';
+                        }
                     }
                 }
             }
@@ -81,6 +96,18 @@ export default {
                     this.seats[ row ][ seat ].style = `font-size: ${this.scaleFactor * 200}%;` + styles;
                 }
             }
+        },
+        selectSeat ( row, seat ) {
+            this.$emit( 'seatSelected', this.seats[ row ][ seat ] );
+        },
+        deselectSeat( row, seat ) {
+            this.$emit( 'seatDeselected', this.seats[ row ][ seat ] );
+            this.seats[ seatObject[ 'row' ] ][ seatObject[ 'seat' ] ][ 'status' ] = 'av';
+            // TODO: Make server call to deselect ticket
+        },
+        validateSeatSelection( seatObject ) {
+            this.seats[ seatObject[ 'row' ] ][ seatObject[ 'seat' ] ][ 'status' ] = 'sel';
+            // TODO: Make server call to reserve ticket
         }
     },
     watch: {
diff --git a/src/webapp/src/components/seatplan/userApp/seatplanComponents/seats/trapezoid.vue b/src/webapp/src/components/seatplan/userApp/seatplanComponents/seats/trapezoid.vue
index e28ebf0..caddb35 100644
--- a/src/webapp/src/components/seatplan/userApp/seatplanComponents/seats/trapezoid.vue
+++ b/src/webapp/src/components/seatplan/userApp/seatplanComponents/seats/trapezoid.vue
@@ -10,7 +10,14 @@
 <template>
     <div id="trapezoidSeatplan">
         <div v-for="row in seats">
-            <span class="material-symbols-outlined seats" v-for="seat in row" :style="seat.style">living</span>
+            <div class="seats" v-for="seat in row" :style="seat.style" :id="seat.id">
+                <span class="material-symbols-outlined" :style="seat.scaling" @click="selectSeat( seat.row, seat.seat )" v-if="seat.status == 'av'" 
+                :title="seat.displayName + ', Available'">living</span>
+                <span class="material-symbols-outlined" :style="seat.scaling" v-else-if="seat.status == 'nav'"
+                :title="seat.displayName + ', Unavailable'">close</span>
+                <span class="material-symbols-outlined" :style="seat.scaling" v-else-if="seat.status == 'sel'"
+                :title="seat.displayName + ', Selected'">done</span>
+            </div>
         </div>
     </div>
 </template>
@@ -45,9 +52,9 @@ export default {
             type: Number,
             "default": 1,
         },
-        id: {
-            type: Number,
-            "default": 1
+        data: {
+            type: Object,
+            "default": { 'sector': 'A', 'sectorCount': 1, 'unavailableSeats': { 'secAr0s0': true } }
         }
     },
     data () {
@@ -68,25 +75,24 @@ export default {
             let count = Math.floor( heightTriangle / ( sideOffset * 2 ) );
             const angle = Math.PI / 4;
             this.seats = {};
-            let details = { 'data': {}, 'id': this.id };
             for ( let row = this.startingRow; row < count; row++ ) {
                 let nn = 2 + ( row - 1 ) * 2; 
                 this.seats[ row ] = {};
-                details.data[ row ] = Math.floor( nn );
                 for ( let n = 0; n < nn; n++ ) {
+                    this.seats[ row ][ n ] = { 'style': '', 'id': 'sec' + this.data.sector + 'r' + row + 's' + n, 'displayName': ( this.data.sectorCount > 1 ? 'Sector ' + this.data.sector + ', ' : '' ) + 'Row ' + ( row + 1 ) + ', Seat ' + ( n + 1 ), 'status': 'av', 'row': row, 'seat': n };
                     let side = n * sideOffset;
                     if ( this.origin === 1 ) {
-                        this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; bottom: ${ ( side + 5 ) * this.scaleFactor }px; left: ${ ( row * sideOffset * 2 - side ) * this.scaleFactor }px; rotate: ${ angle }rad` };
+                        this.seats[ row ][ n ][ 'style' ] = `bottom: ${ ( side + 5 ) * this.scaleFactor }px; left: ${ ( row * sideOffset * 2 - side ) * this.scaleFactor }px; rotate: ${ angle }rad`;
                     } else if ( this.origin === 2 ) {
-                        this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; bottom: ${ ( side + 5 ) * this.scaleFactor }px; right: ${ ( row * sideOffset * 2 - side ) * this.scaleFactor }px; rotate: ${ Math.PI * 2 - angle }rad` };
+                        this.seats[ row ][ n ][ 'style' ] = `bottom: ${ ( side + 5 ) * this.scaleFactor }px; right: ${ ( row * sideOffset * 2 - side ) * this.scaleFactor }px; rotate: ${ Math.PI * 2 - angle }rad`;
                     } else if ( this.origin === 3 ) {
-                        this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; top: ${ ( side + 5 ) * this.scaleFactor }px; right: ${ ( row * sideOffset * 2 - side ) * this.scaleFactor }px; rotate: ${ angle + Math.PI }rad` };
+                        this.seats[ row ][ n ][ 'style' ] = `top: ${ ( side + 5 ) * this.scaleFactor }px; right: ${ ( row * sideOffset * 2 - side ) * this.scaleFactor }px; rotate: ${ angle + Math.PI }rad`;
                     } else if ( this.origin === 4 ) {
-                        this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; top: ${ ( side + 5 ) * this.scaleFactor }px; left: ${ ( row * sideOffset * 2 - side ) * this.scaleFactor }px; rotate: ${ Math.PI - angle }rad` };
+                        this.seats[ row ][ n ][ 'style' ] = `top: ${ ( side + 5 ) * this.scaleFactor }px; left: ${ ( row * sideOffset * 2 - side ) * this.scaleFactor }px; rotate: ${ Math.PI - angle }rad`;
                     }
+                    this.seats[ row ][ n ][ 'scaling' ] = `font-size: ${this.scaleFactor * 200}%; `;
                 }
             }
-            this.$emit( 'seatingInfo', details );
         },
         setScaleFactor () {
             for ( let row in this.seats ) {
@@ -95,6 +101,9 @@ export default {
                     this.seats[ row ][ seat ].style = `font-size: ${this.scaleFactor * 200}%;` + styles;
                 }
             }
+        },
+        selectSeat ( row, seat ) {
+            console.log( row + ' ' + seat );
         }
     },
     watch: {