diff --git a/app/assets/javascripts/merge_requests/list/components/merge_requests_list_app.vue b/app/assets/javascripts/merge_requests/list/components/merge_requests_list_app.vue
index 0221c9be83ae39340a0207b7c9284930a4b922e6..7446a776681fa55d284d4c2fae7de4553af440dc 100644
--- a/app/assets/javascripts/merge_requests/list/components/merge_requests_list_app.vue
+++ b/app/assets/javascripts/merge_requests/list/components/merge_requests_list_app.vue
@@ -25,6 +25,8 @@ import {
   TOKEN_TYPE_SOURCE_BRANCH,
   TOKEN_TITLE_ASSIGNEE,
   TOKEN_TYPE_MR_ASSIGNEE,
+  TOKEN_TITLE_MILESTONE,
+  TOKEN_TYPE_MILESTONE,
 } from '~/vue_shared/components/filtered_search_bar/constants';
 import {
   convertToApiParams,
@@ -55,6 +57,8 @@ import MergeRequestMoreActionsDropdown from './more_actions_dropdown.vue';
 const UserToken = () => import('~/vue_shared/components/filtered_search_bar/tokens/user_token.vue');
 const BranchToken = () =>
   import('~/vue_shared/components/filtered_search_bar/tokens/branch_token.vue');
+const MilestoneToken = () =>
+  import('~/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue');
 
 export default {
   i18n,
@@ -216,6 +220,19 @@ export default {
           ],
           unique: true,
         },
+        {
+          type: TOKEN_TYPE_MILESTONE,
+          title: TOKEN_TITLE_MILESTONE,
+          icon: 'milestone',
+          token: MilestoneToken,
+          operators: OPERATORS_IS,
+          recentSuggestionsStorageKey: `${this.fullPath}-merge-requests-recent-tokens-milestone`,
+          shouldSkipSort: true,
+          fullPath: this.fullPath,
+          isProject: true,
+          multiselect: false,
+          unique: true,
+        },
         {
           type: TOKEN_TYPE_TARGET_BRANCH,
           title: TOKEN_TITLE_TARGET_BRANCH,
diff --git a/app/assets/javascripts/merge_requests/list/queries/get_merge_requests.query.graphql b/app/assets/javascripts/merge_requests/list/queries/get_merge_requests.query.graphql
index bd472856ad157ee54d2a9acf103a4b5126028e3b..58cf77baf18b28f413994e950eff4a856853ce51 100644
--- a/app/assets/javascripts/merge_requests/list/queries/get_merge_requests.query.graphql
+++ b/app/assets/javascripts/merge_requests/list/queries/get_merge_requests.query.graphql
@@ -10,6 +10,7 @@ query getMergeRequests(
   $assigneeUsername: String
   $authorUsername: String
   $draft: Boolean
+  $milestoneTitle: String
   $sourceBranches: [String!]
   $targetBranches: [String!]
   $beforeCursor: String
@@ -25,6 +26,7 @@ query getMergeRequests(
       assigneeUsername: $assigneeUsername
       authorUsername: $authorUsername
       draft: $draft
+      milestoneTitle: $milestoneTitle
       sourceBranches: $sourceBranches
       targetBranches: $targetBranches
       before: $beforeCursor
diff --git a/spec/frontend/merge_requests/list/components/merge_requests_list_app_spec.js b/spec/frontend/merge_requests/list/components/merge_requests_list_app_spec.js
index 7fa8c062671de8abb17522fccfe080a484928b4b..3443226aae087a470f66ac8b4ad6fbffc422bf43 100644
--- a/spec/frontend/merge_requests/list/components/merge_requests_list_app_spec.js
+++ b/spec/frontend/merge_requests/list/components/merge_requests_list_app_spec.js
@@ -10,6 +10,7 @@ import { convertToGraphQLId } from '~/graphql_shared/utils';
 import {
   TOKEN_TYPE_AUTHOR,
   TOKEN_TYPE_DRAFT,
+  TOKEN_TYPE_MILESTONE,
   TOKEN_TYPE_SOURCE_BRANCH,
   TOKEN_TYPE_TARGET_BRANCH,
   TOKEN_TYPE_MR_ASSIGNEE,
@@ -111,6 +112,7 @@ describe('Merge requests list app', () => {
           { type: TOKEN_TYPE_MR_ASSIGNEE },
           { type: TOKEN_TYPE_AUTHOR, preloadedUsers: [] },
           { type: TOKEN_TYPE_DRAFT },
+          { type: TOKEN_TYPE_MILESTONE },
           { type: TOKEN_TYPE_TARGET_BRANCH },
           { type: TOKEN_TYPE_SOURCE_BRANCH },
         ]);
@@ -121,15 +123,13 @@ describe('Merge requests list app', () => {
       const urlParams = {
         mr_assignee_username: 'bob',
         draft: 'yes',
+        milestone_title: 'milestone',
         'target_branches[]': 'branch-a',
         'source_branches[]': 'branch-b',
       };
-      const paramString = Object.entries(urlParams)
-        .map(([k, v]) => `${k}=${v}`)
-        .join('&');
 
       beforeEach(async () => {
-        setWindowLocation(`?${paramString}`);
+        setWindowLocation(`?${new URLSearchParams(urlParams).toString()}`);
         window.gon = {
           current_user_id: mockCurrentUser.id,
           current_user_fullname: mockCurrentUser.name,
@@ -156,6 +156,7 @@ describe('Merge requests list app', () => {
           { type: TOKEN_TYPE_MR_ASSIGNEE },
           { type: TOKEN_TYPE_AUTHOR, preloadedUsers },
           { type: TOKEN_TYPE_DRAFT },
+          { type: TOKEN_TYPE_MILESTONE },
           { type: TOKEN_TYPE_TARGET_BRANCH },
           { type: TOKEN_TYPE_SOURCE_BRANCH },
         ]);
@@ -165,6 +166,7 @@ describe('Merge requests list app', () => {
         expect(findIssuableList().props('initialFilterValue')).toMatchObject([
           { type: TOKEN_TYPE_MR_ASSIGNEE },
           { type: TOKEN_TYPE_DRAFT },
+          { type: TOKEN_TYPE_MILESTONE },
           { type: TOKEN_TYPE_TARGET_BRANCH },
           { type: TOKEN_TYPE_SOURCE_BRANCH },
         ]);