diff --git a/src/component/internal/connection.ts b/src/component/internal/connection.ts
index f4a45b18..ccfd5ad4 100644
--- a/src/component/internal/connection.ts
+++ b/src/component/internal/connection.ts
@@ -1,7 +1,9 @@
+import Vue from 'vue'
 import EventEmitter from 'eventemitter3'
 
 import { NekoWebSocket } from './websocket'
 import { NekoWebRTC, WebRTCStats } from './webrtc'
+import { Connection } from '../types/state'
 
 export interface NekoConnectionEvents {
   connecting: () => void
@@ -12,15 +14,44 @@ export interface NekoConnectionEvents {
 export class NekoConnection extends EventEmitter<NekoConnectionEvents> {
   private _url: string
   private _token: string
+  private _state: Connection
 
   public websocket = new NekoWebSocket()
   public webrtc = new NekoWebRTC()
 
-  constructor() {
+  constructor(state: Connection) {
     super()
 
     this._url = ''
     this._token = ''
+    this._state = state
+
+    // initial state
+    Vue.set(this._state, 'type', 'webrtc')
+    Vue.set(this._state, 'websocket', this.websocket.supported ? 'disconnected' : 'unavailable')
+    Vue.set(this._state.webrtc, 'status', this.webrtc.supported ? 'disconnected' : 'unavailable')
+
+    // websocket
+    this.websocket.on('connecting', () => {
+      Vue.set(this._state, 'websocket', 'connecting')
+    })
+    this.websocket.on('connected', () => {
+      Vue.set(this._state, 'websocket', 'connected')
+    })
+    this.websocket.on('disconnected', () => {
+      Vue.set(this._state, 'websocket', 'disconnected')
+    })
+
+    // webrtc
+    this.webrtc.on('connecting', () => {
+      Vue.set(this._state.webrtc, 'status', 'connecting')
+    })
+    this.webrtc.on('connected', () => {
+      Vue.set(this._state.webrtc, 'status', 'connected')
+    })
+    this.webrtc.on('disconnected', () => {
+      Vue.set(this._state.webrtc, 'status', 'disconnected')
+    })
   }
 
   public setUrl(url: string) {
diff --git a/src/component/internal/messages.ts b/src/component/internal/messages.ts
index 69342b5b..8d52dc1c 100644
--- a/src/component/internal/messages.ts
+++ b/src/component/internal/messages.ts
@@ -9,8 +9,6 @@ import NekoState from '../types/state'
 
 export interface NekoEvents {
   // connection events
-  ['connection.websocket']: (state: 'connected' | 'connecting' | 'disconnected') => void
-  ['connection.webrtc']: (state: 'connected' | 'connecting' | 'disconnected') => void
   ['connection.webrtc.sdp']: (type: 'local' | 'remote', data: string) => void
   ['connection.webrtc.sdp.candidate']: (type: 'local' | 'remote', data: RTCIceCandidateInit) => void
   ['connection.disconnect']: (message: string) => void
diff --git a/src/component/main.vue b/src/component/main.vue
index b6cadf99..a5a954cb 100644
--- a/src/component/main.vue
+++ b/src/component/main.vue
@@ -95,20 +95,15 @@
     @Prop({ type: Boolean })
     private readonly autoplay!: boolean
 
-    /////////////////////////////
-    // Public connection manager
-    /////////////////////////////
-    public connection = new NekoConnection()
-
     /////////////////////////////
     // Public state
     /////////////////////////////
     public state = {
       connection: {
         authenticated: false,
-        websocket: this.connection.websocket.supported ? 'disconnected' : 'unavailable',
+        websocket: 'disconnected',
         webrtc: {
-          status: this.connection.webrtc.supported ? 'disconnected' : 'unavailable',
+          status: 'disconnected',
           stats: null,
           video: null,
           videos: [],
@@ -147,6 +142,11 @@
       sessions: {},
     } as NekoState
 
+    /////////////////////////////
+    // Public connection manager
+    /////////////////////////////
+    public connection = new NekoConnection(this.state.connection)
+
     public get authenticated() {
       return this.state.connection.authenticated
     }
@@ -281,11 +281,9 @@
       }
 
       this.connection.webrtc.disconnect()
-      this.events.emit('connection.webrtc', 'disconnected')
       this.clearWebRTCState()
 
       this.connection.disconnect()
-      this.events.emit('connection.websocket', 'disconnected')
       this.clearWebSocketState()
     }
 
@@ -384,20 +382,6 @@
       // video events
       VideoRegister(this._video, this.state.video)
 
-      // websocket
-      this.connection.websocket.on('connecting', () => {
-        Vue.set(this.state.connection, 'websocket', 'connecting')
-        this.events.emit('connection.websocket', 'connecting')
-      })
-      this.connection.websocket.on('connected', () => {
-        Vue.set(this.state.connection, 'websocket', 'connected')
-        this.events.emit('connection.websocket', 'connected')
-      })
-      this.connection.websocket.on('disconnected', () => {
-        this.events.emit('connection.websocket', 'disconnected')
-        this.clearWebSocketState()
-      })
-
       // webrtc
       this.connection.webrtc.on('track', (event: RTCTrackEvent) => {
         const { track, streams } = event
@@ -450,19 +434,6 @@
           webrtcCongestion = 0
         }
       })
-      this.connection.webrtc.on('connecting', () => {
-        Vue.set(this.state.connection.webrtc, 'status', 'connecting')
-        this.events.emit('connection.webrtc', 'connecting')
-      })
-      this.connection.webrtc.on('connected', () => {
-        Vue.set(this.state.connection.webrtc, 'status', 'connected')
-        Vue.set(this.state.connection, 'type', 'webrtc')
-        this.events.emit('connection.webrtc', 'connected')
-      })
-      this.connection.webrtc.on('disconnected', () => {
-        this.events.emit('connection.webrtc', 'disconnected')
-        this.clearWebRTCState()
-      })
 
       // unmute on users first interaction
       if (this.autoplay) {