diff --git a/README.rst b/README.rst
index 6357e55302..33e1fd9762 100644
--- a/README.rst
+++ b/README.rst
@@ -100,6 +100,12 @@ The Learning MFE is similar to all the other Open edX MFEs. Read the Open
 edX Developer Guide's section on
 `MFE applications <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html>`_.
 
+Plugins
+=======
+This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
+
 Environment Variables
 ======================
 
diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index 949a77f668..f2e7fc84fd 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -13,7 +13,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { useSelector } from 'react-redux';
 import SequenceExamWrapper from '@edx/frontend-lib-special-exams';
 import { breakpoints, useWindowSize } from '@openedx/paragon';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import SequenceContainerSlot from '../../../plugin-slots/SequenceContainerSlot';
 
 import PageLoading from '../../../generic/PageLoading';
 import { useModel } from '../../../generic/model-store';
@@ -200,13 +200,7 @@ const Sequence = ({
         </div>
         {isNewDiscussionSidebarViewEnabled ? <NewSidebar /> : <Sidebar />}
       </div>
-      <PluginSlot
-        id="sequence_container_plugin"
-        pluginProps={{
-          courseId,
-          unitId,
-        }}
-      />
+      <SequenceContainerSlot courseId={courseId} unitId={unitId} />
     </>
   );
 
diff --git a/src/courseware/course/sequence/Unit/__snapshots__/index.test.jsx.snap b/src/courseware/course/sequence/Unit/__snapshots__/index.test.jsx.snap
index 2419acb694..2249c87122 100644
--- a/src/courseware/course/sequence/Unit/__snapshots__/index.test.jsx.snap
+++ b/src/courseware/course/sequence/Unit/__snapshots__/index.test.jsx.snap
@@ -28,14 +28,9 @@ exports[`Unit component output snapshot: not bookmarked, do not show content 1`]
     >
       unit-title
     </h3>
-    <PluginSlot
-      id="unit_title_plugin"
-      pluginProps={
-        Object {
-          "courseId": "test-course-id",
-          "unitId": "test-props-id",
-        }
-      }
+    <UnitTitleSlot
+      courseId="test-course-id"
+      unitId="test-props-id"
     />
   </div>
   <h2
diff --git a/src/courseware/course/sequence/Unit/index.jsx b/src/courseware/course/sequence/Unit/index.jsx
index 99b114850d..e9769917bc 100644
--- a/src/courseware/course/sequence/Unit/index.jsx
+++ b/src/courseware/course/sequence/Unit/index.jsx
@@ -7,7 +7,6 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { useModel } from '@src/generic/model-store';
 import { usePluginsCallback } from '@src/generic/plugin-store';
 
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import BookmarkButton from '../../bookmark/BookmarkButton';
 import messages from '../messages';
 import ContentIFrame from './ContentIFrame';
@@ -15,6 +14,7 @@ import UnitSuspense from './UnitSuspense';
 import { modelKeys, views } from './constants';
 import { useExamAccess, useShouldDisplayHonorCode } from './hooks';
 import { getIFrameUrl } from './urls';
+import UnitTitleSlot from '../../../../plugin-slots/UnitTitleSlot';
 
 const Unit = ({
   courseId,
@@ -43,13 +43,7 @@ const Unit = ({
     <div className="unit">
       <div className="mb-0">
         <h3 className="h3">{unit.title}</h3>
-        <PluginSlot
-          id="unit_title_plugin"
-          pluginProps={{
-            courseId,
-            unitId: id,
-          }}
-        />
+        <UnitTitleSlot courseId={courseId} unitId={id} />
       </div>
       <h2 className="sr-only">{formatMessage(messages.headerPlaceholder)}</h2>
       <BookmarkButton
diff --git a/src/generic/CourseAccessErrorPage.jsx b/src/generic/CourseAccessErrorPage.jsx
index 8eff1f7aec..0fd6491e82 100644
--- a/src/generic/CourseAccessErrorPage.jsx
+++ b/src/generic/CourseAccessErrorPage.jsx
@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
 import { LearningHeader as Header } from '@edx/frontend-component-header';
-import Footer from '@edx/frontend-component-footer';
 import { useParams, Navigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import FooterSlot from '../plugin-slots/FooterSlot';
 import useActiveEnterpriseAlert from '../alerts/active-enteprise-alert';
 import { AlertList } from './user-messages';
 import { fetchDiscussionTab } from '../course-home/data/thunks';
@@ -32,7 +32,7 @@ const CourseAccessErrorPage = ({ intl }) => {
         <PageLoading
           srMessage={intl.formatMessage(messages.loading)}
         />
-        <Footer />
+        <FooterSlot />
       </>
     );
   }
@@ -51,7 +51,7 @@ const CourseAccessErrorPage = ({ intl }) => {
           }}
         />
       </main>
-      <Footer />
+      <FooterSlot />
     </>
   );
 };
diff --git a/src/plugin-slots/FooterSlot/README.md b/src/plugin-slots/FooterSlot/README.md
new file mode 100644
index 0000000000..b5cf099f54
--- /dev/null
+++ b/src/plugin-slots/FooterSlot/README.md
@@ -0,0 +1,44 @@
+# Footer Slot
+
+### Slot ID: `footer_slot`
+
+## Example
+
+The following `env.config.jsx` will replace the default footer
+
+![Screenshot of Default Footer](./images/default_footer.png)
+
+with a simple custom footer
+
+![Screenshot of Custom Footer](./images/custom_footer.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    footer_slot: {
+      plugins: [
+        {
+          // Hide the default footer
+          op: PLUGIN_OPERATIONS.Hide,
+          widgetId: 'default_contents',
+        },
+        {
+          // Insert a custom footer
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_footer',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🦶</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
diff --git a/src/plugin-slots/FooterSlot/images/custom_footer.png b/src/plugin-slots/FooterSlot/images/custom_footer.png
new file mode 100644
index 0000000000..9db1093b48
Binary files /dev/null and b/src/plugin-slots/FooterSlot/images/custom_footer.png differ
diff --git a/src/plugin-slots/FooterSlot/images/default_footer.png b/src/plugin-slots/FooterSlot/images/default_footer.png
new file mode 100644
index 0000000000..e6ee956c10
Binary files /dev/null and b/src/plugin-slots/FooterSlot/images/default_footer.png differ
diff --git a/src/plugin-slots/FooterSlot/index.jsx b/src/plugin-slots/FooterSlot/index.jsx
new file mode 100644
index 0000000000..b0d7f9a773
--- /dev/null
+++ b/src/plugin-slots/FooterSlot/index.jsx
@@ -0,0 +1,10 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import Footer from '@edx/frontend-component-footer';
+
+const FooterSlot = () => (
+  <PluginSlot id="footer_slot">
+    <Footer />
+  </PluginSlot>
+);
+
+export default FooterSlot;
diff --git a/src/plugin-slots/README.md b/src/plugin-slots/README.md
new file mode 100644
index 0000000000..f7c775d200
--- /dev/null
+++ b/src/plugin-slots/README.md
@@ -0,0 +1,5 @@
+# `frontend-app-learning` Plugin Slots
+
+* [`footer_slot`](./FooterSlot/)
+* [`sequence_container_slot`](./SequenceContainerSlot/)
+* [`unit_title_slot`](./UnitTitleSlot/)
diff --git a/src/plugin-slots/SequenceContainerSlot/README.md b/src/plugin-slots/SequenceContainerSlot/README.md
new file mode 100644
index 0000000000..593f8dfddc
--- /dev/null
+++ b/src/plugin-slots/SequenceContainerSlot/README.md
@@ -0,0 +1,41 @@
+# Sequence Container Slot
+
+### Slot ID: `sequence_container_slot`
+### Props:
+* `courseId`
+* `unitId`
+
+## Example
+
+The following `env.config.jsx` will add content after the sequence container
+
+![Screenshot of Content added after the Sequence Container](./images/post_sequence_container.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    sequence_container_slot: {
+      plugins: [
+        {
+          // Insert custom content after sequence content
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_sequence_container_content',
+            type: DIRECT_PLUGIN,
+            RenderWidget: ({courseId, unitId}) => (
+              <div>
+                <p>📚: {courseId}</p>
+                <p>📙: {unitId}</p>
+              </div>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
diff --git a/src/plugin-slots/SequenceContainerSlot/images/post_sequence_container.png b/src/plugin-slots/SequenceContainerSlot/images/post_sequence_container.png
new file mode 100644
index 0000000000..8b723b50c4
Binary files /dev/null and b/src/plugin-slots/SequenceContainerSlot/images/post_sequence_container.png differ
diff --git a/src/plugin-slots/SequenceContainerSlot/index.jsx b/src/plugin-slots/SequenceContainerSlot/index.jsx
new file mode 100644
index 0000000000..37b789d977
--- /dev/null
+++ b/src/plugin-slots/SequenceContainerSlot/index.jsx
@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+const SequenceContainerSlot = ({ courseId, unitId }) => (
+  <PluginSlot
+    id="sequence_container_slot"
+    pluginProps={{
+      courseId,
+      unitId,
+    }}
+  />
+);
+
+SequenceContainerSlot.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  unitId: PropTypes.string,
+};
+
+SequenceContainerSlot.defaultProps = {
+  unitId: null,
+};
+
+export default SequenceContainerSlot;
diff --git a/src/plugin-slots/UnitTitleSlot/README.md b/src/plugin-slots/UnitTitleSlot/README.md
new file mode 100644
index 0000000000..8419cd3585
--- /dev/null
+++ b/src/plugin-slots/UnitTitleSlot/README.md
@@ -0,0 +1,41 @@
+# Unit Title Slot
+
+### Slot ID: `unit_title_slot`
+### Props:
+* `courseId`
+* `unitId`
+
+## Example
+
+The following `env.config.jsx` will add content after the unit title
+
+![Screenshot of Content added after the Unit Title](./images/post_unit_title.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    unit_title_slot: {
+      plugins: [
+        {
+          // Insert custom content after unit title
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_unit_title_content',
+            type: DIRECT_PLUGIN,
+            RenderWidget: ({courseId, unitId}) => (
+              <>
+                <p>📚: {courseId}</p>
+                <p>📙: {unitId}</p>
+              </>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
diff --git a/src/plugin-slots/UnitTitleSlot/images/post_unit_title.png b/src/plugin-slots/UnitTitleSlot/images/post_unit_title.png
new file mode 100644
index 0000000000..b0adc94c20
Binary files /dev/null and b/src/plugin-slots/UnitTitleSlot/images/post_unit_title.png differ
diff --git a/src/plugin-slots/UnitTitleSlot/index.jsx b/src/plugin-slots/UnitTitleSlot/index.jsx
new file mode 100644
index 0000000000..40f449cf97
--- /dev/null
+++ b/src/plugin-slots/UnitTitleSlot/index.jsx
@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+const UnitTitleSlot = ({ courseId, unitId }) => (
+  <PluginSlot
+    id="unit_title_slot"
+    pluginProps={{
+      courseId,
+      unitId,
+    }}
+  />
+);
+
+UnitTitleSlot.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  unitId: PropTypes.string.isRequired,
+};
+
+export default UnitTitleSlot;
diff --git a/src/tab-page/TabPage.jsx b/src/tab-page/TabPage.jsx
index c3d2ec3afa..3dbac5d35e 100644
--- a/src/tab-page/TabPage.jsx
+++ b/src/tab-page/TabPage.jsx
@@ -4,9 +4,9 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { useDispatch, useSelector } from 'react-redux';
 import { Navigate } from 'react-router-dom';
 
-import Footer from '@edx/frontend-component-footer';
 import { Toast } from '@openedx/paragon';
 import { LearningHeader as Header } from '@edx/frontend-component-header';
+import FooterSlot from '../plugin-slots/FooterSlot';
 import PageLoading from '../generic/PageLoading';
 import { getAccessDeniedRedirectUrl } from '../shared/access';
 import { useModel } from '../generic/model-store';
@@ -80,7 +80,7 @@ const TabPage = ({ intl, ...props }) => {
           {intl.formatMessage(messages.failure)}
         </p>
       )}
-      <Footer />
+      <FooterSlot />
     </>
   );
 };