diff --git a/src/core/assets/inject.html b/src/core/assets/inject.html
index 3195ec82..9d941fcf 100644
--- a/src/core/assets/inject.html
+++ b/src/core/assets/inject.html
@@ -1,4 +1,66 @@
-<!-- Code injected by Live Server++: -->
-<script data-live-server-ignore="true" src="/_live-server_/inject/diffDOM.js"></script>
-<script data-live-server-ignore="true" src="/_live-server_/inject/live-reload.js"></script>
-<!-- -------------- -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Hand Drawing - Ramadan</title>
+
+<!-- MediaPipe Hands -->
+<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"></script>
+
+<style>
+  body{
+    margin:0;
+    background:black;
+    overflow:hidden;
+  }
+
+  canvas{
+    position:absolute;
+    left:0;
+    top:0;
+  }
+
+  video{
+    display:none;
+  }
+</style>
+</head>
+
+<body>
+
+<video class="input_video"></video>
+<canvas class="output_canvas"></canvas>
+
+<script>
+const videoElement = document.querySelector('.input_video');
+const canvasElement = document.querySelector('.output_canvas');
+const canvasCtx = canvasElement.getContext('2d');
+
+canvasElement.width = window.innerWidth;
+canvasElement.height = window.innerHeight;
+
+let drawingPoints = [];
+
+// ===== Results from MediaPipe =====
+function onResults(results) {
+
+  canvasCtx.save();
+  canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
+
+  // draw camera image
+  canvasCtx.drawImage(
+    results.image,
+    0,
+    0,
+    canvasElement.width,
+    canvasElement.height
+  );
+
+  if (results.multiHandLandmarks) {
+    for (const landmarks of results.multiHandLandmarks) {
+
+      // draw hand skeleton
+      drawConnectors(canvasCtx, landmarks, HAND_CONNECTIONS,
+        {color:'#00FFAA', lineWidth:3});
