diff --git a/dataframe/grails-app/controllers/com/elintegro/gerf/GridDataframeController.groovy b/dataframe/grails-app/controllers/com/elintegro/gerf/GridDataframeController.groovy
index 43406f72..e129ff08 100644
--- a/dataframe/grails-app/controllers/com/elintegro/gerf/GridDataframeController.groovy
+++ b/dataframe/grails-app/controllers/com/elintegro/gerf/GridDataframeController.groovy
@@ -71,6 +71,18 @@ class GridDataframeController {
         render jsonMap as JSON
     }
 
+    def saveGridData(){
+        def param = request.getJSON()
+        //Todo: here after getting selected row data we have to save those data in generic way by finding the correct domain class..
+        String className = param.tableName
+        def editableFieldInit = param.editableField
+        def editableField = editableFieldInit.toLowerCase()
+        Class clazz = grailsApplication.domainClasses.find { it.clazz.simpleName == className }.clazz
+        def clazzObject = clazz.findById(param.dataOfSelectedRow.Id)
+        clazzObject."${editableField}" = param.dataOfSelectedRow."${editableFieldInit}"
+        clazzObject.save(flush:true)
+        render(success:true)
 
+    }
 
 }
diff --git a/dataframe/grails-app/services/com/elintegro/erf/dataframe/ResultPageHtmlBuilder.groovy b/dataframe/grails-app/services/com/elintegro/erf/dataframe/ResultPageHtmlBuilder.groovy
index 9be326db..c672b882 100644
--- a/dataframe/grails-app/services/com/elintegro/erf/dataframe/ResultPageHtmlBuilder.groovy
+++ b/dataframe/grails-app/services/com/elintegro/erf/dataframe/ResultPageHtmlBuilder.groovy
@@ -16,26 +16,18 @@ package com.elintegro.erf.dataframe
 import com.elintegro.erf.dataframe.vue.DataframeVue
 import com.elintegro.erf.dataframe.vue.PageDFRegistryVue
 import com.elintegro.erf.dataframe.vue.VueJsBuilder
+import com.elintegro.erf.dataframe.vue.ViewRoutes
 import com.elintegro.erf.layout.abs.LayoutVue
 import com.elintegro.erf.widget.vue.WidgetVue
 import com.elintegro.utils.DataframeFileUtil
 import grails.plugin.springsecurity.SpringSecurityService
 import grails.util.Environment
 import groovy.util.logging.Slf4j
-import org.apache.tomcat.util.http.fileupload.FileUtils
-import org.jsoup.Jsoup
-import org.jsoup.nodes.Attributes
-import org.jsoup.nodes.Document
 import org.jsoup.nodes.Element
 import org.jsoup.select.Elements
 import org.springframework.beans.factory.annotation.Autowired
 import org.springframework.context.i18n.LocaleContextHolder
 
-import javax.persistence.MapsId
-import java.nio.file.Files
-import java.nio.file.Path
-import java.nio.file.Paths
-
 @Slf4j
 class ResultPageHtmlBuilder {
 
@@ -85,7 +77,7 @@ class ResultPageHtmlBuilder {
         finalScriptSb.append("})\n")
 
         finalScriptSb.append(dfrComps.vueGlobalCompScript) //append globbal dataframe components
-        finalScriptSb.append(globalLayoutCompScriptSb.toString()) // append global layout components
+        finalScriptSb.append(layoutStructM.globalComponentScript) // append global layout components
         finalScriptSb.append(dfrComps.dfrCompScript) // append other dfr components
         finalScriptSb.append(layoutStructM.layoutCompScript) // append other layout components
         //Initialize i18n
@@ -93,15 +85,19 @@ class ResultPageHtmlBuilder {
         finalScriptSb.append(""" const i18n = new VueI18n({
                                  locale:'${LocaleContextHolder.getLocale().getLanguage()}',
                                  messages
-                           });""")
+                           });\n""")
 //Initialize Router
         finalScriptSb.append("const router = new VueRouter({\n")// Initialize Router
 //        finalScriptSb.append("mode:'history',\n")
+/*
         finalScriptSb.append(" routes: [\n")
 //        finalScriptSb.append("{path: '/:routeId', components: {default: $defaultComp, $dfrComps.dfrCompRegisterationScript}},\n")
-//        finalScriptSb.append(vueRoutes.toString()) // from layouts
+        finalScriptSb.append(layoutStructM.vueRoutes) // from layouts
         finalScriptSb.append(dfrComps.vueRoutes) //from dfrs
         finalScriptSb.append("]\n")
+*/
+        finalScriptSb.append(" routes: \n")
+        finalScriptSb.append(ViewRoutes.constructRoute(gcMainPgObj.viewRoutes))
         finalScriptSb.append("})\n")
 //Initialize main app
         finalScriptSb.append("var app = new Vue ({\nel:'#app',\n") // Vue Instance
@@ -126,24 +122,28 @@ class ResultPageHtmlBuilder {
         finalScriptSb.append("</script>")
         return [initHtml:initHmtl, finalScript:finalScriptSb.toString()]
     }
-    public constructLayoutComps(String contLytStr){
 
-        LayoutVue contLytObj = LayoutVue.getLayoutVue(contLytStr.trim())
-        StringBuilder initHtml = new StringBuilder()
-        String finalLayoutScript = constructFinalLayoutScript(contLytObj, initHtml)
-        [initHtml: initHtml.toString(), layoutCompScript: finalLayoutScript]
+    private Map constructDfrComps(List dataframes){
+        DfrCompBuilder dfrCompBuilder = new DfrCompBuilder()
+        return dfrCompBuilder.constructDfrComps(dataframes)
+    }
+
+    public Map constructLayoutComps(String containerLayoutName){
+
+        LayoutVue constainerLayout = LayoutVue.getLayoutVue(containerLayoutName.trim())
+        return constainerLayout.constructLayoutComponents()
     }
 
     private static String constructCompRegistrationForMainLayout(PageDFRegistryVue gcMainPgObj){
         def containerLayoutS = gcMainPgObj.containerLayout
 
         LayoutVue contLytObj = LayoutVue.getLayoutVue(containerLayoutS)
-        if(!contLytObj.children){
+        if(!contLytObj.childLayouts){
             return ""
         }
         StringBuilder ltSb = new StringBuilder()
         int index = 0;
-        for(String ltS : contLytObj.children){
+        for(String ltS : contLytObj.childLayouts){
             LayoutVue lytT = LayoutVue.getLayoutVue(ltS)
             if(!registeredComponents.contains(ltS)){
                 ltSb.append(VueJsBuilder.createCompRegistrationString(ltS, index))
@@ -155,45 +155,6 @@ class ResultPageHtmlBuilder {
         return ltSb.toString()
     }
 
-    private String constructFinalLayoutScript(LayoutVue contLytObj, StringBuilder initHtml){
-        List children = contLytObj.children
-        String wrapperLayout = contLytObj.layoutPlaceHolder
-        StringBuilder resultPageScript = new StringBuilder()
-        if(children.isEmpty()){
-            return ""
-        }
-        for(String ch : children){
-            if(ch.trim() != "") {
-                LayoutVue layoutObj = LayoutVue.getLayoutVue(ch)
-                prepareVueLayout(layoutObj.children, resultPageScript, layoutObj)
-            }
-        }
-        initHtml.append(wrapperLayout)
-        return resultPageScript.toString()
-    }
-
-    private def prepareVueLayout(children, resultPageScript, disObj){
-        if(children.isEmpty()){
-            constructSectionalComponent(resultPageScript, disObj)
-            return
-        }
-        for(String ch : children){
-            if(builtComponents.contains(ch)){
-                continue
-            }
-            if(ch.trim() != ""){
-                LayoutVue layoutObj = LayoutVue.getLayoutVue(ch)
-                if(!registeredComponents.contains(ch) && !layoutObj.isGlobal) {
-                    disObj.compRegScript.append(VueJsBuilder.createCompRegistrationString(ch))
-                    registeredComponents.add(ch)
-                }
-                List childs = layoutObj.children
-                prepareVueLayout(childs, resultPageScript, layoutObj)
-            }
-        }
-        constructSectionalComponent(resultPageScript, disObj)
-    }
-
     private String getMainPgVueCompRegistrationString(PageDFRegistryVue gcMainPgObj){
         def mainPageDataframeList= gcMainPgObj.dataframesToShowInMainPage
         if(!mainPageDataframeList){
@@ -213,49 +174,6 @@ class ResultPageHtmlBuilder {
         return sb.toString()
     }
 
-    private void constructSectionalComponent(StringBuilder resultPageScript, LayoutVue disObj){
-        StringBuilder compBuilder = new StringBuilder()
-        String layoutPlaceHolder = disObj.layoutPlaceHolder
-        String layoutName = disObj.layoutBeanName
-        String formatPlaceholder = "["+layoutName + "]"
-        if(disObj.isGlobal){
-            compBuilder.append("Vue.component('${layoutName}',{\n")
-            compBuilder.append("name: '${layoutName}',\n")
-            disObj.componentRegistered = true
-        }else{
-            disObj.componentRegistered = false
-            compBuilder.append("const ${layoutName}Comp = {\n")
-        }
-        compBuilder.append("template:`")
-        compBuilder.append(layoutPlaceHolder)
-        compBuilder.append("`,\n")
-        compBuilder.append("components:{\n") //register embedded components
-        compBuilder.append(disObj.compRegScript.toString())
-        disObj.compRegScript.setLength(0) //Resetting compRegScript for another layout obj
-        if(!disObj.childDataframes.isEmpty()){
-            for(String compS : disObj.childDataframes){
-                if(!registeredComponents.contains(compS)){
-                    compBuilder.append(VueJsBuilder.createCompRegistrationString(compS))
-                    registeredComponents.add(compS)
-                }
-            }
-        }
-        compBuilder.append("},\n")
-        if(disObj.isGlobal){
-            compBuilder.append("})\n")
-            globalLayoutCompScriptSb.append(compBuilder.toString())
-        }else{
-            compBuilder.append("}\n")
-            resultPageScript.append(compBuilder.toString())
-        }
-        builtComponents.add(layoutName) // Add the built components to this List. Remove later if not used.
-    }
-
-    private Map constructDfrComps(dataframes){
-        DfrCompBuilder dfrCompBuilder = new DfrCompBuilder()
-        return dfrCompBuilder.constructDfrComps(dataframes)
-    }
-
 
     public String applySecurityFilter(String resultPage /*, SpringSecurityService springSecurityService*/){
 
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/dataframe/DFButton.java b/dataframe/src/main/groovy/com/elintegro/erf/dataframe/DFButton.java
index 0a94a94c..7ceb7ee5 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/dataframe/DFButton.java
+++ b/dataframe/src/main/groovy/com/elintegro/erf/dataframe/DFButton.java
@@ -36,13 +36,16 @@ public class DFButton {
 	public String doBeforeSave; // Script just before Ajax save
 	public String doAfterSave=""; // Script just after Ajax save
 	public boolean showAsDialog = false; //Show the refDataframe as Dialog??
+	public boolean showToolbar = false;
 	public boolean route = false; // Show as Route??
+	public Map routeMap;
 	public Map tooltip;
 	public String attr; //add extra attribbubtes from descripter
 	public  String layout=""; // layout for buttons
 	public String doBeforeAjax; // Script just bbefore ajax call
-	public String routeIdScript; //Id for the dataframe when route is true
-	public List flexGridValues; //grid values for v-flex
+	public String routeName; //route name to appear in the url
+	public String doAfterRoute; //If we have to do something after routing the page
+	public Map cssGridValues; //grid values for v-col
 	public Map showAsMenu;
 	public String attachTo; //Attch the menu to another field
 	public String roles; //"ROLE_ADMIN,ROLE_CUSTOMER"
@@ -50,5 +53,7 @@ public class DFButton {
 	public String classNames;
 	public boolean scrollable;
 	public boolean persistent;
+	public String dialogBoxWidth;
+	public String dialogBoxMaxWidth;
 
 }
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/dataframe/Dataframe.groovy b/dataframe/src/main/groovy/com/elintegro/erf/dataframe/Dataframe.groovy
index 958573a5..e2b2a005 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/dataframe/Dataframe.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/dataframe/Dataframe.groovy
@@ -148,6 +148,7 @@ public class Dataframe extends DataframeSuperBean implements Serializable, DataF
 	def ajaxInsertUrl = "dataframe/ajaxInsert";
 	def ajaxDefaultUrl = "dataframe/ajaxDefaultData";
 	def ajaxCreateUrl ="dataframe/ajaxCreateNew"
+	def ajaxFileSaveUrl = "fileUpload/ajaxFileSave"
 
 	public static Dataframe getDataframeByName(String dataframeName){
 		return (Dataframe) Holders.grailsApplication.mainContext.getBean(dataframeName)
@@ -481,7 +482,7 @@ public class Dataframe extends DataframeSuperBean implements Serializable, DataF
 			addField(key, value)
 		}
 		//Todo: We need to refactor it soon...
-//		addField("alertMesssage", [widget: "SnackbarWidgetVue",flexGridValues: ['xs0', 'sm0', 'md0', 'lg0', 'xl0'],])
+//		addField("alertMesssage", [widget: "SnackbarWidgetVue",cssGridValues: ['xs0', 'sm0', 'md0', 'lg0', 'xl0'],])
 	}
 
 	List getHqlResult(def queryHql){
@@ -725,7 +726,7 @@ public class Dataframe extends DataframeSuperBean implements Serializable, DataF
 		this.currentFrameLayout.numberFields = fields.getList().size()
 		getAdditionalDataFromAjax(additionalParameters)
 		String additionalParametersStr = additionalParameters.toString()
-		doAfterSaveStringBuilder.append(doAfterSave)
+		//doAfterSaveStringBuilder.append(doAfterSave)
 		def ajaxSavescripts = """
 			<script>
 			/**
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/dataframe/DataframeInstance.groovy b/dataframe/src/main/groovy/com/elintegro/erf/dataframe/DataframeInstance.groovy
index a8d172cc..e76396d4 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/dataframe/DataframeInstance.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/dataframe/DataframeInstance.groovy
@@ -334,7 +334,7 @@ class DataframeInstance implements DataframeConstants{
 				String refFieldName =  namedParam[1];
 				String keyNamedParam = DataframeVue.buildFullFieldNameKeyParamWithDot(df, refDomainAlias, refFieldName, key);
 //				jsonMapDf.put(keyNamedParam, value)
-				jsonMapDf.put("$refDomainAlias",["$refFieldName": value, "$key":value]) //todo check if this works for all cases
+				jsonMapDf.put(refDomainAlias,[(refFieldName): value, (key):value]) //todo check if this works for all cases
 
 				jData?."${DOMAIN_KEYS}".putAll(jsonMapDf)
 			}
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/dataframe/vue/DataframeViewJqxVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/dataframe/vue/DataframeViewJqxVue.groovy
index 83347394..b9d9384e 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/dataframe/vue/DataframeViewJqxVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/dataframe/vue/DataframeViewJqxVue.groovy
@@ -72,20 +72,21 @@ public class DataframeViewJqxVue implements DataframeView {
         } else {
             if(refDataframe){
                 String refDfrName = refDataframe.dataframeName
-                if(dfButton.route){
-                    String routeIdScript = dfButton.routeIdScript
+                if(dfButton.route || dfButton.routeMap){
+                    String routeName = dfButton.routeName?:(dfButton.name?:refDfrName)
+                    String doAfterRoute = dfButton.doAfterRoute?:""
+                    String path = (dfButton.routeMap && dfButton.routeMap.path)?dfButton.routeMap.path:routeName
                     ResultPageHtmlBuilder.registeredComponents.add(refDataframe.dataframeName)
                     script.append("""${dataframeName}_${dfButton.name}: function(_param){\n 
                          $doBeforeAjax
-                         var routeId = ${routeIdScript?:0}
                          this.\$router.push({
                          name: '$refDfrName',
-                         path: '$refDfrName',
+                         path: '/$path',
                          params: {
-                           $refDfrName: "test",
-                           routeId: routeId
+                           $refDfrName: "test"
                          }
-                       })
+                       });
+                       $doAfterRoute
                        },\n""")
                 }else {
                     script.append("""${dataframeName}_${dfButton.name}: function(){\n 
@@ -124,10 +125,25 @@ public class DataframeViewJqxVue implements DataframeView {
         if(dfButton.showAsDialog){
             String scrollable = dfButton.scrollable?"scrollable":""
             String persistent = dfButton.persistent?"persistent":""
-            resultPageHtml.append("""<v-dialog v-model="visibility.${refDataframeName}" $scrollable $persistent width='initial' :retain-focus="false" max-width='500px'>""")
+            String dialogBoxWidth = dfButton.dialogBoxWidth?:"initial"
+            String dialogBoxMaxWidth = dfButton.dialogBoxMaxWidth?:"500px"
+            resultPageHtml.append("""<v-dialog v-model="visibility.${refDataframeName}" $scrollable $persistent width = '$dialogBoxWidth' :retain-focus="false" max-width = '$dialogBoxMaxWidth'>""")
+            resultPageHtml.append("""<v-card>""")
+            if(dfButton.showToolbar) {
+                resultPageHtml.append(""" 
+                        <v-toolbar dark color="blue darken-2" class="mb-5">
+                            <v-toolbar-title>[DATAFRAME_LABEL]</v-toolbar-title>
+                            <v-spacer></v-spacer>
+                            <v-tooltip bottom>
+                                <v-btn icon target="_blank" slot="activator" @click.prevent="closeDataframe">
+                                    <v-icon medium >close</v-icon>
+                                </v-btn><span>Close</span>
+                                </v-tooltip>
+                    </v-toolbar>""")
+            }
             resultPageHtml.append(refDataframe.getComponentName("resetForm=true"))
 //            resultPageHtml.append("""<component :is='${refDataframeName.toLowerCase()}' ref='${refDataframeName.toLowerCase()}_ref' :${refDataframeName}_prop="${refDataframeName}_data" :key='randomKey'></component>""")
-            resultPageHtml.append("""</v-dialog>\n""")
+            resultPageHtml.append("""</v-card></v-dialog>\n""")
         } else if(dfButton.showAsMenu && dfButton.showAsMenu.attr){
             String attr = dfButton.showAsMenu.attr?:"left"
             String attachTo = dfButton.showAsMenu.attachTo?:"$dataframeName-id"
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/dataframe/vue/DataframeVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/dataframe/vue/DataframeVue.groovy
index 9be25f4f..fe089ba2 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/dataframe/vue/DataframeVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/dataframe/vue/DataframeVue.groovy
@@ -50,7 +50,7 @@ public class DataframeVue extends Dataframe implements Serializable, DataFrameIn
 	DataframeVue parent
 
 	private String currentLanguage = ""
-	List flexGridValues = []
+	Map cssGridValues = [:]
 	String currentRoute
 
 
@@ -72,12 +72,12 @@ public class DataframeVue extends Dataframe implements Serializable, DataFrameIn
 	StringBuilder stateStringBuilder = new StringBuilder()// Remove after enchancing vueStore implementation
 	Map onClick = new HashMap() //For onCLick on the surface of dataframe
 	String doBeforeRefresh = ""
-	List flexGridValuesForSaveButton = []
+	Map cssGridValuesForSaveButton = [:]
 	String layoutForSaveButton = ""
-	List flexGridValuesForInsertButton = []
-	List flexGridValuesForResetButton = []
-	List flexGridValuesForCancelButton = []
-	List flexGridValuesForDeleteButton = []
+	Map cssGridValuesForInsertButton = [:]
+	Map cssGridValuesForResetButton = [:]
+	Map cssGridValuesForCancelButton = [:]
+	Map cssGridValuesForDeleteButton = [:]
 	String layoutForInsertButton = ""
 	String layoutForResetButton = ""
 	String layoutForCancelButton = ""
@@ -111,7 +111,7 @@ public class DataframeVue extends Dataframe implements Serializable, DataFrameIn
 		this.dataframeNameLowercase = dataframeName?dataframeName.toLowerCase():""
 		this.dataframeView.dataframeName = dataframeName
 
-		flexGridValues = flexGridValues?:LayoutVue.defaultGridValues
+		cssGridValues = cssGridValues?:LayoutVue.defaultCssGridValues
 
 		String defaultRoute
 		defaultRoute = (dataframeName.replaceAll("vue","").replaceAll("Dataframe","").split(/(?=[A-Z])/).join("-")).toLowerCase();
@@ -246,14 +246,15 @@ public class DataframeVue extends Dataframe implements Serializable, DataFrameIn
 	protected String prepare(String fieldLayout, Layout frameLayout){
 		init();
 		currentFldLayout = fieldLayout
+		doAfterSaveStringBuilder = new StringBuilder()
 		if(frameLayout != null){
 			currentFrameLayout = frameLayout
 		}
 		StringBuilder fieldsHtmlBuilder = new StringBuilder()
 		this.currentFrameLayout.numberFields = fields.getList().size()
 		this.currentFrameLayout.setDataframeName(dataframeName)
-		List flexGridValuesFromDescriptor = flexGridValues?: LayoutVue.defaultGridValues
-		String gridValueInString = LayoutVue.convertListToString(flexGridValuesFromDescriptor)
+		Map gridValuesFromDescriptor = cssGridValues?: LayoutVue.defaultCssGridValues
+		String gridValueInString = LayoutVue.convertListToString(gridValuesFromDescriptor)
 
 		StringBuilder vueDataVariable = new StringBuilder()
 		StringBuilder vueStateVariable = new StringBuilder()
@@ -287,7 +288,7 @@ public class DataframeVue extends Dataframe implements Serializable, DataFrameIn
 		keyFieldNames.each {
 			vueStateVariable.append("${convertToDataVariableFromat(it)}"+":\"\",\n")
 			vueSaveVariables.append("params[\"$it\""+"] = this.${convertToDataVariableFromat(it)};\n")
-			vueFileSaveVariables.append("params[\"$it\""+"] = response.namedParameters.id.value;\n")
+			vueFileSaveVariables.append("if(response && response.namedParameters) params[\"$it\""+"] = response.namedParameters.id.value;\n")
 			vueDataFillScript.append("this.${convertToDataVariableFromat(it)} = response['${convertToReturnedDataVariableFromat(it)}']?response['${convertToReturnedDataVariableFromat(it)}']:\"\"\n")
 		}
 		StringBuilder buttonHtmlStringBuilder = new StringBuilder()
@@ -319,6 +320,8 @@ public class DataframeVue extends Dataframe implements Serializable, DataFrameIn
                              handler: function(val, oldVal){
                                   if(val && val.refreshInitialData){
                                      this.${dataframeName}_fillInitData();
+                                  } else {
+                                      console.log("${dataframeName}_prop has refreshInitialData as false or undefined. Could not refresh.");
                                   }
                              }
                      },\n""")
@@ -350,11 +353,9 @@ public class DataframeVue extends Dataframe implements Serializable, DataFrameIn
 		def lhcLocale = LocaleContextHolder.getLocale()
 		String btnDivId = "";
 		String btnWidget = "";
-		List flexGridValues = field.flexGridValues ?:flexGridValues?: LayoutVue.defaultGridValues
-		//Was in EWEB-68-refactoring; TODO check which line is correct!
-		//List flexGridValues = field.flexGridValues ?: LayoutVue.defaultGridValues
+		Map cssGridValues = field.cssGridValues ?:cssGridValues?: LayoutVue.defaultCssGridValues
 
-		String gridValueString = LayoutVue.convertListToString(flexGridValues)
+		String gridValueString = LayoutVue.convertListToString(cssGridValues)
 		def label = field.fldNmAlias ?: messageSource.getMessage(field.labelCode, null, fldNameDefault, LocaleContextHolder.getLocale())
 		if (field?.labelDisabled) {
 			label = ""
@@ -426,7 +427,7 @@ public class DataframeVue extends Dataframe implements Serializable, DataFrameIn
 			if(saveButton){
 				String saveButtonAttr = saveButtonAttr?:""
 				String saveButtonAlignment = saveButtonAlignment?:"right"
-				List gridvaluesSave = flexGridValuesForSaveButton?:LayoutVue.defaultButtonGridValues
+				Map gridvaluesSave = cssGridValuesForSaveButton?:LayoutVue.defaultButtonCssGridValues
 				String saveGridValueString = LayoutVue.convertListToString(gridvaluesSave)
 				String saveButtonLabel = messageSource.getMessage("${dataframeName}.button.save", null, messageSource.getMessage("button.save", null, "Save", LocaleContextHolder.getLocale()), LocaleContextHolder.getLocale())
 				String btnScript = applyLayoutForButton("<v-btn type='button' class='text-capitalize $saveButtonAlignment' id='$dataframeName-save' @click='${dataframeName}_save' $saveButtonAttr :loading='${dataframeName}_save_loading' >${saveButtonLabel}</v-btn>\n", layoutForSaveButton, saveGridValueString)     // TODO  i18n
@@ -437,7 +438,7 @@ public class DataframeVue extends Dataframe implements Serializable, DataFrameIn
 		if(ajaxInsertUrl){
 			if(insertButton){
 				String insertButtonAttr = insertButtonAttr?:""
-				List gridvaluesInsert = flexGridValuesForInsertButton?:LayoutVue.defaultButtonGridValues
+				Map gridvaluesInsert = cssGridValuesForInsertButton?:LayoutVue.defaultButtonCssGridValues
 				String insertGridValueString = LayoutVue.convertListToString(gridvaluesInsert)
 
 				String insertButtonAlignment = insertButtonAlignment?:"left"
@@ -449,7 +450,7 @@ public class DataframeVue extends Dataframe implements Serializable, DataFrameIn
 		}
 		if(resetButton){
 			String resetButtonAttr = resetButtonAttr?:""
-			List gridvaluesReset = flexGridValuesForResetButton?:LayoutVue.defaultButtonGridValues
+			Map gridvaluesReset = cssGridValuesForResetButton?:LayoutVue.defaultButtonCssGridValues
 			String resetGridValueString = LayoutVue.convertListToString(gridvaluesReset)
 
 			String resetButtonAlignment = resetButtonAlignment?:"left"
@@ -460,7 +461,7 @@ public class DataframeVue extends Dataframe implements Serializable, DataFrameIn
 		}
 		if(cancelButton){
 			String cancelButtonAttr = cancelButtonAttr?:" left"
-			List gridvaluesCancel = flexGridValuesForCancelButton?:LayoutVue.defaultButtonGridValues
+			Map gridvaluesCancel = cssGridValuesForCancelButton?:LayoutVue.defaultButtonCssGridValues
 			String cancelGridValueString = LayoutVue.convertListToString(gridvaluesCancel)
 			String cancelButtonLabel = messageSource.getMessage("${dataframeName}.button.cancel", null, messageSource.getMessage("button.cancel", null, "Cancel", LocaleContextHolder.getLocale()), LocaleContextHolder.getLocale())
 			String btnScript = applyLayoutForButton("<v-btn type='button' class='text-capitalize' id='$dataframeName-cancel' @click='${dataframeName}_cancel' $cancelButtonAttr>${cancelButtonLabel}</v-btn>\n", layoutForCancelButton, cancelGridValueString)     // TODO  i18n
@@ -470,7 +471,7 @@ public class DataframeVue extends Dataframe implements Serializable, DataFrameIn
 		if(ajaxDeleteUrl){
 			if(deleteButton){
 				String deleteButtonAttr = deleteButtonAttr?:" left"
-				List gridValuesDelete = flexGridValuesForDeleteButton?:LayoutVue.defaultButtonGridValues
+				Map gridValuesDelete = cssGridValuesForDeleteButton?:LayoutVue.defaultButtonCssGridValues
 				String deleteGridValueString = LayoutVue.convertListToString(gridValuesDelete)
 				String deleteButtonLabel = messageSource.getMessage("${dataframeName}.button.delete", null, messageSource.getMessage("button.delete", null, "Delete", LocaleContextHolder.getLocale()), LocaleContextHolder.getLocale())
 				String btnScript = applyLayoutForButton("<v-btn type='button' class='text-capitalize' id='$dataframeName-delete' @click='${dataframeName}_delete' $deleteButtonAttr>${deleteButtonLabel}</v-btn>\n", layoutForDeleteButton, deleteGridValueString)     // TODO  i18n
@@ -553,12 +554,15 @@ public class DataframeVue extends Dataframe implements Serializable, DataFrameIn
 			vueJsBuilder.addToMethodScript(vueJsEntity.methods)
 		}
 
-		if(route){
-			vueRoutes = "{ path: '/$currentRoute/:routeId',name:'${dataframeName}' , component: ${dataframeName}Comp },\n"
+/*
+		if(routeMap){
+			vueRoutes = ViewRoutes.constructRoute(routeMap, dataframeName)
+//			vueRoutes = "{ path: '/$currentRoute/:routeId',name:'${dataframeName}' , component: ${dataframeName}Comp },\n"
 			componentRegistered = true
 			isGlobal = false
 			ResultPageHtmlBuilder.registeredComponents.add(dataframeName)
 		}
+*/
 
 		createVueStore(vueJsBuilder) //create vueStore
 		VueStore vueStore1 = vueJsBuilder.getVueStore()
@@ -649,7 +653,7 @@ public class DataframeVue extends Dataframe implements Serializable, DataFrameIn
                  params["url"] =  '$df.ajaxSaveUrl';
                  params["showAlertMessage"] = ${requiresConfirmationMessage}
                  params["doBeforeSave"] = function(params){params['callApi'] = true;\n${doBeforeSave} }
-                 params["doAfterSave"] = function(response){ 
+                 params["doAfterSave"] = function(response = {}, errors = []){ 
 								 ${doAfterSave} 
                                  ${doAfterSaveStringBuilder}
 							     if(response.domain_keys){
@@ -797,7 +801,20 @@ public class DataframeVue extends Dataframe implements Serializable, DataFrameIn
 		String classNames = btn.classNames?:""
 		String height = ""
 		String width = ""
-		List flexGridValues = btn.flexGridValues?:LayoutVue.defaultButtonGridValues
+		String loader = """ <template v-slot:placeholder>
+                            	<v-row
+                                	class="fill-height ma-0"
+                                    align="center"
+                                    justify="center"
+                                >
+                                <v-progress-circular
+                                	indeterminate
+                                    color="#ffc526"
+                                ></v-progress-circular>
+                                </v-row>
+                          	</template>
+                         """
+		Map cssGridValues = btn.cssGridValues?:LayoutVue.defaultButtonCssGridValues
 
 		if(btn.image){
 			height = btn.image?.height?:50
@@ -808,7 +825,7 @@ public class DataframeVue extends Dataframe implements Serializable, DataFrameIn
 		if ("link".equals(btn.type)) {
 			btnString=" <v-btn href='${btn.url}' class='text-capitalize $classNames' text id='$dataframeName-${btn.name}' @click.prevent='${dataframeName}_${btn.name}' $attr>${buttonLabel}</v-btn>\n"
 		}else if("image".equals(btn.type)){
-			btnString=" <input type='image' src='$imgUrl' id='$dataframeName-${btn.name}' alt='${buttonLabel}' @click.prevent='${dataframeName}_${btn.name}' $attr height='$height' width='$width' />\n"
+			btnString=" <v-img type='image' src='$imgUrl' id='$dataframeName-${btn.name}' alt='${buttonLabel}' @click.prevent='${dataframeName}_${btn.name}' $attr height='$height' width='$width' >${loader}</v-img>\n"
 		}else{
 			if(btn.image && btn.image.showIcon){
 				btnString=""" <v-btn ${WidgetVue.toolTip(btn)} class='text-capitalize $classNames' type='button' id='$dataframeName-${btn.name}' @click.prevent='${dataframeName}_${btn.name}' $attr><img height="${btn.image.height ?: 20}" width="${btn.image.width ?: 25}" src="$imgUrl"/></v-btn>\n"""
@@ -817,14 +834,14 @@ public class DataframeVue extends Dataframe implements Serializable, DataFrameIn
 			}
 		}
 
-		String gridValueString = LayoutVue.convertListToString(flexGridValues)
+		String gridValueString = LayoutVue.convertListToString(cssGridValues)
 		String btnStringWithLayout = applyLayoutForButton(btnString.toString(), layout, gridValueString)
 		String btnStringWithLayoutAndSpringSecurity = WidgetVue.wrapWithSpringSecurityVue( btn, btnStringWithLayout)
 		return btnStringWithLayoutAndSpringSecurity
 	}
 
 	private String applyLayoutForButton(String btnString, String LayoutString, String gridValueString){
-		btnString = "<v-flex $gridValueString>"+btnString+"</v-flex>"
+		btnString = "<v-col cols='0' $gridValueString>"+btnString+"</v-col>"
 		if(LayoutString.contains("[BUTTON_SCRIPT]")){
 			btnString = LayoutString.replace("[BUTTON_SCRIPT]", btnString)
 		}
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/dataframe/vue/PageDFRegistryVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/dataframe/vue/PageDFRegistryVue.groovy
index 95204db3..6b62bf05 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/dataframe/vue/PageDFRegistryVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/dataframe/vue/PageDFRegistryVue.groovy
@@ -20,5 +20,5 @@ class PageDFRegistryVue {
     List<String> allDataframesList
     String containerLayout = ""
     String defaultInitDataframeComp = ""
-
+    ViewRoutes viewRoutes = null
 }
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/dataframe/vue/ViewRoutes.groovy b/dataframe/src/main/groovy/com/elintegro/erf/dataframe/vue/ViewRoutes.groovy
new file mode 100644
index 00000000..d00f92db
--- /dev/null
+++ b/dataframe/src/main/groovy/com/elintegro/erf/dataframe/vue/ViewRoutes.groovy
@@ -0,0 +1,41 @@
+package com.elintegro.erf.dataframe.vue
+
+import com.elintegro.utils.MapUtil
+
+class ViewRoutes {
+    String routes = ""
+
+    public static String constructRoute(ViewRoutes vueRoutes){
+       String routes = vueRoutes.routes
+//        String toJsonString = MapUtil.convertMapToJSONString(routes)
+        return routes
+    }
+    public static constructRoute(Map route, String componentName){
+        String childRoutes = constructChildrenRoutes(route, componentName)
+        return  """{ path: '/$route.name',name:'${componentName}' , component: ${componentName}Comp,
+                                  children:[$childRoutes]
+                           },\n"""
+    }
+
+    private static String getRouteRegistrationString(Map route){
+        String componentName = route.component
+        return  """ path: '/$route.name',name:'${componentName}' , component: ${componentName}Comp """
+    }
+
+    private static String constructChildrenRoutes(Map route, String componentName){
+        if(!route.childRoutes){
+            return ""
+        }
+        StringBuilder sb = new StringBuilder()
+        List children = route.childRoutes
+        for(Object child: children){
+            if(!(child instanceof Map)){
+                throw new RuntimeException("while defining route, children should be an array of Map with name and layout or dataframe")
+            }
+            sb.append("{")
+            sb.append(getRouteRegistrationString(child))
+            sb.append("},")
+        }
+        return sb.toString()
+    }
+}
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/dataframe/vue/VueStore.groovy b/dataframe/src/main/groovy/com/elintegro/erf/dataframe/vue/VueStore.groovy
index 5bf3a52d..7c245f90 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/dataframe/vue/VueStore.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/dataframe/vue/VueStore.groovy
@@ -183,7 +183,7 @@ class VueStore {
        params["doBeforeSave"](params); 
        if(!params.callApi) return;
        excon.callApi(params.url, "POST", params).then((response) =>{
-          params["doAfterSave"](response.data.data); 
+          params["doAfterSave"](response.data.data, response.data.errors); 
           if(params.showAlertMessage == true){
              excon.showAlertMessage(response.data);
           }
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/layout/abs/LayoutVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/layout/abs/LayoutVue.groovy
index 64528435..07151f62 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/layout/abs/LayoutVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/layout/abs/LayoutVue.groovy
@@ -13,8 +13,10 @@ These actions are prohibited by law if you do not accept this License. Therefore
 
 package com.elintegro.erf.layout.abs
 
-
+import com.elintegro.erf.dataframe.ResultPageHtmlBuilder
 import com.elintegro.erf.dataframe.vue.DataframeVue
+import com.elintegro.erf.dataframe.vue.VueJsBuilder
+import com.elintegro.erf.dataframe.vue.ViewRoutes
 import com.elintegro.erf.widget.Widget
 import com.elintegro.erf.widget.vue.WidgetVue
 import grails.util.Holders
@@ -35,7 +37,6 @@ class LayoutVue extends Layout {
     boolean layoutAddedToResultPage = false
 
     DataframeVue df
-
     LayoutVue parentLayout
     String layoutPlaceHolder = ""
 
@@ -48,11 +49,11 @@ class LayoutVue extends Layout {
     static def grailsApplication
 
     static final String DEFAULT_FIELD_LAYOUT="""
-						<v-flex <%print gridValueString%> <%print flexAttr%> ><% print widget %></v-flex>
-	"""
+						<v-col cols='0' <%print gridValueString%> <%print flexAttr%> ><% print widget %></v-col>
+	                     """
 //    <div id='<% print divId %>'>
     static final String DEFAULT_DATAFRAME_LAYOUT = """
-            <v-flex xs12 sm6 md4 lg4 xl4>[DATAFRAME_FIELD]</v-flex>"""
+            <v-col cols='12' xs='12' sm='6' md='4' lg='4' xl='4'>[DATAFRAME_FIELD]</v-col>"""
     static final String ALL_OTHER_FIELDS = "[ALL_OTHER_FIELDS]";
     static final String ALL_OTHER_FIELDS_REGEXP = "\\[ALL_OTHER_FIELDS\\]";
 
@@ -60,14 +61,16 @@ class LayoutVue extends Layout {
 
     //For Vue
     StringBuilder compRegScript = new StringBuilder()
-    List children = [] // Add all the children's layout names
+    List childLayouts = [] // Add all the children's layout names
     List childDataframes = [] //Add all the components to register under this layouts component
     boolean isGlobal = false // Whether or not to register component globally
-    static List defaultGridValues = Holders.grailsApplication.config.vue.flexGridValues.Default?:['xs12', 'sm12', 'md4', 'lg4', 'xl4']
-    static List defaultButtonGridValues = ['xs12', 'sm12', 'md4', 'lg4', 'xl4']
-    List flexGridValues = defaultGridValues
+    static Map defaultCssGridValues = Holders.grailsApplication.config.vue.cssGridValues.Default?:[xs:'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
+    static Map defaultButtonCssGridValues = ['xs':'12', 'sm':'12', 'md':'4', 'lg':'4', 'xl':'4']
+    Map cssGridValues = defaultCssGridValues
     boolean componentRegistered = false //Set once the component is registered
 
+    boolean route = false
+    String currentRoute = ""
     String dataframeName = "dataframe"
     boolean wrapInForm = true
     String wrapperLayoutForFieldsInGroupOpenTag = ""
@@ -78,6 +81,104 @@ class LayoutVue extends Layout {
     protected String dataframeLayout = layoutPlaceHolder
     private openingTagAttached = false
     int fieldCount = 0
+    static Set<String> builtComponents = new HashSet()
+
+    LayoutVue (){
+        String defaultRoute = (layoutBeanName.replaceAll("vue","").replaceAll("Dataframe","").replaceAll("Layout", "").split(/(?=[A-Z])/).join("-")).toLowerCase();
+        currentRoute = currentRoute?:defaultRoute
+    }
+
+    public Map constructLayoutComponents(){
+
+        StringBuilder initHtml = new StringBuilder()
+        StringBuilder globalComponentScript = new StringBuilder()
+        StringBuilder vueRoutes = new StringBuilder()
+        String finalLayoutScript = constructFinalLayoutScript(initHtml, globalComponentScript, vueRoutes)
+        [initHtml: initHtml.toString(), layoutCompScript: finalLayoutScript, globalComponentScript:globalComponentScript.toString(), vueRoutes:vueRoutes.toString()]
+    }
+
+    private String constructFinalLayoutScript(StringBuilder initHtml, StringBuilder globalComponentScript, StringBuilder vueRoutes){
+        String wrapperLayout = layoutPlaceHolder
+        StringBuilder resultPageScript = new StringBuilder()
+        if(childLayouts.isEmpty()){
+            return ""
+        }
+        for(String ch : childLayouts){
+            if(ch.trim() != "") {
+                LayoutVue layoutObj = getLayoutVue(ch)
+                layoutObj.prepareVueLayout(resultPageScript, globalComponentScript, vueRoutes)
+            }
+        }
+        initHtml.append(wrapperLayout)
+        builtComponents = new HashSet<>()
+        return resultPageScript.toString()
+    }
+
+    public def prepareVueLayout( StringBuilder resultPageScript, StringBuilder globalComponentScript, StringBuilder vueRoutes){
+        if(childLayouts.isEmpty()){
+            constructComponentScript(resultPageScript, globalComponentScript, vueRoutes)
+            return
+        }
+        for(String ch : childLayouts){
+            if(builtComponents.contains(ch)){
+                continue
+            }
+            if(ch.trim() != ""){
+                if(!ResultPageHtmlBuilder.registeredComponents.contains(ch) && !isGlobal) {
+                    compRegScript.append(VueJsBuilder.createCompRegistrationString(ch))
+                    ResultPageHtmlBuilder.registeredComponents.add(ch)
+                }
+                LayoutVue layoutObj = getLayoutVue(ch)
+                layoutObj.prepareVueLayout(resultPageScript, globalComponentScript, vueRoutes)
+            }
+        }
+        constructComponentScript(resultPageScript, globalComponentScript, vueRoutes)
+    }
+
+    private void constructComponentScript(StringBuilder resultPageScript, StringBuilder globalComponentScript, StringBuilder vueRoutes){
+        StringBuilder compBuilder = new StringBuilder()
+//        String layoutPlaceHolder = disObj.layoutPlaceHolder
+        String layoutName = layoutBeanName
+        String formatPlaceholder = "["+layoutName + "]"
+/*
+        if(routeMap){
+            vueRoutes.append(ViewRoutes.constructRoute(routeMap, layoutName))
+            componentRegistered = true
+            isGlobal = false
+        }
+*/
+        if(isGlobal){
+            compBuilder.append("Vue.component('${layoutName}',{\n")
+            compBuilder.append("name: '${layoutName}',\n")
+            componentRegistered = true
+        }else{
+            componentRegistered = false
+            compBuilder.append("const ${layoutName}Comp = {\n")
+        }
+        compBuilder.append("template:`")
+        compBuilder.append(layoutPlaceHolder)
+        compBuilder.append("`,\n")
+        compBuilder.append("components:{\n") //register embedded components
+        compBuilder.append(compRegScript.toString())
+        compRegScript.setLength(0) //Resetting compRegScript for another layout obj
+        if(!childDataframes.isEmpty()){
+            for(String compS : childDataframes){
+                if(!ResultPageHtmlBuilder.registeredComponents.contains(compS)){
+                    compBuilder.append(VueJsBuilder.createCompRegistrationString(compS))
+                    ResultPageHtmlBuilder.registeredComponents.add(compS)
+                }
+            }
+        }
+        compBuilder.append("},\n")
+        if(isGlobal){
+            compBuilder.append("})\n")
+            globalComponentScript.append(compBuilder.toString())
+        }else{
+            compBuilder.append("}\n")
+            resultPageScript.append(compBuilder.toString())
+        }
+        builtComponents.add(layoutName) // Add the built components to this List. Remove later if not used.
+    }
 
     void applyLayoutForField(StringBuilder resultPagehtml, StringBuilder fieldsHtmlBuilder, String widgetForm, String fieldName, String fldNameAlias, String childDataframe) throws LayoutException{
         String eitherFieldNamePlaceHolder = "[$fieldName]"
@@ -125,9 +226,9 @@ class LayoutVue extends Layout {
         String fieldLayout = ""
         if(!wrapperLayoutForFieldsInGroupOpenTag.trim() || !wrapperLayoutForFieldsInGroupOpenTag.contains(dataframeName+'-form')){
             if(wrapInForm){
-                wrapperLayoutForFieldsInGroupOpenTag = "<v-flex xs12 sm12 md12 lg12 xl12><v-form  ref='${dataframeName}_form'><v-container grid-list-xl fluid><v-layout wrap>\n"    // TODO change all other instances of formId
+                wrapperLayoutForFieldsInGroupOpenTag = "<v-col xs='12' sm='12' md='12' lg='12' xl='12'><v-form  ref='${dataframeName}_form'><v-row wrap>\n"    // TODO change all other instances of formId
             }else{
-                wrapperLayoutForFieldsInGroupOpenTag = "<div ref='${dataframeName}_form'><v-container grid-list-xl fluid><v-layout wrap>\n"
+                wrapperLayoutForFieldsInGroupOpenTag = "<div ref='${dataframeName}_form'><v-row wrap>\n"
             }
         }
 
@@ -137,9 +238,9 @@ class LayoutVue extends Layout {
     private String getWrapperLayoutForFieldsInGroupCloseTag(){
         if(!wrapperLayoutForFieldsInGroupCloseTag.trim()){
             if(wrapInForm) {
-                wrapperLayoutForFieldsInGroupCloseTag = "</v-layout></v-container></v-form></v-flex>\n"
+                wrapperLayoutForFieldsInGroupCloseTag = "</v-row></v-form></v-col>\n"
             }else{
-                wrapperLayoutForFieldsInGroupCloseTag = "</v-layout></v-container></div>\n"
+                wrapperLayoutForFieldsInGroupCloseTag = "</v-row></div>\n"
             }
         }
 
@@ -212,8 +313,8 @@ class LayoutVue extends Layout {
         String wrap = wrapButtons?"wrap":""
         if(resulthtml.contains(formattedDfName)){
             int index = resulthtml.indexOf(formattedDfName)
-            remainingbuttons.insert(0, "<v-card-actions><v-container fluid grid-list-lg pa-0><v-layout row justify-center $wrap pa-2>\n")
-            remainingbuttons.append("</v-layout></v-container></v-card-actions>\n")
+            remainingbuttons.insert(0, "<v-card-actions><v-row justify='center' $wrap pa-2>\n")
+            remainingbuttons.append("</v-row></v-card-actions>\n")
             remainingbuttons.append(" <font color='red'><div id='$dataframeName-errorContainer'></div></font>\n");
             replaceInStringBuilder(resulthtml, formattedDfName, remainingbuttons.toString())
         } else {
@@ -221,7 +322,6 @@ class LayoutVue extends Layout {
                 replaceInStringBuilder(resulthtml, allOtherButtons, remainingbuttons.toString())
             }
         }
-
     }
 
     public void applyLayoutForButton(StringBuilder dataframeHtml, StringBuilder remainingButtons, btnName, btnScript){
@@ -239,10 +339,9 @@ class LayoutVue extends Layout {
             dataframeHtml.replace(stInd, endInd, btnScript)
         }
         boolean dataframeRightToLeftLanguage = Holders.grailsApplication.config.dataframe.right_to_left_language
-            if(!dataframeRightToLeftLanguage){
-                remainingButtons.insert(0,btnScript)
-            }
-        else {
+        if(dataframeRightToLeftLanguage){
+            remainingButtons.insert(0,btnScript)
+        } else {
             remainingButtons.append(btnScript)
         }
 
@@ -259,18 +358,36 @@ class LayoutVue extends Layout {
             }
         }
     }
-    public static String convertListToString(flexGridValues){
-        if(flexGridValues == null || flexGridValues.isEmpty()){
+    public static String convertListToString(cssGridValues){
+        if(cssGridValues == null || cssGridValues.isEmpty()){
             return ""
         }
         StringBuilder sb = new StringBuilder();
-        for (String s : flexGridValues) {
+        for (String s : cssGridValues) {
             sb.append(s);
             sb.append(" ");
         }
         return sb.toString()
     }
 
+    public static String convertListToString(Map cssGridValues){
+        if(!cssGridValues){
+            return ""
+        }
+        List gridKeys = ['xs', 'sm', 'md', 'lg', 'xl']
+        StringBuilder sb = new StringBuilder();
+        for(String key: gridKeys){
+            if(cssGridValues.get(key)){
+                sb.append(key);
+                sb.append("='");
+                sb.append(cssGridValues.get(key));
+                sb.append("'");
+                sb.append(" ");
+            }
+        }
+        return sb.toString()
+    }
+
     int applyLayoutForCustomPlaceholder(StringBuffer resultPage, WidgetVue widget, String widgetForm, String fieldName, int seq){
         String fieldNamePlaceHolder = "[$fieldName]"
         int indOf = resultPage.toString().indexOf(fieldNamePlaceHolder)
@@ -305,8 +422,8 @@ class LayoutVue extends Layout {
         return finalHeadTag
     }
 
-    public static LayoutVue getLayoutVue(containerLayoutStr){
-        LayoutVue layoutVue = (LayoutVue)Holders.grailsApplication.mainContext.getBean(containerLayoutStr)
+    public static LayoutVue getLayoutVue(String layoutName){
+        LayoutVue layoutVue = (LayoutVue)Holders.grailsApplication.mainContext.getBean(layoutName)
         return layoutVue
     }
 
@@ -339,11 +456,6 @@ class LayoutVue extends Layout {
         this.name = name
     }
 
-    //DEFAULT LAYOUT
-    public LayoutVue(){
-
-    }
-
     //DEFAULT LAYOUT
     public LayoutVue(DataframeVue df){
         this.df = df
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/ButtonWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/ButtonWidgetVue.groovy
index 1d4ea5c1..25271b70 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/ButtonWidgetVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/ButtonWidgetVue.groovy
@@ -17,6 +17,7 @@ import com.elintegro.erf.dataframe.ResultPageHtmlBuilder
 import com.elintegro.erf.dataframe.vue.DataframeVue
 import com.elintegro.erf.dataframe.vue.VueJsBuilder
 import com.elintegro.erf.dataframe.vue.VueStore
+import org.springframework.context.i18n.LocaleContextHolder
 
 
 class ButtonWidgetVue extends WidgetVue{
@@ -27,14 +28,36 @@ class ButtonWidgetVue extends WidgetVue{
         def onClick = field.onClick
         def disabled = field.disabled
         boolean icon = field.icon?:false
+        boolean imageIcon = field.imageIcon?:false
+        String imageIconAttr = field.imageIconAttr
         String iconAttr = field.iconAttr
         String vuetifyIcon = field.vuetifyIcon
         String iconScript = """<v-icon $iconAttr>$vuetifyIcon</v-icon>"""
+        String imageUrl = field.imageUrl
+        String loader = """ <template v-slot:placeholder>
+                                        <v-row
+                                          class="fill-height ma-0"
+                                          align="center"
+                                          justify="center"
+                                        >
+                                          <v-progress-circular
+                                            indeterminate
+                                            color="#ffc526"
+                                          ></v-progress-circular>
+                                        </v-row>
+                                        </template>
+                           """
+        String imageIconScript = """ <v-img src="$imageUrl" $imageIconAttr>
+                                        ${loader}
+                                    </v-img>
+                                 """
+        boolean imageHasLabel = field.imageHasLabel?:false
+        String imageLabelAttr = field.imageLabelAttr?:""
         String refHtml = ""
 
         if(onClick && field.get('onClick')){
             if(onClick.refDataframe){
-                refHtml = getRefHtml(onClick, dataframe)
+                refHtml = getRefHtml(onClick as Map, dataframe)
             }
         }
         addMethodsToScript(dataframe, field)
@@ -42,7 +65,9 @@ class ButtonWidgetVue extends WidgetVue{
         String ret = ""
         if(icon && vuetifyIcon){
             ret = wrapWithSpringSecurity(field, """$refHtml<v-btn ${getAttr(field)} ${toolTip(field)} :disabled="$disabled" id='$fldName' @click.stop='${fldName}_method'>${iconScript}</v-btn>\n""")
-        }else{
+        }else if(imageIcon && imageUrl){
+            ret = wrapWithSpringSecurity(field, """$refHtml<v-btn ${getAttr(field)} ${toolTip(field)} :disabled="$disabled" id='$fldName' @click.stop='${fldName}_method'>${imageIconScript} <div v-if='${imageHasLabel}' ${imageLabelAttr}>${getLabel(field)}</div></v-btn>\n""")
+        } else{
             ret = wrapWithSpringSecurity(field, """$refHtml<v-btn ${getAttr(field)} ${toolTip(field)} :disabled="$disabled" id='$fldName' @click.stop='${fldName}_method'>${getLabel(field)}</v-btn>\n""")
         }
         return ret;
@@ -67,13 +92,16 @@ class ButtonWidgetVue extends WidgetVue{
         StringBuilder sb = new StringBuilder()
         DataframeVue refDataframe = DataframeVue.getDataframeBeanFromReference(onClick.refDataframe)
         String refDataframeName = refDataframe.dataframeName
+        String dialogBoxWidth = onClick.dialogBoxWidth?:"initial"
+        String dialogAttrs = onClick.dialogAttrs?:""
         VueStore store = dataframe.getVueJsBuilder().getVueStore()
         store.addToDataframeVisibilityMap("${refDataframeName} : false,\n")
         dataframe.getVueJsBuilder().addToDataScript(" ${refDataframeName}_data:{key:'', refreshGrid:true},\n")
+        def maxWidth = onClick.dialogBoxMaxWidth?:"500px"
         if(onClick.showAsDialog){
-            sb.append("""<v-dialog v-model="visibility.${refDataframeName}" width='initial' max-width='500px'>""")
+            sb.append("""<v-dialog v-model="visibility.${refDataframeName}" width='$dialogBoxWidth' max-width='$maxWidth' ${dialogAttrs}><v-card>""")
             sb.append(refDataframe.getComponentName("resetForm=true "))
-            sb.append("""</v-dialog>""")
+            sb.append("""</v-card></v-dialog>""")
         } else {
             sb.append(refDataframe.getComponentName("resetForm=true"))
         }
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/CardWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/CardWidgetVue.groovy
new file mode 100644
index 00000000..47622284
--- /dev/null
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/CardWidgetVue.groovy
@@ -0,0 +1,117 @@
+/* Elintegro Dataframe is a framework designed to accelerate the process of full-stack application development.
+We invite you to join the community of developers making it even more powerful!
+For more information please visit  https://www.elintegro.com
+
+Copyright © 2007-2019  Elinegro Inc. Eugene Lipkovich, Shai Lipkovich
+
+This program is under the terms of the GNU General Public License as published by the Free Software Foundation, version 3.
+See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+You are not required to accept this License, since you have not signed it. However, nothing else grants you permission to modify or distribute the Program or its derivative works.
+These actions are prohibited by law if you do not accept this License. Therefore, by modifying or distributing the Program or any work based on the Program, you indicate your acceptance of this License to do so, and all its terms and conditions for copying, distributing or modifying the Program or works based on it. */
+
+
+
+package com.elintegro.erf.widget.vue
+
+import com.elintegro.erf.dataframe.vue.DataframeVue
+import grails.util.Holders
+import groovy.util.logging.Slf4j
+import org.apache.commons.lang.WordUtils
+import org.springframework.context.i18n.LocaleContextHolder
+
+
+/**
+ * Created by pangenirabindra on Jan, 2021.
+ */
+@Slf4j
+
+class CardWidgetVue extends CollectionWidgetVue {
+    @Override
+    String getHtml(DataframeVue dataframe, Map field) {
+        String fldName = getFieldName(dataframe, field)
+        def fldNameDefault = WordUtils.capitalizeFully(fldName);
+        String labelCode = field.labelCode?:fldName
+        String label = getMessageSource().getMessage(labelCode, null, fldNameDefault, LocaleContextHolder.getLocale())
+        String html = getHtmlStructure(dataframe, field, fldName, label)
+        return html
+    }
+    private String getHtmlStructure(DataframeVue dataframe, Map field, String fldName, String label){
+        String multiple = field.multiple?"multiple":''
+        String displayMember = field.displayMember?:'name'
+        String valueMember = field.valueMember?:'id'
+        String cardAction = field.cardAction?:""
+        String cardActionCode = cardAction?""" {{item.$cardAction}} """:""
+        String vuetifyIconForCardAction = field.vuetifyIconForCardAction?:""
+        String loader = """ <template v-slot:placeholder>
+                                        <v-row
+                                          class="fill-height ma-0"
+                                          align="center"
+                                          justify="center"
+                                        >
+                                          <v-progress-circular
+                                            indeterminate
+                                            color="#ffc526"
+                                          ></v-progress-circular>
+                                        </v-row>
+                                        </template>
+                           """
+        String iconCode = vuetifyIconForCardAction?"""<v-icon left>$vuetifyIconForCardAction</v-icon>""":""
+        String cardActionAttr = field.cardActionAttr?:""
+        String cardActionAndIconCode = ''
+        if(cardAction || vuetifyIconForCardAction){
+            cardActionAndIconCode = """  <v-btn text color="black" class="cardActions" $cardActionAttr>
+                                           $iconCode
+                                           $cardActionCode
+                                       </v-btn> """
+        }
+        boolean cardImageAndText = field.cardImageAndText?:false
+        String pictureForVendorType = field.pictureForVendorType?:""
+        String cardImageTextCode = cardImageAndText?""" 
+                                        <v-btn text color="black" class='cardImageTextCode'>
+                                          <v-img height='14' width='14' :src="item.${pictureForVendorType}">${loader}</v-img>
+                                          <div class="d-flex pa-0 cardImageText">{{item.VendorType}}</div> 
+                                       </v-btn> 
+                                    """:""
+        String cardTitle = field.cardTitle?:""
+        String cardDescription = field.cardDescription?:""
+        String cardAvatar = field.cardAvatar?:""
+        String avatarAttr = field.avatarAttr?:""
+        String itemsStr = getFieldJSONItems(field)
+        String cardAttr = field.cardAttr?:""
+        String script = field.script?:""
+        boolean showPriceLevel = field.showPriceLevel?:false
+        String priceLevelCode = showPriceLevel?"""<div class="d-flex cardWidgetPriceLevel align-center">
+                                       <span class="caption font-weight-bold " :style="{'color':item.PriceLevelOneColor}">\$</span>
+                                       <span class="caption font-weight-bold" :style="{'color':item.PriceLevelTwoColor}">\$</span>
+                                       <span class="caption font-weight-bold" :style="{'color':item.PriceLevelThreeColor}">\$</span>
+                                  </div>""":""
+        String modelString = getFieldJSONModelNameVue(field)
+        String descriptionFirstIcon = field.descriptionFirstIcon?"""<v-img height='16' width='16' :src="item.${field.descriptionFirstIcon}" class='recipe-type-categroy'>${loader}</v-img>""":''
+        String descriptionSecondIcon = field.descriptionSecondIcon?"""<v-img height='16' width='16' :src="item.${field.descriptionSecondIcon}" class='recipe-type-categroy'>${loader}</v-img>""":''
+
+        return """
+                <v-flex v-for="item in ${itemsStr}" :key="item.id">
+                      <v-card color="white" rounded elevation="1"  class= "card-list" style="border-radius:5px !important;" height='90' @click="$script"  $cardAttr>
+                            <v-row class="ma-0">
+                                <v-col cols="4" class="pa-0 thumbnailCol"> 
+                                    <v-img style="border-radius:5px 5px 5px 5px;" $avatarAttr :src="item.$cardAvatar" class="imageForItems">${loader}</v-img>  
+                                </v-col>       
+                                <v-col cols="8" class="detailCol ">
+                                    <div class="d-flex pa-0 pb-1 cardTitle" v-html="item.$cardTitle"></div>
+                                    <div class="d-flex cardDesciption text-left" v-html="item.$cardDescription"></div>
+                                    <div class="d-flex card_button_Icon">
+                                       $cardActionAndIconCode 
+                                       $priceLevelCode
+                                       $descriptionSecondIcon
+                                       $descriptionFirstIcon
+                                       $cardImageTextCode
+                                    </div>     
+                                </v-col>
+                            </v-row>
+                      </v-card>
+                </v-flex>
+     
+        """
+    }
+}
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/CarouselWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/CarouselWidgetVue.groovy
index 86e998a1..df2f2320 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/CarouselWidgetVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/CarouselWidgetVue.groovy
@@ -1,3 +1,4 @@
+package com.elintegro.erf.widget.vue
 
 import com.elintegro.erf.dataframe.vue.DataframeVue
 import com.elintegro.erf.widget.vue.CollectionWidgetVue
@@ -26,14 +27,9 @@ class CarouselWidgetVue extends CollectionWidgetVue{
         String height = field.height
         String content = field.content
         """
-               
-
-
-
-
-<v-carousel
+               <v-carousel
                       cycle
-                      show-arrows-on
+                      show-arrows-on-hover
                       hide-delimiter-background
                       height= "$height"
                       ${getAttr(field)}
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/CollectionWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/CollectionWidgetVue.groovy
index ec69e47e..a9fbdcc4 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/CollectionWidgetVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/CollectionWidgetVue.groovy
@@ -24,17 +24,23 @@ abstract class CollectionWidgetVue extends WidgetVue {
         if(!inputValue || !inputValue.value) return false
 
         JSONArray selectedItems =  (inputValue.value instanceof JSONArray)?inputValue.value:convertToJSONArrayIfSingleJSONObject(inputValue.value)
-        JSONArray availableItems = inputValue.items
 
-        if(!domainClassInfo.isAssociation(fieldName)){ // this means we just want to apply description value to the text field without association with any other entity
-            def oldfldVal = domainInstance."${fieldName}"
-            if(oldfldVal == inputValue.value) return false
-            domainInstance."${fieldName}" = inputValue.value
+        if(!domainClassInfo.isAssociation(fieldName) || domainClassInfo.isToOne(fieldName)){ // this means we just want to apply description value to the text field without association with any other entity
+            if (selectedItems.size() > 0){
+                Map requestInputValue = ["value":""]
+                if (field?.valueMember){
+                    requestInputValue.value = selectedItems[0].getAt(field?.valueMember)
+                }else {
+                    requestInputValue.value = inputValue.value[0] //TODO: check if there is not exception in case of single choice
+                }
+                super.populateDomainInstanceValue(dataframe, domainInstance, domainClassInfo, fieldName, field, requestInputValue)
+            }else {
+                def oldfldVal = domainInstance."${fieldName}"
+                if(oldfldVal == inputValue.value) return false
+                domainInstance."${fieldName}" = inputValue.value
+            }
         }else if(domainClassInfo.isToMany(fieldName)){
             return saveHasManyAssociation(selectedItems, domainClassInfo.getRefDomainClass(fieldName), fieldName, domainInstance)
-        }else if(domainClassInfo.isToOne(fieldName)){
-            def oldfldVal = domainInstance."${fieldName}".value
-            domainInstance."${fieldName}" = inputValue.value[0] //TODO: check if there is not exception in case of single choice
         }
         return true
     }
@@ -49,7 +55,7 @@ abstract class CollectionWidgetVue extends WidgetVue {
         Map additionalData = loadAdditionalData(dfInstance, fieldProps, fieldName, additionalDataRequestParamMap, sessionHibernate)
         if(additionalData && additionalData.containsKey("items")){
             List items = (List)additionalData.items
-            jData?.persisters?."${domainAlias}"."${fieldName}".value = getValueList(fieldProps, items, value, fieldName)
+            jData?.persisters?."${domainAlias}"."${fieldName}".value = getValue(fieldProps, value, fieldName)
             jData?.persisters?."${domainAlias}"."${fieldName}".items = items
         }
     }
@@ -59,7 +65,7 @@ abstract class CollectionWidgetVue extends WidgetVue {
         Map additionalData = loadAdditionalData(dfInstance, fieldProps, fieldName, additionalDataRequestParamMap, sessionHibernate)
         if(additionalData && additionalData.containsKey("items")){
             List items = (List)additionalData.items
-            jData?.transits?."${fieldName}".value = getValueList(fieldProps, items, value, fieldName)
+            jData?.transits?."${fieldName}".value = getValue(fieldProps, value, fieldName)
             jData?.transits?."${fieldName}".items = items
         }
     }
@@ -82,6 +88,20 @@ abstract class CollectionWidgetVue extends WidgetVue {
         return valueList
     }
 
+    //todo: how to create value list without being dependent on displayMember and valueMember
+    private static def getValue(Map fieldProps, Object value, String fieldName){
+        List valueList = []
+        String displayMember = fieldProps.displayMember?:fieldName
+        String valueMember = fieldProps.valueMember?:fieldName
+        if (value instanceof Collection<?>){
+            for(int k=0; k<value.size(); k++){
+                valueList.add([(displayMember):value[k]?."$displayMember", (valueMember):value[k]?."$valueMember"])
+            }
+            return valueList
+        }
+        return value?[(displayMember):value?."$displayMember", (valueMember):value?."$valueMember"]:null;
+    }
+
     private boolean isSelectionEqualsToOld(Collection array1, Collection array2){
         boolean isEqual = true;
         if (array1.size() != array2.size()) {
@@ -179,7 +199,9 @@ abstract class CollectionWidgetVue extends WidgetVue {
         String dataVariable = dataframe.getDataVariableForVue(field)
         String fieldnameToReload = dataVariable.replace("_", ".")
         String domainAlias= Dataframe.getDataFrameDomainAlias(fieldnameToReload)
-        if (domainAlias && dataframe.writableDomains) {
+        String defaultValue = field.defaultValue
+        result = getHqlData(dataframe, field, defaultValue, valueMember, displayMember)
+ /*       if (domainAlias && dataframe.writableDomains) {
             Map domain = dataframe.writableDomains.get(domainAlias)
             def queryDomain = DataframeInstance.getPersistentEntityFromDomainMap(domain)
             String simpleFieldName = Dataframe.extractSimpleFieldName(dataframe.dataframeName,fieldnameToReload,domainAlias)
@@ -194,7 +216,7 @@ abstract class CollectionWidgetVue extends WidgetVue {
                 }
 
             }
-        }
+        }*/
         return result
     }
 
@@ -211,7 +233,7 @@ abstract class CollectionWidgetVue extends WidgetVue {
             if(field.internationalize){
                 resultList.each {
                     def displayMemberValue = it.getAt("$displayMember")
-                    Map value1 = ["$valueMember":it.getAt("id"), "$displayMember":getMessageSource().getMessage(displayMemberValue, null, displayMemberValue, LocaleContextHolder.getLocale())]
+                    Map value1 = [(valueMember):it.getAt(valueMember), (displayMember):getMessageSource().getMessage(displayMemberValue, null, displayMemberValue, LocaleContextHolder.getLocale())]
                     if (defaultValue && defaultValue.equals(displayMemberValue)){
                         selMap = value1
                     }
@@ -239,18 +261,19 @@ abstract class CollectionWidgetVue extends WidgetVue {
 
     private Map getEnumData(Map field, Class enumClass, String defaultValue){
         String displayMember = field.displayMember?:"name"
+        String valueMember = field.valueMember?:"id"
         def enumList = getEnumListFromForClass(enumClass)
         List res = new ArrayList(enumList.size())
         def selMap = null
         enumList.each {
             String displayValue = it?."$displayMember"
             if(field.internationalize){
-                displayValue = getMessageSource().getMessage(it, null, it, LocaleContextHolder.getLocale())
+                displayValue = getMessageSource().getMessage(displayValue, null, displayValue, LocaleContextHolder.getLocale())
             }
             if (defaultValue && defaultValue.equals(displayValue)){
-                selMap = displayValue
+                selMap = [(displayMember):displayValue, (valueMember):it?."$valueMember"]
             }
-            res.push(displayValue)
+            res.push([(displayMember):displayValue, (valueMember):it?."$valueMember"])
         }
         field.put("isEnumType", true)
         return [keys:enumList, result: res, selectedData: selMap]
@@ -283,7 +306,7 @@ abstract class CollectionWidgetVue extends WidgetVue {
             String displayMember = fieldProps.displayMember?:"name"
             if(fieldProps.internationalize){
                 resultList.each {
-                    Map value1 = [(valueMember):it.getAt("id"), (displayMember):getMessageSource().getMessage(it.getAt("$displayMember"), null, it.getAt("$displayMember"), LocaleContextHolder.getLocale())]
+                    Map value1 = [(valueMember):it.getAt(valueMember), (displayMember):getMessageSource().getMessage(it.getAt("$displayMember"), null, it.getAt("$displayMember"), LocaleContextHolder.getLocale())]
                     res.push(value1)
                 }
             }else {
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/ComboboxVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/ComboboxVue.groovy
index 7b16d5e8..a1a3f5d2 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/ComboboxVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/ComboboxVue.groovy
@@ -73,9 +73,7 @@ class ComboboxVue extends CollectionWidgetVue {
         String displayMember = field.displayMember?:'name'
         String valueMember = field.valueMember?:'id'
         String itemsStr = getFieldJSONItems(field)
-        String modelString1 = getModelString(dataframe, field) //TODO: decide which one is correct?
         String modelString = getFieldJSONModelNameVue(field)
-        String dataVariable = dataframe.getDataVariableForVue(field)//TODO: may be we do not need it!
         return """
             <v-combobox
                   v-model = "${modelString}"  
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/DateWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/DateWidgetVue.groovy
index 77faede0..fe33b019 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/DateWidgetVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/DateWidgetVue.groovy
@@ -36,7 +36,10 @@ class DateWidgetVue extends WidgetVue {
         String localeString = locale?"locale='$locale'":""
         String dateFormatPlaceholder = getMessageSource().getMessage("date.format.hint", null, "date.format.hint", LocaleContextHolder.getLocale())
         String menuAttr = field.menuAttr?:""
-
+        String events = field.events?:""
+        boolean calendarIconOnly = field.calendarIconOnly?:false
+        boolean calendarIconWithLabel = field.calendarIconWithLabel?:false
+        String calendarIconWithLabelAttr= field.calendarIconWithLabelAttr?:""
         String modelString = getFieldJSONModelNameVue(field)
         return """
                     <v-menu
@@ -52,31 +55,60 @@ class DateWidgetVue extends WidgetVue {
                         $menuAttr
                 >
                 <template v-slot:activator="{ on }">
+                    <v-icon
+                        v-if='${calendarIconOnly}'
+                        v-model="${fldName}_formatted"
+                        label="${getLabel(field)}"
+                        ${validate(field)?":rules = '${fldName}_rule'":""}    
+                        v-on="on"
+                        hint="$dateFormatPlaceholder"
+                        readonly
+                        ${toolTip(field)}
+                        ${getAttr(field)}
+                        id="${fldName}_id"
+                    >
+                        mdi-calendar
+                    </v-icon>
+                    <v-btn
+                        v-else-if='${calendarIconWithLabel}'
+                        v-model="${fldName}_formatted"
+                        v-on="on"
+                        ${toolTip(field)}
+                        ${getAttr(field)}
+                        id="${fldName}_id"
+                    >
+                        <v-icon> mdi-calendar </v-icon>
+                        <div ${calendarIconWithLabelAttr}>${getLabel(field)}</div>    
+                    </v-btn>
                     <v-text-field
-                            v-model="${fldName}_formatted"
-                            label="${getLabel(field)}"
-                            ${validate(field)?":rules = '${fldName}_rule'":""}
-                            v-on="on"
-                            hint="$dateFormatPlaceholder"
-                            persistent-hint
-                            prepend-icon=""
-                            prepend-inner-icon="event"
-                            @click:prepend="onIconClick_$fldName"
-                            readonly
-                            id="${fldName}_id"
-                            ${getAttr(field)}
-                            ${toolTip(field)}
+                        v-else
+                        v-model="${fldName}_formatted"
+                        label="${getLabel(field)}"
+                        ${validate(field)?":rules = '${fldName}_rule'":""}
+                        v-on="on"
+                        hint="$dateFormatPlaceholder"
+                        prepend-icon=""
+                        prepend-inner-icon="event"
+                        @click:prepend="onIconClick_$fldName"
+                        readonly
+                        id="${fldName}_id"
+                        ${getAttr(field)}
+                        ${toolTip(field)}
                     ></v-text-field>
                 </template>
-                ${isReadOnly?"":"""<v-date-picker $localeString v-model="${modelString}" no-title scrollable @input="\$refs.${fldName}_menu.save($modelString)"></v-date-picker>"""}
+                ${isReadOnly?"":"""<v-date-picker $localeString v-model="${modelString}" no-title scrollable @input="\$refs.${fldName}_menu.save($modelString)" $events></v-date-picker>"""}
                 </v-menu>
                 """
     }
 
     String getVueDataVariable(DataframeVue dataframe, Map field){
-
         String dataVariable = dataframe.getDataVariableForVue(field)
         String modelString = getFieldJSONModelNameVue(field)
+        String validationString = ""
+        if(validate(field)){
+            String validationRules = validationRules(field)
+            validationString = """ ${dataVariable}_rule: $validationRules,\n"""
+        }
         dataframe.getVueJsBuilder().addToMethodScript("""
 
         onIconClick_$dataVariable:function(e){
@@ -90,7 +122,8 @@ class DateWidgetVue extends WidgetVue {
             this.$modelString = d.toISOString();
             return d.format("dd/mm/yyyy")
         },\n""")
-        return """${dataVariable}_menu:'',\n"""
+
+        return """${dataVariable}_menu:'',$validationString"""
     }
 
     @Override
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/FKWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/FKWidgetVue.groovy
index 5b5f1ab6..05f5c3b2 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/FKWidgetVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/FKWidgetVue.groovy
@@ -34,10 +34,13 @@ class FKWidgetVue extends WidgetVue{
 
     String getVueDataVariable(DataframeVue dataframe, Map field) {
         String dataVariable = dataframe.getDataVariableForVue(field)
-        Dataframe refDataframe = getReferenceDataframe(field.parent)
-        String refDataframeName = refDataframe.dataframeName
-        //todo now the update of store value in save method is not automated. make it automated.
-        return """$dataVariable : excon.getFromStore('$refDataframeName','key'),\n"""
+        if(field.parent){
+            Dataframe refDataframe = getReferenceDataframe(field.parent)
+            String refDataframeName = refDataframe.dataframeName
+            //todo now the update of store value in save method is not automated. make it automated.
+            return """$dataVariable : excon.getFromStore('$refDataframeName','key'),\n"""
+        }
+        return ""
 
     }
 
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/FilesUploadWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/FilesUploadWidgetVue.groovy
index 74a26ce3..b8b69d5f 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/FilesUploadWidgetVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/FilesUploadWidgetVue.groovy
@@ -94,7 +94,7 @@ class FilesUploadWidgetVue extends com.elintegro.erf.widget.vue.WidgetVue {
         String fldName = dataVariable
         def defaultValue = field.defaultValue?:""
         def doAfterSave = field.doAfterSave?:""
-        String genId = fldName+"-file"
+        def genId = fldName+"-file"
         dataframe.getVueJsBuilder().addToCreatedScript("""this.${fldName}_computedFileUploadParams();\n""")
                 .addToMethodScript("""
                    ${fldName}_uploadFile: function(event){
@@ -113,35 +113,36 @@ class FilesUploadWidgetVue extends com.elintegro.erf.widget.vue.WidgetVue {
                               excon.saveToStore("$dataframe.dataframeName", stateVariable)
                               },\n
                              ${fldName}_ajaxFileSave: function(data, params){
-                              var fileList = this.${fldName}_files;
-                              if(fileList.length > 0){                                                                        
-                              var fileData = new FormData();
-                              for (var i = 0; i < fileList.length; i++) {
-                              fileData.append('fileName',fileList[i].name);
-                              fileData.append('fileStorageSize',fileList[i].size);                              
-                              fileData.append('fileLastModified',fileList[i].lastModified);
-                              fileData.append('fileLastModifiedDate',fileList[i].lastModifiedDate);
-                              fileData.append('fileWebKitRelativePath',fileList[i].webKitRelativePath);
-                              fileData.append('fileType',fileList[i].type);                              
-                              fileData.append("$genId["+i+"]", fileList[i]);
-                            }
-                            fileData.append('fileSize',fileList.length);
-                            fileData.append('fldId','$fldName');
-                            if(data.params != null){
-                            fileData.append('params',data.params.id);}
-                            }
-                            let self = this;
-                              axios({ method:'post',
-                                        url:'${field.ajaxFileSaveUrl}',
-                                        data:fileData 
-                                 }).then(response => {
-                                            ${doAfterSave}
-                                            console.log(response)
-                                                    })
-                                  .catch(function(error){
-                                                console.log(error)
-                                                });                      
-                   },
+                                  var fileList = this.${fldName}_files;
+                                  if(fileList.length > 0){                                                                        
+                                      var fileData = new FormData();
+                                      for (var i = 0; i < fileList.length; i++) {
+                                          fileData.append('fileName',fileList[i].name);
+                                          fileData.append('fileStorageSize',fileList[i].size);                              
+                                          fileData.append('fileLastModified',fileList[i].lastModified);
+                                          fileData.append('fileLastModifiedDate',fileList[i].lastModifiedDate);
+                                          fileData.append('fileWebKitRelativePath',fileList[i].webKitRelativePath);
+                                          fileData.append('fileType',fileList[i].type);                              
+                                          fileData.append("$genId["+i+"]", fileList[i]);
+                                      }
+                                      fileData.append('fileSize',fileList.length);
+                                      fileData.append('fldId','$fldName');
+                                      if(data && data.params != null){
+                                        fileData.append('params',data.params.id);
+                                      }
+                                  }
+                                  let self = this;
+                                  axios({ method:'post',
+                                            url:'${field.ajaxFileSaveUrl}',
+                                            data:fileData 
+                                     }).then(response => {
+                                                ${doAfterSave}
+                                                console.log(response)
+                                                        })
+                                      .catch(function(error){
+                                                    console.log(error)
+                                                    });                      
+                             },
                    
                        ${fldName}_computedFileUploadParams() {
              var refParams = this.params;
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/GridWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/GridWidgetVue.groovy
index 104caaa0..d79009c9 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/GridWidgetVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/GridWidgetVue.groovy
@@ -35,6 +35,8 @@ class GridWidgetVue extends WidgetVue {
 
     def contextPath = Holders.grailsApplication.config.rootPath
     public String ajaxDeleteUrl = "dataframe/ajaxDeleteExpire"
+    public String gridSaveUrl = "gridDataframe/saveGridData"
+
     String embDDfr = "";
     private static final String headers = "headers"
     private static final String defaultData = "defaultData"
@@ -79,6 +81,11 @@ class GridWidgetVue extends WidgetVue {
         String modelString = getFieldJSONModelNameVue(field)
         String itemsStr = getFieldJSONItems(field)
         String headerString = "${getFieldJSONNameVue(field)}${DOT}${headers}"
+        def  modelStringFromData = field.modelStringFromData
+        if(modelStringFromData && modelStringFromData.getModelStringFromData && modelStringFromData.items && modelStringFromData.headers){
+              itemsStr = modelStringFromData.items
+              headerString = modelStringFromData.headers
+        }
         boolean isDynamic = field.isDynamic?:false
         String gridTitle
         if(isDynamic){
@@ -89,20 +96,22 @@ class GridWidgetVue extends WidgetVue {
         String fieldParams = prepareFieldParams(dataframe, field, onclickDfrBuilder)
         String itemKey = field.itemKey?:"id"
         return """<v-card v-show="${fldName}_display"><v-divider/>
-
-       ${showGridSearch?"""
-            <v-row><v-col cols='8'  style="margin-left:-30px; align-self:flex-end;">${gridTitle}</v-col>
-            <v-col cols="4">
-                    <v-text-field
-                    v-model="${fldName}_search"
-                    append-icon="search"
-                    label="$searchPlaceholder"
-                    single-line
-                    hide-details
-                    class='pa-3'
-            ></v-text-field>
-            </v-col></v-row>
-        """:""}
+                   <v-row>
+                       <v-col cols='8'  style="margin-left:-30px; align-self:flex-end;">${gridTitle}</v-col>
+                       <v-col cols="4">
+                          ${showGridSearch?"""
+                            <v-text-field
+                            v-model="${fldName}_search"
+                            append-icon="search"
+                            label="$searchPlaceholder"
+                            single-line
+                            hide-details
+                            class='pa-3'
+                            ></v-text-field>
+                          """:""}
+                       </v-col>
+                   </v-row>
+        
        <v-data-table
             :headers="${headerString}"
             :items="${itemsStr}"
@@ -112,7 +121,7 @@ class GridWidgetVue extends WidgetVue {
             ${dataTableAttribbutes.toString()}
             ${getAttr(field)}
     >
-$fieldParams
+$fieldParams   
     </v-data-table></v-card>
         ${onclickDfrBuilder.toString()}
 """
@@ -126,10 +135,11 @@ $fieldParams
         String alignment   = field?.textAlign?:'start'
         String headerWidth = field.headerWidth?:''
         String valueMember = field?.valueMember
+        String rowAttr = field?.rowAttr?:""
         boolean internationalize = field.internationalize?true:false
+        def editableFields = field.editableFields;  //should pass this value in the form of map of array from dataframe like editableFields:[[name:'field1',validationRule:''],[name:'field2',validationRule:''],...]
         StringBuilder requestFieldParams   = new StringBuilder()
         StringBuilder fieldParams          = new StringBuilder();
-
         ParsedHql parsedHql = new ParsedHql(wdgHql, dataframe.grailsApplication, dataframe.sessionFactory, "${dataframe.dataframeName}:${field.name}" );
         List<MetaField> fieldMetaData      = dataframe.metaFieldService.getMetaDataFromFields(parsedHql, field.name);
         field.put("gridMetaData", fieldMetaData);
@@ -163,13 +173,49 @@ $fieldParams
             }else {
                 Map manageFields = field.manageFields as Map
                 String tdString = "\n<td class='$headerClass'>{{ props.item.$propItemText }}</td>";
-                if(manageFields){
-                    if(manageFields.containsKey(propItemVal)){
-                        if('link' == manageFields[propItemVal].type){
+                if (manageFields) {
+                    if (manageFields.containsKey(propItemVal)) {
+                        if ('link' == manageFields[propItemVal].type) {
                             tdString = "\n<td class='$headerClass'><a :href='props.item.$propItemText' target='_blank' style ='text-decoration :none !important;' >{{ props.item.$propItemText }} </a></td>";
                         }
                     }
                 }
+                if(editableFields) {
+                    for (int i = 0; i < editableFields.size(); i++) {
+                        if (editableFields[i]?.name == headerText) {
+                            String fieldToEdit = editableFields[i]?.name;
+                            String fieldDirective = field.fieldDirective ?: "text-field"
+                            tdString = """\n<td class ='$headerClass' >
+                                    <v-edit-dialog
+                                          :return-value.sync="props.item.$propItemText"
+                                          large persistent
+                                          @save="inlineSave(props.item, '${fieldToEdit}')"
+                                          @cancel="cancel"
+                                          @open="open"
+                                          @close="close">
+                                          <div >{{ props.item.$propItemText }}</div>
+                                          <template v-slot:input>
+                                              <div class="mt-4 title">Update ${editableFields[i].name}</div>
+                                          </template>
+                                          <template v-slot:input>
+                                            <v-form  ref='${fieldToEdit}_form'>
+                                                 <v-$fieldDirective
+                                                    v-model="props.item.$propItemText"
+                                                    label="Edit" single-line counter autofocus 
+                                                    ${editableFields[i].validationRule?":rules = '${editableFields[i].validationRule}'":""}
+                                                 >   
+                                             </v-$fieldDirective>
+                                            </v-form>
+                                          </template>
+                                    </v-edit-dialog> 
+                    </td> """
+
+
+                        }
+
+
+                    }
+                }
                 fieldParams.append(tdString)
             }
             requestFieldParams.append("\nparams['").append(metaField["alias"]).append("'] = dataRecord.").append(metaField["alias"]).append(";\n");
@@ -203,14 +249,28 @@ $fieldParams
             getOnButtonClickScript(onButtonClick, dataframe, onclickDfrBuilder, gridDataframeList, fieldParams, fldName, dataHeader, field)
 
         }
+        if (field?.gridSaveUrl){
+            gridSaveUrl = field.gridSaveUrl
+        }
         addMethodsToScript(dataframe, field)
 //        putPropWatcherForChildDataframes(dataframe)
         field.put("gridDataframeList", gridDataframeList);
+        if(editableFields){
+            dataframe.getVueJsBuilder().addToDataScript("""
+                snack: false,
+                snackColor: '',
+                snackText: '',
+           """)
+
+
+        }
+
+
         String draggIndicator = field.draggable?""" <td class="drag" style="max-width:'20px';">::</td>""":""
         return """
 
         <template slot="item" slot-scope="props">
-          <tr @click.stop="${onClickMethod}" :key="props.item.$valueMember">
+          <tr @click.stop="${onClickMethod}" :key="props.item.$valueMember" ${rowAttr}>
             $draggIndicator ${fieldParams.toString()}
           </tr>  
         </template>
@@ -221,10 +281,54 @@ $fieldParams
 
         String dataVariable = dataframe.getDataVariableForVue(fieldProps)
         def dataHeader = fieldProps.dataHeader
+        boolean saveEditedFieldData = fieldProps.saveEditedFieldData?:false
+        String tableName = fieldProps.tableName
+        Map editable = fieldProps?.editable
+        String doAfterInlineSave = fieldProps.doAfterInlineSave
         String headerString = "${getFieldJSONNameVue(fieldProps)}${DOT}${headers}"
         dataframe.getVueJsBuilder().addToMethodScript(""" getDefaultDataHeaders_${dataVariable} : function(){\n
                              var defaultDataHeaders = ${dataHeader as JSON};
                              this.$headerString = defaultDataHeaders;
+                          },\n
+                          inlineSave (data, editableField) {
+                              var params = this.state;
+                              params['id'] = data.Id;
+                              params['dataOfSelectedRow'] = data;
+                              params['editableField'] = editableField;
+                              params['tableName'] = '$tableName';
+                              params['dataframe'] = '$dataframe.dataframeName'
+                              params['showAlertMessage'] = true;
+                              var self = this;
+                              var refForm = editableField + '_form'
+                              if(this.\$refs[refForm].validate()){
+                                  if($saveEditedFieldData == true){
+                                          excon.callApi('$gridSaveUrl', 'post', params).then(function(responseData){
+                                                     var response = responseData.data;
+                                                     if(params.showAlertMessage == true && response.success != true){
+                                                        excon.showAlertMessage(response);
+                                                      }
+                                                     ${doAfterInlineSave?:""}
+                                          });
+                                  }                    
+                                  else{
+                                        this.snack = true
+                                        this.snackColor = 'success'
+                                        this.snackText = 'Data updated'
+                                  }
+                              }          
+                          },\n
+                          cancel () {
+                                    this.snack = true
+                                    this.snackColor = 'error'
+                                    this.snackText = 'Canceled'
+                          },\n
+                          open () {
+                                    this.snack = true
+                                    this.snackColor = 'info'
+                                    this.snackText = 'Dialog opened'
+                          },\n
+                          close () {
+                                    console.log('Dialog closed')
                           },\n""")
     }
 
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/InputWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/InputWidgetVue.groovy
index 3c1ab59f..ff1a8a46 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/InputWidgetVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/InputWidgetVue.groovy
@@ -27,6 +27,7 @@ class InputWidgetVue extends WidgetVue {
         String autoComplete = field.autoComplete?:'off'
         String clearable = field.clearable?"clearable":""
         String placeholder = field.placeholder?:""
+        String events = field.events?:""
         //String modelString = dataframe.getFieldJSONModelNameVue(field)
         //    String modelString = dataframe.getFieldModelNameVue(field)
         String html = """<v-text-field
@@ -39,6 +40,7 @@ class InputWidgetVue extends WidgetVue {
             style="width:${getWidth(field)}; height:${getHeight(field)};"
             autocomplete = $autoComplete
             placeholder = "$placeholder"
+            $events
             $clearable
             ${getAttr(field)}
           ></v-text-field>"""
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/LanguageSelectorWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/LanguageSelectorWidgetVue.groovy
index 5a84deef..5a5a86b2 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/LanguageSelectorWidgetVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/LanguageSelectorWidgetVue.groovy
@@ -95,8 +95,6 @@ class LanguageSelectorWidgetVue extends CollectionWidgetVue {
                             $field.onSelect.methodScript
              },\n """)
         }
-        String defaultLanguage = field.defaultLanguage?:"English"
-        dataframe.getVueJsBuilder().addToDataScript("""defaultLanguage:'$defaultLanguage',""")
         boolean isReadOnly = dataframe.isReadOnly(field)
         String typeString = ""
         if(!isSearchable(field)){
@@ -105,6 +103,7 @@ class LanguageSelectorWidgetVue extends CollectionWidgetVue {
         String multiple = field.multiple?"multiple":''
         String displayMember = field.displayMember?:'name'
         String valueMember = field.valueMember?:'id'
+        String getIconAttr = field.getIconAttr?:''
         String itemsStr = getFieldJSONItems(field)
         String modelString = getFieldJSONModelNameVue(field)
         boolean imageIcon = field.imageIcon?:false
@@ -118,7 +117,7 @@ class LanguageSelectorWidgetVue extends CollectionWidgetVue {
                   <v-col class="pt-6" cols="6"> 
                       <v-select
                           class = "underLine"
-                          v-model = "defaultLanguage" 
+                          v-model = "state.transits.defaultLanguage" 
                           :items="$itemsStr"
                           ${validate(field)?":rules = '${fldName}_rule'":""}
                           label="$label"
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/ListWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/ListWidgetVue.groovy
index a41b72cd..49ee8a4b 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/ListWidgetVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/ListWidgetVue.groovy
@@ -3,9 +3,11 @@ package com.elintegro.erf.widget.vue
 import com.elintegro.erf.dataframe.Dataframe
 import com.elintegro.erf.dataframe.DataframeException
 import com.elintegro.erf.dataframe.DataframeInstance
+import com.elintegro.erf.dataframe.DataframeView
 import com.elintegro.erf.dataframe.DbResult
 import com.elintegro.erf.dataframe.ParsedHql
 import com.elintegro.erf.dataframe.vue.DataframeVue
+import com.elintegro.erf.dataframe.vue.VueJsBuilder
 import grails.converters.JSON
 import org.apache.commons.lang.WordUtils
 import org.springframework.context.i18n.LocaleContextHolder
@@ -37,6 +39,7 @@ class ListWidgetVue extends CollectionWidgetVue {
         boolean itemString = field.itemString?:false
         modelString = itemString?itemsStr:getFieldJSONModelNameVue(field)
         String onClick = field.OnClick?:""
+        String htmlForAddButton = getHtmlForAddButton(dataframe, field, modelString)
         """
            <v-list ${isDisabled(dataframe, field) ? "disabled" : ""} flat ${getAttr(field)}>
                   <v-subheader>$label</v-subheader>
@@ -49,9 +52,47 @@ class ListWidgetVue extends CollectionWidgetVue {
                                <v-divider style="border-color:rgb(42, 182, 246);"></v-divider>
                           </v-list-item-content>
                        </v-list-item>
+                       $htmlForAddButton
                   </v-card>
                   </v-list-item-group>
            </v-list>
         """
     }
+
+    private String getHtmlForAddButton(DataframeVue dataframe, Map field, String modelString){
+        boolean addable = field.addable?:false
+        String fldName = getFieldName(dataframe, field)
+        if(addable){
+            addMthodForAddButton(dataframe, field, fldName, modelString)
+            return """
+
+<v-row>
+                <v-col><v-text-field
+placeholder = "Add new data"
+outlined
+ v-model='${fldName}_listdata'></v-text-field></v-col>
+                <v-col><v-btn @click='${fldName}_addToList'>Add</v-btn></v-col>
+                </v-row>
+"""
+        }
+
+        return ""
+    }
+
+    private void addMthodForAddButton(dataframe, field, String fldName, String modelString){
+
+        String displayMember = field.displayMember ?: 'name'
+        VueJsBuilder vueJsBuilder = dataframe.getVueJsBuilder()
+        vueJsBuilder.addToDataScript("""
+                ${fldName}_listdata: "",
+        """)
+                vueJsBuilder.addToMethodScript("""${fldName}_addToList: function(){
+                           if(Array.isArray(this.${modelString})){
+                                this.${modelString}.push({$displayMember: this.${fldName}_listdata});
+                            } else {
+                                this.${modelString} = [{$displayMember: this.${fldName}_listdata}];
+                            }
+                                this.${fldName}_listdata= "";
+             },\n """)
+    }
 }
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/MapDisplayWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/MapDisplayWidgetVue.groovy
index ef22bb75..501a0134 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/MapDisplayWidgetVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/MapDisplayWidgetVue.groovy
@@ -122,6 +122,8 @@ class MapDisplayWidgetVue extends WidgetVue{
         String displayMember = field?.displayMember
         int zoom = field?.zoom?:8
         String mapTypeId = field?.mapTypeId?:"ROADMAP"
+        boolean disableDefaultUI = field.disableDefaultUI?:false
+        String iconScript = field.iconScript?:""
         String addListenerScript = field?.addListenerScript?:""
         String markerClickEvent = """google.maps.event.addListener(marker, 'click', (function (marker, i) {
                                              return function () {
@@ -136,7 +138,8 @@ class MapDisplayWidgetVue extends WidgetVue{
                                      let map = new google.maps.Map(document.getElementById('$fldName'), {
                                          zoom: $zoom,
                                          center: new google.maps.LatLng(${center.lat}, ${center.lng}),
-                                         mapTypeId: google.maps.MapTypeId.$mapTypeId
+                                         mapTypeId: google.maps.MapTypeId.$mapTypeId,
+                                         disableDefaultUI: $disableDefaultUI  
                                      });
                                      let infowindow = new google.maps.InfoWindow();
                                      let markerBounds = new google.maps.LatLngBounds();
@@ -145,6 +148,7 @@ class MapDisplayWidgetVue extends WidgetVue{
                                          let latlng = new google.maps.LatLng(locations[i]['${latitude}'], locations[i]['${longitude}']);
                                          marker = new google.maps.Marker({
                                              position: latlng,
+                                             icon:$iconScript,
                                              map: map
                                          });
                                          markerBounds.extend(latlng);
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/NumberInputWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/NumberInputWidgetVue.groovy
index 30727f6b..fce75b4f 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/NumberInputWidgetVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/NumberInputWidgetVue.groovy
@@ -45,6 +45,7 @@ class NumberInputWidgetVue extends WidgetVue {
             ${toolTip(field)}
             style="width:${getWidth(field)}; height:${getHeight(field)};"
             ${getAttr(field)}
+            ${fillProps(field)}
           ></v-text-field>"""
     }
 
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/PhoneNumberWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/PhoneNumberWidgetVue.groovy
index fe3c98ba..813704c5 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/PhoneNumberWidgetVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/PhoneNumberWidgetVue.groovy
@@ -33,7 +33,7 @@ class PhoneNumberWidgetVue extends WidgetVue{
                <v-text-field
                  label="$label"
                  v-model = "${getFieldJSONModelNameVue(field)}" 
-                 :rules = "${fldName}_rule"
+                 ${validate(field)?":rules = '${fldName}_rule'":""}
                  ${isReadOnly?"readonly":''}
                  ${toolTip(field)}
                  ${getAttr(field)}
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/PictureDisplayWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/PictureDisplayWidgetVue.groovy
index 4f3a0eeb..23182bca 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/PictureDisplayWidgetVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/PictureDisplayWidgetVue.groovy
@@ -15,6 +15,7 @@ package com.elintegro.erf.widget.vue
 
 import com.elintegro.erf.dataframe.DataframeInstance
 import com.elintegro.erf.dataframe.vue.DataframeVue
+import com.elintegro.erf.dataframe.vue.VueStore
 import grails.util.Holders
 import org.grails.web.json.JSONObject
 
@@ -29,16 +30,74 @@ class PictureDisplayWidgetVue extends WidgetVue{
         String heightString = height?"height=$height":""
         String widthString  = width?"""width=$width """:""
         String modelString = getFieldJSONModelNameVue(field)
-        String html =  """<v-img
-           id = "$fldParam"
-          :src="$modelString"
-          
-          :alt = "${modelString}_alt"
-          aspect-ratio="$aspectRatio"
-          ${toolTip(field)} 
-           $heightString
-           $widthString
-          ${getAttr(field)} ></v-img>"""
+        String pictureTitle = field.pictureTitle?:""
+        boolean containsLoader = field?.containsLoader?:false
+        String loaderType = field?.loaderType?:"circular"
+        String loaderAttrs = field?.loaderAttrs?:""
+        String loader = """ <template v-if="$containsLoader" v-slot:placeholder>
+                                <v-row
+                                    class="fill-height ma-0"
+                                    align="center"
+                                    justify="center"
+                                >
+                                    <v-progress-$loaderType
+                                        ${loaderAttrs}
+                                    ></v-progress-$loaderType>
+                                </v-row>
+                             </template>
+                           """
+        String pictureTitleCode = pictureTitle?"""<div class="d-flex justify-end mx-3 mb-3">
+                                                  <span class="my-span">
+                                                   $pictureTitle
+                                                  </span>
+                                                </div>""":""
+        boolean pictureButton = field.pictureButton?:false
+        String setButtonAttr = field.setButtonAttr?:""
+        String setIconAttr = field.setIconAttr?:""
+        String setMarginPaddingForPictureButton = field.setMarginPaddingForPictureButton?:" mx-3 mb-3"
+        if(pictureButton){
+            String refHtml = ""
+            def onClick = field.onClick
+            if(onClick && field.get('onClick')){
+                if(onClick.refDataframe){
+                    refHtml = getRefHtml(onClick as Map, dataframe)
+                }
+            }
+            String html =  """ <v-img
+                                   id = "$fldParam"
+                                   :src="$modelString"
+                                   :alt = "${modelString}_alt"
+                                   aspect-ratio="$aspectRatio"
+                                   ${toolTip(field)} 
+                                   $heightString
+                                   $widthString
+                                   ${getAttr(field)} 
+                                >
+                                   ${loader}
+                                   <div class="d-flex justify-end ${setMarginPaddingForPictureButton}">
+                                       $refHtml<v-btn $setButtonAttr>
+                                            <v-img $setIconAttr></v-img>
+                                       </v-btn>
+                                   </div> 
+                                </v-img>
+                           """
+            return html
+        }
+        String html =  """
+                            <v-img
+                               id = "$fldParam"
+                               :src="$modelString"
+                               :alt = "${modelString}_alt"
+                               aspect-ratio="$aspectRatio"
+                               ${toolTip(field)} 
+                               $heightString
+                               $widthString
+                               ${getAttr(field)} 
+                            >
+                               $pictureTitleCode
+                               ${loader} 
+                            </v-img>
+                       """
         if(field?.layout){
             html = applyLayout(dataframe, field, html)
         }
@@ -85,4 +144,33 @@ class PictureDisplayWidgetVue extends WidgetVue{
     public Object getInitValues(DataframeVue df, Map fieldProps){
         return fieldProps.url?:getDefaultImageName()
     }
+    String pictureButtonCode(DataframeVue dataframe, Map field,String html){
+        String setButtonAttr = field.setButtonAttr?:""
+        String setIconAttr = field.setIconAttr?:""
+        html ="""<div class="d-flex justify-end mx-3 mb-3">
+                        <v-btn $setButtonAttr><v-img $setIconAttr></v-img></v-btn>
+                  </div> 
+                """
+
+     }
+    private String getRefHtml(Map onClick, DataframeVue dataframe){
+        StringBuilder sb = new StringBuilder()
+        DataframeVue refDataframe = DataframeVue.getDataframeBeanFromReference(onClick.refDataframe)
+        String refDataframeName = refDataframe.dataframeName
+        String dialogBoxWidth = onClick.dialogBoxWidth?:"initial"
+        VueStore store = dataframe.getVueJsBuilder().getVueStore()
+        store.addToDataframeVisibilityMap("${refDataframeName} : false,\n")
+        dataframe.getVueJsBuilder().addToDataScript(" ${refDataframeName}_data:{key:'', refreshGrid:true},\n")
+        def maxWidth = onClick.dialogBoxMaxWidth?:"500px"
+        if(onClick.showAsDialog){
+            sb.append("""<v-dialog v-model="visibility.${refDataframeName}" width='$dialogBoxWidth' max-width='$maxWidth'><v-card>""")
+            sb.append(refDataframe.getComponentName("resetForm=true "))
+            sb.append("""</v-card></v-dialog>""")
+        } else {
+            sb.append(refDataframe.getComponentName("resetForm=true"))
+        }
+
+        return sb.toString()
+    }
+
 }
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/PictureUploadWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/PictureUploadWidgetVue.groovy
index 25e30c70..3562a403 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/PictureUploadWidgetVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/PictureUploadWidgetVue.groovy
@@ -17,6 +17,7 @@ import com.elintegro.erf.dataframe.Dataframe
 import com.elintegro.erf.dataframe.DataframeException
 import com.elintegro.erf.dataframe.DomainClassInfo
 import com.elintegro.erf.dataframe.vue.DataframeVue
+import grails.util.Holders
 import org.apache.commons.lang.StringUtils
 import org.grails.web.json.JSONArray
 import org.grails.web.json.JSONObject
@@ -39,8 +40,8 @@ class PictureUploadWidgetVue extends WidgetVue {
         String dropText = field?.dropText?:"Drop your file here ..."
         String markIsPrimary = field?.markIsPrimary?:""
         String popupText = field?.popupText?:""
-        String idUpload = field?.idUpload
-        String idEdit = field?.idEdit
+        String idUpload = field?.idUpload?:fldName
+        String idEdit = field?.idEdit?:fldName
         def maxImage = field?.maxImage?:5
         boolean camera = field?.camera?:false
         boolean videoHeight = field?.videoHeight
@@ -48,34 +49,48 @@ class PictureUploadWidgetVue extends WidgetVue {
         boolean canvasHeight = field?.canvasHeight
         boolean canvasWidth = field?.canvasWidth
         return """
-              <div ${getAttr(field)} style="display: flex;">
-               <v-image-upload
-                  :multiple=$multiple
-                  @upload-success="${fldName}_uploadImages" 
-                  @limit-exceeded="${fldName}_limitExceeded" 
-                  ${deleteButton ? "@before-remove='${fldName}_beforeRemove'" : ""}
-                  ${editButton ? "@edit-image='${fldName}_editImage'" : ""}
-                  ${toolTip(field)}  
-                    ${idUpload ? "id-upload=$idUpload" : ""}
-                    ${idEdit ? "edit-upload=$idEdit" : ""}
-                    :max-image=$maxImage
-                    :camera = $camera
-                    ${videoHeight ? ":video-height=$videoHeight" : ""}
-                    ${videoWidth ? ":video-width=$videoWidth" : ""}
-                    ${canvasHeight ? ":canvas-height=$canvasHeight" : ""}
-                    ${canvasWidth ? ":canvas-width=$canvasWidth" : ""}
-                    primary-text = "$primaryText"
-                    browse-text = "$browseText"
-                    drag-text = "$dragText"
-                    drop-text="$dropText"
-                    mark-is-primary-text="$markIsPrimary"
-                    popup-text="$popupText"
-                    :show-delete=$deleteButton
-                    :show-edit=$editButton
-                    :show-add=$addButton
-            ></v-image-upload>
-               </div>
-               """
+              <div ${getAttr(field)} style="display: block; max-width: fit-content; margin:0 auto;">
+                   <div class="v-label theme--light">
+                   ${getLabel(field)}
+                    </div>
+                   <v-image-upload
+                      :multiple='$multiple'
+                      @upload-success="${fldName}_handleImageUpload" 
+                      @limit-exceeded="${fldName}_limitExceeded" 
+                      ${deleteButton ? "@before-remove='${fldName}_beforeRemove'" : ""}
+                      ${editButton ? "@edit-image='${fldName}_editImage'" : ""}
+                      ${toolTip(field)}  
+                        ${idUpload ? "id-upload=$idUpload" : ""}
+                        ${idEdit ? "id-edit=$idEdit" : ""}
+                        :max-image=$maxImage
+                        :camera = '$camera'
+                        ${videoHeight ? ":video-height=$videoHeight" : ""}
+                        ${videoWidth ? ":video-width=$videoWidth" : ""}
+                        ${canvasHeight ? ":canvas-height=$canvasHeight" : ""}
+                        ${canvasWidth ? ":canvas-width=$canvasWidth" : ""}
+                        primary-text = "$primaryText"
+                        browse-text = "$browseText"
+                        drag-text = "$dragText"
+                        drop-text="$dropText"
+                        mark-is-primary-text="$markIsPrimary"
+                        popup-text="$popupText"
+                        :show-delete='$deleteButton'
+                        :show-edit='$editButton'
+                        :show-add='$addButton'
+                        :data-images="imageList"
+                        :is-camera-disable = "${fldName}_cameraDisable"
+                   ></v-image-upload>
+                   <v-progress-circular
+                        :size="140"
+                        :width="6"
+                        color="rgb(177,243,198)"
+                        indeterminate
+                        v-show="${fldName}_showLoader"
+                        class="imageResizeLoader"
+                   >Reducing...</v-progress-circular>
+                   
+              </div>
+        """
     }
 
     @Override
@@ -86,15 +101,17 @@ class PictureUploadWidgetVue extends WidgetVue {
         JSONArray selectedItems =  convertToJSONArrayIfSingleJSONObject(inputValue)
         JSONArray availableItems = inputValue.items
 
-        if(!domainClassInfo.isAssociation(fieldName)){ // this means we just want to apply description value to the text field without association with any other entity
-            def oldfldVal = domainInstance."${fieldName}"
-            if(oldfldVal == inputValue.value) return false
-            domainInstance."${fieldName}" = inputValue.value
+        if(!domainClassInfo.isAssociation(fieldName) || domainClassInfo.isToOne(fieldName)){ // this means we just want to apply description value to the text field without association with any other entity
+            if ((inputValue.value instanceof JSONArray) && (inputValue.value.size() > 0)){
+                Map requestInputValue = ["value":inputValue.value[0].getAt("imageName")]
+                super.populateDomainInstanceValue(dataframe, domainInstance, domainClassInfo, fieldName, field, requestInputValue)
+            }else {
+                def oldfldVal = domainInstance."${fieldName}"
+                if(oldfldVal == inputValue.value) return false
+                domainInstance."${fieldName}" = inputValue.value
+            }
         }else if(domainClassInfo.isToMany(fieldName)){
             return saveHasManyAssociation(selectedItems, domainClassInfo.getRefDomainClass(fieldName), fieldName, domainInstance)
-        }else if(domainClassInfo.isToOne(fieldName)){
-            def oldfldVal = domainInstance."${fieldName}".value
-            domainInstance."${fieldName}" = inputValue.value[0] //TODO: check if there is not exception in case of single choice
         }
         return true
     }
@@ -144,17 +161,72 @@ class PictureUploadWidgetVue extends WidgetVue {
         boolean deleteButton = field?.deleteButton
         boolean editButton = field?.editButton
         boolean markIsPrimary = field?.markIsPrimary?:false
-        dataframe.getVueJsBuilder().addToCreatedScript("""this.${fldName}_computedFileUploadParams();\n""")
+        String fileSaveUrl = field.ajaxFileSaveUrl?:dataframe.ajaxFileSaveUrl
+        String doAfterSave = field.doAfterSave?:""
+        def imageMaxSize = Holders.grailsApplication.config.image.maxSize
+        dataframe.getVueJsBuilder().addToDataScript("""imageList:[],\n ${fldName}_cameraDisable : false,\n ${fldName}_showLoader:false,\n """).addToCreatedScript("""this.${fldName}_computedFileUploadParams();\n""")
                 .addToMethodScript("""
+           ${fldName}_handleImageUpload: function(file, currentIndex, imageList){
+                               if(file.size > 52428800){ //52428800 bytes = 50mb
+                                  let response = {};
+                                  response.msg = "Image size should be less than 50 MB"
+                                  excon.showAlertMessage(response);
+                                  this.imageList = [];
+                                  this.${fldName}_imagesData = [];
+                                  return false;
+                               }
+                               else if(file.size > 2097152){
+                                   let confirmMsg = confirm("The picture is too big, would you like to reduce the size?");
+                                   if(confirmMsg){
+                                       this.${fldName}_showLoader = true;
+                                       this.${fldName}_reduceImageSize(file, currentIndex, imageList)
+                                   }
+                                   else{
+                                       this.imageList = [];
+                                       this.${fldName}_imagesData = [];
+                                       return false;
+                                   }
+                               }else{
+                                    this.${fldName}_uploadImages(file, currentIndex, imageList)
+                               }
+           },\n  
            ${fldName}_uploadImages: function(file, currentIndex, imageList){
-                        this.${fldName}_files.push(file);
-                        let imageData = ${excon}.getImageDataInfo(file);
-                        this.${fldName}_imagesData.push(imageData);
-                        let stateVariable = excon.getFromStore("$dataframe.dataframeName");
-                        stateVariable.${getFieldJSONNameVueWithoutState(field)} = this.${fldName}_imagesData;
-                        excon.saveToStore("$dataframe.dataframeName", stateVariable);
-                        
-                    },\n
+                            this.${fldName}_files.push(file);
+                            let imageData = ${excon}.getImageDataInfo(file);
+                            this.${fldName}_imagesData.push(imageData);
+                            let stateVariable = excon.getFromStore("$dataframe.dataframeName");
+                            stateVariable.${getFieldJSONNameVueWithoutState(field)} = this.${fldName}_imagesData;
+                            excon.saveToStore("$dataframe.dataframeName", stateVariable);
+                            this.${fldName}_cameraDisable  = true;
+           },\n 
+           ${fldName}_reduceImageSize: function(file, currentIndex, imageList){
+                                var self = this;
+                                var imageFile = file
+                                
+                                var options = {
+                                    maxSizeMB: $imageMaxSize,
+                                    useWebWorker: true,
+                                    maxIteration: 50, 
+                                }
+                                imageCompression(imageFile, options)
+                                    .then(function (compressedFile) {
+                                        console.log(compressedFile); // write your own logic
+                                        var newFile = new File([compressedFile], compressedFile.name);
+                                        var reader = new FileReader();
+                                        console.log(reader.readAsDataURL(compressedFile))
+                                         reader.onloadend = function() {
+                                             var base64data = reader.result; 
+                                             self.${fldName}_showLoader = false;
+                                             imageList[currentIndex].path = base64data;
+                                             self.${fldName}_uploadImages(newFile, currentIndex, imageList)
+                                         }
+                                    })
+                                    .catch(function (error) {
+                                        self.${fldName}_showLoader = false;
+                                        console.log(error.message);
+                                });
+
+           },\n      
            ${deleteButton ? """${fldName}_beforeRemove: function(currentIndex, beforeRemove){
                             var r = confirm("Remove image !");
                             if (r == true) {
@@ -164,11 +236,24 @@ class PictureUploadWidgetVue extends WidgetVue {
                                     this.${fldName}_imagesData.splice(currentIndex, 1);
                                     excon.getFromStore("$dataframe.dataframeName").${getFieldJSONNameVueWithoutState(field)} = this.${fldName}_imagesData;
                                 }
+                                if(this.${fldName}_imagesData.length < 1){
+                                   this.${fldName}_cameraDisable  = false;
+                                }
                             } 
                     },\n  """ : ""}
            ${editButton ? """${fldName}_editImage: function(file, currentIndex, fileList){
-                            this.${fldName}_files[currentIndex] = file;
-                            excon.getFromStore("$dataframe.dataframeName").${getFieldJSONNameVueWithoutState(field)}[currentIndex] = ${excon}.getImageDataInfo(file);
+                            let currentInd = currentIndex?currentIndex:0;
+                            this.${fldName}_files[currentInd] = file;
+                            let stateValues = excon.getFromStore("$dataframe.dataframeName");
+                            let imageArray = stateValues.${getFieldJSONNameVueWithoutState(field)};
+                            if(imageArray != null || imageArray != undefined){
+                              imageArray[currentInd] = ${excon}.getImageDataInfo(file);
+                            }else{
+                                imageArray = [];
+                                imageArray[currentInd] = ${excon}.getImageDataInfo(file);
+                                stateValues.${getFieldJSONNameVueWithoutState(field)} = imageArray;
+                                excon.saveToStore('$dataframe.dataframeName',stateValues);
+                            }
                     },\n  """ : ""}
            ${markIsPrimary ? """${fldName}_markIsPrimary: function(currentIndex, fileList){
                             console.log('markIsPrimary data', index, fileList);
@@ -177,6 +262,7 @@ class PictureUploadWidgetVue extends WidgetVue {
                             alert('Limit exceeded');
                     },\n
            ${fldName}_ajaxFileSave: function(data, params){
+                        let self = this;
                         var fileList = this.${fldName}_files;
                         if(fileList.length > 0){
                             var picData = new FormData();
@@ -189,8 +275,13 @@ class PictureUploadWidgetVue extends WidgetVue {
                             for (var i = 0; i < fileList.length; i++) {
                                 picData.append("$genId["+i+"]", fileList[i]);
                             }
-                            axios.post('${field.ajaxFileSaveUrl}', picData).then(response => {
+                            axios.post('${fileSaveUrl}', picData).then(response => {
                               console.log(response)
+                              $doAfterSave
+                              self.imageList = [];
+                              self.${fldName}_imagesData = [];
+                              self.${fldName}_cameraDisable = false;
+                              self.${fldName}_files = []
                             }).catch(function (error) {
                                 console.log(error);
                             });
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/PictureUploadWidgetVueBackup.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/PictureUploadWidgetVueBackup.groovy
new file mode 100644
index 00000000..51b0b674
--- /dev/null
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/PictureUploadWidgetVueBackup.groovy
@@ -0,0 +1,189 @@
+/* Elintegro Dataframe is a framework designed to accelerate the process of full-stack application development.
+We invite you to join the community of developers making it even more powerful!
+For more information please visit  https://www.elintegro.com
+
+Copyright © 2007-2019  Elinegro Inc. Eugene Lipkovich, Shai Lipkovich
+
+This program is under the terms of the GNU General Public License as published by the Free Software Foundation, version 3.
+See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+You are not required to accept this License, since you have not signed it. However, nothing else grants you permission to modify or distribute the Program or its derivative works.
+These actions are prohibited by law if you do not accept this License. Therefore, by modifying or distributing the Program or any work based on the Program, you indicate your acceptance of this License to do so, and all its terms and conditions for copying, distributing or modifying the Program or works based on it. */
+
+
+package com.elintegro.erf.widget.vue
+
+import com.elintegro.erf.dataframe.Dataframe
+import com.elintegro.erf.dataframe.DataframeException
+import com.elintegro.erf.dataframe.DomainClassInfo
+import com.elintegro.erf.dataframe.vue.DataframeVue
+import org.apache.commons.lang.StringUtils
+import org.grails.web.json.JSONArray
+import org.grails.web.json.JSONObject
+
+/**
+ * Created by kchapagain on Dec, 2018.
+ */
+class PictureUploadWidgetVueBackup extends WidgetVue{
+    @Override
+    String getHtml(DataframeVue dataframe, Map field) {
+        String fldName = getFieldName(dataframe, field)
+        boolean multiple = field?.multiple
+        boolean editButton = field?.editButton
+        boolean deleteButton = field?.deleteButton
+        return """
+              <div ${getAttr(field)}>
+               <v-eutil-image-upload 
+                  ${multiple?":multiple= 'true'":""} 
+                  @upload-success="${fldName}_uploadImages" 
+                  ${deleteButton?"@before-remove='${fldName}_beforeRemove'":""}
+                  ${editButton?"@edit-image='${fldName}_editImage'":""}
+                  ${editButton?":edit-button=true":""}
+                  ${deleteButton?":delete-button=true":""}
+                  ${toolTip(field)}  
+                >
+               </v-eutil-image-upload></div>
+               """
+    }
+    @Override
+    boolean populateDomainInstanceValue(Dataframe dataframe, def domainInstance, DomainClassInfo domainClassInfo, String fieldName, Map field, def inputValue){
+        if(isReadOnly(field)){
+            return false
+        }
+        JSONArray selectedItems =  convertToJSONArrayIfSingleJSONObject(inputValue)
+        JSONArray availableItems = inputValue.items
+
+        if(!domainClassInfo.isAssociation(fieldName)){ // this means we just want to apply description value to the text field without association with any other entity
+            def oldfldVal = domainInstance."${fieldName}"
+            if(oldfldVal == inputValue.value) return false
+            domainInstance."${fieldName}" = inputValue.value
+        }else if(domainClassInfo.isToMany(fieldName)){
+            return saveHasManyAssociation(selectedItems, domainClassInfo.getRefDomainClass(fieldName), fieldName, domainInstance)
+        }else if(domainClassInfo.isToOne(fieldName)){
+            def oldfldVal = domainInstance."${fieldName}".value
+            domainInstance."${fieldName}" = inputValue.value[0] //TODO: check if there is not exception in case of single choice
+        }
+        return true
+    }
+    private JSONArray convertToJSONArrayIfSingleJSONObject(JSONObject value){
+        JSONArray jn = new JSONArray()
+        jn.add(value)
+        return jn
+    }
+    //	saves onetomany and manytomany
+    private boolean saveHasManyAssociation(JSONArray inputValue, def refDomainClass, String fieldName, def domainInstance) {
+        domainInstance?.(StringUtils.uncapitalize(fieldName))?.clear()
+        //Here i have tried to save imageName,imageType,imageSize in Images table ,if we need to save other attributes(fields) in future, need to change this code accordingly.
+        //Todo : Need to make this code more generic if possible so that we don't have to manually add hardcoded fields (like imageName,imageType.. )
+        inputValue.value.each{val ->
+            val.each {
+                def newInstance = refDomainClass.newInstance()
+                newInstance.name = it.imageName
+                newInstance.imageType = it.imageType
+                newInstance.imageSize = it.imageSize
+                newInstance.save()
+                //newly created image instance saving into cross table..
+                domainInstance."addTo${fieldName.capitalize()}"(newInstance)
+            }
+        }
+        return true
+    }
+
+    String getVueDataVariable(DataframeVue dataframe, Map field) {
+        String fldName = dataframe.getDataVariableForVue(field)
+        String valueScript = """"""
+        return """
+           ${fldName}_files: [],
+"""
+
+    }
+
+    String getValueSetter(DataframeVue dataframe, Map field, String divId, String dataVariable, String key) throws DataframeException{
+        String fldName = dataVariable
+        def defaultValue = field.defaultValue?:""
+        String fillState = ""
+        String genId = fldName+"-file"
+        String domainAlias= getDataFrameDomainAlias(divId)
+        String valueMember = field.valueMember
+        String fieldNameToReload = dataframe.dataframeName+'.'+domainAlias+'.'+valueMember
+        boolean deleteButton = field?.deleteButton
+        boolean editButton = field?.editButton
+        dataframe.getVueJsBuilder().addToCreatedScript("""this.${fldName}_computedFileUploadParams();\n""")
+                .addToMethodScript("""
+           ${fldName}_uploadImages: function(event){
+                        var detailData = event.detail;
+                        var imageList = detailData[3];
+                        this.${fldName}_files = imageList;
+                        let imageArray = [];
+                        for(let i = 0; i < imageList.length; i++){
+                            let imageData = {};
+                            imageData["imageName"] = imageList[i].name; 
+                            imageData["imageSize"] = imageList[i].size;
+                            imageData["imageType"] = imageList[i].type;
+                            imageArray.push(imageData);
+                        }
+                        let stateVariable = excon.getFromStore("$dataframe.dataframeName");
+                        stateVariable.${getFieldJSONNameVueWithoutState(field)} = imageArray;
+                        excon.saveToStore("$dataframe.dataframeName", stateVariable)
+                        
+                    },\n
+           ${deleteButton?"""${fldName}_beforeRemove: function(event){
+                            var detailData = event.detail;
+                            var beforeRemove = detailData[1];
+                            var r = confirm("Remove image !");
+                            if (r == true) {
+                                beforeRemove()
+                                this.${fldName}_files = detailData[2];
+                            } 
+                    },\n  """:""}
+           ${editButton ? """${fldName}_editImage: function(event){
+                            var detailData = event.detail;
+                            this.${fldName}_files = detailData[3];
+                    },\n  """ : ""}
+           ${fldName}_ajaxFileSave: function(data, params){
+                        var fileList = this.${fldName}_files;
+                        if(fileList.length > 0){
+                            var picData = new FormData();
+                            picData.append('fileSize',fileList.length);
+                            picData.append('fieldnameToReload','$fieldNameToReload');
+                            jQuery.each(params, function (key, value) {
+                                    picData.append(key,value);
+                            });
+                            picData.append('fldId','$fldName');
+                            for (var i = 0; i < fileList.length; i++) {
+                                picData.append("$genId["+i+"]", fileList[i]);
+                            }
+                            axios.post('${field.ajaxFileSaveUrl}', picData).then(response => {
+                              console.log(response)
+                            }).catch(function (error) {
+                                console.log(error);
+                            });
+                        } 
+                          
+                    },\n 
+           ${fldName}_computedFileUploadParams() {
+             var refParams = this.params;
+             var ajaxFileUploadParams = refParams['ajaxFileSave'];
+             if (ajaxFileUploadParams){
+                    ajaxFileUploadParams.push({fieldName:'$fldName'})
+                }else{
+                    refParams['ajaxFileSave'] = [{fieldName:'$fldName'}];
+                } 
+           },\n                        
+       """)
+        return """this.$dataVariable = response['$key']?response['$key']:"$defaultValue\";
+                """
+    }
+
+    String getCreatedScript(DataframeVue dataframe, Map field, String divId, String fldId, String key){
+        String fldName = dataframe.getDataVariableForVue(field)
+        return """this.${fldName}_computedFileUploadParams();\n"""
+    }
+
+    private static String getDataFrameDomainAlias(String divId){
+        String[] fieldArr = divId.split("-")
+        if (fieldArr.size() > 2){
+            return fieldArr[1]
+        }
+    }
+}
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/RadioButtonWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/RadioButtonWidgetVue.groovy
index 12af0cf8..904c0b48 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/RadioButtonWidgetVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/RadioButtonWidgetVue.groovy
@@ -1,21 +1,10 @@
 package com.elintegro.erf.widget.vue
 
 import com.elintegro.erf.dataframe.Dataframe
-import com.elintegro.erf.dataframe.DataframeException
-import com.elintegro.erf.dataframe.DataframeInstance
-import com.elintegro.erf.dataframe.DbResult
-import com.elintegro.erf.dataframe.DomainClassInfo
-import com.elintegro.erf.dataframe.ParsedHql
-import com.elintegro.erf.dataframe.vue.DataframeConstants
 import com.elintegro.erf.dataframe.vue.DataframeVue
-import com.elintegro.erf.dataframe.vue.VueStore
-import grails.converters.JSON
-import groovy.json.JsonSlurper
-import org.apache.commons.lang.StringUtils
+import com.elintegro.erf.dataframe.vue.VueJsBuilder
 import org.apache.commons.lang.WordUtils
 
-import org.grails.web.json.JSONObject
-import org.json.simple.JSONArray
 import org.springframework.context.i18n.LocaleContextHolder
 
 class RadioButtonWidgetVue extends CollectionWidgetVue {
@@ -46,42 +35,41 @@ class RadioButtonWidgetVue extends CollectionWidgetVue {
         }
 
         Map domainFieldMap = dataframe.domainFieldMap
-        Map fldJSON = null
-        if(dataframe.isDatabaseField(field)){ //Put it to PERSISTERS section
-            Map persisters = domainFieldMap.get(Dataframe.PERSISTERS)
-            Map domainJSON = persisters.get(field.get(Dataframe.FIELD_PROP_DOMAIN_ALIAS))
-            fldJSON = domainJSON.get(field.get(Dataframe.FIELD_PROP_NAME))
-        }else{//Put it to TRANSITS section
-            Map transits = domainFieldMap.get(Dataframe.TRANSITS)
-            fldJSON = transits.get(field.get(Dataframe.FIELD_PROP_NAME))
-        }
+        Map fldJSON = getDomainFieldJsonMap(dataframe, field)
         fldJSON?.put("items", res)
-
         return domainFieldMap
     }
 
     private String getRadioButtons(DataframeVue dataframe, Map field, String fldName, String label){
         String onSelect = ""
+        VueJsBuilder store = dataframe.getVueJsBuilder()
         if(field.onSelect && field.onSelect.methodScript ){
             onSelect = " @change='${dataframe.dataframeName}_onSelect_$fldName' "
-            dataframe.getVueJsBuilder().addToMethodScript("""${dataframe.dataframeName}_onSelect_$fldName: function(_params){
+            store.addToMethodScript("""${dataframe.dataframeName}_onSelect_$fldName: function(_params){
                             $field.onSelect.methodScript
              },\n """)
         }
         boolean isReadOnly = dataframe.isReadOnly(field)
         String displayMember = field.displayMember?:'name'
         String valueMember = field.valueMember?:'id'
+        String radioGroupAttr = field.radioGroupAttr?:""
         String itemsStr = getFieldJSONItems(field)
         String modelString = getFieldJSONModelNameVue(field)
+        store.addToMethodScript("""${fldName}_selectedItem : function(selectedItem){
+                                                if(selectedItem instanceof Object){
+                                                     this.${modelString}=this.${itemsStr}.find(i => i.$valueMember === selectedItem.$valueMember);
+                                                }
+                                         },\n""")
         return """
 
-            <v-radio-group v-model="${modelString}">
+            <v-radio-group v-model="${modelString}" :value-comparator="${fldName}_selectedItem(${modelString})" $radioGroupAttr>
                     $label
                     <v-radio
                     v-for="(item,i) in $itemsStr"
                     :key="item.$valueMember"
                     :label = "item.$displayMember"
                     :value="item"
+                    ${getAttr(field)}
                     $onSelect
                     ></v-radio>
             </v-radio-group>
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/TabWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/TabWidgetVue.groovy
index e9e2d432..8c2d5f3b 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/TabWidgetVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/TabWidgetVue.groovy
@@ -23,6 +23,9 @@ class TabWidgetVue extends WidgetVue{
         StringBuilder tabHeaders = new StringBuilder()
         StringBuilder tabItems = new StringBuilder()
         boolean disableTabs = field.disableTabs?:false
+        String tabAttr = field.tabAttr?:""
+        String tabsAttr = field.tabsAttr?:""
+        String cardAttr = field.cardAttr?:""
         String initialTabView = ""
         boolean first = true
         for(String dfr: field.dataframes){
@@ -30,7 +33,7 @@ class TabWidgetVue extends WidgetVue{
             Dataframe tabDfr = Dataframe.getDataframeByName(dfr)
             String dfrName = tabDfr.dataframeName
             String dfrLabel = tabDfr.messageSource.getMessage(tabDfr.dataframeLabelCode, null, dfrName, LocaleContextHolder.getLocale())
-            tabHeaders.append(""" <v-tab style ="text-transform:capitalize; color:white;background-color:rgb(199, 210, 243);border-top-left-radius: 45%;border-top-right-radius: 45%;" ripple href="#$dfrName-tab-id" @click.stop='onTabClick("$dfrName")' :disabled='$disableTabs' >${dfrLabel}</v-tab>\n""")
+            tabHeaders.append(""" <v-tab  $tabAttr  href="#$dfrName-tab-id" @click.stop='onTabClick("$dfrName")' :disabled='$disableTabs' >${dfrLabel}</v-tab>\n""")
             tabItems.append(""" <v-tab-item value="$dfrName-tab-id" ><$dfrName :${dfrName}_prop='${dataframe.dataframeName}_prop'/></v-tab-item>\n""")
             dataframe.childDataframes.add(dfrName)
             if(first){
@@ -40,8 +43,8 @@ class TabWidgetVue extends WidgetVue{
         }
         addClickMethodToTab(dataframe, field)
         setDefaultTabView(dataframe, field, initialTabView)
-        String html = """<v-card round style ="overflow:hidden;" >
-                                  <v-tabs hide-slider v-model="state.${dataframe.dataframeName}_tab_model" active-class="blue darken-2">
+        String html = """<v-card  $cardAttr>
+                                  <v-tabs v-model="state.${dataframe.dataframeName}_tab_model" $tabsAttr >
                                       ${tabHeaders.toString()}
                                       ${getCloseButtonHtml(field)}
                                   </v-tabs>
@@ -59,8 +62,8 @@ class TabWidgetVue extends WidgetVue{
         boolean showCloseButton = field.showCloseButton?:false
         if(showCloseButton){
             return """
-                <v-flex class="text-right" style="align-self:center;"><v-tooltip bottom><v-btn icon target="_blank" slot="activator" @click.prevent="closeDataframe"><v-icon medium >close</v-icon>
-                                      </v-btn><span>Close</span></v-tooltip></v-flex>    
+                <v-col class="text-right" style="align-self:center;"><v-tooltip bottom><v-btn icon target="_blank" slot="activator" @click.prevent="closeDataframe"><v-icon medium >close</v-icon>
+                                      </v-btn><span>Close</span></v-tooltip></v-col>    
                 """
         }
 
@@ -71,9 +74,8 @@ class TabWidgetVue extends WidgetVue{
         String onClickScript = fieldProps.onClickScript?:''
         dataframe.getVueJsBuilder().addToMethodScript("""
                 onTabClick: function(val){
-                    console.log(this.val);
                     $onClickScript
-              },
+              },\n
         """)
     }
 
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/TimeWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/TimeWidgetVue.groovy
index 7529ccbc..5e1e9052 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/TimeWidgetVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/TimeWidgetVue.groovy
@@ -1,6 +1,8 @@
 package com.elintegro.erf.widget.vue
 
+import com.elintegro.erf.dataframe.DataframeInstance
 import com.elintegro.erf.dataframe.vue.DataframeVue
+import org.grails.web.json.JSONObject
 import org.springframework.context.i18n.LocaleContextHolder
 
 /**
@@ -18,7 +20,8 @@ class TimeWidgetVue extends WidgetVue{
         String dateFormatPlaceholder = getMessageSource().getMessage("date.format.hint", null, "date.format.hint", LocaleContextHolder.getLocale())
         String menuAttr = field.menuAttr?:""
 
-        String modelString = getModelString(dataframe, field)
+//        String modelString = getModelString(dataframe, field)
+        String modelString = getFieldJSONModelNameVue(field)
         return """
                     <v-dialog
                                         ref="${fldName}_dialog"
@@ -31,10 +34,11 @@ class TimeWidgetVue extends WidgetVue{
                                     <template v-slot:activator="{ on }">
                                         <v-text-field
                                                 v-model="$modelString"
-                                                :label="${getLabel(field)}"
+                                                label="${getLabel(field)}"
                                                 prepend-icon="access_time"
                                                 readonly
                                                 v-on="on"
+                                                ${fillProps(field)}
                                         ></v-text-field>
                                     </template>
                                     <v-time-picker
@@ -57,4 +61,18 @@ class TimeWidgetVue extends WidgetVue{
         String dataVariable = dataframe.getDataVariableForVue(field)
         return """${dataVariable}_dialog:false,\n"""
     }
+
+    boolean setPersistedValueToResponse(JSONObject jData, def value, String domainAlias, String fieldName, Map additionalDataRequestParamMap, DataframeInstance dfInstance, Object sessionHibernate, Map fieldProps){
+        if(value.hour && value.minute)
+            jData?.persisters?."${domainAlias}"."${fieldName}".value = value.hour + ":"+value.minute
+        else
+            super.setPersistedValueToResponse(jData, value, domainAlias, fieldName, additionalDataRequestParamMap, dfInstance, sessionHibernate, fieldProps)
+    }
+
+    boolean setTransientValueToResponse(JSONObject jData, def value, String domainAlias, String fieldName, Map additionalDataRequestParamMap, DataframeInstance dfInstance, Object sessionHibernate, Map fieldProps){
+        if(value.hour && value.minute)
+            jData?.persisters?."${domainAlias}"."${fieldName}".value = value.hour + ":"+value.minute
+        else
+            super.setTransientValueToResponse(jData, value, domainAlias, fieldName, additionalDataRequestParamMap, dfInstance, sessionHibernate, fieldProps)
+    }
 }
\ No newline at end of file
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/TranslateWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/TranslateWidgetVue.groovy
new file mode 100644
index 00000000..fe02a375
--- /dev/null
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/TranslateWidgetVue.groovy
@@ -0,0 +1,216 @@
+package com.elintegro.erf.widget.vue
+
+import com.elintegro.erf.dataframe.vue.DataframeVue
+import com.elintegro.erf.dataframe.vue.VueStore
+import org.apache.commons.lang.WordUtils
+import org.springframework.context.i18n.LocaleContextHolder
+/**
+ * Use state management for translation
+ * Note: Please use OnSelect method of combobox to assign sourceLanguage, sourceText, targetLanguage
+ *       to the state of the respective dataframe you are using and also you can do various other custom things yourself here
+ *Note: For translation button works by itself i.e it brings translated data back to you
+ *      but you need to provide doAfterTranslation script which means what to do after translation.
+ *      Also here you can provide your own custom url for translating the data to you.
+ *Note: If you want your own script for what happens in translation then please use translateScript section in descriptor.
+ *Note: For Undo functionality provide your own script in undoScript  section in descriptor
+ *     **/
+class TranslateWidgetVue extends CollectionWidgetVue {
+
+    public String translateUrl = "vendor/translateWithGoogle"
+    @Override
+    String getHtml(DataframeVue dataframe, Map field) {
+        String fldName = getFieldName(dataframe, field)
+        def fldNameDefault = WordUtils.capitalizeFully(fldName);
+        String labelCombobox = field.labelCombobox?:fldName
+        String translateButtonLabel = field.translateButtonLabel?:fldName
+        String undoButtonLabel = field.undoButtonLabel?:fldName
+        String comboboxLabel = getLabels(labelCombobox,fldNameDefault)
+        String translateLabel = getLabels(translateButtonLabel,fldNameDefault)
+        String undoLabel = getLabels(undoButtonLabel,fldNameDefault)
+        String html = getHtmlStructure(dataframe, field, fldName, comboboxLabel, translateLabel,undoLabel)
+        return html
+    }
+
+    Map getStateDataVariablesMap(DataframeVue dataframe, Map field){
+        Map result = generateInitialData(dataframe, field)
+
+        String valueMember = field.valueMember?:"id"
+        List keys=[]
+        List res
+        Map selMap = [:]
+        selMap.put(valueMember,'')
+        if(result && result.size() > 0){
+            keys = result.keys
+            res = result.result
+            selMap = result.selectedMap
+        }else{
+            log.error("This data is empty, please check data is provided in underliing database or enum class or other datasource. Check descriptor of Dataframe ${dataframe.dataframeName}")
+        }
+
+        Map domainFieldMap = dataframe.domainFieldMap
+        Map fldJSON = getDomainFieldJsonMap(dataframe, field)
+        fldJSON?.put("items", res)
+
+        return domainFieldMap
+    }
+
+    private String getHtmlStructure(DataframeVue dataframe, Map field, String fldName,String comboboxLabel, String translateLabel,String undoLabel){
+        String colSpacing = field.colSpacing?:"pa-0"
+        boolean showTranslateButton = field.showTranslateButton?:false
+        VueStore store = dataframe.getVueJsBuilder().getVueStore()
+        store.addToState("${dataframe.dataframeName}",[
+                showTranslateButton:false,
+                showUndoButton:false,
+                sourceLanguage:'',
+                targetLanguage:'',
+                sourceText:'',
+                translatedText:'',
+        ])
+        //For Combobox
+        String onSelect = ""
+        if(field.onSelect && field.onSelect.methodScript ){
+            onSelect = " @change='${dataframe.dataframeName}_onSelect_$fldName' "
+            dataframe.getVueJsBuilder().addToMethodScript("""${dataframe.dataframeName}_onSelect_$fldName: function(_params){
+                            $field.onSelect.methodScript
+                            this.state.${dataframe.dataframeName}.showTranslateButton = $showTranslateButton;
+             },\n """)
+        }
+        boolean isReadOnly = dataframe.isReadOnly(field)
+        String typeString = ""
+        if(!isSearchable(field)){
+            typeString = """type="button" """
+        }
+        String multiple = field.multiple?"multiple":''
+        String displayMember = field.displayMember?:'name'
+        String valueMember = field.valueMember?:'id'
+        String itemsStr = getFieldJSONItems(field)
+        String modelString = getFieldJSONModelNameVue(field)
+
+        //For Buttons
+        String refHtml = ""
+        def onButtonClick = field.onButtonClick
+        if(onButtonClick && field.get('onButtonClick')){
+            if(onButtonClick.refDataframe){
+                refHtml = getRefHtml(onButtonClick as Map, dataframe)
+            }
+        }
+        addMethodsToTranslateScript(dataframe, field)
+        addMethodsToUndoScript(dataframe, field)
+
+        return """
+            <v-row class='ma-0'>
+                <v-col cols='6' class='$colSpacing'>
+                    <v-combobox
+                          v-model = "${modelString}"  
+                          :items="${itemsStr}"
+                          ${validate(field)?":rules = '${fldName}_rule'":""}
+                          label="$comboboxLabel"
+                          ${isDisabled(dataframe, field)?":disabled=true":""}
+                          item-text="${displayMember}"
+                          item-value="${valueMember}"
+                          $multiple
+                          hide-no-data
+                          hide-selected
+                          ${isReadOnly?"readonly":''}
+                          ${toolTip(field)}
+                          $onSelect
+                          $typeString
+                          ${getAttrForCombobox(field)}
+                          ${fillProps(field)}
+                    ></v-combobox>
+                </v-col>
+                <v-col cols='6' class='$colSpacing'>
+                    $refHtml<v-btn ${getAttrForTranslateButton(field)} @click.stop='${fldName}_translate_method' v-show='state.${dataframe.dataframeName}.showTranslateButton'>${translateLabel}</v-btn>
+                </v-col>
+            </v-row>
+            <v-row class='ma-0'>
+                <v-col cols='6' class='$colSpacing'>
+                    <v-btn ${getAttrForUndoButton(field)} @click.stop='${fldName}_undo_method' v-show='state.${dataframe.dataframeName}.showUndoButton'>${undoLabel}</v-btn>
+                </v-col>
+            </v-row>
+        """
+    }
+    protected String getAttrForCombobox(Map field){
+        return field.getAttrForCombobox?:""
+    }
+    protected String getAttrForTranslateButton(Map field){
+        return field.getAttrForTranslateButton?:""
+    }
+    protected String getAttrForUndoButton(Map field){
+        return field.getAttrForUndoButton?:""
+    }
+    private String getRefHtml(Map onButtonClick, DataframeVue dataframe){
+        StringBuilder sb = new StringBuilder()
+        DataframeVue refDataframe = DataframeVue.getDataframeBeanFromReference(onButtonClick.refDataframe)
+        String refDataframeName = refDataframe.dataframeName
+        String dialogAttrs = onButtonClick.dialogAttrs?:""
+        VueStore store = dataframe.getVueJsBuilder().getVueStore()
+        store.addToDataframeVisibilityMap("${refDataframeName} : false,\n")
+        dataframe.getVueJsBuilder().addToDataScript(" ${refDataframeName}_data:{key:'', refreshGrid:true},\n")
+        if(onButtonClick.showAsDialog){
+            sb.append("""<v-dialog v-model="visibility.${refDataframeName}" ${dialogAttrs}><v-card>""")
+            sb.append(refDataframe.getComponentName("resetForm=true "))
+            sb.append("""</v-card></v-dialog>""")
+        } else {
+            sb.append(refDataframe.getComponentName("resetForm=true"))
+        }
+
+        return sb.toString()
+    }
+    private void addMethodsToTranslateScript(DataframeVue dataframe, Map fieldProps){
+        String fldName = getFieldName(dataframe, fieldProps)
+        String customTranslatedScript = translatedScript(dataframe, fieldProps)
+        String translateScript = fieldProps.translateScript?:customTranslatedScript
+        dataframe.getVueJsBuilder().addToMethodScript("""  
+                               ${fldName}_translate_method: function(){
+                                        $translateScript
+                               },\n""")
+    }
+    private void addMethodsToUndoScript(DataframeVue dataframe, Map fieldProps){
+        String fldName = getFieldName(dataframe, fieldProps)
+        String undoScript = fieldProps.undoScript?:"console.log('please put script for undo function manually');"
+        dataframe.getVueJsBuilder().addToMethodScript("""  
+                               ${fldName}_undo_method: function(){
+                                        $undoScript
+                               },\n""")
+    }
+    String getVueDataVariable(DataframeVue dataframe, Map field) {
+        String dataVariable = dataframe.getDataVariableForVue(field)
+        return """ ${dataVariable}_showTranslateButton:false,\n 
+                   ${dataVariable}_showUndoButton:false,\n 
+               """
+    }
+    def getLabels(String label, def fldNameDefault){
+        String labels =  getMessageSource().getMessage(label, null, fldNameDefault, LocaleContextHolder.getLocale())
+        return labels
+    }
+    private def translatedScript(DataframeVue dataframe, Map field) {
+        if (field?.translateUrl){
+            translateUrl = field.translateUrl
+        }
+        String customDoAfterTranslation = """
+                                                self.state.${dataframe.dataframeName}.translatedText = response.data.translatedText;
+                                                console.log(response.data);\n 
+                                                this.state.${dataframe.dataframeName}.showUndoButton = true;\n
+                                          """
+        String doAfterTranslation = field.doAfterTranslation?:customDoAfterTranslation
+
+        return """
+            let self = this;
+            let params = this.state;
+            params['langFrom'] = this.state.${dataframe.dataframeName}.sourceLanguage;
+            params['text'] = this.state.${dataframe.dataframeName}.sourceText;
+            params['langTo'] = this.state.${dataframe.dataframeName}.targetLanguage;
+            excon.callApi('$translateUrl', 'post', params).then(function(responseData){
+                let response = responseData.data;
+                if(response.success){
+                    self.state.${dataframe.dataframeName}.translatedText = response.data.translatedText;
+                    $doAfterTranslation
+                }
+                else{
+                    excon.showAlertMessage(response);
+                }
+            });
+            """
+    }
+}
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/TranslationWidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/TranslationWidgetVue.groovy
new file mode 100644
index 00000000..a3044b0c
--- /dev/null
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/TranslationWidgetVue.groovy
@@ -0,0 +1,101 @@
+/* Elintegro Dataframe is a framework designed to accelerate the process of full-stack application development.
+We invite you to join the community of developers making it even more powerful!
+For more information please visit  https://www.elintegro.com
+
+Copyright © 2007-2019  Elinegro Inc. Eugene Lipkovich, Shai Lipkovich
+
+This program is under the terms of the GNU General Public License as published by the Free Software Foundation, version 3.
+See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+You are not required to accept this License, since you have not signed it. However, nothing else grants you permission to modify or distribute the Program or its derivative works.
+These actions are prohibited by law if you do not accept this License. Therefore, by modifying or distributing the Program or any work based on the Program, you indicate your acceptance of this License to do so, and all its terms and conditions for copying, distributing or modifying the Program or works based on it. */
+
+
+package com.elintegro.erf.widget.vue
+
+import com.elintegro.erf.dataframe.DataframeException
+import com.elintegro.erf.dataframe.vue.DataframeVue
+import org.springframework.context.i18n.LocaleContextHolder
+
+class TranslationWidgetVue extends WidgetVue {
+
+    private final static String translator = "translator"
+
+    @Override
+    String getHtml(DataframeVue dataframe, Map field) {
+        if(field.hide && field.hide == true){
+            return ""
+        }
+        String fldName = getFieldName(dataframe, field)
+        boolean isReadOnly = dataframe.isReadOnly(field)
+        String autoComplete = field.autoComplete?:'off'
+        String clearable = field.clearable?"clearable":""
+        String placeholder = field.placeholder?:""
+        String iconColor = field.iconColor?:"white"
+        String fieldType = "textarea" //textarea||text
+        if (field?.type?.equals("text")){
+            fieldType = "text-field"
+        }
+        String translateTextCode = field?.translateTextCode?:"translator.widget.text"
+        addMethodsToScript(dataframe, field)
+        String translateText = getMessageSource().getMessage(translateTextCode, null, fldName, LocaleContextHolder.getLocale())
+        String floatingIcon = """<template v-slot:append>
+                <v-fade-transition leave-absolute>
+                  <v-btn color="$iconColor" class="iconColorTranslate" fab dark small absolute bottom right
+                    v-tooltip="{content: '$translateText'}"
+                    @click.stop='${fldName}_method'
+                    >
+                   <v-icon>translate</v-icon>
+                  </v-btn>
+                </v-fade-transition>
+              </template>"""
+        String html = """<v-$fieldType
+            label="${getLabel(field)}"
+            v-model = "${getFieldJSONModelNameVue(field)}"
+            ${validate(field)?":rules = '${fldName}_rule'":""}
+            ${isDisabled(dataframe, field)?":disabled = true":""}
+            ${isReadOnly?"readonly":''}
+            ${toolTip(field)}
+            style="width:${getWidth(field)}; height:${getHeight(field)};"
+            autocomplete = $autoComplete
+            placeholder = "$placeholder"
+            $clearable
+            auto-grow
+            ${getAttr(field)}
+            ${fillProps(field)}
+          >$floatingIcon</v-$fieldType>
+            """
+        if(field?.layout){
+            html = applyLayout(dataframe, field, html)
+        }
+        return html
+    }
+
+    Map getStateDataVariablesMap(DataframeVue dataframe, Map field){
+        Map domainFieldMap = dataframe.domainFieldMap
+        Map fldJSON = getDomainFieldJsonMap(dataframe, field)
+        if (fldJSON){
+            fldJSON.put(translator, ["entityId":null, "fieldName":"", "entityName":""])
+        }
+        return domainFieldMap
+    }
+
+    private void addMethodsToScript(DataframeVue dataframe, Map fieldProps){
+        String fldName = getFieldName(dataframe, fieldProps)
+        String jsonFieldName = getFieldJSONNameVue(fieldProps)
+        Map onClick = fieldProps.onClick
+        if (!onClick){
+            throw new DataframeException("Provide on click data in the format: onClick:['refDataframe':ref('Dataframe Name'), 'script':'optional']")
+        }
+        String script = ""
+        if(onClick && onClick.refDataframe){
+            DataframeVue refDataframe = DataframeVue.getDataframeBeanFromReference(onClick.refDataframe)
+            script = onClick?.script?:"""excon.refreshTranslatorField('${refDataframe.dataframeName}', this.${jsonFieldName}.$translator);"""
+        }
+        dataframe.getVueJsBuilder().addToMethodScript("""  
+                               ${fldName}_method: function(){
+                                        $script
+                               },\n""")
+    }
+
+}
diff --git a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/WidgetVue.groovy b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/WidgetVue.groovy
index c6b1b3c6..87b4c3bd 100644
--- a/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/WidgetVue.groovy
+++ b/dataframe/src/main/groovy/com/elintegro/erf/widget/vue/WidgetVue.groovy
@@ -45,6 +45,19 @@ abstract class WidgetVue extends Widget<DataframeVue>{
     public static final String excon = "excon"
 
     //This assigns a new value and returns true if new value was different then the old one
+    public String fillProps(Map field){
+        String label = field.label
+        String placeholder = field.placeholder?:"Enter your ${field.name}."
+        String autoComplete = field.autoComplete ?: 'off'
+        String boxdesign = field.boxdesign?:"outlined"
+        String bgColor = field.bgColor?:"#EBF9FF !important"
+        String color = field.color?:"#2AB6F6"
+        return """
+               $boxdesign
+                background-color='$bgColor' color='$color'
+"""
+    }
+
     @Override
     boolean populateDomainInstanceValue(Dataframe dataframe, def domainInstance, DomainClassInfo domainMetaData, String fieldName, Map field, def inputValue){
         if(inputValue.value == null || inputValue.value == "") return true
diff --git a/dataframe/src/main/groovy/com/elintegro/utils/FileUtility.groovy b/dataframe/src/main/groovy/com/elintegro/utils/FileUtility.groovy
new file mode 100644
index 00000000..8a515372
--- /dev/null
+++ b/dataframe/src/main/groovy/com/elintegro/utils/FileUtility.groovy
@@ -0,0 +1,87 @@
+package com.elintegro.utils
+
+import org.grails.io.support.SpringIOUtils
+
+import java.util.zip.ZipEntry
+import java.util.zip.ZipOutputStream
+
+class FileUtility {
+
+
+    public static String getFileExtension(String fileName) {
+        int lastIndexOf = fileName.lastIndexOf(".")
+        if (lastIndexOf == -1) {
+            return "" // empty extension
+        }
+        return fileName.substring(lastIndexOf).toLowerCase()
+    }
+    public static boolean deleteTempFile(tempFile){
+        if (tempFile && tempFile.exists()){
+            tempFile.delete()
+            return true
+        } else{
+            return false
+        }
+    }
+
+    public static boolean deleteTempFile(List<File> files){
+        files.each {
+            deleteTempFile(it)
+        }
+    }
+
+    public static void fileCopy(File input, File output){
+        SpringIOUtils.copy(input, output)
+    }
+
+    public static void createZipFile(String inputDir, String zipFilePath){
+        ZipOutputStream zipFile = new ZipOutputStream(new FileOutputStream(zipFilePath))
+        new File(inputDir).eachFile() { file ->
+            if (file.isFile()){
+                zipFile.putNextEntry(new ZipEntry(file.name))
+                def buffer = new byte[file.size()]
+                file.withInputStream {
+                    zipFile.write(buffer, 0, it.read(buffer))
+                }
+                zipFile.closeEntry()
+            }
+        }
+        zipFile.close()
+    }
+
+    public static boolean createDir(List<String> paths){
+        paths.each {path ->
+            createDir(path)
+        }
+        return true
+    }
+
+    public static boolean createDir(String path){
+        File dir = new File(path)
+        if (!dir.exists()){
+            return dir.mkdirs()
+        }
+    }
+
+    public static String getFileType(String imageName){
+        String ext = getFileExtension(imageName)
+        String fileType = ext.replace(".", '')
+        return fileType
+    }
+
+    public static String getFileNameWithoutExtension(String name) {
+        String fileName = name.replaceFirst("[.][^.]+\$", "")
+        return fileName
+
+    }
+
+    public static appendToFilename(String filename, String stringToCon, String delimiter = ""){
+        int dotIndex = filename.lastIndexOf(".")
+        return filename.substring(0, dotIndex) + delimiter+ stringToCon + filename.substring(dotIndex)
+    }
+
+    public static String getFileName(File file){
+        return file.getName()
+    }
+
+}
diff --git a/elintegrostartapp/.asscache b/elintegrostartapp/.asscache
deleted file mode 100644
index 4cc4f8b6..00000000
Binary files a/elintegrostartapp/.asscache and /dev/null differ
diff --git a/elintegrostartapp/grails-app/assets/stylesheets/erf/homePageLayout.css b/elintegrostartapp/grails-app/assets/stylesheets/erf/homePageLayout.css
index 3ef304c4..1d619642 100644
--- a/elintegrostartapp/grails-app/assets/stylesheets/erf/homePageLayout.css
+++ b/elintegrostartapp/grails-app/assets/stylesheets/erf/homePageLayout.css
@@ -600,3 +600,18 @@ background-color: #007bff;
 .QuotesPadding .v-window__container .v-window__prev {
     left: 47px;
 }
+.about-us-menu .v-card__actions .row div,
+.elintegro-sub-menu .v-card__actions .row div{
+    padding: 8px !important;
+    display: flex;
+    flex: 1 1 auto;
+    max-width: 100%;
+}
+.new-employee-tab-attr,
+.login-tab-attr{
+    text-transform:capitalize !important;
+    color:white !important;
+    background-color:rgb(199, 210, 243) !important;
+    border-top-left-radius: 45% !important;
+    border-top-right-radius: 45% !important;
+}
\ No newline at end of file
diff --git a/elintegrostartapp/grails-app/conf/application.groovy b/elintegrostartapp/grails-app/conf/application.groovy
index c2ed9feb..5652dbbd 100644
--- a/elintegrostartapp/grails-app/conf/application.groovy
+++ b/elintegrostartapp/grails-app/conf/application.groovy
@@ -97,7 +97,7 @@ grails.gorm.default.constraints = {
 
 grails.gorm.failOnError = true
 
-vue.flexGridValues.Default = ['xs12', 'sm12', 'md4', 'lg4', 'xl4']
+vue.cssGridValues.Default = ['xs':'12', 'sm':'12', 'md':'4', 'lg':'4', 'xl':'4']
 
 
 
@@ -705,3 +705,5 @@ quizzableUrl = "https://quizzable.elintegro.com/"
 
 application.languages = """'fr','en','es'"""
 
+image.maxSize = 2 //i.e 2 MB
+
diff --git a/elintegrostartapp/grails-app/conf/spring/globech/applicationManagement/resourcesApplicationForm.groovy b/elintegrostartapp/grails-app/conf/spring/globech/applicationManagement/resourcesApplicationForm.groovy
index 8762fbfc..226a09b8 100644
--- a/elintegrostartapp/grails-app/conf/spring/globech/applicationManagement/resourcesApplicationForm.groovy
+++ b/elintegrostartapp/grails-app/conf/spring/globech/applicationManagement/resourcesApplicationForm.groovy
@@ -32,7 +32,7 @@ beans {
 
         ajaxSaveUrl = "applicationForm/save"
         //These are values, that overrides the default ones
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         deleteButton = false
         wrapInForm=true
         route = true
@@ -50,32 +50,32 @@ beans {
         addFieldDef =[
                 /*"app.referredByPerson":[widget: "InputWidgetVue"
                                  , name:"referredByPerson",
-                                 "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                                 "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "app.referredByOrganisation":[widget: "InputWidgetVue"
                                         , name:"referredByOrganisation",
-                                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                                       "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "app.signedBy":[widget: "InputWidgetVue"
                                         , name:"signedBy",
-                                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "app.applicationDate":[widget: "DateWidgetVue"
                                         , name:"applicationDate",
-                                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
 */
                 "app.applicant":[
                         widget: "DataframeWidgetVue"
                         , name:"applicant"
                         , valueMember:"applicant",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"dataframe":ref("vueContactDataframe")
                 ]
                 /*,"app.medicalRecord":[widget: "DataframeWidgetVue"
                                          , name:"medicalRecord"
                                          , valueMember: "medicalRecord",
-                                         "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                                         "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                                          ,"dataframe":ref("vueMedicalRecordDataframe")
                  ],
                  "address":
@@ -84,7 +84,7 @@ beans {
                                 dataframe: ref("vueAddressDataframe"),
                                 "valueMember" : "address",
                                 "name": "address",
-                                "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                                "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
 
                         ]
 */
@@ -92,7 +92,7 @@ beans {
 
         /*doAfterRefresh = """var currentlocation = this.location.href;
                              this.location.href = currentlocation + 'vueuserprofiledataframe'; """*/
-//        dataframeButtons = [ previous: [name:"previous", type: "button", script:"this.\$store.state.vueApplicationFormDataframe.vueApplicationFormDataframe_tab_model  = 'vueMedicalRecordDataframe-tab-id'", url: "", "flexGridValues":['xs12', 'sm12', 'md6', 'lg6', 'xl6']] ]
+//        dataframeButtons = [ previous: [name:"previous", type: "button", script:"this.\$store.state.vueApplicationFormDataframe.vueApplicationFormDataframe_tab_model  = 'vueMedicalRecordDataframe-tab-id'", url: "", "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']] ]
         currentFrameLayout = ref("vueApplicationFormDataframeLayout")
     }
 
@@ -112,7 +112,7 @@ beans {
         tab = true
 //        isGlobal = true
 //        createStore = true
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
         doBeforeSave = "params['vueMedicalRecordDataframe-record-person'] = excon.getFromStore('vueContactDataframe', 'key'); \nparams['applicationId'] = excon.getFromStore('vueApplicationFormDataframe', 'key');"
         doAfterSave = "excon.saveToStore('vueApplicationFormDataframe','vueApplicationFormDataframe_tab_model', 'vueMedicationsGridDataframe-tab-id');\n"
 
@@ -123,7 +123,7 @@ beans {
                         widget     : "FKWidgetVue"
                         , name     :"person"
                         , valueMember:"person",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"parent"  :ref("vueContactDataframe")
                 ]
         ]
@@ -131,7 +131,7 @@ beans {
         /*doAfterRefresh = """var currentlocation = this.location.href;
                              this.location.href = currentlocation + 'vueuserprofiledataframe'; """*/
         dataframeButtons = [ previous: [name:"previous", type: "button", script:"""excon.saveToStore("vueApplicationFormDataframe", "vueApplicationFormDataframe_tab_model","vueAddressDataframe-tab-id");
-                                                                                \n""",flexGridValues: ['xs12', 'sm12', 'md6', 'lg6', 'xl6'], url: ""] ]
+                                                                                \n""","cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6'], url: ""] ]
 
         currentFrameLayout = ref("formDataframeLayout")
     }
@@ -155,13 +155,13 @@ beans {
                         widget          : "DataframeWidgetVue"
                         ,name           : "medication"
                         ,valueMember    : "id"
-                        ,"flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"dataframe"    : ref("vueMedicationsDataframe")
                 ],
 
                 "prescribedMed.dosage"     : [
                         name           : "dosage",
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
 
                 "prescribedMed.frequencyUnit"  :[
@@ -169,24 +169,24 @@ beans {
                         ,"name"         : "frequencyUnit"
                         ,"hql"          : "select pf.id as id, pf.name as name from FrequencyUnit as pf"
 
-                        ,"flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                         ,"displayMember": "name"
                         ,"valueMember"  : "id"
                 ],
 
                 "prescribedMed.frequency"     : [
                         name           : "frequency",
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "prescribedMed.start"          : [
                         widget          : "DateWidgetVue"
                         ,name           : "start",
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "prescribedMed.expiration"     : [
                         widget          : "DateWidgetVue"
                         ,name           : "expiration",
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ]
 
         ]
@@ -205,7 +205,7 @@ beans {
 //        doAfterSave = "vueMedicationsGridDataframeVar.\$router.push(\"/\");this.location.reload();excon.saveToStore('vueApplicationFormDataframe','vueApplicationFormDataframe_tab_model', 'vueAddressDataframe-tab-id');\n"
         saveButton = false
         initOnPageLoad = false
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
         doBeforeRefresh = """params['id'] = excon.getFromStore('vueMedicalRecordDataframe', 'key');"""
         doAfterSave = "excon.saveToStore('vuePrescribedMedicationsDataframe_display', false);\n"
         childDataframes = ["vuePrescribedMedicationsDataframe"]
@@ -234,7 +234,7 @@ beans {
                                                                   from PrescribedMedication as medication, MedicalRecord record where record.id=:id"""
                         ,gridWidth  :420
                         ,search     :false
-                        ,"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "addMedication":[
                         "widget"     : "ButtonWidgetVue",
@@ -246,8 +246,8 @@ beans {
         ]
 
         dataframeButtons = [ previous: [name:"previous", type: "button", script:"""excon.saveToStore("vueApplicationFormDataframe", "vueApplicationFormDataframe_tab_model","vueMedicalRecordDataframe-tab-id");
-                                                                                \n""", flexGridValues: ['xs12', 'sm12', 'md6', 'lg6', 'xl6'],url: ""] ,
-                             Submit:[name:"submit", type: "button", classNames: "right", flexGridValues: ['xs12', 'sm12', 'md6', 'lg6', 'xl6'],script: "vueMedicationsGridDataframeVar.\$router.push('/');window.location.reload();"]
+                                                                                \n""", "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6'],url: ""] ,
+                             Submit:[name:"submit", type: "button", classNames: "right", "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6'],script: "vueMedicationsGridDataframeVar.\$router.push('/');window.location.reload();"]
         ]
         currentFrameLayout = ref("formDataframeLayout")
     }
@@ -280,25 +280,25 @@ beans {
 
                 "person.email":[
                         "widget"     : "EmailWidgetVue",
-                        "flexGridValues":['xs8', 'sm8', 'md8', 'lg8', 'xl8']
+                        "cssGridValues":['xs':'8', 'sm':'8', 'md':'8', 'lg':'8', 'xl':'8']
                 ],
                 "person.phone":[
-                        "flexGridValues":['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
 
                 "person.firstName":[
                         "validate":["rule":["v => !!v || 'FirstName is required'", "v => (v && v.length <= 20) || 'FirstName must be less than 20'"]],
-                        "flexGridValues":['xs6', 'sm6', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "person.lastName":[
                         "validate":["rule":["v => !!v || 'LastName is required'", "v => (v && v.length <= 20) || 'LastName must be less than 20'"]],
-                        "flexGridValues":['xs6', 'sm6', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "person.mainPicture":[
                         "widget"      : "PictureDisplayWidgetVue",
                         "defaultValue":"default_profile.jpg",
                         "aspectRatio" :"2.5",
-                        "flexGridValues":['xs12', 'sm6', 'md6', 'lg4', 'xl4'],
+                        "cssGridValues":['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6'],
                         "width"       :200,
                         "height"      :200]
         ]
@@ -324,7 +324,7 @@ beans {
 
         childDataframes =["vueMapWidgetDataframe"]
         ajaxSaveUrl = "applicationForm/saveAddress"
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
         //These are default values, they are here to demonstrate how to overwrite it with different button combination, if required
         deleteButton = false
         insertButton=false
@@ -334,13 +334,13 @@ beans {
         addFieldDef = [
                 "address.addressLine": [
                         "widget"   : "InputWidgetVue",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
 
                 ],
 
                 "address.addressLine2": [
                         "widget"   : "InputWidgetVue",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
 
                 ],
                 "address.postalZip": [
@@ -352,7 +352,7 @@ beans {
                         "insertAfter":"address.addressLine",
                         script       : """ this.updatedAddressValue = this.vueAddressDataframe_address_addressLine;""",
                         "attr"       :"round right",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                 ],
                 "googleMap": [
                         "widget"      : "DataframeWidgetVue",
@@ -362,12 +362,12 @@ beans {
                         passValueAsProp : true,
                         "showInMap"   :true,
                         "name"        : "googleMap",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                         "height"      :'500px'
 
                 ]
         ]
-        dataframeButtons = [ previous: [name:"previous", type: "button", script:"""Vue.set(this.\$store.state.vueApplicationFormDataframe, "vueApplicationFormDataframe_tab_model","vueApplicationFormDataframe-tab-id");\n""", flexGridValues: ['xs12', 'sm12', 'md6', 'lg6', 'xl6'], url: ""] ]
+        dataframeButtons = [ previous: [name:"previous", type: "button", script:"""Vue.set(this.\$store.state.vueApplicationFormDataframe, "vueApplicationFormDataframe_tab_model","vueApplicationFormDataframe-tab-id");\n""","cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6'], url: ""] ]
 
         currentFrameLayout = ref("addressDataframeLayout")
 
@@ -385,7 +385,7 @@ beans {
                         "widget"   : "MapWidgetVue",
                         "showInMap":true,
                         "name"     : "googleMap",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                         "height"   :'500px'
 
                 ]
diff --git a/elintegrostartapp/grails-app/conf/spring/globech/applicationManagement/resourcesApplicationManagement.groovy b/elintegrostartapp/grails-app/conf/spring/globech/applicationManagement/resourcesApplicationManagement.groovy
index 10e8632a..05929c7d 100644
--- a/elintegrostartapp/grails-app/conf/spring/globech/applicationManagement/resourcesApplicationManagement.groovy
+++ b/elintegrostartapp/grails-app/conf/spring/globech/applicationManagement/resourcesApplicationManagement.groovy
@@ -79,7 +79,7 @@ beans {
                         , hql             : """select  apcant.firstName as Firstname, apcant.lastName as Lastname,status.name as Status, app.id as Id from Application app inner join app.applicant apcant inner join app.status status"""
                         , gridWidth       : 420
                         , showGridSearch  : true
-                        , "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        , "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ]
         ]
 
@@ -111,20 +111,20 @@ beans {
                 "app.createTime"     : [
                         name            : "createTime",
                         attr            : " left",
-                        "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "app.applicant"    : [
                         widget          : "DataframeWidgetVue"
                         , name          : "applicant"
                         , valueMember   : "id",
-                        "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         , "dataframe"   : ref("vueContactDetailDataframe")
                 ],
                 "app.medicalRecord": [
                         widget          : "DataframeWidgetVue"
                         , name          : "medicalRecord"
                         , valueMember   : "id",
-                        "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         , "dataframe"   : ref("vueMedicalRecordDetailDataframe")
                 ]
 
@@ -133,7 +133,7 @@ beans {
 
         /*doAfterRefresh = """var currentlocation = this.location.href;
                              this.location.href = currentlocation + 'vueuserprofiledataframe'; """*/
-//        dataframeButtons = [ previous: [name:"previous", type: "button", script:"this.\$store.state.vueApplicationFormDataframe.vueApplicationFormDataframe_tab_model  = 'vueMedicalRecordDataframe-tab-id'", url: "", "flexGridValues":['xs12', 'sm12', 'md6', 'lg6', 'xl6']] ]
+//        dataframeButtons = [ previous: [name:"previous", type: "button", script:"this.\$store.state.vueApplicationFormDataframe.vueApplicationFormDataframe_tab_model  = 'vueMedicalRecordDataframe-tab-id'", url: "", "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']] ]
         currentFrameLayout = ref("vueFormDetailDataframeLayout")
     }
 
@@ -158,13 +158,13 @@ beans {
         addFieldDef = [
                 "address.addressLine": [
                         "widget"   : "InputWidgetVue",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValue":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
 
                 ],
 
                 "address.addressLine2": [
                         "widget"   : "InputWidgetVue",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
 
                 ],
                 "address.postalZip": [
@@ -181,7 +181,7 @@ beans {
                         passValueAsProp : true,
                         "showInMap"   :true,
                         "name"        : "googleMap",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                         "height"      :'500px'
 
                 ]*/
@@ -201,7 +201,7 @@ beans {
         initOnPageLoad = true
         //These are values, that overrides the default ones
         wrapInForm = true
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         doBeforeRefresh = "params['recordId'] = excon.getFromStore('vueMedicalRecordDetailDataframe', 'key');"
         saveButton = false
         addFieldDef = [:
@@ -215,7 +215,7 @@ beans {
                                                                          from MedicalRecord record inner join record.medications medication where record.id=:id"""
                                               , gridWidth       : 420
                                               , search          : false
-                                              , "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                                              , "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                        ]*/
         ]
 
@@ -264,7 +264,7 @@ beans {
                                                                   from MedicalRecord record inner join record.medications medication where record.id=:id"""
                         , gridWidth       : 420
                         , search          : false
-                        , "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        , "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ]
 
         ]
@@ -296,13 +296,13 @@ beans {
                         widget          : "DataframeWidgetVue"
                         ,name           : "medication"
                         ,valueMember    : "id"
-                        ,"flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"dataframe"    : ref("vueMedicationsDetailDataframe")
                 ],
 
                 "prescribedMed.dosage"     : [
                         name           : "dosage",
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
 
                 "prescribedMed.frequencyUnit"  :[
@@ -310,28 +310,28 @@ beans {
                         ,"name"         : "frequencyUnit"
                         ,"hql"          : "select pf.id as id, pf.name as name from FrequencyUnit as pf"
 
-                        ,"flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                         ,"displayMember": "name"
                         ,"valueMember"  : "id"
                 ],
 
                 "prescribedMed.units"     : [
                         name           : "frequency",
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "prescribedMed.frequency"     : [
                         name           : "frequency",
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "prescribedMed.start"          : [
                         widget          : "DateWidgetVue"
                         ,name           : "start",
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "prescribedMed.expiration"     : [
                         widget          : "DateWidgetVue"
                         ,name           : "expiration",
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ]
 
         ]
@@ -365,12 +365,12 @@ beans {
 
         ajaxSaveUrl = "applicationForm/save"
         //These are values, that overrides the default ones
-//        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+//        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
         deleteButton = false
         wrapInForm = true
         tab = true
 
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
         childDataframes=["vueContactFormEditDataframe","vueMedicationsGridEditDataframe"]
 
 //        doAfterSave = """setTimeout(function(){ this.location.reload();}, 3000);"""
@@ -379,20 +379,20 @@ beans {
                 "app.createTime"     : [
                         name            : "createTime",
                         attr            : " left",
-                        "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "app.applicant"    : [
                         widget          : "DataframeWidgetVue"
                         , name          : "applicant"
                         , valueMember   : "id",
-                        "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         , "dataframe"   : ref("vueContactFormEditDataframe")
                 ],
                 "app.medicalRecord": [
                         widget          : "DataframeWidgetVue"
                         , name          : "medicalRecord"
                         , valueMember   : "id",
-                        "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         , "dataframe"   : ref("vueMedicalRecordEditDataframe")
                 ]
 
@@ -402,7 +402,7 @@ beans {
         /*doAfterRefresh = """var currentlocation = this.location.href;
                              this.location.href = currentlocation + 'vueuserprofiledataframe'; """ expire:[name:"expire", type: "button", url: "/elintegrostartapp/applicationForm/expire"]*/
         dataframeButtons = [
-                makeClient: [name:"makeClient", type: "button", doBeforeAjax:"""params["facilityId"]= excon.getFromStore("vueAppNameDataframe","facilityId");\nparams["id"] = excon.getFromStore('vueApplicationFormEditDataframe', 'key');""", flexGridValues: ['xs12', 'sm12', 'md6', 'lg6', 'xl6'], url: "/elintegrostartapp/applicationForm/makeClient"],
+                makeClient: [name:"makeClient", type: "button", doBeforeAjax:"""params["facilityId"]= excon.getFromStore("vueAppNameDataframe","facilityId");\nparams["id"] = excon.getFromStore('vueApplicationFormEditDataframe', 'key');""", "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6'], url: "/elintegrostartapp/applicationForm/makeClient"],
 
 
         ]
@@ -417,31 +417,31 @@ beans {
         saveButton = false
 //        dataframeLabelCode = "Contact Information"
 //        childDataframes=["vueAddressDataframe"]
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
 //        doAfterSave = "excon.saveToStore('vueApplicationFormDataframe','vueApplicationFormDataframe_tab_model','vueMedicalRecordDataframe-tab-id');"
         addFieldDef = [
 
                 "person.email": [
                         "widget"        : "EmailWidgetVue",
-                        "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "person.phone"       : [
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
 
                 "person.firstName"   : [
                         "validate": ["rule": ["v => !!v || 'FirstName is required'", "v => (v && v.length <= 20) || 'FirstName must be less than 20'"]],
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "person.lastName"    : [
                         "validate": ["rule": ["v => !!v || 'LastName is required'", "v => (v && v.length <= 20) || 'LastName must be less than 20'"]],
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "person.mainPicture" : [
                         "widget"        : "PictureDisplayWidgetVue",
                         "defaultValue"  : "default_profile.jpg",
                         "aspectRatio"   : "2.5",
-                        "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                         "height"        : 200]
         ]
 
@@ -462,25 +462,25 @@ beans {
 
                 "person.email": [
                         "widget"        : "EmailWidgetVue",
-                        "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "person.phone"       : [
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
 
                 "person.firstName"   : [
                         "validate": ["rule": ["v => !!v || 'FirstName is required'", "v => (v && v.length <= 20) || 'FirstName must be less than 20'"]],
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "person.lastName"    : [
                         "validate": ["rule": ["v => !!v || 'LastName is required'", "v => (v && v.length <= 20) || 'LastName must be less than 20'"]],
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "person.mainPicture" : [
                         "widget"        : "PictureDisplayWidgetVue",
                         "defaultValue"  : "default_profile.jpg",
                         "aspectRatio"   : "2.5",
-                        "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                         "height"        : 200]
         ]
 
@@ -496,31 +496,31 @@ beans {
         saveButton = true
 //        dataframeLabelCode = "Contact.Information"
 //        childDataframes=["vueAddressDataframe"]
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
 //        doAfterSave = "excon.saveToStore('vueApplicationFormDataframe','vueApplicationFormDataframe_tab_model','vueMedicalRecordDataframe-tab-id');"
         addFieldDef = [
 
                 "person.email": [
                         "widget"        : "EmailWidgetVue",
-                        "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "person.phone"       : [
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
 
                 "person.firstName"   : [
                         "validate": ["rule": ["v => !!v || 'FirstName is required'", "v => (v && v.length <= 20) || 'FirstName must be less than 20'"]],
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "person.lastName"    : [
                         "validate": ["rule": ["v => !!v || 'LastName is required'", "v => (v && v.length <= 20) || 'LastName must be less than 20'"]],
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "person.mainPicture" : [
                         "widget"        : "PictureDisplayWidgetVue",
                         "defaultValue"  : "default_profile.jpg",
                         "aspectRatio"   : "2.5",
-                        "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                         "height"        : 200]
         ]
 
@@ -541,7 +541,7 @@ beans {
 //        initOnPageLoad=true //false by default excon.saveToStore('vueApplicationFormDataframe','vueApplicationFormDataframe_display', false);
         doBeforeSave = "params['personId'] = excon.getFromStore('vueContactDataframe','key');"
 
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         doBeforeRefresh = "params['personId'] = excon.getFromStore('vueContactEditDataframe', 'key');"
         childDataframes =["vueMapWidgetDataframe"]
         //These are default values, they are here to demonstrate how to overwrite it with different button combination, if required
@@ -552,13 +552,13 @@ beans {
         addFieldDef = [
                 "address.addressLine": [
                         "widget"   : "InputWidgetVue",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
 
                 ],
 
                 "address.addressLine2": [
                         "widget"   : "InputWidgetVue",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
 
                 ],
                 "address.postalZip": [
@@ -570,7 +570,7 @@ beans {
                         "insertAfter":"address.addressLine",
                         script       : """ this.updatedAddressValue = this.vueAddressEditDataframe_address_addressLine;""",
                         "attr"       :"round right",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                 ],
                 "googleMap": [
                         "widget"      : "DataframeWidgetVue",
@@ -581,7 +581,7 @@ beans {
                         passValueAsProp : true,
                         "showInMap"   :true,
                         "name"        : "googleMap",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                         "height"      :'500px'
 
                 ]
@@ -602,7 +602,7 @@ beans {
         //These are values, that overrides the default ones
         wrapInForm = true
 
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         saveButton = true
         addFieldDef = [
 
@@ -673,7 +673,7 @@ beans {
                                                                   from MedicalRecord record inner join record.medications medication where record.id=:id"""
                         , gridWidth       : 420
                         , search          : false
-                        , "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        , "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ]/*,
                 "addMedication":[
                         "widget": "ButtonWidgetVue",
@@ -711,13 +711,13 @@ beans {
                         widget          : "DataframeWidgetVue"
                         ,name           : "medication"
                         ,valueMember    : "id"
-                        ,"flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        , "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"dataframe"    : ref("vueMedicationsEditDataframe")
                 ],
 
                 "prescribedMed.dosage"     : [
                         name           : "dosage",
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
 
                 "prescribedMed.frequencyUnit"  :[
@@ -725,28 +725,28 @@ beans {
                         ,"name"         : "frequencyUnit"
                         ,"hql"          : "select pf.id as id, pf.name as name from FrequencyUnit as pf"
 
-                        ,"flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                         ,"displayMember": "name"
                         ,"valueMember"  : "id"
                 ],
 
                 "prescribedMed.units"     : [
                         name           : "frequency",
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "prescribedMed.frequency"     : [
                         name           : "frequency",
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "prescribedMed.start"          : [
                         widget          : "DateWidgetVue"
                         ,name           : "start",
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "prescribedMed.expiration"     : [
                         widget          : "DateWidgetVue"
                         ,name           : "expiration",
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ]
 
         ]
diff --git a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesCareersPageLayoutVue.groovy b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesCareersPageLayoutVue.groovy
index d9b24a80..7b85a921 100644
--- a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesCareersPageLayoutVue.groovy
+++ b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesCareersPageLayoutVue.groovy
@@ -21,7 +21,7 @@ beans {
                                             </v-container>
                                     </v-card>
                                </v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
 
     }
 
diff --git a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesClientProjectPageLayoutVue.groovy b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesClientProjectPageLayoutVue.groovy
index 75f2354d..f18d1d99 100644
--- a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesClientProjectPageLayoutVue.groovy
+++ b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesClientProjectPageLayoutVue.groovy
@@ -13,7 +13,7 @@ beans {
                                  <v-toolbar-title class="white--text">[DATAFRAME_LABEL]</v-toolbar-title>
                                   </v-toolbar>[DATAFRAME_SCRIPT][BUTTON_SCRIPT]
                                   <v-card class ="clientProject">[clientProject]</v-card></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
 
 }
\ No newline at end of file
diff --git a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesContactUsPageLayoutVue.groovy b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesContactUsPageLayoutVue.groovy
index 96d93eb7..ffa83c32 100644
--- a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesContactUsPageLayoutVue.groovy
+++ b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesContactUsPageLayoutVue.groovy
@@ -24,7 +24,7 @@ beans {
                                         </v-flex>
                                     </v-card>
                                  </v-flex></v-layout></v-container>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
 }
 
diff --git a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesElintegroHomeLayoutVue.groovy b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesElintegroHomeLayoutVue.groovy
index 6689918d..1b0fc3cc 100644
--- a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesElintegroHomeLayoutVue.groovy
+++ b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesElintegroHomeLayoutVue.groovy
@@ -27,7 +27,7 @@ beans {
                                 
                                 
                                 """
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
     }
     vueFirstContainerDataframeLayout(ColumnLayoutVue) { bean ->
         layoutBeanName = bean.name
@@ -171,7 +171,7 @@ beans {
     vueQuotesContainerDataframeLayout(ColumnLayoutVue) { bean ->
         layoutBeanName = bean.name
         layoutPlaceHolder = """
-                                <div  class="Quotes pt-10" >
+                                <div  class="Quotes pt-10" id='Quotes' >
                                 <div class=" flex-column" data-aos="fade-up">
                                   <h1 class="heading">What our customers say about us</h1>
                                   <v-row justify="center">
@@ -230,7 +230,7 @@ beans {
  <v-row> 
  <v-col cols="12"  md="1" xl="1" lg="1"></v-col>
       <v-col cols="12"  md="10" xl="10" lg="10">
-                                              <div class="tech-section py-5">
+                                              <div class="tech-section py-5" id="our_Technologies">
         <div class="container-fluid section-padding">
             <div class="row">
                 <div class="col-md-12">
@@ -353,7 +353,7 @@ beans {
                                 </v-row>
                                 [DATAFRAME_SCRIPT]
                                 <v-flex class="text-center">[BUTTON_SCRIPT]</v-flex></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
     vueElintegroSignUpQuizDataframeLayout(ColumnLayoutVue) { bean ->
         layoutBeanName = bean.name
@@ -367,7 +367,7 @@ beans {
                                              [submit]
                                         </v-layout>
                                </v-container>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
 
     }
     vueElintegroChangePasswordAfterSignUpDataframeLayout(ColumnLayoutVue) { bean ->
@@ -376,7 +376,7 @@ beans {
                               <v-col cols="12" xs="12" sm="12" md="4" xl="4" lg="4" style="padding-top:5%;"> <v-card>[DATAFRAME_SCRIPT]<v-card-actions class="justify-center">[BUTTON_SCRIPT]</v-card-actions></v-card></v-col>
                                <v-col cols="12" xs="0" sm="0" md="4" xl="4" lg="4"></v-col></v-row></v-flex>"""
 
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
 
     }
 }
\ No newline at end of file
diff --git a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesElintegroHomeVue.groovy b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesElintegroHomeVue.groovy
index c266f228..056fad6e 100644
--- a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesElintegroHomeVue.groovy
+++ b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesElintegroHomeVue.groovy
@@ -9,11 +9,9 @@ beans{
     vueElintegroHomeDataframe(DataframeVue) { bean ->
         bean.parent = dataFrameSuper
         bean.constructorArgs = ['vueElintegroHomeDataframe']
-        isGlobal = true
+        //isGlobal = false
         saveButton = false
         initOnPageLoad = false
-        route = true
-        currentRoute = 'home'
         childDataframes=['vueFirstContainerDataframe','vueOurWorkContainerDataframe','vueOurProcessContainerDataframe',
                          "vueCollaborationContainerDataframe",'vueOurFrameworkContainerDataframe',
                          'vueQuotesContainerDataframe','vueOurTechnologiesContainerDataframe'
@@ -31,27 +29,27 @@ beans{
                 "build":["widget":"TextDisplayWidgetVue"
                             ,"name":"build"
                             ,elementId: "build"
-                            ,flexGridValues:['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                            ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "apps":["widget":"TextDisplayWidgetVue"
                          ,"name":"apps"
                          ,elementId: "apps"
-                         ,flexGridValues:['xs12', 'sm12', 'md1', 'lg1', 'xl1']
+                         ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'1', 'lg':'1', 'xl':'1']
                 ],
                 'buildData':[ "widget":"TextDisplayWidgetVue"
                             ,"name":"buildData"
                             ,attr: """v-show = false"""
                             ,elementId:'buildData'
-                            ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0']
+                            ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']
                         ],
                 "youWont":["widget":"TextDisplayWidgetVue"
                            ,"name":"youWont"
-                           ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0']
+                           ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']
                 ],
                 "buildApp":["widget":"ButtonWidgetVue"
                             ,"name":"buildApp"
                             ,attr: """ """
-                            ,flexGridValues:['xs0', 'sm0', 'md6', 'lg6', 'xl6']
+                            ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'6', 'lg':'6', 'xl':'6']
                             ,script: """ this.scrollToQuiz('coachClone');"""
                 ]
 
@@ -67,11 +65,11 @@ beans{
 
                 weDeliver:["widget":"TextDisplayWidgetVue"
                            ,"name":"weDeliver"
-                           ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0'],
+                           ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0'],
                 ],
                 WeDeliverTextParagraphOne:["widget":"TextDisplayWidgetVue"
                                            ,"name":"WeDeliverTextParagraphOne"
-                                           ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0'],
+                                           ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0'],
                 ],
 
         ]
@@ -84,16 +82,16 @@ beans{
         addFieldDef = [
                 youDeserve:["widget":"TextDisplayWidgetVue"
                             ,"name":"youDeserve"
-                            ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0'],
+                            ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0'],
                 ],
 
                 ourProcessTextOne: ["widget":"TextDisplayWidgetVue"
                                     ,"name":"ourProcessTextOne"
-                                    ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0'],
+                                    ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0'],
                 ],
                 ourProcessTextTwo: ["widget":"TextDisplayWidgetVue"
                                     ,"name":"ourProcessTextTwo"
-                                    ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0'],
+                                    ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0'],
                 ],
 
         ]
@@ -107,15 +105,15 @@ beans{
 
                 agilityAsService:["widget":"TextDisplayWidgetVue"
                                   ,"name":"agilityAsService"
-                                  ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0'],
+                                  ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0'],
                 ],
                 collaborationFirstParagraph:["widget":"TextDisplayWidgetVue"
                                              ,"name":"collaborationFirstParagraph"
-                                             ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0'],
+                                             ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0'],
                 ],
                 collaborationSecondParagraph:["widget":"TextDisplayWidgetVue"
                                               ,"name":"collaborationSecondParagraph"
-                                              ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0'],
+                                              ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0'],
                 ],
         ]
 
@@ -129,15 +127,15 @@ beans{
 
                 QualityBuilt:["widget":"TextDisplayWidgetVue"
                               ,"name":"QualityBuilt"
-                              ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0'],
+                              ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0'],
                 ],
                 ourFrameworkTextFirstParagraph:["widget":"TextDisplayWidgetVue"
                                                 ,"name":"ourFrameworkTextFirstParagraph"
-                                                ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0'],
+                                                ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0'],
                 ],
                 ourFrameworkTextSecondParagraph:["widget":"TextDisplayWidgetVue"
                                                  ,"name":"ourFrameworkTextSecondParagraph"
-                                                 ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0'],
+                                                 ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0'],
                 ]
 
         ]
@@ -149,11 +147,11 @@ beans{
         bean.constructorArgs = ['vueQuotesContainerDataframe']
         saveButton = false
         initOnPageLoad = true
-        flexGridValues= ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         addFieldDef = [
                 customerSay:["widget":"TextDisplayWidgetVue"
                               ,"name":"customerSay"
-                              ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0'],
+                              ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0'],
                 ],
                 quotes: ["widget":"CarouselWidgetVue"
                             ,"name":"quotes"
@@ -194,7 +192,7 @@ beans{
 
                 thisIsHow:["widget":"TextDisplayWidgetVue"
                            ,"name":"thisIsHow"
-                           ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0'],
+                           ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0'],
                 ],
         ]
         currentFrameLayout = ref("vueOurTechnologiesContainerDataframeLayout")
@@ -208,7 +206,7 @@ beans{
         addFieldDef = [
                 letsTalk:["widget":"TextDisplayWidgetVue"
                              ,"name":"letsTalk"
-                             ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0'],
+                             ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0'],
                 ],
         ]
         currentFrameLayout = ref("vueQuizPlaceholderContainerDataframeLayout")
@@ -230,7 +228,7 @@ beans{
                                 ,"valueMember"  : "id"
                                 ,attr: """ solo attach auto-select-first flat id="vueElintegroSignUpQuizDataframe-leadDescription" append-icon="mdi-chevron-down" class='quiz-signup' """
                                 ,search:true
-                                ,"flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']],
+                                ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']],
                        "lead.leadStage":[
                                widget:"ComboboxVue"
                                ,internationalize    :true
@@ -240,7 +238,7 @@ beans{
                                ,"valueMember"  : "id"
                                ,attr: """solo attach auto-select-first flat append-icon="mdi-chevron-down" class='quiz-signup' """
                                ,search:true
-                               ,"flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']],
+                               ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']],
                        "lead.leadBudget":[
                                widget:"ComboboxVue"
                                ,initBeforePageLoad  :true
@@ -251,51 +249,51 @@ beans{
                                ,attr: """solo attach auto-select-first flat append-icon="mdi-chevron-down"  class='quiz-signup' """
 
                                ,search:true
-                               ,"flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']],
+                               ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']],
                        "lead.nameOfProject":[
                                widget:"InputWidgetVue"
                                ,name: "nameOfProject"
                                ,attr: """solo attach  auto-select-first class='quiz-signup' """
-                               ,"flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                               ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                                ],
                        "lead.deadline":[
                                 widget:"DateWidgetVue"
                                 ,name: "deadline"
                                 ,attr: """solo attach  class='quiz-signup' """
-                                ,"flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                                ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                        ],
                        "lead.descriptionOfProject":[
                                widget:"TextAreaWidgetVue"
                                ,name: "descriptionOfProject"
                                ,attr: """solo attach   class='quiz-signup' """
-                               ,"flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                               ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                        ],
                        "person.firstName":[
                                 widget:"InputWidgetVue"
                                 ,name: "firstName"
                                 ,attr: """solo attach auto-select-first class='quiz-signup' """
 //                                ,"validationRules":[[condition:"v => !!v", message:"FirstName.required.message"]]
-                                ,"flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                                ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                        ],
                        "person.lastName":[
                                 widget:"InputWidgetVue"
                                 ,name: "lastName"
                                 ,attr: """solo attach auto-select-first flat  class='quiz-signup' """
                                 ,"validationRules":[[condition:"v => !!v", message:"LastName.required.message"]]
-                                ,"flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                                ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                        ],
                        "person.email":[
                                widget:"EmailWidgetVue"
                                ,name: "email"
                                ,attr: """solo attach auto-select-first flat  class='quiz-signup' """
-                               ,"flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                               ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                        ],
                        "person.phone":[
                                "name":"phone"
                                ,"widget":"PhoneNumberWidgetVue"
                                ,"validationRules":[[condition:"v => !!v", message: 'Phone.required.message'],[condition: "v => /[0-9]/.test(v)",message: "Only.numbers.are.allowed."],[condition:"v => (v && v.length >= 10 && v.length <= 15)",message:"Phone.number.must.be.between.10.and.15"]]
                                ,attr: """solo attach auto-select-first flat  class='quiz-signup' """
-                               ,"flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']],
+                               ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']],
 
         ]
         dataframeButtons = [
@@ -303,7 +301,7 @@ beans{
                          type: "button",
                          classNames : "form-submission-button" ,
                          script : """this.saveSignUpForm()""",
-                         "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12' ]
+                         "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ]
         ]
         currentFrameLayout = ref("vueElintegroSignUpQuizDataframeLayout")
@@ -312,7 +310,7 @@ beans{
     vueElintegroChangePasswordAfterSignUpDataframe(DataframeVue){bean->
         bean.parent = dataFrameSuper
         bean.constructorArgs = ['vueElintegroChangePasswordAfterSignUpDataframe']
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         currentRoute = "change-password"
         saveButton = false
         initOnPageLoad = false
@@ -330,7 +328,7 @@ beans{
                                           ,attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """
                                           ,"validationRules":[[condition:"v => !!(v==this.state.transits.newPassword.value)",message:"Password.and.Confirm.Password."]]],
         ]
-        dataframeButtons = [submit: [name: "submit", type: "link",attr: """style='background-color:#1976D2; color:white;' """,script: """this.changePasswordAfterSignedUp()""", "flexGridValues": ['xs0', 'sm0', 'md0', 'lg0', 'xl0']]]
+        dataframeButtons = [submit: [name: "submit", type: "link",attr: """style='background-color:#1976D2; color:white;' """,script: """this.changePasswordAfterSignedUp()""", "cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']]]
         currentFrameLayout = ref("vueElintegroChangePasswordAfterSignUpDataframeLayout")
     }
 
@@ -345,13 +343,14 @@ beans{
                                ,"attr":""" plain class='fontOfPrivacy'"""
                                ,onClick:[showAsDialog: true, refDataframe: ref("vueFooterPrivacyDataframe")]
                                ,script: """excon.setVisibility('vueFooterPrivacyDataframe',true);"""
-                               ,flexGridValues:['xs12', 'sm4', 'md4', 'lg4', 'xl4'],
+                               ,"cssGridValues": ['xs':'12', 'sm':'4', 'md':'4', 'lg':'4', 'xl':'4'],
                 ],
                 termAndConditions:["widget":"ButtonWidgetVue"
                                ,"name":"termAndConditions"
                                ,"attr":"""class='fontOfPrivacy'"""
-                               ,script: """excon.redirectPage(this,"terms-and-condition");"""
-                               ,flexGridValues:['xs12', 'sm4', 'md4', 'lg4', 'xl4'],
+                               /*,script: """excon.redirectPage(this,"terms-and-condition");"""*/
+                               ,script: """this.\$router.push("terms-and-condition");"""
+                               ,"cssGridValues": ['xs':'12', 'sm':'4', 'md':'4', 'lg':'4', 'xl':'4'],
                 ]
         ]
         currentFrameLayout = ref("vueFooterContainerDataframeLayout")
@@ -365,11 +364,11 @@ beans{
         addFieldDef = [
                 privacyPolicyHeading:["widget":"TextDisplayWidgetVue"
                                       ,"name":"privacyPolicyHeading"
-                                      ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0']
+                                      ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']
                 ],
                 loremEpsumText:["widget":"TextDisplayWidgetVue"
                           ,"name":"loremEpsumText"
-                          ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0'],
+                          ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0'],
                 ],
         ]
         currentFrameLayout = ref("vueFooterPrivacyDataframeLayout")
@@ -378,11 +377,11 @@ beans{
         bean.parent = dataFrameSuper
         bean.constructorArgs = ['vueTermAndConditionDataframe']
         saveButton = false
-        isGlobal = true
+        //isGlobal = true
         initOnPageLoad = true
         doAfterRefresh = "self.termsAndConditions();"
-        route = true
-        currentRoute = "terms-and-condition"
+        /*route = true
+        currentRoute = "terms-and-condition"*/
         currentFrameLayout = ref("vueTermAndConditionDataframeLayout")
 
 
diff --git a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesElintegroLayoutVue.groovy b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesElintegroLayoutVue.groovy
index 251b8a1f..bfccd1c6 100644
--- a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesElintegroLayoutVue.groovy
+++ b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesElintegroLayoutVue.groovy
@@ -15,7 +15,7 @@ beans {
     vueElintegroContainerLayout(ColumnLayoutVue){bean ->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<div id='app' ><v-app class="app" style="background-color:#fff;"><sectionLayout/></v-app></div>"""
-        children = ["sectionLayout"]
+        childLayouts = ["sectionLayout"]
     }
     sectionLayout(RowLayoutVue){ bean->
         layoutBeanName = bean.name
@@ -24,8 +24,8 @@ beans {
                                   <vueElintegroMidSectionLayout/>
                                   <vueElintegroFooterLayout/>
                               </v-content>"""
-        children = ["vueElintegroNavigationLayout","vueElintegroMidSectionLayout","vueElintegroFooterLayout"]
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        childLayouts = ["vueElintegroNavigationLayout","vueElintegroMidSectionLayout","vueElintegroFooterLayout"]
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
     }
     vueElintegroNavigationLayout(ColumnLayoutVue){ bean ->
         layoutBeanName = bean.name
@@ -117,7 +117,7 @@ beans {
         layoutPlaceHolder = """<v-flex xs12 sm12 md12 lg12 xl12>
                               [DATAFRAME_SCRIPT][BUTTON_SCRIPT]
                               </v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
 
     }
     vueElintegroAppsDataframeLayout(ColumnLayoutVue){ bean ->
@@ -156,24 +156,24 @@ beans {
         layoutBeanName = bean.name
         layoutPlaceHolder = """<v-flex xs12 sm12 md12 lg12 xl12><v-card>
                                   [DATAFRAME_SCRIPT]
-                                  <div style="margin-top:-40px; height:125px;">[BUTTON_SCRIPT]</div>
+                                  <div style="margin-top:-40px; height:125px;" class='elintegro-sub-menu'>[BUTTON_SCRIPT]</div>
                                   </v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
     vueElintegroAboutUsMenuDataframeLayout(ColumnLayoutVue) { bean ->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<v-flex xs12 sm12 md12 lg12 xl12><v-card>
                                   [DATAFRAME_SCRIPT]
-                                  <div style="margin-top:-40px; height:320px; margin-left:-4px;">[BUTTON_SCRIPT]</div>
+                                  <div style="margin-top:-40px; height:320px; margin-left:-4px;" class='about-us-menu'>[BUTTON_SCRIPT]</div>
                                   </v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
     vueTechnologiesDataframeDataframeLayout(ColumnLayoutVue){ bean->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<v-flex xs12 sm12 md12 lg12 xl12><v-card><v-toolbar dark color="blue darken-2" height="100px" style="margin-bottom:30px;">
                                  <v-toolbar-title class="white--text">[DATAFRAME_LABEL]</v-toolbar-title>
                                   </v-toolbar>[DATAFRAME_SCRIPT][BUTTON_SCRIPT]</v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
     vueNewEmployeeBasicInformationDataframeLayout(ColumnLayoutVue){bean ->
         layoutBeanName = bean.name
@@ -185,7 +185,7 @@ beans {
     vueAddressDataframeLayout(ColumnLayoutVue){ bean->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<v-flex xs12 sm12 md12 lg12 xl12><v-card>[DATAFRAME_LABEL][DATAFRAME_SCRIPT]<v-card-actions><v-container fluid grid-list-lg pa-0><v-layout row wrap pa-2>[ALL_OTHER_BUTTONS][googleMap]</v-layout></v-container></v-card-actions></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
     vueNewEmployeeUploadResumeDataframeLayout(ColumnLayoutVue){bean ->
         layoutBeanName = bean.name
@@ -198,7 +198,7 @@ beans {
         layoutPlaceHolder = """<v-flex xs12 sm12 md12 lg12 xl12><v-card>
                                  [DATAFRAME_SCRIPT][BUTTON_SCRIPT]
                                  </v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
     vueNewEmployeeApplicantEditSkillDataframeLayout(ColumnLayoutVue){ bean->
         layoutBeanName = bean.name
@@ -207,7 +207,7 @@ beans {
                                 </v-btn><span>Close</span></v-tooltip></v-flex>
                                 [DATAFRAME_SCRIPT]
                                 <v-flex class="text-center">[BUTTON_SCRIPT]</v-flex></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
     vueNewEmployeeApplicantAddSkillDataframeLayout(ColumnLayoutVue){ bean ->
         layoutBeanName = bean.name
@@ -216,7 +216,7 @@ beans {
                                 </v-btn><span>Close</span></v-tooltip></v-flex>
                                 [DATAFRAME_SCRIPT]
                                 <v-flex class="text-center">[BUTTON_SCRIPT]</v-flex></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
 
     vueNewEmployeeAddtionalQuestionsDataframeLayout(ColumnLayoutVue) {bean ->
@@ -234,12 +234,12 @@ beans {
                                 <v-row><v-col cols="4"></v-col><v-col cols="4"><v-flex class="text-center"><h5>If you have additional questions, please send us an email to contact:<h4>hr@elintegro.com</h4></h5></v-flex></v-col><v-col cols="4"></v-col></v-row>
                              <v-flex>[BUTTON_SCRIPT]</v-flex>
                                 </v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
     vueElintegroLoginTabDataframeLayout(ColumnLayoutVue){bean->
         layoutBeanName = bean.name
         layoutPlaceHolder = """ [tab]"""
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
 
     }
     vueElintegroLoginDataframeLayout(RowLayoutVue){bean ->
@@ -271,7 +271,7 @@ beans {
         layoutPlaceHolder = """<v-flex><v-row><v-col cols="12" xs="0" sm="0" md="4" xl="4" lg="4"></v-col>
                               <v-col cols="12" xs="12" sm="12" md="4" xl="4" lg="4" style="padding-top:5%;"> <v-card>[DATAFRAME_SCRIPT]<v-card-actions class="justify-center">[BUTTON_SCRIPT]</v-card-actions></v-card></v-col>
                                <v-col cols="12" xs="0" sm="0" md="4" xl="4" lg="4"></v-col></v-row></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
 
     vueElintegroRegisterDataframeLayout(ColumnLayoutVue){ bean->
@@ -282,7 +282,7 @@ beans {
                                             <v-toolbar-title>[DATAFRAME_LABEL]</v-toolbar-title>
                                             <v-spacer></v-spacer>
                                             <v-tooltip bottom>
-                                                <v-btn icon target="_blank" slot="activator" @click.prevent="closeDataframe">
+                                                <v-btn icon color='white' target="_blank" slot="activator" @click.prevent="closeDataframe">
                                                     <v-icon medium >close</v-icon>
                                                 </v-btn><span>Close</span>
                                             </v-tooltip>
@@ -294,7 +294,7 @@ beans {
                                                 [saveButton]
                                             </v-layout></v-container>
                                     </v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
 
     vueElintegroAfterLoggedinDataframeLayout(ColumnLayoutVue){bean ->
@@ -310,12 +310,12 @@ beans {
                                 <v-flex>[person.mainPicture]</v-flex>
                                 <v-flex><v-card-actions class="justify-center"><h3>{{vueElintegroProfileMenuDataframe_person_fullName}}</h3></v-card-actions><v-card-actions class="justify-center">{{vueElintegroProfileMenuDataframe_person_email}}</v-card-actions></v-flex>
                                 <v-spacer></v-spacer></v-form><br><v-flex class="text-center">[BUTTON_SCRIPT]</v-flex></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
     vueElintegroUserProfileDataframeLayout(ColumnLayoutVue){ bean->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<v-flex xs12 sm12 md12 lg12 xl12><v-card round width='fit-content'><v-toolbar dark color="light-blue darken-2"><v-toolbar-title class="white--text">My Profile</v-toolbar-title><v-spacer></v-spacer></v-toolbar>[vueElintegroUserProfileDataframe]<v-card-actions><v-container fluid grid-list-lg pa-0><v-layout row wrap pa-2>[ALL_OTHER_BUTTONS]</v-layout></v-container></v-card-actions></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'3', 'xl':'2']
     }
     vueElintegroApplicantsDataframeLayout(ColumnLayoutVue) { bean ->
         layoutBeanName = bean.name
@@ -323,12 +323,12 @@ beans {
                                  <v-toolbar-title class="white--text" style="margin:100px;">[DATAFRAME_LABEL]</v-toolbar-title>
                                   </v-toolbar>[DATAFRAME_SCRIPT][BUTTON_SCRIPT]
                                   <v-card class ="applicant">[applicant]</v-card></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
     vueElintegroApplicantDetailsDataframeLayout(ColumnLayoutVue){bean->
         layoutBeanName = bean.name
         layoutPlaceHolder = """ [DATAFRAME_SCRIPT]"""
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
 
     }
     vueElintegroApplicantGeneralInformationDataframeLayout(ColumnLayoutVue){bean ->
diff --git a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesElintegroVue.groovy b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesElintegroVue.groovy
index 57b96107..08bc606f 100644
--- a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesElintegroVue.groovy
+++ b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesElintegroVue.groovy
@@ -30,7 +30,7 @@ beans {
         wrapInForm=false
         initOnPageLoad = false
         isGlobal = true
-        addFieldDef = ["progressBar":[widget: "ProgressBarWidgetVue","flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']]]
+        addFieldDef = ["progressBar":[widget: "ProgressBarWidgetVue","cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']]]
         currentFrameLayout = ref("vueElintegroProgressBarLayout")
 
     }
@@ -45,8 +45,8 @@ beans {
                                      type: "link",
                                      attr:  "style='color:#212121;'",
                                      classNames: 'navigation-hover',
-                                     route: true,routeIdScript: "0", refDataframe: ref("vueElintegroHomeDataframe"),
-                                     "flexGridValues": ['xs0', 'sm0', 'md0', 'lg0', 'xl0']
+                                     route: true,routeName: "home", refDataframe: ref("vueElintegroHomeDataframe"),
+                                     "cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']
                                     ]
                             ]
         currentFrameLayout = ref("elintegroNavigationButtonFirstLayout")
@@ -58,11 +58,11 @@ beans {
         saveButton = false
         initOnPageLoad = true
         dataframeButtons = [register       : [name: "register", type: "link", showAsDialog: true, attr:  " style='color:#1976D2;'" , classNames:"navigation-hover-underline",
-                                              refDataframe: ref("vueElintegroRegisterDataframe"), tooltip: [message: 'Register'],"flexGridValues":['xs0', 'sm0', 'md0', 'lg0', 'xl0']],
+                                              refDataframe: ref("vueElintegroRegisterDataframe"), tooltip: [message: 'Register'],"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
                             login          : [name: "login",  type: "link", showAsDialog: true,attr:"style='color:#1976D2;'", classNames:"navigation-hover-underline",
-                                              refDataframe: ref("vueElintegroLoginTabDataframe"), tooltip: [message: 'Login'],"flexGridValues":['xs0', 'sm0', 'md0', 'lg0', 'xl0']],
-                            contactUs      : [name: "contactUs", type: "link",attr:"style='color:#212121;'",   classNames: 'navigation-hover', route: true,routeIdScript: "0", refDataframe: ref("vueContactUsPageDataframe"),"flexGridValues":['xs0', 'sm0', 'md0', 'lg0', 'xl0']],
-                            careers        : [name: "careers", type: "link",attr:" style='color:#212121;'",  classNames: 'navigation-hover',  route: true,routeIdScript: "0", refDataframe: ref("vueCareersDataframe"),"flexGridValues":['xs0', 'sm0', 'md0', 'lg0', 'xl0']],
+                                              refDataframe: ref("vueElintegroLoginTabDataframe"), tooltip: [message: 'Login'],"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
+                            contactUs      : [name: "contactUs", type: "link",attr:"style='color:#212121;'",   classNames: 'navigation-hover', route: true,routeName: "contact-us", refDataframe: ref("vueContactUsPageDataframe"),"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
+                            careers        : [name: "careers", type: "link",attr:" style='color:#212121;'",  classNames: 'navigation-hover',  route: true,routeName: "careers", refDataframe: ref("vueCareersDataframe"),"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
                            ]
         wrapButtons = false
 
@@ -82,7 +82,7 @@ beans {
         addFieldDef = [
                 "languages":[
                         widget: "LanguageSelectorWidgetVue"
-                        ,"flexGridValues":['xs0', 'sm0', 'md0', 'lg0', 'xl0']
+                        ,"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']
                         , hql: """select language.id as id,language.code as code, language.ename as ename from Language as language where language.code in (${languageCode})"""
                         ,"displayMember":"ename"
                         ,"valueMember":"id"
@@ -101,10 +101,10 @@ beans {
         isGlobal = true
         saveButton = false
         initOnPageLoad = true
-        dataframeButtons = [myProfile       : [name: "profile", type: "link",attr:"style='color:#1976D2;'", showAsDialog: true,refDataframe: ref("vueElintegroProfileMenuDataframe"),"flexGridValues": ['xs0', 'sm0', 'md0', 'lg0', 'xl0']],
-                            contactUs      : [name: "contactUs", type: "link",attr:"style='color:#212121;'",   classNames: 'navigation-hover', route: true,routeIdScript: "0", refDataframe: ref("vueContactUsPageDataframe"), "flexGridValues": ['xs0', 'sm0', 'md0', 'lg0', 'xl0']],
-                            applicants     : [name: "applicants", type: "link",attr:"style='color:#1976D2;'",route: true, routeIdScript: "0", refDataframe: ref("vueElintegroApplicantsDataframe"), roles: "ROLE_ADMIN", accessType: "ifAnyGranted", "flexGridValues": ['xs0', 'sm0', 'md0', 'lg0', 'xl0']],
-                            careers        : [name: "careers", type: "link",attr:"style='color:#212121;'",  classNames: 'navigation-hover',  route: true,routeIdScript: "0", refDataframe: ref("vueCareersDataframe"), "flexGridValues": ['xs0', 'sm0', 'md0', 'lg0', 'xl0']],
+        dataframeButtons = [myProfile       : [name: "profile", type: "link",attr:"style='color:#1976D2;'", showAsDialog: true,refDataframe: ref("vueElintegroProfileMenuDataframe"),"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
+                            contactUs      : [name: "contactUs", type: "link",attr:"style='color:#212121;'",   classNames: 'navigation-hover', route: true,routeName: "contact-us", refDataframe: ref("vueContactUsPageDataframe"), "cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
+                            applicants     : [name: "applicants", type: "link",attr:"style='color:#1976D2;'",route: true, routeName: "0", refDataframe: ref("vueElintegroApplicantsDataframe"), roles: "ROLE_ADMIN", accessType: "ifAnyGranted", "cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
+                            careers        : [name: "careers", type: "link",attr:"style='color:#212121;'",  classNames: 'navigation-hover',  route: true,routeName: "careers", refDataframe: ref("vueCareersDataframe"), "cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
                             ]
                             wrapButtons = false
 
@@ -132,7 +132,7 @@ beans {
                 "logo": [
                         "widget"      : "PictureDisplayWidgetVue",
                         "url"         : "assets/home/logo.png",
-                        flexGridValues: ['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                         "attr"        : " contain ",
 //                        "height"      : "64",
 //                        "width"       : "200",
@@ -154,8 +154,8 @@ beans {
         bean.parent = dataFrameSuper
         bean.constructorArgs = ['vueClientProjectDataframe']
         dataframeLabelCode = "Clients & Projects Details"
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
-        isGlobal = true
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
+        //isGlobal = true
         saveButton = false
         initOnPageLoad = true
         route = true
@@ -202,14 +202,17 @@ beans {
         isGlobal = true
         saveButton= false
         initOnPageLoad = false
-        dataframeButtons = [contactQuiz:[name: "contactQuiz", type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",script: """this.scrollTo('quiz_placeholder');""","flexGridValues": ['xs0', 'sm0', 'md0', 'lg0', 'xl0']],
-                            technologiesInUse:[name: "technologiesInUse", type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",script: """this.scrollTo('our_Technologies');""","flexGridValues": ['xs0', 'sm0', 'md0', 'lg0', 'xl0']],
-                            ourClientsProjects:[name: "ourClientsProjects", type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",script: """this.scrollTo('ourClientsProjects');""","flexGridValues": ['xs0', 'sm0', 'md0', 'lg0', 'xl0']],
-                            testimonials:[name:"testimonials",type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",script: """this.scrollTo('Quotes')""","flexGridValues": ['xs0', 'sm0', 'md0', 'lg0', 'xl0']],
-                            ourFramework:[name: "ourFramework", type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",script: """this.scrollTo('our_framework');""","flexGridValues": ['xs0', 'sm0', 'md0', 'lg0', 'xl0']],
-                            collaboration:[name: "collaboration", type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",script: """this.scrollTo('collaboration');""","flexGridValues": ['xs0', 'sm0', 'md0', 'lg0', 'xl0']],
-                            ourProcess  : [name: "ourProcess", type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",script: """this.scrollTo('our_process');""","flexGridValues": ['xs0', 'sm0', 'md0', 'lg0', 'xl0']],
-                            ourWork  : [name: "ourWork", type: "link",attr:"style='color:#1976D2;'",script: """this.scrollTo('our_work');""" , "flexGridValues": ['xs0', 'sm0', 'md0', 'lg0', 'xl0']]]
+        dataframeButtons = [
+                            ourWork  : [name: "ourWork", type: "link",attr:"style='color:#1976D2;'",script: """this.scrollTo('our_work');""" , "cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
+                            ourProcess  : [name: "ourProcess", type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",script: """this.scrollTo('our_process');""","cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
+                            collaboration:[name: "collaboration", type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",script: """this.scrollTo('collaboration');""","cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
+                            ourFramework:[name: "ourFramework", type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",script: """this.scrollTo('our_framework');""","cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
+                            testimonials:[name:"testimonials",type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",script: """this.scrollTo('Quotes')""","cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
+                            ourClientsProjects:[name: "ourClientsProjects", type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",script: """this.scrollTo('ourClientsProjects');""","cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
+                            technologiesInUse:[name: "technologiesInUse", type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",script: """this.scrollTo('our_Technologies');""","cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
+                            contactQuiz:[name: "contactQuiz", type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",script: """this.scrollTo('quiz_placeholder');""","cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
+
+        ]
 
         currentFrameLayout = ref("vueElintegroAboutUsMenuDataframeLayout")
 
@@ -222,10 +225,11 @@ beans {
         saveButton= false
         initOnPageLoad = false
         dataframeButtons = [
-                        //showApplicant  : [name: "showApplicant", type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",route: true,routeIdScript: 0,refDataframe: ref("vueAddMapWidgetDataframe"), "flexGridValues": ['xs0', 'sm0', 'md0', 'lg0', 'xl0']],
-                            quizzable  : [name: "quizzable", type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",script: """this.quizzableApp();""", "flexGridValues": ['xs0', 'sm0', 'md0', 'lg0', 'xl0']],
-                            translator : [name: "translator", type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",route: true,routeIdScript: 0, refDataframe: ref("vueTranslatorAssistantDataframe"),"flexGridValues": ['xs0', 'sm0', 'md0', 'lg0', 'xl0']],
-                            ecommerce  : [name: "ecommerce", type: "link",attr:"style='color:#1976D2;'",route: true,routeIdScript: 0,script: """this.ecommerceApp();""", "flexGridValues": ['xs0', 'sm0', 'md0', 'lg0', 'xl0']]]
+                        ecommerce  : [name: "ecommerce", type: "link",attr:"style='color:#1976D2;'",route: true,routeName: 0,script: """this.ecommerceApp();""", "cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
+                        translator : [name: "translator", type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",route: true,routeName: "translator", refDataframe: ref("vueTranslatorAssistantDataframe"),"cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
+                        quizzable  : [name: "quizzable", type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",script: """this.quizzableApp();""", "cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
+                        //showApplicant  : [name: "showApplicant", type: "link",attr:"style='color:#1976D2;margin-top:-15px;'",route: true,routeName: 0,refDataframe: ref("vueAddMapWidgetDataframe"), "cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']],
+        ]
 
         currentFrameLayout = ref("vueElintegroSubMenuDataframeLayout")
 
@@ -276,15 +280,15 @@ beans {
         addFieldDef=[
                         "careersHeader":["widget":"TextDisplayWidgetVue"
                                  ,"name":"careersHeader"
-                                 ,flexGridValues:['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                                 ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                         ],
                         "careersDescription":["widget"      : "PictureDisplayWidgetVue"
                                               ,"attr"       : " contain class='careersDescriptionPicture' "
                                               ,url: "assets/image_Careers.png"
-                                              ,flexGridValues:['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                                              ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                 ]]
-        dataframeButtons = [registerForNewEmployee: [name: "register", type: "button",route: true,routeIdScript: "0", attr:" width= '100' style='background-color:#1976D2; color:white;' ", refDataframe: ref("vueNewEmployeeApplicantDataframe"),
-                                                     "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']]]
+        dataframeButtons = [registerForNewEmployee: [name: "register", type: "button",route: true,routeName: "new-employee-applicant", attr:" width= '100' style='background-color:#1976D2; color:white;' ", refDataframe: ref("vueNewEmployeeApplicantDataframe"),
+                                                     "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']]]
         currentFrameLayout = ref("vueCareersDataframeLayout")
     }
     vueNewEmployeeApplicantDataframe(DataframeVue){bean ->
@@ -299,9 +303,12 @@ beans {
                 "tab":[
                         widget: "TabWidgetVue",
                         dataframes : ['vueNewEmployeeBasicInformationDataframe','vueNewEmployeeUploadResumeDataframe','vueNewEmployeeSelfAssesmentDataframe','vueNewEmployeeAddtionalQuestionsDataframe']
-                        ,"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,flexAttr: "pa-1"
                         ,disableTabs : true
+                        ,tabAttr:""" class='new-employee-tab-attr' ripple """
+                        ,tabsAttr:"""hide-slider active-class="blue darken-2"  """
+                        ,cardAttr:""" round style ="overflow:hidden;"  """
 
                 ]
         ]
@@ -313,12 +320,12 @@ beans {
         bean.constructorArgs = ['vueNewEmployeeBasicInformationDataframe']
         hql = "select person.firstName, person.lastName, person.email, person.phone, application.linkedin, application.availablePositions from Application application inner join application.applicant person where application.id=:id"
         initOnPageLoad = false
-        flexGridValues = ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
         saveButton = true
         requiresConfirmationMessage = false
         dataframeLabelCode = """Basic.information"""
         saveButtonAttr = """style='background-color:#1976D2; color:white;' """
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
 
         doAfterSave = """
                         excon.goToTab("vueNewEmployeeApplicantDataframe", "vueNewEmployeeUploadResumeDataframe");
@@ -363,11 +370,11 @@ beans {
         bean.constructorArgs = ['vueNewEmployeeUploadResumeDataframe']
         initOnPageLoad = false
         hql = "select application.id, application.files from Application application where application.id=:id"
-        flexGridValues = ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
         saveButton = true
         dataframeLabelCode = """Upload.resume"""
         saveButtonAttr = """style='background-color:#1976D2; color:white;' """
-        flexGridValuesForSaveButton =['xs3', 'sm3', 'md6', 'lg6', 'xl6']
+        cssGridValuesForSaveButton = ['xs':'3', 'sm':'3', 'md':'6', 'lg':'6', 'xl':'6']
         tab = true
         isGlobal = false
         requiresConfirmationMessage = false
@@ -403,7 +410,7 @@ beans {
         ]
 
         dataframeButtons = [ previous: [name:"previous", type: "button",attr: """style='background-color:#1976D2; color:white;' """,script:"""Vue.set(this.\$store.state.vueNewEmployeeApplicantDataframe, "vueNewEmployeeApplicantDataframe_tab_model","vueNewEmployeeBasicInformationDataframe-tab-id");\n""",
-                                        flexGridValues: ['xs9', 'sm9', 'md6', 'lg6', 'xl6'],url: ""]]
+                                        "cssGridValues" : ['xs':'9', 'sm':'9', 'md':'6', 'lg':'6', 'xl':'6'],url: ""]]
 
         currentFrameLayout = ref("vueNewEmployeeUploadResumeDataframeLayout")
     }
@@ -413,11 +420,11 @@ beans {
         initOnPageLoad = false
         putFillInitDataMethod = true
         dataframeLabelCode = """Self.assessment"""
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         tab = true
         requiresConfirmationMessage = false
         saveButton = false
-        flexGridValuesForSaveButton =['xs6', 'sm6', 'md6', 'lg6', 'xl6']
+        cssGridValuesForSaveButton = ['xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']
 //        params['applicationId']= excon.getFromStore('vueNewEmployeeBasicInformationDataframe','domain_keys.application.id');
         doBeforeRefresh = """
                              excon.setValuesForNamedParams({'targetDataframe': 'vueNewEmployeeSelfAssesmentDataframe', 
@@ -451,10 +458,10 @@ beans {
 ]
         ]
         dataframeButtons = [
-                next:[name:"next", type: "button",attr: """style='background-color:#1976D2; color:white;' """,script:"excon.saveToStore('vueNewEmployeeApplicantDataframe','vueNewEmployeeApplicantDataframe_tab_model','vueNewEmployeeAddtionalQuestionsDataframe-tab-id');",flexGridValues: ['xs4', 'sm4', 'md4', 'lg4', 'xl4'], url:""],
-                addSkill:[name:"addSkill",type:"button",attr: """style='background-color:#1976D2; color:white;' """,showAsDialog:true,refDataframe: ref("vueNewEmployeeApplicantAddSkillDataframe"),flexGridValues: ['xs4', 'sm4', 'md4', 'lg4', 'xl4']],
+                next:[name:"next", type: "button",attr: """style='background-color:#1976D2; color:white;' """,script:"excon.saveToStore('vueNewEmployeeApplicantDataframe','vueNewEmployeeApplicantDataframe_tab_model','vueNewEmployeeAddtionalQuestionsDataframe-tab-id');","cssGridValues" : ['xs':'4', 'sm':'4', 'md':'4', 'lg':'4', 'xl':'4'], url:""],
+                addSkill:[name:"addSkill",type:"button",attr: """style='background-color:#1976D2; color:white;' """,showAsDialog:true,refDataframe: ref("vueNewEmployeeApplicantAddSkillDataframe"),"cssGridValues" : ['xs':'4', 'sm':'4', 'md':'4', 'lg':'4', 'xl':'4']],
                 previous: [name:"previous", type: "button",attr: """style='background-color:#1976D2; color:white;' """, script:"""excon.saveToStore("vueNewEmployeeApplicantDataframe", "vueNewEmployeeApplicantDataframe_tab_model","vueNewEmployeeUploadResumeDataframe-tab-id");
-                                                                                \n""",flexGridValues: ['xs4', 'sm4', 'md4', 'lg4', 'xl4'], url: ""]
+                                                                                \n""","cssGridValues" : ['xs':'4', 'sm':'4', 'md':'4', 'lg':'4', 'xl':'4'], url: ""]
         ]
         childDataframes = ['vueNewEmployeeApplicantEditSkillDataframe','vueNewEmployeeApplicantAddSkillDataframe']
 
@@ -479,7 +486,7 @@ beans {
                           excon.refreshDataForGrid(response,'vueNewEmployeeSelfAssesmentDataframe', 'applicationSkill', 'U', 'transits');
                       """
         hql = "select applicationSkill.id as Id, applicationSkill.skill as Skill, applicationSkill.level as Level, applicationSkill.comment as Comment  from ApplicationSkill applicationSkill where applicationSkill.id=:id"
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         addFieldDef = ["applicationSkill.skill":[widget: "InputWidgetVue",readOnly: true,attr: """ outlined background-color='#EBF9FF !important' color='#2AB6F6' """],
                        "applicationSkill.level":["max":10,  "validationRules":[[condition:"v => (v && new RegExp('^([0-9]|1[0])\$').test(v))",message:"digits.not.valid"]],attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """, script: """"""],
                        "applicationSkill.comment":[widget: "InputWidgetVue",attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """]
@@ -493,11 +500,11 @@ beans {
         initOnPageLoad = false
         putFillInitDataMethod = true
         hql = "select applicationSkill.id as Id, applicationSkill.skill as Skill,applicationSkill.level as Level, applicationSkill.comment as Comment from ApplicationSkill applicationSkill inner join applicationSkill.application application where application.id=:applicationId"
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         addFieldDef = ["applicationSkill.skill":[widget: "InputWidgetVue",attr: """ autofocus outlined background-color='#EBF9FF !important' color='#2AB6F6' """],
                        "applicationSkill.level":["max":10,  "validationRules":[[condition:"v => (v && new RegExp('^([0-9]|1[0])\$').test(v))",message:"digits.not.valid"]],attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """],
                         "applicationSkill.comment":[widget: "InputWidgetVue",attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """]]
-        dataframeButtons = [save: [name:"save", type: "button",attr: """style='background-color:#1976D2; color:white;' """,script:"""this.addNewSkill();""",flexGridValues: ['xs12', 'sm12', 'md6', 'lg6', 'xl6'],url: ""]]
+        dataframeButtons = [save: [name:"save", type: "button",attr: """style='background-color:#1976D2; color:white;' """,script:"""this.addNewSkill();""","cssGridValues" : ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6'],url: ""]]
         currentFrameLayout = ref("vueNewEmployeeApplicantAddSkillDataframeLayout")
     }
 
@@ -512,12 +519,12 @@ beans {
                        params.namedParameters.applicationId.value = applicationId;
                        params.domain_keys.application.id = applicationId; """
         hql = "select application.id as Id, application.question1, application.question2 from Application application where application.id=:applicationId"
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         saveButton = true
         saveButtonAttr = """style='background-color:#1976D2; color:white;' """
         tab = true
-        flexGridValuesForSaveButton =['xs3', 'sm3', 'md6', 'lg6', 'xl6']
-        doAfterSave = """self.\$router.push("/thank-you-message/0");"""
+        cssGridValuesForSaveButton = ['xs':'4', 'sm':'4', 'md':'4', 'lg':'4', 'xl':'4']
+        doAfterSave = """self.\$router.push("/thank-you-message");"""
         addFieldDef = [
                 "application.question1":[widget:"TextAreaWidgetVue"
                                          ,attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """,],
@@ -526,7 +533,7 @@ beans {
         ]
         dataframeButtons = [
                 previous: [name:"previous", type: "button",attr: """style='background-color:#1976D2; color:white;' """,script:"""Vue.set(this.\$store.state.vueNewEmployeeApplicantDataframe, "vueNewEmployeeApplicantDataframe_tab_model","vueNewEmployeeSelfAssesmentDataframe-tab-id");\n""",
-                           flexGridValues: ['xs9', 'sm9', 'md6', 'lg6', 'xl6'],url: ""]]
+                           "cssGridValues" : ['xs':'9', 'sm':'9', 'md':'6', 'lg':'6', 'xl':'6'],url: ""]]
 
         currentFrameLayout = ref("vueNewEmployeeAddtionalQuestionsDataframeLayout")
     }
@@ -545,7 +552,7 @@ beans {
                                                             'fieldName':'application',
                                                             'key': 'id'});
 """
-        doAfterRefresh = """setTimeout(function(){ self.\$router.push("/home/0");window.location.reload();}, 10000);"""
+        doAfterRefresh = """setTimeout(function(){ self.\$router.push("/home");window.location.reload();}, 10000);"""
         hql = "select person.firstName, person.lastName from Application application inner join application.applicant person where application.id=:id"
         currentFrameLayout = ref("vueNewEmployeeThankYouMessageAfterSaveDataframeLayout")
 
@@ -556,22 +563,22 @@ beans {
         bean.constructorArgs = ['vueContactUsPageDataframe']
         dataframeLabelCode = "Contact Us"
         hql = "select contactUs.name , contactUs.email,contactUs.phone,contactUs.textOfMessage from ContactUs contactUs where contactUs.id=:id"
-        isGlobal = true
+        isGlobal = false
         saveButton = true
         saveButtonAttr = """ style='background-color:#1976D2; color:white;' """
         initOnPageLoad = false
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         route = true
         currentRoute = 'contact-us'
         doAfterSave = """excon.showAlertMessage(response);excon.refreshPage;"""
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         addFieldDef = [
                 "contactUs.name":["name":"Name","widget":"InputWidgetVue",attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """],
                 "contactUs.email":["name":"Name","widget":"InputWidgetVue",attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """],
                 "contactUs.phone":[name:"phone",widget: "PhoneNumberWidgetVue","validationRules":[[condition:"v => !!v", message: 'Phone.required.message'],[condition: "v => /[0-9]/.test(v)",message: "Only.numbers.are.allowed."],[condition:"v => (v && v.length >= 10 && v.length <= 15)",message:"Phone.number.must.be.between.10.and.15"]],attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """],
                 "contactUs.textOfMessage":["name":"Name","widget":"TextAreaWidgetVue",attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """],]
 
-        //  dataframeButtons = [Submit: [name: "submit", type: "link", url:"ElintegroWebsite/ContactUs","flexGridValues": ['xs0', 'sm0', 'md0', 'lg0', 'xl0']]]
+        //  dataframeButtons = [Submit: [name: "submit", type: "link", url:"ElintegroWebsite/ContactUs","cssGridValues": ['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']]]
 
 
         currentFrameLayout = ref("contactUsPageDataframeLayout")
@@ -586,9 +593,12 @@ beans {
                 "tab":[
                         widget: "TabWidgetVue",
                         dataframes : ['vueElintegroLoginDataframe','vueElintegroLoginWithOTPDataframe']
-                        ,"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,flexAttr: "pa-0"
                         ,showCloseButton: true
+                        ,tabAttr:""" class='login-tab-attr' ripple """
+                        ,tabsAttr:"""hide-slider active-class="blue darken-2"  """
+                        ,cardAttr:""" round style ="overflow:hidden;"  """
 
                 ]
         ]
@@ -601,14 +611,14 @@ beans {
         hql = "select user.username, user.password from User as user where user.id=:id"
         wrapInForm = true
         saveButton = false
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         initOnPageLoad = false
         isGlobal = true
 
-        addFieldDef = ["user.password":["widget" : "PasswordWidgetVue", "name": "user.password", autoComplete:"on", "width":150, attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """,flexGridValues: ['xs12', 'sm12', 'md12', 'lg12', 'xl12']]
-                       ,"user.username":["widget" : "EmailWidgetVue",attr: "autofocus outlined background-color='#EBF9FF !important' color='#2AB6F6' ", "name": "user.username", autoComplete:"on", "width":150,placeholder:"Enter your email", "errMessage":"Username should be an email",flexGridValues: ['xs12', 'sm12', 'md12', 'lg12', 'xl12']]
-                       ,"rememberMe":["widget" : "CheckboxWidgetVue",flexGridValues: ['xs8', 'sm6', 'md6', 'lg6', 'xl6'],attr: """ class='mt-5' """]
-                       ,"orTextInLogin":["widget" :"TextDisplayWidgetVue",name: "orTextInLogin",attr: """ style='color:gray;' """, flexGridValues: ['xs12', 'sm12', 'md12', 'lg12', 'xl12']],
+        addFieldDef = ["user.password":["widget" : "PasswordWidgetVue", "name": "user.password", autoComplete:"on", "width":150, attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' ""","cssGridValues" : ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']]
+                       ,"user.username":["widget" : "EmailWidgetVue",attr: "autofocus outlined background-color='#EBF9FF !important' color='#2AB6F6' ", "name": "user.username", autoComplete:"on", "width":150,placeholder:"Enter your email", "errMessage":"Username should be an email","cssGridValues" : ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']]
+                       ,"rememberMe":["widget" : "CheckboxWidgetVue","cssGridValues" : ['xs':'8', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6'],attr: """ class='mt-5' """]
+                       ,"orTextInLogin":["widget" :"TextDisplayWidgetVue",name: "orTextInLogin",attr: """ style='color:gray;' """, "cssGridValues" : ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']],
         ]
 
         dataframeButtons = [logInWithGoogle:[name: "logInWithGoogle",type: "image", image:[url: "vueLoginDataframe.button.logInWithGoogle.imageUrl",width:'100%', height: '100%'], script:"""
@@ -619,16 +629,16 @@ beans {
                                                                                                 window.opener.location.reload();
                                                                                                 close();
                                                                                              }*/
-                                                                                              """,flexGridValues: ['xs6', 'sm6', 'md6', 'lg6', 'xl6']],
+                                                                                              ""","cssGridValues" : ['xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']],
                              logInWithFacebook:[name: "logInWithFacebook",type: "image", image:[url: "vueLoginDataframe.button.logInWithFacebook.imageUrl",width:'100%', height: '100%'],script:"""
                                                                                              var provider = 'facebook';
                                                                                              var url = "springSecurityOAuth2/authenticate?provider="+provider+"";
                                                                                              var childWindow = window.open(url, "payment",  "width=500,height=500");
-                                                                                              """,flexGridValues: ['xs6', 'sm6', 'md6', 'lg6', 'xl6']],
+                                                                                              ""","cssGridValues" : ['xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']],
                             login:[name:"login", type: "button", attr: """color='blue darken-2' dark width='100%' """,
-                                   script:"this.login();",flexGridValues: ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                                   script:"this.login();","cssGridValues" : ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                                    ],
-                            forgetPassword:[name: "forgetPassword", type: "link", attr:"""style='color:#1976D2;' """,script: """excon.redirectPage(this,"forget-password");excon.setVisibility('vueElintegroLoginDataframe',false);""", flexGridValues: ['xs6', 'sm6', 'md6', 'lg6', 'xl6']]
+                            forgetPassword:[name: "forgetPassword", type: "link", attr:"""style='color:#1976D2;' """,script: """excon.setVisibility('vueElintegroLoginTabDataframe',false);this.\$router.push("forget-password");""", "cssGridValues" : ['xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']]
                         ]
 
         currentFrameLayout = ref("vueElintegroLoginDataframeLayout")
@@ -639,7 +649,7 @@ beans {
         currentRoute = 'login-with-otp'
         initOnPageLoad = false
         dataframeLabelCode = """Login.with.otp"""
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         saveButton = false
         isGlobal = true
         addFieldDef = [
@@ -649,13 +659,13 @@ beans {
                             ,attr: """style='background-color:#1976D2; color:white;text-transform:capitalize;width:100%;' v-show = 'showHideSendCodeButton' """
                             ,script: """this.sendVerificationCode();"""],
                 "verificationCode":[name: "verificationCode", widget:"InputWidgetVue",placeholder: "Enter the verification code you received.",attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' v-if = 'showThisFieldAfterCodeSent'"""],
-                "codeNotReceived":[widget: "TextDisplayWidgetVue",isDynamic:false,attr: """v-show='showThisFieldAfterCodeSent'""", "flexGridValues": ['xs9', 'sm9', 'md9', 'lg9', 'xl9']],
+                "codeNotReceived":[widget: "TextDisplayWidgetVue",isDynamic:false,attr: """v-show='showThisFieldAfterCodeSent'""", "cssGridValues" : ['xs':'9', 'sm':'9', 'md':'9', 'lg':'9', 'xl':'9']],
                 "resendCode":[widget: "ButtonWidgetVue"
                               ,insertAfter: "codeNotReceived"
                               ,attr: """style='background-color:white;color:#1976D2; text-transform:capitalize;margin-left:-20px;margin-top:-5px;' text v-show='showThisFieldAfterCodeSent' """
                               ,script: """this.resendVerificationCode();"""
-                              ,"flexGridValues": ['xs3', 'sm3', 'md3', 'lg3', 'xl3']]]
-        dataframeButtons = [submit: [name: "submit", type: "button",attr: """flex-right style='background-color:#1976D2; color:white;' v-show='showThisFieldAfterCodeSent' """,script: """this.loginWithVerificationCode();""", "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']]]
+                              ,"cssGridValues" : ['xs':'3', 'sm':'3', 'md':'3', 'lg':'3', 'xl':'3']]]
+        dataframeButtons = [submit: [name: "submit", type: "button",attr: """flex-right style='background-color:#1976D2; color:white;' v-show='showThisFieldAfterCodeSent' """,script: """this.loginWithVerificationCode();""", "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']]]
         currentFrameLayout = ref("vueElintegroLoginWithOTPDataframeLayout")
 
     }
@@ -665,16 +675,16 @@ beans {
         hql = "select user.email from User as user where user.id=:id"
         dataframeLabelCode = "Forget.Password"
         initOnPageLoad = false
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         saveButton = false
         currentRoute = 'forget-password'
         route = true
-        isGlobal = true
+        //isGlobal = true
         doAfterRefresh = """excon.setVisibility('vueElintegroLoginDataframe',false);"""
         addFieldDef =[
                 "user.email":[widget: "EmailWidgetVue",attr: "autofocus outlined background-color='#EBF9FF !important' color='#2AB6F6'", "placeHolder":"Enter your email","validationRules":[[condition:"v => !!v", message: 'email.required.message']]],
         ]
-        dataframeButtons = [submit: [name: "submit", type: "button",attr: """style='background-color:#1976D2; color:white;' """,script: """this.forgotPassword();""", "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']]]
+        dataframeButtons = [submit: [name: "submit", type: "button",attr: """style='background-color:#1976D2; color:white;' """,script: """this.forgotPassword();""", "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']]]
         currentFrameLayout = ref("vueElintegroForgetPasswordDataframeLayout")
     }
     vueElintegroChangeForgotPasswordDataframe(DataframeVue){bean ->
@@ -682,11 +692,11 @@ beans {
         bean.constructorArgs = ['vueElintegroChangeForgotPasswordDataframe']
         dataframeLabelCode = "Forget.Password"
         initOnPageLoad = false
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         saveButton = false
         currentRoute = 'change-forget-password'
         route = true
-        isGlobal = true
+        //isGlobal = true
         addFieldDef =[
                 "newPassword":[name:"newPassword"
                                ,widget:"PasswordWidgetVue"
@@ -697,7 +707,7 @@ beans {
                                    , "insertAfter":"newPassword"
                                    ,"validationRules":[[condition:"v => !!(v==this.state.transits.newPassword.value)",message:"Password.and.Confirm.Password."]],attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """],
         ]
-        dataframeButtons = [submit: [name: "submit", type: "button",attr: """style='background-color:#1976D2; color:white;' """,script: """this.changeForgotPassword();""", "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']]]
+        dataframeButtons = [submit: [name: "submit", type: "button",attr: """style='background-color:#1976D2; color:white;' """,script: """this.changeForgotPassword();""", "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']]]
         currentFrameLayout = ref("vueElintegroForgetPasswordDataframeLayout")
     }
 
@@ -716,13 +726,13 @@ beans {
         initOnPageLoad = false
         isGlobal = true
         saveButton = true
-        flexGridValues = ['xs12', 'sm6', 'md6', 'lg6', 'xl6']
+        cssGridValues = ['xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']
         wrapInForm=true
 
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         doAfterSave = """ excon.setVisibility('vueElintegroRegisterDataframe',false);"""
         addFieldDef =[
-                "user.email":[widget: "EmailWidgetVue", "placeHolder":"Enter your email",attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' ""","validationRules":[[condition:"v => !!v", message: 'email.required.message']],"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']],
+                "user.email":[widget: "EmailWidgetVue", "placeHolder":"Enter your email",attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' ""","validationRules":[[condition:"v => !!v", message: 'email.required.message']],"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']],
                 "user.firstName":[widget: "InputWidgetVue", "placeHolder":"Enter your Firstname",attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """
                                   ,"validationRules":[[condition:"v => !!v",message:"FirstName.required.message"],[condition: "v => (v && v.length <= 30)",message:"FirstName.must.be.less.than.30"]]],
                 "user.lastName":[widget: "InputWidgetVue", "placeHolder":"Enter your Lastname",attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """
@@ -739,7 +749,7 @@ beans {
         bean.parent = dataFrameSuper
         bean.constructorArgs = ['vueElintegroProfileMenuDataframe']
         hql = "select person.id, person.firstName, person.lastName,person.email, person.mainPicture from Person person where person.user = :session_userid"
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         createStore = true
         isGlobal = true
         saveButton = false
@@ -769,8 +779,8 @@ beans {
 
         ]
 //        this.location.reload();
-        dataframeButtons = [Logout     : [name: "logout", type: "button",attr: """style='background-color:#1976D2; color:white;' """, script: "this.logout();", "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']],
-                            editProfile: [name: 'editProfile', type: "button",attr: """style='background-color:#1976D2; color:white;' """,showAsDialog: false, "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12'], route: true, routeIdScript: "this.state.persisters.person.id.value;", refDataframe: ref('vueElintegroUserProfileDataframe')]]
+        dataframeButtons = [Logout     : [name: "logout", type: "button",attr: """style='background-color:#1976D2; color:white;' """, script: "this.logout();", "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']],
+                            editProfile: [name: 'editProfile', type: "button",attr: """style='background-color:#1976D2; color:white;' """,showAsDialog: false, "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'], route: true, routeName: "this.state.persisters.person.id.value;", refDataframe: ref('vueElintegroUserProfileDataframe')]]
         currentFrameLayout = ref("vueElintegroProfileMenuDataframeLayout")
     }
     vueElintegroUserProfileDataframe(DataframeVue){ bean ->
@@ -783,9 +793,9 @@ beans {
 //        hql = "select person.id, person.mainPicture,person.email, person.firstName, person.lastName, person.bday, person.phone, person.languages from Person as person where person.id=:id"
         saveButton = true
         saveButtonAttr = """style='background-color:#1976D2; color:white;' """
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
         deleteButton = false
-        flexGridValues = ['xs12', 'sm6', 'md6', 'lg6', 'xl4']
+        cssGridValues =  ['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'4']
         wrapInForm=true
         childDataframes=["vueElintegroResetPasswordDataframe"]
         doBeforeSave = """if(params.transits.uploadPicture.value){
@@ -806,7 +816,7 @@ beans {
                 "person.id":[
                         widget: "NumberInputWidgetVue",
                         "required": "required"
-                        ,"flexGridValues":['xs12', 'sm6', 'md6', 'lg6', 'xl6']],
+                        ,"cssGridValues" :['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']],
 
                 "person.firstName":[
                         widget: "InputWidgetVue",
@@ -825,13 +835,13 @@ beans {
                         widget: "DateWidgetVue"
                         ,"required": "required"
                         ,attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """
-                        ,"flexGridValues":['xs12', 'sm6', 'md6', 'lg12', 'xl4']],
+                        ,"cssGridValues" :['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'4']],
                 "person.email":[
                          widget: "EmailWidgetVue"
                         ,"required": "required"
                         ,readOnly: true
                          ,attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """
-                        ,"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "person.phone":[
                           widget: "PhoneNumberWidgetVue"
@@ -841,7 +851,7 @@ beans {
                 ],
                 "person.languages":[
                         widget: "ComboboxVue"
-                        ,"flexGridValues":['xs12', 'sm6', 'md6', 'lg6', 'xl4']
+                        ,"cssGridValues" :['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'4']
                         , hql: """select language.id as id, language.ename as ename from Language as language"""
                         ,"displayMember":"ename"
                         ,"valueMember":"id"
@@ -854,7 +864,7 @@ beans {
                         "widget" : "PictureDisplayWidgetVue",
                         "aspectRatio":"2.5",
                         "attr": "contain",
-                        "flexGridValues":['xs12', 'sm6', 'md6', 'lg6', 'xl6'],
+                        "cssGridValues" :['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6'],
                         "width":200,
                         "height":200],
 
@@ -871,7 +881,7 @@ beans {
 
         ]
 
-        dataframeButtons = [ resetPassword: [name:"resetPassword", type: "button",attr: """style='background-color:#1976D2; color:white;'  """, url: "", showAsDialog: true, "flexGridValues":['xs12', 'sm6', 'md6', 'lg6', 'xl6'], refDataframe: ref("vueElintegroResetPasswordDataframe")] ]
+        dataframeButtons = [ resetPassword: [name:"resetPassword", type: "button",attr: """style='background-color:#1976D2; color:white;'  """, url: "", showAsDialog: true, "cssGridValues" :['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6'], refDataframe: ref("vueElintegroResetPasswordDataframe")] ]
 
         currentFrameLayout = ref("vueElintegroUserProfileDataframeLayout")
 
@@ -888,7 +898,7 @@ beans {
         //These are values, that overrides the default ones
         saveButton = false
         wrapInForm=true
-        flexGridValues = ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']
 
         //Javascript to run after the save:
         doAfterSave="""
@@ -915,8 +925,8 @@ beans {
         bean.parent = dataFrameSuper
         bean.constructorArgs = ['vueElintegroApplicantsDataframe']
         dataframeLabelCode = "Applicants Detail"
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
-        isGlobal = true
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
+        isGlobal = false
         saveButton = false
         initOnPageLoad = true
         route = true
@@ -950,7 +960,7 @@ beans {
                 "tab":[
                         widget: "TabWidgetVue",
                         dataframes : ["vueElintegroApplicantGeneralInformationDataframe","vueElintegroApplicantSelfAssessmentDataframe","vueElintegroApplicantCVDataframe","vueElintegroApplicantQuestionAnswerDataframe","vueElintegroCommentPageForApplicantDataframe"]
-                        ,"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,flexAttr: "pa-0"
                         ,showCloseButton:true
                 ]
@@ -975,7 +985,7 @@ beans {
                                                             'fieldName':'applicant',
                                                             'key': 'Id'});
                           """
-        flexGridValues = ['xs12', 'sm6', 'md6', 'lg6', 'xl6']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']
         addFieldDef = ["person.firstName":["name":"firstName","type":"link","widget":"InputWidgetVue",attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """],
                        "person.lastName":["name":"lastName","type":"link","widget":"InputWidgetVue","validationRules":[[condition:"v => (v && v.length <= 30)",message:"LastName.must.be.less.than.30"]],attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """],
                        "person.email":["name":"email","type":"link","widget":"EmailWidgetVue","validationRules":[[condition:"v => !!v", message: 'email.required.message']],attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """],
@@ -989,7 +999,7 @@ beans {
                        ]
         ]
         dataframeButtons = [next: [name:"next", type: "button",attr: """style='background-color:#1976D2; color:white;' """, script:"""excon.saveToStore("vueElintegroApplicantDetailsDataframe", "vueElintegroApplicantDetailsDataframe_tab_model","vueElintegroApplicantSelfAssessmentDataframe-tab-id");
-                                                                                \n""",flexGridValues: ['xs6', 'sm6', 'md6', 'lg6', 'xl6'], url: ""]]
+                                                                                \n""","cssGridValues" :['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6'], url: ""]]
 
         currentFrameLayout = ref("vueElintegroApplicantGeneralInformationDataframeLayout")
     }
@@ -1008,7 +1018,7 @@ beans {
         initOnPageLoad = true
         dataframeLabelCode = """Self.assessment"""
         putFillInitDataMethod = true
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         readonly = true
         addFieldDef =[
                 "applicationSkill":[ widget          : "GridWidgetVue"
@@ -1020,9 +1030,9 @@ beans {
                 ]
         ]
         dataframeButtons = [next: [name:"next", type: "button",attr: """style='background-color:#1976D2; color:white;' """, script:"""excon.saveToStore("vueElintegroApplicantDetailsDataframe", "vueElintegroApplicantDetailsDataframe_tab_model","vueElintegroApplicantCVDataframe-tab-id");
-                                                                                \n""", flexGridValues:['xs3', 'sm3', 'md6', 'lg6', 'xl6']],
+                                                                                \n""", "cssGridValues" : ['xs':'3', 'sm':'3', 'md':'6', 'lg':'6', 'xl':'6']],
                             previous: [name:"previous", type: "button",attr: """style='background-color:#1976D2; color:white;' """, script:"""excon.saveToStore("vueElintegroApplicantDetailsDataframe", "vueElintegroApplicantDetailsDataframe_tab_model","vueElintegroApplicantGeneralInformationDataframe-tab-id");
-                                                                                \n""", flexGridValues:['xs9', 'sm9', 'md6', 'lg6', 'xl6']]
+                                                                                \n""", "cssGridValues" : ['xs':'9', 'sm':'9', 'md':'6', 'lg':'6', 'xl':'6']]
         ]
         currentFrameLayout = ref("emptyDataframeLayout")
     }
@@ -1048,22 +1058,22 @@ beans {
                                   name:"fileName"
                                  ,widget: "FilesDisplayWidgetVue"
                                  ,"aspectRatio":"1"
-                                 ,"flexGridValues":['xs12', 'sm6', 'md6', 'lg6', 'xl6']
+                                 ,"cssGridValues" : ['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']
                                  ,"height":100
                                  ,"width":100],
                 "images.name":[
                                 "widget" : "PictureDisplayWidgetVue",
                                 "aspectRatio":"2.5",
                                 "attr": "contain",
-                                "flexGridValues":['xs12', 'sm6', 'md6', 'lg6', 'xl6'],
+                                "cssGridValues" : ['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6'],
                                 "width":200,
                                 "height":200]
                 ]
 
         dataframeButtons = [next: [name:"next", type: "button",attr: """style='background-color:#1976D2; color:white;' """, script:"""excon.saveToStore("vueElintegroApplicantDetailsDataframe", "vueElintegroApplicantDetailsDataframe_tab_model","vueElintegroApplicantQuestionAnswerDataframe-tab-id");
-                                                                                \n""", flexGridValues:['xs3', 'sm3', 'md6', 'lg6', 'xl6']],
+                                                                                \n""", "cssGridValues" : ['xs':'3', 'sm':'3', 'md':'6', 'lg':'6', 'xl':'6']],
                             previous: [name:"previous", type: "button",attr: """style='background-color:#1976D2; color:white;' """, script:"""excon.saveToStore("vueElintegroApplicantDetailsDataframe", "vueElintegroApplicantDetailsDataframe_tab_model","vueElintegroApplicantSelfAssessmentDataframe-tab-id");
-                                                                                \n""", flexGridValues: ['xs9', 'sm9', 'md6', 'lg6', 'xl6']]
+                                                                                \n""", "cssGridValues" : ['xs':'9', 'sm':'9', 'md':'6', 'lg':'6', 'xl':'6']]
         ]
         currentFrameLayout = ref("emptyDataframeLayout")
     }
@@ -1083,7 +1093,7 @@ beans {
                                                             'key': 'Id'});
 """
         saveButton = false
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         hql = "select application.id as Id, application.question1, application.question2 from Application application where application.id=:applicationId"
         addFieldDef = [
                 "application.question1":[widget:"TextAreaWidgetVue"
@@ -1094,9 +1104,9 @@ beans {
                                          ,attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """,]
         ]
         dataframeButtons = [ next: [name:"next", type: "button",attr: """style='background-color:#1976D2; color:white;' """, script:"""excon.saveToStore("vueElintegroApplicantDetailsDataframe", "vueElintegroApplicantDetailsDataframe_tab_model","vueElintegroCommentPageForApplicantDataframe-tab-id");
-                                                                                \n""", flexGridValues:['xs3', 'sm3', 'md6', 'lg6', 'xl6']],
+                                                                                \n""", "cssGridValues" : ['xs':'3', 'sm':'3', 'md':'6', 'lg':'6', 'xl':'6']],
                              previous: [name:"previous", type: "button",attr: """style='background-color:#1976D2; color:white;' """, script:"""excon.saveToStore("vueElintegroApplicantDetailsDataframe", "vueElintegroApplicantDetailsDataframe_tab_model","vueElintegroApplicantCVDataframe-tab-id");
-                                                                                \n""", flexGridValues: ['xs9', 'sm9', 'md6', 'lg6', 'xl6']]
+                                                                                \n""", "cssGridValues" : ['xs':'9', 'sm':'9', 'md':'6', 'lg':'6', 'xl':'6']]
         ]
         currentFrameLayout = ref("vueElintegroApplicantQuestionAnswerDataframeLayout")
     }
@@ -1116,7 +1126,7 @@ beans {
 """
         saveButton = false
         hql="select application.id,application.comments,application.lastComment from Application application where application.id=:applicationId"
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         addFieldDef =[
                 "application.comments":[ widget: "TextAreaWidgetVue",
                              name:"Comments",
@@ -1128,9 +1138,9 @@ beans {
                                 ,attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """
                 ]
         ]
-        dataframeButtons = [  save: [name:"save",type:"button",attr: """style='background-color:#1976D2; color:white;' """, script: """this.addCommentsForApplicant(); """ ,flexGridValues: ['xs6', 'sm6', 'md6', 'lg6', 'xl6']],
+        dataframeButtons = [  save: [name:"save",type:"button",attr: """style='background-color:#1976D2; color:white;' """, script: """this.addCommentsForApplicant(); """ ,"cssGridValues" : ['xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']],
                               previous: [name:"previous", type: "button",attr: """style='background-color:#1976D2; color:white;' """, script:"""excon.saveToStore("vueElintegroApplicantDetailsDataframe", "vueElintegroApplicantDetailsDataframe_tab_model","vueElintegroApplicantQuestionAnswerDataframe-tab-id");
-                                                                                \n""", flexGridValues: ['xs6', 'sm6', 'md6', 'lg6', 'xl6']]
+                                                                                \n""", "cssGridValues" : ['xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']]
         ]
         currentFrameLayout = ref("vueElintegroCommentPageForApplicantDataframeLayout")
 
@@ -1147,7 +1157,7 @@ beans {
                           params['personId'] = domainKeys.person.id """
         doAfterSave = "excon.goToTab('vueNewEmployeeApplicantDataframe','vueNewEmployeeUploadResumeDataframe');"
         ajaxSaveUrl = "applicationForm/saveAddress"
-        flexGridValuesForSaveButton = ['xs4', 'sm4', 'md4', 'lg4', 'xl4']
+        cssGridValuesForSaveButton = ['xs':'4', 'sm':'4', 'md':'4', 'lg':'4', 'xl':'4']
         childDataframes =["vueMapWidgetDataframe"]
         deleteButton = false
         insertButton=false
@@ -1158,13 +1168,13 @@ beans {
         addFieldDef = [
                 "address.addressLine": [
                         "widget"   : "InputWidgetVue",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
 
                 ],
 
                 "address.addressLine2": [
                         "widget"   : "InputWidgetVue",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
 
                 ],
                 "address.postalZip": [
@@ -1175,7 +1185,7 @@ beans {
                         "widget"     : "ButtonWidgetVue",
                         insertAfter: "address.addressLine",
                         script       : """ this.updatedAddressValue = this.state.persisters.address.addressLine.value;""",
-                        "flexGridValues":['xs4', 'sm4', 'md4', 'lg4', 'xl4'],
+                        "cssGridValues" : ['xs':'4', 'sm':'4', 'md':'4', 'lg':'4', 'xl':'4'],
                 ],
                 "address.longitude":[
                         "widget"   : "InputWidgetVue"
@@ -1191,12 +1201,12 @@ beans {
                         passValueAsProp : true,
                         "showInMap"   :true,
                         "name"        : "googleMap",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                         "height"      :'500px'
 
                 ]
         ]
-        dataframeButtons = [ previous: [name:"previous", type: "button",script:"""Vue.set(this.\$store.state.vueNewEmployeeApplicantDataframe, "vueNewEmployeeApplicantDataframe_tab_model","vueNewEmployeeBasicInformationDataframe-tab-id");\n""" , flexGridValues: ['xs4', 'sm4', 'md4', 'lg4', 'xl4'], url: ""] ]
+        dataframeButtons = [ previous: [name:"previous", type: "button",script:"""Vue.set(this.\$store.state.vueNewEmployeeApplicantDataframe, "vueNewEmployeeApplicantDataframe_tab_model","vueNewEmployeeBasicInformationDataframe-tab-id");\n""" , "cssGridValues" : ['xs':'4', 'sm':'4', 'md':'4', 'lg':'4', 'xl':'4'], url: ""] ]
 
         currentFrameLayout = ref("vueAddressDataframeLayout")
 
@@ -1211,7 +1221,7 @@ beans {
                         "widget"   : "MapWidgetVue",
                         "showInMap":true,
                         "name"     : "googleMap",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                         "height"   :'500px'
 
                 ]
@@ -1233,7 +1243,7 @@ beans {
                         "hql":"select address.id as Id, address.addressLine as AddressLine, address.longitude as Longitude, address.latitude as Latitude from Address as address ",
                         "showInMap":true,
                         "name" : "googleMap",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                         "height" :'500px',
                         "initBeforePageLoad":true,
                         "displayMember":"AddressLine",
diff --git a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesGettingStartedPageLayoutVue.groovy b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesGettingStartedPageLayoutVue.groovy
index bd09aaa8..800ab0f2 100644
--- a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesGettingStartedPageLayoutVue.groovy
+++ b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesGettingStartedPageLayoutVue.groovy
@@ -173,7 +173,7 @@ beans {
                                  [DATAFRAME_SCRIPT][BUTTON_SCRIPT]
                                  
                                  </v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
     }
 
 
diff --git a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesTranslationAssistantLayoutVue.groovy b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesTranslationAssistantLayoutVue.groovy
index a9d2e82b..b3aa6dbb 100644
--- a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesTranslationAssistantLayoutVue.groovy
+++ b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesTranslationAssistantLayoutVue.groovy
@@ -22,7 +22,7 @@ beans{
                                         <vueFooterContainerDataframe/>
                                     </v-container>   
                                </v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
     vueMeetTranslatorAssistantIntroDataframeLayout(ColumnLayoutVue){bean ->
         layoutBeanName = bean.name
@@ -40,7 +40,7 @@ beans{
                                     </v-flex>     
                                </v-container>
                             """
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
     vueTranslatorAssistantBeoforeAndAfterLoggedInDataframeLayout(ColumnLayoutVue){bean->
         layoutBeanName = bean.name
@@ -75,7 +75,7 @@ beans{
                                         </v-row>    
                                   </v-flex>
                                 </v-container>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
 
     }
     vueCreateProjectForTranslationDataframeLayout(ColumnLayoutVue){ bean->
@@ -96,7 +96,7 @@ beans{
                                         </v-row>    
                                    </v-card>
                                </v-flex>"""
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
     }
     vueElintegroTranslatorDataframeLayout(ColumnLayoutVue){bean->
         layoutBeanName = bean.name
@@ -128,7 +128,7 @@ beans{
                                     </v-container>   
                                     </v-container>
                                  </v-flex>"""
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
     }
     vueAddNewRecordForCurrentProjectDataframeLayout(ColumnLayoutVue){ bean->
         layoutBeanName = bean.name
@@ -148,7 +148,7 @@ beans{
                                         <v-row class="pa-8" style="text-align: center;">[save]</v-row>
                                     </v-card>
                                  </v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
     vueEditTextOfNewlyAddedRecordForCurrentProjectDataframeLayout(ColumnLayoutVue){ bean ->
         layoutBeanName = bean.name
@@ -172,7 +172,7 @@ beans{
                                  [DATAFRAME_SCRIPT]
                                  <v-card-actions class = "justify-center">[BUTTON_SCRIPT]</v-card-actions>
                                  </v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
     }
     vueDeleteSourceRecordsOfGridDataframeLayout(ColumnLayoutVue){ bean ->
         layoutBeanName = bean.name
@@ -180,7 +180,7 @@ beans{
                                  [DATAFRAME_SCRIPT]
                                  <v-card-actions class = "justify-center">[BUTTON_SCRIPT]</v-card-actions>
                                  </v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
 
 
     }
@@ -193,7 +193,7 @@ beans{
                                                  <vueElintegroProgressBarDataframe v-if="progressBarEnable"/>
                                         </v-layout>
                                     </v-container></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
 
 
     }
@@ -233,7 +233,7 @@ beans{
                                     </v-flex>
                                 </v-container>
                                 """
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
     }
     vueNewsLetterDataframeLayout(ColumnLayoutVue){ bean ->
         layoutBeanName = bean.name
@@ -255,7 +255,7 @@ beans{
                                         </v-row>    
                                     </v-flex>
                                 </v-container> """
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
     }
     vueEditTranslatedRecordsOfGridDataframeLayout(ColumnLayoutVue){ bean->
         layoutBeanName = bean.name
@@ -270,7 +270,7 @@ beans{
                                        <v-row class="px-8">[Key][SourceText][Text]</v-row>[BUTTON_SCRIPT]
                                   </v-card>
                                </v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
     vueEditSourceRecordsOfGridDataframeLayout(ColumnLayoutVue){ bean->
         layoutBeanName = bean.name
@@ -285,20 +285,20 @@ beans{
                                        <v-row class="px-8">[Key][Text]</v-row>[BUTTON_SCRIPT]
                                   </v-card>
                                </v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
     vueDeleteTranslatedRecordsOfGridDataframeLayout(ColumnLayoutVue){ bean->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<v-flex xs12 sm12 md12 lg12 xl12><v-card round class='rounded-card' >
                                 <v-flex class="text-right"><v-tooltip bottom><v-btn icon target="_blank" slot="activator" @click.prevent="closevueDeleteTranslatedRecordsOfGridDataframe();"><v-icon medium >close</v-icon>
                                 </v-btn><span>Close</span></v-tooltip></v-flex>[DATAFRAME_SCRIPT][BUTTON_SCRIPT]</v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
     vueDialogBoxForNotLoggedInUserDataframeLayout(ColumnLayoutVue){ bean->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<v-flex xs12 sm12 md12 lg12 xl12>
                                <v-row><v-col cols="12" xs="0" sm="0" md="3" xl="3" lg="3"></v-col><v-col cols="12" xs="0" sm="0" md="6" xl="6" lg="6"><v-card><v-row><v-card-actions class="justify-center"><h1 style="margin-left:20px;">You must be logged in to continue...</h1></v-card-actions></v-row><br><v-row><v-col cols="12" style="margin-left:10px;">[BUTTON_SCRIPT]</v-col></v-row></v-card></v-col><v-col  cols="12" xs="0" sm="0" md="3" xl="3" lg="3"></v-col></v-row>
                                 </v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'md':'4', 'lg':'4', 'xl':'4']
     }
 }
\ No newline at end of file
diff --git a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesTranslationAssistantVue.groovy b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesTranslationAssistantVue.groovy
index a3781661..c435f335 100644
--- a/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesTranslationAssistantVue.groovy
+++ b/elintegrostartapp/grails-app/conf/spring/globech/elintegroWebsite/resourcesTranslationAssistantVue.groovy
@@ -29,12 +29,12 @@ beans{
                 "meetTranslatorTitle":["widget":"TextDisplayWidgetVue"
                             ,"name":"meetTranslatorTitle"
                             ,elementId: "meetTranslatorTitle"
-                            ,flexGridValues:['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                            ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "meetTranslatorSubTitle":["widget":"TextDisplayWidgetVue"
                                        ,"name":"meetTranslatorSubTitle"
                                        ,elementId: "meetTranslatorSubTitle"
-                                       ,flexGridValues:['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                                       ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
 
         ]
@@ -49,7 +49,7 @@ beans{
                 "translatorAssistant":["widget":"TextDisplayWidgetVue"
                             ,"name":"translatorAssistant"
                             ,elementId: "translatorAssistantBeforeLoggedIn"
-                            ,flexGridValues:['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                            ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "projectList":[
                         widget: "ComboboxVue"
@@ -57,12 +57,12 @@ beans{
                         ,"displayMember":"Name"
                         ,attr: """ background-color='#EBF9FF !important' color='#2AB6F6' outlined """
                         , search:true
-                        ,flexGridValues: [ 'xs12' ,'sm12', 'md12', 'lg12', 'xl12']
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ]
         ]
         dataframeButtons =[
-                translation:[name:"translate",type: "link",attr: """style='background-color:#1976D2; color:white;'  :disabled='enableDisableTranstaleButtonComputed' """,script: """this.enterTranslatorPage();""",flexGridValues:['xs0', 'sm4', 'md4', 'lg4', 'xl4'] ],
-                createProject:[name: "createProject",type: "button",attr: """style='background-color:#1976D2; color:white;'  """,showAsDialog: true,refDataframe: ref("vueCreateProjectForTranslationDataframe"),flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0'] ]
+                translation:[name:"translate",type: "link",attr: """style='background-color:#1976D2; color:white;'  :disabled='enableDisableTranstaleButtonComputed' """,script: """this.enterTranslatorPage();""","cssGridValues":['xs':'0', 'sm':'4', 'md':'4', 'lg':'4', 'xl':'4'] ],
+                createProject:[name: "createProject",type: "button",attr: """style='background-color:#1976D2; color:white;'  """,showAsDialog: true,refDataframe: ref("vueCreateProjectForTranslationDataframe"),"cssGridValues":['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0'] ]
         ]
         childDataframes = ['vueTranslatorDataframe','vueCreateProjectForTranslationDataframe']
         currentFrameLayout = ref("vueTranslatorAssistantBeoforeAndAfterLoggedInDataframeLayout")
@@ -76,7 +76,7 @@ beans{
                 "translatorAssistant":["widget":"TextDisplayWidgetVue"
                                        ,"name":"translatorAssistant"
                                        ,elementId: "translatorAssistantAfterLoggedIn"
-                                       ,flexGridValues:['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                                       ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "projectList":[
                         widget: "ComboboxVue"
@@ -84,12 +84,12 @@ beans{
                         ,"displayMember":"Name"
                         ,attr: """ background-color='#EBF9FF !important' color='#2AB6F6' outlined """
                         , search:true
-                        ,flexGridValues: [ 'xs12' ,'sm12', 'md12', 'lg12', 'xl12']
+                        ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ]
         ]
         dataframeButtons =[
-                translation:[name:"translate",type: "link",attr: """style='background-color:#1976D2; color:white;'  :disabled='enableDisableTranstaleButtonComputed' """,script: """this.enterTranslatorPage()""",flexGridValues:['xs0', 'sm4', 'md4', 'lg4', 'xl4'] ],
-                createProject:[name: "createProject",type: "button",attr: """style='background-color:#1976D2; color:white;'  """,showAsDialog: true,refDataframe: ref("vueCreateProjectForTranslationDataframe"),flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0'] ]
+                translation:[name:"translate",type: "link",attr: """style='background-color:#1976D2; color:white;'  :disabled='enableDisableTranstaleButtonComputed' """,script: """this.enterTranslatorPage()""","cssGridValues":['xs':'0', 'sm':'4', 'md':'4', 'lg':'4', 'xl':'4'] ],
+                createProject:[name: "createProject",type: "button",attr: """style='background-color:#1976D2; color:white;'  """,showAsDialog: true,refDataframe: ref("vueCreateProjectForTranslationDataframe"),"cssGridValues":['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0'] ]
         ]
         childDataframes = ['vueTranslatorDataframe','vueCreateProjectForTranslationDataframe']
         currentFrameLayout = ref("vueTranslatorAssistantBeoforeAndAfterLoggedInDataframeLayout")
@@ -103,26 +103,26 @@ beans{
                 "howYouDo":["widget":"TextDisplayWidgetVue"
                              ,"name":"howYouDo"
                              ,elementId: "howYouDo"
-                             ,flexGridValues:['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                             ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "howYouDoParagraphOne":[
                         "widget":"TextDisplayWidgetVue"
                         ,"name":"howYouDoParagraphOne"
-                        ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0']
+                        ,"cssGridValues":['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']
                 ],
                 "howYouDoParagraphTwo":[
                         "widget":"TextDisplayWidgetVue"
                         ,"name":"howYouDoParagraphTwo"
-                        ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0']
+                        ,"cssGridValues":['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']
                 ],
                 "howYouDoParagraphThree":[
                         "widget":"TextDisplayWidgetVue"
                         ,"name":"howYouDoParagraphThree"
-                        ,flexGridValues:['xs0', 'sm0', 'md0', 'lg0', 'xl0']
+                        ,"cssGridValues":['xs':'0', 'sm':'0', 'md':'0', 'lg':'0', 'xl':'0']
                 ],
                 "translateApp":["widget":"ButtonWidgetVue"
                             ,"name":"translateApp"
-                            ,flexGridValues:['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                            ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ]
         ]
         currentFrameLayout = ref("vueHowYouDoDataframeLayout")
@@ -137,11 +137,11 @@ beans{
                 "subscribe":["widget":"TextDisplayWidgetVue"
                         ,"name":"subscribe"
                         ,elementId: "subscribe"
-                        ,flexGridValues:['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "subscribeButton":["widget":"ButtonWidgetVue"
                                 ,"name":"subscribeButton"
-                                ,flexGridValues:['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                                ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ]
         ]
 
@@ -153,7 +153,7 @@ beans{
         dataframeLabelCode = "New.Project"
         initOnPageLoad = false
         saveButton = false
-        flexGridValues =['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         hql = "select project.id , project.name, project.sourceLanguage, project.sourceFile from Project as project"
         addFieldDef=[
                 "project.name":[
@@ -179,7 +179,7 @@ beans{
                         ,"name":"save"
                         ,attr: """style='background-color:#1976D2; color:white;' """
                         ,script: """let timeOut = 6000;this.saveProject(timeOut);"""
-                        ,flexGridValues:['xs0', 'sm0', 'md6', 'lg6', 'xl6']
+                        ,"cssGridValues":['xs':'0', 'sm':'0', 'md':'6', 'lg':'6', 'xl':'6']
                 ]
         ]
         currentFrameLayout = ref("vueCreateProjectForTranslationDataframeLayout")
@@ -192,7 +192,7 @@ beans{
         saveButton = false
         route = true
         vueStore = [state: [currentlySelectedProject:[:]]]
-        flexGridValues =['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         doBeforeRefresh = """
                          var projectDetails = excon.getFromStore('vueTranslatorDataframe','currentlySelectedProject')
                          var selectedProjectId = Number(projectDetails.projectId)
@@ -217,13 +217,13 @@ beans{
         hql = """select  project.name , project.sourceLanguage  from Project project where project.id=:projectId """
         addFieldDef =[
 
-                "project.name":[widget:"TextDisplayWidgetVue",isDynamic:true,"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']],
+                "project.name":[widget:"TextDisplayWidgetVue",isDynamic:true,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']],
                 "project.sourceLanguage":[
                         widget:"TextDisplayWidgetVue"
                         ,isDynamic:true
                         ,link : true
                         ,type: "link"
-                        ,"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,onClick:"sourceText();" ],
                 "notSelectedLanguages":[
                         widget: "ComboboxVue"
@@ -233,7 +233,7 @@ beans{
                         ,multiple: true
                         ,attr: """ outlined   background-color='#EBF9FF !important' color='#2AB6F6' """
                         ,valueMember:"id"
-                        ,"flexGridValues":['xs12', 'sm12', 'md8', 'lg9', 'xl9'],
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'8', 'lg':'9', 'xl':'9'],
                 ],
                 "add":[
                         "widget"     : "ButtonWidgetVue",
@@ -241,7 +241,7 @@ beans{
                         script       : """ this.addLanguage()""",
                         "attr"       :"style='background-color:#1976D2; color:white; margin-top:13px;'",
                         disabled     :"enableDisableAddButton",
-                        "flexGridValues":['xs12', 'sm12', 'md1', 'lg1', 'xl1'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'1', 'lg':'1', 'xl':'1'],
                 ],
                 "selectedLanguages":[
                         widget: "SimpleTableListWidgetVue"
@@ -255,16 +255,16 @@ beans{
                 "projectManager":[
                         "widget" : "ButtonWidgetVue",
                         icon : true,
-                        script : """ this.\$router.push("/translator-assistant/0");""",
+                        script : """ this.\$router.push("/translator");""",
                         "attr" : """class="ma-2" color="blue" text icon""",
                         "iconAttr":"""x-large dark""",
                         vuetifyIcon : "arrow_back",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                 ],
         ]
         dataframeButtons=[
-                downloadAllTranslatedFiles: [name: "downloadAllTranslatedFiles",type: "button",attr: """style='background-color:#1976D2; color:white;'  v-show = 'showOrHideDownloadAllFilesButton' """,script:""" this.downloadAllTranslatedFiles();""",flexGridValues:['xs12', 'sm6', 'md12', 'lg6', 'xl6']],
-                addNewRecord: [name: "addNewRecord",type: "button",attr: """style='background-color:#1976D2; color:white;'  """,showAsDialog: true, refDataframe: ref("vueAddNewRecordForCurrentProjectDataframe"),flexGridValues:['xs12', 'sm6', 'md12', 'lg6', 'xl6']],
+                downloadAllTranslatedFiles: [name: "downloadAllTranslatedFiles",type: "button",attr: """style='background-color:#1976D2; color:white;'  v-show = 'showOrHideDownloadAllFilesButton' """,script:""" this.downloadAllTranslatedFiles();""","cssGridValues":['xs':'12', 'sm':'6', 'md':'12', 'lg':'6', 'xl':'6']],
+                addNewRecord: [name: "addNewRecord",type: "button",attr: """style='background-color:#1976D2; color:white;'  """,showAsDialog: true, refDataframe: ref("vueAddNewRecordForCurrentProjectDataframe"),"cssGridValues":['xs':'12', 'sm':'6', 'md':'12', 'lg':'6', 'xl':'6']],
         ]
         childDataframes = ['vueAddNewRecordForCurrentProjectDataframe','vueGridOfSourceTextDataframe','vueGridOfTranslatedTextDataframe']
         currentFrameLayout= ref("vueElintegroTranslatorDataframeLayout")
@@ -281,12 +281,12 @@ beans{
                               params.namedParameters.projectId.value = projectId;
                               params.persisters.project.id.value = projectId;
                           """
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         hql = """select project.id ,project.sourceLanguage from Project project where project.id = :projectId """
         addFieldDef = [
                 "key":[widget:"InputWidgetVue" ,attr: """ autofocus outlined background-color='#EBF9FF !important' color='#2AB6F6' ""","validationRules":[[condition:"v => !!v",message:"key.required.message"],[condition:"v =>  (v && new RegExp(/^\\S+\$/).test(v))",message:"key.donot.have.space"]]],
                 "sourceText":[ widget:"InputWidgetVue","validationRules":[[condition:"v => !!v",message:"text.required.message"]],attr: """ outlined background-color='#EBF9FF !important' color='#2AB6F6' """],
-                "project.sourceLanguage":[widget:"TextDisplayWidgetVue",isDynamic:true,"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],],
+                "project.sourceLanguage":[widget:"TextDisplayWidgetVue",isDynamic:true,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],],
                 "textToTranslate":[
                           name: 'textToTranslate'
                         , widget: "GridWidgetVue"
@@ -317,7 +317,7 @@ beans{
 
         ]
         dataframeButtons=[
-                save: [name: "save",type: "button",attr: """style='background-color:#1976D2; color:white;'  """,flexGridValues:['xs12', 'sm12', 'md12', 'lg12', 'xl12'],script:"this.saveNewlyAddedRecord();"]
+                save: [name: "save",type: "button",attr: """style='background-color:#1976D2; color:white;'  ""","cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],script:"this.saveNewlyAddedRecord();"]
         ]
         childDataframes = ['vueEditTextOfNewlyAddedRecordForCurrentProjectDataframe']
         currentFrameLayout = ref("vueAddNewRecordForCurrentProjectDataframeLayout")
@@ -326,14 +326,14 @@ beans{
         bean.parent = dataFrameSuper
         bean.constructorArgs = ['vueEditTextOfNewlyAddedRecordForCurrentProjectDataframe']
         initOnPageLoad = true
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         saveButton = false
         doBeforeRefresh = """ params['projectId'] = excon.getFromStore('vueTranslatorDataframe','projectId');
                           """
         doAfterRefresh = """ params.transits.text.value = self.vueEditTextOfNewlyAddedRecordForCurrentProjectDataframe_prop.parentData.Text;"""
         addFieldDef = ["text":[ widget: "TextAreaWidgetVue",attr: """ outlined   background-color='#EBF9FF !important' color='#2AB6F6' """]]
         dataframeButtons=[
-                save: [name: "save",type: "button",attr: """style='background-color:#1976D2; color:white;'  """,flexGridValues:['xs12', 'sm12', 'md12', 'lg12', 'xl12'],script:"this.updateEditedTextInGrid();"]
+                save: [name: "save",type: "button",attr: """style='background-color:#1976D2; color:white;'  ""","cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],script:"this.updateEditedTextInGrid();"]
         ]
         currentFrameLayout = ref("vueEditTextOfNewlyAddedRecordForCurrentProjectDataframeLayout")
     }
@@ -342,7 +342,7 @@ beans{
         bean.constructorArgs = ['vueGridOfSourceTextDataframe']
         saveButton = false
         initOnPageLoad = true
-        flexGridValues =['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         doBeforeRefresh = """
                            params['projectId'] =  excon.getFromStore('vueGridOfSourceTextDataframe','projectId');
                            params['sourceLanguage'] =excon.getFromStore('vueGridOfSourceTextDataframe','sourceLanguage'); """
@@ -394,8 +394,8 @@ beans{
         initOnPageLoad = false
         putFillInitDataMethod = true
         saveButtonAttr = """style='background-color:#1976D2; color:white;' """
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md2', 'lg2', 'xl2']
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         doBeforeRefresh =  """
                             excon.setValuesForNamedParamsFromGrid({'targetDataframe': 'vueEditSourceRecordsOfGridDataframe',
                                                                     'namedParamKey': 'id', 
@@ -425,7 +425,7 @@ beans{
         bean.constructorArgs = ['vueGridOfTranslatedTextDataframe']
         saveButton = false
         initOnPageLoad = true
-        flexGridValues =['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         doBeforeRefresh = """params['targetLanguage'] = excon.getFromStore('vueGridOfTranslatedTextDataframe','targetLanguage');
                            params['projectId'] =  excon.getFromStore('vueGridOfTranslatedTextDataframe','projectId');
                            params['sourceLanguage'] =excon.getFromStore('vueGridOfTranslatedTextDataframe','sourceLanguage'); """
@@ -465,8 +465,8 @@ beans{
                                                          ,vuetifyIcon: [name: "delete"]
                                                         ]]]]
         ]]
-        dataframeButtons = [translateWithGoogle: [name: "translateWithGoogle",type: "button",attr: """style='background-color:#1976D2; color:white;'  v-show = 'translateWithGoogleButtonShowHide' """,flexGridValues:['xs12', 'sm12', 'md0', 'lg0', 'xl0'],script: """this.retrieveTranslatedText()"""],
-                            downloadTargetPropertyFile: [name: "downloadTargetPropertyFile",type: "button",attr: """style='background-color:#1976D2; color:white;'  v-show = '!downLoadButtonShowHide' """,flexGridValues:['xs12', 'sm12', 'md0', 'lg0', 'xl0'],script: """this.downloadTargetFile()"""]
+        dataframeButtons = [translateWithGoogle: [name: "translateWithGoogle",type: "button",attr: """style='background-color:#1976D2; color:white;'  v-show = 'translateWithGoogleButtonShowHide' ""","cssGridValues":['xs':'12', 'sm':'12', 'md':'0', 'lg':'0', 'xl':'0'],script: """this.retrieveTranslatedText()"""],
+                            downloadTargetPropertyFile: [name: "downloadTargetPropertyFile",type: "button",attr: """style='background-color:#1976D2; color:white;'  v-show = '!downLoadButtonShowHide' ""","cssGridValues":['xs':'12', 'sm':'12', 'md':'0', 'lg':'0', 'xl':'0'],script: """this.downloadTargetFile()"""]
         ]
         childDataframes = ["vueEditTranslatedRecordsOfGridDataframe","vueDeleteTranslatedRecordsOfGridDataframe","vueDialogBoxForNotLoggedInUserDataframe"]
         currentFrameLayout= ref("vueGridOfTranslatedTextDataframeLayout")
@@ -479,8 +479,8 @@ beans{
         initOnPageLoad = false
         putFillInitDataMethod = true
         saveButtonAttr = """style='background-color:#1976D2; color:white;' """
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md2', 'lg2', 'xl2']
-        flexGridValues = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         doBeforeRefresh =  """
                             excon.setValuesForNamedParamsFromGrid([{'targetDataframe': 'vueEditTranslatedRecordsOfGridDataframe',
                                                                     'namedParamKey': 'id', 
@@ -507,9 +507,9 @@ beans{
                                        ,attr: """outlined background-color='#EBF9FF !important' color='#2AB6F6' """,
                 ]
         ]
-        dataframeButtons = [save: [name: "save",type: "button",attr: """style='background-color:#1976D2; color:white;' """,script: """ this.saveEditedRecordOfTranslatedText();""",flexGridValues:['xs12', 'sm12', 'md2', 'lg2', 'xl2']],
-                            googleTranslate: [name: "googleTranslate",type: "button",attr: """style='background-color:#1976D2; color:white;' """,script: """ this.googleTranslateForEachRecord();""",flexGridValues:['xs12', 'sm12', 'md4', 'lg4', 'xl4']],
-                            restore: [name: "restore",type: "button",attr:"""style='background-color:#1976D2; color:white;' """,script: """this.vueEditTranslatedRecordsOfGridDataframe_fillInitData();""", flexGridValues:['xs12', 'sm12', 'md2', 'lg2', 'xl2']],
+        dataframeButtons = [save: [name: "save",type: "button",attr: """style='background-color:#1976D2; color:white;' """,script: """ this.saveEditedRecordOfTranslatedText();""","cssGridValues":['xs':'12', 'sm':'12', 'md':'2', 'lg':'2', 'xl':'2']],
+                            googleTranslate: [name: "googleTranslate",type: "button",attr: """style='background-color:#1976D2; color:white;' """,script: """ this.googleTranslateForEachRecord();""","cssGridValues":['xs':'12', 'sm':'12', 'md':'4', 'lg':'4', 'xl':'4']],
+                            restore: [name: "restore",type: "button",attr:"""style='background-color:#1976D2; color:white;' """,script: """this.vueEditTranslatedRecordsOfGridDataframe_fillInitData();""", "cssGridValues":['xs':'12', 'sm':'12', 'md':'2', 'lg':'2', 'xl':'2']],
         ]
         currentFrameLayout = ref("vueEditTranslatedRecordsOfGridDataframeLayout")
     }
@@ -533,8 +533,8 @@ beans{
         saveButton = false
         route = true
         currentRoute = 'login-page'
-        dataframeButtons = [register: [name: "register",type: "button", showAsDialog: true, attr:"""style='background-color:#1976D2; color:white;' """, refDataframe: ref("vueElintegroRegisterDataframe"), tooltip: [message: 'Register'], "flexGridValues": ['xs6', 'sm6', 'md6', 'lg6', 'xl6']],
-                            login: [name: "login",type:"button",showAsDialog: true,attr:"""style='background-color:#1976D2; color:white;' """,refDataframe: ref("vueElintegroLoginTabDataframe"),tooltip: [message: 'Login'], flexGridValues:['xs6', 'sm6', 'md6', 'lg6', 'xl6']]
+        dataframeButtons = [register: [name: "register",type: "button", showAsDialog: true, attr:"""style='background-color:#1976D2; color:white;' """, refDataframe: ref("vueElintegroRegisterDataframe"), tooltip: [message: 'Register'], "cssGridValues": ['xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']],
+                            login: [name: "login",type:"button",showAsDialog: true,attr:"""style='background-color:#1976D2; color:white;' """,refDataframe: ref("vueElintegroLoginTabDataframe"),tooltip: [message: 'Login'], "cssGridValues":['xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']]
         ]
         currentFrameLayout =ref("vueDialogBoxForNotLoggedInUserDataframeLayout")
     }
diff --git a/elintegrostartapp/grails-app/conf/spring/globech/resourcesLayout.groovy b/elintegrostartapp/grails-app/conf/spring/globech/resourcesLayout.groovy
index 61899f7a..e4ca7683 100644
--- a/elintegrostartapp/grails-app/conf/spring/globech/resourcesLayout.groovy
+++ b/elintegrostartapp/grails-app/conf/spring/globech/resourcesLayout.groovy
@@ -26,7 +26,7 @@ beans {
     vueContainerLayout(ColumnLayoutVue){bean ->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<div id='app'><v-app><sectionlayout3/></v-app></div>"""
-        children = ["sectionLayout3"]
+        childLayouts = ["sectionLayout3"]
     }
     appNameDataframeLayout(RowLayoutVue){bean ->
         layoutBeanName = bean.name
@@ -43,7 +43,7 @@ beans {
     defaultDataframeLayout(ColumnLayoutVue){ bean->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<v-flex xs12 sm12 md12 lg12 xl12><v-card>[DATAFRAME_LABEL][DATAFRAME_SCRIPT][BUTTON_SCRIPT]</v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'4', 'xl':'4']
     }
 
     defaultDfrButtonLayout(RowLayoutVue){bean ->
@@ -55,7 +55,7 @@ beans {
         layoutPlaceHolder = """<v-flex xs12 sm12 md12 lg12 xl12><v-card round class='rounded-card' ><v-toolbar dark color="light-blue darken-2"><v-toolbar-title>[DATAFRAME_LABEL]</v-toolbar-title>
                                 <v-spacer></v-spacer><v-tooltip bottom><v-btn icon target="_blank" slot="activator" @click.prevent="closeDataframe"><v-icon medium >close</v-icon>
                                 </v-btn><span>Close</span></v-tooltip></v-toolbar>[DATAFRAME_SCRIPT][BUTTON_SCRIPT]</v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'4', 'xl':'4']
     }
 
     defaultRouteDataframeLayout(ColumnLayoutVue){ bean->
@@ -63,13 +63,13 @@ beans {
         layoutPlaceHolder = """<v-flex xs12 sm12 md12 lg12 xl12><v-card><v-toolbar dark color="blue darken-2" height="100px" style="margin-bottom:30px;">
                                  <v-toolbar-title class="white--text" style="margin:100px;">[DATAFRAME_LABEL]</v-toolbar-title>
                                   </v-toolbar>[DATAFRAME_SCRIPT][BUTTON_SCRIPT]</v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6', 'lg':'4', 'xl':'4']
     }
 
     vueEmbeddedDataframeLayout(ColumnLayoutVue){ bean->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<div>[DATAFRAME_LABEL]<v-layout row wrap justify-end align-start> [DATAFRAME_SCRIPT][BUTTON_SCRIPT]</v-layout></div>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
     }
 
     treeWidgetDataframeLayout(ColumnLayoutVue){bean ->
@@ -84,6 +84,6 @@ beans {
     formDataframeLayout(ColumnLayoutVue){ bean->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<v-flex xs12 sm12 md12 lg12 xl12><v-card>[DATAFRAME_LABEL][DATAFRAME_SCRIPT]<v-card-actions><v-container fluid grid-list-lg pa-0><v-layout row wrap>[previous][ALL_OTHER_BUTTONS]</v-layout></v-container></v-card-actions></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'4', 'xl':'4']
     }
 }
diff --git a/elintegrostartapp/grails-app/conf/spring/globech/resourcesLayoutVue.groovy b/elintegrostartapp/grails-app/conf/spring/globech/resourcesLayoutVue.groovy
index 21b9bcc8..5d2cf9f2 100644
--- a/elintegrostartapp/grails-app/conf/spring/globech/resourcesLayoutVue.groovy
+++ b/elintegrostartapp/grails-app/conf/spring/globech/resourcesLayoutVue.groovy
@@ -31,8 +31,8 @@ beans {
                                      <midsectionlayout/>
                                      <footerlayout/>
                                </div>"""
-        children = ["navigationLayout", "midSectionLayout", "footerLayout"]
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        childLayouts = ["navigationLayout", "midSectionLayout", "footerLayout"]
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
     }
     /*<v-card color="light-blue darken-2" text><v-layout row align-start justify-end>
     <v-flex grow> <vuetoolbardataframe/> </v-flex>
@@ -84,7 +84,7 @@ beans {
                                       <mainsectionlayout />
                                      <columnspacerlayout/>
                                      </v-layout></v-container></v-content>"""
-        children = ["columnSpacerLayout", "mainSectionLayout"]
+        childLayouts = ["columnSpacerLayout", "mainSectionLayout"]
     }
     mainSectionLayout(ColumnLayoutVue) { bean ->
         layoutBeanName = bean.name
@@ -97,8 +97,8 @@ beans {
                                         <v-flex xs2 order-lg3></v-flex>
                                         </v-layout></v-container></v-content></v-layout>"""
 //        childDataframes = ["vueApplicationFormDataframe"]
-        children = ["mainPageMessageLayout"]
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        childLayouts = ["mainPageMessageLayout"]
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
     }
 //            <router-view name='vueapplicationformdataframe'/>
 //
@@ -116,7 +116,7 @@ beans {
                                         <router-view :key="\$route.fullPath"></router-view>
                                          <router-view name='vueownerdataframe'/>
                                         </v-layout></v-container></v-content></v-flex></v-layout>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
     }
 
 
@@ -129,7 +129,7 @@ beans {
     vueUserProfileDataframeLayout(ColumnLayoutVue) { bean ->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<v-flex xs12 sm12 md12 lg12 xl12><v-card round width='fit-content'><v-toolbar dark color="light-blue darken-2"><v-toolbar-title class="white--text">My Profile</v-toolbar-title><v-spacer></v-spacer></v-toolbar>[vueUserProfileDataframe]<v-card-actions><v-container fluid grid-list-lg pa-0><v-layout row wrap pa-2>[ALL_OTHER_BUTTONS][saveButton]</v-layout></v-container></v-card-actions></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
     }
 
 
@@ -156,7 +156,7 @@ beans {
         layoutPlaceHolder = """<v-flex xs12 sm12 md12 lg12 xl12><v-card round class='rounded-card'><v-toolbar dark color="light-blue darken-2"><v-toolbar-title>[DATAFRAME_LABEL]</v-toolbar-title>
                                 <v-spacer></v-spacer><v-tooltip bottom><v-btn icon target="_blank" slot="activator" @click.prevent="closeDataframe"><v-icon medium >close</v-icon>
                                 </v-btn><span>Close</span></v-tooltip></v-toolbar>[DATAFRAME_SCRIPT][BUTTON_SCRIPT]</v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
     }
 
     vueUserManagementMenuDataframeLayout(RowLayoutVue) { bean ->
@@ -190,7 +190,7 @@ beans {
                                     <v-tab-item value="vueMedicalRecordDataframe-tab-id"><vuemedicalrecorddataframe/></v-tab-item>
                                    <v-tab-item value="vueMedicationsGridDataframe-tab-id"><vuemedicationsgriddataframe/></v-tab-item>
                                </v-tabs-items></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
 
     }
 
@@ -198,7 +198,7 @@ beans {
     vueContactDataframeLayout(ColumnLayoutVue) { bean ->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<div>[DATAFRAME_LABEL]<v-container><v-layout row wrap justify-end align-end> [DATAFRAME_SCRIPT]<div>[address]</div>[BUTTON_SCRIPT]</v-layout></v-container></div>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
     }
 
     prescribedMedicationDataframeLayout(ColumnLayoutVue) { bean ->
@@ -206,14 +206,14 @@ beans {
         layoutPlaceHolder = """<v-flex xs12 sm12 md12 lg12 xl12><v-card round class="rounded-card" style="width:500px; border-radius:10px;"><v-toolbar dark color="light-blue darken-2"><v-toolbar-title>[DATAFRAME_LABEL]</v-toolbar-title>
                                 <v-spacer></v-spacer><v-tooltip bottom><v-btn icon target="_blank" slot="activator" @click.prevent="closeDataframe"><v-icon medium >close</v-icon>
                                 </v-btn><span>Close</span></v-tooltip></v-toolbar>[vueMedicationsDataframe][DATAFRAME_SCRIPT]<v-layout ma-2 align-content-space-around row wrap align-center>[BUTTON_SCRIPT]</v-layout></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'4', 'xl':'4']
     }
 
 
     addressDataframeLayout(ColumnLayoutVue) { bean ->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<v-flex xs12 sm12 md12 lg12 xl12><v-card>[DATAFRAME_LABEL][DATAFRAME_SCRIPT]<v-card-actions><v-container fluid grid-list-lg pa-0><v-layout row wrap pa-2>[previous][ALL_OTHER_BUTTONS][googleMap]</v-layout></v-container></v-card-actions></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'4', 'xl':'4']
     }
     vueFormDetailDataframeLayout(ColumnLayoutVue) { bean ->
         layoutBeanName = bean.name
@@ -234,7 +234,7 @@ beans {
                                     <v-tab-item value="vueMedicalRecordDetailDataframe-tab-id">[vueMedicalRecordDetailDataframe]</v-tab-item>
                                    <v-tab-item value="vueMedicationsGridDetailDataframe-tab-id"><vuemedicationsgriddetaildataframe/></v-tab-item>
                                </v-tabs-items></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
 
     }
 
@@ -258,29 +258,29 @@ beans {
                                     <v-tab-item value="vueMedicalRecordEditDataframe-tab-id">[vueMedicalRecordEditDataframe]</v-tab-item>
                                    <v-tab-item value="vueMedicationsGridEditDataframe-tab-id"><vuemedicationsgrideditdataframe/></v-tab-item>
                                </v-tabs-items></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
 
     }
     vueContactFormDataframeLayout(ColumnLayoutVue) { bean ->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<div>[DATAFRAME_LABEL]<v-layout row wrap justify-center><v-flex xs12 sm12 md8 lg8 xl8><v-layout row wrap justify-left> [ALL_OTHER_FIELDS]</v-layout></v-flex><v-flex xs12 sm12 md4 lg4 xl4>[person.mainPicture]</v-flex></v-layout></div>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
     }
     vueContactDataframeLayout(ColumnLayoutVue) { bean ->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<div>[DATAFRAME_LABEL]<v-layout row wrap justify-center><v-flex xs12 sm12 md8 lg8 xl8><v-layout row wrap justify-left> [ALL_OTHER_FIELDS]</v-layout></v-flex><v-flex xs12 sm12 md4 lg4 xl4>[person.mainPicture]</v-flex>[ALL_OTHER_BUTTONS]</v-layout></div>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
     }
 
     vueContactDetailDataframeLayout(ColumnLayoutVue) { bean ->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<div>[DATAFRAME_LABEL]<v-layout row wrap justify-center><v-flex xs12 sm12 md8 lg8 xl8><v-layout row wrap justify-left> [ALL_OTHER_FIELDS]</v-layout></v-flex><v-flex xs12 sm12 md4 lg4 xl4>[person.mainPicture]</v-flex></v-layout></div>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
     }
     vueContactEditDataframeLayout(ColumnLayoutVue) { bean ->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<div>[DATAFRAME_LABEL]<v-layout row wrap justify-center><v-flex xs12 sm12 md8 lg8 xl8><v-form ref="vueContactEditDataframe_form"><v-layout row wrap justify-left> [ALL_OTHER_FIELDS]</v-layout></v-form></v-flex><v-flex xs12 sm12 md4 lg4 xl4>[person.mainPicture]</v-flex>[ALL_OTHER_BUTTONS]</v-layout></div>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
     }
 
     vueContactDetailDataframeLayout1(ColumnLayoutVue) { bean ->
@@ -288,17 +288,17 @@ beans {
         layoutPlaceHolder = """<v-card round class='rounded-card'><v-toolbar dark color="light-blue darken-2"><v-toolbar-title>[DATAFRAME_LABEL]</v-toolbar-title><v-spacer></v-spacer><v-tooltip bottom><v-btn icon target="_blank" slot="activator" @click.prevent="closeDataframe"><v-icon medium >close</v-icon>
                                    </v-btn><span>Close</span></v-tooltip></v-toolbar>
                                    <v-container grid-list-xl fluid><v-layout row wrap justify-center><v-flex xs12 sm12 md8 lg8 xl8><v-layout row wrap justify-left> [ALL_OTHER_FIELDS]</v-layout></v-flex><v-flex xs12 sm12 md4 lg4 xl4>[person.mainPicture]</v-flex>[BUTTON_SCRIPT]</v-layout></v-container></v-card>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
     }
     addressDetailDataframeLayout(ColumnLayoutVue) { bean ->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<v-flex xs12 sm12 md12 lg12 xl12><v-card>[DATAFRAME_LABEL][DATAFRAME_SCRIPT]<v-card-actions><v-container fluid grid-list-lg pa-0><v-layout row wrap></v-layout></v-container></v-card-actions></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'4', 'xl':'4']
     }
     addressEditDataframeLayout(ColumnLayoutVue) { bean ->
         layoutBeanName = bean.name
         layoutPlaceHolder = """<v-flex xs12 sm12 md12 lg12 xl12><v-card>[DATAFRAME_LABEL][DATAFRAME_SCRIPT]<v-card-actions><v-container fluid grid-list-lg pa-0><v-layout row wrap pa-2>[ALL_OTHER_BUTTONS][googleMap]</v-layout></v-container></v-card-actions></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg4', 'xl4']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'4', 'xl':'4']
     }
     vueEmployeeDataframeLayout(ColumnLayoutVue) { bean ->
         layoutBeanName = bean.name
@@ -321,7 +321,7 @@ beans {
                                      <v-card-actions><v-container fluid grid-list-lg pa-0><v-layout row wrap pa-2>[previous][ALL_OTHER_BUTTONS]</v-layout>
                                      </v-container></v-card-actions></v-layout></v-tab-item>
                                </v-tabs-items></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
 
     }
     vueEmployeeDetailDataframeLayout(ColumnLayoutVue) { bean ->
@@ -350,7 +350,7 @@ beans {
                                          </v-form>
                                     </v-layout></v-tab-item>
                                </v-tabs-items></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
 
     }
     vueEmployeeEditDataframeLayout(ColumnLayoutVue) { bean ->
@@ -379,7 +379,7 @@ beans {
                                          </v-form>
                                     </v-layout> <v-card-actions><v-container fluid grid-list-lg pa-0><v-layout row wrap pa-2>[ALL_OTHER_BUTTONS]</v-layout></v-container></v-card-actions></v-tab-item>
                                </v-tabs-items></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
 
     }
 
@@ -405,7 +405,7 @@ beans {
                                     </v-flex>
                                     </v-layout> <v-card-actions><v-container fluid grid-list-lg pa-0><v-layout row wrap pa-2>[previous][ALL_OTHER_BUTTONS]</v-layout></v-container></v-card-actions></v-tab-item>
                                </v-tabs-items></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
 
     }
     vueProviderDetailDataframeLayout(ColumnLayoutVue) { bean ->
@@ -436,7 +436,7 @@ beans {
                                          </v-flex>
                                     </v-layout></v-tab-item>
                                </v-tabs-items></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
 
     }
     vueProviderEditDataframeLayout(ColumnLayoutVue) { bean ->
@@ -467,7 +467,7 @@ beans {
                                          </v-flex>
                                     </v-layout> <v-card-actions><v-container fluid grid-list-lg pa-0><v-layout row wrap pa-2>[ALL_OTHER_BUTTONS]</v-layout></v-container></v-card-actions></v-tab-item>
                                </v-tabs-items></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
 
     }
 
@@ -493,7 +493,7 @@ beans {
                                     </v-flex>
                                     </v-layout> <v-card-actions><v-container fluid grid-list-lg pa-0><v-layout row wrap pa-2>[previous][ALL_OTHER_BUTTONS]</v-layout></v-container></v-card-actions></v-tab-item>
                                </v-tabs-items></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
 
     }
     vueVendorDetailDataframeLayout(ColumnLayoutVue) { bean ->
@@ -524,7 +524,7 @@ beans {
                                          </v-flex>
                                     </v-layout></v-tab-item>
                                </v-tabs-items></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
 
     }
     vueVendorEditDataframeLayout(ColumnLayoutVue) { bean ->
@@ -555,7 +555,7 @@ beans {
                                          </v-flex>
                                     </v-layout> <v-card-actions><v-container fluid grid-list-lg pa-0><v-layout row wrap pa-2>[ALL_OTHER_BUTTONS]</v-layout></v-container></v-card-actions></v-tab-item>
                                </v-tabs-items></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
 
     }
 
@@ -579,7 +579,7 @@ beans {
                                    </v-tab-item>
                                     <v-tab-item value="vueClientAddressDataframe-tab-id"><vueaddressdetaildataframe/></v-tab-item>
                                </v-tabs-items></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
 
     }
     vueClientEditDataframeLayout(ColumnLayoutVue) { bean ->
@@ -601,7 +601,7 @@ beans {
                                    </v-tab-item>
                                     <v-tab-item value="vueClientAddressDataframe-tab-id"><vueaddresseditdataframe/></v-tab-item>
                                </v-tabs-items></v-card></v-flex>"""
-        flexGridValues = ['xs12', 'sm6', 'md4', 'lg3', 'xl2']
+        cssGridValues = ['xs':'12', 'sm':'6','md':'4', 'lg':'3', 'xl':'2']
 
     }
 }
diff --git a/elintegrostartapp/grails-app/conf/spring/globech/resourcesScriptBean.groovy b/elintegrostartapp/grails-app/conf/spring/globech/resourcesScriptBean.groovy
index 6595f4ab..4539410d 100644
--- a/elintegrostartapp/grails-app/conf/spring/globech/resourcesScriptBean.groovy
+++ b/elintegrostartapp/grails-app/conf/spring/globech/resourcesScriptBean.groovy
@@ -140,7 +140,7 @@ beans {
         methods = """scrollTo(param){
            
             if(param =='ourClientsProjects'){
-                 excon.redirectPage(this,"client-project");
+                 this.\$router.push("/client-project");
             }else{
                 let element = document.getElementById(param);
                 if(element != null){
@@ -167,10 +167,10 @@ beans {
                         element.scrollIntoView({ behavior: 'smooth' });
                         break;
                     default : 
-                        excon.redirectPage(this,'home');                                
+                        this.\$router.push("/home");                                
                     }
                 }else{
-                       excon.redirectPage(this,'home');
+                       this.\$router.push("/home");  
                        this.\$nextTick(()=> window.document.getElementById(param).scrollIntoView()); 
                 }   
             }
@@ -657,7 +657,7 @@ beans {
                              
                              }
                              else{
-                                 excon.redirectPage(self,"login-page")
+                                 self.\$router.push("login-page");
                              }
                      },\n
         
@@ -783,7 +783,7 @@ beans {
         computed = """ enableDisableTranstaleButtonComputed(){if(this.state.transits.projectList.value){return false}else{return true;};},\n"""
         methods = """enterTranslatorPage(){
                      excon.saveToStore('vueTranslatorDataframe','currentlySelectedProject',this.state.transits.projectList.value);
-                     excon.redirectPage(this,'translator')
+                     this.\$router.push('/translate');
 
                  },\n"""
     }
@@ -791,7 +791,7 @@ beans {
         computed = """ enableDisableTranstaleButtonComputed(){if(this.state.transits.projectList.value){return false}else{return true;};},\n"""
         methods = """enterTranslatorPage(){
                      excon.saveToStore('vueTranslatorDataframe','currentlySelectedProject',this.state.transits.projectList.value);
-                     excon.redirectPage(this,'translator')
+                      this.\$router.push('/translate');
 
                  },\n"""
     }
@@ -897,7 +897,7 @@ beans {
                                        else{ 
                                             params['projectDetails'] = excon.getFromStore('vueTranslatorDataframe','currentlySelectedProject');
                                             excon.callApi('translatorAssistant/saveProjectDetailsInSessionForNotLoggedInUser', 'post', params).then(function(responseData){
-                                                 excon.redirectPage(self,"login-page");
+                                                 self.\$router.push("login-page")
                                             })
                                        }                 
                              },\n
diff --git a/elintegrostartapp/grails-app/conf/spring/globech/resourcesViewRoutes.groovy b/elintegrostartapp/grails-app/conf/spring/globech/resourcesViewRoutes.groovy
new file mode 100644
index 00000000..9439329d
--- /dev/null
+++ b/elintegrostartapp/grails-app/conf/spring/globech/resourcesViewRoutes.groovy
@@ -0,0 +1,28 @@
+package spring.globech
+
+import com.elintegro.erf.dataframe.vue.ViewRoutes
+
+beans {
+    /**
+     * Note: concat "Comp" in the component for all dataframes and layouts
+     */
+    allDataframeRoutes(ViewRoutes){
+        routes= """[
+              {path:"/", name:"sectionLayout", component: sectionLayoutComp},\n
+              {path:"/home", name:"vueElintegroHomeDataframe",component:vueElintegroHomeDataframeComp},\n
+              {path:"/contact-us", name:"vueContactUsPageDataframe",component:vueContactUsPageDataframeComp},\n
+              {path:"/careers", name:"vueCareersDataframe",component:vueCareersDataframeComp},\n
+              {path:"/terms-and-condition", name:"vueTermAndConditionDataframe",component:vueTermAndConditionDataframeComp},\n
+              {path:"/translator", name:"vueTranslatorAssistantDataframe",component:vueTranslatorAssistantDataframeComp},\n
+              {path:"/translate",name:"vueTranslatorDataframe", component: vueTranslatorDataframeComp},\n
+              {path:"/new-employee-applicant", name:"vueNewEmployeeApplicantDataframe",component:vueNewEmployeeApplicantDataframeComp},\n
+              {path:"/client-project", name:"vueClientProjectDataframe",component:vueClientProjectDataframeComp},\n
+              {path:"/forget-password", name:"vueElintegroForgetPasswordDataframe",component:vueElintegroForgetPasswordDataframeComp},\n
+              {path:"/change-forget-password", name:"vueElintegroChangeForgotPasswordDataframe",component:vueElintegroChangeForgotPasswordDataframeComp},\n
+              {path:"/login-page", name:"vueDialogBoxForNotLoggedInUserDataframe",component:vueDialogBoxForNotLoggedInUserDataframeComp},\n
+              {path:"/thank-you-message", name:"vueNewEmployeeThankYouMessageAfterSaveDataframe",component:vueNewEmployeeThankYouMessageAfterSaveDataframeComp},\n
+              {path:"/applicants", name:"vueElintegroApplicantsDataframe",component:vueElintegroApplicantsDataframeComp},\n
+                
+        ]"""
+    }
+}
diff --git a/elintegrostartapp/grails-app/conf/spring/globech/resourcesVue.groovy b/elintegrostartapp/grails-app/conf/spring/globech/resourcesVue.groovy
index 28d858a3..faa6a438 100644
--- a/elintegrostartapp/grails-app/conf/spring/globech/resourcesVue.groovy
+++ b/elintegrostartapp/grails-app/conf/spring/globech/resourcesVue.groovy
@@ -98,9 +98,9 @@ beans {
         createStore = true
 //        vueStore = ["state":"event_manager: true,\n"]
 
-        dataframeButtons = [ReportClientEvent:[name:"ReportClientEvent", type:"link", "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'], route: true, routeIdScript: "0", refDataframe: ref("vueRecordEventDataframe"), roles:["ROLE_ADMIN", "ROLE_NURSE", "ROLE_RECEPTIONIST", "ROLE_CARE_GIVER"], accessType: "ifAnyGranted"],
-                            IssueRequest:[name:"IssueRequest", type:"link", attr: "open-on-hover", "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'], roles:["ROLE_ADMIN", "ROLE_NURSE", "ROLE_RECEPTIONIST", "ROLE_CARE_GIVER", "ROLE_CLIENT"], accessType: "ifAnyGranted"],
-                            ReportIncident:[name:"ReportIncident", type:"link", "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'], roles:["ROLE_ADMIN", "ROLE_NURSE", "ROLE_RECEPTIONIST", "ROLE_CARE_GIVER"], accessType: "ifAnyGranted"]/*, attr:"text"*/
+        dataframeButtons = [ReportClientEvent:[name:"ReportClientEvent", type:"link", "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'], route: true, routeIdScript: "0", refDataframe: ref("vueRecordEventDataframe"), roles:["ROLE_ADMIN", "ROLE_NURSE", "ROLE_RECEPTIONIST", "ROLE_CARE_GIVER"], accessType: "ifAnyGranted"],
+                            IssueRequest:[name:"IssueRequest", type:"link", attr: "open-on-hover", "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'], roles:["ROLE_ADMIN", "ROLE_NURSE", "ROLE_RECEPTIONIST", "ROLE_CARE_GIVER", "ROLE_CLIENT"], accessType: "ifAnyGranted"],
+                            ReportIncident:[name:"ReportIncident", type:"link", "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'], roles:["ROLE_ADMIN", "ROLE_NURSE", "ROLE_RECEPTIONIST", "ROLE_CARE_GIVER"], accessType: "ifAnyGranted"]/*, attr:"text"*/
         ]
         currentFrameLayout = ref("vueUserManagementMenuDataframeLayout")
     }
@@ -110,12 +110,12 @@ beans {
         bean.constructorArgs = ['vueUserManagementMenuDataframe']
         isGlobal = true
         saveButton = false
-        dataframeButtons = [ApplicationManagement:[name:"ApplicationManagement", type:"link", "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'], "route" : true, routeIdScript: "0", refDataframe: ref("vueApplicationManagementDataframe") , roles:["ROLE_ADMIN", "ROLE_RECEPTIONIST", "ROLE_CARE_GIVER"], accessType: "ifAnyGranted"],
-                            ClientManagement:[name:"ClientManagement", type:"link", route: true, routeIdScript: "0", refDataframe: ref("vueClientGridDataframe"), "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'], roles:["ROLE_ADMIN", "ROLE_RECEPTIONIST", "ROLE_CARE_GIVER", "ROLE_NURSE"], accessType: "ifAnyGranted"],
-                            Employees:[name:"Employees", type:"link",  attr: "open-on-hover", route: true, routeIdScript: "0", refDataframe: ref("vueEmployeeGridDataframe"),"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'], roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"],
-                            Vendors:[name:"Vendors", type:"link",route: true, routeIdScript: "0", refDataframe: ref("vueVendorGridDataframe"), "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'], attr:"text", roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"],
-                            ServiceProviders:[name:"ServiceProviders", type:"link", attr:"text",route: true, routeIdScript: "0", refDataframe: ref("vueProviderGridDataframe"), "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'], roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"],
-                            Users:[name:"Users", type:"link", attr:"text", "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'], roles:["ROLE_SUPER_ADMIN"], accessType: "ifAnyGranted"]
+        dataframeButtons = [ApplicationManagement:[name:"ApplicationManagement", type:"link","cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],"route" : true, routeIdScript: "0", refDataframe: ref("vueApplicationManagementDataframe") , roles:["ROLE_ADMIN", "ROLE_RECEPTIONIST", "ROLE_CARE_GIVER"], accessType: "ifAnyGranted"],
+                            ClientManagement:[name:"ClientManagement", type:"link", route: true, routeIdScript: "0", refDataframe: ref("vueClientGridDataframe"), "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'], roles:["ROLE_ADMIN", "ROLE_RECEPTIONIST", "ROLE_CARE_GIVER", "ROLE_NURSE"], accessType: "ifAnyGranted"],
+                            Employees:[name:"Employees", type:"link",  attr: "open-on-hover", route: true, routeIdScript: "0", refDataframe: ref("vueEmployeeGridDataframe"),"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'], roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"],
+                            Vendors:[name:"Vendors", type:"link",route: true, routeIdScript: "0", refDataframe: ref("vueVendorGridDataframe"), "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'], attr:"text", roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"],
+                            ServiceProviders:[name:"ServiceProviders", type:"link", attr:"text",route: true, routeIdScript: "0", refDataframe: ref("vueProviderGridDataframe"), "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'], roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"],
+                            Users:[name:"Users", type:"link", attr:"text", "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'], roles:["ROLE_SUPER_ADMIN"], accessType: "ifAnyGranted"]
         ]
         currentFrameLayout = ref("vueUserManagementMenuDataframeLayout")
     }
@@ -126,14 +126,14 @@ beans {
         isGlobal = true
         saveButton = false
 
-        dataframeButtons = [Administrator:[name:"Administrator", type:"link", "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'], roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"],
-//                            Client:[name:"Client", type:"link", attr: "text", route: true, routeIdScript: "0", refDataframe: ref("vueClientGridDataframe"), "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'], roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"],
+        dataframeButtons = [Administrator:[name:"Administrator", type:"link", "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'], roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"],
+//                            Client:[name:"Client", type:"link", attr: "text", route: true, routeIdScript: "0", refDataframe: ref("vueClientGridDataframe"), "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'], roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"],
 
-//                            Receptionist:[name:"Receptionist", type:"link",  "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'], attr:"text",roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"],
-                            Employee:[name:"Employee", type:"link", route: true, routeIdScript: 0, refDataframe: ref("vueEmployeeAddDataframe"), "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'], attr:"text",roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"],
-                            Provider:[name:"Provider", type:"link", route: true, routeIdScript: 0, refDataframe: ref("vueProviderAddDataframe"), attr:"text",  "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'], roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"],
-//                            Relative:[name:"Relative", type:"link", attr:"text", route: true, routeIdScript: "0", refDataframe: ref("vueRelativeGridDataframe"), "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'], showAsDialog: true, roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"],
-                            Vendors:[name:"Vendors", type:"link", route: true, routeIdScript: 0, refDataframe: ref("vueVendorAddDataframe"), attr:"text",  "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'], roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"]
+//                            Receptionist:[name:"Receptionist", type:"link",  "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'], attr:"text",roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"],
+                            Employee:[name:"Employee", type:"link", route: true, routeIdScript: 0, refDataframe: ref("vueEmployeeAddDataframe"), "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'], attr:"text",roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"],
+                            Provider:[name:"Provider", type:"link", route: true, routeIdScript: 0, refDataframe: ref("vueProviderAddDataframe"), attr:"text",  "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'], roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"],
+//                            Relative:[name:"Relative", type:"link", attr:"text", route: true, routeIdScript: "0", refDataframe: ref("vueRelativeGridDataframe"), "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'], showAsDialog: true, roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"],
+                            Vendors:[name:"Vendors", type:"link", route: true, routeIdScript: 0, refDataframe: ref("vueVendorAddDataframe"), attr:"text",  "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'], roles:["ROLE_ADMIN"], accessType: "ifAnyGranted"]
         ]
         currentFrameLayout = ref("vueRegisterMenuDataframeLayout")
     }
@@ -156,36 +156,37 @@ beans {
 //        createStore = true
 //        childDataframes=["vueAddressDataframe"]
 
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+        cssGridValues = ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
         doAfterSave = """setTimeout(function(){ vueUserProfileDataframeVar.\$router.push('/');this.location.reload();}, 3000);"""
         route = true
         addFieldDef =[
                 "person.id":[
                         widget: "NumberInputWidgetVue",
                         "required": "required"
-                        ,"flexGridValues":['xs12', 'sm6', 'md6', 'lg6', 'xl6']],
+                        ,"cssGridValues": ['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']
+                        ],
 
                 "person.firstName":[
                         widget: "InputWidgetVue",
                         "required": "required"
                         ,"validate":["rule":["v => !!v || 'FirstName is required'", "v => (v && v.length <= 10) || 'FirstName must be less than 10'"]]
-                        ,"flexGridValues":['xs12', 'sm6', 'md6', 'lg6', 'xl4']],
+                        ,"cssGridValues": ['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'4']],
 
                 "person.lastName":[
                         widget: "InputWidgetVue",
                         "required": "required"
-                        ,"flexGridValues":['xs12', 'sm6', 'md6', 'lg6', 'xl4']
+                        ,"cssGridValues": ['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'4']
                         ,"validate":["rule":["v => !!v || 'LastName is required'", "v => (v && v.length <= 10) || 'LastName must be less than 10'"]]
                 ],
                 "person.bday":[
                         widget: "DateWidgetVue",
                         "required": "required"
-                        ,"flexGridValues":['xs12', 'sm6', 'md6', 'lg12', 'xl4']],
+                        ,"cssGridValues": ['xs':'12', 'sm':'6', 'md':'6', 'lg':'12', 'xl':'4']],
                 "person.email":[
                         widget: "EmailWidgetVue",
                         "required": "required"
                         ,readOnly: true
-                        ,"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"validate":["rule":["v => !!v || 'E-mail is required'"]]
                 ],
                 "person.phone":[
@@ -195,7 +196,7 @@ beans {
                 ],
                 "person.languages":[
                         widget: "MultiSelectComboboxVue"
-                        ,"flexGridValues":['xs12', 'sm6', 'md6', 'lg6', 'xl4']
+                        ,"cssGridValues": ['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'4']
                         , hql: """select language.id as id, language.ename as ename from Language as language"""
                         ,"displayMember":"ename"
                         ,"valueMember":"id"
@@ -206,7 +207,7 @@ beans {
                         "widget" : "PictureDisplayWidgetVue",
                         "aspectRatio":"2.5",
                         "attr": "contain",
-                        "flexGridValues":['xs12', 'sm6', 'md6', 'lg6', 'xl6'],
+                        "cssGridValues": ['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'4'],
                         "width":200,
                         "height":200],
 
@@ -224,7 +225,7 @@ beans {
 
         /*doAfterRefresh = """var currentlocation = this.location.href;
                              this.location.href = currentlocation + 'vueuserprofiledataframe'; """*/
-        dataframeButtons = [ resetPassword: [name:"resetPassword", type: "button", url: "", route: true, "flexGridValues":['xs12', 'sm6', 'md6', 'lg6', 'xl6'], refDataframe: ref("vueResetPasswordDfr")] ]
+        dataframeButtons = [ resetPassword: [name:"resetPassword", type: "button", url: "", route: true,"cssGridValues": ['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'4'] , refDataframe: ref("vueResetPasswordDfr")] ]
 
         currentFrameLayout = ref("vueUserProfileDataframeLayout")
 
@@ -276,8 +277,8 @@ beans {
         //Vue parameters
         isGlobal = true
         dataframeButtons = [
-                Register:[name:"register", type:"link", "flexGridValues":['xs12', 'sm6', 'md6', 'lg6', 'xl6'], showAsDialog: true, attr:"flat", script:""" this.vueRegisterDataframe_display = true;\n  excon.saveToStore('dataframeShowHideMaps','vueRegisterDataframe_display', true);\n""", refDataframe: ref("vueRegisterDataframe"), tooltip: [message: 'Register']],
-                Login:[name:"login", type:"link", attr:"flat", "flexGridValues":['xs12', 'sm6', 'md6', 'lg6', 'xl6'], showAsDialog: true,script:""" this.vueLoginDataframe_display = true; \n  excon.saveToStore('dataframeShowHideMaps','vueLoginDataframe_display', true);\n""", refDataframe: ref("vueLoginDataframe"), tooltip: [message: 'Login']]]
+                Register:[name:"register", type:"link","cssGridValues": ['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6'], showAsDialog: true, attr:"flat", script:""" this.vueRegisterDataframe_display = true;\n  excon.saveToStore('dataframeShowHideMaps','vueRegisterDataframe_display', true);\n""", refDataframe: ref("vueRegisterDataframe"), tooltip: [message: 'Register']],
+                Login:[name:"login", type:"link", attr:"flat","cssGridValues": ['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6'], showAsDialog: true,script:""" this.vueLoginDataframe_display = true; \n  excon.saveToStore('dataframeShowHideMaps','vueLoginDataframe_display', true);\n""", refDataframe: ref("vueLoginDataframe"), tooltip: [message: 'Login']]]
         currentFrameLayout = ref("loginLogoutNavigationLayout")
         createStore = true
 
@@ -295,7 +296,7 @@ beans {
 
         addFieldDef =[
                 "alert":[widget: "SnackbarWidgetVue"
-//                        ,"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+//                        ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ]
 
         ]
@@ -319,18 +320,18 @@ beans {
         saveButton = true
         wrapInForm=true
 
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         doAfterSave = """ excon.saveToStore('vueLoginNavigation','responseData');\nexcon.saveToStore('dataframeShowHideMaps','vueRegisterDataframe_display', false);\n
                            """
         addFieldDef =[
-                "user.email":[widget: "EmailWidgetVue", "placeHolder":"Enter your email","flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']],
-                "user.firstName":[widget: "InputWidgetVue", "placeHolder":"Enter your Firstname","flexGridValues":['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                "user.email":[widget: "EmailWidgetVue", "placeHolder":"Enter your email","cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']],
+                "user.firstName":[widget: "InputWidgetVue", "placeHolder":"Enter your Firstname","cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                                   ,"validate":["rule":["v => !!v || 'FirstName is required'", "v => (v && v.length <= 20) || 'FirstName must be less than 20'"]]],
-                "user.lastName":[widget: "InputWidgetVue", "placeHolder":"Enter your Lastname","flexGridValues":['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                "user.lastName":[widget: "InputWidgetVue", "placeHolder":"Enter your Lastname","cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                                  ,"validate":["rule":["v => !!v || 'LastName is required'", "v => (v && v.length <= 20) || 'LastName must be less than 20'"]]]
-                ,"user.password":[widget: "PasswordWidgetVue", "width":"150", "flexGridValues":['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                ,"user.password":[widget: "PasswordWidgetVue", "width":"150", "cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                                   ,"validate":["rule":["v => !!v || 'Password is required'", "v => (v && v.length >= 8) || 'Password must be greater than 8'"]]]
-                ,"password2":[widget: "PasswordWidgetVue", "width":"150", "insertAfter":"user.password", "flexGridValues":['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                ,"password2":[widget: "PasswordWidgetVue", "width":"150", "insertAfter":"user.password", "cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                               ,"validate":["rule":["v => !!(v==this.vueRegisterDataframe_user_password) || 'Password and Confirm Password must match'"]]]
         ]
 
@@ -350,9 +351,9 @@ beans {
         boolean loginWithSpringSecurity = Holders.grailsApplication.config.loginWithSpringSecurity?true:false
         String loginAuthenticateUrl = loginWithSpringSecurity?"login/authenticate" : "login/loginUser"
 
-        addFieldDef = ["user.password":["widget" : "PasswordWidgetVue", "name": "user.password", autoComplete:"on", "width":150,"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']]
-                       ,"user.username":["widget" : "EmailWidgetVue",  "name": "user.username", autoComplete:"on", "width":150, "errMessage":"Username should be an email","flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']]
-                       ,"rememberMe":["widget" : "CheckboxWidgetVue", height : '30px', "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']]
+        addFieldDef = ["user.password":["widget" : "PasswordWidgetVue", "name": "user.password", autoComplete:"on", "width":150,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']]
+                       ,"user.username":["widget" : "EmailWidgetVue",  "name": "user.username", autoComplete:"on", "width":150, "errMessage":"Username should be an email","cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']]
+                       ,"rememberMe":["widget" : "CheckboxWidgetVue", height : '30px', "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']]
         ]
 
         dataframeButtons = [ login:[name:"login", type: "button", url: "${loginAuthenticateUrl}", layout: "<v-flex xs12 sm12 md6 lg6 xl6 pa-0>[BUTTON_SCRIPT]</v-flex>", attr: """color='light-blue darken-2' dark style="width: 10px;" """, doBeforeSave:""" var elementId = '#loginDataframe';
@@ -404,8 +405,8 @@ beans {
                                                            this.location.reload();
                                                           //Dataframe.showHideDataframesBasedOnUserType(data);
                                                        """,
-                                                     failureScript:""" if(!response.msg){ this.location.reload();}"""],"flexGridValues":['xs12', 'sm12', 'md6', 'lg6', 'xl6']],
-                             forgetPassword:[name: "forgetPassword", type: "link", attr:"style='margin-left:-3px;'", script:""" console.log("Forget Password Clicked");""", "flexGridValues":['xs12', 'sm12', 'md6', 'lg6', 'xl6'],
+                                                     failureScript:""" if(!response.msg){ this.location.reload();}"""],"cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']],
+                             forgetPassword:[name: "forgetPassword", type: "link", attr:"style='margin-left:-3px;'", script:""" console.log("Forget Password Clicked");""", "cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6'],
                                              layout: "<v-flex xs12 sm12 md6 lg6 xl6 style='margin-bottom:10px;'><v-layout column align-start justify-center>[BUTTON_SCRIPT]</v-layout></v-flex>"],
                              logInWithGoogle:[name: "logInWithGoogle", type: "image", attr:"style='margin-left:-3px;'", image:[url: "vueLoginDataframe.button.logInWithGoogle.imageUrl", width:'135px', height: '48px'], script:"""
 //                                                                                             var url = "/elintegrostartapp/oauth/authenticate/google";
@@ -415,12 +416,12 @@ beans {
                                                                                                 window.opener.location.reload();
                                                                                                 close();
                                                                                              }*/
-                                                                                              """, "flexGridValues":['xs12', 'sm12', 'md6', 'lg6', 'xl6']],
+                                                                                              """, "cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']],
                              logInWithFacebook:[name: "logInWithFacebook", type: "image", attr: "style=\"margin-top:3px;\"", image:[url: "vueLoginDataframe.button.logInWithFacebook.imageUrl", width: '135px', height: '43px'],script:"""
                                                                                              var provider = 'facebook';
                                                                                              var url = "springSecurityOAuth2/authenticate?provider="+provider+"";
                                                                                              var childWindow = window.open(url, "payment",  "width=500,height=500");
-                                                                                              """, "flexGridValues":['xs12', 'sm12', 'md6', 'lg6', 'xl6']]
+                                                                                              """, "cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']]
 
         ]
 
@@ -444,13 +445,13 @@ beans {
                                 "widget" : "InputWidgetVue",
                                 "readOnly": true,
                                 "hide": true,
-                                "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                                "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                         ],*/
                 "person.mainPicture": [
                         "widget" : "PictureDisplayWidgetVue",
                         "layout": "<v-layout align-center justify-center><v-avatar :size=\"avatarSize\" color=\"grey lighten-4\">[FIELD_SCRIPT]</v-avatar></v-layout>",
                         "aspectRatio":"2.5",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                 ]
         ]
         currentFrameLayout = ref("vueAfterLoggedinDataframeLayout")
@@ -472,25 +473,25 @@ beans {
                         "widget" : "PictureDisplayWidgetVue",
                         "layout": "<v-layout align-center justify-center><v-avatar :size=\"90\" style='margin-top:0px;' color=\"grey lighten-4\">[FIELD_SCRIPT]</v-avatar></v-layout>",
                         "aspectRatio":"2.5",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                 ],
                 "person.firstName": [
                         "widget" : "InputWidgetVue",
                         "readOnly": true,
                         "height":"50px",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                 ],
                 "person.id": [
                         "widget" : "InputWidgetVue",
                         "readOnly": true,
                         hide: true,
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                 ]
 
         ]
 //        this.location.reload();
-        dataframeButtons = [profile:[name:'Profile', type: "link", attr: "text small", "flexGridValues":['xs12', 'sm12', 'md6', 'lg6', 'xl6'], showAsDialog: false, route:true, routeIdScript:"this.vueProfileMenuDataframe_person_id;", refDataframe: ref('vueUserProfileDataframe')],
-                            Logout:[name:"logout", type:"link", url:"logoff", attr:"text small","flexGridValues":['xs12', 'sm12', 'md6', 'lg6', 'xl6'], script:"", callBackParams:[failureScript:"""vueProfileMenuDataframeVar.\$router.push("/");this.location.reload();"""]]]
+        dataframeButtons = [profile:[name:'Profile', type: "link", attr: "text small", "cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6'], showAsDialog: false, route:true, routeIdScript:"this.vueProfileMenuDataframe_person_id;", refDataframe: ref('vueUserProfileDataframe')],
+                            Logout:[name:"logout", type:"link", url:"logoff", attr:"text small","cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6'], script:"", callBackParams:[failureScript:"""vueProfileMenuDataframeVar.\$router.push("/");this.location.reload();"""]]]
         currentFrameLayout = ref("vueProfileMenuDataframeLayout")
     }
 
@@ -505,19 +506,19 @@ beans {
         ajaxUrl = "dataframe/ajaxCreateNew"
         initOnPageLoad = true
         route = true
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         addFieldDef = [
 
                 "event.description":[
                         widget: "TextAreaWidgetVue"
-                        ,"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']],
+                        ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']],
                 "event.client": [
                         "widget":"ComboboxVue",
                         "name":"event.client",
                         "hql":"select client.id as id, person.firstName as firstName from Client as client inner join client.person person"
                         ,"displayMember":"firstName"
                         ,"valueMember":"id"
-                        ,"flexGridValues":['xs12', 'sm6', 'md6', 'lg6', 'xl6']
+                        ,"cssGridValues": ['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "event.eventType": [
                         "widget":"ComboboxVue",
@@ -525,7 +526,7 @@ beans {
                         "hql":"select type.id as id, type.code as code, type.name as name from EventType as type"
                         ,"displayMember":"name"
                         ,"valueMember":"id"
-                        ,"flexGridValues":['xs12', 'sm6', 'md6', 'lg6', 'xl6']
+                        ,"cssGridValues": ['xs':'12', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "event.images":[
                         "widget" : "PictureUploadWidgetVue"
@@ -576,7 +577,7 @@ beans {
                         , hql             : """select person.id as Id, person.firstName as Firstname, person.lastName as Lastname, person.email as email, person.phone as Phone from Relative relative inner join relative.person person"""
                         , gridWidth       : 420
                         , search          : true
-                        , "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        , "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ]
 
         ]
@@ -602,19 +603,19 @@ beans {
 
                 "person.email": [
                         "widget"        : "EmailWidgetVue",
-                        "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "person.phone"       : [
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
 
                 "person.firstName"   : [
                         "validate": ["rule": ["v => !!v || 'FirstName is required'", "v => (v && v.length <= 20) || 'FirstName must be less than 20'"]],
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "person.lastName"    : [
                         "validate": ["rule": ["v => !!v || 'LastName is required'", "v => (v && v.length <= 20) || 'LastName must be less than 20'"]],
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "person.mainPicture" : [
                         "widget"        : "PictureDisplayWidgetVue",
@@ -627,7 +628,7 @@ beans {
                                 "                \"person.mainPicture\":[\n" +
                                 "                        \"widget\": \"PictureDisplayWidgetVue\",\n" +
                                 "                        \"defaultValue\"  : \"elintegro_logo.png\",\n" +
-                                "                        flexGridValues: ['xs12', 'sm6', 'md1', 'lg4', 'xl4'],\n" +
+                                "                        \"cssGridValues\": ['xs':'12', 'sm':'6', 'md':'1', 'lg':'4', 'xl':'4'],\n" +
                                 "                        \"aspectRatio\":\"2.5\",\n" +
                                 "                      \"height\":\"20px\",\n" +
                                 "                        \"width\":\"300px\",\n" +
@@ -638,7 +639,7 @@ beans {
                                 "\n" +
                                 "    }`.jpg",
                         "aspectRatio"   : "2.5",
-                        "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                         "height"        : 200]
         ]
 
@@ -658,25 +659,25 @@ beans {
 
                 "person.email": [
                         "widget"        : "EmailWidgetVue",
-                        "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "person.phone"       : [
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
 
                 "person.firstName"   : [
                         "validate": ["rule": ["v => !!v || 'FirstName is required'", "v => (v && v.length <= 20) || 'FirstName must be less than 20'"]],
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "person.lastName"    : [
                         "validate": ["rule": ["v => !!v || 'LastName is required'", "v => (v && v.length <= 20) || 'LastName must be less than 20'"]],
-                        "flexGridValues": ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "person.mainPicture" : [
                         "widget"        : "PictureDisplayWidgetVue",
                         "defaultValue"  : "default_profile.jpg",
                         "aspectRatio"   : "2.5",
-                        "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                         "height"        : 200]
         ]
 
diff --git a/elintegrostartapp/grails-app/conf/spring/globech/userManagement/resourcesUserManagement.groovy b/elintegrostartapp/grails-app/conf/spring/globech/userManagement/resourcesUserManagement.groovy
index 35b2944d..d3f4abfa 100644
--- a/elintegrostartapp/grails-app/conf/spring/globech/userManagement/resourcesUserManagement.groovy
+++ b/elintegrostartapp/grails-app/conf/spring/globech/userManagement/resourcesUserManagement.groovy
@@ -30,7 +30,7 @@ beans {
         dataframeLabelCode = "Employee.Registration"
         //These are values, that overrides the default ones
         childDataframes = ["vueEmployeeAddressDataframe"]
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
 //        saveButtonAttr = " color='light-blue darken-2' dark"
         initOnPageLoad = false
         isGlobal = true
@@ -48,11 +48,11 @@ beans {
                         widget: "DataframeWidgetVue"
                         , name:"applicant"
                         , valueMember:"person",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"dataframe":ref("vueEmployeeContactDataframe")
                 ],
                 "employee.positionStart":[
-                        "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "employee.role"  :[
                         "widget"        : "ComboboxVue"
@@ -60,17 +60,17 @@ beans {
                         ,internationalize: true
                         ,"hql"          : "select role.id as id, role.authority as name from Role as role where isEmployee=true"
 
-                        ,"flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"displayMember": "name"
                         ,"valueMember"  : "id"
                 ],
 
                 "employee.description":[
                         widget: "TextAreaWidgetVue"
-                        ,"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']],
+                        ,"cssGridValues": ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']],
         ]
 
-        dataframeButtons = [ previous: [name:"previous", type: "button", script:"""Vue.set(this.\$store.state.vueEmployeeAddDataframe, "vueEmployeeAddDataframe_tab_model","vueEmployeeAddressDataframe-tab-id");\n""", flexGridValues: ['xs12', 'sm12', 'md6', 'lg6', 'xl6'],url: ""],
+        dataframeButtons = [ previous: [name:"previous", type: "button", script:"""Vue.set(this.\$store.state.vueEmployeeAddDataframe, "vueEmployeeAddDataframe_tab_model","vueEmployeeAddressDataframe-tab-id");\n""", "cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6'],url: ""],
 //                             Submit:[name:"submit", type: "button", script: "vueEmployeeAddDataframeVar.\$router.push('/');this.location.reload();"]
         ]
         currentFrameLayout = ref("vueEmployeeDataframeLayout")
@@ -85,7 +85,7 @@ beans {
         createStore = true
         dataframeLabelCode = "Contact.Information"
 //        childDataframes=["vueAddressDataframe"]
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         ajaxSaveUrl = "userManagementForm/saveContact"
         doAfterSave = """
 
@@ -95,25 +95,25 @@ beans {
 
                 "person.email":[
                         "widget"     : "EmailWidgetVue",
-                        "flexGridValues":['xs8', 'sm8', 'md8', 'lg8', 'xl8']
+                        "cssGridValues": ['xs':'8', 'sm':'8', 'md':'8', 'lg':'8', 'xl':'8']
                 ],
                 "person.phone":[
-                        "flexGridValues":['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues": ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
 
                 "person.firstName":[
                         "validate":["rule":["v => !!v || 'FirstName is required'", "v => (v && v.length <= 20) || 'FirstName must be less than 20'"]],
-                        "flexGridValues":['xs6', 'sm6', 'md6', 'lg6', 'xl6']
+                        "cssGridValues": ['xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "person.lastName":[
                         "validate":["rule":["v => !!v || 'LastName is required'", "v => (v && v.length <= 20) || 'LastName must be less than 20'"]],
-                        "flexGridValues":['xs6', 'sm6', 'md6', 'lg6', 'xl6']
+                        "cssGridValues": ['xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "person.mainPicture":[
                         "widget"      : "PictureDisplayWidgetVue",
                         "defaultValue":"default_profile.jpg",
                         "aspectRatio" :"2.5",
-                        "flexGridValues":['xs12', 'sm6', 'md6', 'lg4', 'xl4'],
+                        "cssGridValues": ['xs':'6', 'sm':'6', 'md':'6', 'lg':'4', 'xl':'4'],
                         "width"       :200,
                         "height"      :200]
         ]
@@ -136,7 +136,7 @@ beans {
         doBeforeSave = "params['personId'] = excon.getFromStore('vueEmployeeContactDataframe','key');"
         doAfterSave = "excon.saveToStore('vueEmployeeAddDataframe','vueEmployeeAddDataframe_tab_model', 'vueEmployeeAddDataframe-tab-id');"
 
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
         ajaxSaveUrl = "userManagementForm/saveAddress"
         //These are default values, they are here to demonstrate how to overwrite it with different button combination, if required
         childDataframes = ["vueMapWidgetDataframe"]
@@ -146,13 +146,13 @@ beans {
         addFieldDef = [
                 "address.addressLine": [
                         "widget"   : "InputWidgetVue",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
 
                 ],
 
                 "address.addressLine2": [
                         "widget"   : "InputWidgetVue",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
 
                 ],
                 "address.postalZip": [
@@ -164,7 +164,7 @@ beans {
                         "insertAfter":"address.addressLine",
                         script       : """ this.updatedAddressValue = this.vueEmployeeAddressDataframe_address_addressLine;""",
                         "attr"       :"round right",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                 ],
                 "googleMap": [
                         "widget"      : "DataframeWidgetVue",
@@ -174,13 +174,12 @@ beans {
                         passValueAsProp : true,
                         "showInMap"   :true,
                         "name"        : "googleMap",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                         "height"      :'500px'
 
                 ]
         ]
-        dataframeButtons = [ previous: [name:"previous", type: "button", script:"""Vue.set(this.\$store.state.vueEmployeeAddDataframe, "vueEmployeeAddDataframe_tab_model","vueEmployeeContactDataframe-tab-id");\n""",flexGridValues: ['xs12', 'sm12', 'md6', 'lg6', 'xl6'], url: ""] ]
-
+        dataframeButtons = [ previous: [name:"previous", type: "button", script:"""Vue.set(this.\$store.state.vueEmployeeAddDataframe, "vueEmployeeAddDataframe_tab_model","vueEmployeeContactDataframe-tab-id");\n""","cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6'], url: ""] ]
         currentFrameLayout = ref("addressDataframeLayout")
 
     }
@@ -231,7 +230,7 @@ beans {
 //                        , hql             : """select  person.id as ID, person.firstName as Firstname, person.lastName as Lastname, person.email as email from Employee employee inner join employee.person person inner join employee.facility facility where facility.id=:facilityId"""
                         , gridWidth       : 420
                         , showGridSearch          : true
-                        , "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        , "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ]
 
         ]
@@ -264,13 +263,13 @@ beans {
                 "employee.person":[
                         widget: "DataframeWidgetVue"
                         , name:"applicant"
-                        , valueMember:"id",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        , valueMember:"id"
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"dataframe":ref("vueContactDetailDataframe")
                 ],
                 "employee.positionStart":[
                         "readOnly"      : true,
-                        "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "employee.role"  :[
                         "widget"        : "ComboboxVue"
@@ -278,22 +277,21 @@ beans {
                         ,readOnly        : true
                         ,internationalize: true
                         ,"hql"          : "select role.id as id, role.authority as name from Role as role where isEmployee=true"
-
-                        ,"flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"displayMember": "name"
                         ,"valueMember"  : "id"
                 ],
 
                 "employee.description":[
                         widget: "TextAreaWidgetVue"
-                        ,"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']],
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']],
 
 
         ]
 
         /*doAfterRefresh = """var currentlocation = this.location.href;
                              this.location.href = currentlocation + 'vueuserprofiledataframe'; """*/
-//        dataframeButtons = [ previous: [name:"previous", type: "button", script:"this.\$store.state.vueApplicationFormDataframe.vueApplicationFormDataframe_tab_model  = 'vueMedicalRecordDataframe-tab-id'", url: "", "flexGridValues":['xs12', 'sm12', 'md6', 'lg6', 'xl6']] ]
+//        dataframeButtons = [ previous: [name:"previous", type: "button", script:"this.\$store.state.vueApplicationFormDataframe.vueApplicationFormDataframe_tab_model  = 'vueMedicalRecordDataframe-tab-id'", url: "", "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']] ]
         currentFrameLayout = ref("vueEmployeeDetailDataframeLayout")
     }
     vueEmployeeEditDataframe(DataframeVue) { bean ->
@@ -309,7 +307,7 @@ beans {
         deleteButton = false
         wrapInForm = true
         tab = true
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
 //        vueStore = ["state":"vueApplicationFormDataframe_tab_model: 'vueApplicationFormDataframe-tab-id',\n"]
         childDataframes=["vueContactEditDataframe", "vueAddressEditDataframe"]
 
@@ -318,11 +316,11 @@ beans {
                         widget: "DataframeWidgetVue"
                         , name:"applicant"
                         , valueMember:"id",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"dataframe":ref("vueContactEditDataframe")
                 ],
                 "employee.positionStart":[
-                        "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ],
                 "employee.role"  :[
                         "widget"        : "ComboboxVue"
@@ -330,21 +328,21 @@ beans {
                         ,internationalize: true
                         ,"hql"          : "select role.id as id, role.authority as name from Role as role where isEmployee=true"
 
-                        ,"flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"displayMember": "name"
                         ,"valueMember"  : "id"
                 ],
 
                 "employee.description":[
                         widget: "TextAreaWidgetVue"
-                        ,"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']],
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']],
 
 
         ]
 
         /*doAfterRefresh = """var currentlocation = this.location.href;
                              this.location.href = currentlocation + 'vueuserprofiledataframe'; """*/
-//        dataframeButtons = [ previous: [name:"previous", type: "button", script:"this.\$store.state.vueApplicationFormDataframe.vueApplicationFormDataframe_tab_model  = 'vueMedicalRecordDataframe-tab-id'", url: "", "flexGridValues":['xs12', 'sm12', 'md6', 'lg6', 'xl6']] ]
+//        dataframeButtons = [ previous: [name:"previous", type: "button", script:"this.\$store.state.vueApplicationFormDataframe.vueApplicationFormDataframe_tab_model  = 'vueMedicalRecordDataframe-tab-id'", url: "", "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']] ]
         currentFrameLayout = ref("vueEmployeeEditDataframeLayout")
     }
 
@@ -361,7 +359,7 @@ beans {
         dataframeLabelCode = "Provider.Registration"
         //These are values, that overrides the default ones
         childDataframes = ["vueProviderAddressDataframe"]
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
 //        saveButtonAttr = " color='light-blue darken-2' dark"
         initOnPageLoad = false
         isGlobal = true
@@ -379,7 +377,7 @@ beans {
                         widget: "DataframeWidgetVue"
                         , name:"applicant"
                         , valueMember:"person",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"dataframe":ref("vueProviderContactDataframe")
                 ],
                 "provider.providerType"  :[
@@ -388,14 +386,14 @@ beans {
                         ,internationalize: true
                         ,"hql"          : "select pType.id as id, pType.name as name from ProviderType as pType"
 
-                        ,"flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"displayMember": "name"
                         ,"valueMember"  : "id"
                 ]
 
         ]
 
-        dataframeButtons = [ previous: [name:"previous", type: "button", script:"""Vue.set(this.\$store.state.vueProviderAddDataframe, "vueProviderAddDataframe_tab_model","vueProviderAddressDataframe-tab-id");\n""", flexGridValues: ['xs12', 'sm12', 'md6', 'lg6', 'xl6'],url: ""],
+        dataframeButtons = [ previous: [name:"previous", type: "button", script:"""Vue.set(this.\$store.state.vueProviderAddDataframe, "vueProviderAddDataframe_tab_model","vueProviderAddressDataframe-tab-id");\n""", "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6'],url: ""],
 //                             Submit:[name:"submit", type: "button", script: "vueEmployeeAddDataframeVar.\$router.push('/');this.location.reload();"]
         ]
         currentFrameLayout = ref("vueProviderDataframeLayout")
@@ -410,7 +408,7 @@ beans {
         createStore = true
         dataframeLabelCode = "Contact.Information"
 //        childDataframes=["vueAddressDataframe"]
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         ajaxSaveUrl = "userManagementForm/saveContact"
         doAfterSave = """
 
@@ -420,25 +418,26 @@ beans {
 
                 "person.email":[
                         "widget"     : "EmailWidgetVue",
-                        "flexGridValues":['xs8', 'sm8', 'md8', 'lg8', 'xl8']
+                        "cssGridValues":['xs':'8', 'sm':'8', 'md':'8', 'lg':'8', 'xl':'8']
                 ],
                 "person.phone":[
-                        "flexGridValues":['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
 
                 "person.firstName":[
                         "validate":["rule":["v => !!v || 'FirstName is required'", "v => (v && v.length <= 20) || 'FirstName must be less than 20'"]],
-                        "flexGridValues":['xs6', 'sm6', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']
+
                 ],
                 "person.lastName":[
                         "validate":["rule":["v => !!v || 'LastName is required'", "v => (v && v.length <= 20) || 'LastName must be less than 20'"]],
-                        "flexGridValues":['xs6', 'sm6', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "person.mainPicture":[
                         "widget"      : "PictureDisplayWidgetVue",
                         "defaultValue":"default_profile.jpg",
                         "aspectRatio" :"2.5",
-                        "flexGridValues":['xs12', 'sm6', 'md6', 'lg4', 'xl4'],
+                        "cssGridValues":['xs':'12', 'sm':'6', 'md':'6', 'lg':'4', 'xl':'4'],
                         "width"       :200,
                         "height"      :200]
         ]
@@ -461,7 +460,7 @@ beans {
         doBeforeSave = "params['personId'] = excon.getFromStore('vueProviderContactDataframe','key');"
         doAfterSave = "excon.saveToStore('vueProviderAddDataframe','vueProviderAddDataframe_tab_model', 'vueProviderAddDataframe-tab-id');"
 
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
         ajaxSaveUrl = "userManagementForm/saveAddress"
         //These are default values, they are here to demonstrate how to overwrite it with different button combination, if required
         childDataframes = ["vueMapWidgetDataframe"]
@@ -471,13 +470,13 @@ beans {
         addFieldDef = [
                 "address.addressLine": [
                         "widget"   : "InputWidgetVue",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
 
                 ],
 
                 "address.addressLine2": [
                         "widget"   : "InputWidgetVue",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
 
                 ],
                 "address.postalZip": [
@@ -489,7 +488,7 @@ beans {
                         "insertAfter":"address.addressLine",
                         script       : """ this.updatedAddressValue = this.vueProviderAddressDataframe_address_addressLine;""",
                         "attr"       :"round right",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                 ],
                 "googleMap": [
                         "widget"      : "DataframeWidgetVue",
@@ -499,12 +498,12 @@ beans {
                         passValueAsProp : true,
                         "showInMap"   :true,
                         "name"        : "googleMap",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                         "height"      :'500px'
 
                 ]
         ]
-        dataframeButtons = [ previous: [name:"previous", type: "button", script:"""Vue.set(this.\$store.state.vueProviderAddDataframe, "vueProviderAddDataframe_tab_model","vueProviderContactDataframe-tab-id");\n""", flexGridValues: ['xs12', 'sm12', 'md6', 'lg6', 'xl6'],url: ""] ]
+        dataframeButtons = [ previous: [name:"previous", type: "button", script:"""Vue.set(this.\$store.state.vueProviderAddDataframe, "vueProviderAddDataframe_tab_model","vueProviderContactDataframe-tab-id");\n""", "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6'],url: ""] ]
 
         currentFrameLayout = ref("addressDataframeLayout")
 
@@ -554,7 +553,7 @@ beans {
                         , hql             : """select  person.firstName as Firstname, person.lastName as Lastname, provider.id as Id from Provider provider inner join provider.person person inner join provider.facility facility where facility.id=:facilityId"""
                         , gridWidth       : 420
                         , showGridSearch          : true
-                        , "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        , "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ]
 
         ]
@@ -590,7 +589,7 @@ beans {
                         widget: "DataframeWidgetVue"
                         , name:"applicant"
                         , valueMember:"id",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"dataframe":ref("vueContactDetailDataframe")
                 ],
                 "provider.providerType"  :[
@@ -600,7 +599,7 @@ beans {
                         ,internationalize: true
                         ,"hql"          : "select pType.id as id, pType.name as name from ProviderType as pType"
 
-                        ,"flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"displayMember": "name"
                         ,"valueMember"  : "id"
                 ]
@@ -624,7 +623,7 @@ beans {
         deleteButton = false
         wrapInForm = true
         tab = true
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
 //        vueStore = ["state":"vueApplicationFormDataframe_tab_model: 'vueApplicationFormDataframe-tab-id',\n"]
         childDataframes=["vueContactEditDataframe", "vueAddressEditDataframe"]
 
@@ -633,7 +632,7 @@ beans {
                         widget: "DataframeWidgetVue"
                         , name:"applicant"
                         , valueMember:"id",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"dataframe":ref("vueContactEditDataframe")
                 ],
                 "provider.providerType"  :[
@@ -642,7 +641,7 @@ beans {
                         ,internationalize: true
                         ,"hql"          : "select pType.id as id, pType.name as name from ProviderType as pType"
 
-                        ,"flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"displayMember": "name"
                         ,"valueMember"  : "id"
                 ],
@@ -651,7 +650,7 @@ beans {
 
         /*doAfterRefresh = """var currentlocation = this.location.href;
                              this.location.href = currentlocation + 'vueuserprofiledataframe'; """*/
-//        dataframeButtons = [ previous: [name:"previous", type: "button", script:"this.\$store.state.vueApplicationFormDataframe.vueApplicationFormDataframe_tab_model  = 'vueMedicalRecordDataframe-tab-id'", url: "", "flexGridValues":['xs12', 'sm12', 'md6', 'lg6', 'xl6']] ]
+//        dataframeButtons = [ previous: [name:"previous", type: "button", script:"this.\$store.state.vueApplicationFormDataframe.vueApplicationFormDataframe_tab_model  = 'vueMedicalRecordDataframe-tab-id'", url: "", "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']] ]
         currentFrameLayout = ref("vueProviderEditDataframeLayout")
     }
 
@@ -669,7 +668,7 @@ beans {
         dataframeLabelCode = "Vendor.Registration"
         //These are values, that overrides the default ones
         childDataframes = ["vueVendorAddressDataframe"]
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
 //        saveButtonAttr = " color='light-blue darken-2' dark"
         initOnPageLoad = false
         isGlobal = true
@@ -687,16 +686,16 @@ beans {
                         widget: "DataframeWidgetVue"
                         , name:"applicant"
                         , valueMember:"person",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"dataframe":ref("vueVendorContactDataframe")
                 ],
 
                 "vendor.description":[
                         widget: "TextAreaWidgetVue"
-                        ,"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']],
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']],
         ]
 
-        dataframeButtons = [ previous: [name:"previous", type: "button", script:"""Vue.set(this.\$store.state.vueVendorAddDataframe, "vueVendorAddDataframe_tab_model","vueVendorAddressDataframe-tab-id");\n""", flexGridValues: ['xs12', 'sm12', 'md6', 'lg6', 'xl6'],url: ""],
+        dataframeButtons = [ previous: [name:"previous", type: "button", script:"""Vue.set(this.\$store.state.vueVendorAddDataframe, "vueVendorAddDataframe_tab_model","vueVendorAddressDataframe-tab-id");\n""", "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6'],url: ""],
 //                             Submit:[name:"submit", type: "button", script: "vueEmployeeAddDataframeVar.\$router.push('/');this.location.reload();"]
         ]
         currentFrameLayout = ref("vueVendorDataframeLayout")
@@ -711,7 +710,7 @@ beans {
         createStore = true
         dataframeLabelCode = "Contact.Information"
 //        childDataframes=["vueAddressDataframe"]
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
         ajaxSaveUrl = "userManagementForm/saveContact"
         doAfterSave = """
 
@@ -721,25 +720,25 @@ beans {
 
                 "person.email":[
                         "widget"     : "EmailWidgetVue",
-                        "flexGridValues":['xs8', 'sm8', 'md8', 'lg8', 'xl8']
+                        "cssGridValues":['xs':'8', 'sm':'8', 'md':'8', 'lg':'8', 'xl':'8']
                 ],
                 "person.phone":[
-                        "flexGridValues":['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
 
                 "person.firstName":[
                         "validate":["rule":["v => !!v || 'FirstName is required'", "v => (v && v.length <= 20) || 'FirstName must be less than 20'"]],
-                        "flexGridValues":['xs6', 'sm6', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "person.lastName":[
                         "validate":["rule":["v => !!v || 'LastName is required'", "v => (v && v.length <= 20) || 'LastName must be less than 20'"]],
-                        "flexGridValues":['xs6', 'sm6', 'md6', 'lg6', 'xl6']
+                        "cssGridValues":['xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'xl':'6']
                 ],
                 "person.mainPicture":[
                         "widget"      : "PictureDisplayWidgetVue",
                         "defaultValue":"default_profile.jpg",
                         "aspectRatio" :"2.5",
-                        "flexGridValues":['xs12', 'sm6', 'md6', 'lg4', 'xl4'],
+                        "cssGridValues":['xs':'12', 'sm':'6', 'md':'6', 'lg':'4', 'xl':'4'],
                         "width"       :200,
                         "height"      :200]
         ]
@@ -762,7 +761,7 @@ beans {
         doBeforeSave = "params['personId'] = excon.getFromStore('vueVendorContactDataframe','key');"
         doAfterSave = "excon.saveToStore('vueVendorAddDataframe','vueVendorAddDataframe_tab_model', 'vueVendorAddDataframe-tab-id');"
 
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md6', 'lg6', 'xl6']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6']
         ajaxSaveUrl = "userManagementForm/saveAddress"
         //These are default values, they are here to demonstrate how to overwrite it with different button combination, if required
         childDataframes = ["vueMapWidgetDataframe"]
@@ -772,13 +771,13 @@ beans {
         addFieldDef = [
                 "address.addressLine": [
                         "widget"   : "InputWidgetVue",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
 
                 ],
 
                 "address.addressLine2": [
                         "widget"   : "InputWidgetVue",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
 
                 ],
                 "address.postalZip": [
@@ -790,7 +789,7 @@ beans {
                         "insertAfter":"address.addressLine",
                         script       : """ this.updatedAddressValue = this.vueVendorAddressDataframe_address_addressLine;""",
                         "attr"       :"round right",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                 ],
                 "googleMap": [
                         "widget"      : "DataframeWidgetVue",
@@ -800,12 +799,12 @@ beans {
                         passValueAsProp : true,
                         "showInMap"   :true,
                         "name"        : "googleMap",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12'],
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12'],
                         "height"      :'500px'
 
                 ]
         ]
-        dataframeButtons = [ previous: [name:"previous", type: "button", script:"""Vue.set(this.\$store.state.vueVendorAddDataframe, "vueVendorAddDataframe_tab_model","vueVendorContactDataframe-tab-id");\n""", flexGridValues: ['xs12', 'sm12', 'md6', 'lg6', 'xl6'], url: ""] ]
+        dataframeButtons = [ previous: [name:"previous", type: "button", script:"""Vue.set(this.\$store.state.vueVendorAddDataframe, "vueVendorAddDataframe_tab_model","vueVendorContactDataframe-tab-id");\n""", "cssGridValues":['xs':'12', 'sm':'12', 'md':'6', 'lg':'6', 'xl':'6'], url: ""] ]
 
         currentFrameLayout = ref("addressDataframeLayout")
 
@@ -855,7 +854,7 @@ beans {
                         , hql             : """select  person.firstName as Firstname, person.lastName as Lastname, vendor.id as Id from Vendor vendor inner join vendor.person person inner join vendor.facilities facility where facility.id=:facilityId"""
                         , gridWidth       : 420
                         , showGridSearch          : true
-                        , "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        , "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ]
 
         ]
@@ -889,13 +888,13 @@ beans {
                         widget: "DataframeWidgetVue"
                         , name:"applicant"
                         , valueMember:"id",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"dataframe":ref("vueContactDetailDataframe")
                 ],
 
                 "vendor.description":[
                         widget: "TextAreaWidgetVue"
-                        ,"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']],
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']],
 
         ]
 
@@ -917,7 +916,7 @@ beans {
         deleteButton = false
         wrapInForm = true
         tab = true
-        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
 //        vueStore = ["state":"vueApplicationFormDataframe_tab_model: 'vueApplicationFormDataframe-tab-id',\n"]
         childDataframes=["vueContactEditDataframe", "vueAddressEditDataframe"]
 
@@ -926,13 +925,13 @@ beans {
                         widget: "DataframeWidgetVue"
                         , name:"applicant"
                         , valueMember:"id",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"dataframe":ref("vueContactEditDataframe")
                 ],
 
                 "vendor.description":[
                         widget: "TextAreaWidgetVue"
-                        ,"flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']],
+                        ,"cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']],
         ]
 
         /*doAfterRefresh = """var currentlocation = this.location.href;
@@ -964,7 +963,7 @@ beans {
                         widget: "DataframeWidgetVue"
                         , name:"applicant"
                         , valueMember:"id",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"dataframe":ref("vueContactDetailDataframe")
                 ]
 
@@ -988,7 +987,7 @@ beans {
         deleteButton = false
         wrapInForm = true
         tab = true
-//        flexGridValuesForSaveButton = ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+//        cssGridValuesForSaveButton = ['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
 //        vueStore = ["state":"vueApplicationFormDataframe_tab_model: 'vueApplicationFormDataframe-tab-id',\n"]
         childDataframes=["vueContactEditDataframe", "vueAddressEditDataframe"]
 
@@ -997,7 +996,7 @@ beans {
                         widget: "DataframeWidgetVue"
                         , name:"applicant"
                         , valueMember:"id",
-                        "flexGridValues":['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                         ,"dataframe":ref("vueContactEditDataframe")
                 ]
         ]
@@ -1052,7 +1051,7 @@ beans {
                         , hql             : """select  person.firstName as Firstname, person.lastName as Lastname, client.id as Id from Client client inner join client.person person inner join client.facility facility where facility.id=:facilityId"""
                         , gridWidth       : 420
                         , showGridSearch  : true
-                        , "flexGridValues": ['xs12', 'sm12', 'md12', 'lg12', 'xl12']
+                        , "cssGridValues":['xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'xl':'12']
                 ]
 
         ]
diff --git a/elintegrostartapp/grails-app/conf/spring/resources.groovy b/elintegrostartapp/grails-app/conf/spring/resources.groovy
index 1830b0a9..8ec0cb13 100644
--- a/elintegrostartapp/grails-app/conf/spring/resources.groovy
+++ b/elintegrostartapp/grails-app/conf/spring/resources.groovy
@@ -52,6 +52,7 @@ beans = {
     loadResource "globech/resourcesLayout.groovy"
     loadResource "globech/resourcesLayoutVue.groovy"
     loadResource "globech/resourcesVue.groovy"
+    loadResource "globech/resourcesViewRoutes.groovy"
     loadResource "globech/applicationManagement/resourcesApplicationForm.groovy"
     loadResource "globech/applicationManagement/resourcesApplicationManagement.groovy"
     loadResource "globech/userManagement/resourcesUserManagement.groovy"
diff --git a/elintegrostartapp/grails-app/conf/spring/resourcesPages.groovy b/elintegrostartapp/grails-app/conf/spring/resourcesPages.groovy
index 6b45978d..124e3899 100644
--- a/elintegrostartapp/grails-app/conf/spring/resourcesPages.groovy
+++ b/elintegrostartapp/grails-app/conf/spring/resourcesPages.groovy
@@ -53,6 +53,7 @@ beans {
         ]
 		dataframesToShowInMainPage = []
 		containerLayout = "vueElintegroContainerLayout" //outermost layout name
+		viewRoutes = ref("allDataframeRoutes")
 	}
 
 }