diff --git a/app/assets/javascripts/repositories/repository_datatable.js b/app/assets/javascripts/repositories/repository_datatable.js
index a3e722214..37ec76231 100644
--- a/app/assets/javascripts/repositories/repository_datatable.js
+++ b/app/assets/javascripts/repositories/repository_datatable.js
@@ -410,6 +410,35 @@ var RepositoryDatatable = (function(global) {
     });
   }
 
+  function initRepositoryViewSwitcher() {
+    const viewSwitch = $('.view-switch');
+    const repositoryShow = $('.repository-show');
+    const stateViewSwitchBtnName = $('.state-view-switch-btn-name');
+    const selectedSwitchOptionClass = 'form-dropdown-state-item prevent-shrink';
+
+    function switchView(event, activeClass, inactiveClass) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      repositoryShow.removeClass(inactiveClass).addClass(activeClass);
+
+      $(`.view-switch-${inactiveClass} a`).removeClass(selectedSwitchOptionClass);
+      $(`.view-switch-${activeClass} a`).addClass(selectedSwitchOptionClass);
+
+      stateViewSwitchBtnName.text($(`.view-switch-${activeClass}`).text());
+      viewSwitch.removeClass('open');
+      RepositoryDatatable.reload();
+    }
+
+    viewSwitch.on('click', '.view-switch-archived', function(event) {
+      switchView(event, 'archived', 'active');
+    });
+
+    viewSwitch.on('click', '.view-switch-active', function(event) {
+      switchView(event, 'active', 'archived');
+    });
+  }
+
   function initExportActions() {
     $(document).on('click', '#exportRepositoriesButton', function(e) {
       e.preventDefault();
@@ -778,6 +807,7 @@ var RepositoryDatatable = (function(global) {
         initSaveButton();
         initCancelButton();
         initBSTooltips();
+        initRepositoryViewSwitcher();
         DataTableHelpers.initLengthAppearance($(TABLE_ID).closest('.dataTables_wrapper'));
 
         $('.dataTables_filter').addClass('hidden');
diff --git a/app/views/repositories/_toolbar_buttons.html.erb b/app/views/repositories/_toolbar_buttons.html.erb
index 398335d37..859a02b3f 100644
--- a/app/views/repositories/_toolbar_buttons.html.erb
+++ b/app/views/repositories/_toolbar_buttons.html.erb
@@ -60,8 +60,8 @@
           disabled: @repository.archived?,
           switchable: true,
           archived: params[:archived] || @repository.archived?,
-          active_url: repository_path(@repository),
-          archived_url: repository_path(@repository, archived: true),
+          active_url: nil,
+          archived_url: nil
         } %>
     <% end %>
   </div>
diff --git a/app/views/shared/_state_view_switch.html.erb b/app/views/shared/_state_view_switch.html.erb
index 35cd5258d..037d3ee16 100644
--- a/app/views/shared/_state_view_switch.html.erb
+++ b/app/views/shared/_state_view_switch.html.erb
@@ -5,12 +5,12 @@
   </div>
   <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="viewSwitchButton">
     <% if switchable %>
-      <li>
+      <li class="view-switch-active">
         <%= link_to active_url, class: "#{ 'form-dropdown-state-item prevent-shrink' unless archived }" do %>
           <%= t('toolbar.active_state') %>
         <% end %>
       </li>
-      <li>
+      <li class="view-switch-archived">
         <%= link_to archived_url, class: "#{ 'form-dropdown-state-item prevent-shrink' if archived }"  do %>
           <%= t('toolbar.archived_state') %>
         <% end %>