diff --git a/app.vue b/app.vue
index 1b3b599..e2d4a7d 100644
--- a/app.vue
+++ b/app.vue
@@ -42,6 +42,19 @@ function keyUpHandler(e: KeyboardEvent) {
   e.preventDefault()
   return false
 }
+function mouseDownHandler(e: MouseEvent) {
+  if (e.button !== 2) { return }
+  goStore.zoomKeyPressed = true
+  e.preventDefault()
+  return false
+}
+
+function mouseUpHandler(e: MouseEvent) {
+  if (e.button !== 2) { return }
+  goStore.zoomKeyPressed = false
+  e.preventDefault()
+  return false
+}
 
 function follow_mouse(e: MouseEvent) {
   goStore.clientMouseX = e.clientX
@@ -49,14 +62,14 @@ function follow_mouse(e: MouseEvent) {
 }
 
 onMounted(() => {
-  window.addEventListener("keydown", (keyDownHandler))
-  window.addEventListener("keyup", keyUpHandler)
+  window.addEventListener("mousedown", mouseDownHandler)
+  window.addEventListener("mouseup", mouseUpHandler)
   document.addEventListener("mousemove", follow_mouse)
 })
 
 onUnmounted(() => {
-  window.removeEventListener("keydown", (keyDownHandler))
-  window.removeEventListener("keyup", keyUpHandler)
+  window.removeEventListener("mousedown", mouseDownHandler)
+  window.removeEventListener("mouseup", mouseUpHandler)
   document.removeEventListener("mousemove", follow_mouse)
 })
 
@@ -64,6 +77,7 @@ onDeactivated
 </script>
 <template>
   <div class="root_dom_div">
+    <CardOverlay v-if="goStore.zoomKeyPressed" :card_id="goStore.hoveredCard" />
     <NuxtPage />
   </div>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index 387535c..2b25cc2 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -18,8 +18,6 @@ import goStore, { setReady } from "@/netcode";
     <GameBoard v-if="goStore.context != 'lobby' && goStore.context != 'login'"></GameBoard>
     <LobbyView v-if="goStore.context == 'lobby'"></LobbyView>
     <RulesDisplay v-if="goStore.context == 'rules'"></RulesDisplay>
-    <CardOverlay v-if="goStore.zoomKeyPressed" :card_id="goStore.hoveredCard">
-    </CardOverlay>
   </div>
 </template>