diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue
index d0e6f49..de070c8 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -23,6 +23,14 @@ interface model3DType {
     modelUrl?: string,
     modelFile?: any
 }
+interface clickableAreaType {
+    description: string;
+    id: number;
+    name: string;
+    object_name: string;
+    source: number;
+    target: number;
+}
 
 function shadows_and_pos(scene: any) {
     scene.children.forEach((el: any) => {
@@ -33,14 +41,18 @@ function shadows_and_pos(scene: any) {
 }
 
 const models = ref<model3DType[]>([])
+const clickable = ref<clickableAreaType[]>([])
 const { controls, raycaster, camera, scene } = useTresContext()
+
 const loadModels = async () => {
     const res = await fetch(`${SERVER_URL}/api/obj/element/?parent__isnull=True`)
     const data = await res.json() as element3DType[]
+    if (!controls.value) return
+    const c = (controls.value as any)
     const distance = {
-        min: controls.value.minDistance,
-        max: controls.value.maxDistance == Infinity ? 1 : controls.value.maxDistance,
-    }
+        min: c.minDistance,
+        max: c.maxDistance == Infinity ? 1 : c.maxDistance,
+    };
     for (let index = 0; index < data.length; index++) {
         const element = data[index];
         const item = {} as model3DType
@@ -62,11 +74,15 @@ const loadModels = async () => {
         if (max_size.x > box_size.x) max_size.x = box_size.x
         if (max_size.y > box_size.y) max_size.y = box_size.y
         if (max_size.z > box_size.z) max_size.z = box_size.z
+
+        const res = await fetch(`${SERVER_URL}/api/obj/clickable/?source=${element.id}`)
+        const clickable_areas = await res.json()
+        clickable.value.push(...clickable_areas)
     }
-    controls.value.maxDistance = distance.max
-    controls.value.minDistance = distance.min
-    controls.value._needsUpdate = true
-    controls.value.update(1)
+    (controls.value as any).maxDistance = distance.max;
+    (controls.value as any).minDistance = distance.min;
+    (controls.value as any)._needsUpdate = true;
+    (controls.value as any).update(1)
 }
 onMounted(() => {
     loadModels()
diff --git a/front/src/components/Promo/main.vue b/front/src/components/Promo/main.vue
index 7264dc8..c7fddd9 100644
--- a/front/src/components/Promo/main.vue
+++ b/front/src/components/Promo/main.vue
@@ -22,8 +22,6 @@ const camera = ref()
 const cameraPosition = ref([1, 1, 1]) as unknown as Ref<Vector3>
 
 const controlsState = reactive({
-    // minDistance: 2,
-    // maxDistance: 30,
     maxPolarAngle: (Math.PI / 2) - 0.02,
     enableZoom: false,
 })