diff --git a/shiny/Contacts-v2/components/contacts-app.html b/shiny/Contacts-v2/components/contacts-app.html
new file mode 100644
index 0000000..7d842de
--- /dev/null
+++ b/shiny/Contacts-v2/components/contacts-app.html
@@ -0,0 +1,69 @@
+<link href="../../../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html" rel="import">
+<link href="../../../../polymer-ui-elements/polymer-ui-pages/polymer-ui-pages.html" rel="import">
+<link href="contacts-detail.html" rel="import">
+<link href="contacts-icon.html" rel="import">
+<link href="contacts-list.html" rel="import">
+<link href="mock-data.html" rel="import">
+<polymer-element name="contacts-app" attribiutes="page selectedContact">
+	<template>
+		<style>
+			polymer-ui-pages {
+				display: block;
+				height: 100%;
+			}
+			.contactItem {
+				margin: 0 10px;
+				background-color: white;
+				border-style: solid;
+				border-color: rgba(0, 0, 0, 0.14902);
+				border-width: 0 1px 1px;
+				font-size: 18px;
+				font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
+				box-sizing: border-box;
+				height: 60px;
+				padding: 20px;
+			}
+			.contactItem.header {
+				font-variant: small-caps;
+				color: #9e9e9e;
+			}
+			.contactItem:nth-child(2) {
+				margin-top: 10px;
+				border-top-width: 1px;
+				border-radius: 3px 3px 0 0;
+			}
+		</style>
+		<mock-data id="mock"></mock-data>
+		<polymer-ui-pages selected="{{page}}">
+			<contacts-list selectedModel="{{selectedContact}}">
+				<template repeat="{{alpha in $.mock.alphabetized}}">
+					<div class="contactItem header">
+						{{alpha.letter}}
+					</div>
+					<template repeat="{{contact in alpha.contacts}}">
+						<div class="contactItem">
+							<polymer-flex-layout align="center"></polymer-flex-layout>
+								<contacts-icon contact="{{contact}}"></contacts-icon>
+							<div>{{contact.name}}</div>
+						</div>
+					</template>
+				</template>
+			</contacts-list>
+			<contacts-detail contact="{{selectedContact.contact}}" on-contacts-detail-shrink="detailShrinkAction">
+			</contacts-detail>
+		</polymer-ui-pages>
+	</template>
+	<script>
+		Polymer('contacts-app', {
+			page: 0,
+			selectedContact: null,
+			selectedContactChanged: function() {
+				console.log('selectedContact', this.selectedContact);
+				this.page = 1;
+			},
+			detailShrinkAction: function() {
+				this.page = 0;
+			}
+		});
+	</script>
+</polymer-element>
\ No newline at end of file
diff --git a/shiny/Contacts-v2/components/contacts-detail-item.html b/shiny/Contacts-v2/components/contacts-detail-item.html
new file mode 100644
index 0000000..e9755fd
--- /dev/null
+++ b/shiny/Contacts-v2/components/contacts-detail-item.html
@@ -0,0 +1,23 @@
+<link href="../../../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html" rel="import">
+<polymer-element name="contacts-detail-item" noscript attributes="label value">
+	<template>
+		<style>
+			:host {
+				font-size: 18px;
+				font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
+				box-sizing: border-box;
+				height: 60px;
+				padding: 20px;
+			}
+			.contactsDetailItemLabel {
+				color: #999;
+				font-size: 16px;
+				width: 80px;
+				max-width: 80px;
+			}
+		</style>
+		<polymer-flex-layout align="center"></polymer-flex-layout>
+		<div class="contactsDetailItemLabel">{{label}}</div>
+		<div class="contactsDetailItemValue">{{value}}</div>
+	</template>
+</polymer-element>
\ No newline at end of file
diff --git a/shiny/Contacts-v2/components/contacts-detail.html b/shiny/Contacts-v2/components/contacts-detail.html
new file mode 100644
index 0000000..83b7c90
--- /dev/null
+++ b/shiny/Contacts-v2/components/contacts-detail.html
@@ -0,0 +1,63 @@
+<link href="../../../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html" rel="import">
+<link href="../../../../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html" rel="import">
+<link href="contacts-detail-item.html" rel="import">
+<link href="contacts-icon.html" rel="import">
+<polymer-element name="contacts-detail" attributes="contact">
+	<template>
+		<style>
+			polymer-ui-toolbar {
+				background: none !important;
+				border: 0 !important;
+			}
+			.detailHeader {
+				height: 240px;
+				background: url('http://placebacn.com/g/500/240') repeat-x;
+			}
+			.detailIconContainer {
+				padding: 40px 20px;
+			}
+			.detailName {
+				font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
+				background: #999;
+				color: white;
+				font-size: 24px;
+				box-sizing: border-box;
+				height: 60px;
+				padding: 16px 20px;
+			}
+			contacts-detail-item {
+				border-color: rgba(0, 0, 0, 0.14902);
+				border-width: 0 1px 1px;
+				border-style: solid;
+			}
+		</style>
+		<div class="detailHeader">
+			<polymer-flex-layout vertical="true"></polymer-flex-layout>
+			<polymer-ui-toolbar theme="polymer-ui-dark-theme">
+				<polymer-ui-icon-button icon="shrink" on-tap="shrinkAction"></polymer-ui-icon-button>
+				<div flex></div>
+				<!-- <polymer-ui-icon-button icon="edit"></polymer-ui-icon-button> no such icon -->
+				<polymer-ui-icon-button icon="shortcut"></polymer-ui-icon-button>
+				<polymer-ui-icon-button icon="favorite"></polymer-ui-icon-button>
+			</polymer-ui-toolbar>
+			<div flex></div>
+			<div class="detailIconContainer">
+				<contacts-icon contact="{{contact}}" large></contacts-icon>
+			</div>
+		</div>
+		<div class="detailName">
+			{{contact.name}}
+		</div>
+		<contacts-detail-item label="Phone" value="{{contact.phone}}"></contacts-detail-item>
+		<contacts-detail-item label="Email" value="{{contact.email}}"></contacts-detail-item>
+		<contacts-detail-item label="Address" value="{{contact.street}}"></contacts-detail-item>
+		<contacts-detail-item label="Handle" value="{{contact.handle}}"></contacts-detail-item>
+	</template>
+	<script>
+		Polymer('contacts-detail', {
+			shrinkAction: function() {
+				this.fire('contacts-detail-shrink');
+			}
+		});
+	</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
new file mode 100644
index 0000000..affe8ad
--- /dev/null
+++ b/shiny/Contacts-v2/components/contacts-icon.html
@@ -0,0 +1,34 @@
+<polymer-element name="contacts-icon" attributes="contact large">
+	<template>
+		<style>
+			.contactIcon {
+				background-color: rgb(242, 242, 242);
+				border-radius: 20px;
+				border: 1px solid rgba(0, 0, 0, 0.14902);
+				margin-right: 20px;
+				padding: 8px;
+				width: 24px;
+				height: 24px;
+				font-family: 'Open Sans', Open-Sans, sans-serif;
+				font-size: 16px;
+				text-align: center;
+				color: #d3d2d3;
+			}
+			.contactIcon.large {
+				border-radius: 60px;
+				font-size: 42px;
+				padding: 24px;
+				width: 64px;
+				height: 64px;
+			}
+		</style>
+		<div class="contactIcon {{large: large}}">
+			{{contact.initials}}
+		</div>
+	</template>
+	<script>
+		Polymer('contacts-icon', {
+			large: false
+		});
+	</script>
+</polymer-element>
\ No newline at end of file
diff --git a/shiny/Contacts-v2/components/contacts-list.html b/shiny/Contacts-v2/components/contacts-list.html
new file mode 100644
index 0000000..f6285d2
--- /dev/null
+++ b/shiny/Contacts-v2/components/contacts-list.html
@@ -0,0 +1,33 @@
+<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-toolbar/polymer-ui-toolbar.html" rel="import">
+<link href="../../../../polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html" rel="import">
+<polymer-element name="contacts-list" extends="polymer-selector">
+	<template>
+		<style>
+			polymer-ui-toolbar {
+				padding-left: 10px;
+				padding-right: 10px;
+			}
+			.listContainer {
+				background-color: rgb(242, 242, 242)
+			}
+		</style>
+		<polymer-flex-layout vertical="true"></polymer-flex-layout>
+		<polymer-ui-toolbar>
+			<polymer-ui-icon-button icon="menu"></polymer-ui-icon-button>
+			<div flex>Contacts</div>
+			<polymer-ui-icon-button icon="plus" on-tap="addAction"></polymer-ui-icon-button>
+			<polymer-ui-icon-button icon="search"></polymer-ui-icon-button>
+		</polymer-ui-toolbar>
+		<div class="listContainer" flex>
+			<shadow></shadow>
+		</div>
+	</template>
+	<script>
+		Polymer('contacts-list', {
+			addAction: function() {
+			}
+		})
+	</script>
+</polymer-element>
\ No newline at end of file
diff --git a/shiny/Contacts-v2/components/shiny-contacts.html b/shiny/Contacts-v2/components/shiny-contacts.html
deleted file mode 100644
index 3ddef0a..0000000
--- a/shiny/Contacts-v2/components/shiny-contacts.html
+++ /dev/null
@@ -1,82 +0,0 @@
-<link href="../../../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html" rel="import">
-<link href="../../../../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html" rel="import">
-<link href="../../../../polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html" rel="import">
-<link href="mock-data.html" rel="import">
-<polymer-element name="shiny-contacts">
-	<template>
-		<style>
-			polymer-ui-toolbar {
-				padding-left: 10px;
-				padding-right: 10px;
-			}
-			.contactContainer {
-				background-color: rgb(242, 242, 242)
-			}
-			.contactItem {
-				margin: 0 10px;
-				background-color: white;
-				border-style: solid;
-				border-color: rgba(0, 0, 0, 0.14902);
-				border-width: 0 1px 1px;
-				font-size: 18px;
-				font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
-				box-sizing: border-box;
-				height: 60px;
-				padding: 20px;
-			}
-			.contactItem.header {
-				font-variant: small-caps;
-				color: #9e9e9e;
-			}
-			.contactItem:nth-child(2) {
-				margin-top: 10px;
-				border-top-width: 1px;
-				border-radius: 3px 3px 0 0;
-			}
-			.contactIcon {
-				background-color: rgb(242, 242, 242);
-				border-radius: 20px;
-				border: 1px solid rgba(0, 0, 0, 0.14902);
-				margin-right: 20px;
-				padding: 8px;
-				min-width: 24px;
-				height: 24px;
-				font-family: 'Open Sans', Open-Sans, sans-serif;
-				font-size: 16px;
-				text-align: center;
-				color: #d3d2d3
-			}
-		</style>
-		<mock-data id="mock"></mock-data>
-		<polymer-flex-layout vertical="true"></polymer-flex-layout>
-		<polymer-ui-toolbar>
-			<polymer-ui-icon-button icon="menu"></polymer-ui-icon-button>
-			<div flex>Contacts</div>
-			<polymer-ui-icon-button icon="plus"></polymer-ui-icon-button>
-			<polymer-ui-icon-button icon="search"></polymer-ui-icon-button>
-		</polymer-ui-toolbar>
-		<div class="contactContainer" flex>
-			<template repeat="{{alpha in $.mock.alphabetized}}">
-				<div class="contactItem header">
-					{{alpha.letter}}
-				</div>
-				<template repeat="{{contact in alpha.contacts}}">
-					<div class="contactItem" on-tap="contactAction">
-						<polymer-flex-layout align="center"></polymer-flex-layout>
-							<div class="contactIcon">
-								{{contact.initials}}
-							</div>
-						<div>{{contact.name}}</div>
-					</div>
-				</template>
-			</template>
-		</div>
-	</template>
-	<script>
-		Polymer('shiny-contacts', {
-			contactAction: function(e, detail, sender) {
-				console.log(e, detail, sender);
-			}
-		})
-	</script>
-</polymer-element>
\ No newline at end of file
diff --git a/shiny/Contacts-v2/index.html b/shiny/Contacts-v2/index.html
index 614a065..4193329 100644
--- a/shiny/Contacts-v2/index.html
+++ b/shiny/Contacts-v2/index.html
@@ -1,17 +1,24 @@
 <!doctype html>
 <html>
 <head>
-	<link href="components/shiny-contacts.html" rel="import">
+	<link href="components/contacts-app.html" rel="import">
 	<script src="../../../polymer/polymer.js"></script>
 	<link href="../../../polymer-ui-elements/basic.css" rel="stylesheet">
 	<style>
+		html, body {
+			height: 100%;
+		}
 		body {
 			margin: 0;
 			padding: 0;
 		}
+		contacts-app {
+			display: block;
+			height: 100%;
+		}
 	</style>
 </head>
 <body theme="polymer-ui-light-theme">
-	<shiny-contacts></shiny-contacts>
+	<contacts-app></contacts-app>
 </body>
 </html>
\ No newline at end of file