diff --git a/src/app.js b/src/app.js
index 854f991..235917c 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1 +1,60 @@
 import $ from 'jquery';
+import _ from 'underscore';
+// links contact model to application js file
+import Contact from './app/models/contact.js';
+import Rolodex from './app/collections/rolodex.js';
+
+import ContactView from './app/views/contact_view.js';
+import RolodexView from './app/views/rolodex_view.js';
+
+// new instance of contact model with static data, this is just for testing purposes
+
+$('#contact-details').hide();
+
+var myContacts = [
+  {
+  name: 'Ashton',
+  email: 'ashton@ashton.com',
+  phone: '909-000-0000'
+},
+{
+  name: 'Test',
+  email: 'Test@test.com',
+  phone: '000-000-0000'
+}];
+
+// NOTE notice the use of closures here
+// var render = function(contact){
+//   // selected the html that lives with the tmpl-contact-card and assigning to the var templateText
+//   var templateText = $('#tmpl-contact-card').html();
+//
+//   // create underscore template using the previously generated templateText (think of it as creating a new instance of underscore)
+//   var templateObject = _.template(templateText);
+//
+// // compile object data into underscore template oject
+//   var compiledHTML = templateObject(contact.toJSON());
+//
+//   //append
+//   $('#contact-cards').append(compiledHTML);
+// };
+
+// new instance of Rolodex (collection)
+var myRolodex = new Rolodex(myContacts);
+
+
+
+$(document).ready(function() {
+  // console.log('heyyyy');
+  // render(myContact);
+// the object shows up in params
+  var myRolodexView = new RolodexView({
+    model: myRolodex,
+    // this goes to rolodex_view.js
+    // _.template() returns a functoin
+    template: _.template($('#tmpl-contact-card').html()),
+    // setting el to be main?
+    // because there is one list, we can assign el to main
+    el: 'body'
+  });
+  myRolodexView.render();
+});
diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js
index 2d76cc9..aafe760 100644
--- a/src/app/views/contact_view.js
+++ b/src/app/views/contact_view.js
@@ -1,6 +1,28 @@
 import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import Contact from '../models/contact.js';
 
 const ContactView = Backbone.View.extend({
+
+  initialize: function(params){
+    this.template = params.myTemplate;
+  },
+  render: function(){
+    var generatedHTMLView = this.template(this.model.toJSON());
+
+    this.$el.html(generatedHTMLView);
+
+    return this;
+  },
+  events: {
+    'click': 'onClick'
+},
+onClick: function(event){
+  // Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
+  event.stopPropagation();
+  var click = this.trigger('selectedCard', this.model);
+}
 });
 
 export default ContactView;
diff --git a/src/app/views/rolodex_view.js b/src/app/views/rolodex_view.js
new file mode 100644
index 0000000..8750a48
--- /dev/null
+++ b/src/app/views/rolodex_view.js
@@ -0,0 +1,84 @@
+import Backbone from 'backbone';
+import $ from 'jquery';
+import _ from 'underscore';
+import Contact from '../models/contact.js';
+import ContactView from '../views/contact_view.js';
+
+
+var RolodexView = Backbone.View.extend({
+  initialize: function(params){
+    this.contactTemplate = params.template;
+
+    this.listenTo(this.model, "update", this.render);
+
+    this.modalTemplate = _.template($('#tmpl-contact-details').html());
+  },
+  render: function(){
+
+    this.$('#contact-cards').empty();
+
+    var that = this;
+
+    this.model.each(function(contact){
+
+      var contactView = new ContactView({
+        model: contact,
+        myTemplate: that.contactTemplate,
+      });
+
+      that.listenTo(contactView, "selectedCard", that.displayModal);
+
+      that.$('#contact-cards').append(contactView.render().$el);
+    });
+    return this;
+  },
+  events: {
+    'click .btn-save': 'saveContact',
+    'click .btn-cancel': 'clearContact',
+    'click': 'hideModal'
+  },
+  getInputData: function(){
+
+    var inputName = this.$('input[name=name]').val(); this.$('input[name=name]').val('');
+
+    var inputEmail = this.$('input[name=email]').val(); this.$('label[name=email]').val('');
+
+    var inputPhone = this.$('input[name=phone]').val(); this.$('label[name=phone]').val('');
+
+    return {
+      name: inputName,
+      email: inputEmail,
+      phone: inputPhone,
+    };
+  },
+  saveContact: function(){
+    var contact = new Contact(this.getInputData());
+    this.model.add(contact);
+  },
+  clearContact: function(){
+    this.$('#name').val('');
+    this.$('#email').val('');
+    this.$('#phone').val('');
+  },
+
+  displayModal: function(contact){
+
+    this.$('#contact-details').empty();
+    this.$('#contact-details').show();
+
+
+    var generatedModalTemplate = this.modalTemplate(contact.attributes);
+    // TODO what's best practice?
+    //var generatedModalTemplate = this.modalTemplate(contact.toJSON())
+
+    this.$('#contact-details').append(generatedModalTemplate);
+  },
+  hideModal: function(event){
+
+    if(this.$('#contact-details').has(event.target).length === 0 && !this.$('#contact-details').is(event.target)){
+      this.$('#contact-details').hide();
+    }
+  }
+});
+
+export default RolodexView;