diff -r ae5e8d740173 -r b28a3d6143bc www/js/profile_mash.js
--- a/www/js/profile_mash.js	Sat Dec 01 22:24:46 2018 +0100
+++ b/www/js/profile_mash.js	Wed Dec 05 14:16:39 2018 +0100
@@ -33,8 +33,8 @@
 		okButton: $('#delOk'),
 		cancelButton: $('#delCancel'),
 		initContent: function () {
-			$('#delOk').jqxButton({ width: '65px', theme: theme });
-			$('#delCancel').jqxButton({ width: '65px', theme: theme });
+			$('#delOk').jqxButton({ template: "danger", width: '65px', theme: theme });
+			$('#delCancel').jqxButton({ template: "success", width: '65px', theme: theme });
 			$('#delCancel').focus();
 		}
 	});
@@ -142,7 +142,7 @@
 		};
 		var stepAdapter = new $.jqx.dataAdapter(stepSource);
 		$("#grid").jqxGrid({
-			width: 640,
+			width: 800,
 			height: 330,
 			source: stepAdapter,
 			theme: theme,
@@ -155,7 +155,7 @@
 				var container = $("<div style='margin: 5px;'></div>");
 				toolbar.append(container);
 				container.append('<input style="margin-left: 100px;" id="addrowbutton" type="button" value="Nieuwe stap" />');
-				container.append('<input style="margin-left: 140px;" id="deleterowbutton" type="button" value="Verwijder stap" />');
+				container.append('<input style="margin-left: 290px;" id="deleterowbutton" type="button" value="Verwijder stap" />');
 				$("#addrowbutton").jqxButton({ theme: theme, width: 150 });
 				$("#deleterowbutton").jqxButton({ theme: theme, width: 150 });
 				// create new row.
@@ -175,13 +175,17 @@
 			},
 			columns: [
 				{ text: 'Stap naam', datafield: 'step_name' },
-				{ text: 'Stap type', datafield: 'step_type', width: 100, columntype: 'dropdownlist',
+				{ text: 'Stap type', datafield: 'step_type', width: 120, columntype: 'dropdownlist',
 				  createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
 				  	var dataSource = [ "Infusion", "Temperature", "Decoction" ];
-					editor.jqxDropDownList({ source: dataSource, dropDownHeight: 95 });
+					editor.jqxDropDownList({
+						source: dataSource,
+						dropDownHeight: 95,
+						dropDownWidth: 120
+					});
 				  }
 				},
-				{ text: 'Temperatuur', datafield: 'step_temp', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1',
+				{ text: 'Temperatuur', datafield: 'step_temp', width: 100, align: 'right', cellsalign: 'right', cellsformat: 'f1',
 				  validation: function (cell, value) {
 					if (value < 35 || value > 80) {
 						return { result: false, message: "De temperatuur moet tussen 35 en 80 zijn." };
@@ -189,7 +193,7 @@
 					return true;
 				  }
 			       	},
-				{ text: 'Eind', datafield: 'end_temp', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1',
+				{ text: 'Eind temp', datafield: 'end_temp', width: 100, align: 'right', cellsalign: 'right', cellsformat: 'f1',
 				  validation: function (cell, value) {
 					if (value < 35 || value > 80) {
 						return { result: false, message: "De temperatuur moet tussen 35 en 80 zijn." };
@@ -197,7 +201,7 @@
 					return true;
 				  }
 				},
-				{ text: 'Tijd', datafield: 'step_time', width: 70, align: 'right', cellsalign: 'right',
+				{ text: 'Rusttijd', datafield: 'step_time', width: 80, align: 'right', cellsalign: 'right',
 				  validation: function (cell, value) {
 				  	if (value < 1 || value > 360) {
 						return { result: false, message: "De tijd moet tussen 1 en 360 zijn." };
@@ -205,7 +209,7 @@
 					return true;
 				  }
 			       	},
-				{ text: 'Stap', datafield: 'ramp_time', width: 70, align: 'right', cellsalign: 'right',
+				{ text: 'Staptijd', datafield: 'ramp_time', width: 80, align: 'right', cellsalign: 'right',
 				  validation: function (cell, value) {
 					if (value < 1 || value > 60) {
 						return { result: false, message: "De tijd moet tussen 1 en 60 zijn." };
@@ -222,7 +226,7 @@
 
 	// initialize the input fields.
 	$("#name").jqxInput({ theme: theme, width: 250, height: 23 });
-	$("#notes").jqxInput({ theme: theme, width: 640, height: 100 });
+	$("#notes").jqxInput({ theme: theme, width: 800, height: 100 });
 	var editrow = -1;
 	// initialize jqxGrid
 	$("#jqxgrid").jqxGrid({
@@ -241,7 +245,7 @@
 			// add new row.
 			addButton.click(function (event) {
 				editrow = -1;
-				$("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } });
+				$("#popupWindow").jqxWindow({ position: { x: 160, y: 30 } });
 				$("#name").val('');
 				$("#notes").val('');
 				editsteps('');
@@ -258,7 +262,7 @@
 				}, buttonclick: function (row) {
 					// open the popup window when the user clicks a button.
 					editrow = row;
-					$("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } });
+					$("#popupWindow").jqxWindow({ position: { x: 160, y: 30 } });
 					// get the clicked row's data and initialize the input fields.
 					var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
 					$("#name").val(dataRecord.name);
@@ -272,7 +276,7 @@
 	});
 	// initialize the popup window and buttons.
 	$("#popupWindow").jqxWindow({
-		width: 860,
+		width: 960,
 		height: 550,
 		resizable: false,
 		theme: theme,
@@ -284,7 +288,7 @@
 	$("#popupWindow").on('open', function () {
 		$("#name").jqxInput('selectAll');
 	});
-	$("#Delete").jqxButton({ theme: theme });
+	$("#Delete").jqxButton({ template: "danger", width: '80px', theme: theme });
 	$("#Delete").click(function () {
 		if (editrow >= 0) {
 			// Open a popup to confirm this action.
@@ -296,8 +300,8 @@
 		}
 		$("#popupWindow").jqxWindow('hide');
 	});
-	$("#Cancel").jqxButton({ theme: theme });
-	$("#Save").jqxButton({ theme: theme });
+	$("#Cancel").jqxButton({ template: "primary", width: '80px', theme: theme });
+	$("#Save").jqxButton({ template: "success", width: '90px', theme: theme });
 	// update the edited row when the user clicks the 'Save' button.
 	$("#Save").click(function () {
 		var steprows = $('#grid').jqxGrid('getrows');