diff --git a/frontend/app/work_packages/directives/cost-object-directive.js b/frontend/app/work_packages/directives/cost-object-directive.js
index a3e61dbc61..c681603986 100644
--- a/frontend/app/work_packages/directives/cost-object-directive.js
+++ b/frontend/app/work_packages/directives/cost-object-directive.js
@@ -28,7 +28,7 @@
 
 angular.module('openproject.workPackages.directives')
 
-.directive('costObject', ['$timeout', function($timeout) {
+.directive('costObject', ['$timeout', 'PathHelper', function($timeout, Pathhelper) {
   return {
     restrict: 'E',
     require: '^workPackageField',
@@ -40,7 +40,7 @@ angular.module('openproject.workPackages.directives')
         scope.workPackage = workPackage;
         scope.costObject = scope.workPackage.embedded.costObject;
         if (scope.costObject) {
-          scope.linkToCostObject = '/cost_objects/' + scope.costObject.props.id;
+          scope.linkToCostObject = scope.costObject.links.staticPath.href;
         }
         $timeout(function() {
           element.find('a').on('click', function(e) {
diff --git a/lib/api/v3/budgets/budget_representer.rb b/lib/api/v3/budgets/budget_representer.rb
index 7a7908666e..fd5f268c82 100644
--- a/lib/api/v3/budgets/budget_representer.rb
+++ b/lib/api/v3/budgets/budget_representer.rb
@@ -25,6 +25,12 @@ module API
     module Budgets
       class BudgetRepresenter < ::API::Decorators::Single
         self_link title_getter: -> (*) { represented.subject }
+        link :staticPath do
+          {
+              href: cost_object_path(represented.id)
+          }
+        end
+
         property :id, render_nil: true
         property :subject, render_nil: true