diff --git a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html
index 721fec9e86..8421c2f029 100644
--- a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html
+++ b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html
@@ -13,10 +13,10 @@
       <label class="text-black">Bewertung</label>
       <div class="d-flex gap-3">
         <div
-          class="successful w-50 valuation-card card-hover"
+          class="successful w-50 valuation-card card-hover-successful"
           [ngClass]="{
-            active: completeForm.value.isSuccessful == true,
-            'non-active': completeForm.value.isSuccessful === false
+            'active-successful': completeForm.value.isSuccessful == true,
+            'non-active-successful': completeForm.value.isSuccessful === false
           }"
           (click)="switchSuccessState('successful')"
           (keydown.enter)="switchSuccessState('successful')"
@@ -26,10 +26,10 @@
           Objective erreicht
         </div>
         <div
-          class="not-successful w-50 valuation-card card-hover"
+          class="not-successful w-50 valuation-card card-hover-not-successful"
           [ngClass]="{
-            active: completeForm.value.isSuccessful === false,
-            'non-active': completeForm.value.isSuccessful == true
+            'active-not-successful': completeForm.value.isSuccessful === false,
+            'non-active-not-successful': completeForm.value.isSuccessful == true
           }"
           (click)="switchSuccessState('notSuccessful')"
           (keydown.enter)="switchSuccessState('notSuccessful')"
diff --git a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.scss b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.scss
index 2c09a80366..f757130a0f 100644
--- a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.scss
+++ b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.scss
@@ -1,3 +1,8 @@
+div,
+div:hover {
+  outline: none;
+}
+
 .commentary-field {
   resize: none;
   padding: 0.625rem;
@@ -19,8 +24,7 @@
   font-weight: bold;
 }
 
-.card-hover:hover {
-  background-color: lightgray;
+.card-shadow {
   box-shadow:
     0 0 0 0 rgba(0, 0, 0, 0.06),
     1px 1px 2px 0 rgba(0, 0, 0, 0.06),
@@ -30,23 +34,42 @@
     21px 18px 8px 0 rgba(0, 0, 0, 0);
 }
 
-.active {
-  background-color: #1e5a96;
+.card-hover-successful:hover,
+.card-hover-successful:focus {
+  @extend .card-shadow;
+  background-color: #1e8a29;
+  color: white;
+}
+
+.card-hover-not-successful:hover,
+.card-hover-not-successful:focus {
+  @extend .card-shadow;
+  background-color: #ba3838;
+  color: white;
+}
+
+.active-successful {
+  background-color: #1e8a29;
+  color: white;
+}
+
+.active-not-successful {
+  background-color: #ba3838;
   color: white;
 }
 
-.non-active {
+.non-active-successful,
+.non-active-not-successful {
   background-color: white;
   color: black;
 }
 
-.non-active:hover {
-  background-color: lightgray;
-  box-shadow:
-    0 0 0 0 rgba(0, 0, 0, 0.06),
-    1px 1px 2px 0 rgba(0, 0, 0, 0.06),
-    3px 3px 4px 0 rgba(0, 0, 0, 0.05),
-    8px 6px 6px 0 rgba(0, 0, 0, 0.03),
-    14px 11px 7px 0 rgba(0, 0, 0, 0.01),
-    21px 18px 8px 0 rgba(0, 0, 0, 0);
+.non-active-successful:hover {
+  @extend .card-shadow;
+  background-color: #1e8a29;
+}
+
+.non-active-not-successful:hover {
+  @extend .card-shadow;
+  background-color: #ba3838;
 }
diff --git a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.spec.ts b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.spec.ts
index 96dd62fa53..e6cda43dea 100644
--- a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.spec.ts
+++ b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.spec.ts
@@ -39,10 +39,14 @@ describe('CompleteDialogComponent', () => {
   });
 
   it('should set right classes on init', () => {
-    let elements = document.querySelectorAll('.card-hover');
+    let elements = document.querySelectorAll('.valuation-card');
+    let successful = document.querySelectorAll('.card-hover-successful');
+    let notSuccessful = document.querySelectorAll('.card-hover-not-successful');
     let submitButton = document.querySelectorAll('button')[1];
 
     expect(elements.length).toEqual(2);
+    expect(successful.length).toEqual(1);
+    expect(notSuccessful.length).toEqual(1);
     expect(component.completeForm.value.isSuccessful).toBeNull();
     expect(component.completeForm.value.comment).toBeNull();
     expect(component.completeForm.invalid).toBeTruthy();
@@ -70,15 +74,15 @@ describe('CompleteDialogComponent', () => {
   it('should set active and non-active classes on switch', () => {
     component.switchSuccessState('successful');
     fixture.detectChanges();
-    let nonActiveElement = document.querySelector('.non-active');
+    let nonActiveElement = document.querySelector('.active-successful');
 
-    expect(nonActiveElement!.innerHTML).toContain('Objective nicht erreicht');
+    expect(nonActiveElement!.innerHTML).toContain('Objective erreicht');
 
     component.switchSuccessState('notSuccessful');
     fixture.detectChanges();
-    nonActiveElement = document.querySelector('.non-active');
+    nonActiveElement = document.querySelector('.active-not-successful');
 
-    expect(nonActiveElement!.innerHTML).toContain('Objective erreicht');
+    expect(nonActiveElement!.innerHTML).toContain('Objective nicht erreicht');
   });
 
   it('should close dialog with right data', () => {