diff --git a/src/app/tabs/courses/notes-details/notes-details.component.html b/src/app/tabs/courses/notes-details/notes-details.component.html
index 7bd5406..712d03e 100644
--- a/src/app/tabs/courses/notes-details/notes-details.component.html
+++ b/src/app/tabs/courses/notes-details/notes-details.component.html
@@ -1,5 +1,14 @@
 <div class="page">
     <ngx-siema [options]="options">
+        <header class="nav-header">
+            <button class="close-button" (click)="back()">
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+            </button>
+            <h5>
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/play-button.svg"></svg-icon>
+                <span> Notes 1</span>
+            </h5>
+        </header>
         <ngx-siema-slide>
             <header class="nav-header">
                 <button class="close-button" (click)="back()">
diff --git a/src/app/tabs/courses/notes-details/notes-details.component.ts b/src/app/tabs/courses/notes-details/notes-details.component.ts
index a7c6016..da2891b 100644
--- a/src/app/tabs/courses/notes-details/notes-details.component.ts
+++ b/src/app/tabs/courses/notes-details/notes-details.component.ts
@@ -11,7 +11,7 @@ import { NgxSiemaOptions, NgxSiemaService } from 'ngx-siema';
 	styleUrls: ['./notes-details.component.scss']
 })
 export class NotesDetailsComponent implements OnInit {
-	heading: string;
+	heading: number;
 	routeSubscription: Subscription;
 
 	options: NgxSiemaOptions = {
@@ -39,7 +39,8 @@ export class NotesDetailsComponent implements OnInit {
 
 	ngOnInit(): void {
 		this.routeSubscription = this.route.params.subscribe((params) => {
-			this.heading = params['heading'];
+			this.heading = Number(params['heading']);
+            this.options.startIndex = Number(this.heading);
 		});
 	}
 
diff --git a/src/app/tabs/courses/video-chapter/video-chapter.component.html b/src/app/tabs/courses/video-chapter/video-chapter.component.html
index df09091..152dd38 100644
--- a/src/app/tabs/courses/video-chapter/video-chapter.component.html
+++ b/src/app/tabs/courses/video-chapter/video-chapter.component.html
@@ -60,7 +60,7 @@
         </ul>
 
         <ul class="notes-list" *ngIf="selectedSegment === 'notes'">
-            <li [routerLink]="['/notes-details', 'Notes-1']">
+            <li [routerLink]="['/notes-details', '0']">
                 <div class="content">
                     <label> Notes 1 </label>
                     <p>
@@ -73,7 +73,7 @@
                 <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
             </li>
 
-            <li [routerLink]="['/notes-details', 'Notes-2']">
+            <li [routerLink]="['/notes-details', '1']">
                 <div class="content">
                     <label> Notes 2 </label>
                     <p>
@@ -86,7 +86,7 @@
                 <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
             </li>
 
-            <li [routerLink]="['/notes-details', 'Notes-3']">
+            <li [routerLink]="['/notes-details', '2']">
                 <div class="content">
                     <label> Notes 3 </label>
                     <p>