diff --git a/public/js/app.js b/public/js/app.js
index a91dc0a..731039a 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -33,9 +33,6 @@ Vue.component('nav-bar', {
 			isActive: false
 		}
 	},
-	mounted() {
-		console.log("ready");
-  	},
   	methods: {
   		toggleState() {
   			this.isActive = !this.isActive;
diff --git a/public/js/subpedidos-create.js b/public/js/subpedidos-create.js
new file mode 100644
index 0000000..3a03fa6
--- /dev/null
+++ b/public/js/subpedidos-create.js
@@ -0,0 +1,20 @@
+Vue.component('subpedido-select', {
+	data() {
+		return {
+			subpedido: null,
+			subpedidosExistentes: []
+		}
+	},
+	mounted() {
+		console.log("ready");
+  	},
+	methods: {
+  		onType() {
+	    	axios.get("/api/subpedidos?nombre=" + this.subpedido).then(response => {
+	    		console.log(this.subpedido);
+	    		this.subpedidosExistentes = response.data
+	    		console.log(this.subpedidosExistentes);
+	    	});
+  		}
+  	}
+});
\ No newline at end of file
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index b02f652..9ebfd5b 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -34,5 +34,6 @@
     </div>
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
     <script src="{{ asset('js/app.js') }}" defer></script>
+    @yield('scripts')
 </body>
 </html>
diff --git a/resources/views/subpedidos_create.blade.php b/resources/views/subpedidos_create.blade.php
index d5061a6..cf5f1b4 100644
--- a/resources/views/subpedidos_create.blade.php
+++ b/resources/views/subpedidos_create.blade.php
@@ -1,5 +1,40 @@
 @extends('layouts.app')
 
 @section('content')
-SUBPEDIDOS
+<section class="section">
+<div id="root" class="container">
+  <h1 class="title">
+    Compras MPS
+  </h1>
+  <p class="subtitle">
+    Bienvenidx a la aplicación de compras del <strong>Mercado Popular de Subsistencia</strong>
+  </p>
+  <subpedido-select inline-template>
+  	<div class="block">
+		<div class="field">
+		    <label class="label">Escribí el nombre de tu familia o grupo de convivencia</label>
+	        <div class="control">
+        		<input class="input" @input="onType" v-model="subpedido"></input>
+			</div>
+			<p class="help">Intentá que sea claro como para que tus compas del barrio te identifiquen.</p>
+			<p class="help">Si ya empezaste a hacer tu pedido, empezá a tipear y luego seleccioná tu nombre en la lista una vez que aparezca:</p>
+		</div>
+	  	<div class="table-container">
+	  		<table class="table is-hoverable">
+	  			<tbody>
+	  				<tr v-for="subpedidosExistente in subpedidosExistentes"  >
+	  					<td><a v-text="subpedidosExistente" :href="subpedidosExistente"></a></td>
+	  				</tr>
+	  			</tbody>
+	  		</table>
+		</div>
+	</div>
+  </subpedido-select>
+</div>
+</section>
 @endsection
+
+@section('scripts')
+<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+<script src="{{ asset('js/subpedidos-create.js') }}"></script>
+@endsection
\ No newline at end of file