diff --git a/src/server/backend/api/postHandler.js b/src/server/backend/api/postHandler.js
index 94d2996..11417e1 100644
--- a/src/server/backend/api/postHandler.js
+++ b/src/server/backend/api/postHandler.js
@@ -168,30 +168,28 @@ class POSTHandler {
                             if ( this.events[ data.eventID ].maxTickets == 0 || ticketCount < this.events[ data.eventID ].maxTickets ) {
 
                                 // check if enough tickets are still available
-                                if ( ticketCount < this.ticketTotals[ data.eventID ] - this.temporarilySelectedTotals[ session.id ][ data.eventID ][ id ] ) {
-                                    if ( data.count < this.ticketTotals[ data.eventID ] ) {
+                                if ( ticketCount < parseInt( this.ticketTotals[ data.eventID ] ) - parseInt( this.temporarilySelectedTotals[ session.id ][ data.eventID ][ id ] ) ) {
+                                    if ( data.count > this.ticketTotals[ data.eventID ] ) {
                                         ticketCount = this.ticketTotals[ data.eventID ];
-
-                                        // Create details
-                                        let info = {};
-                                        info[ data.eventID ] = {};
-                                        info[ data.eventID ][ id ] = data;
-                                        if ( !this.temporarilySelected[ data.eventID ] ) {
-                                            this.temporarilySelected[ data.eventID ] = {};
-                                        }
-                                        if ( !this.temporaryTotals[ data.eventID ] ) {
-                                            this.temporaryTotals[ data.eventID ] = 0;
-                                        }
-                                        db.writeDataSimple( 'temp', 'user_id', session.id, { 'user_id': session.id, 'timestamp': new Date().toString(), 'data': JSON.stringify( info ) } );
-                                        this.temporarilySelected[ data.eventID ][ id ] = info;
-                                        this.temporaryTotals[ data.eventID ] -= this.temporarilySelectedTotals[ session.id ][ data.eventID ][ id ];
-                                        this.temporaryTotals[ data.eventID ] += ticketCount;
-                                        this.temporarilySelectedTotals[ session.id ][ data.eventID ][ id ] = ticketCount;
-                                        this.countFreeSeats();
-                                        resolve( 'ok' );
-                                    } else {
-                                        reject( { 'code': 409, 'message': 'ERR_ALL_OCCUPIED' } );
                                     }
+
+                                    // Create details
+                                    let info = {};
+                                    info[ data.eventID ] = {};
+                                    info[ data.eventID ][ id ] = data;
+                                    if ( !this.temporarilySelected[ data.eventID ] ) {
+                                        this.temporarilySelected[ data.eventID ] = {};
+                                    }
+                                    if ( !this.temporaryTotals[ data.eventID ] ) {
+                                        this.temporaryTotals[ data.eventID ] = 0;
+                                    }
+                                    db.writeDataSimple( 'temp', 'user_id', session.id, { 'user_id': session.id, 'timestamp': new Date().toString(), 'data': JSON.stringify( info ) } );
+                                    this.temporarilySelected[ data.eventID ][ id ] = info;
+                                    this.temporaryTotals[ data.eventID ] -= this.temporarilySelectedTotals[ session.id ][ data.eventID ][ id ];
+                                    this.temporaryTotals[ data.eventID ] += ticketCount;
+                                    this.temporarilySelectedTotals[ session.id ][ data.eventID ][ id ] = ticketCount;
+                                    this.countFreeSeats();
+                                    resolve( 'ok' );
                                 } else {
                                     reject( { 'code': 409, 'message': 'ERR_ALL_OCCUPIED' } );
                                 }
diff --git a/src/server/data/booked.json b/src/server/data/booked.json
index cb89c29..1a53498 100644
--- a/src/server/data/booked.json
+++ b/src/server/data/booked.json
@@ -1 +1 @@
-{"test4":{"secAr4s7":{"id":"secAr4s7","component":1,"ticketOption":"1","eventID":"test4","category":"1","name":"Row 5, Seat 8"},"secAr6s14":{"id":"secAr6s14","component":1,"ticketOption":"2","eventID":"test4","category":"1","name":"Row 7, Seat 15"},"secAr6s10":{"id":"secAr6s10","component":1,"ticketOption":"2","eventID":"test4","category":"1","name":"Row 7, Seat 11"},"comp1secAr5s11":{"id":"comp1secAr5s11","component":1,"ticketOption":"2","eventID":"test4","category":"1","name":"Row 6, Seat 12"}},"test3":{"ticket1_1":{"id":"ticket1_1","component":1,"ticketOption":"1","eventID":"test3","count":1,"category":"1","name":"Category 1 (Child)"}}}
\ No newline at end of file
+{"test4":{"secAr4s7":{"id":"secAr4s7","component":1,"ticketOption":"1","eventID":"test4","category":"1","name":"Row 5, Seat 8"},"secAr6s14":{"id":"secAr6s14","component":1,"ticketOption":"2","eventID":"test4","category":"1","name":"Row 7, Seat 15"},"secAr6s10":{"id":"secAr6s10","component":1,"ticketOption":"2","eventID":"test4","category":"1","name":"Row 7, Seat 11"},"comp1secAr5s11":{"id":"comp1secAr5s11","component":1,"ticketOption":"2","eventID":"test4","category":"1","name":"Row 6, Seat 12"}},"test3":{"ticket1_1":{"id":"ticket1_1","component":1,"ticketOption":"1","eventID":"test3","count":10,"category":"1","name":"Category 1 (Child)"},"ticket1":{"id":"ticket1_1","component":1,"ticketOption":"1","eventID":"test3","count":1,"category":"1","name":"Category 1 (Child)"}}}
\ No newline at end of file
diff --git a/src/webapp/main/src/App.vue b/src/webapp/main/src/App.vue
index 3fe1764..7bfa075 100644
--- a/src/webapp/main/src/App.vue
+++ b/src/webapp/main/src/App.vue
@@ -43,7 +43,7 @@
         --popup-color: rgb(224, 224, 224);
         --accent-color: #42b983;
         --hover-color: rgb(165, 165, 165);
-        --accent-background-hover: rgb(124, 140, 236);
+        --accent-background-hover: #648cab;
         --overlay-color: rgba(0, 0, 0, 0.7);
         --inactive-color: rgb(100, 100, 100);
         --hint-color: rgb(174, 210, 221);
@@ -58,7 +58,7 @@
         --popup-color: rgb(58, 58, 58);
         --accent-color: #42b983;
         --hover-color: rgb(83, 83, 83);
-        --accent-background-hover: rgb(124, 140, 236);
+        --accent-background-hover: #648cab;
         --overlay-color: rgba(104, 104, 104, 0.575);
         --inactive-color: rgb(190, 190, 190);
         --hint-color: rgb(88, 91, 110);
diff --git a/src/webapp/main/src/components/noseatplan.vue b/src/webapp/main/src/components/noseatplan.vue
index 03f7f68..8b63bb4 100644
--- a/src/webapp/main/src/components/noseatplan.vue
+++ b/src/webapp/main/src/components/noseatplan.vue
@@ -2,10 +2,10 @@
     <div class="seatingWrapper">
         <div class="noseatplan">
             <h2>Available tickets</h2>
-            <button @click="cartHandling()">Add selected tickets to cart</button>
+            <button @click="cartHandling()" class="button">Add selected tickets to cart</button>
             <div class="wrapper">
-                <div v-for="ticket in event.categories">
-                    {{ event[ 'categories' ][ ticket.id ][ 'name' ] }}
+                <div v-for="ticket in event.categories" style="margin-bottom: 1.5%;">
+                    <h4 style="margin: 0.5%;">{{ event[ 'categories' ][ ticket.id ][ 'name' ] }}</h4>
                     <table>
                         <tr v-for="ticketOption in event[ 'ageGroups' ]">
                             <td>
@@ -266,6 +266,23 @@ export default {
         height: 100%;
     }
 
+    .button {
+        transition: all 1s;
+        padding: 1%;
+        border-radius: 50px;
+        border: none;
+        background-color: var( --accent-background-hover );
+        cursor: pointer;
+        color: var( --secondary-color );
+        margin-bottom: 3%;
+        text-decoration: none;
+    }
+
+    .button:hover {
+        background-color: var( --accent-background );
+        border-radius: 10px;
+    }
+
     .noseatplan {
         grid-area: main;
         display: flex;
diff --git a/website/dist/css/style.css b/website/dist/css/style.css
index 20bc15a..7cf3d8d 100644
--- a/website/dist/css/style.css
+++ b/website/dist/css/style.css
@@ -17,7 +17,7 @@ html, body {
 }
 
 body {
-    background-color: #7c8cec;
+    background-color: #648cab;
 }
 
 .dev {
diff --git a/website/dist/docs/css/navstyle.css b/website/dist/docs/css/navstyle.css
index 9869577..6e0cd25 100644
--- a/website/dist/docs/css/navstyle.css
+++ b/website/dist/docs/css/navstyle.css
@@ -10,18 +10,18 @@
 .side-nav-container {
     min-height: 100vh;
     width: 100%;
-    background-color: rgb(0, 0, 49);
+    background-color: rgb(30, 30, 82);
 }
 
 .side-nav-item {
     width: 90%;
     padding: 3% 5%;
     display: block;
-    background-color: rgb(16, 16, 46);
+    background-color: rgb(30, 30, 82);
     color: white;
     text-decoration: none;
     cursor: pointer;
-    transition: all 0.5s;
+    transition: 1s;
 }
 
 
@@ -29,11 +29,11 @@
     width: 85%;
     padding: 2% 5% 2% 10%;
     display: block;
-    background-color: rgb(16, 16, 46);
+    background-color: rgb(26, 26, 71);
     color: white;
     text-decoration: none;
     cursor: pointer;
-    transition: all 0.5s;
+    transition: 1s;
 }
 
 .side-dropdown {
@@ -41,5 +41,6 @@
 }
 
 .side-nav-item:hover, .side-nav-subitem:hover, .active {
-    background-color: rgb(0, 0, 133);
+    background-color: #648cab;
+    transition: 0.4s;
 }
\ No newline at end of file
diff --git a/website/dist/docs/css/style.css b/website/dist/docs/css/style.css
index 82ffa98..21c1a59 100644
--- a/website/dist/docs/css/style.css
+++ b/website/dist/docs/css/style.css
@@ -19,7 +19,7 @@ html, body {
 body {
     height: 100vh;
     display: grid;
-    background-color: #7c8cec;
+    background-color: #648cab;
     grid-template-areas:
     'header header header header header'
     'menu main main main main'