diff --git a/app/assets/javascripts/environments/components/deployment.vue b/app/assets/javascripts/environments/components/deployment.vue
index ef6d3b7919870ea7f422d1f322bc266b3a09be23..d49a929097868f28ec4ba73b2f9eb61cdc1456bb 100644
--- a/app/assets/javascripts/environments/components/deployment.vue
+++ b/app/assets/javascripts/environments/components/deployment.vue
@@ -5,6 +5,7 @@ import {
   GlIcon,
   GlLink,
   GlLoadingIcon,
+  GlSprintf,
   GlTooltipDirective as GlTooltip,
   GlTruncate,
 } from '@gitlab/ui';
@@ -24,6 +25,7 @@ export default {
     GlBadge,
     GlIcon,
     GlLink,
+    GlSprintf,
     GlTruncate,
     GlLoadingIcon,
     TimeAgoTooltip,
@@ -61,6 +63,12 @@ export default {
     shortSha() {
       return this.commit?.shortId;
     },
+    timeStamp() {
+      return this.deployment?.deployedAt ? __('Deployed %{timeago}') : __('Created %{timeago}');
+    },
+    displayTimeAgo() {
+      return this.deployment?.deployedAt || this.deployment?.createdAt;
+    },
     createdAt() {
       return this.deployment?.createdAt;
     },
@@ -207,10 +215,19 @@ export default {
               size="small"
             />
           </div>
-          <time-ago-tooltip v-if="createdAt" :time="createdAt" class="gl-display-flex">
+          <time-ago-tooltip
+            v-if="displayTimeAgo"
+            :time="displayTimeAgo"
+            class="gl-display-flex"
+            data-testid="deployment-timestamp"
+          >
             <template #default="{ timeAgo }">
               <gl-icon name="calendar" class="gl-mr-2" />
-              <span class="gl-mr-2 gl-white-space-nowrap">{{ timeAgo }}</span>
+              <span class="gl-mr-2 gl-white-space-nowrap">
+                <gl-sprintf :message="timeStamp">
+                  <template #timeago>{{ timeAgo }}</template>
+                </gl-sprintf>
+              </span>
             </template>
           </time-ago-tooltip>
         </div>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 3c16ab02c1704a284920c07bea026d6991160002..6ccea64a38eaf72f612b5848200975c87e24db80 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -15152,6 +15152,9 @@ msgstr ""
 msgid "Created %{time_ago}"
 msgstr ""
 
+msgid "Created %{timeago}"
+msgstr ""
+
 msgid "Created %{timestamp}"
 msgstr ""
 
@@ -17415,6 +17418,9 @@ msgstr ""
 msgid "Deployed"
 msgstr ""
 
+msgid "Deployed %{timeago}"
+msgstr ""
+
 msgid "Deployed to"
 msgstr ""
 
diff --git a/spec/frontend/environments/deployment_spec.js b/spec/frontend/environments/deployment_spec.js
index bc0f1c58e7d76726fd141c001a0e4d7b0f63aacc..c28d5ac1021137611bdf766888bd0e077d5b2ebc 100644
--- a/spec/frontend/environments/deployment_spec.js
+++ b/spec/frontend/environments/deployment_spec.js
@@ -153,16 +153,22 @@ describe('~/environments/components/deployment.vue', () => {
       });
     });
   });
-
-  describe('created at time', () => {
+  describe('deployedAt', () => {
     describe('is present', () => {
       it('shows the timestamp the deployment was deployed at', () => {
         wrapper = createWrapper();
-        const date = wrapper.findByTitle(
-          localeDateFormat.asDateTimeFull.format(deployment.createdAt),
-        );
+        const date = wrapper.findByTestId('deployment-timestamp');
+        expect(date.text()).toBe('Deployed 1 day ago');
+      });
+    });
+  });
+  describe('created at time', () => {
+    describe('is present and deploymentAt is null', () => {
+      it('shows the timestamp the deployment was created at', () => {
+        wrapper = createWrapper({ propsData: { deployment: { ...deployment, deployedAt: null } } });
 
-        expect(date.text()).toBe('1 day ago');
+        const date = wrapper.findByTestId('deployment-timestamp');
+        expect(date.text()).toBe('Created 1 day ago');
       });
     });
     describe('is not present', () => {