diff --git a/shiny/Contacts-v2/components/contacts-app.html b/shiny/Contacts-v2/components/contacts-app.html
index 6ff2c07..ef53d64 100644
--- a/shiny/Contacts-v2/components/contacts-app.html
+++ b/shiny/Contacts-v2/components/contacts-app.html
@@ -22,11 +22,12 @@
 				font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
 				box-sizing: border-box;
 				height: 60px;
-				padding: 20px;
+				padding: 0 20px;
 			}
 			.contactItem.header {
 				font-variant: small-caps;
 				color: #9e9e9e;
+				padding: 20px;
 			}
 			/* @polyfill .contactItem:nth-child(3) */
 			.contactItem:nth-child(2) {
@@ -51,9 +52,9 @@
 					</template>
 				</template>
 			</contacts-list>
-			<contacts-detail contact="{{selectedContact.contact}}" on-contacts-detail-shrink="detailShrinkAction">
+			<contacts-detail contact="{{selectedContact.contact}}" on-contacts-detail-shrink="shrinkAction">
 			</contacts-detail>
-			<contacts-create>
+			<contacts-create on-contacts-create-cancel="shrinkAction" on-contacts-create="contactCreateAction">
 			</contacts-create>
 		</polymer-ui-pages>
 	</template>
@@ -68,8 +69,11 @@
 			addContactAction: function() {
 				this.page = 2;
 			},
-			detailShrinkAction: function() {
+			shrinkAction: function() {
 				this.page = 0;
+			},
+			contactCreateAction: function(e, detail, sender) {
+				this.selectedContact = detail;
 			}
 		});
 	</script>
diff --git a/shiny/Contacts-v2/components/contacts-create-item.html b/shiny/Contacts-v2/components/contacts-create-item.html
index f2f31dd..488a148 100644
--- a/shiny/Contacts-v2/components/contacts-create-item.html
+++ b/shiny/Contacts-v2/components/contacts-create-item.html
@@ -1,8 +1,9 @@
 <link href="../../../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html" rel="import">
+<link href="../../../../polymer-elements/polymer-selector/polymer-selector.html" rel="import">
 <link href="../../../../polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html" rel="import">
 <link href="../../../../polymer-ui-elements/polymer-ui-menu-item/polymer-ui-menu-item.html" rel="import">
 <link href="../../../../polymer-ui-elements/polymer-ui-overlay/polymer-ui-overlay.html" rel="import">
-<polymer-element name="contacts-create-item" attributes="icon activeicon label value active overlayActive" on-focus="focusAction" on-blur="blurAction">
+<polymer-element name="contacts-create-item" attributes="icon activeIcon label value selectedType active overlayActive" on-focus="focusAction" on-blur="blurAction">
 	<template>
 		<style>
 			/* @polyfill @host */
@@ -28,15 +29,23 @@
 				display: none !important;
 			}
 			#overlay {
-				left: 5%;
-				width: 90%;
-				padding: 20px;
+				left: 0;
+				padding: 10px;
 			}
 			#overlay input {
 				margin-left: 0px;
 				height: auto;
 			}
-			#overlay polymer-ui-menu-item,
+			#overlay polymer-ui-menu-item {
+				font-size: 18px;
+				height: 61px;
+				font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
+				padding: 10px 20px;
+				border-color: rgba(0, 0, 0, 0.14902);
+				border-width: 0 1px 1px;
+				border-style: solid;
+			}
+			/* FIXME: Safari drops the whole rule if it doesn't recognize the selector. */
 			#overlay content::-webkit-distributed(polymer-ui-menu-item) {
 				font-size: 18px;
 				height: 61px;
@@ -48,17 +57,19 @@
 			}
 		</style>
 		<polymer-flex-layout align="center"></polymer-flex-layout>
-		<polymer-ui-icon-button icon="{{icon}}" class="{{hidden: active || overlayActive || value}}"></polymer-ui-icon-button>
-		<polymer-ui-icon-button id="activeIcon" icon="{{activeicon}}" class="{{hidden: !value && !active && !overlayActive}}" on-tap="overlayAction"></polymer-ui-icon-button>
+		<polymer-ui-icon-button icon="{{icon}}" class="{{hidden: active || overlayActive || value || selectedType !== -1}}"></polymer-ui-icon-button>
+		<polymer-ui-icon-button id="activeIcon" icon="{{activeIcon}}" class="{{hidden: !value && selectedType === -1 && !active && !overlayActive}}" on-tap="overlayAction"></polymer-ui-icon-button>
 		<div flex>
 			<input value="{{value}}" placeholder="{{label}}">
 		</div>
-		<polymer-ui-icon-button icon="close" class="{{hidden: !active && !overlayActive}}"></polymer-ui-icon-button>
-		<polymer-ui-overlay id="overlay" active="{{overlayActive}}" modal backdrop on-tap="overlayTapAction">
-			<polymer-ui-menu-item icon="shrink">
+		<polymer-ui-icon-button icon="close" class="{{hidden: !active && !overlayActive}}" on-tap="cancelAction"></polymer-ui-icon-button>
+		<polymer-ui-overlay id="overlay" active="{{overlayActive}}" modal backdrop on-polymer-overlay-open="overlayOpenAction">
+			<polymer-ui-menu-item icon="shrink" on-tap="overlayShrinkAction">
 				<input id="overlayInput" value="{{value}}" placeholder="{{label}}">
 			</polymer-ui-menu-item>
-			<content></content>
+			<polymer-selector selected="{{selectedType}}" on-polymer-activate="overlaySelectAction">
+				<content></content>
+			</polymer-selector>
 		</polymer-ui-overlay>
 	</template>
 	<script>
@@ -66,9 +77,16 @@
 			active: false,
 			overlayActive: false,
 			icon: 'plus',
-			overlayActiveChanged: function() {
+			selectedType: -1,
+			enteredDocument: function() {
+				this.$.overlay.style.width = (window.innerWidth - 20) + 'px';
+				this.$.overlay.style.top = ((window.innerHeight - this.$.overlay.getBoundingClientRect().height) / 2) + 'px';
+			},
+			overlayOpenAction: function() {
 				if (this.overlayActive) {
-					this.$.overlayInput.focus();
+					setTimeout(function() {
+						this.$.overlayInput.focus();
+					}.bind(this), 10);
 				}
 			},
 			focusAction: function() {
@@ -77,12 +95,20 @@
 			blurAction: function() {
 				this.active = false;
 			},
+			cancelAction: function() {
+				this.value = '';
+				this.selectedType = -1;
+			},
 			overlayAction: function() {
 				this.$.overlay.toggle();
 			},
-			overlayTapAction: function(e, detail, sender) {
-				if (e.srcElement !== this.$.overlayInput) {
-					this.activeicon = e.srcElement.icon;
+			overlaySelectAction: function(e, detail, sender) {
+				this.activeIcon = detail.item.icon;
+				this.$.overlay.toggle();
+			},
+			overlayShrinkAction: function(e, detail, sender) {
+				var src = window.ShadowDOMPolyfill ? wrap(e.srcElement) : e.srcElement;
+				if (src !== this.$.overlayInput) {
 					this.$.overlay.toggle();
 				}
 			}
diff --git a/shiny/Contacts-v2/components/contacts-create.html b/shiny/Contacts-v2/components/contacts-create.html
index 549fea0..1a46518 100644
--- a/shiny/Contacts-v2/components/contacts-create.html
+++ b/shiny/Contacts-v2/components/contacts-create.html
@@ -1,10 +1,11 @@
 <link href="../../../../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html" rel="import">
 <link href="contacts-create-item.html" rel="import">
-<polymer-element name="contacts-create">
+<polymer-element name="contacts-create" attributes="contact">
 	<template>
 		<style>
 			polymer-ui-toolbar {
 				background: transparent none !important;
+				padding: 0;
 			}
 			button {
 				background: transparent none;
@@ -13,7 +14,7 @@
 				font-size: 16px;
 				color: #999;
 				padding: 10px;
-				margin: 20px;
+				margin: 0 20px;
 			}
 			button:focus {
 				outline: none;
@@ -29,16 +30,24 @@
 			<div flex></div>
 			<button on-tap="createAction">✓</button>
 		</polymer-ui-toolbar>
-		<contacts-create-item icon="account" activeicon="account" label="Name"></contacts-create-item>
-		<contacts-create-item activeicon="dialoga" label="Add a phone">
+		<contacts-create-item icon="account" activeicon="account" label="Name" value="{{contact.name}}"></contacts-create-item>
+		<contacts-create-item activeicon="dialoga" label="Add a phone" value="{{contact.phone}}">
 			<polymer-ui-menu-item icon="dialoga" label="Home"></polymer-ui-menu-item>
 			<polymer-ui-menu-item icon="filter" label="Mobile"></polymer-ui-menu-item>
 			<polymer-ui-menu-item icon="briefcase" label="Work"></polymer-ui-menu-item>
 		</contacts-create-item>
-		<contacts-create-item activeicon="stream" label="Add an email"></contacts-create-item>
-		<contacts-create-item activeicon="marker" label="Add an address"></contacts-create-item>
+		<contacts-create-item activeicon="stream" label="Add an email" value="{{contact.email}}"></contacts-create-item>
+		<contacts-create-item activeicon="marker" label="Add an address" value="{{contact.street}}"></contacts-create-item>
 	</template>
 	<script>
-		Polymer('contacts-create');
+		Polymer('contacts-create', {
+			contact: {},
+			cancelAction: function() {
+				this.fire('contacts-create-cancel');
+			},
+			createAction: function() {
+				this.fire('contacts-create', {contact: this.contact});
+			}
+		});
 	</script>
 </polymer-element>
\ No newline at end of file
diff --git a/shiny/Contacts-v2/components/contacts-icon.html b/shiny/Contacts-v2/components/contacts-icon.html
index dc558dd..043b560 100644
--- a/shiny/Contacts-v2/components/contacts-icon.html
+++ b/shiny/Contacts-v2/components/contacts-icon.html
@@ -23,8 +23,11 @@
 				height: 64px;
 				line-height: 64px;
 			}
+			.contactIcon.large.noinitials {
+				background-image: url(http://placekitten.com/g/160/160);
+			}
 		</style>
-		<div class="contactIcon {{large: large}}">
+		<div class="contactIcon {{large: large; noinitials: !contact.initials}}">
 			{{contact.initials}}
 		</div>
 	</template>