diff --git a/src/app/seat/seat.component.html b/src/app/seat/seat.component.html
index d30cfe3..66a3da9 100644
--- a/src/app/seat/seat.component.html
+++ b/src/app/seat/seat.component.html
@@ -1,5 +1,5 @@
 <button (click)="updateSelectedSeats(this.seat())" [disabled]="state() == TheaterSeatState.BOOKED || state() == TheaterSeatState.RESERVED || !seatService.getSeatIsSelected()" class="mx-1 hover:opacity-50">
-  <mat-icon [ngStyle]="{'opacity': selected ? '0.5' : '1', color: getSeatStateColor() }" style="font-size: 30px; width: 30px; height: 30px">
+  <mat-icon [ngStyle]="{color: isSelectedAndAvaliable() ? '#6366f1': getSeatStateColor() }" style="font-size: 30px; width: 30px; height: 30px">
     @if(this.seat().row.category.id ==1){
       event_seat
     }
diff --git a/src/app/seat/seat.component.ts b/src/app/seat/seat.component.ts
index a81081a..e029b90 100644
--- a/src/app/seat/seat.component.ts
+++ b/src/app/seat/seat.component.ts
@@ -1,6 +1,6 @@
-import {Component, inject, input, OnInit, output} from '@angular/core';
+import {Component, inject, input} from '@angular/core';
 import {TheaterSeatState} from '../model/theater-seat-state.model';
-import {Sitzkategorie, Sitzplatz} from '@infinimotion/model-frontend';
+import {Sitzplatz} from '@infinimotion/model-frontend';
 import {SelectedSeatsService} from '../selected-seats.service';
 
 @Component({
@@ -16,8 +16,9 @@ export class SeatComponent{
   selected: boolean = false;
 
   protected seatService = inject(SelectedSeatsService)
+  protected readonly TheaterSeatState = TheaterSeatState;
 
-  getSeatStateColor(): any {
+  getSeatStateColor(): string {
     switch (this.state()) {
       case TheaterSeatState.RESERVED:
         return 'orange';
@@ -40,5 +41,7 @@ export class SeatComponent{
     //console.log(this.selected)
   }
 
-  protected readonly TheaterSeatState = TheaterSeatState;
+  isSelectedAndAvaliable(): boolean {
+    return this.selected && this.state() == TheaterSeatState.AVAILABLE;
+  }
 }