diff --git a/libs/client-guided-tour/jest.config.ts b/libs/client-guided-tour/jest.config.ts
index 4e4cec70..8b9d17fb 100644
--- a/libs/client-guided-tour/jest.config.ts
+++ b/libs/client-guided-tour/jest.config.ts
@@ -9,8 +9,8 @@ const config: Config.InitialOptions = {
     global: {
       branches: 0,
       functions: 27,
-      lines: 32,
-      statements: 35,
+      lines: 31,
+      statements: 33,
     },
   },
   displayName: 'client-guided-tour',
diff --git a/libs/client-guided-tour/package.json b/libs/client-guided-tour/package.json
index 307e4ba4..c41ea0e4 100644
--- a/libs/client-guided-tour/package.json
+++ b/libs/client-guided-tour/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rfprodz/client-guided-tour",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Guided tour feature for Angular clients.",
   "keywords": [
     "angular-module",
diff --git a/libs/client-guided-tour/src/lib/components/guided-tour-example/guided-tour-example.component.html b/libs/client-guided-tour/src/lib/components/guided-tour-example/guided-tour-example.component.html
index ee73d279..8301ffe6 100644
--- a/libs/client-guided-tour/src/lib/components/guided-tour-example/guided-tour-example.component.html
+++ b/libs/client-guided-tour/src/lib/components/guided-tour-example/guided-tour-example.component.html
@@ -1,21 +1,61 @@
-<p>... Some content ...</p>
+@if (!tour.active) {
+  <button mat-raised-button color="accent" (click)="tour.next()">Start tour</button>
+} @else {
+  <button mat-raised-button color="warn" (click)="tour.end()">End tour</button>
+}
 
 <ng-container *ngIf="tourConig$() as config">
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
   <div [appGuidedTour]="config.at(1)" [highlightElement]="true">second item to explain</div>
 
   <p>... Some content ...</p>
 
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
   <div [appGuidedTour]="config.at(2)" [highlightElement]="true">third item to explain</div>
 
   <p>... Some content ...</p>
 
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
   <div [appGuidedTour]="config.at(0)">first item to explain</div>
-</ng-container>
 
-<p>... Some content ...</p>
+  <p>... Some content ...</p>
 
-@if (!tour.active) {
-  <button mat-raised-button color="accent" (click)="tour.next()">Start tour</button>
-} @else {
-  <button mat-raised-button color="warn" (click)="tour.end()">End tour</button>
-}
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+</ng-container>
diff --git a/libs/client-guided-tour/src/lib/components/guided-tour/guided-tour.directive.ts b/libs/client-guided-tour/src/lib/components/guided-tour/guided-tour.directive.ts
index 1915b08b..92dc3b93 100644
--- a/libs/client-guided-tour/src/lib/components/guided-tour/guided-tour.directive.ts
+++ b/libs/client-guided-tour/src/lib/components/guided-tour/guided-tour.directive.ts
@@ -165,11 +165,15 @@ export class AppGuidedTourDirective implements AfterContentInit, OnDestroy {
 
   private decorateNativeEl(reset?: boolean) {
     if (typeof this.nativeElement !== 'undefined' && this.highlightElement) {
+      const elevationClass = 'mat-elevation-z2';
       if (reset === true) {
         this.nativeElement.style.border = 'unset';
+        this.nativeElement.className = this.nativeElement.className.replace(` ${elevationClass}`, '');
         return;
       }
+      this.nativeElement.scrollIntoView({ behavior: 'smooth' });
       this.nativeElement.style.border = '1px dotted black';
+      this.nativeElement.className += ` ${elevationClass}`;
     }
   }