diff --git a/src/app.vue b/src/app.vue
index af3f292b..f30772d3 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -52,9 +52,60 @@
     }
 
     mounted() {
-      this.neko.events.on('connected', () => {
+      this.neko.events.on('connect', () => {
         console.log('connected...')
       })
+      this.neko.events.on('host.change', (id) => {
+        console.log('host.change', id)
+      })
+      this.neko.events.on('disconnect', (message) => {
+        console.log('disconnect', message)
+      })
+      this.neko.events.on('member.list', (members) => {
+        console.log('member.list', members)
+      })
+      this.neko.events.on('member.connected', (id) => {
+        console.log('member.connected', id)
+      })
+      this.neko.events.on('member.disconnected', (id) => {
+        console.log('member.disconnected', id)
+      })
+      this.neko.events.on('control.request', (id) => {
+        console.log('control.request', id)
+      })
+      this.neko.events.on('control.requesting', (id) => {
+        console.log('control.requesting', id)
+      })
+      this.neko.events.on('clipboard.update', (text) => {
+        console.log('clipboard.update', text)
+      })
+      this.neko.events.on('screen.configuration', (configurations) => {
+        console.log('screen.configuration', configurations)
+      })
+      this.neko.events.on('screen.size', (width, height, rate) => {
+        console.log('screen.size', width, height, rate)
+      })
+      this.neko.events.on('broadcast.status', (payload) => {
+        console.log('broadcast.status', payload)
+      })
+      this.neko.events.on('member.ban', (id, target) => {
+        console.log('member.ban', id, target)
+      })
+      this.neko.events.on('member.kick', (id, target) => {
+        console.log('member.kick', id, target)
+      })
+      this.neko.events.on('member.muted', (id, target) => {
+        console.log('member.muted', id, target)
+      })
+      this.neko.events.on('member.unmuted', (id, target) => {
+        console.log('member.unmuted', id, target)
+      })
+      this.neko.events.on('room.locked', (id) => {
+        console.log('room.locked', id)
+      })
+      this.neko.events.on('room.unlocked', (id) => {
+        console.log('room.unlocked', id)
+      })
     }
   }
 </script>
diff --git a/src/components/canvas.vue b/src/components/canvas.vue
index f14e4ec0..d7423064 100644
--- a/src/components/canvas.vue
+++ b/src/components/canvas.vue
@@ -1,6 +1,10 @@
 <template>
   <div ref="component" class="component">
-    <div ref="container" class="player-container" v-show="state.websocket == 'connected' && state.webrtc == 'connected'">
+    <div
+      ref="container"
+      class="player-container"
+      v-show="state.websocket == 'connected' && state.webrtc == 'connected'"
+    >
       <video ref="video" />
       <neko-overlay
         :webrtc="webrtc"
@@ -68,11 +72,11 @@
     @Ref('container') readonly _container!: HTMLElement
     @Ref('video') public readonly video!: HTMLVideoElement
 
+    public events = new EventEmitter()
     private observer = new ResizeObserver(this.onResize.bind(this))
     private websocket = new NekoWebSocket()
     private webrtc = new NekoWebRTC()
-    private messages = new NekoMessages()
-    public readonly events = new EventEmitter<NekoEvents>()
+    private messages = new NekoMessages(this.events)
 
     private state = {
       id: null,
@@ -184,7 +188,7 @@
       })
       this.webrtc.on('connected', () => {
         Vue.set(this.state, 'webrtc', 'connected')
-        this.events.emit('connected')
+        this.events.emit('connect')
       })
       this.webrtc.on('disconnected', () => {
         Vue.set(this.state, 'webrtc', 'disconnected')
diff --git a/src/internal/messages.ts b/src/internal/messages.ts
index 1161200d..6f8c64c4 100644
--- a/src/internal/messages.ts
+++ b/src/internal/messages.ts
@@ -17,12 +17,25 @@ import {
   AdminTargetPayload,
 } from '../types/messages'
 
+import EventEmitter from 'eventemitter3'
+
 export class NekoMessages {
+  _eventEmmiter: EventEmitter
+
+  constructor(eventEmitter: EventEmitter) {
+    this._eventEmmiter = eventEmitter
+  }
+
+  private emit(event: string, ...payload: any) {
+    this._eventEmmiter.emit(event, ...payload)
+  }
+
   /////////////////////////////
   // System Events
   /////////////////////////////
   public [EVENT.SYSTEM.DISCONNECT]({ message }: DisconnectPayload) {
     console.log('EVENT.SYSTEM.DISCONNECT')
+    this.emit('disconnect', message)
     //this.onDisconnected(new Error(message))
     //this.$vue.$swal({
     //  title: this.$vue.$t('connection.disconnected'),
@@ -37,21 +50,19 @@ export class NekoMessages {
   /////////////////////////////
   public [EVENT.MEMBER.LIST]({ members }: MemberListPayload) {
     console.log('EVENT.MEMBER.LIST')
+    this.emit('member.list', members)
     //this.$accessor.user.setMembers(members)
   }
 
   public [EVENT.MEMBER.CONNECTED](member: MemberPayload) {
     console.log('EVENT.MEMBER.CONNECTED')
+    this.emit('member.connected', member.id)
     //this.$accessor.user.addMember(member)
   }
 
   public [EVENT.MEMBER.DISCONNECTED]({ id }: MemberDisconnectPayload) {
     console.log('EVENT.MEMBER.DISCONNECTED')
-    //const member = this.member(id)
-    //if (!member) {
-    //  return
-    //}
-    //
+    this.emit('member.disconnected', id)
     //this.$accessor.user.delMember(id)
   }
 
@@ -60,6 +71,7 @@ export class NekoMessages {
   /////////////////////////////
   public [EVENT.CONTROL.LOCKED]({ id }: ControlPayload) {
     console.log('EVENT.CONTROL.LOCKED')
+    this.emit('host.change', id)
     //this.$accessor.remote.setHost(id)
     //this.$accessor.remote.changeKeyboard()
     //
@@ -81,6 +93,7 @@ export class NekoMessages {
 
   public [EVENT.CONTROL.RELEASE]({ id }: ControlPayload) {
     console.log('EVENT.CONTROL.RELEASE')
+    this.emit('host.change', null)
     //this.$accessor.remote.reset()
     //const member = this.member(id)
     //if (!member) {
@@ -100,6 +113,7 @@ export class NekoMessages {
 
   public [EVENT.CONTROL.REQUEST]({ id }: ControlPayload) {
     console.log('EVENT.CONTROL.REQUEST')
+    this.emit('control.request', id)
     //const member = this.member(id)
     //if (!member) {
     //  return
@@ -117,6 +131,7 @@ export class NekoMessages {
 
   public [EVENT.CONTROL.REQUESTING]({ id }: ControlPayload) {
     console.log('EVENT.CONTROL.REQUESTING')
+    this.emit('control.requesting', id)
     //const member = this.member(id)
     //if (!member || member.ignored) {
     //  return
@@ -133,17 +148,14 @@ export class NekoMessages {
 
   public [EVENT.CONTROL.GIVE]({ id, target }: ControlTargetPayload) {
     console.log('EVENT.CONTROL.GIVE')
-    //const member = this.member(target)
-    //if (!member) {
-    //  return
-    //}
-    //
-    //this.$accessor.remote.setHost(member)
+    this.emit('host.change', target)
+    //this.$accessor.remote.setHost(target)
     //this.$accessor.remote.changeKeyboard()
   }
 
   public [EVENT.CONTROL.CLIPBOARD]({ text }: ControlClipboardPayload) {
     console.log('EVENT.CONTROL.CLIPBOARD')
+    this.emit('clipboard.update', text)
     //this.$accessor.remote.setClipboard(text)
   }
 
@@ -152,11 +164,13 @@ export class NekoMessages {
   /////////////////////////////
   public [EVENT.SCREEN.CONFIGURATIONS]({ configurations }: ScreenConfigurationsPayload) {
     console.log('EVENT.SCREEN.CONFIGURATIONS')
+    this.emit('screen.configuration', configurations)
     //this.$accessor.video.setConfigurations(configurations)
   }
 
   public [EVENT.SCREEN.RESOLUTION]({ id, width, height, rate }: ScreenResolutionPayload) {
     console.log('EVENT.SCREEN.RESOLUTION')
+    this.emit('screen.size', width, height, rate)
     //this.$accessor.video.setResolution({ width, height, rate })
   }
 
@@ -165,6 +179,7 @@ export class NekoMessages {
   /////////////////////////////
   public [EVENT.BROADCAST.STATUS](payload: BroadcastStatusPayload) {
     console.log('EVENT.BROADCAST.STATUS')
+    this.emit('broadcast.status', payload)
     //this.$accessor.settings.broadcastStatus(payload)
   }
 
@@ -172,65 +187,73 @@ export class NekoMessages {
   // Admin Events
   /////////////////////////////
   public [EVENT.ADMIN.BAN]({ id, target }: AdminTargetPayload) {
+    if (!target) return
+
     console.log('EVENT.ADMIN.BAN')
+    this.emit('member.ban', id, target)
     // TODO
   }
 
   public [EVENT.ADMIN.KICK]({ id, target }: AdminTargetPayload) {
+    if (!target) return
+
     console.log('EVENT.ADMIN.KICK')
+    this.emit('member.kick', id, target)
     // TODO
   }
 
   public [EVENT.ADMIN.MUTE]({ id, target }: AdminTargetPayload) {
+    if (!target) return
+
     console.log('EVENT.ADMIN.MUTE')
-    //if (!target) {
-    //  return
-    //}
-    //
+    this.emit('member.muted', id, target)
     //this.$accessor.user.setMuted({ id: target, muted: true })
   }
 
   public [EVENT.ADMIN.UNMUTE]({ id, target }: AdminTargetPayload) {
+    if (!target) return
+
     console.log('EVENT.ADMIN.UNMUTE')
-    //if (!target) {
-    //  return
-    //}
-    //
+    this.emit('member.unmuted', id, target)
     //this.$accessor.user.setMuted({ id: target, muted: false })
   }
 
   public [EVENT.ADMIN.LOCK]({ id }: AdminPayload) {
     console.log('EVENT.ADMIN.LOCK')
+    this.emit('room.locked', id)
     //this.$accessor.setLocked(true)
   }
 
   public [EVENT.ADMIN.UNLOCK]({ id }: AdminPayload) {
     console.log('EVENT.ADMIN.UNLOCK')
+    this.emit('room.unlocked', id)
     //this.$accessor.setLocked(false)
   }
 
   public [EVENT.ADMIN.CONTROL]({ id, target }: AdminTargetPayload) {
+    if (!target) return
+
     console.log('EVENT.ADMIN.CONTROL')
+    this.emit('host.change', id)
     //this.$accessor.remote.setHost(id)
     //this.$accessor.remote.changeKeyboard()
   }
 
   public [EVENT.ADMIN.RELEASE]({ id, target }: AdminTargetPayload) {
+    if (!target) return
+
     console.log('EVENT.ADMIN.RELEASE')
+    this.emit('host.change', null)
     //this.$accessor.remote.reset()
   }
 
   public [EVENT.ADMIN.GIVE]({ id, target }: AdminTargetPayload) {
+    if (!target) return
+
     console.log('EVENT.ADMIN.GIVE')
-    //if (!target) {
-    //  return
-    //}
-    //
-    //const member = this.member(target)
-    //if (member) {
-    //  this.$accessor.remote.setHost(member)
-    //  this.$accessor.remote.changeKeyboard()
-    //}
+    this.emit('host.change', target)
+    //this.$accessor.remote.setHost(target)
+    //this.$accessor.remote.changeKeyboard()
   }
 
   // Utilities