diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index 6ed5bfa7a6..5d0e543e17 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/services/web/frontend/extracted-translations.json
@@ -14,6 +14,7 @@
   "about_to_delete_the_following_projects": "",
   "about_to_delete_user_preamble": "",
   "about_to_enable_managed_users": "",
+  "about_to_leave_project": "",
   "about_to_leave_projects": "",
   "about_to_trash_projects": "",
   "accept": "",
@@ -707,6 +708,7 @@
   "leave_any_group_subscriptions": "",
   "leave_group": "",
   "leave_now": "",
+  "leave_project": "",
   "leave_projects": "",
   "left": "",
   "length_unit": "",
diff --git a/services/web/frontend/js/features/token-access/components/leave-project-modal.tsx b/services/web/frontend/js/features/token-access/components/leave-project-modal.tsx
new file mode 100644
index 0000000000..b4c716f928
--- /dev/null
+++ b/services/web/frontend/js/features/token-access/components/leave-project-modal.tsx
@@ -0,0 +1,53 @@
+import OLButton from '@/features/ui/components/ol/ol-button'
+import OLModal, {
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+} from '@/features/ui/components/ol/ol-modal'
+import Notification from '@/shared/components/notification'
+import { Modal } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+
+type LeaveProjectModalProps = {
+  showModal: boolean
+  handleCloseModal: () => void
+  handleLeaveAction: () => void
+}
+function LeaveProjectModal({
+  showModal,
+  handleCloseModal,
+  handleLeaveAction,
+}: LeaveProjectModalProps) {
+  const { t } = useTranslation()
+
+  return (
+    <OLModal
+      animation
+      show={showModal}
+      onHide={handleCloseModal}
+      id="action-project-modal"
+      backdrop="static"
+    >
+      <OLModalHeader closeButton>
+        <Modal.Title>{t('leave_project')}</Modal.Title>
+      </OLModalHeader>
+      <OLModalBody>
+        <p>{t('about_to_leave_project')}</p>
+        <Notification
+          content={t('this_action_cannot_be_undone')}
+          type="warning"
+        />
+      </OLModalBody>
+      <OLModalFooter>
+        <OLButton variant="secondary" onClick={handleCloseModal}>
+          {t('cancel')}
+        </OLButton>
+        <OLButton variant="danger" onClick={() => handleLeaveAction()}>
+          {t('confirm')}
+        </OLButton>
+      </OLModalFooter>
+    </OLModal>
+  )
+}
+
+export default LeaveProjectModal
diff --git a/services/web/frontend/js/features/token-access/components/sharing-updates-root.tsx b/services/web/frontend/js/features/token-access/components/sharing-updates-root.tsx
index df9a6e5430..2d30c34510 100644
--- a/services/web/frontend/js/features/token-access/components/sharing-updates-root.tsx
+++ b/services/web/frontend/js/features/token-access/components/sharing-updates-root.tsx
@@ -2,7 +2,7 @@ import useWaitForI18n from '@/shared/hooks/use-wait-for-i18n'
 import { Trans, useTranslation } from 'react-i18next'
 import withErrorBoundary from '@/infrastructure/error-boundary'
 import { GenericErrorBoundaryFallback } from '@/shared/components/generic-error-boundary-fallback'
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import getMeta from '@/utils/meta'
 import { postJSON } from '@/infrastructure/fetch-json'
 import { debugConsole } from '@/utils/debugging'
@@ -10,7 +10,10 @@ import useAsync from '@/shared/hooks/use-async'
 import Notification from '@/shared/components/notification'
 import { sendMB } from '@/infrastructure/event-tracking'
 
+import LeaveProjectModal from './leave-project-modal'
+
 function SharingUpdatesRoot() {
+  const [showModal, setShowModal] = useState(false)
   const { isReady } = useWaitForI18n()
   const { t } = useTranslation()
   const { isLoading, isSuccess, isError, runAsync } = useAsync()
@@ -58,6 +61,11 @@ function SharingUpdatesRoot() {
 
   return (
     <div className="container">
+      <LeaveProjectModal
+        handleLeaveAction={leaveProject}
+        showModal={showModal}
+        handleCloseModal={() => setShowModal(false)}
+      />
       <div className="row">
         <div className="col-md-6 col-md-offset-3">
           <div className="card sharing-updates">
@@ -132,7 +140,7 @@ function SharingUpdatesRoot() {
                         // eslint-disable-next-line react/jsx-key
                         <button
                           className="btn btn-inline-link"
-                          onClick={() => leaveProject()}
+                          onClick={() => setShowModal(true)}
                           disabled={isLoading || isSuccess}
                         />,
                       ]}
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index faac208994..b83c626d15 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -25,6 +25,7 @@
   "about_to_delete_the_following_projects": "You are about to delete the following projects",
   "about_to_delete_user_preamble": "You’re about to delete __userName__ (__userEmail__). Doing this will mean:",
   "about_to_enable_managed_users": "By enabling the Managed Users feature, all existing members of your group subscription will be invited to become managed. This will give you admin rights over their account. You will also have the option to invite new members to join the subscription and become managed.",
+  "about_to_leave_project": "You are about to leave this project.",
   "about_to_leave_projects": "You are about to leave the following projects:",
   "about_to_trash_projects": "You are about to trash the following projects:",
   "abstract": "Abstract",
@@ -1045,6 +1046,7 @@
   "leave_group": "Leave group",
   "leave_labs": "Leave Overleaf Labs",
   "leave_now": "Leave now",
+  "leave_project": "Leave Project",
   "leave_projects": "Leave Projects",
   "left": "Left",
   "length_unit": "Length unit",
diff --git a/services/web/test/frontend/features/token-access/components/leave-project-modal.test.tsx b/services/web/test/frontend/features/token-access/components/leave-project-modal.test.tsx
new file mode 100644
index 0000000000..06a1bdeead
--- /dev/null
+++ b/services/web/test/frontend/features/token-access/components/leave-project-modal.test.tsx
@@ -0,0 +1,59 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import LeaveProjectModal from '@/features/token-access/components/leave-project-modal'
+
+describe('<LeaveProjectModal/>', function () {
+  const closeHandler = sinon.stub()
+  const leaveHandler = sinon.stub()
+  it('does not render when no show prop is passed', function () {
+    render(
+      <LeaveProjectModal
+        handleCloseModal={closeHandler}
+        handleLeaveAction={leaveHandler}
+        showModal={false}
+      />
+    )
+    const leaveText = screen.queryByText('Leave Project')
+    expect(leaveText).to.be.null
+  })
+
+  it('renders when the show prop is passed', function () {
+    render(
+      <LeaveProjectModal
+        handleCloseModal={closeHandler}
+        handleLeaveAction={leaveHandler}
+        showModal
+      />
+    )
+    const leaveText = screen.queryByText('Leave Project')
+    expect(leaveText).to.exist
+  })
+
+  it('calls the close handler when dismissed', async function () {
+    const user = userEvent.setup()
+    render(
+      <LeaveProjectModal
+        handleCloseModal={closeHandler}
+        handleLeaveAction={leaveHandler}
+        showModal
+      />
+    )
+    await user.click(screen.getByRole('button', { name: /Cancel/i }))
+    expect(closeHandler).to.have.been.calledOnce
+  })
+
+  it('calls the leave handler when confirmed', async function () {
+    const user = userEvent.setup()
+    render(
+      <LeaveProjectModal
+        handleCloseModal={closeHandler}
+        handleLeaveAction={leaveHandler}
+        showModal
+      />
+    )
+    await user.click(screen.getByRole('button', { name: /Confirm/i }))
+    expect(leaveHandler).to.have.been.calledOnce
+  })
+})