diff --git a/templates/hid.html b/templates/hid.html
index e0cf514..5806ff8 100644
--- a/templates/hid.html
+++ b/templates/hid.html
@@ -6,76 +6,110 @@
   <style>
   </style>
   <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
+  <script>
+    function zapis(t) {
+      $("div").text(t);
+    }
+    
+    var previous;
+    
+    $(window).bind('keydown', function(event) {
+      event.preventDefault();
+      var str = String.fromCharCode(event.which).toLowerCase();
+    
+      var ctrl = event.ctrlKey;
+      if (previous == 17) {
+        ctrl = true;
+      }
+    
+      var obj = {
+        ctrlKey: ctrl,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        which: event.which,
+      code: event.code,
+        str: str
+      }
+    
+      if (event.which != 16 && event.which != 17 && event.which != 18) {
+        console.log(obj);
+    
+        var ret = $.ajax({
+            type: "POST",
+            url: "hid/keyboard",
+            data: JSON.stringify(obj),
+            contentType: "application/json; charset=utf-8",
+            dataType: "json"
+        });
+    
+      console.log(ret);
+      }
+    
+      var text = "";
+      if (ctrl) {
+        text = text + ' + Control';
+      }
+      if (event.shiftKey) {
+        text = text + ' + Shift';
+      }
+      if (event.altKey) {
+        text = text + ' + Alt';
+      }
+      text = text + ' + ' + str;
+      text = text.substr(3);
+      zapis(text);
+    
+      previous = event.keyCode;
+    
+    });
+    var btn=0;
+    var posX=0;
+    var posY=0;
+    var wheel=0;
+    
+    var socket = io();
+    
+    $(document).ready(function(){
+    
+      $("canvas").mousedown(function(event){
+        btn=event.buttons;
+        handleMouse();
+      });
+      $("canvas").mouseup(function(event){
+        btn=event.buttons;
+        handleMouse();
+      });
+      $("canvas").mousemove(function(event){
+        posX=event.offsetX;
+        posY=event.offsetY;
+        handleMouse();
+      });
+    });
+    
+    function handleMouse() {
+      $("span").text(btn +", "+ posX + ", " + posY);
+      sendMouse(btn, posX, posY, wheel);
+    }
+    
+    function sendMouse(btn, x, y) {
+      var obj = {
+        x: x,
+        y: y,
+        btn: btn,
+        wheel: wheel,
+      }
+    
+      socket.emit('mouseEvent', JSON.stringify(obj));
+    };
+    </script>
 </head>
 <body>
-	HID input service, POST data to /keyboard or /mouse <br/>
-<div>
-</div>
+  HID Remote Keyboard and mouse<br/>
 
-<br/>
-Server response: <span></span>
-
-<script>
-function zapis(t) {
-  $("div").text(t);
-}
-
-var previous;
-
-$(window).bind('keydown', function(event) {
-  event.preventDefault();
-  var str = String.fromCharCode(event.which).toLowerCase();
-
-  var ctrl = event.ctrlKey;
-  if (previous == 17) {
-    ctrl = true;
-  }
-
-  var obj = {
-    ctrlKey: ctrl,
-    shiftKey: event.shiftKey,
-    altKey: event.altKey,
-    which: event.which,
-	code: event.code,
-    str: str
-  }
-
-  if (event.which != 16 && event.which != 17 && event.which != 18) {
-    console.log(obj);
-
-    var ret = $.ajax({
-        type: "POST",
-        url: "hid/keyboard",
-        data: JSON.stringify(obj),
-        contentType: "application/json; charset=utf-8",
-        dataType: "json"
-    });
-
-	$("span").text(ret.responseText);
-	console.log(ret);
-	
-
-  }
-
-  var text = "";
-  if (ctrl) {
-    text = text + ' + Control';
-  }
-  if (event.shiftKey) {
-    text = text + ' + Shift';
-  }
-  if (event.altKey) {
-    text = text + ' + Alt';
-  }
-  text = text + ' + ' + str;
-  text = text.substr(3);
-  zapis(text);
-
-  previous = event.keyCode;
-
-});
-
-</script>
+<div></div>
  
+<span></span><br/><br/>
+<canvas width=1920 height=1080 style="border: 1px solid black" oncontextmenu="return false" onwheel='wheel=event.deltaY*-1; handleMouse(); wheel=0; return false;' ></canvas>
 </body>
 </html>
diff --git a/templates/keyboard.html b/templates/keyboard.html
index e0cf514..69712c6 100644
--- a/templates/keyboard.html
+++ b/templates/keyboard.html
@@ -8,7 +8,7 @@
   <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
 </head>
 <body>
-	HID input service, POST data to /keyboard or /mouse <br/>
+	HID input keyboard, POST data to /keyboard<br/>
 <div>
 </div>
 
diff --git a/templates/mouse.html b/templates/mouse.html
index 84552c9..8f74378 100644
--- a/templates/mouse.html
+++ b/templates/mouse.html
@@ -36,8 +36,6 @@ $(document).ready(function(){
 		posY=event.offsetY;
 		handleMouse();
 	});
-
-
 });
 
 function handleMouse() {
