diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-textbox/field-textbox.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-textbox/field-textbox.html
index 6e32c23c1..84efd8929 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-textbox/field-textbox.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-textbox/field-textbox.html
@@ -1,3 +1,3 @@
 <label>{{field.description}}</label>
 <div>{{field.extendedDescription}}</div>
-<input class ="form-control" [formControlName]="field.key" [id]="field.key" [type]="field.type" required ="field.required">
\ No newline at end of file
+<input matInput [formControlName]="field.key" [id]="field.key" [type]="field.type" required ="field.required">
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html
index 1f1b688ad..2dbc8caac 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html
@@ -1,4 +1,4 @@
-<div class="field-component" [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form"
+<mat-form-field [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form"
   [ngSwitch]="field.viewStyle.renderStyle">
 
   <h5 *ngIf="field.title">{{field.title}}</h5>
@@ -11,7 +11,7 @@
       </h5>
       
     <div *ngSwitchCase="'freetext'">
-      <input class="form-control" formControlName="value">
+      <input matInput formControlName="value">
     </div>
 
     <div *ngSwitchCase="'combobox'">
@@ -50,7 +50,7 @@
     </div>
 
   </div>
-</div>
+</mat-form-field>
 
 <!-- <div [formGroup]="form" class="form-group">
 
diff --git a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts
index e7e0b1331..356918176 100644
--- a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts
@@ -26,6 +26,7 @@ export class DynamicFormGroupComponent implements OnInit {
   }
 
   ngOnInit() {
+    console.log(this.group);
     //let st = this.group.style == "any" ? "" : this.group.style;
     //this.classFromJson = this.group.class == "" ? "" : this.group.class;
 
diff --git a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html
index b21c29a4b..1b8ac6c2e 100644
--- a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html
+++ b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html
@@ -2,8 +2,7 @@
     <div class="panel panel-default">
         <div class="panel-heading clearfix">
             <a data-toggle="collapse" href="#{{section.id}}" class="panel-title pull-left" style="padding-top: 7.5px;">{{path}} {{section.title}}</a>
-            <!-- <a *ngIf="!form.get('fieldGroups').get(''+i).get('title').value" data-toggle="collapse" href="#{{indexPath + 'g' + i}}" class="panel-title pull-left"
-        style="padding-top: 7.5px;">{{i + 1}}. Group {{i + 1}}</a> -->
+
             <div class="btn-group pull-right">
                 <a data-toggle="collapse" href="#{{section.id}}" class="panel-title pull-left" style="margin-left:5px;padding-top: 7.5px;">
                     <span class="glyphicon glyphicon-minus"></span>
@@ -29,4 +28,34 @@
             </div>
         </div>
     </div>
+</div>
+
+<!-- <a *ngIf="!form.get('fieldGroups').get(''+i).get('title').value" data-toggle="collapse" href="#{{indexPath + 'g' + i}}" class="panel-title pull-left"
+        style="padding-top: 7.5px;">{{i + 1}}. Group {{i + 1}}</a> -->
+<div *ngIf="visibilityRulesService.isElementVisible(pathName,section.id)" class="panel-group" style="margin-top:10px;">
+    <mat-accordion>
+        <mat-expansion-panel>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    <a data-toggle="collapse" href="#{{section.id}}" class="panel-title pull-left" style="padding-top: 7.5px;">{{path}} {{section.title}}</a>
+                </mat-panel-title>
+                <mat-panel-description>
+                    <h3 *ngIf="section.description">{{section.description}}</h3>
+                    <h4 *ngIf="section.extendedDescription">{{section.extendedDescription}}</h4>
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+
+            <div *ngIf="section.fieldGroups">
+                <div *ngFor="let group of section.fieldGroups; let j = index;">
+                    <df-group [group]="group" [form]="form.get('fieldGroups').get(''+j)" [pathName]="pathName+'.fieldGroups.'+j"></df-group>
+                </div>
+            </div>
+
+            <div *ngIf="section.sections">
+                <div *ngFor="let itemsection of section.sections; let j = index;">
+                    <df-section [section]="itemsection" [form]="form.get('sections').get(''+j)" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j"></df-section>
+                </div>
+            </div>
+        </mat-expansion-panel>
+    </mat-accordion>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts
index 1e96b0067..49f15553c 100644
--- a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts
+++ b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts
@@ -19,6 +19,6 @@ export class DynamicFormSectionComponent implements OnInit {
   constructor(private visibilityRulesService:VisibilityRulesService) { }
 
   ngOnInit() {
-
+    console.log(this.section);
   }
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html
index 73341780d..e055b2e35 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form.component.html
@@ -5,11 +5,11 @@
 		</mat-sidenav>
 
 		 <mat-sidenav-content class="ui-g">
-			<button type="button" style="margin: 15px;" class="btn btn-primary" (click)="toggleSidebar()" icon="fa-arrow-left">Table Of Contents</button>
-			<button type="button" *ngIf="datasetProfileDefinitionModel&&datasetProfileDefinitionModel.status != 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
-			 class="btn btn-primary" type="button" (click)="save();">Save</button>
-			<button type="button" *ngIf="datasetProfileDefinitionModel&&datasetProfileDefinitionModel?.status != 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
-			 class="btn btn-primary" (click)="submit();">Save and Finalize</button>
+			<button mat-raised-button color="primary" style="margin: 15px;" (click)="toggleSidebar()" icon="fa-arrow-left">Table Of Contents</button>
+			<button  mat-raised-button color="primary" *ngIf="datasetProfileDefinitionModel&&datasetProfileDefinitionModel.status != 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
+			(click)="save();">Save</button>
+			<button  mat-raised-button color="primary" *ngIf="datasetProfileDefinitionModel&&datasetProfileDefinitionModel?.status != 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
+			 (click)="submit();">Save and Finalize</button>
 			<div class="ui-g-12">
 				<div class="alignment-center">
 					<!-- <ngb-pagination *ngIf="pages" [collectionSize]="pages.length*10" [page]="currentPageIndex" (pageChange)="changePageIndex($event)" aria-label="Default pagination"></ngb-pagination> -->
@@ -18,8 +18,8 @@
 			<div class="ui-g-12">
 				<progress-bar *ngIf="form" [formGroup]="form"></progress-bar>
 			</div>
+			
 			<div class="col-md-12 form-body-container" id="form-container">
-
 				<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
 					<div *ngFor="let section of datasetProfileDefinitionModel.sections; let i = index;">
 						<df-section *ngIf='this.shouldDisplaySection(section)' [section]="section" [form]="form.get('sections').get(''+i)" [path]="i+1"