diff --git a/src/app.vue b/src/app.vue
index f30772d3..51ad50a5 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -2,23 +2,50 @@
   <div>
     <button @click="connect()">Connect</button>
     <button @click="disconnect()">Disonnect</button>
-    <button @click="neko.control.request()">request control</button>
-    <button @click="neko.control.release()">release control</button>
-    <button @click="neko.video.pause()">stop</button><br />
-    W: <input type="text" v-model="width" /><br />
-    H: <input type="text" v-model="height" /><br />
-    <button @click="resize()">Resize</button>
-    <br />
-    <!--websocket_state: {{ websocket_state }}<br />
-    webrtc_state: {{ webrtc_state }}<br />-->
+
+    <template v-if="loaded && neko.connected">
+      <button v-if="!is_controlling" @click="neko.control.request()">request control</button>
+      <button v-else @click="neko.control.release()">release control</button>
+
+      <button @click="neko.video.pause()">pause stream</button>
+      <button @click="neko.video.play()">play stream</button><br />
+    </template>
+
+      <table class="states" v-if="loaded">
+        <tr><th>is connected</th><td>{{ neko.connected ? 'yes' : 'no' }}</td></tr>
+        <tr><th>is contolling</th><td>{{ is_controlling ? 'yes' : 'no' }}</td></tr>
+        <tr><th>websocket state</th><td>{{ neko.state.websocket }}</td></tr>
+        <tr><th>webrtc state</th><td>{{ neko.state.webrtc }}</td></tr>
+      </table>
 
     <div ref="container" style="width: 1280px; height: 720px; border: 2px solid red">
       <neko-canvas ref="neko" />
     </div>
+
+    <template v-if="loaded">
+      <button
+        v-for="{ width, height, rate } in available_screen_sizes"
+        :key="width + height + rate"
+        @click="neko.screen.size(width, height, rate)"
+      >
+        {{ width }}x{{ height }}@{{ rate }}
+      </button>
+    </template>
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  .states {
+    td, th {
+      border: 1px solid black;
+      padding: 4px;
+    }
+    
+    th {
+      text-align: right;
+    }
+  }
+</style>
 
 <script lang="ts">
   import { Vue, Component, Ref, Watch } from 'vue-property-decorator'
@@ -34,32 +61,38 @@
   export default class extends Vue {
     @Ref('container') readonly container!: HTMLElement
     @Ref('neko') readonly neko!: Neko
+    loaded: boolean = false
 
-    width = '720px'
-    height = '1280px'
+    get is_controlling() {
+      return this.neko.state.is_controlling
+    }
+
+    get available_screen_sizes() {
+      return this.neko.state.available_screen_sizes
+    }
 
     connect() {
-      this.neko.connect('ws://192.168.1.20:3000/', 'neko')
+      this.neko.connect('ws://192.168.1.20:3000/', 'admin', 'test')
     }
 
     disconnect() {
       this.neko.disconnect()
     }
 
-    resize() {
-      this.container.style.width = this.width
-      this.container.style.height = this.height
-    }
-
     mounted() {
-      this.neko.events.on('connect', () => {
-        console.log('connected...')
+      this.loaded = true
+
+      this.neko.events.on('system.websocket', (status) => {
+        console.log('system.websocket', status)
       })
-      this.neko.events.on('host.change', (id) => {
-        console.log('host.change', id)
+      this.neko.events.on('system.webrtc', (status) => {
+        console.log('system.webrtc', status)
       })
-      this.neko.events.on('disconnect', (message) => {
-        console.log('disconnect', message)
+      this.neko.events.on('system.connect', () => {
+        console.log('system.connect')
+      })
+      this.neko.events.on('system.disconnect', (message) => {
+        console.log('system.disconnect', message)
       })
       this.neko.events.on('member.list', (members) => {
         console.log('member.list', members)
@@ -70,6 +103,9 @@
       this.neko.events.on('member.disconnected', (id) => {
         console.log('member.disconnected', id)
       })
+      this.neko.events.on('control.host', (id) => {
+        console.log('control.host', id)
+      })
       this.neko.events.on('control.request', (id) => {
         console.log('control.request', id)
       })
diff --git a/src/components/canvas.vue b/src/components/canvas.vue
index 0ca906f5..b9147a7b 100644
--- a/src/components/canvas.vue
+++ b/src/components/canvas.vue
@@ -75,9 +75,9 @@
     private websocket = new NekoWebSocket()
     private webrtc = new NekoWebRTC()
     private observer = new ResizeObserver(this.onResize.bind(this))
-    public events = new NekoMessages(this.websocket)
 
-    private state = {
+    public events = new NekoMessages(this.websocket)
+    public state = {
       id: null,
       display_name: null,
       screen_size: {
@@ -85,6 +85,7 @@
         height: 720,
         rate: 30,
       },
+      available_screen_sizes: [],
       scroll: {
         sensitivity: 10,
         invert: true,
@@ -94,6 +95,10 @@
       webrtc: 'disconnected',
     } as NekoState
 
+    public get connected() {
+      return this.state.websocket == 'connected' && this.state.webrtc == 'connected'
+    }
+
     public control = {
       request: () => {
         this.websocket.send('control/request')
@@ -109,11 +114,21 @@
       },
     }
 
-    public connect(url: string, password: string) {
+    public scroll = {
+      sensitivity: (sensitivity: number) => {
+        Vue.set(this.state.scroll, 'sensitivity', sensitivity)
+      },
+      inverse: (inverse: boolean) => {
+        Vue.set(this.state.scroll, 'inverse', inverse)
+      },
+    }
+
+    public connect(url: string, password: string, name: string) {
       if (this.websocket.connected) {
         throw new Error('client already connected')
       }
 
+      Vue.set(this.state, 'display_name', name)
       this.websocket.connect(url, password)
     }
 
@@ -148,6 +163,36 @@
             Vue.set(this.state, 'screen_size', payload)
             this.onResize()
             break
+          case 'screen/configurations':
+            let data = []
+            for (const i of Object.keys(payload.configurations)) {
+              const { width, height, rates } = payload.configurations[i]
+              if (width >= 600 && height >= 300) {
+                for (const j of Object.keys(rates)) {
+                  const rate = rates[j]
+                  if (rate === 30 || rate === 60) {
+                    data.push({
+                      width,
+                      height,
+                      rate,
+                    })
+                  }
+                }
+              }
+            }
+
+            let conf = data.sort((a, b) => {
+              if (b.width === a.width && b.height == a.height) {
+                return b.rate - a.rate
+              } else if (b.width === a.width) {
+                return b.height - a.height
+              }
+              return b.width - a.width
+            })
+
+            Vue.set(this.state, 'available_screen_sizes', conf)
+            this.onResize()
+            break
         }
       })
       this.websocket.on('connecting', () => {
@@ -194,6 +239,7 @@
     }
 
     private beforeDestroy() {
+      this.observer.disconnect()
       this.webrtc.disconnect()
       this.websocket.disconnect()
     }
diff --git a/src/types/state.ts b/src/types/state.ts
index 96cb69f5..fab82e7c 100644
--- a/src/types/state.ts
+++ b/src/types/state.ts
@@ -13,7 +13,9 @@ export default interface State {
   id: string | null
   display_name: string | null
   screen_size: ScreenSize
+  available_screen_sizes: ScreenSize[]
   scroll: Scroll
+  is_controlling: boolean
   websocket: 'connected' | 'connecting' | 'disconnected'
   webrtc: 'connected' | 'connecting' | 'disconnected'
 }