diff --git a/src/component/internal/control.ts b/src/component/internal/control.ts
index 4efc41d2..8aa33640 100644
--- a/src/component/internal/control.ts
+++ b/src/component/internal/control.ts
@@ -1,14 +1,34 @@
+import Vue from 'vue'
+
 import * as EVENT from '../types/events'
 import * as message from '../types/messages'
 
 import { NekoConnection } from './connection'
+import { Control } from '../types/state'
 
 export class NekoControl {
   // eslint-disable-next-line
   constructor(
     private readonly _connection: NekoConnection,
+    private readonly _state: Control,
   ) {}
 
+  public lock() {
+    Vue.set(this._state, 'locked', true)
+  }
+
+  public unlock() {
+    Vue.set(this._state, 'locked', false)
+  }
+
+  public request() {
+    this._connection.websocket.send(EVENT.CONTROL_REQUEST)
+  }
+
+  public release() {
+    this._connection.websocket.send(EVENT.CONTROL_RELEASE)
+  }
+
   public keypress(keysym: number) {
     this._connection.websocket.send(EVENT.CONTROL_KEYPRESS, { keysym } as message.ControlKey)
   }
diff --git a/src/component/main.vue b/src/component/main.vue
index 148bfa2a..c47f2743 100644
--- a/src/component/main.vue
+++ b/src/component/main.vue
@@ -14,6 +14,7 @@
         :cursorDraw="inactiveCursorDrawFunction"
       />
       <neko-overlay
+        :style="{ pointerEvents: state.control.locked ? 'none' : 'auto' }"
         :sessions="state.sessions"
         :hostId="state.control.host_id"
         :webrtc="connection.webrtc"
@@ -24,8 +25,8 @@
         :cursorDraw="cursorDrawFunction"
         :implicitControl="state.control.implicit_hosting && state.sessions[state.session_id].profile.can_host"
         :inactiveCursors="state.cursors.enabled && state.sessions[state.session_id].profile.sends_inactive_cursor"
-        @implicitControlRequest="connection.websocket.send('control/request')"
-        @implicitControlRelease="connection.websocket.send('control/release')"
+        @implicitControlRequest="control.request()"
+        @implicitControlRelease="control.release()"
         @updateKeyboardModifiers="updateKeyboardModifiers($event)"
         @uploadDrop="uploadDrop($event)"
         @onAction="events.emit('overlay.' + $event)"
@@ -161,6 +162,7 @@
         },
         host_id: null,
         implicit_hosting: false,
+        locked: false,
       },
       screen: {
         size: {
@@ -391,7 +393,7 @@
       this.connection.websocket.send(EVENT.SEND_BROADCAST, { subject, body })
     }
 
-    public control = new NekoControl(this.connection)
+    public control = new NekoControl(this.connection, this.state.control)
 
     public get room(): RoomApi {
       return this.api.room
diff --git a/src/component/types/state.ts b/src/component/types/state.ts
index 5c7930ac..c4b1f2f4 100644
--- a/src/component/types/state.ts
+++ b/src/component/types/state.ts
@@ -64,6 +64,7 @@ export interface Control {
   keyboard: Keyboard
   host_id: string | null
   implicit_hosting: boolean
+  locked: boolean
 }
 
 export interface Scroll {