diff --git a/src/mm-form/index.html b/src/mm-form/index.html
index a7787d1a..b1d2da48 100644
--- a/src/mm-form/index.html
+++ b/src/mm-form/index.html
@@ -2,10 +2,7 @@
 <html>
 	<head>
 	<script language="javascript" src="../../bower_components/webcomponentsjs/webcomponents.js"></script>
-
 	<link rel="import" href="../../build/strand.html" />
-	<!-- <link rel="import" href="../mm-dimensions/mm-dimensions.html" /> -->
-	<!-- <link rel="import" href="mm-form.html" /> -->
 
 	<style type="text/css">
 		body, html {
@@ -44,89 +41,25 @@
 	</head>
 
 	<body>
-		<!-- dom module for testing special cases -->
-		<!-- 
-		<dom-module id="special-snowflake">
-			<style type="text/css">
-				:host {
-					position: relative;
-					display: flex;
-					align-items: center;
-					font-size: 0; 
-				}
-				mm-dropdown {
-					margin-right: 15px;
-				}
-			</style>
-			<template>
-				<mm-radio 
-					id="standardSize" 
-					group="sizes" 
-					checked
-					on-selected="_handleRadioSelected"></mm-radio>
-				<mm-dropdown 
-					id="standardSizeDdl" 
-					disabled$="{{!isStandard}}" 
-					on-changed="_standardSizeChanged" 
-					placeholder="Select One">
-					<mm-list-item>160x600</mm-list-item>
-					<mm-list-item>728x90</mm-list-item>
-					<mm-list-item>300x250</mm-list-item>
-				</mm-dropdown>
-				<mm-radio 
-					id="nonStandardSize" 
-					group="sizes"
-					on-selected="_handleRadioSelected"></mm-radio>
-				<mm-group id="nonStandardSizeGroup" disabled$="{{isStandard}}">
-					<mm-input 
-						id="width"
-						placeholder="Width" 
-						validation="int"
-						on-changed="_widthChanged"></mm-input>
-					<mm-input 
-						id="height"
-						placeholder="Height" 
-						validation="int"
-						on-changed="_heightChanged"></mm-input>
-				</mm-group>
-			</template>
-		</dom-module>
-		 -->
 
 		<mm-form id="testForm" unresolved>
+
 			<!-- row 1 -->
 			<div class="col" span="1">
-				<mm-input 
-					fitparent 
-					name="input"
-					validation="int|empty"
-					placeholder="Type a Number"
-					label="Type a Number"
-					error-message="You need to type a number"></mm-input>
+				<mm-input fitparent name="input" placeholder="Type a Number" value="123"></mm-input>
 			</div>
+
 			<div class="col" span="1">
-				<mm-dropdown 
-					fitparent 
-					name="dropdown"
-					placeholder="Select an Item" 
-					validation="empty"
-					label="Select an Item"
-					error-message="You need to select an item">
+				<mm-dropdown fitparent name="dropdown" placeholder="Select an Item" value="List Item 1">
 					<mm-list-item>List Item 1</mm-list-item>
 					<mm-list-item>List Item 2</mm-list-item>
 					<mm-list-item>List Item 3</mm-list-item>
 					<mm-list-item>List Item 4</mm-list-item>
 				</mm-dropdown>
 			</div>
+
 			<div class="col" span="2">
-				<mm-group 
-					fitparent 
-					unresolved
-					name="radio"
-					placeholder="Select an Item" 
-					validation="empty"
-					label="Select a Color"
-					error-message="You need to select a color">
+				<mm-group fitparent unresolved name="radio" value="Red">
 					<mm-radio>
 						<label>Red</label>
 					</mm-radio>
@@ -140,6 +73,7 @@
 			</div>
 
 			<!-- row 2 -->
+			<!--
 			<div class="col" span="1">
 			<mm-dimensions
 				id="dimensions"
@@ -148,19 +82,35 @@
 				validation="dimensions|empty"
 				label="Select a Dimension"
 				error-message="You need to select dimensions"></mm-dimensions>
+			</div>
+			-->
+
 		</mm-form>
-				<!-- multi-value -->
 
 		<script>
+
+			var formData = {
+				'input' : {
+					validation: 'int|empty',
+					errorMsg: 'You need to type a number',
+					label: 'Type a number'
+				},
+				'dropdown' : {
+					validation: 'empty',
+					errorMsg: 'You need to select an item',
+					label: 'Select an Item'
+				},
+				'radio' : {
+					validation: 'empty',
+					errorMsg: 'You need to select a color',
+					label: 'Select a Color'
+				}
+			}; 
+
 			window.addEventListener('WebComponentsReady', function(e) {
 				var testForm = document.querySelector('#testForm');
 
-				// add custom validation rules for the dimension component
-				// this would probably be more robust, but this is sufficient
-				testForm.rules.dimensions = function(i) {
-					return i ? typeof(parseInt(i.width) === 'number') && 
-						typeof(parseInt(i.height) === 'number') : false; 
-				}
+				testForm.data = formData;
 
 				testForm.addEventListener('serialize-form', function(e){
 					console.log('serialize-form', e.detail);
diff --git a/src/mm-form/mm-form.html b/src/mm-form/mm-form.html
index 402d87eb..b1a44695 100644
--- a/src/mm-form/mm-form.html
+++ b/src/mm-form/mm-form.html
@@ -25,8 +25,8 @@
 		<!-- footer -->
 		<mm-footer 
 			id="formActions"
-			type="{{footerType}}"
-			message="{{footerMessage}}"
+			type="{{_footerType}}"
+			message="{{_footerMessage}}"
 			message-visible="{{_displayFooterMessage}}"
 			unresolved fitparent semi-transparent>
 
diff --git a/src/mm-form/mm-form.js b/src/mm-form/mm-form.js
index b9ee4924..9b959be0 100644
--- a/src/mm-form/mm-form.js
+++ b/src/mm-form/mm-form.js
@@ -34,18 +34,32 @@
 		*/	
 
 		properties: {
-			formItems: {
-				type: Object,
-				value: function() { return {}; }
+			
+			unsaved: {
+				type: Boolean,
+				value: false,
+				notify: true
+			},
+
+			showUnsavedMessage: {
+				type: Boolean,
+				value: true,
+				notify: true
 			},
-			formData: {
+
+			// what comes in:
+			data: {
 				type: Object,
-				value: function() { return {}; },
+				observer: '_dataChanged'
 			},
-			footerMessage: {
-				type: String,
-				notify: true
+
+			// will store updates/serialize - data becomes:
+			_formData: {
+				type: Object,
+				value: function() { return {}; }
 			},
+
+			// Footer related
 			footerMessages: {
 				type: Object,
 				value: function() {
@@ -56,10 +70,7 @@
 					};
 				}
 			},
-			footerType: {
-				type: String,
-				notify: true
-			},
+
 			actions: {
 				type: Array,
 				value: function() {
@@ -82,140 +93,143 @@
 					];
 				}
 			},
-			unsaved: {
-				type: Boolean,
-				value: false,
-				notify: true
-			},
+
 			showFooterMessages: {
 				type: Boolean,
 				value: true,
 				notify: true
 			},
-			showWarningMessages: {
-				type: Boolean,
-				value: true,
+
+			_footerType: {
+				type: String,
 				notify: true
 			},
+
+			_footerMessage: {
+				type: String,
+				notify: true
+			},
+
 			_showFooterMessage: {
 				type: Boolean,
 				value: false,
 				notify: true
 			},
+
 			_displayFooterMessage: {
 				type: Boolean,
 				computed: '_displayMessage(_showFooterMessage, showFooterMessages)'
 			}
+
 		},
 
 		listeners: {
 			'changed' : '_handleChanged'
 		},
 
-		// common validation rules
-		rules: {
-			email: function(i) {
-				// var regEx = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-				// return regEx.test(i);
-				return validator.isEmail(i);
-			},
-			alpha: function(i) {
-				// var regEx = /^\w+$/;
-				// return regEx.test(i);
-				return validation.isAlpha(i);
-			},
-			int: function(i) {
-				// var regEx = /^\d+$/;
-				// return regEx.test(i);
-				return validator.isInt(i); 
-			},
-			decimal: function(i) {
-				// var regEx = /^\d*[.]\d+$/;
-				// return regEx.test(i);
-				return validator.isDecimal(i);
-			},
-			whitespace: function(i) {
-				// var regEx = /\s/;
-				// return i.length > 0 && !regEx.test(i);
-				return validator.isWhitespace(i);
-			},
-			checked: function(i) {
-				return validator.isChecked(i);
-			},
-			empty: function(i) {
-				return validator.isEmpty(i);
-			},
-			blank: function(i) {
-				return validator.isBlank(i);
-			}
-		},
-
-		_initialFormData: {},
+		// // common validation rules
+		// rules: {
+		// 	email: function(i) {
+		// 		// var regEx = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+		// 		// return regEx.test(i);
+		// 		return validator.isEmail(i);
+		// 	},
+		// 	alpha: function(i) {
+		// 		// var regEx = /^\w+$/;
+		// 		// return regEx.test(i);
+		// 		return validation.isAlpha(i);
+		// 	},
+		// 	int: function(i) {
+		// 		// var regEx = /^\d+$/;
+		// 		// return regEx.test(i);
+		// 		return validator.isInt(i); 
+		// 	},
+		// 	decimal: function(i) {
+		// 		// var regEx = /^\d*[.]\d+$/;
+		// 		// return regEx.test(i);
+		// 		return validator.isDecimal(i);
+		// 	},
+		// 	whitespace: function(i) {
+		// 		// var regEx = /\s/;
+		// 		// return i.length > 0 && !regEx.test(i);
+		// 		return validator.isWhitespace(i);
+		// 	},
+		// 	checked: function(i) {
+		// 		return validator.isChecked(i);
+		// 	},
+		// 	empty: function(i) {
+		// 		return validator.isEmpty(i);
+		// 	},
+		// 	blank: function(i) {
+		// 		return validator.isBlank(i);
+		// 	}
+		// },
 
 		// *******************************
 		// collect all the things (and data)
+		// _canInit: false,
+
 		attached: function() {
-			// build form data object
-			this.async(function() {
-				var formFields = Polymer.dom(this).querySelectorAll('[name]');
-
-				formFields.forEach(function(item) {
-					var name 			= item.getAttribute('name'),
-						field 			= item,
-						label 			= item.getAttribute('label'),
-						value 			= item.value,
-						validation 		= item.getAttribute('validation'),
-						errorMsg 		= item.getAttribute('error-message'),
-						errorMsgEle		= null,
-						fieldHeaderEle 	= null,
-						parentEle 		= Polymer.dom(item).parentNode;
-
-					// create the label and error message if necessary
-					if (errorMsg) {
-						errorMsgEle = new Strand.FormMessage();
-						errorMsgEle.message = errorMsg;
-						errorMsgEle.type = 'error';
-						Polymer.dom(parentEle).appendChild(errorMsgEle);
-					}
-
-					if (label) {
-						var headerTxt = document.createTextNode(label);
-						fieldHeaderEle = new Strand.Header();
-						fieldHeaderEle.size = 'medium';
-						Polymer.dom(fieldHeaderEle).appendChild(headerTxt);
-						Polymer.dom(parentEle).insertBefore(fieldHeaderEle, field);
-					}
-
-					// store the initial form data
-					// TODO: OR populate it(?) given a formData is provided:
-					this._updateData(name, value);
-
-					// store the form items separately for reference later,
-					// since the formData may not map directly to the items
-					this.formItems[name] = {
-						'field'				: field,
-						'validation'		: validation,
-						'errorMsg'			: errorMsg,
-						'errorMsgEle' 		: errorMsgEle,
-						'fieldHeaderEle' 	: fieldHeaderEle
-					};
+			// this._canInit = true;
+			// this._initForm(this.data);
+		},
+		
+		_dataChanged: function(newVal, oldVal) {
+			// if (this._canInit) this._initForm(newVal); 
+			this._initForm(newVal);
+		},
 
-				}.bind(this));
+		_initForm: function(data) {
+			for (var key in data) {
+				var name 			= key,
+					label 			= this.data[key].label,
+					errorMsg 		= this.data[key].errorMsg,
+					ele 			= Polymer.dom(this).querySelector('[name='+name+']'),
+					parentEle 		= Polymer.dom(ele).parentNode,
+					// TODO: if there was an initial value in markup - handle it
+					value			= null;
+
+				if (ele.value || this.data[key].value) {
+					value = ele.value || this.data[key].value;
+				}
 
-				this._initialFormData = this.formData;
-				
-			});
+				this._updateData(name, value);
+				this._createLabel(name, parentEle, ele, label);
+				this._createErrorMsg(name, parentEle, errorMsg);
+			}
 		},
 
-		
-		// _dataChanged: function(newVal, oldVal) {
+		_createErrorMsg:function(name, parentEle, msg) {
+			var errorMsgEle = Polymer.dom(parentEle).querySelector('mm-form-message[name='+name+']') || null;
 
-		// 	newVal.forEach(function(item) {
-				
-
-		// 	});
+			if (!errorMsgEle) {
+				errorMsgEle = new Strand.FormMessage();
+				errorMsgEle.type = 'error';
+				errorMsgEle.setAttribute('name', name);
+				errorMsgEle.message = msg;
+				Polymer.dom(parentEle).appendChild(errorMsgEle);					
+			} else {
+				errorMsgEle.message = msg;
+			}
+		},
 
-		// },
+		_createLabel:function(name, parentEle, ele, label) {
+			var labelEle = Polymer.dom(parentEle).querySelector('mm-header[name='+name+']') || null,
+				labelTxt = null;
+
+			if (!labelEle) {
+				labelTxt = document.createTextNode(label);
+				labelEle = new Strand.Header();
+				labelEle.size = 'medium';
+				labelEle.setAttribute('name', name);
+				Polymer.dom(labelEle).appendChild(labelTxt);
+				Polymer.dom(parentEle).insertBefore(labelEle, ele);
+			} else {
+				labelEle.innerHTML = null;
+				labelTxt = document.createTextNode(label);
+				Polymer.dom(labelEle).appendChild(labelTxt);
+			}
+		},
 
 		// *******************************
 		// footer and footer actions:
@@ -236,43 +250,39 @@
 		// *******************************
 		// handle changes within the form
 		_handleChanged: function(e) {
-			var name = e.target.getAttribute('name'),
-				value = e.detail.value,
-				item = this.formItems[name]; // make sure it's an item we actually care about
-
-			if (item && value) {
-				this._updateData(name, item.value);
-				// TODO: re-init the diff
-				this.unsaved = this._diffData();
-
-				// trigger a warning message in the footer
-				if (this.unsaved && this.showWarningMessages) {
-					this.footerMessage = this.footerMessages.warning;
-					this.footerType = 'warning';
-					this._showFooterMessage = true;
-				}
-			}
+			console.log('_handleChanged: ', e, e.detail.value);
+			
+			// var name = e.target.getAttribute('name'),
+			// 	value = e.detail.value,
+			// 	item = this.formItems[name]; // make sure it's an item we actually care about
+
+			// if (item && value) {
+			// 	this._updateData(name, item.value);
+			// 	this.unsaved = this._diffData();
+
+			// 	// trigger a warning message in the footer
+			// 	if (this.unsaved && this.showUnsavedMessage) {
+			// 		this.footerMessage = this.footerMessages.warning;
+			// 		this.footerType = 'warning';
+			// 		this._showFooterMessage = true;
+			// 	}
+			// }
 		},
 
 		_updateData: function(name, value) {
-			if (value && typeof(value) === 'object') {
-				for (var subkey in value) {
-					this.formData[subkey] = value[subkey];
-				}
-			} else {
-				this.formData[name] = value;
-			}
+			this._formData[name] = value;
+			console.log(this._formData);
 		},
 
 		_diffData: function() {
-			var diff = [];
+			// var diff = [];
 			
-			for (var key in this.formData) {
-				if (key !== this._initialFormData[key]) {
-					diff.push(key);	
-				}
-			}
-			return diff.length > 0;
+			// for (var key in this.formData) {
+			// 	if (key !== this._initialFormData[key]) {
+			// 		diff.push(key);	
+			// 	}
+			// }
+			// return diff.length > 0;
 		},
 
 		// *******************************
@@ -293,60 +303,58 @@
 		},
 
 		serializeForm: function() {
-			var invalid = [],
-				valid = [];
-
-			// UI validation pass:
-			// console.log('serializeForm');
-			// TODO: this should be formItems
-			for (var key in this.formItems) {
-				var item 			= this.formItems[key]
-					value 			= item.field.value,
-					validation		= item.validation,
-					isValid 		= false;
-
-				this._updateData(item.field, value);
-				this.unsaved = this._diffData();
-
-				// validate UI:
-				isValid = this._validateField(validation, value);
-
-				// track invalid & valid fields
-				if (!isValid) {
-					invalid.push(key);
-					item.errorMsgEle.style.display = 'block'; 
-				} else {
-					valid.push(key);
-					item.errorMsgEle.style.display = 'none';
-				}
-
-				// show error state:
-				item.field.error = !isValid;
-			}
-
-			if (invalid.length > 0) {
-				// show messaging in the footer
-				if (this.unsaved) {
-					this.footerType = 'error';
-					this.footerMessage = this.footerMessages.error;
-					this._showFooterMessage = true;
-				}
-			} else {
-				// show messaging in the footer
-				if (this.unsaved) {
-					this.footerType = 'success';
-					this.footerMessage = this.footerMessages.success;
-					this._showFooterMessage = true;
-				}
-			}
-
-			// fire a serialize-form event:
-			this.fire('serialize-form', {
-				isValid: !invalid.length > 0,
-				invalidFields: invalid,
-				validFields: valid,
-				data: this.formData 
-			});
+			// var invalid = [],
+			// 	valid = [];
+
+			// // validation pass:
+			// for (var key in this.formItems) {
+			// 	var item 			= this.formItems[key]
+			// 		value 			= item.field.value,
+			// 		validation		= item.validation,
+			// 		isValid 		= false;
+
+			// 	this._updateData(item.field, value);
+			// 	this.unsaved = this._diffData();
+
+			// 	// validate UI:
+			// 	isValid = this._validateField(validation, value);
+
+			// 	// track invalid & valid fields
+			// 	if (!isValid) {
+			// 		invalid.push(key);
+			// 		item.errorMsgEle.style.display = 'block'; 
+			// 	} else {
+			// 		valid.push(key);
+			// 		item.errorMsgEle.style.display = 'none';
+			// 	}
+
+			// 	// show error state:
+			// 	item.field.error = !isValid;
+			// }
+
+			// if (invalid.length > 0) {
+			// 	// show messaging in the footer
+			// 	if (this.unsaved) {
+			// 		this.footerType = 'error';
+			// 		this.footerMessage = this.footerMessages.error;
+			// 		this._showFooterMessage = true;
+			// 	}
+			// } else {
+			// 	// show messaging in the footer
+			// 	if (this.unsaved) {
+			// 		this.footerType = 'success';
+			// 		this.footerMessage = this.footerMessages.success;
+			// 		this._showFooterMessage = true;
+			// 	}
+			// }
+
+			// // fire a serialize-form event:
+			// this.fire('serialize-form', {
+			// 	isValid: !invalid.length > 0,
+			// 	invalidFields: invalid,
+			// 	validFields: valid,
+			// 	data: this.formData 
+			// });
 		},
 		
 		// *******************************
diff --git a/src/mm-group/mm-group.js b/src/mm-group/mm-group.js
index 4aa1f186..007c2a8d 100644
--- a/src/mm-group/mm-group.js
+++ b/src/mm-group/mm-group.js
@@ -209,9 +209,11 @@
 		},
 
 		_valueChanged: function(newVal, oldVal) {
-			if (this._type === 'mm-radio') {
-				this._selectRadioByValue(newVal);
-			}
+			this.async(function() {
+				if (this._type === 'mm-radio') {
+					this._selectRadioByValue(newVal);
+				}
+			});
 			this.fire("changed", { value: newVal });
 		},
 
