diff --git a/src/state/CallViewModel.ts b/src/state/CallViewModel.ts
index 8d9f6ffc..5e2a9982 100644
--- a/src/state/CallViewModel.ts
+++ b/src/state/CallViewModel.ts
@@ -392,22 +392,23 @@ export class CallViewModel extends ViewModel {
       ),
     );
 
-  public readonly livekitConnectionState$ = this.scope.behavior(
-    this.localConnection$.pipe(
-      switchMap((c) =>
-        c?.state === "ready"
-          ? // TODO mapping to ConnectionState for compatibility, but we should use the full state?
-            c.value.transportState$.pipe(
-              map((s) => {
-                if (s.state === "ConnectedToLkRoom") return s.connectionState;
-                return ConnectionState.Disconnected;
-              }),
-              distinctUntilChanged(),
-            )
-          : of(ConnectionState.Disconnected),
+  public readonly livekitConnectionState$ =
+    this.scope.behavior<ConnectionState>(
+      this.localConnection$.pipe(
+        switchMap((c) =>
+          c?.state === "ready"
+            ? // TODO mapping to ConnectionState for compatibility, but we should use the full state?
+              c.value.transportState$.pipe(
+                switchMap((s) => {
+                  if (s.state === "ConnectedToLkRoom")
+                    return s.connectionState$;
+                  return of(ConnectionState.Disconnected);
+                }),
+              )
+            : of(ConnectionState.Disconnected),
+        ),
       ),
-    ),
-  );
+    );
 
   /**
    * Connections for each transport in use by one or more session members that
diff --git a/src/state/Connection.ts b/src/state/Connection.ts
index 1bbe3c03..7b044e1d 100644
--- a/src/state/Connection.ts
+++ b/src/state/Connection.ts
@@ -21,7 +21,7 @@ import {
   type CallMembership,
   type LivekitTransport,
 } from "matrix-js-sdk/lib/matrixrtc";
-import { BehaviorSubject, combineLatest } from "rxjs";
+import { BehaviorSubject, combineLatest, type Observable } from "rxjs";
 
 import {
   getSFUConfigWithOpenID,
@@ -60,7 +60,7 @@ export type TransportState =
   | { state: "FailedToStart"; error: Error; transport: LivekitTransport }
   | {
       state: "ConnectedToLkRoom";
-      connectionState: ConnectionState;
+      connectionState$: Observable<ConnectionState>;
       transport: LivekitTransport;
     }
   | { state: "Stopped"; transport: LivekitTransport };
@@ -159,7 +159,7 @@ export class Connection {
       this._transportState$.next({
         state: "ConnectedToLkRoom",
         transport: this.transport,
-        connectionState: this.livekitRoom.state,
+        connectionState$: connectionStateObserver(this.livekitRoom),
       });
     } catch (error) {
       this._transportState$.next({
@@ -250,20 +250,6 @@ export class Connection {
       [],
     );
 
-    scope
-      .behavior<ConnectionState>(connectionStateObserver(this.livekitRoom))
-      .subscribe((connectionState) => {
-        const current = this._transportState$.value;
-        // Only update the state if we are already connected to the LiveKit room.
-        if (current.state === "ConnectedToLkRoom") {
-          this._transportState$.next({
-            state: "ConnectedToLkRoom",
-            connectionState,
-            transport: current.transport,
-          });
-        }
-      });
-
     scope.onEnd(() => void this.stop());
   }
 }