diff --git a/src/app/pages/clients/client-details/client-details.page.html b/src/app/pages/clients/client-details/client-details.page.html
index 491c73a..5671c61 100644
--- a/src/app/pages/clients/client-details/client-details.page.html
+++ b/src/app/pages/clients/client-details/client-details.page.html
@@ -14,14 +14,53 @@
   <ion-list *ngIf="serverState | async as state">
     <ion-item>
       <ion-label>
-        <h2>Client ID: {{ id }}</h2>
+        <h2>Connection Status</h2>
+        <p>Last Seen: {{ client.lastSeen.sec * 1000 | date: 'long' }}</p>
+        <p>Status: {{ client.connected ? 'Connected' : 'Disconnected' }}</p>
+        <p>Id: {{ client.id }}</p>
+
+        <ng-container *ngIf="state.server.groups">
+          <ng-container *ngFor="let group of state.server.groups">
+            <ng-container *ngFor="let client of group.clients">
+              <p *ngIf="client.id === id">Group: {{ group.name }}</p>
+            </ng-container>
+          </ng-container>
+
+
+        </ng-container>
       </ion-label>
+      <ion-button fill="outline" slot="end" (click)="refreshClient()">
+        <ion-icon name="refresh"></ion-icon>
+        Refresh
+      </ion-button>
+    </ion-item>
+
+    <ion-item>
+      <ion-input label="Name" labelPlacement="floating" type="text" placeholder="Enter client name"
+        [(ngModel)]="client.config.name" (ngModelChange)="setClientName()"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-input label="Latency (in ms)" labelPlacement="floating" type="number" placeholder="Enter latency in ms"
+        [(ngModel)]="client.config.latency" (ngModelChange)="setClientLatency()"></ion-input>
     </ion-item>
-    <ion-item >
-      <ion-input type="text" placeholder="Enter client name" [(ngModel)]="client.config.name" (ngModelChange)="setClientName()"></ion-input>
+    <ion-item lines="none">
+      <ion-input label="Volume (0-100%)" labelPlacement="floating" type="number" placeholder="Enter volume percentage"
+        [(ngModel)]="client.config.volume.percent" (ngModelChange)="setClientVolume()"></ion-input>
     </ion-item>
+    <ion-item>
+      <!-- <ion-label position="floating">Volume</ion-label> -->
+      <ion-range [(ngModel)]="client.config.volume.percent" (ngModelChange)="setClientVolume()">
+        <!-- <ion-label slot="start">0%</ion-label>
+        <ion-label slot="end">100%</ion-label> -->
+        <ion-icon slot="start" name="volume-low"></ion-icon>
+        <ion-icon slot="end" name="volume-high"></ion-icon>
+      </ion-range>
+    </ion-item>
+
+    <!-- group selector -->
+    
 
-    <ng-container *ngIf="state.server.groups">
+    <!-- <ng-container *ngIf="state.server.groups">
       <ng-container *ngFor="let group of state.server.groups">
         <ng-container *ngFor="let client of group.clients">
           <ion-item *ngIf="client.id === id">
@@ -31,11 +70,12 @@ <h2>{{ client.id }}</h2>
               <p>Volume: {{ client.config.volume.percent || 'N/A' }}%</p>
               <p>Last Seen: {{ client.lastSeen.sec * 1000 | date }}</p>
               <p>Connected: {{ client.connected }}</p>
+              <p>Latency: {{ client.config.latency }} ms</p>
             </ion-label>
           </ion-item>
         </ng-container>
       </ng-container>
-    </ng-container>
+    </ng-container> -->
   </ion-list>
 
   <ion-accordion-group *ngIf="client">
@@ -43,7 +83,7 @@ <h2>{{ client.id }}</h2>
       <ion-item slot="header">
         <ion-label>
           <h2>{{ client.id }}</h2>
-          <p>{{ client.connected}}</p>
+          <p>Raw json</p>
         </ion-label>
       </ion-item>
       <ion-item slot="content" lines="none" color="dark">
diff --git a/src/app/pages/clients/client-details/client-details.page.ts b/src/app/pages/clients/client-details/client-details.page.ts
index 083195b..fa074ae 100644
--- a/src/app/pages/clients/client-details/client-details.page.ts
+++ b/src/app/pages/clients/client-details/client-details.page.ts
@@ -16,7 +16,7 @@ export class ClientDetailsPage implements OnInit {
   id?: string;
 
   serverState?: Observable<SnapCastServerStatusResponse>;
-  client?: Client;
+  public client?: Client;
 
 
   constructor(
@@ -66,5 +66,52 @@ export class ClientDetailsPage implements OnInit {
   }
 
 
+  setClientLatency() {
+    if (!this.client || !this.client.id) {
+      console.error('ClientDetailsPage: No client or client ID available to set latency');
+      return;
+    }
+    this.snapcastService.setClientLatency(this.client.id, this.client.config.latency).subscribe({
+      next: () => {
+        console.log(`ClientDetailsPage: Successfully set latency for client ${this.client.id} to ${this.client.config.latency}`);
+      },
+      error: (err) => {
+        console.error(`ClientDetailsPage: Failed to set latency for client ${this.client.id}`, err);
+      }
+    });
+  }
+
+  setClientVolume() {
+    if (!this.client || !this.client.id) {
+      console.error('ClientDetailsPage: No client or client ID available to set volume');
+      return;
+    }
+    this.snapcastService.setClientVolumePercent(this.client.id, this.client.config.volume.percent).subscribe({
+      next: () => {
+        console.log(`ClientDetailsPage: Successfully set volume for client ${this.client.id} to ${this.client.config.volume.percent}`);
+      },
+      error: (err) => {
+        console.error(`ClientDetailsPage: Failed to set volume for client ${this.client.id}`, err);
+      }
+    });
+  }
+
+  refreshClient() {
+    if (!this.id) {
+      console.error('ClientDetailsPage: No ID available to refresh client');
+      return;
+    }
+    this.snapcastService.getClientStatus(this.id).subscribe({
+      next: () => {
+        console.log(`ClientDetailsPage: Successfully refreshed client ${this.id}`);
+        this.snapcastService.refreshState(); // Refresh the server state to get the latest data
+      },
+      error: (err) => {
+        console.error(`ClientDetailsPage: Failed to refresh client ${this.id}`, err);
+      }
+    });
+  }
+
+
 
 }
diff --git a/src/app/services/snapcast.service.ts b/src/app/services/snapcast.service.ts
index 0587c7d..f892c26 100644
--- a/src/app/services/snapcast.service.ts
+++ b/src/app/services/snapcast.service.ts
@@ -205,6 +205,27 @@ export class SnapcastService implements OnDestroy {
             console.warn(`SnapcastService: Client disconnected but not found in current state: ${disconnectParams.id}`);
           }
           break;
+        case 'Client.OnNameChanged':
+          const nameParams = notification.params as { id: string; name: string };
+          const clientName = server.groups.flatMap(g => g.clients).find(c => c.id === nameParams.id);
+          if (clientName) {
+            clientName.config.name = nameParams.name;
+            console.log(`SnapcastService: Client ${clientName.id} name changed to ${nameParams.name}`);
+          } else {
+            console.warn(`SnapcastService: Client name change for unknown client ID: ${nameParams.id}`);
+          }
+          break;
+
+        case 'Client.OnLatencyChanged':
+          const latencyParams = notification.params as { id: string; latency: number };
+          const clientLatency = server.groups.flatMap(g => g.clients).find(c => c.id === latencyParams.id);
+          if (clientLatency) {
+            clientLatency.config.latency = latencyParams.latency;
+            console.log(`SnapcastService: Client ${clientLatency.id} latency changed to ${latencyParams.latency}`);
+          } else {
+            console.warn(`SnapcastService: Client latency change for unknown client ID: ${latencyParams.id}`);
+          }
+          break;
 
 
         case 'Group.OnMute':
@@ -299,6 +320,8 @@ export class SnapcastService implements OnDestroy {
 
   // CLIENT ACTIONS
 
+
+
   public setClientVolumePercent(clientId: string, percent: number): Observable<void> {
     if (percent < 0 || percent > 100) return throwError(() => new Error('Volume percentage must be between 0 and 100.'));
 
@@ -333,7 +356,31 @@ export class SnapcastService implements OnDestroy {
     );
   }
 
- 
+  setClientLatency(clientId: string, latency: number): Observable<void> {
+    if (latency < 0) return throwError(() => new Error('Latency must be a non-negative number.'));
+    return this.rpc('Client.SetLatency', { id: clientId, latency }).pipe(
+      map((): void => void 0),
+      catchError(err => {
+        console.error(`SnapcastService: Failed to set latency for client ${clientId}`, err);
+        return throwError(() => err);
+      })
+    );
+  }
+
+  // Function added just for completeness, not used in the app yet.
+  getClientStatus(id: string): Observable<Client | undefined> {
+    return this.rpc('Client.GetStatus', { id }).pipe(
+      map(response => response.result as Client | undefined),
+      catchError(err => {
+        console.error(`SnapcastService: Failed to get status for client ${id}`, err);
+        return throwError(() => err);
+      })
+    );
+  }
+
+
+
+
   setGroupName(groupId: string, name: string): Observable<void> {
     return this.rpc('Group.SetName', { id: groupId, name }).pipe(
       map((): void => void 0),
@@ -362,7 +409,7 @@ export class SnapcastService implements OnDestroy {
 
   }
 
-  
+
 
 
 
@@ -373,8 +420,8 @@ export class SnapcastService implements OnDestroy {
   }
 
   public mockServerState(): void {
-   const url = "assets/mock/json/server-state.json"
-     this.http.get<SnapCastServerStatusResponse>(url).subscribe({
+    const url = "assets/mock/json/server-state.json"
+    this.http.get<SnapCastServerStatusResponse>(url).subscribe({
       next: (data) => {
         console.log('Mock server state loaded:', data);
         this.stateSubject$.next(data);