diff --git a/app/assets/javascripts/environments/components/empty_state.vue b/app/assets/javascripts/environments/components/empty_state.vue
index 28d2dda9e437ac836b500ec18cc4fcb8de0445c6..2360a52645ba56181852faa5899f6bd7897e164f 100644
--- a/app/assets/javascripts/environments/components/empty_state.vue
+++ b/app/assets/javascripts/environments/components/empty_state.vue
@@ -18,27 +18,28 @@ export default {
 };
 </script>
 <template>
-  <div class="blank-state-row">
-    <div class="blank-state-center">
-      <h2 class="blank-state-title js-blank-state-title">
-        {{ s__("Environments|You don't have any environments right now.") }}
-      </h2>
+  <div class="empty-state">
+    <div class="text-content">
+      <h4 class="blank-state-title js-blank-state-title">
+        {{ s__("Environments|You don't have any environments right now") }}
+      </h4>
       <p class="blank-state-text">
         {{ s__(`Environments|Environments are places where
-code gets deployed, such as staging or production.`) }}
-        <br />
+        code gets deployed, such as staging or production.`) }}
         <a :href="helpPath">
           {{ s__("Environments|Read more about environments") }}
         </a>
       </p>
 
-      <a
-        v-if="canCreateEnvironment"
-        :href="newPath"
-        class="btn btn-success js-new-environment-button"
-      >
-        {{ s__("Environments|New environment") }}
-      </a>
+      <div class="text-center">
+        <a
+          v-if="canCreateEnvironment"
+          :href="newPath"
+          class="btn btn-success js-new-environment-button"
+        >
+          {{ s__("Environments|New environment") }}
+        </a>
+      </div>
     </div>
   </div>
 </template>
diff --git a/changelogs/unreleased/gt-update-environments-empty-state.yml b/changelogs/unreleased/gt-update-environments-empty-state.yml
new file mode 100644
index 0000000000000000000000000000000000000000..dcb477cdbe4ee0adc8776e927a95cd416b3a4d2a
--- /dev/null
+++ b/changelogs/unreleased/gt-update-environments-empty-state.yml
@@ -0,0 +1,5 @@
+---
+title: Update environments empty state
+merge_request: 22297
+author: George Tsiolis
+type: other
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index b8c4eddbec15f9d69b42be3ae32212e42c145a38..ce5c541fc95f2dbf19ae7a8f212a2c813fe14a33 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2597,7 +2597,7 @@ msgstr ""
 msgid "Environments|Updated"
 msgstr ""
 
-msgid "Environments|You don't have any environments right now."
+msgid "Environments|You don't have any environments right now"
 msgstr ""
 
 msgid "Epic"
diff --git a/spec/features/projects/environments/environments_spec.rb b/spec/features/projects/environments/environments_spec.rb
index f0890018286f659ef797492d1bdd1f544a0b6b8d..917ba495f01c0c51c45137c6780782329c7f0b38 100644
--- a/spec/features/projects/environments/environments_spec.rb
+++ b/spec/features/projects/environments/environments_spec.rb
@@ -95,7 +95,7 @@ describe 'Environments page', :js do
     end
 
     it 'does not show environments and counters are set to zero' do
-      expect(page).to have_content('You don\'t have any environments right now.')
+      expect(page).to have_content('You don\'t have any environments right now')
 
       expect(page.find('.js-environments-tab-available .badge').text).to eq('0')
       expect(page.find('.js-environments-tab-stopped .badge').text).to eq('0')
diff --git a/spec/javascripts/environments/emtpy_state_spec.js b/spec/javascripts/environments/emtpy_state_spec.js
index 10a19af417598868be8334f1578b6f251d69eb58..d71dfe8197ee30cd5d64d28285639eea04c83cb1 100644
--- a/spec/javascripts/environments/emtpy_state_spec.js
+++ b/spec/javascripts/environments/emtpy_state_spec.js
@@ -27,7 +27,7 @@ describe('environments empty state', () => {
     it('renders empty state and new environment button', () => {
       expect(
         vm.$el.querySelector('.js-blank-state-title').textContent.trim(),
-      ).toEqual('You don\'t have any environments right now.');
+      ).toEqual('You don\'t have any environments right now');
 
       expect(
         vm.$el.querySelector('.js-new-environment-button').getAttribute('href'),
@@ -47,7 +47,7 @@ describe('environments empty state', () => {
     it('renders empty state without new button', () => {
       expect(
         vm.$el.querySelector('.js-blank-state-title').textContent.trim(),
-      ).toEqual('You don\'t have any environments right now.');
+      ).toEqual('You don\'t have any environments right now');
 
       expect(
         vm.$el.querySelector('.js-new-environment-button'),
diff --git a/spec/javascripts/environments/environments_app_spec.js b/spec/javascripts/environments/environments_app_spec.js
index 1be983f35922ba57428eca11ff812a75370eb38e..7edc0ccac0bea3753cde1a8f7a9ac5b6e249ea48 100644
--- a/spec/javascripts/environments/environments_app_spec.js
+++ b/spec/javascripts/environments/environments_app_spec.js
@@ -50,7 +50,7 @@ describe('Environment', () => {
 
         expect(
           component.$el.querySelector('.js-blank-state-title').textContent,
-        ).toContain('You don\'t have any environments right now.');
+        ).toContain('You don\'t have any environments right now');
       });
     });
 
@@ -127,7 +127,7 @@ describe('Environment', () => {
     it('should render empty state', () => {
       expect(
         component.$el.querySelector('.js-blank-state-title').textContent,
-      ).toContain('You don\'t have any environments right now.');
+      ).toContain('You don\'t have any environments right now');
     });
   });