diff --git a/dist/index.html b/dist/index.html
index b873b1e..39c7a20 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -2,19 +2,183 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>My JavaScript App</title>
+  <title>BackTREK </title>
+  <!--[if lt IE 9]>
+  <script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+  <![endif]-->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="shortcut icon" type="image/ico" href="/favicon.ico">
 </head>
 <body>
-  <header>
+  <div class="container-fluid body-wrapper">
+    <header class="row header">
+      <h1 class="col">BackTREK</h1>
+    </header>
 
-  </header>
-  <main>
+    <main class="row clearfix main">
+      <!-- <section id="status" class="col-12">
+        <div class="button-wrapper row">
+          <i class="fa fa-close fa-lg"></i>
+        </div>
+        <ul class="msg-list row">
+          <li>error or something</li>
+        </ul>
+      </section> -->
 
-  </main>
-  <footer>
+      <section class="col-12 main-content">
+        <div class="row content-wrapper">
+          <section class="col-sm-12 col-md-6 all-trips">
+            <div class="row search-wrapper">
+              <form class="col-sm-12 form-inline" action="">
+                <i class="col-sm-1 col-md-1 fa fa-search fa-lg"></i>
+                <div class="col-sm-11 col-md-4 form-group">
+                  <select class="form-control" id="search-select">
+                    <option name="name">Name</option>
+                    <option name="continent">Place</option>
+                    <option name="weeks">Weeks</option>
+                  </select>
+                </div>
+                <div class="col-sm-12 col-md-5 form-group">
+                  <input type="text" name="search-query" id="search-query">
+                </div>
+                <button type="submit" class="col-sm-12 col-md-2 btn btn-warning">Submit</button>
+              </form>
+            </div>
+            <div class="row table-wrapper">
+              <table id="trip-table" class="col-sm-12">
+                <thead>
+                  <tr>
+                    <th class="sort name">Name</th>
+                    <th class="sort continent">Place</th>
+                    <th class="sort weeks">Weeks</th>
+                  </tr>
+                </thead>
 
-  </footer>
+                <tbody id="trip-list"></tbody>
+
+              </table>
+            </div>
+          </section>
+
+          <section class="col-sm-12 col-md-6 trip-deets">
+            <div class="row justify-content-end">
+              <div class="col-12 add-wrapper">
+                <button id="add-trip" class="btn btn-warning" data-toggle="modal" data-target="#addTripModal">Add Trip</button>
+              </div>
+              <div class="modal fade" id="addTripModal" tabindex="-1" role="dialog" aria-labelledby="addTripModal" aria-hidden="true">
+                <div class="modal-dialog" role="document">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <h5 class="modal-title">Add Trip</h5>
+                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                      </button>
+                    </div>
+                    <div class="modal-body">
+                      <form id="add-trip-form" action="">
+                        <div class="form-group">
+                          <label for="name">Name</label>
+                          <input type="text" name="name"></input>
+                        </div>
+                        <div class="form-group">
+                          <label for="category">Category</label>
+                          <input type="text" name="category"></input>
+                        </div>
+                        <div class="form-group">
+                          <label for="continent">Continent</label>
+                          <select class="form-control" name="continent">
+                            <option name="Africa">Africa</option>
+                            <option name="Asia">Asia</option>
+                            <option name="Australasia">Australasia</option>
+                            <option name="Europe">Europe</option>
+                            <option name="North America">North America</option>
+                            <option name="South America">South America</option>
+                          </select>
+                        </div>
+                        <div class="form-group">
+                          <label for="budget">Budget</label>
+                          <input type="number" name="budget"></input>
+                        </div>
+                        <div class="form-group">
+                          <label for="weeks">Number of Weeks</label>
+                          <input type="number" name="weeks"></input>
+                        </div>
+                        <div class="form-group">
+                          <label for="about">Description</label>
+                          <textarea name="about"></textarea>
+                        </div>
+                        <div>
+                          <button type="submit" class="btn btn-primary">Submit</button>
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                        </div>
+                      </form>
+                    </div>
+                    <!-- <div class="modal-footer">
+
+                    </div> -->
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div id="trip-details" class="row details-wrap">
+            </div>
+
+          </section>
+        </div>
+      </section>
+    </main>
+
+    <footer class="row justify-content-center align-content-center footer">
+      <p class="col align-self-center copyright">Copyright &copy; 2017 Kee Nam <i class="fa fa-birthday-cake"></i></p>
+    </footer>
+  </div>
+
+
+
+
+
+  <script type="text/template" id="trip-template">
+    <tr class="trip-item">
+      <td id="trip<%- id %>">
+        <a class="trip-title" data-id="<%- id %>"><%- name %></a>
+      </td>
+      <td>
+        <%- continent %>
+      </td>
+      <td>
+        <%- weeks %>
+      </td>
+    </tr>
+  </script>
+
+  <script type="text/template" id="detail-template">
+    <div class="col-sm-12">
+      <h2 class="detail-name"><i class="fa fa-map-marker"></i> <%- name %></h2>
+    </div>
+    <div class="col-sm-12 col-md-6">
+      <h5 class="detail-continent"><i class="fa fa-globe"></i> Continent: <%- continent %></h5>
+    </div>
+    <div class="col-sm-12 col-md-6">
+      <h5 class="detail-weeks"><i class="fa fa-calendar"></i> Weeks: <%- weeks %></h5>
+    </div>
+    <div class="col-sm-12 col-md-6">
+      <h5 class="detail-category"><i class="fa fa-tags"></i> Category: <%- category %></h5>
+    </div>
+    <div class="col-sm-12 col-md-6">
+      <h5 class="detail-cost"><i class="fa fa-usd"></i> Cost: $<%- cost %></h5>
+    </div>
+    <div class="col-12">
+      <h5 class="about-label"><i class="fa fa-info-circle"></i> About: </h5>
+      <p class="detail-about"><%- about %></p>
+    </div>
+  </script>
+
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
   <script src="app.bundle.js" type="text/javascript"></script>
 </body>
 </html>
diff --git a/src/app.js b/src/app.js
index e7af594..6eabee6 100644
--- a/src/app.js
+++ b/src/app.js
@@ -6,8 +6,91 @@ import _ from 'underscore';
 import './css/foundation.css';
 import './css/style.css';
 
-console.log('it loaded!');
+// do i need you? -- I THINK SO
+import Trip from './app/models/trip';
+import TripList from './app/collections/trip_list';
 
+// ALL THE FIELDS
+const TRIP_FIELDS = ['id', 'name', 'continent', 'about', 'category', 'weeks', 'cost'];
+
+const tripList = new TripList();
+let trip = new Trip();
+
+let tripTemplate;
+let tripDetails;
+
+// RENDERS
+const render = function render(tripList) {
+  const tripTbody = $('#trip-list');
+  tripTbody.html('');
+
+  tripList.forEach((trip) => {
+    const generatedHtml = tripTemplate(trip.attributes);
+    tripTbody.append(generatedHtml);
+  });
+};
+
+const renderDetails = function renderDetails(trip){
+  const detailsDiv = $('#trip-details');
+  detailsDiv.html('');
+  trip.fetch({
+    success: (model) => {
+      const generatedHTML = $(tripDetails(trip.attributes));
+      detailsDiv.append(generatedHTML);
+      console.log(trip);
+    },
+    error: (status, response) => {
+      const errors = ($.parseJSON(response.responseText))['errors'];
+    }
+  });
+  console.log(trip);
+};
+
+// JQUERY
 $(document).ready( () => {
-  $('main').html('<h1>Hello World!</h1>');
+  // my templates
+  tripTemplate = _.template($('#trip-template').html());
+  tripDetails = _.template($('#detail-template').html());
+
+  console.log(`About to fetch data from ${ tripList.url }`);
+
+  tripList.on('update', render);
+  tripList.fetch();
+
+  trip.on('click', renderDetails);
+  trip.fetch();
+
+  TRIP_FIELDS.forEach((field) => {
+    const headerElement = $(`th.sort.${ field }`);
+    headerElement.on('click', (event) => {
+      tripList.comparator = field;
+      tripList.sort();
+    })
+  });
+
+  // Show individual trip details
+  $('tbody#trip-list').on('click', 'a', function() {
+    let tripID = $(this).attr('data-id');
+    trip = tripList.get(tripID);
+    trip.on('click', renderDetails(trip));
+  });
+
+  // Listen for form submissions
+  $('#add-trip-form').on('submit', (event) => {
+    event.preventDefault();
+
+    const tripData = readForm();
+    const trip = tripList.add(tripData);
+    console.log(tripData);
+    console.log(trip);
+
+    const newTrip = new Trip(formData);
+    trip.save({}, {
+      success: console.log("Success!"),
+      error: console.log("Oh no!")
+    });
+
+  });
+
+
 });
diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js
new file mode 100644
index 0000000..c073acd
--- /dev/null
+++ b/src/app/collections/trip_list.js
@@ -0,0 +1,17 @@
+import Backbone from 'backbone';
+import Trip from '../models/trip';
+
+const TripList = Backbone.Collection.extend({
+  model: Trip,
+  url: 'https://ada-backtrek-api.herokuapp.com/trips/',
+  parse: function(response) {
+    return response;
+  },
+  comparator: 'name',
+
+  initialize: function () {
+    this.model = Trip;
+  }
+});
+
+export default TripList;
diff --git a/src/app/models/trip.js b/src/app/models/trip.js
new file mode 100644
index 0000000..dfb43b7
--- /dev/null
+++ b/src/app/models/trip.js
@@ -0,0 +1,10 @@
+import Backbone from 'backbone';
+
+const Trip = Backbone.Model.extend({
+  urlRoot: `https://ada-backtrek-api.herokuapp.com/trips`,
+  parse: function(response) {
+    return response;
+  },
+});
+
+export default Trip;
diff --git a/src/css/style.css b/src/css/style.css
index b7b2d44..49dd1d9 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,2 +1,74 @@
-
 /* Your styles go here! */
+
+@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css');
+@import url('https://fonts.googleapis.com/css?family=Judson|Quando');
+
+/*---------- test ----------*/
+/** { border: 1px solid red !important; }*/
+
+
+
+html { box-sizing: border-box; }
+*, *:before, *:after { box-sizing: inherit; }
+html, body { height: 100%; }
+body {
+  width: 100%;
+  padding: 0;
+  font-size: 16px;
+  background: linear-gradient(to bottom, #6790c6 0%,#343789 100%);
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  font-family: 'Quando', serif;
+}
+h1, h2, button { font-family: 'Judson', serif; }
+a:hover,
+button:hover {
+  cursor: pointer;
+}
+header, main, footer { width: 100%; max-width: 100%; }
+.row { margin: 0; max-width: 100%; }
+.row .row { margin: 0; }
+
+div.add-wrapper { text-align: right; }
+
+/*header.header { margin: 0.5% 2% 1%; }*/
+section.main-content { margin-top: 1%; }
+
+i.fa { margin-right: 2%; }
+i.fa-search { margin: 0; }
+
+
+h1.col {
+  margin-left: 1%;
+  padding: 0;
+  color: #fefefe;
+}
+
+
+
+/*---------- table ----------*/
+table#trip-table { margin-top: 5%; }
+table#trip-table { width: 100%; overflow: scroll; }
+
+/*---------- form ----------*/
+input#search-query { margin: 0; }
+select#search-select { width: 100%; }
+
+/*---------- trip details ----------*/
+div#trip-details {
+  margin-top: 5%;
+  background: #fafafa;
+  /*padding: 2% 4%;*/
+  border-radius: 4px;
+}
+div#trip-details div { padding: 2% 4% 1%;}
+h2.detail-name {
+  margin-bottom: 2%;
+  padding: 1% 1% 2%;
+  border-bottom: 2px solid #ededed;
+}
+
+
+
+/*---------- footer ----------*/
+p.copyright { text-align: center; }
