diff --git a/app/assets/javascripts/pages/projects/shared/web_ide_link/index.js b/app/assets/javascripts/pages/projects/shared/web_ide_link/index.js
index 43ff617dabe2f57d712b284dd22748061a912ec6..ce36ff6a2305dc764b959f42e97f2a8dd6b59400 100644
--- a/app/assets/javascripts/pages/projects/shared/web_ide_link/index.js
+++ b/app/assets/javascripts/pages/projects/shared/web_ide_link/index.js
@@ -1,7 +1,15 @@
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { joinPaths, webIDEUrl } from '~/lib/utils/url_utility';
 import WebIdeButton from '~/vue_shared/components/web_ide_link.vue';
+import createDefaultClient from '~/lib/graphql';
+
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient(),
+});
 
 export default ({ el, router }) => {
   if (!el) return;
@@ -15,6 +23,10 @@ export default ({ el, router }) => {
   new Vue({
     el,
     router,
+    apolloProvider,
+    provide: {
+      projectPath,
+    },
     render(h) {
       return h(WebIdeButton, {
         props: {
diff --git a/app/assets/javascripts/vue_shared/components/confirm_fork_modal.vue b/app/assets/javascripts/vue_shared/components/confirm_fork_modal.vue
deleted file mode 100644
index 64e3b5d0baea7b6c14dffa2f72f11dd72a3e5eb2..0000000000000000000000000000000000000000
--- a/app/assets/javascripts/vue_shared/components/confirm_fork_modal.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script>
-import { GlModal } from '@gitlab/ui';
-import { __ } from '~/locale';
-
-export const i18n = {
-  btnText: __('Fork project'),
-  title: __('Fork project?'),
-  message: __(
-    'You can’t edit files directly in this project. Fork this project and submit a merge request with your changes.',
-  ),
-};
-
-export default {
-  name: 'ConfirmForkModal',
-  components: {
-    GlModal,
-  },
-  model: {
-    prop: 'visible',
-    event: 'change',
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    modalId: {
-      type: String,
-      required: true,
-    },
-    forkPath: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    btnActions() {
-      return {
-        cancel: { text: __('Cancel') },
-        primary: {
-          text: this.$options.i18n.btnText,
-          attributes: {
-            href: this.forkPath,
-            variant: 'confirm',
-            'data-qa-selector': 'fork_project_button',
-            'data-method': 'post',
-          },
-        },
-      };
-    },
-  },
-  i18n,
-};
-</script>
-<template>
-  <gl-modal
-    :visible="visible"
-    data-qa-selector="confirm_fork_modal"
-    :modal-id="modalId"
-    :title="$options.i18n.title"
-    :action-primary="btnActions.primary"
-    :action-cancel="btnActions.cancel"
-    @change="$emit('change', $event)"
-  >
-    <p>{{ $options.i18n.message }}</p>
-  </gl-modal>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/web_ide/confirm_fork_modal.vue b/app/assets/javascripts/vue_shared/components/web_ide/confirm_fork_modal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b4afb27c497a816872576edc5b8a95e9ae74a9fa
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/web_ide/confirm_fork_modal.vue
@@ -0,0 +1,114 @@
+<script>
+import { GlModal, GlLoadingIcon, GlLink } from '@gitlab/ui';
+import { __ } from '~/locale';
+import getWritableForksQuery from './get_writable_forks.query.graphql';
+
+export const i18n = {
+  btnText: __('Create a new fork'),
+  title: __('Fork project?'),
+  message: __('You can’t edit files directly in this project.'),
+  existingForksMessage: __(
+    'To submit your changes in a merge request, switch to one of these forks or create a new fork.',
+  ),
+  newForkMessage: __('To submit your changes in a merge request, create a new fork.'),
+};
+
+export default {
+  name: 'ConfirmForkModal',
+  components: {
+    GlModal,
+    GlLoadingIcon,
+    GlLink,
+  },
+  inject: {
+    projectPath: {
+      default: '',
+    },
+  },
+  model: {
+    prop: 'visible',
+    event: 'change',
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    modalId: {
+      type: String,
+      required: true,
+    },
+    forkPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      forks: [],
+    };
+  },
+  apollo: {
+    forks: {
+      query: getWritableForksQuery,
+      variables() {
+        return {
+          projectPath: this.projectPath,
+        };
+      },
+      update({ project } = {}) {
+        return project?.visibleForks?.nodes.map((node) => {
+          return {
+            text: node.fullPath,
+            href: node.webUrl,
+          };
+        });
+      },
+    },
+  },
+  computed: {
+    isLoading() {
+      return this.$apollo.queries.forks.loading;
+    },
+    hasWritableForks() {
+      return this.forks.length;
+    },
+    btnActions() {
+      return {
+        cancel: { text: __('Cancel') },
+        primary: {
+          text: this.$options.i18n.btnText,
+          attributes: {
+            href: this.forkPath,
+            variant: 'confirm',
+            'data-qa-selector': 'fork_project_button',
+          },
+        },
+      };
+    },
+  },
+  i18n,
+};
+</script>
+<template>
+  <gl-modal
+    :visible="visible"
+    data-qa-selector="confirm_fork_modal"
+    :modal-id="modalId"
+    :title="$options.i18n.title"
+    :action-primary="btnActions.primary"
+    :action-cancel="btnActions.cancel"
+    @change="$emit('change', $event)"
+  >
+    <p>{{ $options.i18n.message }}</p>
+    <gl-loading-icon v-if="isLoading" />
+    <template v-else-if="hasWritableForks">
+      <p>{{ $options.i18n.existingForksMessage }}</p>
+      <div v-for="fork in forks" :key="fork.text">
+        <gl-link :href="fork.href">{{ fork.text }}</gl-link>
+      </div>
+    </template>
+    <p v-else>{{ $options.i18n.newForkMessage }}</p>
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/web_ide/get_writable_forks.query.graphql b/app/assets/javascripts/vue_shared/components/web_ide/get_writable_forks.query.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..044b79e64f3657720bca212865584c5a778fead2
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/web_ide/get_writable_forks.query.graphql
@@ -0,0 +1,12 @@
+query getWritableForks($projectPath: ID!) {
+  project(fullPath: $projectPath) {
+    id
+    visibleForks(minimumAccessLevel: DEVELOPER) {
+      nodes {
+        id
+        fullPath
+        webUrl
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/vue_shared/components/web_ide_link.vue b/app/assets/javascripts/vue_shared/components/web_ide_link.vue
index 96944877f618248522e0e490c6b5c0f7c3ee3ae6..82f4edcbd5f80cbbdc876db5aec62f4c4bca5dae 100644
--- a/app/assets/javascripts/vue_shared/components/web_ide_link.vue
+++ b/app/assets/javascripts/vue_shared/components/web_ide_link.vue
@@ -3,7 +3,7 @@ import { GlModal, GlSprintf, GlLink } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 import { visitUrl } from '~/lib/utils/url_utility';
 import ActionsButton from '~/vue_shared/components/actions_button.vue';
-import ConfirmForkModal from '~/vue_shared/components/confirm_fork_modal.vue';
+import ConfirmForkModal from '~/vue_shared/components/web_ide/confirm_fork_modal.vue';
 import { KEY_EDIT, KEY_WEB_IDE, KEY_GITPOD, KEY_PIPELINE_EDITOR } from './constants';
 
 export const i18n = {
@@ -152,9 +152,7 @@ export default {
       return this.actions.length > 0;
     },
     editAction() {
-      if (!this.showEditButton) {
-        return null;
-      }
+      if (!this.showEditButton) return null;
 
       const handleOptions = this.needsToFork
         ? {
@@ -194,9 +192,7 @@ export default {
       return __('Web IDE');
     },
     webIdeAction() {
-      if (!this.showWebIdeButton) {
-        return null;
-      }
+      if (!this.showWebIdeButton) return null;
 
       const handleOptions = this.needsToFork
         ? {
@@ -298,6 +294,12 @@ export default {
         },
       };
     },
+    mountForkModal() {
+      const { disableForkModal, showWebIdeButton, showEditButton } = this;
+      if (disableForkModal) return false;
+
+      return showWebIdeButton || showEditButton;
+    },
   },
   methods: {
     showModal(dataKey) {
@@ -330,7 +332,7 @@ export default {
       </gl-sprintf>
     </gl-modal>
     <confirm-fork-modal
-      v-if="showWebIdeButton || showEditButton"
+      v-if="mountForkModal"
       v-model="showForkModal"
       :modal-id="forkModalId"
       :fork-path="forkPath"
diff --git a/app/helpers/tree_helper.rb b/app/helpers/tree_helper.rb
index 0aeea323ddb0372716a26c3f5555cf52989ce1f7..84512453b7cc71864a878bda1881b21036dc145c 100644
--- a/app/helpers/tree_helper.rb
+++ b/app/helpers/tree_helper.rb
@@ -157,17 +157,15 @@ def vue_file_list_data(project, ref)
     }
   end
 
-  def fork_modal_options(project, ref, path, blob)
+  def fork_modal_options(project, blob)
     if show_edit_button?({ blob: blob })
-      fork_path = fork_and_edit_path(project, ref, path)
       fork_modal_id = "modal-confirm-fork-edit"
     elsif show_web_ide_button?
-      fork_path = ide_fork_and_edit_path(project, ref, path)
       fork_modal_id = "modal-confirm-fork-webide"
     end
 
     {
-      fork_path: fork_path,
+      fork_path: new_namespace_project_fork_path(project_id: project.path, namespace_id: project.namespace.full_path),
       fork_modal_id: fork_modal_id
     }
   end
diff --git a/app/views/shared/_web_ide_button.html.haml b/app/views/shared/_web_ide_button.html.haml
index aeaccdfa54bbc4ce08ca52c1ba002504d42f747d..803f6f9efce249b014555ce3ede0fbab6ee35032 100644
--- a/app/views/shared/_web_ide_button.html.haml
+++ b/app/views/shared/_web_ide_button.html.haml
@@ -1,5 +1,5 @@
 - type = blob ? 'blob' : 'tree'
 - button_data = web_ide_button_data({ blob: blob })
-- fork_options = fork_modal_options(@project, @ref, @path, blob)
+- fork_options = fork_modal_options(@project, blob)
 
 .gl-display-inline-block{ data: { options: button_data.merge(fork_options).to_json, web_ide_promo_popover_img: image_path('web-ide-promo-popover.svg') }, id: "js-#{type}-web-ide-link" }
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 6937ca251bf612b42906b7c2952449245bb38cc3..323dba62f73bc884b9d544d29c8b6e39604d883b 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -12941,6 +12941,9 @@ msgstr ""
 msgid "Create a new file as there are no files yet. Afterwards, you'll be able to commit your changes."
 msgstr ""
 
+msgid "Create a new fork"
+msgstr ""
+
 msgid "Create a new issue"
 msgstr ""
 
@@ -47726,6 +47729,12 @@ msgstr ""
 msgid "To start using GitLab Enterprise Edition, upload the %{codeOpen}.gitlab-license%{codeClose} file or enter the license key you have received from GitLab Inc."
 msgstr ""
 
+msgid "To submit your changes in a merge request, create a new fork."
+msgstr ""
+
+msgid "To submit your changes in a merge request, switch to one of these forks or create a new fork."
+msgstr ""
+
 msgid "To unsubscribe from this issue, please paste the following link into your browser:"
 msgstr ""
 
@@ -52419,6 +52428,9 @@ msgstr ""
 msgid "You cannot write to this read-only GitLab instance."
 msgstr ""
 
+msgid "You can’t edit files directly in this project."
+msgstr ""
+
 msgid "You can’t edit files directly in this project. Fork this project and submit a merge request with your changes."
 msgstr ""
 
diff --git a/qa/qa/page/project/web_ide/edit.rb b/qa/qa/page/project/web_ide/edit.rb
index dda329ab582995d7240913c4ed37852958a2f367..b786105d4a842d26114d66b34ba3fa8365e8484c 100644
--- a/qa/qa/page/project/web_ide/edit.rb
+++ b/qa/qa/page/project/web_ide/edit.rb
@@ -68,7 +68,7 @@ class Edit < Page::Base
             element :delete_button
           end
 
-          view 'app/assets/javascripts/vue_shared/components/confirm_fork_modal.vue' do
+          view 'app/assets/javascripts/vue_shared/components/web_ide/confirm_fork_modal.vue' do
             element :fork_project_button
             element :confirm_fork_modal
           end
diff --git a/spec/frontend/fixtures/project.rb b/spec/frontend/fixtures/project.rb
new file mode 100644
index 0000000000000000000000000000000000000000..6100248d0a58d0678cf40e214cc7d8164677ab3a
--- /dev/null
+++ b/spec/frontend/fixtures/project.rb
@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Project (GraphQL fixtures)', feature_category: :groups_and_projects do
+  describe GraphQL::Query, type: :request do
+    include ApiHelpers
+    include GraphqlHelpers
+    include JavaScriptFixturesHelpers
+    include ProjectForksHelper
+
+    let_it_be(:project) { create(:project, :repository) }
+    let_it_be(:current_user) { create(:user) }
+
+    describe 'writable forks' do
+      writeable_forks_query_path = 'vue_shared/components/web_ide/get_writable_forks.query.graphql'
+
+      let(:query) { get_graphql_query_as_string(writeable_forks_query_path) }
+
+      subject { post_graphql(query, current_user: current_user, variables: { projectPath: project.full_path }) }
+
+      before do
+        project.add_developer(current_user)
+      end
+
+      context 'with none' do
+        it "graphql/#{writeable_forks_query_path}_none.json" do
+          subject
+
+          expect_graphql_errors_to_be_empty
+        end
+      end
+
+      context 'with some' do
+        let_it_be(:fork1) { fork_project(project, nil, repository: true) }
+        let_it_be(:fork2) { fork_project(project, nil, repository: true) }
+
+        before_all do
+          fork1.add_developer(current_user)
+          fork2.add_developer(current_user)
+        end
+
+        it "graphql/#{writeable_forks_query_path}_some.json" do
+          subject
+
+          expect_graphql_errors_to_be_empty
+        end
+      end
+    end
+  end
+end
diff --git a/spec/frontend/vue_shared/components/confirm_fork_modal_spec.js b/spec/frontend/vue_shared/components/confirm_fork_modal_spec.js
index fbfef5cbe4698826f92376f50945fda18e2bbde0..97c48a4db745357666ff647d3a1f57fc50005b54 100644
--- a/spec/frontend/vue_shared/components/confirm_fork_modal_spec.js
+++ b/spec/frontend/vue_shared/components/confirm_fork_modal_spec.js
@@ -1,8 +1,17 @@
-import { GlModal } from '@gitlab/ui';
+import { GlLoadingIcon, GlModal } from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import getNoWritableForksResponse from 'test_fixtures/graphql/vue_shared/components/web_ide/get_writable_forks.query.graphql_none.json';
+import getSomeWritableForksResponse from 'test_fixtures/graphql/vue_shared/components/web_ide/get_writable_forks.query.graphql_some.json';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import ConfirmForkModal, { i18n } from '~/vue_shared/components/confirm_fork_modal.vue';
+import ConfirmForkModal, { i18n } from '~/vue_shared/components/web_ide/confirm_fork_modal.vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import getWritableForksQuery from '~/vue_shared/components/web_ide/get_writable_forks.query.graphql';
+import waitForPromises from 'helpers/wait_for_promises';
 
 describe('vue_shared/components/confirm_fork_modal', () => {
+  Vue.use(VueApollo);
+
   let wrapper = null;
 
   const forkPath = '/fake/fork/path';
@@ -13,13 +22,18 @@ describe('vue_shared/components/confirm_fork_modal', () => {
   const findModalProp = (prop) => findModal().props(prop);
   const findModalActionProps = () => findModalProp('actionPrimary');
 
-  const createComponent = (props = {}) =>
-    shallowMountExtended(ConfirmForkModal, {
+  const createComponent = (props = {}, getWritableForksResponse = getNoWritableForksResponse) => {
+    const fakeApollo = createMockApollo([
+      [getWritableForksQuery, jest.fn().mockResolvedValue(getWritableForksResponse)],
+    ]);
+    return shallowMountExtended(ConfirmForkModal, {
       propsData: {
         ...defaultProps,
         ...props,
       },
+      apolloProvider: fakeApollo,
     });
+  };
 
   describe('visible = false', () => {
     beforeEach(() => {
@@ -73,4 +87,45 @@ describe('vue_shared/components/confirm_fork_modal', () => {
       expect(wrapper.emitted('change')).toEqual([[false]]);
     });
   });
+
+  describe('writable forks', () => {
+    describe('when loading', () => {
+      it('shows loading spinner', () => {
+        wrapper = createComponent();
+
+        expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
+      });
+    });
+
+    describe('with no writable forks', () => {
+      it('contains `newForkMessage`', async () => {
+        wrapper = createComponent();
+
+        await waitForPromises();
+
+        expect(wrapper.text()).toContain(i18n.newForkMessage);
+      });
+    });
+
+    describe('with writable forks', () => {
+      it('contains `existingForksMessage`', async () => {
+        wrapper = createComponent(null, getSomeWritableForksResponse);
+
+        await waitForPromises();
+
+        expect(wrapper.text()).toContain(i18n.existingForksMessage);
+      });
+
+      it('renders links to the forks', async () => {
+        wrapper = createComponent(null, getSomeWritableForksResponse);
+
+        await waitForPromises();
+
+        const forks = getSomeWritableForksResponse.data.project.visibleForks.nodes;
+
+        expect(wrapper.findByText(forks[0].fullPath).attributes('href')).toBe(forks[0].webUrl);
+        expect(wrapper.findByText(forks[1].fullPath).attributes('href')).toBe(forks[1].webUrl);
+      });
+    });
+  });
 });
diff --git a/spec/frontend/vue_shared/components/web_ide_link_spec.js b/spec/frontend/vue_shared/components/web_ide_link_spec.js
index 26557c63a77ecd2b28cd62ac3b408772ef93d478..e54de25dc0d91c7816f275d1a709fdcc788d1419 100644
--- a/spec/frontend/vue_shared/components/web_ide_link_spec.js
+++ b/spec/frontend/vue_shared/components/web_ide_link_spec.js
@@ -1,14 +1,18 @@
 import { GlModal } from '@gitlab/ui';
-import { nextTick } from 'vue';
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
 
+import getWritableForksResponse from 'test_fixtures/graphql/vue_shared/components/web_ide/get_writable_forks.query.graphql_none.json';
 import ActionsButton from '~/vue_shared/components/actions_button.vue';
 import WebIdeLink, { i18n } from '~/vue_shared/components/web_ide_link.vue';
-import ConfirmForkModal from '~/vue_shared/components/confirm_fork_modal.vue';
+import ConfirmForkModal from '~/vue_shared/components/web_ide/confirm_fork_modal.vue';
 
 import { stubComponent } from 'helpers/stub_component';
 import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
 
 import { visitUrl } from '~/lib/utils/url_utility';
+import getWritableForksQuery from '~/vue_shared/components/web_ide/get_writable_forks.query.graphql';
 
 jest.mock('~/lib/utils/url_utility');
 
@@ -77,9 +81,14 @@ const ACTION_PIPELINE_EDITOR = {
 };
 
 describe('vue_shared/components/web_ide_link', () => {
+  Vue.use(VueApollo);
+
   let wrapper;
 
   function createComponent(props, { mountFn = shallowMountExtended, glFeatures = {} } = {}) {
+    const fakeApollo = createMockApollo([
+      [getWritableForksQuery, jest.fn().mockResolvedValue(getWritableForksResponse)],
+    ]);
     wrapper = mountFn(WebIdeLink, {
       propsData: {
         editUrl: TEST_EDIT_URL,
@@ -102,6 +111,7 @@ describe('vue_shared/components/web_ide_link', () => {
             </div>`,
         }),
       },
+      apolloProvider: fakeApollo,
     });
   }
 
diff --git a/spec/helpers/tree_helper_spec.rb b/spec/helpers/tree_helper_spec.rb
index 01dacf5fcadcb8f3c76e1dae699d7b11c1747ccd..e13b83feefd1f16886b0ead8ec4e466b12e993f9 100644
--- a/spec/helpers/tree_helper_spec.rb
+++ b/spec/helpers/tree_helper_spec.rb
@@ -271,4 +271,42 @@
       end
     end
   end
+
+  describe '.fork_modal_options' do
+    let_it_be(:blob) { project.repository.blob_at('refs/heads/master', @path) }
+
+    before do
+      allow(helper).to receive(:current_user).and_return(user)
+    end
+
+    subject { helper.fork_modal_options(project, blob) }
+
+    it 'returns correct fork path' do
+      expect(subject).to match a_hash_including(fork_path: '/namespace1/project-1/-/forks/new', fork_modal_id: nil)
+    end
+
+    context 'when show_edit_button true' do
+      before do
+        allow(helper).to receive(:show_edit_button?).and_return(true)
+      end
+
+      it 'returns correct fork path and modal id' do
+        expect(subject).to match a_hash_including(
+          fork_path: '/namespace1/project-1/-/forks/new',
+          fork_modal_id: 'modal-confirm-fork-edit')
+      end
+    end
+
+    context 'when show_web_ide_button true' do
+      before do
+        allow(helper).to receive(:show_web_ide_button?).and_return(true)
+      end
+
+      it 'returns correct fork path and modal id' do
+        expect(subject).to match a_hash_including(
+          fork_path: '/namespace1/project-1/-/forks/new',
+          fork_modal_id: 'modal-confirm-fork-webide')
+      end
+    end
+  end
 end