diff --git a/build/css/styles.css b/build/css/styles.css
index 68a79a569..e759438ac 100644
--- a/build/css/styles.css
+++ b/build/css/styles.css
@@ -1,7 +1,73 @@
 @include foundation-everything;
+@import url('https://fonts.googleapis.com/css?family=Didact+Gothic|Modak');
+
+body{
+  background-color: #3f51b5;
+}
+
+canvas {
+    background: radial-gradient(white, silver);
+    position: fixed;
+}
 
 main {
-    background: lightblue;
+    text-align: center;
+    font-family: Didact Gothic;
+    color: #eceff1;
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    position: relative;
+    background-color: #3f51b5;
+    border-radius: 25px;
+}
+
+h1{
+  font-family: Modak;
+  color: #ff6f00;
+  font-size: 7rem;
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  text-shadow: 1px 1px 0 #3f51b5,
+    -1px 1px 0 #3f51b5,
+    1px -1px 0 #3f51b5,
+    -1px -1px 0 #3f51b5,
+    0px 1px 0 #3f51b5,
+    0px -1px 0 #3f51b5,
+    -1px 0px 0 #3f51b5,
+    1px 0px 0 #3f51b5,
+    2px 2px 0 #3f51b5,
+    -2px 2px 0 #3f51b5,
+    2px -2px 0 #3f51b5,
+    -2px -2px 0 #3f51b5,
+    0px 2px 0 #3f51b5,
+    0px -2px 0 #3f51b5,
+    -2px 0px 0 #3f51b5,
+    2px 0px 0 #3f51b5,
+    1px 2px 0 #3f51b5,
+    -1px 2px 0 #3f51b5,
+    1px -2px 0 #3f51b5,
+    -1px -2px 0 #3f51b5,
+    2px 1px 0 #3f51b5,
+    -2px 1px 0 #3f51b5,
+    2px -1px 0 #3f51b5,
+    -2px -1px 0 #3f51b5;
+    padding-top: 30px;
+    opacity: .7;
+
+}
+
+h1#rental-library:hover{
+  color: #ffb300;
+  cursor:pointer;
+}
+
+section.main-content{
+  padding-top: 30px;
 }
 
 header {
@@ -37,8 +103,93 @@ aside label {
 div {
   display: inline;
 }
-/*
-* {
-  border-style: solid;
+
+ul#movie-list {
+  list-style: none;
+}
+
+li {
+  display: inline-block;
+  width: 20%;
+  margin: 15px 0px 15px 0px;
+}
+
+li:hover{
+  cursor:pointer;
+  color: #ff6f00;
+}
+
+li:hover img{
+  box-shadow:rgba(0, 0, 0, 0.3) 0 16px 16px 0;
+}
+
+h3 {
+  display: inline;
+}
+img {
+  border-top: 2px solid #ffb300;
+  display: block;
+  margin: auto;
+}
+
+button.success.btn-add{
+  background-color: #ffb300;
+  color: #3f51b5;
+  padding: 2px;
+}
+
+input#search {
+  width: 80%;
+  margin: auto;
+  background-color: #eceff1;
+}
+
+button.btn-search{
+  background-color: #ff6f00;
+  margin-top: 10px;
+}
+
+button.btn-search:hover{
+  background-color: #ffb300;
+  color: #3f51b5;
+}
+button.success.btn-add:hover{
+  background-color: #ff6f00;
+}
+
+img.api-credit{
+  width: 20%;
+  border: none;
+}
+
+footer{
+  bottom: 0px;
+  text-align: center;
+  width: 100%;
+  padding: 10px;
+  margin-top: 30px;
+  background-color: #ff6f00;
+  z-index: 1;
+  position: relative;
+  opacity: .6;
+}
+
+.close-modal {
+  float: right;
+  color: #3f51b5;
+  font-weight: bold;
+}
+
+h4.close-modal:hover{
+  cursor:pointer;
+}
+
+#movie-details {
+  background-color: #ffb300;
+  color: black;
+  position: fixed;
+  z-index: 2;
+  left: 50%;
+  margin-left: -37.5%;
+  width: 75%;
 }
-*/
diff --git a/build/index.html b/build/index.html
index 03869595f..74420073b 100644
--- a/build/index.html
+++ b/build/index.html
@@ -1,15 +1,52 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
     <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="css/_settings.css">
     <link rel="stylesheet" type="text/css" href="css/foundation.css">
     <link rel="stylesheet" type="text/css" href="css/styles.css">
     <title>Backbone Baseline</title>
-  </head>
-  <body>
+</head>
+
+<body>
+    <canvas></canvas>
+    <h1 id="rental-library"> Comfort's Comfortable Movies </h1>
+    <main>
+        <section class="main-content">
+
+            <form id="searchbar">
+                <input type="text" name="search" id="search">
+                <button type="submit" class="button btn-search">Search</button>
+            </form>
+
+            <section class="reveal" id='movie-details' data-reveal data-animation-in="fade-in" data-animation-out="fade-out">
+            </section>
+            <ul id='movie-list'></ul>
+
+        </section>
+    </main>
+
+    <footer>
+        <img src="https://www.themoviedb.org/assets/static_cache/27b65cb40d26f78354a4ac5abf87b2be/images/v4/logos/powered-by-rectangle-green.svg" class="api-credit">
+    </footer>
+
+    <script id="movie-list-template" type="text/template">
+        <button class="button success btn-add" id=<%- movie.external_id%>>Add</button>
+        <h3><%- movie.title %></h3>
+        <img src=<%=movie.image_url%> />
+    </script>
+
+    <script type="text/template" id="movie-details-template">
+        <h4 class="close-modal">X</h4>
+        <h3><%- movie.title %></h3>
+        <img src=<%=movie.image_url%> />
+        <h4>Release Date: <%- movie.release_date %></h4>
+        <h4><%- movie.overview %></h4>
+    </script>
 
     <script src="/app.bundle.js"></script>
 
-  </body>
-  </html>
+</body>
+
+</html>
diff --git a/src/app.js b/src/app.js
index 58b77997c..96d55dd80 100644
--- a/src/app.js
+++ b/src/app.js
@@ -4,9 +4,42 @@
 import $ from 'jquery';
 import _ from 'underscore';
 
-// ready to go
-$(document).ready(function() {
+import MovieList from 'collections/movie-list';
+import MovieListView from 'views/movie_list_view';
+
+var movieList = new MovieList();
+
+var movielistView = new MovieListView({
+  model: movieList,
+  template: _.template($('#movie-list-template').html()),
+  el: '.main-content'
+});
+
+var canvas, context, width, height;
+
+canvas = document.querySelector('canvas');
+context = canvas.getContext('2d');
+
+width = canvas.width = innerWidth;
+height = canvas.height = innerHeight;
 
-  $('section.main-content').append('<p>Hello World!</p>');
+var imageData = context.createImageData(width, height);
+
+(function loop() {
+
+    for (var i = 0, n = imageData.data.length; i < n; i++) {
+        imageData.data[i] = Math.floor(Math.random() * 255);
+    }
+
+    context.putImageData(imageData, 0, 0);
+    requestAnimationFrame(loop);
+
+})();
+
+$(document).ready(function() {
 
+  $('#rental-library').click(function(event){
+    movieList.fetch();
+  })
+  movieList.fetch();
 });
diff --git a/src/collections/movie-list.js b/src/collections/movie-list.js
new file mode 100644
index 000000000..75b84bd98
--- /dev/null
+++ b/src/collections/movie-list.js
@@ -0,0 +1,10 @@
+import Backbone from 'backbone';
+
+import Movie from '../models/movie';
+
+var MovieList = Backbone.Collection.extend({
+  model: Movie,
+  url: 'http://localhost:3000/movies'
+});
+
+export default MovieList;
diff --git a/src/css/styles.css b/src/css/styles.css
index 68a79a569..98a8ac04a 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -1,7 +1,64 @@
 @include foundation-everything;
+@import url('https://fonts.googleapis.com/css?family=Didact+Gothic|Modak');
+
+body{
+  background-color: #3f51b5;
+}
+
+canvas {
+    background: radial-gradient(white, silver);
+    position: fixed;
+}
 
 main {
-    background: lightblue;
+    text-align: center;
+    font-family: Didact Gothic;
+    color: #eceff1;
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    position: absolute;
+    background-color: #3f51b5;
+    border-radius: 25px;
+}
+
+h1{
+  font-family: Modak;
+  color: #ff6f00;
+  font-size: 7rem;
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  text-shadow: 1px 1px 0 #3f51b5,
+    -1px 1px 0 #3f51b5,
+    1px -1px 0 #3f51b5,
+    -1px -1px 0 #3f51b5,
+    0px 1px 0 #3f51b5,
+    0px -1px 0 #3f51b5,
+    -1px 0px 0 #3f51b5,
+    1px 0px 0 #3f51b5,
+    2px 2px 0 #3f51b5,
+    -2px 2px 0 #3f51b5,
+    2px -2px 0 #3f51b5,
+    -2px -2px 0 #3f51b5,
+    0px 2px 0 #3f51b5,
+    0px -2px 0 #3f51b5,
+    -2px 0px 0 #3f51b5,
+    2px 0px 0 #3f51b5,
+    1px 2px 0 #3f51b5,
+    -1px 2px 0 #3f51b5,
+    1px -2px 0 #3f51b5,
+    -1px -2px 0 #3f51b5,
+    2px 1px 0 #3f51b5,
+    -2px 1px 0 #3f51b5,
+    2px -1px 0 #3f51b5,
+    -2px -1px 0 #3f51b5;
+    padding-top: 30px;
+    opacity: .7;
+
 }
 
 header {
@@ -37,8 +94,87 @@ aside label {
 div {
   display: inline;
 }
+
+ul#movie-list {
+  list-style: none;
+}
+
+li {
+  display: inline-block;
+  width: 20%;
+  margin: 15px 0px 15px 0px;
+}
+
+li:hover{
+  color: #ff6f00;
+}
+
+li:hover img{
+  box-shadow:rgba(0, 0, 0, 0.3) 0 16px 16px 0;
+}
+
+h3 {
+  display: inline;
+}
+img {
+  border-top: 2px solid #ffb300;
+  display: block;
+  margin: auto;
+}
+
+button.success.btn-add{
+  background-color: #ffb300;
+  color: #3f51b5;
+  padding: 2px;
+}
+
+input#search {
+  width: 80%;
+  margin: 30px auto auto auto;
+  background-color: #eceff1;
+}
+
+button.btn-search{
+  background-color: #ff6f00;
+  margin-top: 10px;
+}
+
+button.btn-search:hover{
+  background-color: #ffb300;
+  color: #3f51b5;
+}
+button.success.btn-add:hover{
+  background-color: #ff6f00;
+}
+
+/*#movie-details */
+.close-modal {
+  float: right !important;
+}
+#movie-details {
+  background-color: orange;
+  color: black;
+}
 /*
 * {
   border-style: solid;
 }
 */
+
+/*#movie-list {
+  z-index: 5;
+}*/
+
+/*#movie-details {
+  z-index: 10;
+  position: fixed;
+  width: 30%;
+  height: 30%;
+  top: 30%;
+  left: 30%;
+  background-color: #538ca3;
+  text-align: center;
+  border: 1em solid white;
+  margin-left: 20%;
+  border-radius: 20%;
+}*/
diff --git a/src/models/movie.js b/src/models/movie.js
new file mode 100644
index 000000000..1555e919e
--- /dev/null
+++ b/src/models/movie.js
@@ -0,0 +1,13 @@
+import Backbone from 'backbone';
+
+var Movie = Backbone.Model.extend({
+  defaults: {
+    'title': 'Tofu the Fluffer II',
+    'overview': 'The fluff is back and she is fluffier than ever!',
+    'release_date': 'Fluffer',
+    'image_url': 'https://vignette2.wikia.nocookie.net/zomg/images/0/03/Air_Fluff.PNG/revision/latest?cb=20090214043923',
+    'external_id': null
+  }
+});
+
+export default Movie;
diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js
new file mode 100644
index 000000000..aa3888027
--- /dev/null
+++ b/src/views/movie_list_view.js
@@ -0,0 +1,87 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+
+import MovieView from './movie_view';
+import Movie from '../models/movie.js'
+
+var MovieListView = Backbone.View.extend({
+  initialize: function(params) {
+    this.movieDetailsTemplate = _.template($('#movie-details-template').html());
+    // fix
+    this.template = params.template;
+    this.rentals = this.model
+    this.listenTo(this.model, "update", this.render);
+  },
+
+  render: function(options) {
+    this.$('#movie-list').empty();
+
+    if (this.model.length < 1){
+      alert("No movies match your search!");
+      this.model.fetch();
+    } else {
+    this.model.each((movie)=>{
+      var movieView = new MovieView({
+        model: movie,
+        template: this.template,
+      });
+
+      this.$('#movie-list').prepend(movieView.render().$el);
+      this.listenTo(movieView, 'add', this.addToLibrary);
+      this.listenTo(movieView, 'show', this.showDetails)
+
+    });
+  }
+    return this;
+  },
+
+  events: {
+    'submit #searchbar' : 'searchMovies',
+    'click .btn-add': 'addRental',
+    'click .close-modal' : 'closeDetails'
+  },
+
+  searchMovies: function(event) {
+    this.closeDetails();
+    event.preventDefault();
+
+    var queryParams = $('#search').val();
+    this.model.fetch({ data: { 'query': queryParams } });
+  },
+
+  addToLibrary: function(movie) {
+    var newMovie = {
+      title: movie.get("title"),
+      overview: movie.get("overview"),
+      release_date: movie.get("release_date"),
+      image_url: movie.get("image_url")
+    }
+
+    this.model.create(newMovie,
+      {error: function (model, response){
+        if (response.status == 500) {
+        alert(model.get("title") + ' is already in the rental library!');
+      }
+    },
+    success: function(model, response){
+      alert('Successfully added ' + model.get("title") + ' to the rental library!')
+    },
+    silent: true
+  });
+},
+
+  showDetails: function(movie) {
+    console.log(movie);
+    var movieHTML = this.movieDetailsTemplate({ movie: movie.attributes });
+    $('#movie-details').html(movieHTML);
+    $('#movie-details').fadeIn(200);
+
+  },
+
+  closeDetails: function(event) {
+    $('#movie-details').fadeOut(200);
+  }
+});
+
+export default MovieListView;
diff --git a/src/views/movie_view.js b/src/views/movie_view.js
new file mode 100644
index 000000000..6ca41fe0b
--- /dev/null
+++ b/src/views/movie_view.js
@@ -0,0 +1,38 @@
+import Backbone from 'backbone';
+import $ from 'jquery';
+
+var MovieView = Backbone.View.extend({
+  tagName: 'li',
+  attributes: { 'data-open': "movie-details"},
+  className: 'movie',
+  initialize: function(params) {
+    this.template = params.template;
+  },
+
+  render: function() {
+    var movieHTML = this.template({movie: this.model.attributes});
+    this.$el.html(movieHTML);
+
+    if (!(this.model.attributes.external_id)) {
+      this.$('.btn-add').hide();
+    }
+
+    return this;
+  },
+
+  events: {
+    'click .btn-add': 'addRental',
+    'click': 'showDetails'
+  },
+
+  addRental: function(event) {
+    this.trigger('add', this.model);
+    event.stopPropagation();
+  },
+
+  showDetails: function(event) {
+    this.trigger('show', this.model)
+  }
+});
+
+export default MovieView;
