diff --git a/app/assets/javascripts/projects/index.js b/app/assets/javascripts/projects/index.js
index a784e79b1..f3512367d 100644
--- a/app/assets/javascripts/projects/index.js
+++ b/app/assets/javascripts/projects/index.js
@@ -562,10 +562,10 @@
   }
 
   function initProjectsViewModeSwitch() {
-    let projectsPageSelector = '.projects-index ';
+    let projectsPageSelector = '.projects-index';
 
     // list/cards switch
-    $(projectsPageSelector + '.projects-view-mode').click(function() {
+    $(projectsPageSelector).on('click', '.projects-view-mode', function() {
       let $btn = $(this);
       $('.projects-view-mode').removeClass('active');
       if ($btn.hasClass('view-switch-cards')) {
@@ -577,16 +577,9 @@
     });
 
     // active/archived switch
-    $(projectsPageSelector + '.archive-switch').click(function() {
-      let $btn = $(this);
-      let mode = $btn.data('mode');
-      let $projectsPageSelector = $(projectsPageSelector);
-      if (mode === 'active') {
-        $projectsPageSelector.removeClass('archived').addClass('active').data('mode', 'active');
-      } else {
-        $projectsPageSelector.removeClass('active').addClass('archived').data('mode', 'archived');
-      }
-      loadCardsView();
+    $(projectsPageSelector).on('click', '.archive-switch', function() {
+      $(projectsPageSelector).toggleClass('archived active').data('mode', $(this).data('mode'));
+      refreshCurrentView();
     });
   }
 
diff --git a/app/assets/stylesheets/projects.scss b/app/assets/stylesheets/projects.scss
index 5b7d43b8e..509b13bf3 100644
--- a/app/assets/stylesheets/projects.scss
+++ b/app/assets/stylesheets/projects.scss
@@ -665,13 +665,13 @@ li.module-hover {
 .projects-index {
   &.active {
     [data-view-mode="archived"] {
-      display: none !important;
+      display: none;
     }
   }
 
   &.archived {
     [data-view-mode="active"] {
-      display: none !important;
+      display: none;
     }
   }
 
@@ -829,7 +829,7 @@ li.module-hover {
       grid-auto-rows: 2em;
       grid-column-gap: 1em;
       grid-row-gap: 1em;
-      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
+      grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
       width: 100%;
 
       .table-header {
diff --git a/app/views/projects/index.html.erb b/app/views/projects/index.html.erb
index abfe71ac3..0aef73891 100644
--- a/app/views/projects/index.html.erb
+++ b/app/views/projects/index.html.erb
@@ -12,7 +12,7 @@
   <%= render partial: 'projects/index/breadcrumbs' if @current_folder %>
 <% end %>
 
-<div class="content-pane flexible <%= mode %> projects-index" data-mode="<%= mode %>">
+<div class="content-pane flexible projects-index <%= mode %>" data-mode="<%= mode %>">
   <%= render partial: 'projects/index/header' %>
 
   <span style="display: none;" data-hook="projects-index-html"></span>
diff --git a/app/views/projects/index/_header.html.erb b/app/views/projects/index/_header.html.erb
index 042ba4e73..3221c9b84 100644
--- a/app/views/projects/index/_header.html.erb
+++ b/app/views/projects/index/_header.html.erb
@@ -143,21 +143,21 @@
         </ul>
       </div>
     </div>
-    <%= render layout: "shared/view_switch", locals: { disabled: false } do %>
+    <%= render layout: 'shared/view_switch', locals: { disabled: false } do %>
       <li class="view-switch-cards projects-view-mode active">
-        <i class="fas fa-th-large button-icon"></i> <%= "Cards" %>
+        <i class="fas fa-th-large button-icon"></i> <%= t('projects.index.header.cards') %>
       </li>
 
       <li class="view-switch-list projects-view-mode ">
-        <i class="fas fa-list button-icon"></i> <%= "Table" %>
+        <i class="fas fa-list button-icon"></i> <%= t('projects.index.header.table') %>
       </li>
 
       <li class="view-switch-active archive-switch" data-view-mode="archived" data-mode="active">
-        <i class="fas fa-rocket button-icon"></i> <%= "Go to Active projects" %>
+        <i class="fas fa-rocket button-icon"></i> <%= t('projects.index.header.active_projects') %>
       </li>
 
       <li class="view-switch-archived archive-switch" data-view-mode="active" data-mode="archived">
-        <i class="fas fa-archive button-icon"></i> <%= "Go to Archived projects" %>
+        <i class="fas fa-archive button-icon"></i> <%= t('projects.index.header.archived_projects') %>
       </li>
     <% end %>
   </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index b8a3ac66a..368696a9b 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -288,6 +288,11 @@ en:
 
   projects:
     index:
+      header:
+        cards: "Cards"
+        table: "Table"
+        active_projects: "Go to Active projects"
+        archived_projects: "Go to Archived projects"
       head_title: "Projects"
       navigation_title: "PROJECTS"
       breadcrumbs_root: "Projects"