diff --git a/resources/openbim-components.js b/resources/openbim-components.js
index 318c5b519..604df1158 100644
--- a/resources/openbim-components.js
+++ b/resources/openbim-components.js
@@ -12847,6 +12847,11 @@ class Drawer extends SimpleUIComponent {
         this.domElement.style.height = height;
         this.domElement.style.width = width;
     }
+    get containerSize() {
+        const height = this.domElement.clientHeight;
+        const width = this.domElement.clientWidth;
+        return { height, width };
+    }
     set alignment(value) {
         const classes = this.domElement.classList;
         this._type = value;
@@ -120432,7 +120437,14 @@ class RoadNavigator extends Component {
                 }
             }
         }
-        await this.scene.controls.fitToBox(totalBBox, false);
+        const scaledBbox = new THREE$1.Box3();
+        const size = new THREE$1.Vector3();
+        const center = new THREE$1.Vector3();
+        totalBBox.getCenter(center);
+        totalBBox.getSize(size);
+        size.multiplyScalar(1.2);
+        scaledBbox.setFromCenterAndSize(center, size);
+        await this.scene.controls.fitToBox(scaledBbox, false);
     }
     setupEvents() {
         const mousePositionSphere = new THREE$1.Mesh(new THREE$1.SphereGeometry(0.5), new THREE$1.MeshBasicMaterial({ color: 0xff0000 }));
@@ -120625,7 +120637,8 @@ CurveHighlighter.settings = {
         LINE: [213 / 255, 0 / 255, 255 / 255],
         CIRCULARARC: [0 / 255, 46, 255 / 255],
         CLOTHOID: [0 / 255, 255 / 255, 0 / 255],
-        PARABOLIC: [0 / 255, 255 / 255, 72 / 255],
+        PARABOLICARC: [0 / 255, 255 / 255, 72 / 255],
+        CONSTANTGRADIENT: [213 / 255, 0 / 255, 255 / 255],
     },
 };
 
@@ -120846,6 +120859,10 @@ class RoadElevationNavigator extends RoadNavigator {
             const height = this.scene.size.y;
             this.scene.setSize(height, width);
         });
+        drawer.onResized.add(() => {
+            const { width, height } = drawer.containerSize;
+            this.scene.setSize(height, width);
+        });
         if (this.components.renderer.isUpdateable()) {
             this.components.renderer.onAfterUpdate.add(async () => {
                 if (drawer.visible) {
diff --git a/src/civil/RoadElevationNavigator/index.ts b/src/civil/RoadElevationNavigator/index.ts
index fd2e17d77..e71bb3ada 100644
--- a/src/civil/RoadElevationNavigator/index.ts
+++ b/src/civil/RoadElevationNavigator/index.ts
@@ -53,6 +53,11 @@ export class RoadElevationNavigator extends RoadNavigator implements UI {
       this.scene.setSize(height, width);
     });
 
+    drawer.onResized.add(() => {
+      const { width, height } = drawer.containerSize;
+      this.scene.setSize(height, width);
+    });
+
     if (this.components.renderer.isUpdateable()) {
       this.components.renderer.onAfterUpdate.add(async () => {
         if (drawer.visible) {
diff --git a/src/civil/RoadNavigator/index.ts b/src/civil/RoadNavigator/index.ts
index 267c38077..00cf820a1 100644
--- a/src/civil/RoadNavigator/index.ts
+++ b/src/civil/RoadNavigator/index.ts
@@ -68,7 +68,15 @@ export abstract class RoadNavigator extends Component<any> {
       }
     }
 
-    await this.scene.controls.fitToBox(totalBBox, false);
+    const scaledBbox = new THREE.Box3();
+    const size = new THREE.Vector3();
+    const center = new THREE.Vector3();
+    totalBBox.getCenter(center);
+    totalBBox.getSize(size);
+    size.multiplyScalar(1.2);
+    scaledBbox.setFromCenterAndSize(center, size);
+
+    await this.scene.controls.fitToBox(scaledBbox, false);
   }
 
   setupEvents() {
diff --git a/src/civil/RoadNavigator/src/curve-highlighter.ts b/src/civil/RoadNavigator/src/curve-highlighter.ts
index 1b9f85b9a..92b03fe92 100644
--- a/src/civil/RoadNavigator/src/curve-highlighter.ts
+++ b/src/civil/RoadNavigator/src/curve-highlighter.ts
@@ -14,7 +14,8 @@ export class CurveHighlighter {
       LINE: [213 / 255, 0 / 255, 255 / 255],
       CIRCULARARC: [0 / 255, 46, 255 / 255],
       CLOTHOID: [0 / 255, 255 / 255, 0 / 255],
-      PARABOLIC: [0 / 255, 255 / 255, 72 / 255],
+      PARABOLICARC: [0 / 255, 255 / 255, 72 / 255],
+      CONSTANTGRADIENT: [213 / 255, 0 / 255, 255 / 255],
     } as { [curve: string]: number[] },
   };
 
diff --git a/src/civil/RoadPlanNavigator/index.html b/src/civil/RoadPlanNavigator/index.html
index f47cc59e7..ac1211975 100644
--- a/src/civil/RoadPlanNavigator/index.html
+++ b/src/civil/RoadPlanNavigator/index.html
@@ -81,7 +81,7 @@
   fragmentIfcLoader.settings.webIfc.COORDINATE_TO_ORIGIN = true;
   fragmentIfcLoader.settings.webIfc.OPTIMIZE_PROFILES = true;
 
-  const file = await fetch("../../../resources/asdf.frag");
+  const file = await fetch("../../../resources/asdf2.frag");
   const data = await file.arrayBuffer();
   const buffer = new Uint8Array(data);
   const model = await fragments.load(buffer);
@@ -117,9 +117,28 @@
   const drawer = elevationNavigator.uiElement.get("drawer");
   drawer.visible = true;
 
+
+
+  const navigator3D = new OBC.Road3DNavigator(components);
+  navigator3D.draw(model);
+  navigator3D.setup();
+
+  navigator3D.highlighter.hoverCurve.material.color.set(1, 1, 1);
+  navigator3D.highlighter.hoverPoints.material.color.set(1, 1, 1);
+
+  const sphere = new THREE.Sphere(undefined, 20);
+
   navigator.onHighlight.add(({ mesh }) => {
     elevationNavigator.clear();
-    elevationNavigator.draw(model, [mesh.curve.alignment])
+    elevationNavigator.draw(model, [mesh.curve.alignment]);
+    elevationNavigator.highlighter.select(mesh);
+    navigator3D.highlighter.select(mesh);
+
+    const index = mesh.curve.index;
+    const curve3d = mesh.curve.alignment.absolute[index];
+    curve3d.mesh.geometry.computeBoundingSphere();
+    components.camera.controls.fitToSphere(curve3d.mesh.geometry.boundingSphere, true);
+
   })
 
 
diff --git a/src/ui/Drawer/index.ts b/src/ui/Drawer/index.ts
index cad8c3a51..ff23f3498 100644
--- a/src/ui/Drawer/index.ts
+++ b/src/ui/Drawer/index.ts
@@ -55,6 +55,12 @@ export class Drawer extends SimpleUIComponent<HTMLDivElement> {
     this.domElement.style.width = width;
   }
 
+  get containerSize() {
+    const height = this.domElement.clientHeight;
+    const width = this.domElement.clientWidth;
+    return { height, width };
+  }
+
   set alignment(value: typeof Drawer.prototype._type) {
     const classes = this.domElement.classList;