diff --git a/bower.json b/bower.json
index ae69fee..958df22 100644
--- a/bower.json
+++ b/bower.json
@@ -6,7 +6,9 @@
     "polymer": "Polymer/polymer#^1.8.1",
     "paper-styles": "PolymerElements/paper-styles#^1.2.0",
     "paper-input": "PolymerElements/paper-input#^1.1.23",
-    "iron-image": "PolymerElements/iron-image#^1.2.5"
+    "iron-image": "PolymerElements/iron-image#^1.2.5",
+    "paper-button": "PolymerElements/paper-button#^1.0.14",
+    "vaadin-combo-box": "vaadin/vaadin-combo-box#^1.3.2"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
diff --git a/gulpfile.js b/gulpfile.js
index 024efaa..fec616e 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -2,7 +2,6 @@
 
 var gulp = require('gulp');
 var browserSync = require('browser-sync').create();
-var historyApiFallback = require('connect-history-api-fallback');
 
 var config = {
   paths: {
diff --git a/order-styles.html b/order-styles.html
deleted file mode 100644
index a43a912..0000000
--- a/order-styles.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<link rel="import" href="bower_components/polymer/polymer.html">
-<link rel="import" href="font-styles.html">
-
-<dom-module id="order-styles">
-	<template>
-		<style include="font-styles">
-			.content {
-				margin: 15px auto;
-				@apply(--layout-horizontal);
-			}
-
-			.left iron-image {
-				width: 80px;
-				height: 100px;
-			}
-
-			.content .right {
-				padding-left: 10px;
-				@apply(--layout-flex);
-			}
-		</style>
-	</template>
-</dom-module>
\ No newline at end of file
diff --git a/package.json b/package.json
index 1d3339d..ee366e2 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,6 @@
   },
   "devDependencies": {
     "browser-sync": "^2.18.6",
-    "connect-history-api-fallback": "^1.3.0",
     "eslint": "^3.12.0",
     "eslint-config-google": "^0.7.0",
     "eslint-plugin-html": "^1.7.0",
diff --git a/prime.png b/prime.png
new file mode 100644
index 0000000..e42e3bb
Binary files /dev/null and b/prime.png differ
diff --git a/stitch-order-form.html b/stitch-order-form.html
index a47e9ce..52c87da 100644
--- a/stitch-order-form.html
+++ b/stitch-order-form.html
@@ -1,13 +1,16 @@
 <link rel="import" href="bower_components/polymer/polymer.html">
+<link rel="import" href="bower_components/iron-form/iron-form.html">
 <link rel="import" href="bower_components/paper-styles/shadow.html">
 <link rel="import" href="bower_components/paper-input/paper-input.html">
 <link rel="import" href="bower_components/iron-image/iron-image.html">
-
-<link rel="import" href="order-styles.html">
+<link rel="import" href="bower_components/paper-button/paper-button.html">
+<link rel="import" href="bower_components/vaadin-combo-box/vaadin-combo-box.html">
+<link rel="import" href="font-styles.html">
+<link rel="import" href="stitch-order-icons.html">
 
 <dom-module id="stitch-order-form">
 	<template>
-		<style include="order-styles">
+		<style include="font-styles">
 			:host {
 				display: block;
 				color: var(--primary-text-color);
@@ -19,30 +22,150 @@
 
 				@apply(--shadow-elevation-2dp);
 			}
+
+			.section {
+				margin-top: 50px;
+			}
+
+			.horizontal {
+				@apply(--layout-horizontal);
+			}
+
+			[spacer] {
+				@apply(--layout-flex);
+			}
+
+			form paper-input {
+				margin: 0 10px;
+			}
+
+			@media (min-width: 768px) {
+				form paper-input {
+					margin: 0 25px;
+					width: 60%;
+				}
+
+				form .horizontal paper-input {
+					width: 15%;
+				}
+			}
+
+			#content {
+				margin: 15px auto;
+			}
+
+			.left iron-image {
+				display: block;
+				width: 150px;
+				height: 150px;
+			}
+
+			.left .checkPrime {
+				height: 29px;
+			}
+
+			#content .right {
+				padding-left: 10px;
+				@apply(--layout-flex);
+			}
+
+			#options {
+				@apply(--layout-vertical);
+				@apply(--layout-end);
+			}
+
+			iron-icon[prefix] {
+				color: var(--secondary-text-color);
+				margin-right: 10px;
+			}
+
+			#invoiceResume :not(h3) {
+				margin: 0 25px;
+			}
+
+			#buttons {
+				margin: 50px 0 20px;
+				@apply(--layout-horizontal-reverse);
+			}
+
+			paper-button:not([disabled]):hover {
+				font-weight: bold;
+			}
+
+			#submitButton:not([disabled]) {
+				color: var(--text-primary-color);
+				background-color: var(--primary-color);
+			}
+
+			#cancelButton:not([disabled]) {
+				color: var(--accent-color);
+			}
 		</style>
 
 		<header>
 			<h1>Order Product</h1>
 
 			<paper-input label="[[label]]" placeholder="[[placeholder]]"
-			             value="{{productUrl}}" type="url"
-			             error-message="Invalid URL" auto-validate>
+			             value="{{productUrl}}" type="url" required
+			             error-message="Invalid URL">
+				<iron-icon icon="stitch-order:shopping-cart" prefix></iron-icon>
 			</paper-input>
 		</header>
 
-		<div class="content">
-			<div class="left">
-				<iron-image placeholder="./placeholder.jpg"></iron-image>
+		<form is="iron-form" id="form" method="get" content-type="application/json">
+			<div id="content" class="horizontal">
+				<div class="left">
+					<iron-image sizing="contain" preload fade placeholder="./placeholder.jpg"
+					            src="[[productDetails.image]]">
+					</iron-image>
+
+					<img class="checkPrime" hidden$="[[!productDetails.prime]]"
+					     src="./prime.png" alt="the Prime Logo with a checkmark">
+				</div>
+
+				<div class="right">
+					<h2>[[productDetails.Title]]</h2>
+
+					<h4>Select Options</h4>
+					<div id="options">
+						<template is="dom-repeat" items="[[productDetails.options]]" as="option">
+							<vaadin-combo-box required label="[[option.name]] *"
+							                  items="[[option.values]]">
+							</vaadin-combo-box>
+						</template>
+					</div>
+				</div>
 			</div>
 
-			<div class="right">
-				<h2>[[productDetails.Title]]</h2>
+			<div id="shipping" class="section">
+				<h3>Shipping information</h3>
+				<paper-input required label="Address Line 1 *"></paper-input>
+				<paper-input label="Address Line 2"></paper-input>
+				<div class="horizontal">
+					<paper-input required label="City *"></paper-input>
+					<paper-input required label="State *"></paper-input>
+					<paper-input required label="ZIP *" type="number"></paper-input>
+				</div>
+				<paper-input required label="E-Mail *" type="email">
+					<iron-icon icon="stitch-order:mail" prefix></iron-icon>
+				</paper-input>
+				<paper-input required label="Phone Number *" type="tel">
+					<iron-icon icon="stitch-order:phone" prefix></iron-icon>
+				</paper-input>
 			</div>
-		</div>
 
-		<div class="actions">
+			<div id="invoiceResume" class="section">
+				<h3>Total Cost</h3>
+				<div>$ [[productDetails.cost]] + shipping</div>
+				<p>(Note: shipping is calculated when purchase is made)</p>
+			</div>
 
-		</div>
+			<div id="buttons" class="section">
+				<paper-button id="submitButton" raised on-tap="_submit">Set up Order</paper-button>
+				<div spacer></div>
+				<paper-button id="cancelButton" on-tap="reset">Cancel</paper-button>
+			</div>
+		</form>
 	</template>
 
 	<script>
@@ -84,6 +207,33 @@ <h2>[[productDetails.Title]]</h2>
 				 */
 			  type: Object
 			}
+		  },
+
+		  listeners: {
+			'iron-form-presubmit': '_setAction'
+		  },
+
+		  attached: function(){
+			this.reset();
+		  },
+
+		  reset: function(){
+			this.productUrl = '';
+			this.$.form.reset();
+		  },
+
+		  _setAction: function(){
+			var params = this.$.form.request.params;
+			console.log(params);
+		  },
+
+		  _submit: function(){
+			if (this._validate()) {
+			  this.$.form.submit();
+			}
+		  },
+		  _validate: function(){
+			return true;
 		  }
 		});
 	  })();
diff --git a/stitch-order-icons.html b/stitch-order-icons.html
new file mode 100644
index 0000000..0ccebcf
--- /dev/null
+++ b/stitch-order-icons.html
@@ -0,0 +1,17 @@
+<link rel="import" href="bower_components/iron-iconset-svg/iron-iconset-svg.html">
+
+<iron-iconset-svg name="stitch-order" size="24">
+	<svg>
+		<defs>
+			<g id="mail">
+				<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
+			</g>
+			<g id="phone">
+				<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
+			</g>
+			<g id="shopping-cart">
+				<path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
+			</g>
+		</defs>
+	</svg>
+</iron-iconset-svg>
\ No newline at end of file