diff --git a/application.css b/application.css
new file mode 100644
index 00000000..f7b374a7
--- /dev/null
+++ b/application.css
@@ -0,0 +1,128 @@
+		/* General
+		---------------------------------------------------------*/
+		*, :after, :before {
+			box-sizing: border-box;
+		}
+		body{
+			background-color: #000;
+			margin:0;
+		}
+
+		div#mainContent{
+			background-color: #000;
+			max-width:680px;
+			width: 100%;
+			margin: 0 auto;
+			text-align: center;
+			font-size: 3.5rem;
+			color: #fff;
+		}
+
+		div#mainContent h1 {
+			margin:0;
+		}
+
+		div#mainContent ul{
+			list-style: none;
+			margin: 0;
+			padding: 0;
+		}
+
+		 /* Select
+		---------------------------------------------------------*/
+
+		li label {
+		  display:inline-block;
+		  margin: 0.5em 0;
+		  padding: 0.5em 0;
+		}
+
+		li.wifiNetwork {
+		  position: relative;
+		  display: inline-block;
+		  margin: 0;
+		}
+
+		li.wifiNetwork:after {
+			content: '▼';
+			position: absolute;
+			width: 50px;
+			color: #deab04;
+			font-weight: bold;
+			font-size: 2rem;
+			right: 10px;
+			bottom: 50px;
+			border-radius: 3px;
+			pointer-events: none;
+			z-index: 2;
+		}
+
+		select.wifiNetworkInputs {
+			position: relative;
+			max-width:680px;
+			width: 100vw;
+			background: #111;
+			color: #999;
+			border: none;
+			outline: none;
+			font-size: 2.5rem;
+			padding: 1em;
+			margin: 0;
+			border-radius: 3px;
+			cursor: pointer;
+			height: auto;
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			appearance: none;
+		}
+
+		.wifiNetworkInputs{
+			max-width:680px;
+			width: 100vw;
+			padding:1em 0;
+			font-size: .8em;
+			color: #999;
+			background: #111;
+			border:#999 solid 1px;
+		}
+
+		.wifiConnectButton{
+			width: 310px;
+			height: 150px;
+			margin:1.5em 0 0 0;
+			background-color: #deab04;
+			font-size: 3rem;
+			color: #fff;
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			appearance: none;
+		}
+
+		.reset input {
+			background:#BF1A2F;
+			border:#BF1A2F;
+			color:white;
+			padding:1em;
+			margin-top:1.5em;
+			font-size:1.5rem;
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			appearance: none;
+		}
+
+		  /* Wifi Icon
+		---------------------------------------------------------*/
+
+		.wifiIcon {
+		  padding: 20px;
+		}
+		.wifiIcon, .wifiIcon:before {
+		  display: inline-block;
+		  border: 60px double transparent;
+		  border-top-color: currentColor;
+		  border-radius: 50%;
+		}
+		.wifiIcon:before {
+		  content: '';
+		  width: 0; height: 0;
+		}
diff --git a/index.html.erb b/index.html.erb
new file mode 100644
index 00000000..0beb67d4
--- /dev/null
+++ b/index.html.erb
@@ -0,0 +1,30 @@
+<div id="mainContent">
+  <h1>WiFi Setup</h1>
+  <div class="wifiIcon" /></div>
+  <%=form_tag("/main/save_credentials", method: "get") do%>
+
+    <ul>
+      <li><%=label_tag(:ssid, "Select your WiFi network")%></li>
+      <li class="wifiNetwork">
+        <select id="ssid" name="ap_info", class="wifiNetworkInputs">
+          <%for ap in @wifi_ap_hash do%>
+              <option value='<%=ap[:ssid]%>+<%=ap[:encryption_type]%>'><%=ap[:ssid]%></option>
+          <%end%>
+        </select>
+      </li>
+
+      <li><%=label_tag(:wifi_key, "Your Wifi password")%></li>
+      <li>
+        <%=password_field_tag(:wifi_key, nil, class: "wifiNetworkInputs")%>
+      </li>
+
+      <%=submit_tag("Connect!", class: "wifiConnectButton")%>
+    </ul>
+
+  <%end%>
+  <div class="reset">
+  <%=form_tag("/main/reset_all", method: "get") do%>
+    <%=submit_tag("RESET DEVICE")%>
+  </div>
+  <%end%>
+</div>