diff --git a/app/assets/javascripts/environments/components/environment_folder.vue b/app/assets/javascripts/environments/components/environment_folder.vue
index d5c6d26cfd031857c1cc2323d3628409fca85212..123a0790bd375c6fefa72630b9d919d98901da6f 100644
--- a/app/assets/javascripts/environments/components/environment_folder.vue
+++ b/app/assets/javascripts/environments/components/environment_folder.vue
@@ -24,6 +24,10 @@ export default {
       type: String,
       required: true,
     },
+    search: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return { visible: false, interval: undefined };
@@ -32,7 +36,11 @@ export default {
     folder: {
       query: folderQuery,
       variables() {
-        return { environment: this.nestedEnvironment.latest, scope: this.scope };
+        return {
+          environment: this.nestedEnvironment.latest,
+          scope: this.scope,
+          search: this.search,
+        };
       },
       pollInterval() {
         return this.interval;
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index f44182e822bb9cd64ee0752e293626b228254386..440b3125129f2fef4bc6ee00c2bafe4afd474d20 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlBadge, GlPagination, GlTab, GlTabs } from '@gitlab/ui';
+import { GlBadge, GlPagination, GlSearchBoxByType, GlTab, GlTabs } from '@gitlab/ui';
 import { s__, __, sprintf } from '~/locale';
 import { updateHistory, setUrlParams, queryToObject } from '~/lib/utils/url_utility';
 import environmentAppQuery from '../graphql/queries/environment_app.query.graphql';
@@ -31,6 +31,7 @@ export default {
     StopEnvironmentModal,
     GlBadge,
     GlPagination,
+    GlSearchBoxByType,
     GlTab,
     GlTabs,
   },
@@ -41,6 +42,7 @@ export default {
         return {
           scope: this.scope,
           page: this.page ?? 1,
+          search: this.search,
         };
       },
       pollInterval() {
@@ -97,6 +99,7 @@ export default {
       environmentToStop: {},
       environmentToChangeCanary: {},
       weight: 0,
+      search: '',
     };
   },
   computed: {
@@ -197,6 +200,7 @@ export default {
 </script>
 <template>
   <div>
+    <gl-search-box-by-type class="gl-mt-4" v-model="search" />
     <enable-review-app-modal
       v-if="canSetupReviewApp"
       v-model="isReviewAppModalVisible"
@@ -243,6 +247,7 @@ export default {
         :key="folder.name"
         class="gl-mb-3"
         :scope="scope"
+        :search="search"
         :nested-environment="folder"
       />
       <environment-item
diff --git a/app/assets/javascripts/environments/graphql/queries/environment_app.query.graphql b/app/assets/javascripts/environments/graphql/queries/environment_app.query.graphql
index 2c17c42dd6d498549b1db9ba0f34a275d876248c..d6be8b4878ba1210d0015860aa0d2cc0e57869db 100644
--- a/app/assets/javascripts/environments/graphql/queries/environment_app.query.graphql
+++ b/app/assets/javascripts/environments/graphql/queries/environment_app.query.graphql
@@ -1,5 +1,5 @@
-query getEnvironmentApp($page: Int, $scope: String) {
-  environmentApp(page: $page, scope: $scope) @client {
+query getEnvironmentApp($page: Int, $scope: String, $search: String) {
+  environmentApp(page: $page, scope: $scope, search: $search) @client {
     availableCount
     stoppedCount
     environments
diff --git a/app/assets/javascripts/environments/graphql/queries/folder.query.graphql b/app/assets/javascripts/environments/graphql/queries/folder.query.graphql
index e8c145ee916306308a8b8ec7caaa9ace48c31121..c662acb8f9349efe22366e1c142f8043dd5a8eae 100644
--- a/app/assets/javascripts/environments/graphql/queries/folder.query.graphql
+++ b/app/assets/javascripts/environments/graphql/queries/folder.query.graphql
@@ -1,5 +1,5 @@
-query getEnvironmentFolder($environment: NestedLocalEnvironment, $scope: String) {
-  folder(environment: $environment, scope: $scope) @client {
+query getEnvironmentFolder($environment: NestedLocalEnvironment, $scope: String, $search: String) {
+  folder(environment: $environment, scope: $scope, search: $search) @client {
     availableCount
     environments
     stoppedCount
diff --git a/app/assets/javascripts/environments/graphql/resolvers.js b/app/assets/javascripts/environments/graphql/resolvers.js
index 722bb78bcf9256c43945fbb94b4f0df55c688e1f..afd56d0cf0d8b7c62a2f986130d7a037df375366 100644
--- a/app/assets/javascripts/environments/graphql/resolvers.js
+++ b/app/assets/javascripts/environments/graphql/resolvers.js
@@ -30,8 +30,8 @@ const mapEnvironment = (env) => ({
 
 export const resolvers = (endpoint) => ({
   Query: {
-    environmentApp(_context, { page, scope }, { cache }) {
-      return axios.get(endpoint, { params: { nested: true, page, scope } }).then((res) => {
+    environmentApp(_context, { page, scope, search }, { cache }) {
+      return axios.get(endpoint, { params: { nested: true, page, scope, search } }).then((res) => {
         const headers = normalizeHeaders(res.headers);
         const interval = headers['POLL-INTERVAL'];
         const pageInfo = { ...parseIntPagination(headers), __typename: 'LocalPageInfo' };
@@ -59,8 +59,8 @@ export const resolvers = (endpoint) => ({
         };
       });
     },
-    folder(_, { environment: { folderPath }, scope }) {
-      return axios.get(folderPath, { params: { scope, per_page: 3 } }).then((res) => ({
+    folder(_, { environment: { folderPath }, scope, search }) {
+      return axios.get(folderPath, { params: { scope, search, per_page: 3 } }).then((res) => ({
         availableCount: res.data.available_count,
         environments: res.data.environments.map(mapEnvironment),
         stoppedCount: res.data.stopped_count,
diff --git a/app/assets/javascripts/environments/services/environments_service.js b/app/assets/javascripts/environments/services/environments_service.js
index dbd82a3c9853df8daf04928051a42dd4d2785ae5..03689b4591edc8d40d3344551f766423c2f11335 100644
--- a/app/assets/javascripts/environments/services/environments_service.js
+++ b/app/assets/javascripts/environments/services/environments_service.js
@@ -8,7 +8,7 @@ export default class EnvironmentsService {
 
   fetchEnvironments(options = {}) {
     const { scope, page, nested } = options;
-    return axios.get(this.environmentsEndpoint, { params: { scope, page, nested } });
+    return axios.get(this.environmentsEndpoint, { params: { scope, page, nested, search: "review/my-b" } });
   }
 
   // eslint-disable-next-line class-methods-use-this
@@ -22,6 +22,6 @@ export default class EnvironmentsService {
   }
 
   getFolderContent(folderUrl, scope) {
-    return axios.get(`${folderUrl}.json?per_page=${this.folderResults}&scope=${scope}`);
+    return axios.get(`${folderUrl}.json?per_page=${this.folderResults}&scope=${scope}&search=review/my-b`);
   }
 }
diff --git a/app/controllers/projects/environments_controller.rb b/app/controllers/projects/environments_controller.rb
index a100afd3488feea71879368c5ed932f3f5742b74..0a3d0d41c848f8b948958e81970209e3d7f3ee05 100644
--- a/app/controllers/projects/environments_controller.rb
+++ b/app/controllers/projects/environments_controller.rb
@@ -35,8 +35,12 @@ def index
     respond_to do |format|
       format.html
       format.json do
-        @environments = project.environments
-          .with_state(params[:scope] || :available)
+        # @environments = project.environments
+        #   .with_state(params[:scope] || :available)
+
+        state = params[:scope] || :available
+        @environments = Environments::EnvironmentsFinder.new(project, current_user,
+          states: [state], search: params[:search]).execute
 
         Gitlab::PollingInterval.set_header(response, interval: 3_000)
         environments_count_by_state = project.environments.count_by_state
@@ -59,9 +63,15 @@ def folder
     respond_to do |format|
       format.html
       format.json do
-        folder_environments = project.environments.where(environment_type: params[:id])
-        @environments = folder_environments.with_state(params[:scope] || :available)
-          .order(:name)
+        # folder_environments = project.environments.where(environment_type: params[:id])
+        # @environments = folder_environments.with_state(params[:scope] || :available)
+        #   .order(:name)
+
+        state = params[:scope] || :available
+        folder_environments = Environments::EnvironmentsFinder.new(project, current_user,
+          type: params[:id], states: [state], search: params[:search]).execute
+
+        @environments = folder_environments.order(:name)
 
         render json: {
           environments: serialize_environments(request, response),
diff --git a/app/finders/environments/environments_finder.rb b/app/finders/environments/environments_finder.rb
index 46c49f096c6d1bc534b090e11a523de723a2162c..6b9f827881880e2b07b796f02f6253ef14310f0a 100644
--- a/app/finders/environments/environments_finder.rb
+++ b/app/finders/environments/environments_finder.rb
@@ -14,6 +14,7 @@ def initialize(project, current_user, params = {})
 
     def execute
       environments = project.environments
+      environments = by_type(environments)
       environments = by_name(environments)
       environments = by_search(environments)
       environments = by_ids(environments)
@@ -24,6 +25,12 @@ def execute
 
     private
 
+    def by_type(environments)
+      return environments unless params[:type].present?
+
+      environments.where(environment_type: params[:type])
+    end
+
     def by_name(environments)
       if params[:name].present?
         environments.for_name(params[:name])