diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html
index 56c5ca811..de6c71a4c 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form.component.html
@@ -1,5 +1,5 @@
 <div class="ui-g dynamic-formc full-width full-height">
-	<ng-sidebar-container>
+	<ng-sidebar-container contentClass="scrollableContent">
 		<ng-sidebar mode="push" position="right" [(opened)]="visibleSidebar">
 			<table-of-content class="toc-container full-height" [model]="dataModel"></table-of-content>
 		</ng-sidebar>
@@ -9,7 +9,7 @@
 			<button type="button" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
 			<progress-bar class="ui-g" *ngIf="progressbar" [formGroup]=form></progress-bar>
 			<div class="ui-g-12">
-				<p-steps [model]="stepperItems" [(activeIndex)]="this.currentPage" [readonly]="false"></p-steps>
+				<p-steps [model]="stepperItems" [activeIndex]="this.currentPageIndex" (activeIndexChange)="changePageIndex($event)" [readonly]="false"></p-steps>
 			</div>
 			<div class="ui-g-12">
 				<progress-bar *ngIf="form" [formGroup]="form"></progress-bar>
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index 2ef455627..ee7086f98 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form.component.ts
@@ -61,13 +61,13 @@ export class DynamicFormComponent implements OnInit {
   id: string;
   datasetId: string;
   pathName: string;
-  pages: Set<number>;
+  pages: Array<number>;
   stepperItems: MenuItem[] = new Array<MenuItem>();
   activeStepperIndex: number = 1;
   visibleSidebar: boolean = false;
 
   private progressbar: boolean = false;
-  private currentPage: number = 0;
+  private currentPageIndex: number = 0;
 
   private fragment: string;
   constructor(private serverService: ServerService, private router: Router, private pdfService: PDFService,
@@ -86,8 +86,8 @@ export class DynamicFormComponent implements OnInit {
 
     this.serverService.getSingleDataset(this.datasetId).subscribe(
       response => {
-        this.dataModel = new JsonSerializer<DatasetModel>().fromJSONObject(response, DatasetModel);
-        this.pages = this.getPages(this.dataModel);
+		  this.dataModel = new JsonSerializer<DatasetModel>().fromJSONObject(response, DatasetModel);
+		  this.pages = this.getPages(this.dataModel);
         this.createPagination();
         this.form = this.dataModel.buildForm();
         this.visibilityRulesService.formGroup = this.form;
@@ -96,16 +96,13 @@ export class DynamicFormComponent implements OnInit {
         this.progressbar = true;
 
         this.route.fragment.subscribe((fragment: string) => {
-          if (fragment && document.querySelector('#' + fragment)) {
-            document.querySelector('#' + fragment).scrollIntoView();
-            this.visibleSidebar = true;
-          }
+			//if (fragment)
+				this.scrollTo(fragment); 
         });
-
+       
         this.route.queryParams.subscribe((params) => {
-          if (params && "page" in params && !isNaN(params["page"]))
-            this.currentPage = Number.parseInt(params["page"]);
-          //this.visibleSidebar = true;
+			if (params && "page" in params)
+				this.changeCurrentPage(params["page"]);
         });
       },
       error => {
@@ -132,16 +129,18 @@ export class DynamicFormComponent implements OnInit {
     this.visibleSidebar = !this.visibleSidebar;
   }
 
-  getPages(model: DatasetModel): Set<number> {
-    let pageSet = new Set<number>();
-    model.sections.forEach(section => {
-      pageSet.add(section.page);
-    })
-    return pageSet;
+  getPages(model: DatasetModel): Array<number> {
+	  let pageSet = new Set<number>();
+
+	model.sections.forEach(section => {
+		pageSet.add(section.page);
+	  });
+
+	return Array.from(pageSet).sort((a, b) => a - b);
   }
 
   shouldDisplaySection(section: Section): Boolean {
-    return (section.page - 1) == this.currentPage;
+	  return (section.page) == this.pages[this.currentPageIndex];
   }
 
   createPagination() {
@@ -151,6 +150,29 @@ export class DynamicFormComponent implements OnInit {
         })
     });
   }
+
+  changePageIndex(index: any) {
+	  this.router.navigate([this.route.snapshot.url[0] + "/" + this.route.snapshot.url[1]], { queryParams: { page: this.pages[index] } });
+  }
+
+  scrollTo(sectionID: string) {
+	  if (!sectionID) return;
+	  var element = document.querySelector('#' + sectionID);
+	  if (!element) return;
+	  element.scrollIntoView();
+      // this.visibleSidebar = true;
+	  //var scrollElement = document.querySelector('.scrollableContent');
+	  //scrollElement.scrollTop = topElement.offsetTop;
+  }
+
+  changeCurrentPage(pageString: string) {
+	  if (!pageString) return;
+	  var page = parseInt(pageString);
+	  if (isNaN(page)) return;
+	  var pageIndex = this.pages.indexOf(page);
+	  if (pageIndex === -1) return;
+	  this.currentPageIndex = pageIndex;
+  }
   /* scrollToElemID(elemID) {
     scroll("#" + elemID);
   }