diff --git a/frontend/src/components/Container.svelte b/frontend/src/components/Container.svelte
index c8cb555..f5dd952 100644
--- a/frontend/src/components/Container.svelte
+++ b/frontend/src/components/Container.svelte
@@ -4,6 +4,7 @@
   import Drag from "./Drag.svelte";
 
   let ws: WebSocket | null = $state(null);
+  let image: HTMLImageElement | null = $state(null);
 
   let parent: HTMLElement | null = $state(null);
 
@@ -21,15 +22,26 @@
   });
 </script>
 
-<div bind:this={parent} class="relative border border-red-500">
-  <img src="/scene_drawing.png" alt="moradi" class="absolute" />
-  {#each trackers as tracker}
-    <Drag
-      bind:id={tracker.id}
-      bind:x={tracker.x}
-      bind:y={tracker.y}
-      {ws}
-      {parent}
-    />
-  {/each}
+<div class="relative">
+  <img src="/bg.png" alt="" bind:this={image} class="scale-50" />
+  <div
+    bind:this={parent}
+    class="absolute inset-0 border border-red-500"
+    style={"width: " +
+      image?.getBoundingClientRect().width +
+      "px; height: " +
+      image?.getBoundingClientRect().height +
+      "px;" +
+      "transform: translate(50%, 50%);"}
+  >
+    {#each trackers as tracker}
+      <Drag
+        bind:id={tracker.id}
+        bind:x={tracker.x}
+        bind:y={tracker.y}
+        {ws}
+        {parent}
+      />
+    {/each}
+  </div>
 </div>
diff --git a/frontend/src/components/Drag.svelte b/frontend/src/components/Drag.svelte
index d87fa7b..5edb2ff 100644
--- a/frontend/src/components/Drag.svelte
+++ b/frontend/src/components/Drag.svelte
@@ -68,7 +68,7 @@
   onpointerup={onPointerUp}
   onpointermove={onPointerMove}
   style={`transform: translate(${vis_x}px, ${vis_y}px)`}
-  class="absolute flex h-40 w-40 touch-none items-center justify-center rounded-full border-red-400 bg-red-400"
+  class="absolute flex h-40 w-40 touch-none select-none items-center justify-center rounded-full border-red-400 bg-red-400"
 >
   Tracker {id}
 </div>