diff --git a/app/assets/javascripts/angular/openproject-costs-app.js b/app/assets/javascripts/angular/openproject-costs-app.js
index 4c18de89f0..0e95b6228a 100644
--- a/app/assets/javascripts/angular/openproject-costs-app.js
+++ b/app/assets/javascripts/angular/openproject-costs-app.js
@@ -29,9 +29,12 @@
 // main app
 var openprojectCostsApp = angular.module('openproject');
 
-openprojectCostsApp.run(['HookService', function(HookService) {
-  var setupCostsAttributes = function(attributes) {
-    var spentTimeIndex = attributes.indexOf('spentTime');
+openprojectCostsApp.run(['HookService',
+                         'ConfigurationService',
+                         'WorkPackagesOverviewService',
+                         function(HookService, ConfigurationService, WorkPackagesOverviewService) {
+  var setupCostsAttributes = function() {
+    var position = WorkPackagesOverviewService.getGroupedWorkPackageOverviewAttributes().length - 1;
     var costsAttributes = {
       overallCosts: null,
       spentHours: 'spentHoursLinked',
@@ -39,22 +42,17 @@ openprojectCostsApp.run(['HookService', function(HookService) {
       summarizedCostEntries: 'spentUnits'
     };
 
+    WorkPackagesOverviewService.removeAttribute('spentTime');
+    WorkPackagesOverviewService.addGroup('costs', position);
+
     angular.forEach(costsAttributes, function(id, costAttribute) {
-      attributes.push(id || costAttribute);
+      WorkPackagesOverviewService.addAttributeToGroup('costs', id || costAttribute);
     });
-
-    if (spentTimeIndex >= 0) {
-      attributes.splice(spentTimeIndex, 1);
-    }
   }
 
-  HookService.register('workPackagePluginAttributes', function(params) {
-    var costsActivted = params.enabledModules.indexOf('costs_module') >= 0;
-
-    if (costsActivted) {
-      setupCostsAttributes(params.attributes)
-    }
-  });
+  if (ConfigurationService.isModuleEnabled('costs_module')) {
+    setupCostsAttributes();
+  }
 
   HookService.register('workPackageOverviewAttributes', function(params) {
     var directive;
diff --git a/config/locales/js-de.yml b/config/locales/js-de.yml
index 9f5fe088b0..40935cd850 100644
--- a/config/locales/js-de.yml
+++ b/config/locales/js-de.yml
@@ -36,6 +36,8 @@
 de:
   js:
     work_packages:
+      property_groups:
+        costs: "Kosten"
       properties:
         costObject: "Budget"
         spentHoursLinked: "Aufgewendete Zeit"
diff --git a/config/locales/js-en.yml b/config/locales/js-en.yml
index f8be2fa538..16f46159ce 100644
--- a/config/locales/js-en.yml
+++ b/config/locales/js-en.yml
@@ -36,6 +36,8 @@
 en:
   js:
     work_packages:
+      property_groups:
+        costs: "Costs"
       properties:
         costObject: "Budget"
         spentHoursLinked: "Spent time"