diff --git a/dist/index.html b/dist/index.html
index b873b1e..32f8345 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -2,19 +2,218 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>My JavaScript App</title>
+  <title>Trekking</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
-  <header>
 
+  <header class="main-header">
+    <section class="row margin-zero-auto">
+      <h1 class="logo">TREK</h1>
+      <button id="create-trip" class="button to-reserve">Create a Trip</button>
+    </section>
   </header>
-  <main>
 
+  <main class="row">
+
+    <!-- DISPLAY ERRORS HERE! -->
+    <section id="display-errors" class="small-12 large-12 columns">
+    </section>
+
+    <div class="content-wrapper">
+
+      <!-- TRIP INFO HERE WITH THE RESERVE FORM -->
+      <section class="small-12 large-6 columns">
+
+        <!-- DEFAULT LOGO -->
+        <section id="default-logo">
+          <h1 class="align-center">CHOOSE YOUR TREK</h1>
+        </section>
+
+        <!-- TRIP-INFO -->
+        <section id="trip-info">
+        </section>
+
+        <!-- CREATE TRIP FORM -->
+        <div id="create-trip-form" class="align-center">
+          <header>
+            <h4 class="header-styling cardo-font padding">Create New Trip</h4>
+          </header>
+
+          <form id="new-trip-form" class="small-11 small-centered columns cardo-font padding">
+            <label>Name</label>
+            <input type="text" id="name" name="name"></input>
+
+            <label>Continent</label>
+            <input type="text" id="continent" name="continent"></input>
+
+            <label>About</label>
+            <input type="text" id="about" name="about"></input>
+
+            <label>Category</label>
+            <input type="text" id="category" name="category"></input>
+
+            <label>Weeks</label>
+            <input type="text" id="weeks" name="weeks"></input>
+
+            <label>Cost</label>
+            <input type="text" id="cost" name="cost"></input>
+
+            <button class="button to-reserve-black" type="submit">Reserve</button>
+          </form>
+        </div>
+      </section>
+
+      <section id="table-select-wrapper" class="small-12 large-6 columns">
+        <p class="color-white align-center">
+          Filter by choosing from the dropdown menu
+          <br>
+          Click the table column name below to sort the list
+        </p>
+        <div class="set-width">
+          <select id="filter">
+            <option value="id">ID</option>
+            <option value="name">Name</option>
+            <option value="continent">Continent</option>
+            <option value="category">Category</option>
+            <option value="weeks">Weeks</option>
+            <option value="cost">Cost</option>
+          </select>
+          <input type="text" id="search-bar" placeholder="Search for a trip..." title="Search">
+        </div>
+
+        <div class="table-wrapper">
+          <table id="all-trips" class="hover striped stack">
+            <thead>
+              <th class="sort id">ID</th>
+              <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>
+
+            <!-- APPEND ALL TRIPS  -->
+            <tbody id="trip-list">
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+    </div> <!-- Content Wrapper -->
   </main>
-  <footer>
 
+  <footer class="align-center">
+    <p>
+      COPYRIGHT &copy; ID 2017
+    </p>
   </footer>
+
+  <!-- ALL TRIP TEMPLATE -->
+
+  <script id="trip-template" type="text/template">
+    <tr id="trip<%-id%>">
+      <td>
+        <%- id %>
+      </td>
+      <td>
+        <%- name %>
+      </td>
+      <td>
+        <%- continent %>
+      </td>
+      <td>
+        <%- category %>
+      </td>
+      <td>
+        <%- weeks %>
+      </td>
+      <td>
+        <%- cost %>
+      </td>
+    </tr>
+  </script>
+
+  <!-- TRIP TEMPLATE -->
+
+  <script id="trip-info-template" type="text/template">
+    <section class="padding align-center">
+      <header>
+        <h1>
+          <%- name %>
+        </h1>
+        <small>
+          <%- continent %>
+        </small>
+      </header>
+
+      <section>
+        <p>
+          <%- about %>
+        </p>
+      </section>
+    </section>
+
+    <div id="reserve-wrapper">
+      <header>
+        <h4 class="header-styling cardo-font align-center">Please enter your information below</h4>
+      </header>
+
+      <form id="reserve-form" class="small-11 small-centered columns cardo-font padding">
+        <!-- <small class="error">FIELDS CANNOT BE BLANK</small> -->
+        <input type="hidden" name="tripId" value="<%-id%>"></input>
+
+        <label>Name:</label>
+        <input type="text" id="name" name="name"></input>
+
+        <label>Age:</label>
+        <input type="number" id="age" name="age"></input>
+
+        <label>Email:</label>
+        <input type="text" id="email" name="email"></input>
+
+        <button class="button to-reserve-black" type="submit">Reserve</button>
+      </form>
+    </div>
+  </script>
+
+  <!-- ERROR TEMPLATE -->
+  <script id="error-template" type= "text/template">
+    <section class="alert callout error align-center">
+      <p>
+        <% if (obj.name) { %> Name: <%- name %><% } %>
+      </p>
+
+      <p>
+        <% if (obj.email) { %> Email: <%- email %><% } %>
+      </p>
+
+      <p>
+        <% if (obj.continent) { %> Continent: <%- continent %><% } %>
+      </p>
+
+      <p>
+        <% if (obj.category) { %> Category: <%- category %><% } %>
+      </p>
+
+      <p>
+        <% if (obj.weeks) { %> Weeks: <%- weeks %><% } %>
+      </p>
+
+      <p>
+        <% if (obj.cost) { %> Cost: <%- cost %><% } %>
+      </p>
+
+      <button class="close-button" aria-label="Dismiss alert" type="button">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </section>
+
+  </script>
+
   <script src="app.bundle.js" type="text/javascript"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/plugins/foundation.reveal.min.js"></script> -->
+  <!-- Other JS plugins can be included here -->
 </body>
 </html>
diff --git a/src/app.js b/src/app.js
index e7af594..62a2909 100644
--- a/src/app.js
+++ b/src/app.js
@@ -3,11 +3,255 @@ import $ from 'jquery';
 import _ from 'underscore';
 
 // CSS
+// import './backTrek.jpg';
 import './css/foundation.css';
 import './css/style.css';
 
-console.log('it loaded!');
+import Trip from './app/models/trip';
+import TripList from './app/collections/trip_list';
+import Reservation from './app/models/reservation';
 
-$(document).ready( () => {
-  $('main').html('<h1>Hello World!</h1>');
-});
+// console.log('it loaded!');
+
+const TRIP_FIELDS = ['name', 'continent', 'about', 'category', 'weeks', 'cost']
+
+const RESERVE_FIELDS = ['name', 'age', 'email', 'tripId'];
+
+
+//////////////////////////////////////////////////////////////
+//////////////////////// ALL TRIPS ///////////////////////////
+//////////////////////////////////////////////////////////////
+
+// Create a new collection of all trips
+const tripList = new TripList();
+
+// Create a template for all trips to append to the page
+const listTemplate = _.template($('#trip-template').html());
+
+// Render all trips
+const renderList = function renderList() {
+  $('#trip-list').html('');
+  tripList.forEach((trip) => {
+    let generatedHtml = listTemplate(trip.attributes);
+    $('#trip-list').append(generatedHtml);
+    $(`#trip${ trip.id }`).click(function() {
+      getTrip(trip.id);
+      // let singleTrip = tripList.findWhere({id: tripID});
+    });
+  });
+  $('th.sort').removeClass('current-sort-field');
+  $(`th.sort.${ tripList.comparator }`).addClass('current-sort-field');
+};
+
+
+////////////////////////////////////////////////////////////////
+//////////////////////// SINGLE TRIP ///////////////////////////
+////////////////////////////////////////////////////////////////
+
+const singleTripTemplate = _.template($('#trip-info-template').html());
+
+// Get one Trip
+const getTrip = function getTrip(tripID) {
+  $('#create-trip-form').hide();
+  $('#trip-info').html('');
+  let singleTrip = tripList.findWhere({id: tripID});
+  singleTrip.fetch({
+    success: (model, response) => {
+      console.log('Model: ' + singleTrip.parse(model));
+      console.log('Response: ' + response);
+      showTrip(model);
+    },
+  });
+};
+
+// Render One Trip
+const showTrip = function showTrip(trip) {
+  let generatedHtml = singleTripTemplate(trip.attributes);
+  $('#trip-info').html('');
+  $('#trip-info').append(generatedHtml);
+  $('#reserve-form').on('submit', (event) => {
+    event.preventDefault();
+    reserveTripHandler();
+  });
+};
+
+//////////////////////////////////////////////////////////////
+//////////////////////// CREATE TRIP /////////////////////////
+//////////////////////////////////////////////////////////////
+
+const newTripHandler = () => {
+  let tripData = {};
+  TRIP_FIELDS.forEach((field) => {
+    const inputElement = $(`#new-trip-form input[name="${ field }"]`);
+    const value = inputElement.val();
+    tripData[field] = value;
+  });
+
+  let newTrip = new Trip(tripData);
+
+  if (!newTrip.isValid()) {
+    displayErrors(newTrip.validationError);
+    return;
+  }
+
+  newTrip.save({}, {
+    success: (model, response) => {
+      tripList.add(model);
+    },
+    error: (model, response) => {
+      console.log(response);
+    },
+  });
+};
+
+/////////////////////////////////////////////////////////////////
+//////////////////////// RESERVE TRIP ///////////////////////////
+/////////////////////////////////////////////////////////////////
+
+const reserveTripHandler = () => {
+  let reservation = {};
+  RESERVE_FIELDS.forEach((field) => {
+    const inputElement = $(`#reserve-form [name="${ field }"]`);
+    const value = inputElement.val();
+
+    reservation[field] = value;
+
+    inputElement.val('');
+  });
+
+  let newReservation = new Reservation(reservation);
+
+  // If it is valid it will return false
+  if (!newReservation.isValid()) {
+
+    // Returns the last value of the last failed validation - errors hash
+    displayErrors(newReservation.validationError);
+    return;
+  }
+
+  // Save as a post method to the API
+  newReservation.save({}, {
+    success: (model, response) => {
+      // TODO: A popup to show that the resevation has been saved
+      console.log('Your reservation has been saved!');
+      // $('#reserve-form').reset();
+    },
+    error: (model, response) => {
+      console.log(response);
+    },
+  });
+};
+
+/////////////////////////////////////////////////////////////////
+//////////////////////// DISPLAY ERRORS /////////////////////////
+/////////////////////////////////////////////////////////////////
+
+const errorTemplate = _.template($('#error-template').html());
+
+// Now I need to display the template and then append it to the place that i want to append it to
+const displayErrors = (errors) => {
+  $('#display-errors').empty();
+
+  let errorObject = {};
+  for (let key in errors) {
+    errorObject[key] = errors[key];
+  }
+
+  let generatedHtml = errorTemplate(errorObject);
+  $('#display-errors').append(generatedHtml);
+  $('.close-button').on('click', (event) => {
+    $('#display-errors').empty();
+  });
+};
+
+/////////////////////////////////////////////////////////////////
+////////////////////////////// SORT /////////////////////////////
+/////////////////////////////////////////////////////////////////
+
+const SORT_FIELDS = ['id', 'name', 'continent', 'about', 'category', 'weeks', 'cost']
+
+// Attach sorting click handlers
+const sortingHandler = () => {
+  SORT_FIELDS.forEach((field) => {
+    const headerElement = $(`.sort.${ field }`);
+    console.log(field);
+    // Attaching an event handler here for the .on function for each of the header elements
+    headerElement.on('click', (event) => {
+      // Comparator is a property
+      tripList.comparator = field;
+      // If you don't change the comparator it will resort based on the sort not the comparator
+      tripList.sort();
+      // console.log('HITS SORT FUNCTION');
+    });
+  });
+};
+
+
+
+/////////////////////////////////////////////////////////////////
+//////////////////////////// FILTER /////////////////////////////
+/////////////////////////////////////////////////////////////////
+
+const filterDropdown = () => {
+  let value = $("#filter")[0].selectedIndex;
+  return value;
+}
+
+const filterResults = () => {
+  let input, filter, table, tr, td, i;
+  input = $('#search-bar')[0];
+  filter = input.value.toUpperCase();
+  table = $('#all-trips')[0];
+  tr = table.getElementsByTagName('tr');
+
+  // Run this function to get the current value of the selected index
+  let index = filterDropdown();
+  // console.log("Value of the index: " + index);
+  for (i = 0; i < tr.length; i++) {
+    td = tr[i].getElementsByTagName('td')[index];
+    if (td) {
+      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
+        tr[i].style.display = "";
+      } else {
+        tr[i].style.display = "none";
+      }
+    }
+  };
+};
+
+/////////////////////////////////////////////////////////////////
+///////////////////////// DOCUMENT READY ////////////////////////
+/////////////////////////////////////////////////////////////////
+
+
+$(document).ready(() => {
+
+
+
+  $('#create-trip-form').hide();
+  tripList.fetch();
+
+  // Listen and register. Once an update has been heard, render all the collection into the template
+  tripList.on('update', renderList);
+
+  // RENDER CREATE TRIP FORM
+  $('#create-trip').on('click', (event) => {
+    $('#trip-info').html('');
+    $('#create-trip-form').show();
+  });
+
+  // RENDER NEW TRIP FORM
+  $('#new-trip-form').on('submit', (event) => {
+    event.preventDefault();
+    newTripHandler();
+  });
+
+  // RUNS SORTING METHOD
+  sortingHandler();
+
+  // ON SORT, RENDER ORGANIZED TRIP LIST
+  tripList.on('sort', renderList);
+
+  $('#search-bar').on('keyup', filterResults);
+
+}); // DOCUMENT READY
diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js
new file mode 100644
index 0000000..35919a1
--- /dev/null
+++ b/src/app/collections/trip_list.js
@@ -0,0 +1,9 @@
+import Backbone from 'backbone';
+import Trip from '../models/trip';
+
+const TripList = Backbone.Collection.extend({
+  model: Trip,
+  url: 'https://ada-backtrek-api.herokuapp.com/trips',
+});
+
+export default TripList;
diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js
new file mode 100644
index 0000000..e367613
--- /dev/null
+++ b/src/app/models/reservation.js
@@ -0,0 +1,26 @@
+import Backbone from 'backbone';
+
+const Reservation = Backbone.Model.extend({
+  baseURL: 'https://ada-backtrek-api.herokuapp.com/trips',
+  url: function() {
+    return this.baseURL + '/' + this.attributes.tripId + '/' + 'reservations';
+  },
+
+  validate: function(attributes) {
+    const errors = {};
+    if (!attributes.email) {
+      errors['email'] = ['Email cannot be blank!'];
+    }
+    if (!attributes.name) {
+      errors['name'] = ['Name cannot be blank!'];
+    }
+    // If you are using in an if statment, then you want it to evaluate to false
+    if (Object.keys(errors).length < 1) {
+      return false;
+    }
+    return errors;
+  },
+});
+
+
+export default Reservation;
diff --git a/src/app/models/trip.js b/src/app/models/trip.js
new file mode 100644
index 0000000..94c4e2d
--- /dev/null
+++ b/src/app/models/trip.js
@@ -0,0 +1,33 @@
+import Backbone from 'backbone';
+
+const Trip = Backbone.Model.extend({
+  // These are properties!
+  urlRoot: 'https://ada-backtrek-api.herokuapp.com/trips',
+  validate: function(attributes) {
+    const errors = {};
+
+    if (!attributes.name) {
+      errors['name'] = ['Name cannot be blank!'];
+    }
+    if (!attributes.continent) {
+      errors['continent'] = ['Continent cannot be blank!'];
+    }
+    if (!attributes.category) {
+      errors['category'] = ['Category cannot be blank!'];
+    }
+    if (!attributes.weeks) {
+      errors['weeks'] = ['Weeks cannot be blank'];
+    }
+    if (!attributes.cost) {
+      errors['cost'] = ['Cost cannot be blank!'];
+    }
+
+    if (Object.keys(errors).length < 1) {
+      return false;
+    }
+    return errors;
+  },
+
+});
+
+export default Trip;
diff --git a/src/css/style.css b/src/css/style.css
index b7b2d44..1ef73d3 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,2 +1,137 @@
+/******* ALL STYLES *******/
 
-/* Your styles go here! */
+@import url('https://fonts.googleapis.com/css?family=Nunito');
+@import url('https://fonts.googleapis.com/css?family=Arvo');
+
+body, html {
+  max-width: 100%;
+  margin: 0;
+}
+
+body {
+  background: url('https://static.pexels.com/photos/33688/delicate-arch-night-stars-landscape.jpg');*/
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
+  font-family: 'Nunito', sans-serif;
+}
+
+h1, h2, h3, h4 {
+  font-family: 'Arvo', serif;
+}
+
+.padding {
+  padding: 1em;
+}
+.color-white {
+  color: white;
+}
+
+.to-reserve-black {
+  background-color: transparent;
+  border: 1px solid black;
+  border-radius: 5%;
+  color: black;
+}
+
+.align-center {
+  text-align: center;
+  /*padding: 10px;*/
+}
+
+
+/******* HEADER *******/
+
+.main-header {
+  text-align: center;
+  height: 150px;
+  padding: 30px;
+}
+
+@media screen and (min-width: 64em) {
+  .main-header {
+    text-align: center;
+    height: 200px;
+  }
+}
+
+h1.logo {
+  color: white;
+  top: 50%;
+  font-family: 'Arvo', serif;
+  font-size: 4em;
+}
+
+.to-reserve {
+  background-color: transparent;
+  border: 1px solid white;
+  border-radius: 5%;
+  color: white;
+}
+
+/******* MAIN *******/
+
+#default-logo {
+  color: white;
+  padding-top: 20%;
+}
+
+main {
+  overflow: scroll;
+  margin: 0 auto;
+}
+
+.set-width {
+  width: 100%;
+}
+
+/******* TABLE *******/
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  text-align: center;
+}
+
+table thead th {
+  text-align: center;
+}
+
+@media screen and (max-width: 39.9375em) {
+  table {
+    font-size: 1em;
+  }
+}
+
+.current-sort-field {
+  background-color: darkgrey;
+  color: white;
+}
+
+/******* TRIP INFO *******/
+
+#trip-info {
+  background-color: white;
+}
+
+#trip-info small {
+  font-size: 1em;
+}
+
+@media screen and (min-width: 64em) {
+  #trip-info small {
+    font-size: 2em;
+  }
+}
+
+/******* CREATE TRIP FORM *******/
+
+#create-trip-form {
+  background-color: white;
+}
+
+/******* FOOTER *******/
+
+footer {
+  color: white;
+}
