diff --git a/app/assets/javascripts/pins.js.coffee b/app/assets/javascripts/pins.js.coffee
index db808e6..2086189 100644
--- a/app/assets/javascripts/pins.js.coffee
+++ b/app/assets/javascripts/pins.js.coffee
@@ -5,3 +5,13 @@
 jQuery ->
 	$('#pins').imagesLoaded ->
 		$('#pins').masonry itemSelector: ".box"
+
+# Added Pagination Code here
+	if $('.pagination').length
+        $(window).scroll ->
+            url = $('.pagination .next_page a').attr('href')
+            if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
+                # What to do at the bottom of the page
+                $('.pagination').text("Fetching more pins...")
+                $.getScript(url)
+            $(window).scroll()
diff --git a/app/assets/stylesheets/scaffolds.css.scss b/app/assets/stylesheets/scaffolds.css.scss
index 6ec6a8f..28963f5 100644
--- a/app/assets/stylesheets/scaffolds.css.scss
+++ b/app/assets/stylesheets/scaffolds.css.scss
@@ -21,11 +21,12 @@ pre {
 a {
   color: #000;
   &:visited {
-    color: #666;
+    color: #fff;
   }
   &:hover {
     color: #fff;
-    background-color: #000;
+    /* 
+    background-color: #000; */
   }
 }
 
diff --git a/app/assets/stylesheets/styles.css.scss b/app/assets/stylesheets/styles.css.scss
index 31f72ee..a5fe2ac 100644
--- a/app/assets/stylesheets/styles.css.scss
+++ b/app/assets/stylesheets/styles.css.scss
@@ -7,7 +7,7 @@ $baseFontFamily: Oxygen;
 @import url(http://fonts.googleapis.com/css?family=Oxygen);
 
 /* Change button Color */
-$btnPrimaryBackground: purple;
+$btnPrimaryBackground: #00BFFF;
 $navbarBackgroundHighlight: white;
 $navbarBackground: white;
 
diff --git a/app/controllers/pins_controller.rb b/app/controllers/pins_controller.rb
index 25d64f5..df9313a 100644
--- a/app/controllers/pins_controller.rb
+++ b/app/controllers/pins_controller.rb
@@ -11,6 +11,7 @@ def index
     respond_to do |format|
       format.html # index.html.erb
       format.json { render json: @pin }
+      format.js
     end
   end
 
@@ -21,6 +22,7 @@ def show
     respond_to do |format|
       format.html # show.html.erb
       format.json { render json: @pin }
+      format.js
     end
   end
 
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 11bc4aa..7531898 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -14,7 +14,9 @@
                 <%= content_tag(:div, msg, class: "alert alert-#{name}") %>
             <% end %>
 			<%= yield %>
-			<%= render 'layouts/footer' %>
+			<div class="container">
+				<%= render 'layouts/footer' %>
+			</div>
 		</div>
 	</body>
 </html>
diff --git a/app/views/pins/index.js.erb b/app/views/pins/index.js.erb
new file mode 100644
index 0000000..006c85d
--- /dev/null
+++ b/app/views/pins/index.js.erb
@@ -0,0 +1,10 @@
+$boxes = $('<%= j render(@pins) %>')
+
+$('#pins').append( $boxes ).imagesLoaded( function(){
+    $('#pins').masonry( 'reload');
+});
+<% if @pins.next_page %>
+    $('.pagination').replaceWith('<%= j will_paginate(@pins) %>');
+<% else %>
+    $('.pagination').remove();
+<% end %>
\ No newline at end of file
diff --git a/app/views/pins/show.js.erb b/app/views/pins/show.js.erb
new file mode 100644
index 0000000..006c85d
--- /dev/null
+++ b/app/views/pins/show.js.erb
@@ -0,0 +1,10 @@
+$boxes = $('<%= j render(@pins) %>')
+
+$('#pins').append( $boxes ).imagesLoaded( function(){
+    $('#pins').masonry( 'reload');
+});
+<% if @pins.next_page %>
+    $('.pagination').replaceWith('<%= j will_paginate(@pins) %>');
+<% else %>
+    $('.pagination').remove();
+<% end %>
\ No newline at end of file