diff --git a/front/public/download.png b/front/public/download.png
new file mode 100644
index 0000000..5f806d8
Binary files /dev/null and b/front/public/download.png differ
diff --git a/front/public/ground_displacement.jpg b/front/public/ground_displacement.jpg
new file mode 100644
index 0000000..a99db5f
Binary files /dev/null and b/front/public/ground_displacement.jpg differ
diff --git a/front/public/picture_02.jpg b/front/public/picture_02.jpg
new file mode 100644
index 0000000..af42be2
Binary files /dev/null and b/front/public/picture_02.jpg differ
diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue
index 8c2ea1f..c1849af 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -5,7 +5,7 @@ import {
     PlaneGeometry, SpriteMaterial, TextureLoader, Vector2, Vector3,
 } from 'three';
 
-import { useTresContext, useSeek, useRenderLoop } from '@tresjs/core';
+import { useTresContext, useSeek, useRenderLoop, useTexture } from '@tresjs/core';
 import { useGLTF } from '@tresjs/cientos'
 
 import Env from './env.vue'
@@ -40,7 +40,7 @@ const loadModels = async () => {
     envVars.hdr_json = raw_data.hdr_json ? `${IMAGE_URL}/${raw_data.hdr_json}` : undefined
     envVars.hdr_webp = raw_data.hdr_webp ? `${IMAGE_URL}/${raw_data.hdr_webp}` : undefined
 
-    tiltShift.focus = raw_data.max_distance * 0.33
+    tiltShift.focus = raw_data.min_distance * 0.75
     tiltShift.aperture = 10
     tiltShift.maxblur = 1
 
@@ -183,6 +183,15 @@ const clickEvent = (event: MouseEvent) => {
     }
 }
 
+const groundTexture = await useTexture({
+    displacementMap: '/ground_displacement.jpg',
+})
+const ground = reactive({
+    color: props.clearColor,
+    displacementMap: groundTexture.displacementMap,
+    displacementScale: 50,
+    roughness: 100
+})
 watch(() => sidebar_scene.list, () => {
     sidebar_scene.list.forEach(element => {
         const el = seekByName(scene.value, element.name)
@@ -205,5 +214,9 @@ watch(() => sidebar_scene.list, () => {
         <template v-for="(item, i) in clickable_items">
             <TresMesh v-bind="item" :ref="clickable_refs[i]" />
         </template>
+        <TresMesh :position-y="-0.25 * ground.displacementScale" :rotate-x="-Math.PI / 2" receive-shadow>
+            <TresCircleGeometry :args="[tiltShift.focus * 100, tiltShift.focus * 100]" />
+            <TresMeshStandardMaterial v-bind="ground" />
+        </TresMesh>
     </TresGroup>
 </template>
\ No newline at end of file
diff --git a/front/src/components/Promo/main.vue b/front/src/components/Promo/main.vue
index 40dc55f..65c8f65 100644
--- a/front/src/components/Promo/main.vue
+++ b/front/src/components/Promo/main.vue
@@ -4,7 +4,7 @@ import type { Ref } from 'vue'
 import { RouterLink, useRoute } from 'vue-router';
 
 import { Vector3 } from 'three';
-import { TresCanvas } from '@tresjs/core';
+import { TresCanvas, useTexture } from '@tresjs/core';
 import { OrbitControls } from '@tresjs/cientos'
 import '@tresjs/leches/styles'
 
@@ -63,13 +63,10 @@ const clearColor = 'steelBlue'
                 <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
                 <OrbitControls v-bind="controlsState" @change="onChange" make-default />
                 <Suspense>
-                    <LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan" :clear-color="clearColor" />
+                    <LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan"
+                        :clear-color="clearColor" />
                 </Suspense>
-                <TresMesh :position-y="-1" :rotate-x="-Math.PI / 2" receive-shadow>
-                    <TresPlaneGeometry :args="[2000, 2000]" />
-                    <!-- <TresShadowMaterial :opacity="0.2" /> -->
-                    <TresMeshStandardMaterial :color="clearColor" />
-                </TresMesh>
+
             </TresCanvas>
             <div class="homelink">
                 <a href="#" @click.prevent="sidebar.open" v-if="!sidebar.is_open">
diff --git a/front/src/components/Promo/post_pocessing.vue b/front/src/components/Promo/post_pocessing.vue
index a5d5c45..3427db7 100644
--- a/front/src/components/Promo/post_pocessing.vue
+++ b/front/src/components/Promo/post_pocessing.vue
@@ -8,14 +8,14 @@ import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 import { useTresContext, useLoop } from '@tresjs/core';
 import { watch } from 'vue';
-import { Fog, FogExp2 } from 'three';
+import { Color, Fog, FogExp2 } from 'three';
 
 const { renderer, camera, scene } = useTresContext()
 
 const composer = new EffectComposer(renderer.value);
 
 const props = defineProps(['tiltShift', 'clearColor'])
-const k = { start: 0.25, end: 3 }
+const k = { start: 0.75, end: 3 }
 
 if (camera.value) {
     const renderPass = new RenderPass(scene.value, camera.value);
@@ -30,13 +30,11 @@ if (camera.value) {
     composer.addPass(renderPass);
     composer.addPass(bokehPass);
     composer.addPass(outputPass);
-
-    // scene.value.fog = new FogExp2(0xff0000, 0.005)
     scene.value.fog = new Fog(props.clearColor, props.tiltShift.focus * k.start, props.tiltShift.focus * k.end)
 }
 const { onAfterRender } = useLoop()
 onAfterRender(() => {
-    composer.render()
+    // composer.render()
 })
 watch(props.tiltShift, () => {
     if (camera.value) {