diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts
index d95a89b22..1c0deaccf 100644
--- a/dmp-frontend/src/app/app.module.ts
+++ b/dmp-frontend/src/app/app.module.ts
@@ -18,6 +18,7 @@ import { AuthGuard } from './guards/auth.guard';
 import { PageNotFoundComponent }   from './not-found.component';
 import { TocComponent } from './form/tableOfContents/toc.component';
 import { ProjectsModule } from './projects/project.module';
+import { PaginationService } from './services/pagination.service';
 
 @NgModule({
   declarations: [
@@ -40,7 +41,7 @@ import { ProjectsModule } from './projects/project.module';
     AppRoutingModule
     
   ],
-  providers: [ServerService, dataModelBuilder, AuthGuard],
+  providers: [ServerService, dataModelBuilder, AuthGuard, PaginationService],
   bootstrap: [AppComponent]
 })
 export class AppModule {
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html
index 6fb122208..45f1f29b9 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form.component.html
@@ -47,7 +47,28 @@
 </div>
 
 
+<div class="text-center">
+	<p>Angular 2 - Pagination Example with logic like Google</p>
 
+	<!-- pagination -->
+	<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
+		<li [ngClass]="{disabled:pagination.currentPage === 1}">
+			<a (click)="setPage(1)">First</a>
+		</li>
+		<li [ngClass]="{disabled:pagination.currentPage === 1}">
+			<a (click)="setPage(pagination.currentPage - 1)">Previous</a>
+		</li>
+		<li *ngFor="let page of pagination.pages" [ngClass]="{active:pagination.currentPage === page}">
+			<a (click)="setPage(page)">{{page}}</a>
+		</li>
+		<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
+			<a (click)="setPage(pagination.currentPage + 1)">Next</a>
+		</li>
+		<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
+			<a (click)="setPage(pagination.totalPages)">Last</a>
+		</li>
+	</ul>
+</div>
 
 	<div class="panel-footer">
 			<div class="progress">
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index 93edfdd41..89484f166 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form.component.ts
@@ -10,7 +10,7 @@ import { ServerService } from '../../app/services/server.service';
 import { dataModelBuilder } from '../../app/services/dataModelBuilder.service';
 import { DataModel } from '../entities/DataModel';
 import { GroupBase } from './dynamic-form-group/group-base';
-
+import { PaginationService } from '../../app/services/pagination.service';
 
 @Component({
   selector: 'dynamic-form',
@@ -24,7 +24,11 @@ export class DynamicFormComponent implements OnInit {
   payLoad = '';
   @Input() dirtyValues: number = 0;
 
-  constructor(private qcs: FieldControlService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router, private route: ActivatedRoute) {
+  // pagination object
+  @Input() pagination: any = {};
+
+  constructor(private qcs: FieldControlService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router,
+    private route: ActivatedRoute, private pagerService: PaginationService) {
     this.form = this.qcs.toFormGroup(new Array(), new Array());
   }
 
@@ -51,11 +55,11 @@ export class DynamicFormComponent implements OnInit {
         this.form = this.qcs.toFormGroup(this.dataModel.fields, this.dataModel.groups);
 
         this.form.valueChanges.subscribe(data => {
-         // console.log('Form changes', data);
+          // console.log('Form changes', data);
           let dirtyValuesArray: Array<any> = [];
           let count = 0;
           let countDirtyValues = 0;
-          Object.keys(this.form.controls).forEach((c) => {          
+          Object.keys(this.form.controls).forEach((c) => {
             //count++;
             let currentControl = this.form.controls[c];
             if (currentControl.dirty)
@@ -66,12 +70,12 @@ export class DynamicFormComponent implements OnInit {
             grp.groupFields.forEach((fld) => {
               if (fld.visible == true || fld.visible == "true")
                 count++;
-              if(fld.value != undefined)
+              if (fld.value != undefined)
                 countDirtyValues++;
             });
           });
           //console.log(count);
-         // var percentage = Math.floor(dirtyValuesArray.length * 100 / count);
+          // var percentage = Math.floor(dirtyValuesArray.length * 100 / count);
           var percentage = Math.floor(countDirtyValues * 100 / count);
           this.dirtyValues = percentage;
         })
@@ -83,6 +87,9 @@ export class DynamicFormComponent implements OnInit {
         console.log(this.form);
 
         this.route.paramMap //this is how i get the projects's id
+
+        // initialize to page 1
+        this.setPage(1);
       },
       (error) => console.log(error)
       );
@@ -103,6 +110,23 @@ export class DynamicFormComponent implements OnInit {
     this.onValueChanged(); // (re)set validation messages now
   }
 
+  setPage(page: number) {
+    if (page < 1 || page > this.pagination.totalPages) {
+        return;
+    }
+
+    // get pagination object from service
+    this.pagination = this.pagerService.getPagination(this.dataModel.groups.length, page);
+
+    // get current page of items
+    this.dataModel.sections.forEach(section => {
+      if(section.groupFields.length > 0){
+        section.groupFields = this.dataModel.groups.slice(this.pagination.startIndex, this.pagination.endIndex + 1);
+      }
+    });
+    //this.dataModel.groups = this.dataModel.groups.slice(this.pager.startIndex, this.pager.endIndex + 1);
+}
+
   onValueChanged(data?: any) {
     debugger;
     if (!this.form) { return; }
diff --git a/dmp-frontend/src/app/services/pagination.service.ts b/dmp-frontend/src/app/services/pagination.service.ts
new file mode 100644
index 000000000..98f684c0d
--- /dev/null
+++ b/dmp-frontend/src/app/services/pagination.service.ts
@@ -0,0 +1,47 @@
+export class PaginationService {
+    getPagination(totalGroups: number, currentPage: number = 1, pageSize: number = 3) {
+        // calculate total pages
+        let totalPages = Math.ceil(totalGroups / pageSize);
+
+        let startPage: number, endPage: number;
+        if (totalPages <= 10) {
+            // less than 10 total pages so show all
+            startPage = 1;
+            endPage = totalPages;
+        } else {
+            // more than 10 total pages so calculate start and end pages
+            if (currentPage <= 6) {
+                startPage = 1;
+                endPage = 10;
+            } else if (currentPage + 4 >= totalPages) {
+                startPage = totalPages - 9;
+                endPage = totalPages;
+            } else {
+                startPage = currentPage - 5;
+                endPage = currentPage + 4;
+            }
+        }
+
+        // calculate start and end item indexes
+        let startIndex = (currentPage - 1) * pageSize;
+        let endIndex = Math.min(startIndex + pageSize - 1, totalGroups - 1);
+
+        // create an array of pages to ng-repeat in the pager control
+        let pages = [];
+        for (var i = 1; i <endPage + 1; i++)
+        pages.push(i);
+
+        // return object with all pager properties required by the view
+        return {
+            totalGroups: totalGroups,
+            currentPage: currentPage,
+            pageSize: pageSize,
+            totalPages: totalPages,
+            startPage: startPage,
+            endPage: endPage,
+            startIndex: startIndex,
+            endIndex: endIndex,
+            pages: pages
+        };
+    }
+}
\ No newline at end of file