diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index 452a19c..cdbc3c4 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -36,7 +36,7 @@ export default function DashboardNavbar({
   picture,
   kvmName,
 }: NavbarProps) {
-  const peerConnectionState = useRTCStore(state => state.peerConnection?.connectionState);
+  const peerConnectionState = useRTCStore(state => state.peerConnectionState);
   const setUser = useUserStore(state => state.setUser);
   const navigate = useNavigate();
   const onLogout = useCallback(async () => {
diff --git a/ui/src/components/PeerConnectionStatusCard.tsx b/ui/src/components/PeerConnectionStatusCard.tsx
index 07e91cd..98025cd 100644
--- a/ui/src/components/PeerConnectionStatusCard.tsx
+++ b/ui/src/components/PeerConnectionStatusCard.tsx
@@ -9,19 +9,22 @@ const PeerConnectionStatusMap = {
   failed: "Connection failed",
   closed: "Closed",
   new: "Connecting",
-};
+} as Record<RTCPeerConnectionState | "error" | "closing", string>;
 
 export type PeerConnections = keyof typeof PeerConnectionStatusMap;
 
-type StatusProps = Record<PeerConnections, {
+type StatusProps = Record<
+  PeerConnections,
+  {
     statusIndicatorClassName: string;
-  }>;
+  }
+>;
 
 export default function PeerConnectionStatusCard({
   state,
   title,
 }: {
-  state?: PeerConnections;
+  state?: RTCPeerConnectionState | null;
   title?: string;
 }) {
   if (!state) return null;
diff --git a/ui/src/components/USBStateStatus.tsx b/ui/src/components/USBStateStatus.tsx
index d8e86c6..8feb458 100644
--- a/ui/src/components/USBStateStatus.tsx
+++ b/ui/src/components/USBStateStatus.tsx
@@ -8,11 +8,14 @@ import { HidState } from "@/hooks/stores";
 
 type USBStates = HidState["usbState"];
 
-type StatusProps = Record<USBStates, {
+type StatusProps = Record<
+  USBStates,
+  {
     icon: React.FC<{ className: string | undefined }>;
     iconClassName: string;
     statusIndicatorClassName: string;
-  }>;
+  }
+>;
 
 const USBStateMap: Record<USBStates, string> = {
   configured: "Connected",
@@ -27,9 +30,8 @@ export default function USBStateStatus({
   peerConnectionState,
 }: {
   state: USBStates;
-  peerConnectionState?: RTCPeerConnectionState;
+  peerConnectionState: RTCPeerConnectionState | null;
 }) {
-
   const StatusCardProps: StatusProps = {
     configured: {
       icon: ({ className }) => (
diff --git a/ui/src/routes/devices.$id.tsx b/ui/src/routes/devices.$id.tsx
index 1bad42d..50fc79f 100644
--- a/ui/src/routes/devices.$id.tsx
+++ b/ui/src/routes/devices.$id.tsx
@@ -126,7 +126,7 @@ export default function KvmIdRoute() {
 
   const setIsTurnServerInUse = useRTCStore(state => state.setTurnServerInUse);
   const peerConnection = useRTCStore(state => state.peerConnection);
-
+  const peerConnectionState = useRTCStore(state => state.peerConnectionState);
   const setPeerConnectionState = useRTCStore(state => state.setPeerConnectionState);
   const setMediaMediaStream = useRTCStore(state => state.setMediaStream);
   const setPeerConnection = useRTCStore(state => state.setPeerConnection);
@@ -264,8 +264,8 @@ export default function KvmIdRoute() {
           ? { iceServers: [iceConfig?.iceServers] }
           : {}),
       });
-    } catch (error) {
-      console.error(`Error creating peer connection: ${error}`);
+    } catch (e) {
+      console.error(`Error creating peer connection: ${e}`);
       closePeerConnection();
       return;
     }
@@ -325,9 +325,8 @@ export default function KvmIdRoute() {
     if (location.pathname.includes("other-session")) return;
 
     // If we're already connected or connecting, we don't need to connect
-    if (
-      ["connected", "connecting", "new"].includes(peerConnection?.connectionState ?? "")
-    ) {
+    // We have to use the state from the store, because the peerConnection.connectionState doesnt trigger a value change, if called manually from .close()
+    if (["connected", "connecting", "new"].includes(peerConnectionState ?? "")) {
       return;
     }
 
@@ -341,12 +340,7 @@ export default function KvmIdRoute() {
       connectWebRTC();
     }, 3000);
     return () => clearInterval(interval);
-  }, [
-    connectWebRTC,
-    connectionFailed,
-    location.pathname,
-    peerConnection?.connectionState,
-  ]);
+  }, [connectWebRTC, connectionFailed, location.pathname, peerConnectionState]);
 
   // On boot, if the connection state is undefined, we connect to the WebRTC
   useEffect(() => {