diff --git a/dist/index.html b/dist/index.html
index b873b1e..7da6934 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -6,10 +6,117 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
-  <header>
-
+  <header class='hero-section'>
+    <!-- <button class="button" id="createTrip"> Create trip! </button> -->
   </header>
   <main>
+    <section id="status-messages">
+        <button class="button clear float-right">
+          Hide
+        </button>
+
+        <ul>
+        </ul>
+      </section>
+    <aside class="columns large-4 small-12">
+  <h2>Add a Trip</h2>
+  <form id="add-trip-form">
+    <label for="name">Name</label>
+    <input type="text" name="name"></input>
+
+    <label for="continent">Continent</label>
+    <input type="text" name="continent"></input>
+
+    <label for="about">About</label>
+    <input type="text" name="about"></input>
+
+    <label for="category">Category</label>
+    <input type="text" name="category"></input>
+
+    <label for="weeks">Weeks</label>
+    <input type="number" name="weeks"></input>
+
+    <label for="cost">Cost</label>
+    <input type="number" name="cost"></input>
+
+    <input type="submit" value="Add it!" class="button"></input>
+  </form>
+</aside>
+<section id="oneTrip" class="columns large-8 small-12">
+</section>
+    <section class="columns large-8 small-12">
+      <h2>Trip Options!</h2>
+
+      <table>
+        <thead>
+          <th class="sort name">Name</th>
+          <th class="sort continent">Continent</th>
+          <th class="sort category">Category</th>
+          <th class="sort weeks">Weeks</th>
+          <th class="sort cost">Cost</th>
+        </thead>
+        <tbody id="trip-list">
+        </tbody>
+      </table>
+    </section>
+
+    <script type="text/template" id="trip-template">
+  <tr class="trip" id="<%- `trip${id }`%>" >
+    <td >
+      <%- name %>
+    </td>
+    <td>
+      <%- continent %>
+    </td>
+    <td>
+      <%- category %>
+    </td>
+    <td>
+      <%- weeks %>
+    </td>
+    <td>
+      <%- cost %>
+    </td>
+  </tr>
+</script>
+
+
+<script type="text/template" id="details-template" class="columns large-4 small-8">
+
+<h2>
+  <%- name %>
+</h2>
+
+<!-- <p class = 'tripId' id= `${<% id %>}`> -->
+<p>
+  <%- about %>
+</p>
+<button class="button" id="goReservationForm">
+  Reserve this trip!
+</button>
+
+<div id="spaceReservationForm">
+</div>
+
+</script>
+
+
+
+<script type="text/template" id="reservationFormTemplate" class="columns large-4 small-8">
+<form id="reservation-form">
+<label for="name">Name:</label>
+<input type="text" name="name" required></input>
+<input type="hidden" name="trip_id" value = "<%- tripId %>"  >
+</input>
+<label for="email">Email:</label>
+<input type="email" name="email" required></input>
+<input id="submitForm" type="submit" class="button" value="Reserve Trip"></input>
+
+
+</script>
+
+
+
 
   </main>
   <footer>
diff --git a/src/app.js b/src/app.js
index e7af594..d070e3e 100644
--- a/src/app.js
+++ b/src/app.js
@@ -8,6 +8,167 @@ import './css/style.css';
 
 console.log('it loaded!');
 
+import TripList from './app/collections/trip_list';
+
+import Trip from './app/models/trip';
+import Reservation from './app/models/reservation';
+
+const tripList = new TripList();
+
+const TRIP_FIELDS = ['name', 'continent', 'about', 'category', 'weeks', 'cost'];
+
+const RESERVATION_FIELDS = ['name', 'trip_id', 'email' ];
+
+const render = function render(tripList) {
+  $('.clear').hide();
+  const tripTableElement = $('#trip-list');
+  tripTableElement.html('');
+
+  tripList.forEach((trip) => {
+    const generatedHTML = tripTemplate(trip.attributes);
+    tripTableElement.append(generatedHTML);
+    $(`#trip${trip.attributes.id}`).on('click', (event) => {
+      let tripDetails = new Trip({id: `${trip.attributes.id}`});
+      tripDetails.fetch({
+        success: renderDetails
+      });
+    });
+    $('th.sort').removeClass('current-sort-field');
+    $(`th.sort.${ tripList.comparator }`).addClass('current-sort-field');
+  });
+};
+
+const renderDetails = function renderDetails(tripDetails){
+  const $detailsElement = $('#oneTrip');
+  console.log('found detailsElement?', $detailsElement)
+  $detailsElement.html('');
+
+  const generatedHTML = detailsTemplate(tripDetails.attributes);
+  $detailsElement.append(generatedHTML);
+
+  $('#goReservationForm').on('click', function(event) {
+    renderReservationForm(event, tripDetails);
+  });
+};
+
+const renderReservationForm = function renderReservationForm(event, tripDetails){
+  $('#goReservationForm').hide();
+  const tripId = tripDetails.attributes.id
+  const $spaceReservationForm = $('#spaceReservationForm');
+  $spaceReservationForm.html('');
+  const generatedHTML = reservationTemplate({tripId: tripId});
+  // console.log(generatedHTML);
+  $spaceReservationForm.append(generatedHTML);
+  // nuevas cosas
+  event.preventDefault();
+  $('#submitForm').on('click', reserveTripHandler);
+};
+
+const  reserveTripHandler = function reserveTripHandler(event){
+  event.preventDefault();
+  console.log('inside reserveTripHandler');
+  let reservationData = {};
+
+  RESERVATION_FIELDS.forEach((field) =>{
+    const inputElement = $(`#reservation-form input[name="${ field }"]`);
+    const value = inputElement.val();
+    reservationData[field] = value;
+    inputElement.val('');
+  });
+  const reservationEnterUser = new Reservation(reservationData);
+  console.log(`reservationEnterUser ${reservationEnterUser}`);
+  console.log(reservationEnterUser);
+  reservationEnterUser.save({}, { success: (model, response) => {
+    reportStatus('success', 'Make your bags. You reserve this trips Successfully!');
+    console.log("reservation went great");
+  }, error: (model, response) => {
+
+    const errors = response.responseJSON["errors"];
+    for (let field in errors) {
+      for (let problem of errors[field]) {
+        reportStatus('error', `${field}: ${problem}`);
+      }
+    }
+  }
+});
+};
+
+const addTripHandler = function(event) {
+  event.preventDefault();
+
+  const tripData = {};
+  TRIP_FIELDS.forEach((field) => {
+    // select the input corresponding to the field we want
+    const inputElement = $(`#add-trip-form input[name="${ field }"]`);
+    const value = inputElement.val();
+    tripData[field] = value;
+
+    inputElement.val('');
+  });
+  const tripEnterUser =  new Trip(tripData);
+
+  tripEnterUser.save({}, {
+    success: (model, response) => {
+      console.log('Successfully saved trip!');
+      reportStatus('success', 'Successfully saved trip!');
+    },
+    error: (model, response) => {
+      const errors = response.responseJSON["errors"];
+      for (let field in errors) {
+        for (let problem of errors[field]) {
+          reportStatus('error', `${field}: ${problem}`);
+        }
+      }
+    },
+  });
+};
+
+
+let tripTemplate;
+let detailsTemplate;
+let reservationTemplate;
+
+// Clear status messages
+const clearStatus = function clearStatus() {
+  $('.clear').hide();
+  $('#status-messages ul').html('');
+  $('#status-messages').hide();
+};
+
+// Add a new status message
+const reportStatus = function reportStatus(status, message) {
+  console.log(`Reporting ${ status } status: ${ message }`);
+  $('.clear').show();
+
+  const statusHTML = `<li class="${ status }">${ message }</li>`;
+
+  $('#status-messages ul').append(statusHTML);
+  $('#status-messages').show();
+};
+
 $(document).ready( () => {
-  $('main').html('<h1>Hello World!</h1>');
+
+  tripTemplate = _.template($('#trip-template').html());
+  detailsTemplate = _.template($('#details-template').html());
+  reservationTemplate = _.template($('#reservationFormTemplate').html());
+
+  tripList.on('update', render);
+
+  tripList.fetch();
+
+  tripList.on('sort', render);
+
+  $('#add-trip-form').on('submit', addTripHandler);
+
+  TRIP_FIELDS.forEach((field) => {
+    const headerElement = $(`th.sort.${ field }`);
+    headerElement.on('click', (event) => {
+      console.log(`Sorting table by ${ field }`);
+      tripList.comparator = field;
+      tripList.sort();
+    });
+  });
+
+  $('#status-messages').on('click', clearStatus);
+
 });
diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js
new file mode 100644
index 0000000..d77eb5f
--- /dev/null
+++ b/src/app/collections/trip_list.js
@@ -0,0 +1,11 @@
+import Backbone from 'backbone';
+import Trip from '../models/trip';
+
+const TripList = Backbone.Collection.extend({
+  model: Trip,
+  url: 'https://ada-backtrek-api.herokuapp.com/trips/',
+  comparator: 'name',
+
+});
+
+export default TripList;
diff --git a/src/app/models/details.js b/src/app/models/details.js
new file mode 100644
index 0000000..56bee2b
--- /dev/null
+++ b/src/app/models/details.js
@@ -0,0 +1,7 @@
+import Backbone from 'backbone';
+
+const Details = Backbone.Model.extend({
+  url: `https://ada-backtrek-api.herokuapp.com/trips/1`
+});
+
+export default Details;
diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js
new file mode 100644
index 0000000..356f933
--- /dev/null
+++ b/src/app/models/reservation.js
@@ -0,0 +1,11 @@
+import Backbone from 'backbone';
+
+const Reservation = Backbone.Model.extend({
+  url: function() {
+    console.log('https://ada-backtrek-api.herokuapp.com/trips/'+this.trip_id+'/reservations');
+    // return `https://ada-backtrek-api.herokuapp.com/trips/${this.trip_id}/reservations`;
+    return 'https://ada-backtrek-api.herokuapp.com/trips/'+this.get('trip_id')+'/reservations';
+  }
+});
+
+export default Reservation;
diff --git a/src/app/models/trip.js b/src/app/models/trip.js
new file mode 100644
index 0000000..3b73a64
--- /dev/null
+++ b/src/app/models/trip.js
@@ -0,0 +1,11 @@
+import Backbone from 'backbone';
+
+const Trip = Backbone.Model.extend({
+  url: function() {
+    return `https://ada-backtrek-api.herokuapp.com/trips/` + (this.id || '')
+  }
+  // url: `https://ada-backtrek-api.herokuapp.com/trips/${id}`
+  // url: `https://ada-backtrek-api.herokuapp.com/trips/`
+});
+
+export default Trip;
diff --git a/src/css/style.css b/src/css/style.css
index b7b2d44..b6c6a89 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,2 +1,38 @@
 
-/* Your styles go here! */
+.hero-section {
+  background: url('https://i.pinimg.com/originals/df/d0/00/dfd0000f193a9aa0864277462c6b063e.jpg') 50% no-repeat;
+  background-size: cover;
+  height: 300px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+th.sort {
+  cursor: pointer;
+}
+
+.current-sort-field {
+  background-color: darkgrey;
+  color: white;
+}
+
+.success {
+  background-color: #ade9ff;
+  font-size: 1.2em;
+}
+
+.error {
+  background-color: #fcc4d0;
+  font-size: 1.2em;
+}
+
+li {
+  list-style-type: none;
+  width: 100%;
+}
+
+#status-messages {
+  margin: 0%;
+}
