diff --git a/app/assets/javascripts/usage_quotas/storage/components/project_storage_app.vue b/app/assets/javascripts/usage_quotas/storage/components/project_storage_app.vue
index 8075e640720f517329a25f42dd06cc5b99548397..cc4219c2ca9e12f1416d08ae0f29d36f01688cde 100644
--- a/app/assets/javascripts/usage_quotas/storage/components/project_storage_app.vue
+++ b/app/assets/javascripts/usage_quotas/storage/components/project_storage_app.vue
@@ -4,6 +4,8 @@ import { sprintf } from '~/locale';
 import { updateRepositorySize } from '~/api/projects_api';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import SectionedPercentageBar from '~/usage_quotas/components/sectioned_percentage_bar.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import getCostFactoredProjectStorageStatistics from 'ee_else_ce/usage_quotas/storage/queries/cost_factored_project_storage.query.graphql';
 import getProjectStorageStatistics from 'ee_else_ce/usage_quotas/storage/queries/project_storage.query.graphql';
 import {
   ERROR_MESSAGE,
@@ -32,10 +34,15 @@ export default {
     ProjectStorageDetail,
     SectionedPercentageBar,
   },
+  mixins: [glFeatureFlagsMixin()],
   inject: ['projectPath'],
   apollo: {
     project: {
-      query: getProjectStorageStatistics,
+      query() {
+        return this.glFeatures?.displayCostFactoredStorageSizeOnProjectPages
+          ? getCostFactoredProjectStorageStatistics
+          : getProjectStorageStatistics;
+      },
       variables() {
         return {
           fullPath: this.projectPath,
diff --git a/app/assets/javascripts/usage_quotas/storage/queries/cost_factored_project_storage.query.graphql b/app/assets/javascripts/usage_quotas/storage/queries/cost_factored_project_storage.query.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..4438ad4cc3d46f67229a393664b940014d7d1596
--- /dev/null
+++ b/app/assets/javascripts/usage_quotas/storage/queries/cost_factored_project_storage.query.graphql
@@ -0,0 +1,23 @@
+query getCostFactoredProjectStorageStatistics($fullPath: ID!) {
+  project(fullPath: $fullPath) {
+    id
+    statisticsDetailsPaths {
+      containerRegistry
+      buildArtifacts
+      packages
+      repository
+      snippets
+      wiki
+    }
+    statistics {
+      containerRegistrySize
+      buildArtifactsSize
+      lfsObjectsSize
+      packagesSize
+      repositorySize
+      snippetsSize
+      storageSize
+      wikiSize
+    }
+  }
+}
diff --git a/ee/app/assets/javascripts/usage_quotas/storage/queries/cost_factored_project_storage.query.graphql b/ee/app/assets/javascripts/usage_quotas/storage/queries/cost_factored_project_storage.query.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..dc80ae45b66c260d86fc77c3084788d35b3f4780
--- /dev/null
+++ b/ee/app/assets/javascripts/usage_quotas/storage/queries/cost_factored_project_storage.query.graphql
@@ -0,0 +1,23 @@
+query getEECostFactoredProjectStorageStatistics($fullPath: ID!) {
+  project(fullPath: $fullPath) {
+    id
+    statisticsDetailsPaths {
+      containerRegistry
+      buildArtifacts
+      packages
+      repository
+      snippets
+      wiki
+    }
+    statistics {
+      containerRegistrySize
+      buildArtifactsSize: costFactoredBuildArtifactsSize
+      lfsObjectsSize: costFactoredLfsObjectsSize
+      packagesSize: costFactoredPackagesSize
+      repositorySize: costFactoredRepositorySize
+      snippetsSize: costFactoredSnippetsSize
+      storageSize: costFactoredStorageSize
+      wikiSize: costFactoredWikiSize
+    }
+  }
+}
diff --git a/ee/app/controllers/ee/projects/usage_quotas_controller.rb b/ee/app/controllers/ee/projects/usage_quotas_controller.rb
index a10aef9005f29974505ad0746ee61311946a1f82..243652fc96acaf36429b60bed68306f9c3a2605f 100644
--- a/ee/app/controllers/ee/projects/usage_quotas_controller.rb
+++ b/ee/app/controllers/ee/projects/usage_quotas_controller.rb
@@ -8,6 +8,7 @@ module UsageQuotasController
       prepended do
         before_action only: [:index] do
           push_frontend_feature_flag(:data_transfer_monitoring, project)
+          push_frontend_feature_flag(:display_cost_factored_storage_size_on_project_pages)
         end
       end
     end
diff --git a/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js b/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js
index b80223cb404e9c92e37f553adc1c8cefac471fbd..babefe1dd197a8106ff3d0cf6f01f46f48bd8c43 100644
--- a/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js
+++ b/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js
@@ -16,6 +16,7 @@ import {
   NAMESPACE_STORAGE_TYPES,
   TOTAL_USAGE_DEFAULT_TEXT,
 } from '~/usage_quotas/storage/constants';
+import getCostFactoredProjectStorageStatistics from 'ee_else_ce/usage_quotas/storage/queries/cost_factored_project_storage.query.graphql';
 import getProjectStorageStatistics from 'ee_else_ce/usage_quotas/storage/queries/project_storage.query.graphql';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import {
@@ -38,7 +39,10 @@ describe('ProjectStorageApp', () => {
       response = jest.fn().mockResolvedValue(mockedValue);
     }
 
-    const requestHandlers = [[getProjectStorageStatistics, response]];
+    const requestHandlers = [
+      [getProjectStorageStatistics, response],
+      [getCostFactoredProjectStorageStatistics, response],
+    ];
 
     return createMockApollo(requestHandlers);
   };
@@ -187,4 +191,30 @@ describe('ProjectStorageApp', () => {
       ]);
     });
   });
+
+  describe('when displayCostFactoredStorageSizeOnProjectPages feature flag is enabled', () => {
+    let mockApollo;
+    beforeEach(async () => {
+      mockApollo = createMockApolloProvider({
+        mockedValue: mockGetProjectStorageStatisticsGraphQLResponse,
+      });
+      createComponent({
+        mockApollo,
+        provide: {
+          glFeatures: {
+            displayCostFactoredStorageSizeOnProjectPages: true,
+          },
+        },
+      });
+      await waitForPromises();
+    });
+
+    it('renders correct total usage', () => {
+      const expectedValue = numberToHumanSize(
+        mockGetProjectStorageStatisticsGraphQLResponse.data.project.statistics.storageSize,
+        1,
+      );
+      expect(findUsagePercentage().text()).toBe(expectedValue);
+    });
+  });
 });