diff --git a/frontend/app/templates/work_packages.show.html b/frontend/app/templates/work_packages.show.html
index b01ae7cf38..0f3ce1d940 100644
--- a/frontend/app/templates/work_packages.show.html
+++ b/frontend/app/templates/work_packages.show.html
@@ -21,11 +21,11 @@
               {{ getActivationActionLabel(isDetailsViewActive()) + ' ' + I18n.t('js.button_list_view') }}
             </label>
             <button id="work-packages-list-view-button"
-                    accesskey="{{ !isDetailsViewActive() ? '' : '8' }}"
+                    accesskey="{{ isListViewActive() ? '' : '8' }}"
                     class="button"
-                    title="{{ getActivationActionLabel(isDetailsViewActive()) + ' ' + I18n.t('js.button_list_view') }}"
+                    title="{{ getActivationActionLabel(!isListViewActive()) + ' ' + I18n.t('js.button_list_view') }}"
                     ng-click="closeDetailsView()"
-                    ng-class="{ '-active': !isDetailsViewActive() }">
+                    ng-class="{ '-active': isListViewActive() }">
               <i class="icon-table-view button--icon"></i>
             </button>
           </li>
@@ -40,7 +40,7 @@
                     class="button"
                     title="{{ getActivationActionLabel(!isDetailsViewActive()) + ' ' + I18n.t('js.button_details_view') }}"
                     ng-class="{ '-active': isDetailsViewActive() }"
-                    ng-click="openLatestTab()">
+                    ng-click="showWorkPackageDetails()">
               <i class="icon-table-detail-view button--icon"></i>
             </button>
           </li>
diff --git a/frontend/app/work_packages/controllers/work-package-show-controller.js b/frontend/app/work_packages/controllers/work-package-show-controller.js
index 99e90948bc..71c4cfd392 100644
--- a/frontend/app/work_packages/controllers/work-package-show-controller.js
+++ b/frontend/app/work_packages/controllers/work-package-show-controller.js
@@ -193,6 +193,14 @@ module.exports = function($scope,
     hideAllAttributes: true
   };
 
+  $scope.showWorkPackageDetails = function() {
+    $state.go('work-packages.list.details.overview', {workPackageId: $scope.workPackage.props.id});
+  };
+
+  $scope.closeDetailsView = function() {
+    $state.go('work-packages.list');
+  };
+
   function getFocusAnchorLabel(tab, workPackage) {
     var tabLabel = I18n.t('js.work_packages.tabs.' + tab),
         params = {
diff --git a/frontend/app/work_packages/controllers/work-packages-controller.js b/frontend/app/work_packages/controllers/work-packages-controller.js
index d10519d9af..db490d0ab1 100644
--- a/frontend/app/work_packages/controllers/work-packages-controller.js
+++ b/frontend/app/work_packages/controllers/work-packages-controller.js
@@ -49,6 +49,10 @@ module.exports = function($scope, $state, $stateParams, QueryService, PathHelper
     return $state.includes('work-packages.list.details');
   };
 
+  $scope.isListViewActive = function() {
+    return $state.is('work-packages.list');
+  };
+
   $scope.isShowViewActive = function() {
     return $state.includes('work-packages.show');
   };