diff --git a/app/assets/javascripts/environments/environment_details/index.vue b/app/assets/javascripts/environments/environment_details/index.vue
index 3a22e9c4eb9380d28d4b9b4820939eb2718862e1..ff08f9d22b665bd4047131a05464ac04c1d9dc78 100644
--- a/app/assets/javascripts/environments/environment_details/index.vue
+++ b/app/assets/javascripts/environments/environment_details/index.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { GlLoadingIcon, GlTabs, GlTab } from '@gitlab/ui';
+import { GlLoadingIcon, GlTabs, GlTab, GlBadge } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { getParameterValues, setUrlParams, updateHistory } from '~/lib/utils/url_utility';
 import environmentClusterAgentQuery from '~/environments/graphql/queries/environment_cluster_agent.query.graphql';
@@ -12,6 +12,7 @@ export default {
     GlLoadingIcon,
     GlTabs,
     GlTab,
+    GlBadge,
     DeploymentHistory,
     KubernetesOverview,
   },
@@ -113,11 +114,14 @@ export default {
       />
     </gl-tab>
 
-    <gl-tab
-      :title="$options.i18n.deploymentHistory"
-      :query-param-value="$options.params.deployments"
-      :title-link-class="linkClass(1)"
-    >
+    <gl-tab :query-param-value="$options.params.deployments" :title-link-class="linkClass(1)">
+      <template #title>
+        {{ $options.i18n.deploymentHistory }}
+        <gl-badge size="sm" class="gl-tab-counter-badge">{{
+          environment.deploymentsDisplayCount
+        }}</gl-badge>
+      </template>
+
       <deployment-history
         :project-full-path="projectFullPath"
         :environment-name="environmentName"
diff --git a/app/assets/javascripts/environments/graphql/queries/environment_cluster_agent.query.graphql b/app/assets/javascripts/environments/graphql/queries/environment_cluster_agent.query.graphql
index 3f8874f2a8d8874d74a3d4471857ec0f58a4c602..04e919db546721f453a67112b84b15eeed660d01 100644
--- a/app/assets/javascripts/environments/graphql/queries/environment_cluster_agent.query.graphql
+++ b/app/assets/javascripts/environments/graphql/queries/environment_cluster_agent.query.graphql
@@ -3,6 +3,7 @@ query getEnvironmentClusterAgent($projectFullPath: ID!, $environmentName: String
     id
     environment(name: $environmentName) {
       id
+      deploymentsDisplayCount
       fluxResourcePath
       kubernetesNamespace
       clusterAgent {
diff --git a/app/presenters/environment_presenter.rb b/app/presenters/environment_presenter.rb
index 4888dd15f04687cb55a9415bb3fdd60ccee6df56..9b2a5993a347e04ba5bbdda4397a770adc3c596b 100644
--- a/app/presenters/environment_presenter.rb
+++ b/app/presenters/environment_presenter.rb
@@ -11,7 +11,7 @@ def path
   end
 
   def deployments_display_count
-    count = deployments.limit(MAX_DEPLOYMENTS_COUNT).count
+    count = all_deployments.limit(MAX_DEPLOYMENTS_COUNT).count
     count >= MAX_DEPLOYMENTS_COUNT ? MAX_DISPLAY_COUNT : count.to_s
   end
 end
diff --git a/spec/frontend/environments/environment_details/index_spec.js b/spec/frontend/environments/environment_details/index_spec.js
index 783dcac69e730e46fa7cd794b246a58e87444bb0..5e0a2a9a54342385d4feef767112d65ea9960754 100644
--- a/spec/frontend/environments/environment_details/index_spec.js
+++ b/spec/frontend/environments/environment_details/index_spec.js
@@ -1,4 +1,4 @@
-import { GlLoadingIcon, GlTabs, GlTab } from '@gitlab/ui';
+import { GlLoadingIcon, GlTabs, GlTab, GlBadge } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
@@ -33,6 +33,7 @@ describe('~/environments/environment_details/index.vue', () => {
             clusterAgent,
             kubernetesNamespace,
             fluxResourcePath: fluxResourcePathMock,
+            deploymentsDisplayCount: 3,
           },
         },
       },
@@ -59,6 +60,7 @@ describe('~/environments/environment_details/index.vue', () => {
   const findTabByIndex = (index) => findAllTabs().at(index);
   const findDeploymentHistory = () => wrapper.findComponent(DeploymentsHistory);
   const findKubernetesOverview = () => wrapper.findComponent(KubernetesOverview);
+  const findTabBadge = () => wrapper.findComponent(GlBadge);
 
   describe('loading state', () => {
     beforeEach(() => {
@@ -134,7 +136,11 @@ describe('~/environments/environment_details/index.vue', () => {
     });
 
     it('renders correct title', () => {
-      expect(findTabByIndex(1).attributes('title')).toBe('Deployment history');
+      expect(findTabByIndex(1).text()).toContain('Deployment history');
+    });
+
+    it('renders a badge with the correct number of deployments', () => {
+      expect(findTabBadge().text()).toBe('3');
     });
 
     it('renders correct query param value', () => {
diff --git a/spec/presenters/environment_presenter_spec.rb b/spec/presenters/environment_presenter_spec.rb
index 31a7e5f939dc613d0539d537fcc9fc182b09a2d5..b24cae4fb178ef62c43efe717b91506f10ff67de 100644
--- a/spec/presenters/environment_presenter_spec.rb
+++ b/spec/presenters/environment_presenter_spec.rb
@@ -12,7 +12,7 @@
 
     before do
       stub_const("#{described_class}::MAX_DEPLOYMENTS_COUNT", 5)
-      allow(environment).to receive_message_chain(:deployments,
+      allow(environment).to receive_message_chain(:all_deployments,
         :limit).with(described_class::MAX_DEPLOYMENTS_COUNT).and_return(deployments_list)
     end