diff --git a/frontend/src/app/feature/game/dice/dice.component.css b/frontend/src/app/feature/game/dice/dice.component.css
new file mode 100644
index 0000000..658492e
--- /dev/null
+++ b/frontend/src/app/feature/game/dice/dice.component.css
@@ -0,0 +1,16 @@
+.dice-animation {
+  /* Add basic styling for the animation container */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px; /* Ensure there's space for the animation */
+}
+
+.dice-animation p {
+  animation: spin 1s linear infinite; /* Simple spinning animation */
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
diff --git a/frontend/src/app/feature/game/dice/dice.service.ts b/frontend/src/app/feature/game/dice/dice.service.ts
index f89c53d..b8df9d0 100644
--- a/frontend/src/app/feature/game/dice/dice.service.ts
+++ b/frontend/src/app/feature/game/dice/dice.service.ts
@@ -2,12 +2,13 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { DiceDto, DiceResult } from './dice.model';
+import {environment} from "@environments/environment";
 
 @Injectable({
   providedIn: 'root',
 })
 export class DiceService {
-  private apiUrl = '/backend/dice';
+  private apiUrl = `${environment.apiUrl}/dice`;
 
   constructor(private http: HttpClient) {}