diff --git a/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts b/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts
index 11f9e90..6b8cdce 100644
--- a/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts
+++ b/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts
@@ -10,7 +10,7 @@ import { Card } from '../../models/card.model';
   template: `
     <div class="space-y-4">
       <h3 class="section-heading text-2xl mb-4">Croupier's Karten</h3>
-      <div class="card p-6 !bg-red-500">
+      <div class="card p-6 !bg-accent-red">
         <div class="flex justify-center gap-4 min-h-[160px] p-4 border-2 border-red-400 rounded-lg">
           <app-playing-card
             *ngFor="let card of cards"
diff --git a/frontend/src/app/feature/game/blackjack/components/player-hand/player-hand.component.ts b/frontend/src/app/feature/game/blackjack/components/player-hand/player-hand.component.ts
index c157968..2dc50c0 100644
--- a/frontend/src/app/feature/game/blackjack/components/player-hand/player-hand.component.ts
+++ b/frontend/src/app/feature/game/blackjack/components/player-hand/player-hand.component.ts
@@ -10,9 +10,9 @@ import { Card } from '../../models/card.model';
   template: `
     <div class="space-y-4">
       <h3 class="section-heading text-2xl mb-4">Deine Karten</h3>
-      <div class="card p-6 !bg-green-500">
+      <div class="card p-6 !bg-emerald">
         <div
-          class="flex justify-center gap-4 min-h-[160px] p-4 border-2 border-green-400 rounded-lg"
+          class="flex justify-center gap-4 min-h-[160px] p-4 border-2 border-emerald-400 rounded-lg"
         >
           <app-playing-card
             *ngFor="let card of cards"