diff --git a/app/views/catalog/_catalog_listing.html.erb b/app/views/catalog/_catalog_listing.html.erb
index 8480b200a..b4e584050 100644
--- a/app/views/catalog/_catalog_listing.html.erb
+++ b/app/views/catalog/_catalog_listing.html.erb
@@ -5,7 +5,7 @@
     </h2>
     <div class="thumbnails row">
       <% (equipment_models[0, 3]).each do |equipment_model| %>
-        <div class="col-md-4">
+        <div class="col-md-4 eq-item">
           <%= render partial: 'catalog/equipment_model_div', locals: {
             equipment_model: equipment_model,
             availability_hash: availability_hash,
@@ -15,4 +15,4 @@
       <% end %>
     </div>
   <% end %>
-<% end %>
\ No newline at end of file
+<% end %>
diff --git a/app/views/catalog/index.html.erb b/app/views/catalog/index.html.erb
index d86bae6a7..529ca0237 100644
--- a/app/views/catalog/index.html.erb
+++ b/app/views/catalog/index.html.erb
@@ -5,7 +5,7 @@
     <%= render partial: 'no_equipment' %>
   <% else %>
     <div class="row">
-      <div id="pagination_line" class="col-md-12">
+      <div id="pagination_line" class="col-md-10">
         <%# for kaminari pagination %>
         <%= paginate @page_eq_models_by_category,
               params: { controller: 'catalog', action: 'index' } %>
@@ -16,7 +16,10 @@
           <%= select_tag :items_per_page,
                 options_for_select(@per_page_opts, session[:items_per_page]),
                 class: 'autosubmitme form-control' %>
-        <% end %>
+	<% end %>
+      </div>
+      <div id="etc" class="col-md-2" style="margin-top: 17.6px;">
+        <%= button_tag 'Hide unavailable', id: 'toggle_unavailable', class: 'btn btn-default'%>
       </div>
     </div>
 
@@ -31,3 +34,28 @@
     <%= paginate @page_eq_models_by_category %>
   <% end %>
 </div>
+
+<script>
+$(document).ready(function() {
+  $('#toggle_unavailable').width(
+    Math.max.apply(
+      Math,
+      $('#toggle_unavailable').map(function(){
+        return $(this).width();
+      }).get()
+    )
+  );
+  $("#toggle_unavailable").click(function() {
+    if ($("#toggle_unavailable").text() == "Hide unavailable") {
+      $("#toggle_unavailable").text("Show unavailable");
+    } else {
+      $("#toggle_unavailable").text("Hide unavailable");
+    }
+    $(".eq-item").each(function() {
+      if ($(this).find(".availability-num").text() <= 0) {
+        $(this).toggle();
+      }
+    });
+  });
+});
+</script>
diff --git a/spec/features/reservations_spec.rb b/spec/features/reservations_spec.rb
index d4e9fbbf0..7cf8012df 100644
--- a/spec/features/reservations_spec.rb
+++ b/spec/features/reservations_spec.rb
@@ -836,4 +836,42 @@
       expect(page).to have_content('Description')
     end
   end
+
+  context 'when hide unavailable button is clicked' do
+    before(:each) do
+      empty_cart
+      Capybara.ignore_hidden_elements = false
+      @eq_model1 = FactoryGirl.create(:equipment_model, category: @category)
+      FactoryGirl.create(:equipment_item, equipment_model: @eq_model1)
+      @eq_model1[:overdue_count] = 1
+      @eq_model1.save!
+      @eq_model1.reload
+      page.reset!
+      visit root_path
+    end
+
+    after(:each) do
+      Capybara.ignore_hidden_elements = true
+      @eq_model1.destroy
+      page.reset!
+    end
+
+    it 'shows all items by default' do
+      expect(page).to have_css('.availability-num', text: 1, visible: true)
+      expect(page).to have_css('.availability-num', text: 0, visible: true)
+    end
+
+    it 'hides only unavailable items when clicked' do
+      click_button 'toggle_unavailable'
+      expect(page).to have_css('.availability-num', text: 1, visible: true)
+      expect(page).to have_css('.availability-num', text: 0, visible: false)
+    end
+
+    it 'reshows all items when clicked again' do
+      click_button 'toggle_unavailable'
+      click_button 'toggle_unavailable'
+      expect(page).to have_css('.availability-num', text: 1, visible: :true)
+      expect(page).to have_css('.availability-num', text: 0, visible: :true)
+    end
+  end
 end