diff --git a/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/Field.java b/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/Field.java
index 30e911ac8..529c48581 100644
--- a/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/Field.java
+++ b/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/Field.java
@@ -89,12 +89,16 @@ public class Field implements DatabaseViewStyleDefinition,XmlSerializable<Field>
 		Element description = doc.createElement("description");
 		description.setTextContent(this.description);
 		
+		Element title = doc.createElement("title");
+		title.setTextContent(this.title);
+		
 		Element viewStyle = doc.createElement("viewStyle");
 		viewStyle.setAttribute("renderstyle", this.viewStyle.getRenderStyle());
 		viewStyle.setAttribute("cssClass", this.viewStyle.getCssClass());
 		
 		Element visibility = this.visible.toXml(doc);
 		
+		rootElement.appendChild(title);
 		rootElement.appendChild(visibility);
 		rootElement.appendChild(extendedDescription);
 		rootElement.appendChild(viewStyle);
@@ -114,6 +118,9 @@ public class Field implements DatabaseViewStyleDefinition,XmlSerializable<Field>
 		Element description = (Element)element.getElementsByTagName("description").item(0);
 		this.description = description.getTextContent();
 		
+		Element title = (Element)element.getElementsByTagName("title").item(0);
+		this.title = title.getTextContent();
+		
 		this.viewStyle = new ViewStyle();
 		Element viewStyle = (Element)element.getElementsByTagName("viewStyle").item(0);
 		this.viewStyle.setRenderStyle(viewStyle.getAttribute("renderstyle"));
diff --git a/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/FieldGroup.java b/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/FieldGroup.java
index c61ce0584..1fad73e63 100644
--- a/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/FieldGroup.java
+++ b/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/FieldGroup.java
@@ -10,6 +10,7 @@ import org.w3c.dom.NodeList;
 
 import entities.xmlmodels.modeldefinition.DatabaseModelDefinition;
 import utilities.XmlSerializable;
+import utilities.builders.XmlBuilder;
 
 public class FieldGroup implements DatabaseViewStyleDefinition,XmlSerializable<FieldGroup>{
 	private String id;
@@ -97,6 +98,9 @@ public class FieldGroup implements DatabaseViewStyleDefinition,XmlSerializable<F
 		
 		return root;
 	}
+	
+	
+	 
 	@Override
 	public FieldGroup fromXml(Element element) {
 		this.id = element.getAttribute("id");
@@ -104,12 +108,15 @@ public class FieldGroup implements DatabaseViewStyleDefinition,XmlSerializable<F
 		this.defaultVisibility = Boolean.getBoolean(element.getAttribute("defaultVisibility"));
 		this.page = Integer.parseInt(element.getAttribute("page"));
 		
-		Element title = (Element)element.getElementsByTagName("title").item(0);
+		Element title = XmlBuilder.getNodeFromListByTagName(element.getChildNodes(),"title");
 		this.title = title.getTextContent();
 		
-		Element extendedDescription = (Element)element.getElementsByTagName("extendedDescription").item(0);
+		Element extendedDescription = XmlBuilder.getNodeFromListByTagName(element.getChildNodes(),"extendedDescription");
 		this.extendedDescription = extendedDescription.getTextContent();
 		
+		Element description = XmlBuilder.getNodeFromListByTagName(element.getChildNodes(),"description");
+		this.description  = description .getTextContent();
+		
 		this.fieldSets = new LinkedList();
 		Element fieldSets = (Element)element.getElementsByTagName("fieldsets").item(0);
 		if(fieldSets!=null){
diff --git a/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/Section.java b/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/Section.java
index 1f4aa2b69..6a43ab461 100644
--- a/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/Section.java
+++ b/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/Section.java
@@ -10,6 +10,7 @@ import org.w3c.dom.NodeList;
 
 import entities.xmlmodels.modeldefinition.DatabaseModelDefinition;
 import utilities.XmlSerializable;
+import utilities.builders.XmlBuilder;
 
 public class Section implements DatabaseViewStyleDefinition,XmlSerializable<Section>{
 	private String id;
@@ -91,6 +92,9 @@ public class Section implements DatabaseViewStyleDefinition,XmlSerializable<Sect
 		Element extendedDescription = doc.createElement("extendedDescription");
 		extendedDescription.setTextContent(this.extendedDescription);
 		
+		Element title = doc.createElement("title");
+		title.setTextContent(this.title);
+		
 		if(sections!=null){
 			Element sections = doc.createElement("sections");
 			for(Section section : this.sections){
@@ -106,6 +110,8 @@ public class Section implements DatabaseViewStyleDefinition,XmlSerializable<Sect
 			}
 			rootElement.appendChild(formGroups);
 		}
+		
+		rootElement.appendChild(title);
 		rootElement.appendChild(extendedDescription);
 		rootElement.appendChild(description);
 		
@@ -119,11 +125,14 @@ public class Section implements DatabaseViewStyleDefinition,XmlSerializable<Sect
 		this.defaultVisibility = Boolean.getBoolean(element.getAttribute("defaultVisibility"));
 		this.page = Integer.parseInt(element.getAttribute("page"));
 		
-		Element description = (Element)element.getElementsByTagName("description").item(0);
+		Element description = XmlBuilder.getNodeFromListByTagName(element.getChildNodes(),"description");
 		if(description!=null) this.description = description.getTextContent();
 		
-		Element extendedDescription = (Element)element.getElementsByTagName("extendedDescription").item(0);
-		if(extendedDescription != null) this.extendedDescription = description.getTextContent();
+		Element extendedDescription = XmlBuilder.getNodeFromListByTagName(element.getChildNodes(),"extendedDescription");
+		if(extendedDescription != null) this.extendedDescription = extendedDescription.getTextContent();
+		
+		Element title =XmlBuilder.getNodeFromListByTagName(element.getChildNodes(),"title");
+		if(title!=null) this.title = title.getTextContent();
 		
 		this.sections = new LinkedList<Section>();
 		Element sections = (Element)element.getElementsByTagName("sections").item(0);
diff --git a/dmp-backend/src/main/java/managers/AdminManager.java b/dmp-backend/src/main/java/managers/AdminManager.java
index b47e31adc..998bceca6 100644
--- a/dmp-backend/src/main/java/managers/AdminManager.java
+++ b/dmp-backend/src/main/java/managers/AdminManager.java
@@ -33,7 +33,7 @@ public class AdminManager {
 		entities.DatasetProfile datasetProfile = new entities.DatasetProfile();
 		datasetProfile.setDefinition(xml);
 		datasetProfile.setStatus((short)1);
-		datasetProfile.setLabel("dasd");
+		datasetProfile.setLabel(profile.getLabel());
 		datasetProfile.setCreated(new Date());
 		return datasetProfile;
 	}
@@ -48,7 +48,7 @@ public class AdminManager {
 		
 		DatasetProfileViewstyle datasetProfileViewstyle = new DatasetProfileViewstyle();
 		datasetProfileViewstyle.setDefinition(xml);
-		datasetProfileViewstyle.setLabel("skdjal");
+		datasetProfileViewstyle.setLabel(profile.getLabel());
 		return datasetProfileViewstyle;
 	}
 	
diff --git a/dmp-backend/src/main/java/models/admin/composite/DatasetProfile.java b/dmp-backend/src/main/java/models/admin/composite/DatasetProfile.java
index 9c613bae6..cd39aab47 100644
--- a/dmp-backend/src/main/java/models/admin/composite/DatasetProfile.java
+++ b/dmp-backend/src/main/java/models/admin/composite/DatasetProfile.java
@@ -8,6 +8,7 @@ import java.util.List;
 import models.admin.components.datasetprofile.*;
 
 public class DatasetProfile {
+	private String label;
 	private List<Section> sections;
 
 	public List<Section> getSections() {
@@ -16,9 +17,16 @@ public class DatasetProfile {
 
 	public void setSections(List<Section> sections) {
 		this.sections = sections;
-	}	
-	
+	}		
 	
+	public String getLabel() {
+		return label;
+	}
+
+	public void setLabel(String label) {
+		this.label = label;
+	}
+
 	public void buildProfile(entities.xmlmodels.modeldefinition.FieldGroup fieldGroup,entities.xmlmodels.viewstyledefinition.ViewStyleModel viewStyle){
 		this.sections = new ModelBuilder().fromViewStyleDefinition(viewStyle.getSections(), Section.class);
 		updateProfile(fieldGroup,viewStyle);
diff --git a/dmp-backend/src/main/java/models/components/commons/datafield/CheckBoxData.java b/dmp-backend/src/main/java/models/components/commons/datafield/CheckBoxData.java
index aea083a39..8f37abb4d 100644
--- a/dmp-backend/src/main/java/models/components/commons/datafield/CheckBoxData.java
+++ b/dmp-backend/src/main/java/models/components/commons/datafield/CheckBoxData.java
@@ -1,27 +1,42 @@
 package models.components.commons.datafield;
 
+import java.util.Map;
+
 import org.w3c.dom.Document;
 import org.w3c.dom.Element;
 
 import utilities.XmlSerializable;
 
 public class CheckBoxData extends FieldData<CheckBoxData>{
+	private String label;
+
+	
+	public String getLabel() {
+		return label;
+	}
+
+	public void setLabel(String label) {
+		this.label = label;
+	}
 
 	@Override
 	public Element toXml(Document doc) {
-		// TODO Auto-generated method stub
-		return doc.createElement("data");
+		Element root = doc.createElement("data");
+		root.setAttribute("label", this.label);
+		return root;
 	}
 
 	@Override
 	public CheckBoxData fromXml(Element item) {
-		// TODO Auto-generated method stub
+		this.label = item!=null?item.getAttribute("label"):""; //TODO
 		return this;
 	}
 
 	@Override
 	public CheckBoxData fromData(Object data) {
-		// TODO Auto-generated method stub
+		if(data!=null){
+			this.label= (String)((Map<String,Object>)data).get("label");
+		}
 		return this;
 	}
 
diff --git a/dmp-backend/src/main/java/models/components/commons/datafield/ComboBoxData.java b/dmp-backend/src/main/java/models/components/commons/datafield/ComboBoxData.java
index 8ba4a7c82..258cc18b6 100644
--- a/dmp-backend/src/main/java/models/components/commons/datafield/ComboBoxData.java
+++ b/dmp-backend/src/main/java/models/components/commons/datafield/ComboBoxData.java
@@ -102,11 +102,22 @@ public class ComboBoxData extends FieldData<ComboBoxData>{
 	}
 	@Override
 	public ComboBoxData fromData(Object data) {
+		this.options = new LinkedList();
+
 		if(data!=null){
 			this.type = (String)((Map<String,Object>)data).get("type");
 			this.url = (String)((Map<String,Object>)data).get("url");
-			this.options = (List<Option>)((Map<String,Object>)data).get("options");
+			List<Map<String,String>> options = ((Map<String,List<Map<String,String>>>)data).get("options");		
+			if(options!=null){
+					for(Map<String,String> map : options){
+						Option newOption = new Option();
+						newOption.setLabel(map.get("label"));
+						newOption.setValue(map.get("value"));
+						this.options.add(newOption);
+					}
+			}
 		}
+		
 		return this;
 	}
 	@Override
diff --git a/dmp-backend/src/main/java/models/properties/Field.java b/dmp-backend/src/main/java/models/properties/Field.java
new file mode 100644
index 000000000..5d9f4dbbf
--- /dev/null
+++ b/dmp-backend/src/main/java/models/properties/Field.java
@@ -0,0 +1,41 @@
+package models.properties;
+
+import java.util.Map;
+
+import com.fasterxml.jackson.annotation.JsonIgnore;
+import com.fasterxml.jackson.annotation.JsonProperty;
+import com.fasterxml.jackson.dataformat.xml.annotation.JacksonXmlProperty;
+import com.fasterxml.jackson.dataformat.xml.annotation.JacksonXmlRootElement;
+
+import models.components.commons.DefaultValue;
+import models.components.commons.Multiplicity;
+import models.components.commons.ViewStyle;
+import models.components.commons.Visibility;
+import utilities.ModelDefinition;
+import utilities.ViewStyleDefinition;
+import utilities.builders.ModelBuilder;
+
+public class Field implements PropertiesGenerator{
+	private String id;
+	
+	private String value;
+	
+	public String getId() {
+		return id;
+	}
+	public void setId(String id) {
+		this.id = id;
+	}
+	
+	public String getValue() {
+		return value;
+	}
+	public void setValue(String value) {
+		this.value = value;
+	}
+	
+	public void toMap(Map<String,String> fieldValues){
+		fieldValues.put(this.id, this.value);
+	}
+			
+}
\ No newline at end of file
diff --git a/dmp-backend/src/main/java/models/properties/FieldSet.java b/dmp-backend/src/main/java/models/properties/FieldSet.java
new file mode 100644
index 000000000..58b78230c
--- /dev/null
+++ b/dmp-backend/src/main/java/models/properties/FieldSet.java
@@ -0,0 +1,30 @@
+package models.properties;
+
+import java.util.LinkedList;
+import java.util.List;
+import java.util.Map;
+
+import com.fasterxml.jackson.dataformat.xml.annotation.JacksonXmlElementWrapper;
+
+import models.components.commons.Multiplicity;
+import utilities.ModelDefinition;
+import utilities.ViewStyleDefinition;
+import utilities.builders.ModelBuilder;
+
+public class FieldSet implements PropertiesGenerator{	
+	private List<Field> fields;
+
+	public List<Field> getFields() {
+		return fields;
+	}
+
+	public void setFields(List<Field> fields) {
+		this.fields = fields;
+	}
+
+	@Override
+	public void toMap(Map<String, String> fieldValues) {
+		this.fields.forEach(item->item.toMap(fieldValues));
+	}	
+
+}
diff --git a/dmp-backend/src/main/java/models/properties/Group.java b/dmp-backend/src/main/java/models/properties/Group.java
new file mode 100644
index 000000000..787826a34
--- /dev/null
+++ b/dmp-backend/src/main/java/models/properties/Group.java
@@ -0,0 +1,28 @@
+package models.properties;
+
+import java.util.List;
+import java.util.Map;
+
+import com.fasterxml.jackson.dataformat.xml.annotation.JacksonXmlElementWrapper;
+
+import entities.xmlmodels.viewstyledefinition.FieldGroup;
+import utilities.ModelDefinition;
+import utilities.ViewStyleDefinition;
+import utilities.builders.ModelBuilder;
+
+public class Group implements PropertiesGenerator{
+	private List<FieldSet> compositeFields;
+	
+	
+	public List<FieldSet> getCompositeFields() {
+		return compositeFields;
+	}
+	public void setCompositeFields(List<FieldSet> compositeFields) {
+		this.compositeFields = compositeFields;
+	}
+	@Override
+	public void toMap(Map<String, String> fieldValues) {
+		this.compositeFields.forEach(item->item.toMap(fieldValues));
+	}
+	
+}
diff --git a/dmp-backend/src/main/java/models/properties/PropertiesGenerator.java b/dmp-backend/src/main/java/models/properties/PropertiesGenerator.java
new file mode 100644
index 000000000..cede0d8ee
--- /dev/null
+++ b/dmp-backend/src/main/java/models/properties/PropertiesGenerator.java
@@ -0,0 +1,7 @@
+package models.properties;
+
+import java.util.Map;
+
+public interface PropertiesGenerator {
+	void toMap(Map<String,String> fieldValues);
+}
diff --git a/dmp-backend/src/main/java/models/properties/PropertiesModel.java b/dmp-backend/src/main/java/models/properties/PropertiesModel.java
new file mode 100644
index 000000000..527ed3553
--- /dev/null
+++ b/dmp-backend/src/main/java/models/properties/PropertiesModel.java
@@ -0,0 +1,24 @@
+package models.properties;
+
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+public class PropertiesModel implements PropertiesGenerator{
+	private List<Section> sections;
+
+	public List<Section> getSections() {
+		return sections;
+	}
+
+	public void setSections(List<Section> sections) {
+		this.sections = sections;
+	}
+
+	@Override
+	public void toMap(Map<String, String> fieldValues) {
+		this.sections.forEach(item->item.toMap(fieldValues));
+		
+	}
+		
+}
diff --git a/dmp-backend/src/main/java/models/properties/Section.java b/dmp-backend/src/main/java/models/properties/Section.java
new file mode 100644
index 000000000..514dba2bd
--- /dev/null
+++ b/dmp-backend/src/main/java/models/properties/Section.java
@@ -0,0 +1,32 @@
+package models.properties;
+
+import java.util.List;
+import java.util.Map;
+
+import utilities.ModelDefinition;
+import utilities.ViewStyleDefinition;
+import utilities.builders.ModelBuilder;
+
+public class Section implements PropertiesGenerator{
+
+	private List<Section> sections;
+	private List<Group> fieldGroups; 
+	
+	public List<Section> getSections() {
+		return sections;
+	}
+	public void setSections(List<Section> sections) {
+		this.sections = sections;
+	}
+	public List<Group> getFieldGroups() {
+		return fieldGroups;
+	}
+	public void setFieldGroups(List<Group> fieldGroups) {
+		this.fieldGroups = fieldGroups;
+	}
+	@Override
+	public void toMap(Map<String, String> fieldValues) {
+		this.sections.forEach(item->item.toMap(fieldValues));
+		this.fieldGroups.forEach(item->item.toMap(fieldValues));
+	}	
+}
diff --git a/dmp-backend/src/main/java/models/user/components/datasetprofile/Field.java b/dmp-backend/src/main/java/models/user/components/datasetprofile/Field.java
index 6d9806628..a9f1e999c 100644
--- a/dmp-backend/src/main/java/models/user/components/datasetprofile/Field.java
+++ b/dmp-backend/src/main/java/models/user/components/datasetprofile/Field.java
@@ -1,5 +1,7 @@
 package models.user.components.datasetprofile;
 
+import java.util.Map;
+
 import com.fasterxml.jackson.annotation.JsonIgnore;
 import com.fasterxml.jackson.annotation.JsonProperty;
 import com.fasterxml.jackson.dataformat.xml.annotation.JacksonXmlProperty;
@@ -9,11 +11,12 @@ import models.components.commons.DefaultValue;
 import models.components.commons.Multiplicity;
 import models.components.commons.ViewStyle;
 import models.components.commons.Visibility;
+import models.user.composite.PropertiesModelBuilder;
 import utilities.ModelDefinition;
 import utilities.ViewStyleDefinition;
 import utilities.builders.ModelBuilder;
 
-public class Field implements ModelDefinition<entities.xmlmodels.modeldefinition.Field>,ViewStyleDefinition<entities.xmlmodels.viewstyledefinition.Field>{
+public class Field implements PropertiesModelBuilder, ModelDefinition<entities.xmlmodels.modeldefinition.Field>,ViewStyleDefinition<entities.xmlmodels.viewstyledefinition.Field>{
 	private String id;
 	private int ordinal;
 	private String title;
@@ -150,6 +153,11 @@ public class Field implements ModelDefinition<entities.xmlmodels.modeldefinition
 		this.title = item.getTitle();
 		this.viewStyle = item.getViewStyle();
 		this.data = item.getData();
+	}
+	@Override
+	public void fromJsonObject(Map<String, Object> properties) {
+		this.value = (String)properties.get(this.id);
+		
 	}				
 	
 }
\ No newline at end of file
diff --git a/dmp-backend/src/main/java/models/user/components/datasetprofile/FieldSet.java b/dmp-backend/src/main/java/models/user/components/datasetprofile/FieldSet.java
index fca59c0c4..894956608 100644
--- a/dmp-backend/src/main/java/models/user/components/datasetprofile/FieldSet.java
+++ b/dmp-backend/src/main/java/models/user/components/datasetprofile/FieldSet.java
@@ -2,15 +2,17 @@ package models.user.components.datasetprofile;
 
 import java.util.LinkedList;
 import java.util.List;
+import java.util.Map;
 
 import com.fasterxml.jackson.dataformat.xml.annotation.JacksonXmlElementWrapper;
 
 import models.components.commons.Multiplicity;
+import models.user.composite.PropertiesModelBuilder;
 import utilities.ModelDefinition;
 import utilities.ViewStyleDefinition;
 import utilities.builders.ModelBuilder;
 
-public class FieldSet implements ModelDefinition<entities.xmlmodels.modeldefinition.FieldSet>,ViewStyleDefinition<entities.xmlmodels.viewstyledefinition.FieldSet>{
+public class FieldSet implements PropertiesModelBuilder, ModelDefinition<entities.xmlmodels.modeldefinition.FieldSet>,ViewStyleDefinition<entities.xmlmodels.viewstyledefinition.FieldSet>{
 	private String id;
 	private int ordinal;
 	private Multiplicity multiplicity;
@@ -80,6 +82,12 @@ public class FieldSet implements ModelDefinition<entities.xmlmodels.modeldefinit
 		this.id = item.getId();
 		this.ordinal = item.getOrdinal();
 	}
+
+	@Override
+	public void fromJsonObject(Map<String, Object> properties) {
+		this.fields.forEach(item->item.fromJsonObject(properties));
+		
+	}
 	
 	
 }
diff --git a/dmp-backend/src/main/java/models/user/components/datasetprofile/Group.java b/dmp-backend/src/main/java/models/user/components/datasetprofile/Group.java
index f92fdd62b..363ef74ec 100644
--- a/dmp-backend/src/main/java/models/user/components/datasetprofile/Group.java
+++ b/dmp-backend/src/main/java/models/user/components/datasetprofile/Group.java
@@ -1,15 +1,17 @@
 package models.user.components.datasetprofile;
 
 import java.util.List;
+import java.util.Map;
 
 import com.fasterxml.jackson.dataformat.xml.annotation.JacksonXmlElementWrapper;
 
 import entities.xmlmodels.viewstyledefinition.FieldGroup;
+import models.user.composite.PropertiesModelBuilder;
 import utilities.ModelDefinition;
 import utilities.ViewStyleDefinition;
 import utilities.builders.ModelBuilder;
 
-public class Group implements ModelDefinition<entities.xmlmodels.modeldefinition.FieldGroup>,ViewStyleDefinition<entities.xmlmodels.viewstyledefinition.FieldGroup>{
+public class Group implements PropertiesModelBuilder, ModelDefinition<entities.xmlmodels.modeldefinition.FieldGroup>,ViewStyleDefinition<entities.xmlmodels.viewstyledefinition.FieldGroup>{
 	private String id;
 	private String title;
 	private String section;
@@ -115,4 +117,9 @@ public class Group implements ModelDefinition<entities.xmlmodels.modeldefinition
 		// TODO Auto-generated method stub
 		
 	}
+	@Override
+	public void fromJsonObject(Map<String, Object> properties) {
+		this.compositeFields.forEach(item->item.fromJsonObject(properties));
+		
+	}
 }
diff --git a/dmp-backend/src/main/java/models/user/components/datasetprofile/Section.java b/dmp-backend/src/main/java/models/user/components/datasetprofile/Section.java
index ee796a0d7..7ddc7ca95 100644
--- a/dmp-backend/src/main/java/models/user/components/datasetprofile/Section.java
+++ b/dmp-backend/src/main/java/models/user/components/datasetprofile/Section.java
@@ -1,12 +1,14 @@
 package models.user.components.datasetprofile;
 
 import java.util.List;
+import java.util.Map;
 
+import models.user.composite.PropertiesModelBuilder;
 import utilities.ModelDefinition;
 import utilities.ViewStyleDefinition;
 import utilities.builders.ModelBuilder;
 
-public class Section implements ViewStyleDefinition<entities.xmlmodels.viewstyledefinition.Section>{
+public class Section implements ViewStyleDefinition<entities.xmlmodels.viewstyledefinition.Section>,PropertiesModelBuilder{
 	private List<Section> sections;
 	private List<Group> fieldGroups; 
 	private Boolean defaultVisibility;
@@ -87,6 +89,11 @@ public class Section implements ViewStyleDefinition<entities.xmlmodels.viewstyle
 		this.sections = new ModelBuilder().fromViewStyleDefinition(item.getSections(),Section.class);
 		this.title = item.getTitle();		
 	}
+	@Override
+	public void fromJsonObject(Map<String, Object> properties) {
+		this.sections.forEach(item->item.fromJsonObject(properties));
+		this.fieldGroups.forEach(item->item.fromJsonObject(properties));
+	}
 	
 	
 }
diff --git a/dmp-backend/src/main/java/models/user/composite/DatasetProfile.java b/dmp-backend/src/main/java/models/user/composite/DatasetProfile.java
index 7bd23da17..32fc87ef2 100644
--- a/dmp-backend/src/main/java/models/user/composite/DatasetProfile.java
+++ b/dmp-backend/src/main/java/models/user/composite/DatasetProfile.java
@@ -4,11 +4,12 @@ import utilities.builders.ModelBuilder;
 import utilities.helpers.ModelBuilderCollector;
 
 import java.util.List;
+import java.util.Map;
 
 import models.user.components.datasetprofile.*;
 import models.user.components.commons.Rule;
 
-public class DatasetProfile {
+public class DatasetProfile implements PropertiesModelBuilder{
 	private List<Section> sections;
 	private List<Rule> rules;
 	public List<Section> getSections() {
@@ -38,5 +39,11 @@ public class DatasetProfile {
 		this.rules = ModelBuilderCollector.collectRules(viewStyle.getSections());
 
 	}
+
+	@Override
+	public void fromJsonObject(Map<String, Object> properties) {
+		this.sections.forEach(item->item.fromJsonObject(properties));
+		
+	}
 	
 }
diff --git a/dmp-backend/src/main/java/models/user/composite/PropertiesModelBuilder.java b/dmp-backend/src/main/java/models/user/composite/PropertiesModelBuilder.java
new file mode 100644
index 000000000..6d72c2c1b
--- /dev/null
+++ b/dmp-backend/src/main/java/models/user/composite/PropertiesModelBuilder.java
@@ -0,0 +1,7 @@
+package models.user.composite;
+
+import java.util.Map;
+
+public interface PropertiesModelBuilder {
+	void fromJsonObject(Map<String,Object> properties);
+}
diff --git a/dmp-backend/src/main/java/proxy/fetching/RemoteFetcher.java b/dmp-backend/src/main/java/proxy/fetching/RemoteFetcher.java
index 9b73ea5b5..741718649 100644
--- a/dmp-backend/src/main/java/proxy/fetching/RemoteFetcher.java
+++ b/dmp-backend/src/main/java/proxy/fetching/RemoteFetcher.java
@@ -26,7 +26,9 @@ import com.jayway.jsonpath.DocumentContext;
 import com.jayway.jsonpath.JsonPath;
 
 import proxy.config.ConfigLoader;
+import proxy.config.FetchStrategy;
 import proxy.config.UrlConfig;
+import proxy.config.entities.ServiceUrls;
 import proxy.config.exceptions.HugeResultSet;
 import proxy.config.exceptions.NoURLFound;
 
@@ -39,59 +41,52 @@ public class RemoteFetcher {
 //	private static int MAX_RESULTS = 30;
 	
 	
-//	public static void main(String [] args) throws Exception {
-//		
-//		String path = "https://eestore.paas2.uninett.no/api/datarepo";
-//		String query = "her";
-//		
-//		RemoteFetcher remoteFetcher = new RemoteFetcher();
-//		List<Map<String, String>> repos = remoteFetcher.getAllResultsFromUrl(path, query);
-//		
-////		List<Map<String, String>> repos = remoteFetcher.getRepositories(query);
-//		System.out.println(repos.size());
-//		
-//	}
-	
 	@Cacheable("repositories")
 	public List<Map<String, String>> getRepositories(String query) throws NoURLFound, HugeResultSet {
 		List<UrlConfig> urlConfigs = configLoader.getExternalUrls().getRepositories().getUrls();
-		return getAll(urlConfigs, query);
+		FetchStrategy fetchStrategy = configLoader.getExternalUrls().getRepositories().getFetchMode();
+		return getAll(urlConfigs, fetchStrategy, query);
 	}
 	
 	@Cacheable("projects")
 	public List<Map<String, String>> getProjects(String query) throws NoURLFound, HugeResultSet {
 		List<UrlConfig> urlConfigs = configLoader.getExternalUrls().getProjects().getUrls();
-		return getAll(urlConfigs, query);
+		FetchStrategy fetchStrategy = configLoader.getExternalUrls().getProjects().getFetchMode();
+		return getAll(urlConfigs, fetchStrategy, query);
 	}
 	
 	@Cacheable("organisations")
 	public List<Map<String, String>> getOrganisations(String query) throws NoURLFound, HugeResultSet {
 		List<UrlConfig> urlConfigs = configLoader.getExternalUrls().getOrganisations().getUrls();
-		return getAll(urlConfigs, query);
+		FetchStrategy fetchStrategy = configLoader.getExternalUrls().getOrganisations().getFetchMode();
+		return getAll(urlConfigs, fetchStrategy, query);
 	}
 	
 	@Cacheable("registries")
 	public List<Map<String, String>> getRegistries(String query) throws NoURLFound, HugeResultSet {
 		List<UrlConfig> urlConfigs = configLoader.getExternalUrls().getRegistries().getUrls();
-		return getAll(urlConfigs, query);
+		FetchStrategy fetchStrategy = configLoader.getExternalUrls().getRegistries().getFetchMode();
+		return getAll(urlConfigs, fetchStrategy, query);
 	}
 	
 	@Cacheable("services")
 	public List<Map<String, String>> getServices(String query) throws NoURLFound, HugeResultSet {
 		List<UrlConfig> urlConfigs = configLoader.getExternalUrls().getServices().getUrls();
-		return getAll(urlConfigs, query);
+		FetchStrategy fetchStrategy = configLoader.getExternalUrls().getServices().getFetchMode();
+		return getAll(urlConfigs, fetchStrategy, query);
 	}
 	
 	@Cacheable("researchers")
 	public List<Map<String, String>> getResearchers(String query) throws NoURLFound, HugeResultSet {
 		List<UrlConfig> urlConfigs = configLoader.getExternalUrls().getResearchers().getUrls();
-		return getAll(urlConfigs, query);
+		FetchStrategy fetchStrategy = configLoader.getExternalUrls().getResearchers().getFetchMode();
+		return getAll(urlConfigs, fetchStrategy, query);
 	}
 	
 	
 	
 	
-	private List<Map<String, String>> getAll(List<UrlConfig> urlConfigs, String query) throws NoURLFound, HugeResultSet{
+	private List<Map<String, String>> getAll(List<UrlConfig> urlConfigs, FetchStrategy fetchStrategy, String query) throws NoURLFound, HugeResultSet{
 		
 		if(urlConfigs == null || urlConfigs.isEmpty())
 			throw new NoURLFound("No Repository urls found in configuration");
@@ -101,7 +96,7 @@ public class RemoteFetcher {
 		//for the time being, we only get the first one. in the near future we can add more than one (parallel stream)
 		//urlConfigs.parallelStream().map(mapper).reduce() etc etc
 		
-		return getAllResultsFromUrl(urlConfigs.get(0).getUrl(), urlConfigs.get(0).getDataPath(), urlConfigs.get(0).getPaginationPath(), query);
+		return getAllResultsFromUrl(urlConfigs.get(0).getUrl(), fetchStrategy, urlConfigs.get(0).getDataPath(), urlConfigs.get(0).getPaginationPath(), query);
 		
 	}
 	
@@ -109,7 +104,7 @@ public class RemoteFetcher {
 	
 	
 	
-	private List<Map<String, String>> getAllResultsFromUrl(String path, final String jsonDataPath, final String jsonPaginationPath, String query) throws HugeResultSet {
+	private List<Map<String, String>> getAllResultsFromUrl(String path, FetchStrategy fetchStrategy, final String jsonDataPath, final String jsonPaginationPath, String query) throws HugeResultSet {
 		Set<Integer> pages = new HashSet<Integer>();
 		
 		final String searchQuery = (query!=null) && !query.isEmpty() ? "&search="+query : "";
@@ -117,6 +112,10 @@ public class RemoteFetcher {
 		//first call
 		Results results = getResultsFromUrl(path + "?page=1" + searchQuery,  jsonDataPath, jsonPaginationPath);
 		
+		//if fetch strategy is to get only first page, then return that
+		if(fetchStrategy == FetchStrategy.FIRST)
+			return results.getResults();
+		
 		if(results.getPagination()!= null && results.getPagination().get("pages") != null) //if has more pages, add them to the pages set
 			for(int i = 2; i <= results.getPagination().get("pages") ; i++)
 				pages.add(i);
diff --git a/dmp-backend/src/main/java/rest/entities/Admin.java b/dmp-backend/src/main/java/rest/entities/Admin.java
index c94db349c..38ea376ba 100644
--- a/dmp-backend/src/main/java/rest/entities/Admin.java
+++ b/dmp-backend/src/main/java/rest/entities/Admin.java
@@ -4,11 +4,10 @@ import java.util.List;
 import java.util.UUID;
 import java.util.stream.Collectors;
 
-import javax.transaction.Transactional;
-
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
+import org.springframework.transaction.annotation.Transactional;
 import org.springframework.web.bind.annotation.CrossOrigin;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestBody;
@@ -62,6 +61,34 @@ public class Admin {
 		}
 	} 
 	
+	@Transactional
+	@RequestMapping(method = RequestMethod.POST, value = { "/admin/addDmp/{id}" },consumes = "application/json", produces="application/json")
+	public ResponseEntity<Object> updateDmp(@PathVariable String id,@RequestBody DatasetProfile profile){
+		try{
+			entities.DatasetProfile modelDefinition = AdminManager.generateModelDefinition(profile);
+			entities.DatasetProfileViewstyle viewStyleDefinition = AdminManager.generateViewStyleDefinition(profile);
+
+			
+			entities.DatasetProfile datasetprofile = datasetProfileDao.read(UUID.fromString(id));
+
+			entities.DatasetProfileViewstyle oldviewStyle = datasetProfileViewstyleDao.read((datasetprofile.getViewstyle().getId()));
+			oldviewStyle.setDefinition(viewStyleDefinition.getDefinition());
+			datasetProfileViewstyleDao.update(oldviewStyle);
+
+			
+			//if(!datasetprofile.getDataset().isEmpty())throw new Exception ("Cannot edit a Profile that has Datasets assigned");
+			
+			datasetprofile.setViewstyle(oldviewStyle);
+			datasetprofile.setDefinition(modelDefinition.getDefinition());
+			datasetProfileDao.update(datasetprofile);
+			
+			return ResponseEntity.status(HttpStatus.OK).body(null);
+		}catch(Exception ex){
+			ex.printStackTrace();
+			return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("{\"reason\":\""+ex.getMessage()+"\"}");
+		}
+	} 
+	
 	@RequestMapping(method = RequestMethod.GET, value = { "/admin/get/{id}" }, produces="application/json")
 	public ResponseEntity<Object> get(@PathVariable String id){
 		try{
diff --git a/dmp-backend/src/main/java/rest/entities/DatasetProfileController.java b/dmp-backend/src/main/java/rest/entities/DatasetProfileController.java
index dd7acb517..a54e07ceb 100644
--- a/dmp-backend/src/main/java/rest/entities/DatasetProfileController.java
+++ b/dmp-backend/src/main/java/rest/entities/DatasetProfileController.java
@@ -1,23 +1,31 @@
 package rest.entities;
 
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 import java.util.UUID;
 
+import org.json.JSONObject;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.CrossOrigin;
 import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.bind.annotation.RestController;
 
+import com.google.gson.JsonObject;
+
+import dao.entities.DatasetDao;
 import dao.entities.DatasetProfileDao;
 import dao.entities.DatasetProfileRulesetDao;
 import dao.entities.DatasetProfileViewstyleDao;
 import helpers.SerializerProvider;
 import managers.AdminManager;
 import managers.UserManager;
+import models.properties.PropertiesModel;
 
 @RestController
 @CrossOrigin
@@ -26,17 +34,40 @@ public class DatasetProfileController {
 	@Autowired private DatasetProfileDao datasetProfileDao;
 	@Autowired private DatasetProfileRulesetDao datasetProfileRulesetDao;
 	@Autowired private DatasetProfileViewstyleDao datasetProfileViewstyleDao;
-	
-	@RequestMapping(method = RequestMethod.GET, value = { "/datasetprofile/get/{id}" }, produces="application/json")
-	public ResponseEntity<Object> get(@PathVariable String id){
-		try {
-			entities.DatasetProfile profile = datasetProfileDao.read(UUID.fromString(id));
-			models.user.composite.DatasetProfile datasetprofile = UserManager.generateDatasetProfileModel(profile);
+	@Autowired private DatasetDao datasetDao;
 
+	@RequestMapping(method = RequestMethod.GET, value = { "/datasetprofile/get/{id}" }, produces="application/json")
+	public ResponseEntity<Object> getSingle(@PathVariable String id){
+		try {
+			entities.Dataset dataset = datasetDao.read(UUID.fromString(id));
+			models.user.composite.DatasetProfile datasetprofile = UserManager.generateDatasetProfileModel(dataset.getProfile());
+			if(dataset.getProperties()!=null){
+				JSONObject jobject = new JSONObject(dataset.getProperties());
+				Map<String,Object> properties = (Map<String, Object>)jobject.toMap();
+				datasetprofile.fromJsonObject(properties);				
+			}
 			return ResponseEntity.status(HttpStatus.OK).body(datasetprofile);
 		}
 		catch(Exception ex) {
 			return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Serialization issue: "+ex.getMessage());
 		}
 	} 
+	
+	
+	@RequestMapping(method = RequestMethod.POST, value = { "/datasetprofile/save/{id}" }, consumes="application/json",produces="application/json")
+	public ResponseEntity<Object> postDataset(@PathVariable String id,@RequestBody PropertiesModel properties){
+		try {
+			entities.Dataset dataset = datasetDao.read(UUID.fromString(id));
+			Map<String,String> values = new HashMap();
+			properties.toMap(values);
+			JSONObject jobject = new JSONObject(values);
+			dataset.setProperties(jobject.toString());
+			datasetDao.update(dataset);
+
+			return ResponseEntity.status(HttpStatus.OK).body(properties);
+		}
+		catch(Exception ex) {
+			return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Serialization issue: "+ex.getMessage());
+		}
+	} 
 }
diff --git a/dmp-backend/src/main/java/utilities/builders/ModelBuilder.java b/dmp-backend/src/main/java/utilities/builders/ModelBuilder.java
index 09524d9ab..d7b094568 100644
--- a/dmp-backend/src/main/java/utilities/builders/ModelBuilder.java
+++ b/dmp-backend/src/main/java/utilities/builders/ModelBuilder.java
@@ -5,6 +5,7 @@ import java.util.List;
 
 import entities.xmlmodels.modeldefinition.DatabaseModelDefinition;
 import entities.xmlmodels.viewstyledefinition.DatabaseViewStyleDefinition;
+import models.components.commons.datafield.CheckBoxData;
 import models.components.commons.datafield.ComboBoxData;
 import models.components.commons.datafield.FieldData;
 import models.components.commons.datafield.RadioBoxData;
@@ -66,7 +67,7 @@ public class ModelBuilder {
 		if(type.equals("combobox")) return (U) new ComboBoxData().fromData(data);
 		if(type.equals("booleanDecision"))return null;
 		if(type.equals("radiobox"))return (U) new RadioBoxData().fromData(data);
-		if(type.equals("checkBox"))return null;
+		if(type.equals("checkBox"))return (U) new CheckBoxData().fromData(data);
 		if(type.equals("freetext"))return null;
 		return null;
 	}
diff --git a/dmp-backend/src/main/java/utilities/builders/XmlBuilder.java b/dmp-backend/src/main/java/utilities/builders/XmlBuilder.java
index 00c56c0af..25d7e9453 100644
--- a/dmp-backend/src/main/java/utilities/builders/XmlBuilder.java
+++ b/dmp-backend/src/main/java/utilities/builders/XmlBuilder.java
@@ -15,9 +15,14 @@ import javax.xml.transform.dom.DOMSource;
 import javax.xml.transform.stream.StreamResult;
 
 import org.w3c.dom.Document;
+import org.w3c.dom.Element;
+import org.w3c.dom.Node;
+import org.w3c.dom.NodeList;
 import org.xml.sax.InputSource;
 import org.xml.sax.SAXException;
 
+import entities.xmlmodels.viewstyledefinition.FieldSet;
+
 
 public class XmlBuilder {
 
@@ -66,4 +71,14 @@ public class XmlBuilder {
 			return null;
 		}
 	}
+	
+	public static Element getNodeFromListByTagName(NodeList list, String tagName) {
+		for (int temp = 0; temp < list.getLength(); temp++) {
+			Node element = list.item(temp);				
+			if (element.getNodeType() == Node.ELEMENT_NODE) {
+				if(element.getNodeName().equals(tagName))return (Element) element;
+			}
+		}
+		return null;
+	}
 }
diff --git a/dmp-backend/src/main/resources/ExternalUrls.xml b/dmp-backend/src/main/resources/ExternalUrls.xml
index ddf4f0f6d..fbd4c3608 100644
--- a/dmp-backend/src/main/resources/ExternalUrls.xml
+++ b/dmp-backend/src/main/resources/ExternalUrls.xml
@@ -15,7 +15,7 @@
 			
 		</urls>
 
-		<fetchMode>ALL</fetchMode>
+		<fetchMode>FIRST</fetchMode>  <!-- EITHER 'FIRST' OR 'ALL' -->
 	</registries>
 
 	
@@ -31,7 +31,7 @@
 			
 		</urls>
 
-		<fetchMode>ALL</fetchMode>
+		<fetchMode>FIRST</fetchMode>  <!-- EITHER 'FIRST' OR 'ALL' -->
 	
 	</projects>
 	
@@ -47,7 +47,7 @@
 			
 		</urls>
 
-		<fetchMode>ALL</fetchMode>
+		<fetchMode>FIRST</fetchMode>  <!-- EITHER 'FIRST' OR 'ALL' -->
 		
 	</repositories>
 	
@@ -64,7 +64,7 @@
 			
 		</urls>
 
-		<fetchMode>ALL</fetchMode>
+		<fetchMode>FIRST</fetchMode>  <!-- EITHER 'FIRST' OR 'ALL' -->
 	</services>
 
 
@@ -80,7 +80,7 @@
 			
 		</urls>
 
-		<fetchMode>ALL</fetchMode>
+		<fetchMode>FIRST</fetchMode>  <!-- EITHER 'FIRST' OR 'ALL' -->
 	</researchers>
 
 
@@ -97,7 +97,7 @@
 			
 		</urls>
 
-		<fetchMode>ALL</fetchMode>
+		<fetchMode>FIRST</fetchMode>  <!-- EITHER 'FIRST' OR 'ALL' -->
 	
 	</organisations>
 
diff --git a/dmp-frontend/asdk.json b/dmp-frontend/asdk.json
new file mode 100644
index 000000000..6b50d9113
--- /dev/null
+++ b/dmp-frontend/asdk.json
@@ -0,0 +1 @@
+{"sections":[{"sections":[],"fieldGroups":[{"id":"dataSummaryGroup","title":"Data Summary","value":null,"description":null,"extendedDescription":null,"defaultVisibility":true,"page":null,"ordinal":"1","compositeFields":[{"id":"dataSummaryFS","ordinal":1,"fields":[{"id":"dataSummary","title":null,"description":null,"extendedDescription":null,"defaultVisibility":null,"page":null,"ordinal":1,"multiplicity":{"min":1,"max":1},"defaultValue":{"type":null,"value":null},"viewStyle":{"cssClass":null,"renderStyle":"textarea"},"visible":{"style":null,"rules":[]}}],"multiplicity":{"min":1,"max":1}}]}],"defaultVisibility":true,"page":null,"id":"datasummary","title":"Data Summary","description":null,"ordinal":"1"},{"sections":[{"sections":[],"fieldGroups":[{"id":"FindDataMetadataGroup","title":null,"value":null,"description":null,"extendedDescription":null,"defaultVisibility":true,"page":null,"ordinal":"2","compositeFields":[{"id":"useMetadataQ211FS","ordinal":1,"fields":[{"id":"useMetadataQ211","title":"Q2.1.1 Will you use metadata to describe the data?","description":"User can select from a list of metadata standards. If they cannot find the standard in the list provided then they should choose \"not listed\". Selecting this will result in a field in which the user can insert the URL to the description of the metadata scheme used. A \"comments\" box should exist to allow users to add comments. They may select more than one metadata standard. They may specify more than one URL when selecting \"not listed\". They are also presented with a field in which to specify the location of the metadata service.                              Users can select the \"no metadata\" button to specify no metadata will be used to describe the data.","extendedDescription":null,"defaultVisibility":true,"page":null,"ordinal":1,"multiplicity":{"min":1,"max":1},"defaultValue":{"type":null,"value":null},"viewStyle":{"cssClass":null,"renderStyle":"booleanDesicion"},"visible":{"style":null,"rules":[]}}],"multiplicity":{"min":1,"max":1}}]}],"defaultVisibility":true,"page":null,"id":"dataMetadata","title":"2.1 Making data findable, including provisions for metadata","description":null,"ordinal":"3"}],"fieldGroups":[],"defaultVisibility":null,"page":null,"id":"fairData","title":"2 Fair Data","description":null,"ordinal":null}],"label":"Horizon 2020 template"}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/app-routing.module.ts b/dmp-frontend/src/app/app-routing.module.ts
index 376a60808..0d2ea6119 100644
--- a/dmp-frontend/src/app/app-routing.module.ts
+++ b/dmp-frontend/src/app/app-routing.module.ts
@@ -15,7 +15,7 @@ import { ProjectDetailedComponent } from './viewers/project-detailed/project-det
 
 const appRoutes: Routes = [
   
-  { path: 'dynamic-form', component: DynamicFormComponent, canActivate: [AuthGuard] },
+  { path: 'dynamic-form/:id', component: DynamicFormComponent, canActivate: [AuthGuard] },
   { path: 'dataset', component: DatasetsComponent },
   { path: 'login', component: MainSignInComponent},
   { path: 'projects', component: ProjectsComponent},
@@ -49,7 +49,7 @@ const appRoutes: Routes = [
     RouterModule.forRoot(
       appRoutes
       ,{ 
-        useHash: true
+        useHash: false
         //,enableTracing: true <-- debugging purposes only
       } 
     )
diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html
index f36df178a..57546e87d 100644
--- a/dmp-frontend/src/app/app.component.html
+++ b/dmp-frontend/src/app/app.component.html
@@ -1,14 +1,13 @@
-
 <div>
   <nav class="navbar navbar-default shadowed">
-    <div class="col-md-5" >
+    <div class="col-md-5">
       <!--
       <button class="btn btn-primary " [ngClass]="{true:'visible', false:'invisible'}[tokenService.isLoggedIn() == true]" (click)='slideNav()'>
         <span style="font-size:20px;cursor:pointer" >&#9776;</span>
       </button>
     -->
       <div class="nav navbar-nav navbar-left">
-          <!--
+        <!--
           <div class="dropdown" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]">
               <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Go To <span class="caret"></span> </button>
               <ul class="dropdown-menu">
@@ -17,44 +16,65 @@
               </ul>
             </div>
           -->
-          <li class="dropdown" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]">
-              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Quick Navigate
-              <span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                  <li><a class="cursor" (click)="goToDMPs()">My DMPs</a></li>
-                  <li><a class="cursor" (click)="goToProjects()">Projects</a></li>
-              </ul>
+        <li class="dropdown" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]">
+          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Quick Navigate
+            <span class="caret"></span>
+          </a>
+          <ul class="dropdown-menu">
+            <li>
+              <a class="cursor" (click)="goToDMPs()">My DMPs</a>
             </li>
-
-
-        
-
-      </div>
-    </div>
-    
-
-
-    <div class="col-md-3" >
-        <h3 class="navbar-title">Data Management Plans Creator</h3>
-    </div>
-
-    <div class="col-md-4" >
-        <ul class="nav navbar-nav navbar-right">
-            <li class="dropdown" [ngClass]="{true:'invisible'}[loggedInAs == null]">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Quick links <span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="#">Action</a></li>
-                <li><a href="#">Another action</a></li>
-                <li><a href="#">Something else here</a></li>
-                <li role="separator" class="divider"></li>
-                <li><a href="#">Separated link</a></li>
-              </ul>
+            <li>
+              <a class="cursor" (click)="goToProjects()">Projects</a>
             </li>
-            <li [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]"><a>{{tokenService.getEmail()}}</a></li>
-            <li class="cursor" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]" (click)="logout()"><a>Logout</a></li>
-            <li class="cursor" [ngClass]="{true:'invisible'}[tokenService.isLoggedIn() == true]" (click)="login()" ><a>Login</a></li>
           </ul>
+        </li>
+
+
+
+
       </div>
+    </div>
+
+
+
+    <div class="col-md-3">
+      <h3 class="navbar-title">Data Management Plans Creator</h3>
+    </div>
+
+    <div class="col-md-4">
+      <ul class="nav navbar-nav navbar-right">
+        <li class="dropdown" [ngClass]="{true:'invisible'}[loggedInAs == null]">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Quick links
+            <span class="caret"></span>
+          </a>
+          <ul class="dropdown-menu">
+            <li>
+              <a href="#">Action</a>
+            </li>
+            <li>
+              <a href="#">Another action</a>
+            </li>
+            <li>
+              <a href="#">Something else here</a>
+            </li>
+            <li role="separator" class="divider"></li>
+            <li>
+              <a href="#">Separated link</a>
+            </li>
+          </ul>
+        </li>
+        <li [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]">
+          <a>{{tokenService.getEmail()}}</a>
+        </li>
+        <li class="cursor" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]" (click)="logout()">
+          <a>Logout</a>
+        </li>
+        <li class="cursor" [ngClass]="{true:'invisible'}[tokenService.isLoggedIn() == true]" (click)="login()">
+          <a>Login</a>
+        </li>
+      </ul>
+    </div>
 
   </nav>
 
@@ -82,9 +102,7 @@
 
 
   <div id="appBody" class="child_div_right">
-      
-    <router-outlet></router-outlet> 
-
+      <router-outlet></router-outlet>
   </div>
 
 
diff --git a/dmp-frontend/src/app/app.component.ts b/dmp-frontend/src/app/app.component.ts
index a18742d99..fb0b02d02 100644
--- a/dmp-frontend/src/app/app.component.ts
+++ b/dmp-frontend/src/app/app.component.ts
@@ -35,45 +35,8 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit() {
-    //this.initiateExternalProviders();
   }
 
-  initiateExternalProviders(){
-
-
-    //initiate google
-    var clientId = '1010962018903-glegmqudqtl1lub0150vacopbu06lgsg.apps.googleusercontent.com';
-    var scope = [
-      'profile',
-      'email'
-    ].join(' ');
-    
-    if(gapi.auth2 == undefined){
-    
-        gapi.load('auth2', () => {
-          
-          gapi.auth2.init({
-            client_id: clientId,
-            cookiepolicy: 'single_host_origin',
-            scope: scope
-          });
-          
-          
-    
-          //RE-Render the button (due to known issues of google-button with angular's lifecycle)
-          gapi.signin2.render('googleBtn');
-    
-          //var buttonElement = this.element.nativeElement.querySelector('#googleBtn'); 
-          //this.attachSignin(buttonElement);
-          
-        });
-    
-    }
-
-  }
-
-
-
   slideNav(){
 
     $("#appSidebar").toggleClass("expanded");
diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts
index 69958aef7..8baafd160 100644
--- a/dmp-frontend/src/app/app.module.ts
+++ b/dmp-frontend/src/app/app.module.ts
@@ -1,3 +1,18 @@
+import { PaginationService } from './form/pagination/pagination-service';
+import {
+    TableOfContentsFieldComponent,
+} from './form/tableOfContents/table-of-content-field/table-of-content-field.component';
+import { ProgressBarComponent } from './form/pprogress-bar/progress-bar.component';
+import {
+    TableOfContentsSectionComponent,
+} from './form/tableOfContents/table-of-content-section/table-of-content-section.component';
+import {
+    TableOfContentsGroupComponent,
+} from './form/tableOfContents/table-of-content-group/table-of-content-group.component';
+import {
+    TableOfContentsFieldSetComponent,
+} from './form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component';
+import { TableOfContentsComponent } from './form/tableOfContents/table-of-contents.component';
 import {
     DynamicFieldRadioBoxComponent,
 } from './form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component';
@@ -19,7 +34,7 @@ import { RouterModule, Routes, Router } from '@angular/router';
 //import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
 import { DataTableModule } from "angular2-datatable";
 
-//import { OrganisationTableFilterPipe } from './pipes/organisation-table-filter.pipe';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppComponent } from './app.component';
 import { RestBase } from './services/rest-base';
@@ -34,11 +49,9 @@ import { AppRoutingModule } from './app-routing.module';
 import { AuthGuard } from './guards/auth.guard';
 import { PageNotFoundComponent } from './not-found.component';
 import { HomepageComponent } from './homepage/homepage.component';
-import { TocComponent } from './form/tableOfContents/toc.component';
 import { ConfirmationComponent } from './widgets/confirmation/confirmation.component';
 
 
-import { PaginationService } from './services/pagination.service';
 import { EestoreService } from './services/eestore.service';
 import { GlobalInterceptor } from './services/interceptor';
 import { PDFService } from './services/transformers/pdf.service';
@@ -53,7 +66,7 @@ import { NguiAutoCompleteModule } from '@ngui/auto-complete';
 
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 
-import { BreadcrumbModule, MenuItem } from 'primeng/primeng';
+import { BreadcrumbModule, PanelModule } from 'primeng/primeng';
 
 import { CommonModule } from '@angular/common';
 
@@ -81,8 +94,10 @@ import { BreadcrumbComponent } from './widgets/breadcrumb/breadcrumb.component';
 import { DmpDetailedComponent } from './viewers/dmp-detailed/dmp-detailed.component';
 import { ProjectDetailedComponent } from './viewers/project-detailed/project-detailed.component';
 
-
-
+import {ProgressBarModule} from 'primeng/primeng';
+import {StepsModule,MenuItem} from 'primeng/primeng';
+import {CheckboxModule} from 'primeng/primeng';
+import {RadioButtonModule} from 'primeng/primeng';
 
 @NgModule({
   declarations: [
@@ -93,7 +108,10 @@ import { ProjectDetailedComponent } from './viewers/project-detailed/project-det
     DynamicFormCompositeFieldComponent,
     DynamicFieldBooleanDecisionComponent,
     DynamicFieldRadioBoxComponent,
-    TocComponent,
+    TableOfContentsComponent,
+    TableOfContentsFieldSetComponent,
+    TableOfContentsGroupComponent,
+    TableOfContentsSectionComponent,
     GooggleSignInComponent,
     MainSignInComponent,
     PageNotFoundComponent,
@@ -113,6 +131,8 @@ import { ProjectDetailedComponent } from './viewers/project-detailed/project-det
     DatasetTableFilterPipe,
     DatasetStatusFilterPipe,
     StatusToString,
+    TableOfContentsFieldComponent,
+    ProgressBarComponent,
     DynamicFieldCheckBoxComponent,
     BreadcrumbComponent, DmpDetailedComponent, ProjectDetailedComponent
   ],
@@ -131,15 +151,20 @@ import { ProjectDetailedComponent } from './viewers/project-detailed/project-det
     Ng4LoadingSpinnerModule,
     NguiAutoCompleteModule,
     BreadcrumbModule,
-    SidebarModule.forRoot()
-
+    ProgressBarModule,
+    PanelModule,
+    BrowserAnimationsModule,
+    SidebarModule.forRoot(),
+    StepsModule,
+    CheckboxModule,
+    RadioButtonModule
   ],
   providers: [{
     provide: HTTP_INTERCEPTORS,
     useClass: GlobalInterceptor,
     multi: true,
   },
-    ServerService, VisibilityRulesService, GlobalVariables, AuthGuard, PaginationService, TokenService, LocalStorageService, RestBase, EestoreService, NativeLoginService, PDFService
+    ServerService, VisibilityRulesService,PaginationService, GlobalVariables, AuthGuard, TokenService, LocalStorageService, RestBase, EestoreService, NativeLoginService, PDFService
   ],
   bootstrap: [AppComponent]
 })
diff --git a/dmp-frontend/src/app/datasets/dataset.component.ts b/dmp-frontend/src/app/datasets/dataset.component.ts
index 69aa4a209..21273a751 100644
--- a/dmp-frontend/src/app/datasets/dataset.component.ts
+++ b/dmp-frontend/src/app/datasets/dataset.component.ts
@@ -240,7 +240,7 @@ export class DatasetsComponent implements OnInit {
   }
 
   describeDataset(item) {
-    this.router.navigate(['/dynamic-form'], { queryParams: {id: item.profile.id, datasetId:item.id, label: item.label}});
+    this.router.navigate(['/dynamic-form/'+item.id]);
     //this.ngZone.run(() => this.router.navigate(['dynamic-form', {id: item.profile.id, datasetId:item.id, label: item.label}]));
   }
 
diff --git a/dmp-frontend/src/app/entities/model/section.ts b/dmp-frontend/src/app/entities/model/section.ts
index 67cae3207..9234283d8 100644
--- a/dmp-frontend/src/app/entities/model/section.ts
+++ b/dmp-frontend/src/app/entities/model/section.ts
@@ -3,9 +3,9 @@ import { Injectable } from '@angular/core';
 @Injectable()
 export class Section {
   title: string;
-  description:string;
+  description: string;
   id: string;
   defaultVisibility: boolean;
   ordinal: number;
-  page:number;
+  page: number;
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.html
index cc7bfc7e9..b5547d2e0 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.html
@@ -1,6 +1,3 @@
 <div [formGroup]="textFormGroup">
-    <label>{{field.description}}</label>
-    <div>{{field.extendedDescription}}</div>
-    <label>{{field.title}}</label>
     <input auto-complete class="form-control autocomplete" formControlName="text" [source]="values">
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.ts b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.ts
index 1e95a360e..6f57b24ef 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.ts
@@ -1,5 +1,5 @@
 import { Field } from '../../../models/Field';
-import { Component, OnInit, Input, Output, EventEmitter, forwardRef } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, forwardRef, ViewEncapsulation } from '@angular/core';
 import { ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 
 import { ServerService } from '../../../services/server.service';
@@ -12,7 +12,8 @@ declare var $: any;
 @Component({
   selector: 'df-autocomplete',
   templateUrl: './autocomplete-remote.component.html',
-  styleUrls: ['./autocomplete-remote.component.css']
+  styleUrls: ['./autocomplete-remote.component.css'],
+  encapsulation: ViewEncapsulation.None
 })
 
 
@@ -23,11 +24,11 @@ export class AutocompleteRemoteComponent implements OnInit/* , ControlValueAcces
   @Input() field: Field;
   @Input() form: FormGroup;
 
-  private textFormGroup = new FormGroup({text:new FormControl("")});
+  private textFormGroup = new FormGroup({ text: new FormControl("") });
   private loading: boolean;
   values: any[] = new Array();
   typeaheadMS: number = 1400;
-  
+
   constructor(private serverService: ServerService) {
 
   }
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.css b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.css
new file mode 100644
index 000000000..f7be5b613
--- /dev/null
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.css
@@ -0,0 +1,3 @@
+.radio-label {
+    margin-left: 10px;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.html
index 011d7b413..dd0eaa6ad 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.html
@@ -1,6 +1,5 @@
 <div [formGroup]="form">
-    <label>{{field.description}}</label>
-    <div>{{field.extendedDescription}}</div>
-    <input type="radio" formControlName="value" value="true">Yes<br>
-    <input type="radio" formControlName="value" value="false">No
+    <p-radioButton name="{{field.id}}" [value]="true" label="Yes" formControlName="value"></p-radioButton>
+    <br>
+    <p-radioButton name="{{field.id}}" [value]="false" label="No" formControlName="value"></p-radioButton>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.ts b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.ts
index 3366c2912..1535432af 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.ts
@@ -1,11 +1,15 @@
 import { FormGroup } from '@angular/forms';
 import { Field } from '../../../models/Field';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FieldBase } from '../field-base';
 
 @Component({
     selector: 'df-booleanDecision',
-    templateUrl: './dynamic-field-boolean-decision.component.html'
+    templateUrl: './dynamic-field-boolean-decision.component.html',
+    styleUrls: [
+        './dynamic-field-boolean-decision.component.css'
+    ],
+    encapsulation: ViewEncapsulation.None
 })
 export class DynamicFieldBooleanDecisionComponent implements OnInit{
     @Input() field: Field;
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.css b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.css
index bf67b66d0..f947dfb22 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.css
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.css
@@ -1 +1,7 @@
-@CHARSET "UTF-8";
\ No newline at end of file
+.checkbox-label {
+    margin-left: 10px;
+}
+
+.checkbox-icon {
+    margin-left: 0px;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html
index df499a335..51c61f4f0 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html
@@ -1,6 +1,3 @@
-
-<div [formGroup]="form" class="form-group" >
-        <label>{{field.description}}</label>
-        <div>{{field.extendedDescription}}</div>
-    <input formControlName="value" type = "checkbox">
+<div [formGroup]="form" class="form-group">
+    <p-checkbox [formControl]="form.get('value')" label="{{field.data.label}}" binary="true"></p-checkbox>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.ts b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.ts
index 0d5060d29..33f1bf6eb 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.ts
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.ts
@@ -1,14 +1,18 @@
 import { Field } from '../../../models/Field';
 import { FormGroup } from '@angular/forms';
-import { Component, Input } from '@angular/core';
-import {FieldBase} from '../field-base';
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { FieldBase } from '../field-base';
 
 @Component({
     selector: 'df-checkbox',
-    templateUrl: './dynamic-field-checkbox.html'
+    templateUrl: './dynamic-field-checkbox.html',
+    styleUrls: [
+        './dynamic-field-checkbox.css'
+    ],
+    encapsulation: ViewEncapsulation.None
 })
-export class DynamicFieldCheckBoxComponent{
-    @Input() field:Field;
-    @Input() form:FormGroup;
-    
+export class DynamicFieldCheckBoxComponent {
+    @Input() field: Field;
+    @Input() form: FormGroup;
+
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.html
index 28eaae771..47df16539 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.html
@@ -1,7 +1,5 @@
 <div [formGroup]="form">
-    <label>{{field.description}}</label>
-    <div>{{field.extendedDescription}}</div>
-  <select class="form-control" formControlName="value">
-      <option *ngFor="let opt of field.data.values" [value]="opt.value">{{opt.label}}</option>
+    <select class="form-control" formControlName="value">
+        <option *ngFor="let opt of field.data.options" [value]="opt.value">{{opt.label}}</option>
     </select>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.ts b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.ts
index 902c56fb4..d18c78f35 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.ts
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.ts
@@ -1,17 +1,21 @@
 import { FormGroup } from '@angular/forms';
 import { Field } from '../../../models/Field';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FieldBase } from '../field-base';
 
 @Component({
     selector: 'df-dropdown',
-    templateUrl: './dynamic-field-dropdown.html'
+    templateUrl: './dynamic-field-dropdown.html',
+    styleUrls: [
+        './dynamic-field-dropdown.css'
+    ],
+    encapsulation: ViewEncapsulation.None
 })
-export class DynamicFieldDropdownComponent implements OnInit{
+export class DynamicFieldDropdownComponent implements OnInit {
     @Input() field: Field;
     @Input() form: FormGroup;
 
-    ngOnInit(){
+    ngOnInit() {
 
     }
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.css b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.css
new file mode 100644
index 000000000..f7be5b613
--- /dev/null
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.css
@@ -0,0 +1,3 @@
+.radio-label {
+    margin-left: 10px;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.html
index 130d96d9f..459050352 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.html
@@ -1,7 +1,5 @@
 <div [formGroup]="form">
-    <label>{{field.description}}</label>
-    <div>{{field.extendedDescription}}</div>
-  <div *ngFor="let option of this.field.data.options">
-    <input type="radio" formControlName="value" value="option.value">{{option.label}}<br>
+  <div *ngFor="let option of this.field.data.options let index = index">
+    <p-radioButton name="{{field.id}}" [value]="option.value" label="{{option.label}}" formControlName="value"></p-radioButton>
   </div>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.ts b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.ts
index fd3a4e1fc..c107b156d 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.ts
@@ -1,17 +1,21 @@
 import { FormGroup } from '@angular/forms';
 import { Field } from '../../../models/Field';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FieldBase } from '../field-base';
 
 @Component({
     selector: 'df-radiobox',
-    templateUrl: './dynamic-field-radiobox.component.html'
+    templateUrl: './dynamic-field-radiobox.component.html',
+    styleUrls: [
+        './dynamic-field-radiobox.component.css'
+    ],
+    encapsulation: ViewEncapsulation.None
 })
-export class DynamicFieldRadioBoxComponent implements OnInit{
+export class DynamicFieldRadioBoxComponent implements OnInit {
     @Input() field: Field;
     @Input() form: FormGroup;
 
-    ngOnInit(){
+    ngOnInit() {
 
     }
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/field-radiobox.css b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/field-radiobox.css
deleted file mode 100644
index bf67b66d0..000000000
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/field-radiobox.css
+++ /dev/null
@@ -1 +0,0 @@
-@CHARSET "UTF-8";
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.css b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.css
new file mode 100644
index 000000000..ad1e6a6d6
--- /dev/null
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.css
@@ -0,0 +1,18 @@
+.full-width {
+    width: 100%;
+}
+
+.field-component {
+    border:1px solid grey;
+    border-radius: 2px;
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+.field-extended-desc {
+    color: lightslategray;
+}
+
+.content-left-margin {
+    margin-left: 10px;
+}
\ 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 7945c060a..b0f325df7 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,3 +1,55 @@
+<div class="field-component" [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form"
+  [ngSwitch]="field.viewStyle.renderStyle">
+
+  <h5 *ngIf="field.title">{{path + ' ' + field.title}}</h5>
+  <h5 *ngIf="field.description">{{field.description}}</h5>
+  <h5 *ngIf="field.extendedDescription" class="field-extended-desc">
+    <i>{{field.extendedDescription}}</i>
+  </h5>
+
+  <div class="content-left-margin">
+    <div *ngSwitchCase="'freetext'">
+      <input class="form-control" formControlName="value">
+    </div>
+
+    <div *ngSwitchCase="'combobox'">
+      <!--TODO-->
+      <div *ngIf="this.field.data.type === 'autocomplete'">
+        <df-autocomplete [form]="form" [field]="field"></df-autocomplete>
+      </div>
+      <div *ngIf="this.field.data.type === 'wordlist'">
+        <df-dropdown [form]="form" [field]="field"></df-dropdown>
+      </div>
+    </div>
+
+    <div *ngSwitchCase="'checkBox'" class="checkbox">
+      <df-checkbox [form]="form" [field]="field"></df-checkbox>
+    </div>
+
+    <div *ngSwitchCase="'textarea'">
+      <textarea class="form-control" formControlName="value"> </textarea>
+    </div>
+
+    <div *ngSwitchCase="'booleanDecision'">
+      <df-booleanDecision [form]="form" [field]="field"></df-booleanDecision>
+    </div>
+
+    <div *ngSwitchCase="'radiobox'">
+      <df-radiobox [form]="form" [field]="field"></df-radiobox>
+    </div>
+
+    <div *ngSwitchCase="'label'"> </div>
+
+
+    <div [hidden]="isValid">
+      <div class="invalid-feedbackCustom" *ngIf="isValidRequired">The field "{{field.label}}" is required</div>
+      <div class="invalid-feedbackCustom" *ngIf="isValidPattern">The field {{field.label}} must match a regular expression {{field.regex}}</div>
+      <div class="invalid-feedbackCustom" *ngIf="isValidCustom">The field {{field.label}} custom Validation</div>
+    </div>
+
+  </div>
+</div>
+
 <!-- <div [formGroup]="form" class="form-group">
 
 
@@ -26,22 +78,11 @@
 
 </div> -->
 
-<div *ngIf="this.visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form" class="form-group" [ngSwitch]="field.viewStyle.renderStyle">
-  <div [ngClass]="{true:'show', false:'hide'}[field.visible]">
 
-
-      <label>{{field.title}}</label>
-      
-    <div *ngSwitchCase="'freetext'">
-        <label>{{field.description}}</label>
-        <div>{{field.extendedDescription}}</div>
-      <input class="form-control" formControlName="value">
-    </div>
-
-    <!--input or change event
+<!--input or change event
       on change event the listener is triggered on blur -->
 
-    <!-- <div *ngSwitchCase="'dropdown'">
+<!-- <div *ngSwitchCase="'dropdown'">
 
         <autocomplete-remote *ngIf="field.url" formControlName="value" [url]="field.url" ></autocomplete-remote>
         
@@ -50,54 +91,16 @@
         </select>
       </div> -->
 
-    <div *ngSwitchCase="'combobox'">
-      <!--TODO-->
-      <div *ngIf="this.field.data.type === 'autocomplete'">
-        <df-autocomplete [form]="form" [field]="field"></df-autocomplete>
-      </div>
-      <div *ngIf="this.field.data.type === 'wordlist'">
-        <df-dropdown [form]="form" [field]="field"></df-dropdown>  
-      </div>      
-    </div>
 
 
-    <!--     <div *ngSwitchCase="'checkbox'" class="checkbox">
+
+<!--     <div *ngSwitchCase="'checkbox'" class="checkbox">
         <label class="checkBoxLabelCustom">
             <input *ngSwitchCase="'checkbox'" class="form-check" formControlName="value" [type]="field.type"
             (change)="toggleVisibility($event, field, true)"  [required]="field.required" [checked]="form.get(field.key).value">{{field.label}}
         </label>
       </div> -->
 
-    <div *ngSwitchCase="'checkBox'" class="checkbox">
-      <df-checkbox [form]="form" [field]="field"></df-checkbox>      
-    </div>
-
-    <div *ngSwitchCase="'textarea'">
-      <textarea class="form-control" formControlName="value"> </textarea>
-    </div>
-
-    <div *ngSwitchCase="'booleanDecision'">
-      <df-booleanDecision [form]="form" [field]="field"></df-booleanDecision>
-    </div>
-
-    <div *ngSwitchCase="'radiobox'">
-      <df-radiobox [form]="form" [field]="field"></df-radiobox>
-    </div>
-    
-  </div>
-
-  <div *ngSwitchCase="'label'"> </div>
-
-
-  <div [hidden]="isValid">
-    <div class="invalid-feedbackCustom" *ngIf="isValidRequired">The field "{{field.label}}" is required</div>
-    <div class="invalid-feedbackCustom" *ngIf="isValidPattern">The field {{field.label}} must match a regular expression {{field.regex}}</div>
-    <div class="invalid-feedbackCustom" *ngIf="isValidCustom">The field {{field.label}} custom Validation</div>
-  </div>
-
-
-</div>
-
 <!-- <div [formGroup]="form" class="form-group" [ngSwitch]="field.controlType">
     <div *ngIf= "field.rules; else  elseBlock ">
       <div *ngIf="field.rules.length > 0; else elseBlock">
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.ts b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.ts
index fd2ce1078..b26bec162 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.ts
@@ -1,7 +1,7 @@
 import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
 import { VisibilityRuleSource } from '../../visibility-rules/models/VisibilityRuleSource';
 import { Field } from '../../models/Field';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormGroup, ValidatorFn, AbstractControl, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
@@ -12,22 +12,25 @@ import { RuleStyle } from '../../entities/common/rulestyle';
 @Component({
     selector: 'df-field',
     templateUrl: './dynamic-form-field.component.html',
-    styles: ['.checkBoxLabelCustom {font-weight: 700;}']
+    // styles: ['.checkBoxLabelCustom {font-weight: 700;}']
+    styleUrls: [
+        './dynamic-form-field.component.css'
+      ],
+      encapsulation: ViewEncapsulation.None
 })
 
 export class DynamicFormFieldComponent {
     @Input() field: Field;
     @Input() form: FormGroup;
     @Input() pathName:string;
+    @Input() path:string;
     
-    private fragment: string;
-
     constructor(private route: ActivatedRoute,private visibilityRulesService:VisibilityRulesService) { }
 
     ngOnChanges(changeRecord) {
+    
     }
 
-
     get isValid() {
         return this.form.get("value").valid;
     }
@@ -40,9 +43,4 @@ export class DynamicFormFieldComponent {
     get isValidCustom() {
         return this.form.get("value").hasError("forbiddenName");
     }
-
-    public ngOnInit() {                 
-        this.route.fragment.subscribe(fragment => { this.fragment = fragment; }); //navigate to certain section of the page
-    }
-
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.css b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.css
new file mode 100644
index 000000000..e19052935
--- /dev/null
+++ b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.css
@@ -0,0 +1,18 @@
+.full-width {
+    width: 100%;
+}
+
+.fieldset-component {
+    border:1px solid grey;
+    border-radius: 2px;
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+.fieldset-extended-desc {
+    color: lightslategray;
+}
+
+.content-left-margin {
+    margin-left: 10px;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html
index 55876bae5..b13e9ed85 100644
--- a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html
+++ b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html
@@ -1,8 +1,12 @@
-<div [formGroup]="form">
-    <h4>{{compositeField.title}}</h4>
-    <div *ngFor="let field of compositeField.fields; let i = index;">
-        <df-field [field]="field" [form]="form.get('fields').get(''+i)" [pathName]="pathName+'.fields.'+i"></df-field>
+<div *ngIf="visibilityRulesService.isElementVisible(pathName,compositeField.id)" class="fieldset-component" [id]="compositeField.id" [formGroup]="form">
+    <h4 *ngIf="compositeField.title">{{compositeField.title}}</h4>
+    <div class="content-left-margin">
+        <h4 *ngIf="compositeField.description">{{compositeField.description}}</h4>
+        <h4 *ngIf="compositeField.extendedDescription" class="fieldset-extended-desc">
+            <i>{{compositeField.extendedDescription}}</i>
+        </h4>
+        <div *ngFor="let field of compositeField.fields; let i = index;">
+            <df-field [field]="field" [form]="form.get('fields').get(''+i)" [path]="path" [pathName]="pathName+'.fields.'+i"></df-field>
+        </div>
     </div>
-
-</div>
-<!-- class = "form-group" [class]="customStyle"  [ngStyle] = "customStyle"-->
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts
index dccd82325..7e4c3885a 100644
--- a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts
+++ b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts
@@ -1,18 +1,24 @@
+import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
 import { CompositeField } from '../../models/CompositeField';
 import { FormGroup } from '@angular/forms';
 import { Section } from '../../entities/model/section';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 @Component({
     selector: 'df-composite-field',
     templateUrl: './dynamic-form-composite-field.html',
+    styleUrls: [
+      './dynamic-form-composite-field.css'
+    ],
+    encapsulation: ViewEncapsulation.None,
   })
   export class DynamicFormCompositeFieldComponent implements OnInit{
 
     @Input() compositeField: CompositeField
     @Input() form: FormGroup;
     @Input() pathName:string;
+    @Input() path:string;
     
-    constructor(){}
+    constructor(private visibilityRulesService:VisibilityRulesService){}
 
     ngOnInit(){
 
diff --git a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.css b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.css
index a5d0bf7e9..7657b454e 100644
--- a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.css
+++ b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.css
@@ -4,4 +4,19 @@
 
 .show {
     display:block;
+}
+
+.group-component {
+    border:1px solid grey;
+    border-radius: 2px;
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+.group-extended-desc {
+    color: lightslategray;
+}
+
+.content-left-margin {
+    margin-left: 10px;
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
index 3086b9765..c8f4256f9 100644
--- a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
@@ -1,8 +1,13 @@
-<div [formGroup]="form" >
-    <h4 >{{group.title}}</h4>
-    <div *ngFor="let compositeField of group.compositeFields; let i = index;">
-        <df-composite-field [compositeField]="compositeField" [form]="form.get('compositeFields').get(''+i)" [pathName]="pathName+'.compositeFields.'+i"></df-composite-field>
+<div *ngIf="visibilityRulesService.isElementVisible(pathName,group.id)"  class="group-component" [id]="group.id" [formGroup]="form">
+    <h4>{{path + ' ' + group.title}}</h4>
+    <div class="content-left-margin">
+        <h5 *ngIf="group.description">{{group.description}}</h5>
+        <h5 *ngIf="group.extendedDescription" class="group-extended-desc">
+            <i>{{group.extendedDescription}}</i>
+        </h5>
+        <div *ngFor="let compositeField of group.compositeFields; let i = index;">
+            <df-composite-field [compositeField]="compositeField" [form]="form.get('compositeFields').get(''+i)" [path]="path+'.'+(i+1)"
+                [pathName]="pathName+'.compositeFields.'+i"></df-composite-field>
+        </div>
     </div>
-
-</div>
-<!-- class = "form-group" [class]="customStyle"  [ngStyle] = "customStyle"-->
\ No newline at end of file
+</div>
\ No newline at end of file
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 f90638974..7c59a7047 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
@@ -1,5 +1,6 @@
+import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
 import { FieldGroup } from '../../models/FieldGroup';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormGroup, Validators, FormControl } from '@angular/forms';
 import { NgForm } from '@angular/forms';
 import { Rule } from '../../entities/common/rule';
@@ -9,17 +10,18 @@ import { Rule } from '../../entities/common/rule';
 @Component({
   selector: 'df-group',
   templateUrl: './dynamic-form-group.component.html',
-  styleUrls: ['./dynamic-form-group.component.css']
+  styleUrls: ['./dynamic-form-group.component.css'],
+  encapsulation: ViewEncapsulation.None,
 })
 export class DynamicFormGroupComponent implements OnInit {
   @Input() group: FieldGroup
   @Input() form: FormGroup;
   @Input() pathName:string;
   
-  @Input() customStyle: {};
-  @Input() classFromJson: string;
+  @Input() path:string;
+  
 
-  constructor() {
+  constructor(private visibilityRulesService:VisibilityRulesService) {
   }
 
   ngOnInit() {
diff --git a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.css b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.css
new file mode 100644
index 000000000..2f6ca0157
--- /dev/null
+++ b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.css
@@ -0,0 +1,3 @@
+.section-component {
+    margin-bottom: 10px;
+}
\ No newline at end of file
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 e280016de..cc859b146 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
@@ -1,13 +1,22 @@
-<div [formGroup]="form">
-    <h3>{{section.title}}</h3>
-    <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>
+<p-panel *ngIf="visibilityRulesService.isElementVisible(pathName,section.id)" class="section-component" [toggleable]="true">
+    <p-header>
+        <div class="ui-helper-clearfix">
+            <h2>{{path}} {{section.title}}</h2>
+        </div>
+    </p-header>
+
+    <div [id]="section.id" [formGroup]="form">
+        <h3 *ngIf="section.description">{{section.description}}</h3>
+        <h4 *ngIf="section.extendedDescription">{{section.extendedDescription}}</h4>
+        <div *ngIf="section.fieldGroups">
+            <div *ngFor="let group of section.fieldGroups; let j = index;">
+                <df-group [group]="group" [form]="form.get('fieldGroups').get(''+j)" [path]="path+'.'+(j+1)" [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>
     </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)" [pathName]="pathName+'.sections.'+j"></df-section>
-        </div>
-    </div>   
-</div>
\ No newline at end of file
+</p-panel>
\ 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 798c451bc..1e96b0067 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
@@ -1,19 +1,24 @@
+import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
 import { FormGroup } from '@angular/forms';
 import { Section } from '../../entities/model/section';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 @Component({
-    selector: 'df-section',
-    templateUrl: './dynamic-form-section.html',
-  })
-  export class DynamicFormSectionComponent implements OnInit{
+  selector: 'df-section',
+  templateUrl: './dynamic-form-section.html',
+  styleUrls: [
+    './dynamic-form-section.css'
+  ],
+  encapsulation: ViewEncapsulation.None,
+})
+export class DynamicFormSectionComponent implements OnInit {
 
-    @Input() section: Section
-    @Input() form: FormGroup;
-    @Input() pathName:string;
+  @Input() section: Section
+  @Input() form: FormGroup;
+  @Input() pathName: string;
+  @Input() path: string;
+  constructor(private visibilityRulesService:VisibilityRulesService) { }
 
-    constructor(){}
+  ngOnInit() {
 
-    ngOnInit(){
-
-    }
-  }
\ No newline at end of file
+  }
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.css b/dmp-frontend/src/app/form/dynamic-form.component.css
index 80406e064..263b37ebf 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.css
+++ b/dmp-frontend/src/app/form/dynamic-form.component.css
@@ -1,111 +1,30 @@
-.hide{
-    display:none;
+.full-width {
+    width: 100%;
 }
 
-.show {
-    display:block;
+.ui-steps .ui-steps-item {
+    width: 25%;
 }
 
-.btncustom{
-    background-color:#337ab7;
-    color:white;
-    margin-top:15px;
+.ui-steps.steps-custom {
+    margin-bottom: 30px;
+}
+ 
+.ui-steps.steps-custom .ui-steps-item .ui-menuitem-link {
+    height: 10px;
+    padding: 0 1em;
+}
+ 
+.ui-steps.steps-custom .ui-steps-item .ui-steps-number {
+    background-color: #0081c2;
+    color: #FFFFFF;
+    display: inline-block;
+    width: 36px;
+    border-radius: 50%;
+    margin-top: -14px;
+    margin-bottom: 10px;
 }
 
-.parent-div {
-    height: calc(100vh - 60px - 32px); /*  is height_of(window) - heigh_of(app-header-bar) - height_of(breadcrumb) */
-    width:100%;
-}
-
-
-
-.child-div-left{
-
-    -webkit-box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.75);
-    -moz-box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.75);
-    box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.75);
-
-    padding:0px;
-    height: 100%;
-    -webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
-    transition: width 0.5s;
-
-}
-
-
-.collapsed-div-caret{
-    position: absolute;
-    width: 120px;
-    left: 98%;
-    top: 103px;
-    transform: translate(-50%, -50%);
-    z-index: 9999;
-    font-size: 1.3em;
-    cursor: pointer;
-}
-
-.child-div-caret{
-    position: absolute;
-    left: 120%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 9999;
-    font-size: 1.3em;
-    cursor: pointer;
-}
-
-
-.child-div-right {
-    overflow-y: scroll;
-    
-    height: calc(100% - 44px);  
-
-    -webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
-    transition: width 0.5s;
-    
-}
-
-.shrink-width{
-    width: 0px;
-    /*visibility:hidden;*/
-}
-
-
-
-.form-body-container{
-    padding-bottom: 10px;
-    height: calc(100vh - 85px - 32px - 138px);  /* is height_of(window) - heigh_of(app-header-bar) - height_of(breadcrumb) - height_of(form-footer-bar) */
-    overflow-y:scroll; 
-}
-
-.form-footer-seperator{
-
-    border-style: solid;
-    border-width: 1px;
-    border-color: rgb(112, 112, 112);
-
-    /*
-    -webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,0.75);
-    -moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,0.75);
-    box-shadow: 0px 0px 11px 1px rgba(0,0,0,0.75);
-    */
-
-    /*border-width: thin;*/
-    width:100%;
-}
-
-.form-footer-container {
-
-    /*
-    -webkit-box-shadow: 0px -3px 5px 0px rgba(128,128,128,1);
-    -moz-box-shadow: 0px -3px 5px 0px rgba(128,128,128,1);
-    box-shadow: 0px -3px 5px 0px rgba(128,128,128,1);
-    */
-
-    height: 138px;
-}
-
-.progress{
-    margin-top: 8px;
-    margin-bottom: 0px;
+.ui-steps.steps-custom .ui-steps-item .ui-steps-title {
+    color: #555555;
 }
\ 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 60fe2fc6a..2195b0308 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form.component.html
@@ -1,120 +1,124 @@
-<div class="parent-div">
-		
-	<div class=" child-div-left" [ngClass]="{true:'col-md-8 col-sm-9', false:'col-md-12 col-sm-12'}[expandedToc]">
-		
-		<div class="col-md-12 form-body-container" id="form-container">
+<div class="ui-g dynamic-form">
+	<ng-sidebar-container class="ui-g" style="height: 100vh;">
+		<ng-sidebar mode="push" style="height: 100vh;" position="right" [(opened)]="visibleSidebar">
+			<table-of-content [model]="dataModel"></table-of-content>
+		</ng-sidebar>
 
-			<form novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
-					
-				<div *ngFor = "let section of dataModel.sections; let i = index;">							
-					<df-section [section]="section" [form]="form.get('sections').get(''+i)" [pathName]="'sections.'+i"></df-section>
-				</div>
-	
-				<!-- <div *ngFor="let group of dataModel.groups">
-					<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
-				</div> -->
-	
-	
-			</form>
-		</div>
-	
+		<div class="ui-g" ng-sidebar-content>
+			<button class="ui-g" pButton type="button" (click)="toggleSidebar()" icon="fa-arrow-left">Table Of Contents</button>
+			<button type="button" 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.paginationService.getCurrentIndex()" (activeIndex)="this.paginationService.setCurrentIndex($event)"
+				 [readonly]="false"></p-steps>
+			</div>
+			<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">
 
-		<!-- <div class="col-md-12 form-footer-seperator" >
-		</div>
+				<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
 
-	
-		<div class="col-md-12 form-footer-container" >
-			
-				<div >
-					<div class="progress">
-						<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow= "" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': dirtyValues + '%'}">
-						</div>
+					<div *ngFor="let section of dataModel.sections; let i = index;">
+						<df-section *ngIf='this.paginationService.isElementVisible(section.page)' [section]="section" [form]="form.get('sections').get(''+i)"
+						 [path]="i+1" [pathName]="'sections.'+i"></df-section>
 					</div>
+				</form>
+			</div>
+		</div>
+
+	</ng-sidebar-container>
+</div>
+
+<!-- <div class="col-md-12 form-footer-container">
+				<div>
+					
 				</div>
-
-			<div>
-				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" (click)="SaveForm();">Save</button>
-				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" data-toggle="modal" data-target="#confirmModal">Finalize</button>
-			</div>
-	 -->
-			<!--
-			<div *ngIf="payLoad" class="form-row">
-				<strong>Saved the following values</strong><br>{{payLoad}}
-			</div>
-			-->
-			
-			
-			<p>Form value: {{ form.value | json }}</p>
-		
-	
-			
-		<!-- 	<div class="text-center">
-				<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
-					<li [ngClass]="{disabled:pagination.currentPage === 1}">
-						<a (click)="setPage(1)" class="cursor-link" >First</a>
-					</li>
-					<li [ngClass]="{disabled:pagination.currentPage === 1}">
-						<a (click)="setPage(pagination.currentPage - 1)" class="cursor-link">Previous</a>
-					</li>
-					<li *ngFor="let page of pagination.pages" [ngClass]="{active:pagination.currentPage === page}">
-						<a (click)="setPage(page)" class="cursor-link">{{page}}</a>
-					</li>
-					<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
-						<a (click)="setPage(pagination.currentPage + 1)" class="cursor-link">Next</a>
-					</li>
-					<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
-						<a (click)="setPage(pagination.totalPages)" class="cursor-link">Last</a>
-					</li>
-				</ul>
 			</div> -->
+<!-- <div class="col-md-12 form-footer-seperator" >
+			</div>
+	
+		
+			
+	
+				<div>
+					<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" (click)="SaveForm();">Save</button>
+					<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" data-toggle="modal" data-target="#confirmModal">Finalize</button>
+				</div>
+		 -->
+<!--
+				<div *ngIf="payLoad" class="form-row">
+					<strong>Saved the following values</strong><br>{{payLoad}}
+				</div>
+				-->
+
+
+
+
+<!-- 	<div class="text-center">
+					<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
+						<li [ngClass]="{disabled:pagination.currentPage === 1}">
+							<a (click)="setPage(1)" class="cursor-link" >First</a>
+						</li>
+						<li [ngClass]="{disabled:pagination.currentPage === 1}">
+							<a (click)="setPage(pagination.currentPage - 1)" class="cursor-link">Previous</a>
+						</li>
+						<li *ngFor="let page of pagination.pages" [ngClass]="{active:pagination.currentPage === page}">
+							<a (click)="setPage(page)" class="cursor-link">{{page}}</a>
+						</li>
+						<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
+							<a (click)="setPage(pagination.currentPage + 1)" class="cursor-link">Next</a>
+						</li>
+						<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
+							<a (click)="setPage(pagination.totalPages)" class="cursor-link">Last</a>
+						</li>
+					</ul>
+				</div> -->
+
 
-	</div>	
 
 
 <!-- 	<div *ngIf="!expandedToc" class="collapsed-div-caret" (click)="toggleTOC()">
- -->		<!--
-		<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Show ToC</div></i>
-		-->
-<!-- 		<i class="fa toc-toggler" aria-hidden="true" ><div>Show ToC</div></i>
-	</div>
-	
-	<div *ngIf="expandedToc" class="col-md-12" style="width:200px; text-align: center;">
-		<h4 style="display: inline-block; text-align: center; width:150px;">Table of Contents</h4>
-		<div class="child-div-caret" style="display: inline-block; width:50px;" (click)="toggleTOC()"> -->
-			<!--
-			<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Shrink</div></i>
+	 -->
+<!--
+			<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Show ToC</div></i>
 			-->
-		<!-- 	<i class="fa toc-toggler" aria-hidden="true"><div>(hide)</div></i>
-		</div> 
-	</div>
-
-	<div class="child-div-right" [ngClass]="{true:'col-md-4 col-sm-3', false:'shrink-width' }[expandedToc]" id="toc-container">
-		<toc [dataModel]="dataModel"  (setPage)="setPage($event)"></toc>
-	</div> -->
-				
+<!-- 		<i class="fa toc-toggler" aria-hidden="true" ><div>Show ToC</div></i>
+		</div>
 		
-			
-</div>
+		<div *ngIf="expandedToc" class="col-md-12" style="width:200px; text-align: center;">
+			<h4 style="display: inline-block; text-align: center; width:150px;">Table of Contents</h4>
+			<div class="child-div-caret" style="display: inline-block; width:50px;" (click)="toggleTOC()"> -->
+<!--
+				<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Shrink</div></i>
+				-->
+<!-- 	<i class="fa toc-toggler" aria-hidden="true"><div>(hide)</div></i>
+			</div> 
+		</div>
+	 -->
+
+<!-- <div class="col-md-12 form-footer-container">
+			<button type="button" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
+		</div> -->
 
 
 <!--Modal for Confirmation -->
 <!-- <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="newVersionDmpModalLabel" aria-hidden="true">
-	<div class="modal-dialog" role="document">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h5 class="modal-title" id="exampleModalLabel">Confirmation Message</h5>
-				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-					<span aria-hidden="true">&times;</span>
-					</button>
-			</div>
-			<div class="modal-body">
-				<p>Are you sure you want to save and finalize?</p>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-				<button type="button" class="btn btn-primary" (click)="SaveFinalizeForm();">Save and Finalize</button>
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="exampleModalLabel">Confirmation Message</h5>
+					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+						</button>
+				</div>
+				<div class="modal-body">
+					<p>Are you sure you want to save and finalize?</p>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+					<button type="button" class="btn btn-primary" (click)="SaveFinalizeForm();">Save and Finalize</button>
+				</div>
 			</div>
 		</div>
-	</div>
-</div> -->
-		
\ No newline at end of file
+	</div> -->
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index 1bc148088..71bb27980 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form.component.ts
@@ -1,10 +1,11 @@
+import { PaginationService } from './pagination/pagination-service';
 import { VisibilityRulesService } from '../visibility-rules/visibility-rules.service';
 import { TestModel } from '../testModel/testmodel';
 import { DatasetModel } from '../models/DatasetModel';
 import { Rule } from '../models/Rule';
 
 import { JsonSerializer } from '../utilities/JsonSerializer';
-import { Component, Input, OnInit, AfterViewChecked, ViewChild, forwardRef } from '@angular/core';
+import { Component, Input, OnInit, AfterViewChecked, ViewChild, forwardRef, ViewEncapsulation } from '@angular/core';
 import { FormGroup, Validators, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgForm } from '@angular/forms';
 import { Router, ActivatedRoute, ParamMap, Params } from '@angular/router';
@@ -13,70 +14,67 @@ import 'rxjs/add/operator/switchMap';
 //import { FieldBase } from '../../app/form/fields/field-base';
 import { FieldControlService } from '../../app/services/field-control.service';
 import { ServerService } from '../../app/services/server.service';
-import { PaginationService } from '../../app/services/pagination.service';
 import { TokenService, TokenProvider } from '../services/login/token.service';
 import { ModalComponent } from '../modal/modal.component';
 
-import {Location} from '@angular/common';
+import { Location } from '@angular/common';
 
 import { AngularDraggableModule } from 'angular2-draggable';
 
-import {MenuItem} from 'primeng/primeng';
+import { MenuItem } from 'primeng/primeng';
 
-import {PDFService} from '../services/transformers/pdf.service';
+import { PDFService } from '../services/transformers/pdf.service';
 
 import './../../assets/xml2json.min.js';
 declare var X2JS: any;
 
 var flatten = require('flat');
-declare var $ :any;
+declare var $: any;
 
 
 import * as scroll from '../../assets/jquery.scrollTo.min.js';
 
 
 import '../../assets/custom.js';
-declare function simple_notifier(type: string, title: string, message:string): any;
+declare function simple_notifier(type: string, title: string, message: string): any;
 
 
 //import '../../assets/perfect-scrollbar/perfect-scrollbar.js';
-declare var PerfectScrollbar : any;
+declare var PerfectScrollbar: any;
 
 @Component({
   selector: 'dynamic-form',
   templateUrl: './dynamic-form.component.html',
   styleUrls: [
-    './dynamic-form.component.css', 
-    '../../assets/perfect-scrollbar/perfect-scrollbar.css'
+    './dynamic-form.component.css'
   ],
   providers: [
     FieldControlService, ServerService
-  ]
+  ],
+  encapsulation: ViewEncapsulation.None,
 })
 export class DynamicFormComponent implements OnInit {
 
   @Input() dataModel: DatasetModel = new DatasetModel();
+  @Input() path: string;
   form: FormGroup;
-  payLoad = '';
-  @Input() dirtyValues: number = 0;
-  // pagination object
-  @Input() pagination: any = {};
-  finalizeStatus:boolean = false;
   id: string;
   datasetId: string;
-  pathName:string;
-  //datasetProperties:string; 
+  pathName: string;
+  pages: Set<number>;
+  stepperItems: MenuItem[] = new Array<MenuItem>();
+  activeStepperIndex: number = 1;
+  visibleSidebar: boolean = false;
+
+  private progressbar: boolean = false;
 
   private fragment: string;
-  xml2jsonOBJ: any;
-
-  expandedToc : boolean = true;
-
-
-  constructor(private qcs: FieldControlService, private serverService: ServerService, private router: Router, private pdfService : PDFService,
-    private _location: Location, private route: ActivatedRoute, private pagerService: PaginationService, private tokenService: TokenService,private visibilityRulesService:VisibilityRulesService) {
-    this.form = this.qcs.toFormGroup(new Array(), new Array());
-    this.xml2jsonOBJ = new X2JS();
+  constructor(private serverService: ServerService, private router: Router, private pdfService: PDFService,
+    private _location: Location, private route: ActivatedRoute, private tokenService: TokenService
+    , private visibilityRulesService: VisibilityRulesService
+    , private paginationService:PaginationService
+  ) {
+    this.datasetId = route.snapshot.params['id'];
   }
 
   getSubForm(subformName) {
@@ -85,13 +83,60 @@ export class DynamicFormComponent implements OnInit {
 
 
   ngOnInit() {
+
+    this.serverService.getDmp(this.datasetId).subscribe(
+      response => {
+        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;
+        let rules: Rule[] = new JsonSerializer<Rule>().fromJSONArray(response.rules, Rule);
+        this.visibilityRulesService.buildVisibilityRules(rules)
+        this.progressbar = true;
+      },
+      error => {
+        console.log("Could not load dmp");
+      }
+    )
+
+    /* else{
+      
+      this.addSection();
+    }
     this.dataModel = new JsonSerializer<DatasetModel>().fromJSONObject(TestModel,DatasetModel);
     this.form = this.dataModel.buildForm();
     this.visibilityRulesService.formGroup = this.form;
     let rules:Rule[] = new JsonSerializer<Rule>().fromJSONArray(TestModel.rules,Rule);
-    this.visibilityRulesService.buildVisibilityRules(rules) 
+    this.visibilityRulesService.buildVisibilityRules(rules)  */
   }
 
+  submit() {
+    this.serverService.updateDataset(this.datasetId, this.form.value).subscribe()
+  }
+
+  toggleSidebar() {
+    this.visibleSidebar = !this.visibleSidebar;
+  }
+
+  getPages(model: DatasetModel): Set<number> {
+    let pageSet = new Set<number>();
+    model.sections.forEach(section => {
+      pageSet.add(section.page);
+    })
+    return pageSet;
+  }
+
+  createPagination() {
+    this.pages.forEach(item => {
+      this.stepperItems.push({
+        label: '',
+        command: (event: any) => {
+          this.paginationService.setCurrentIndex(event.index)          
+        }
+      })
+    })
+  }
   /* scrollToElemID(elemID) {
     scroll("#" + elemID);
   }
@@ -116,39 +161,7 @@ export class DynamicFormComponent implements OnInit {
     } catch (e) { }
   }
 
-  submitForm(final){
-    debugger;
-    this.serverService.getDatasetByID(this.datasetId).subscribe(
-      (data) => {
-        if (final) data.status = 2;
-        
-        //data.properties = "<root><formValues><![CDATA["+JSON.stringify(this.form.value)+"]]></formValues><dataModel><![CDATA["+JSON.stringify(this.dataModel)+"]]></dataModel></root>";
-        data.properties = JSON.stringify(this.form.value);
-
-        data.profile = {"id": data.profile.id};
-
-        this.serverService.setDataset(data).subscribe(
-          (data) => {
-             
-            console.log("Updated dataset");  
-            
-            if (final){
-              this._location.back();
-              simple_notifier("success",null,"Finalized form progress");
-            }
-            else{
-              simple_notifier("success",null,"Saved form progress");
-            }
-
-          },
-          (err) => {
-            simple_notifier("danger",null,"Could not save form progress");
-          });
-      },
-      (err) => {
-        simple_notifier("danger",null,"Could not save form progress");
-      });
-  }
+  
 
   SaveForm() {
     let final = false;
@@ -197,7 +210,7 @@ export class DynamicFormComponent implements OnInit {
   }
  */
 
-  createPDF(elementID : string, pdffilename : string){
+  createPDF(elementID: string, pdffilename: string) {
     this.pdfService.toPDF(elementID, pdffilename);
   }
 
diff --git a/dmp-frontend/src/app/form/pagination/pagination-service.ts b/dmp-frontend/src/app/form/pagination/pagination-service.ts
new file mode 100644
index 000000000..181928ffe
--- /dev/null
+++ b/dmp-frontend/src/app/form/pagination/pagination-service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core'
+@Injectable()
+export class PaginationService {
+
+    private currentPageIndex: number;
+
+    public setCurrentIndex(currentPageIndex: number): void {
+        this.currentPageIndex = currentPageIndex;
+    }
+
+    public getCurrentIndex():number{
+        return this.currentPageIndex;
+    }
+
+    public isElementVisible(elementPage: number):boolean {
+        return elementPage - 1  == this.currentPageIndex ; //TODO
+    }
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.html b/dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.html
new file mode 100644
index 000000000..7fac72e73
--- /dev/null
+++ b/dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.html
@@ -0,0 +1 @@
+<p-progressBar [value]="value"></p-progressBar>
diff --git a/dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.ts b/dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.ts
new file mode 100644
index 000000000..fd1c7ec66
--- /dev/null
+++ b/dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.ts
@@ -0,0 +1,54 @@
+import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
+
+import { Component, Input, OnInit } from '@angular/core';
+import { FormGroup, FormControl, FormArray } from '@angular/forms'
+@Component({
+    selector: 'progress-bar',
+    templateUrl: './progress-bar.component.html',
+})
+export class ProgressBarComponent implements OnInit {
+    @Input() formGroup: FormGroup
+
+    constructor(private visibilityRulesService: VisibilityRulesService) { }
+
+    private value: number;
+    ngOnInit() {
+        this.formGroup
+            .valueChanges
+            .subscribe(control => {
+                this.value = (this.countFormControlsWithValue(this.formGroup) / this.getFormControlDepthLength(this.formGroup)) * 100
+            })
+    }
+
+    countFormControlsWithValue(form: FormGroup): number {
+        let value = 0;
+        Object.keys(form.controls).forEach(key => {
+            let control = form.controls[key]
+            if (control instanceof FormGroup) value += this.countFormControlsWithValue(control);
+            else if (control instanceof FormArray) {
+                let formArray = (<FormArray>control);
+                for (let i = 0; i < formArray.length; i++) {
+                    value += this.countFormControlsWithValue(<FormGroup>formArray.get("" + i))
+                }
+            }
+            else if (key === "value" && control.value != null) value++;
+        });
+        return value;
+    }
+
+    getFormControlDepthLength(form: FormGroup): number {
+        let value = 0;
+        Object.keys(form.controls).forEach(key => {
+            let control = form.controls[key]
+            if (control instanceof FormGroup) value += this.getFormControlDepthLength(control);
+            else if (control instanceof FormArray) {
+                let formArray = (<FormArray>control);
+                for (let i = 0; i < formArray.length; i++) {
+                    value += this.getFormControlDepthLength(<FormGroup>formArray.get("" + i))
+                }
+            }
+            else if (key === "value" && this.visibilityRulesService.isElementVisible(null, form.controls["id"].value)) value++;
+        });
+        return value;
+    }
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/base-table-of-content.component.ts b/dmp-frontend/src/app/form/tableOfContents/base-table-of-content.component.ts
new file mode 100644
index 000000000..2022cacb7
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/base-table-of-content.component.ts
@@ -0,0 +1,18 @@
+import { PaginationService } from '../pagination/pagination-service';
+import { ActivatedRouteSnapshot, Router, ActivatedRoute } from '@angular/router';
+
+export class BaseTableOfContent {
+    constructor(public router: Router, public route: ActivatedRoute, public paginationService: PaginationService) {
+        this.route.fragment.subscribe((fragment: string) => {
+            setTimeout(function() {
+                if (fragment) document.querySelector('#' + fragment).scrollIntoView();    
+            }, );
+            
+        })
+    }
+
+    scrollToId(elementId, page: number) {
+        this.paginationService.setCurrentIndex(page-1);
+        this.router.navigate([this.route.snapshot.url[0] + "/" + this.route.snapshot.url[1]], { fragment: elementId });
+    }
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.html b/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.html
new file mode 100644
index 000000000..9f1f17ae9
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.html
@@ -0,0 +1,2 @@
+<a (click)="scrollToId(model.id,page)">{{path+' '+model.title}}</a>
+    
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.ts b/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.ts
new file mode 100644
index 000000000..958216811
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.ts
@@ -0,0 +1,24 @@
+import { PaginationService } from '../../pagination/pagination-service';
+import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
+import { BaseTableOfContent } from '../base-table-of-content.component';
+import { CompositeField } from '../../../models/CompositeField';
+import { Field } from '../../../models/Field';
+import { Section } from '../../../models/Section';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import {Router,  ActivatedRoute} from '@angular/router'
+
+
+@Component({
+    selector: 'table-of-contents-field',
+    templateUrl: '/table-of-content-field.component.html',
+    providers:  []
+  })
+export class TableOfContentsFieldComponent extends BaseTableOfContent{
+    @Input() model:Field;
+    @Input() index:number;
+    @Input() public path:string;
+    @Input() public page: number;
+    constructor(public router: Router, public route: ActivatedRoute,private visibilityRulesService: VisibilityRulesService,public paginationService:PaginationService) {
+        super(router, route,paginationService)
+      }
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.html b/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.html
new file mode 100644
index 000000000..0d638e32c
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.html
@@ -0,0 +1,10 @@
+<!-- All contents in the first page -->
+
+<ul>
+    <div *ngFor="let field of model.fields let i = index">
+        <li *ngIf="visibilityRulesService.isElementVisible(null,field.id)">
+            <table-of-contents-field [page]='page' [model]="field" [index]="i" [path]="path">
+            </table-of-contents-field>
+        </li>
+    </div>
+</ul>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.ts b/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.ts
new file mode 100644
index 000000000..6d346a97f
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.ts
@@ -0,0 +1,27 @@
+import { PaginationService } from '../../pagination/pagination-service';
+import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
+import { BaseTableOfContent } from '../base-table-of-content.component';
+import { CompositeField } from '../../../models/CompositeField';
+import { FieldGroup } from '../../../models/FieldGroup';
+import { Section } from '../../../models/Section';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router'
+
+//import * as $ from '../../../../node_modules/jquery/dist/jquery'
+
+
+@Component({
+  selector: 'table-of-contents-fieldset',
+  templateUrl: '/table-of-content-fieldset.component.html',
+  providers: []
+})
+export class TableOfContentsFieldSetComponent extends BaseTableOfContent {
+
+  @Input() model: CompositeField;
+  @Input() index: number;
+  @Input() public path: string;
+  @Input() public page: number;
+  constructor(public router: Router, public route: ActivatedRoute,private visibilityRulesService: VisibilityRulesService,public paginationService:PaginationService) {
+    super(router, route,paginationService)
+  }
+}
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.html b/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.html
new file mode 100644
index 000000000..08081cf53
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.html
@@ -0,0 +1,5 @@
+<a (click)="scrollToId(model.id,page)">{{path+' '+model.title}}</a>
+    
+    <div *ngFor="let fieldsetModel of model.compositeFields let i = index">
+        <table-of-contents-fieldset [page]='page' [model]="fieldsetModel" [index]="i" [path]="path+'.'+(i+1)"> </table-of-contents-fieldset>
+    </div>
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.ts b/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.ts
new file mode 100644
index 000000000..1090e5af3
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.ts
@@ -0,0 +1,31 @@
+import { PaginationService } from '../../pagination/pagination-service';
+import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
+import { BaseTableOfContent } from '../base-table-of-content.component';
+import { FieldGroup } from '../../../models/FieldGroup';
+import { Section } from '../../../models/Section';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import {Router,  ActivatedRoute} from '@angular/router'
+//import * as $ from '../../../../node_modules/jquery/dist/jquery'
+
+
+@Component({
+  selector: 'table-of-contents-group',
+  templateUrl: '/table-of-content-group.component.html',
+  providers: []
+})
+export class TableOfContentsGroupComponent extends BaseTableOfContent  {
+
+  @Input() model: FieldGroup;
+  @Input() index: number;
+  @Input() public path: string;
+  @Input() public page: number;
+  /*   @Output()
+    setPage:EventEmitter<number> = new EventEmitter<number>();
+
+ */
+  constructor(public router: Router, public route: ActivatedRoute,private visibilityRulesService: VisibilityRulesService,public paginationService:PaginationService) {
+    super(router, route,paginationService)
+  }
+
+
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.html b/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.html
new file mode 100644
index 000000000..71747739b
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.html
@@ -0,0 +1,14 @@
+<!-- All contents in the first page -->
+<a (click)="scrollToId(model.id,page)">{{path+' '+model.title}}</a>
+
+<ul>
+    <li *ngFor="let groupModel of model.fieldGroups let i = index">
+        <table-of-contents-group [page]='page' [model]="groupModel" [index]="i" [path]="path+'.'+(i+1)"> </table-of-contents-group>
+    </li>
+</ul>
+<!-- All contents in the first page -->
+<ul>
+    <li *ngFor="let sectionModel of model.sections let i = index">
+        <table-of-contents-section [page]='page' [model]="sectionModel" [index]="i" [path]="path+'.'+(i+1)"> </table-of-contents-section>
+    </li>
+</ul>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.ts b/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.ts
new file mode 100644
index 000000000..b3463ac7c
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.ts
@@ -0,0 +1,29 @@
+import { PaginationService } from '../../pagination/pagination-service';
+import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
+import { BaseTableOfContent } from '../base-table-of-content.component';
+import { Section } from '../../../models/Section';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { ActivatedRouteSnapshot,Router,ActivatedRoute } from '@angular/router';
+
+//import * as $ from '../../../../node_modules/jquery/dist/jquery'
+
+
+@Component({
+  selector: 'table-of-contents-section',
+  templateUrl: '/table-of-content-section.component.html',
+  providers: []
+})
+export class TableOfContentsSectionComponent extends BaseTableOfContent implements OnInit {
+
+  @Input() model: Section;
+  @Input() index: number;
+  @Input() public path: string;
+  @Input() public page: number;
+  constructor(public router: Router,public route:ActivatedRoute,private visibilityRulesService: VisibilityRulesService,public paginationService:PaginationService){
+    super(router,route,paginationService)
+  }
+  ngOnInit() {
+
+  }
+
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-contents.component.html b/dmp-frontend/src/app/form/tableOfContents/table-of-contents.component.html
new file mode 100644
index 000000000..78fa65451
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-contents.component.html
@@ -0,0 +1,7 @@
+<!-- All contents in the first page -->
+<ul>
+    <li *ngFor="let section of model.sections let i = index">
+        <!-- && field.label for sections without field label as data summery -->
+        <table-of-contents-section [page]='section.page' [model]="section" [index]="i+1" [path]="i+1"> </table-of-contents-section>
+    </li>
+</ul>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-contents.component.ts b/dmp-frontend/src/app/form/tableOfContents/table-of-contents.component.ts
new file mode 100644
index 000000000..de349847b
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-contents.component.ts
@@ -0,0 +1,26 @@
+import { Model } from '../../entities/model/model';
+import { DatasetModel } from '../../models/DatasetModel';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+//import * as $ from '../../../../node_modules/jquery/dist/jquery'
+
+import * as scroll from '../../../assets/jquery.scrollTo.min.js';
+
+@Component({
+  selector: 'table-of-content',
+  templateUrl: '/table-of-contents.component.html',
+  styleUrls: ['./toc.component.css'],
+  providers:  []
+})
+export class TableOfContentsComponent implements OnInit{ 
+
+    @Input() model:DatasetModel;
+    public path:string="";
+  /*   @Output()
+    setPage:EventEmitter<number> = new EventEmitter<number>();
+
+ */    ngOnInit(){     
+
+       }
+
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/toc.component.html b/dmp-frontend/src/app/form/tableOfContents/toc.component.html
deleted file mode 100644
index 45a50bf33..000000000
--- a/dmp-frontend/src/app/form/tableOfContents/toc.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<body data-spy="scroll" data-target="#toc">
-    <nav id="toc" data-toggle="toc">
-        <ul class="nav flex-column">
-            <li class="nav-item">              
-                <div  *ngFor="let group of dataModel.groups"> <!-- All contents in the first page -->
-                    <ul>
-                        <li>
-                            <a class="cursor-hand" (click)='scrollToElemID(group.key, group.page)'>{{group.title}}</a>
-                            <ul *ngFor="let field of group.groupFields">
-                                <li *ngIf="field.visible == 'true' && field.label"> <!-- && field.label for sections without field label as data summery -->
-                                    <a class="cursor-hand" (click)='scrollToElemID(field.key, group.page)'>{{field.label}}  </a>
-                                </li>
-                            </ul>
-                        </li>
-                    </ul>
-                </div>
-            </li>
-        </ul>
-    </nav>
-</body>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/toc.component.ts b/dmp-frontend/src/app/form/tableOfContents/toc.component.ts
deleted file mode 100644
index 35853cc17..000000000
--- a/dmp-frontend/src/app/form/tableOfContents/toc.component.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-
-//import * as $ from '../../../../node_modules/jquery/dist/jquery'
-
-import * as scroll from '../../../assets/jquery.scrollTo.min.js';
-
-@Component({
-  selector: 'toc',
-  templateUrl: '/toc.component.html',
-  styleUrls: ['./toc.component.css'],
-  providers:  []
-})
-export class TocComponent implements OnInit{ 
-
-    private headers = new Array();
-
-    @Output()
-    setPage:EventEmitter<number> = new EventEmitter<number>();
-
-    ngOnInit(){     
-
-    }
-
-    scrollToElemID(elemID, _page){
-      console.log("going to id:"+elemID)
-      var page = parseInt(_page)
-      this.setPage.emit(page);
-      scroll("#"+elemID, {}, {offset: top});
-    }
-
-}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.html b/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.html
index e84f17f92..b7e7cd8f9 100644
--- a/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.html
+++ b/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.html
@@ -2,7 +2,7 @@
 <table class="table">
     <tbody>
         <tr align="center">
-            <div class="g-signin2" id="googleBtn"></div>
+            <div  class="g-signin2" id="googleBtn"></div>
         </tr>
     </tbody>
 </table>
diff --git a/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.ts b/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.ts
index d0f2dca38..7b0f37c58 100644
--- a/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.ts
+++ b/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.ts
@@ -14,7 +14,7 @@ declare function simple_notifier(type: string, title: string, message:string): a
   templateUrl: './googgle-sign-in.component.html',
   styleUrls: ['./googgle-sign-in.component.css']
 })
-export class GooggleSignInComponent implements OnInit, AfterViewInit, Injectable {
+export class GooggleSignInComponent implements OnInit, Injectable {
 
   
 
@@ -22,17 +22,47 @@ export class GooggleSignInComponent implements OnInit, AfterViewInit, Injectable
     
   }
 
+  
   ngOnInit() {
+    this.initiateExternalProviders();
+  }
+
+  initiateExternalProviders(){
+
+    var clientId = '1010962018903-glegmqudqtl1lub0150vacopbu06lgsg.apps.googleusercontent.com';
+    var scope = [
+      'profile',
+      'email'
+    ].join(' ');
+    
+    if(gapi.auth2 == undefined){
+    
+        gapi.load('auth2', () => {
+          
+          gapi.auth2.init({
+            client_id: clientId,
+            cookiepolicy: 'single_host_origin',
+            scope: scope
+          }).then(()=>this.renderButton());
+          
+        });
+    
+    }else{
+      gapi.auth2.init({
+        client_id: clientId,
+        cookiepolicy: 'single_host_origin',
+        scope: scope
+      }).then(()=>this.renderButton());
+    }
 
   }
 
-  ngAfterViewInit() {
 
+  renderButton() {
 
-    //RE-Render the button (due to known issues of google-button with angular's lifecycle)
     gapi.signin2.render('googleBtn');
     var buttonElement = this.element.nativeElement.querySelector('#googleBtn'); 
-    this.attachSignin(buttonElement);
+    if(buttonElement)this.attachSignin(buttonElement);
     
   }
   
diff --git a/dmp-frontend/src/app/login/main-sign-in/main-sign-in.component.ts b/dmp-frontend/src/app/login/main-sign-in/main-sign-in.component.ts
index 31290388e..e1b5702cd 100644
--- a/dmp-frontend/src/app/login/main-sign-in/main-sign-in.component.ts
+++ b/dmp-frontend/src/app/login/main-sign-in/main-sign-in.component.ts
@@ -4,6 +4,7 @@ import { NativeLoginService } from '../../services/login/native-login.service';
 import { TokenService, TokenProvider } from '../../services/login/token.service';
 import {Router} from '@angular/router';
 import {MenuItem} from 'primeng/primeng';
+declare const gapi: any;
 
 import '../../../assets/custom.js';
 declare function simple_notifier(type: string, title: string, message:string): any;
diff --git a/dmp-frontend/src/app/models/CompositeField.ts b/dmp-frontend/src/app/models/CompositeField.ts
index 4de8a6122..6362821f3 100644
--- a/dmp-frontend/src/app/models/CompositeField.ts
+++ b/dmp-frontend/src/app/models/CompositeField.ts
@@ -5,16 +5,19 @@ import { BaseModel } from './BaseModel';
 import {Field} from './Field' 
 export class CompositeField extends BaseModel implements Serializable<CompositeField> {
     public fields:Array<Field> = new Array<Field>();
-    
+    public ordinal:number
 
     fromJSONObject(item:any):CompositeField{
         
         this.fields = new JsonSerializer<Field>().fromJSONArray(item.fields,Field);
+        this.ordinal = item.ordinal;
         return this;
     }
 
     buildForm():FormGroup{
-        let formGroup = this.formBuilder.group({});
+        let formGroup = this.formBuilder.group({
+            ordinal:this.ordinal
+        });
 
         let fieldsFormArray = new Array<FormGroup>();        
         this.fields.forEach(item => {
diff --git a/dmp-frontend/src/app/models/Field.ts b/dmp-frontend/src/app/models/Field.ts
index fdfe32a7a..ad4c93edc 100644
--- a/dmp-frontend/src/app/models/Field.ts
+++ b/dmp-frontend/src/app/models/Field.ts
@@ -29,15 +29,15 @@ export class Field extends BaseModel implements Serializable<Field>,FormGenerato
 
     buildForm():FormGroup{
         let formGroup = this.formBuilder.group({
-            id: [this.id],
-            title: [this.title],
-            value: [this.value],
+             id: [this.id],
+           /* title: [this.title], */
+            value: [this.value]/* ,
             description: [this.description],
             extendedDescription:[this.extendedDescription],
             viewStyle: [this.viewStyle],
             defaultVisibility:[this.defaultVisibility],
             page:[this.page],
-            data:[this.data]            
+            data:[this.data]        */     
         });        
         return formGroup;
     }
diff --git a/dmp-frontend/src/app/models/FieldGroup.ts b/dmp-frontend/src/app/models/FieldGroup.ts
index 1c1c3ed88..ae608f78f 100644
--- a/dmp-frontend/src/app/models/FieldGroup.ts
+++ b/dmp-frontend/src/app/models/FieldGroup.ts
@@ -33,13 +33,13 @@ export class FieldGroup extends BaseModel implements Serializable<FieldGroup>, F
 
     buildForm(): FormGroup {
         let formGroup: FormGroup = this.formBuilder.group({
-            id: [this.id],
+            /* id: [this.id],
             title: [this.title],
             value: [this.value],
             description: [this.description],
             extendedDescription: [this.extendedDescription],
             defaultVisibility: [this.defaultVisibility],
-            page: [this.page]
+            page: [this.page] */
         });
         let compositeFieldsFormArray = new Array<FormGroup>();
         if (this.compositeFields) {
diff --git a/dmp-frontend/src/app/models/Section.ts b/dmp-frontend/src/app/models/Section.ts
index cae737010..484906077 100644
--- a/dmp-frontend/src/app/models/Section.ts
+++ b/dmp-frontend/src/app/models/Section.ts
@@ -42,11 +42,11 @@ export class Section extends BaseModel implements Serializable<Section>, FormGen
         }
         formGroup.addControl('sections', this.formBuilder.array(sectionsFormArray));
         formGroup.addControl('fieldGroups', this.formBuilder.array(fieldGroupsFormArray));
-        formGroup.addControl('defaultVisibility', new FormControl(this.defaultVisibility))
+       /*  formGroup.addControl('defaultVisibility', new FormControl(this.defaultVisibility))
         formGroup.addControl('page', new FormControl(this.page))
         formGroup.addControl('id', new FormControl(this.id))
         formGroup.addControl('title', new FormControl(this.title))
-        formGroup.addControl('description', new FormControl(this.description))        
+        formGroup.addControl('description', new FormControl(this.description))    */     
         return formGroup;
     }
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/services/rest-base.ts b/dmp-frontend/src/app/services/rest-base.ts
index cb190b3ef..868eeab67 100644
--- a/dmp-frontend/src/app/services/rest-base.ts
+++ b/dmp-frontend/src/app/services/rest-base.ts
@@ -18,7 +18,7 @@ export class RestBase {
     
 
     protocol: string = "http";
-    hostname: string ="dionysus.di.uoa.gr"
+    hostname: string ="192.168.32.103"
     port: number = 8080;
     webappname: string = "dmp-backend";
     
diff --git a/dmp-frontend/src/app/services/server.service.ts b/dmp-frontend/src/app/services/server.service.ts
index d1aab087e..d3341d59a 100644
--- a/dmp-frontend/src/app/services/server.service.ts
+++ b/dmp-frontend/src/app/services/server.service.ts
@@ -47,11 +47,8 @@ export class ServerService {
     return this.restBase.get("dmp/listDMPLabelID");
   } 
 
-  public getDmp(dmpid : string, eager? : boolean){
-    if(eager && eager==true)
-      return this.restBase.get("dmps/"+dmpid, {"eager": true});
-    else
-      return this.restBase.get("dmps/"+dmpid, {"eager": false});
+  public getDmp(dmpid : string){
+      return this.restBase.get("datasetprofile/get/"+dmpid);
   }
 
   public getDmpHistory(dmpid: string){
@@ -160,6 +157,9 @@ export class ServerService {
   }
 
 
+  public updateDataset(id:string,properties:any){
+    return this.restBase.post("datasetprofile/save/"+id,properties);
+  }
 /*
   logOut() {
     this.tokenService.logout();
diff --git a/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.ts b/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.ts
index a33fb1c01..f56117c97 100644
--- a/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.ts
+++ b/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.ts
@@ -30,7 +30,7 @@ export class DmpDetailedComponent implements OnInit {
     let sub = this.route.queryParams.subscribe(params => {
 
       let dmpid = params.dmpid;
-      this.serverService.getDmp(dmpid, true).subscribe(
+      this.serverService.getDmp(dmpid).subscribe(
         response => {
           
           this.dmp = response;
diff --git a/dmp-frontend/src/app/visibility-rules/visibility-rules.service.ts b/dmp-frontend/src/app/visibility-rules/visibility-rules.service.ts
index 372a4617a..42318060d 100644
--- a/dmp-frontend/src/app/visibility-rules/visibility-rules.service.ts
+++ b/dmp-frontend/src/app/visibility-rules/visibility-rules.service.ts
@@ -9,20 +9,25 @@ export class VisibilityRulesService {
     public formGroup: FormGroup;
     public visibilityRuleContext: VisibilityRulesContext;
     public fieldsPathMemory: any = {};
-    
+
     public isElementVisible(pathKey: string, id: string) {
-        if (!this.fieldsPathMemory[id]) this.fieldsPathMemory[id] = pathKey;
+        if (!this.fieldsPathMemory[id] && pathKey) this.fieldsPathMemory[id] = pathKey;
         let visibilityRule = this.visibilityRuleContext.getRulesFromKey(id);
         if (!visibilityRule) return true;
-        return this.checkElementVisibility(visibilityRule);
+        if (this.checkElementVisibility(visibilityRule)) {
+            return true
+        } else {
+            if (pathKey) this.formGroup.get(pathKey + '.value').patchValue(null)
+            return false;
+        }
     }
 
     public checkElementVisibility(visibilityRule: VisibilityRule): boolean {
         let sourceVisibilityRules = visibilityRule.sourceVisibilityRules;
         for (let i = 0; i < sourceVisibilityRules.length; i++) {
             let sourceVisibilityRule = sourceVisibilityRules[i];
-            if (!this.formGroup.get( this.fieldsPathMemory[sourceVisibilityRule.sourceControlId] + '.value'))continue;
-            if(sourceVisibilityRule.sourceControlValue != ''+this.formGroup.get( this.fieldsPathMemory[sourceVisibilityRule.sourceControlId] + '.value').value) return false;
+            if (!this.formGroup.get(this.fieldsPathMemory[sourceVisibilityRule.sourceControlId] + '.value')) return false; //TODO
+            if (sourceVisibilityRule.sourceControlValue != '' + this.formGroup.get(this.fieldsPathMemory[sourceVisibilityRule.sourceControlId] + '.value').value) return false;
         }
         return true;
     }