diff --git a/src/index.jsx b/src/index.jsx
index 0a8dfae4db..08131e60a0 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -23,6 +23,7 @@ import Head from './head/Head';
 import { StudioHome } from './studio-home';
 import CourseRerun from './course-rerun';
 import { TaxonomyListPage } from './taxonomy';
+import { TaxonomyTagsDrawer } from './taxonomy-tags-drawer';
 
 import 'react-datepicker/dist/react-datepicker.css';
 import './index.scss';
@@ -53,10 +54,16 @@ const App = () => {
           <Route path="/course/:courseId/*" element={<CourseAuthoringRoutes />} />
           <Route path="/course_rerun/:courseId" element={<CourseRerun />} />
           {process.env.ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && (
-            <Route
-              path="/taxonomy-list"
-              element={<TaxonomyListPage />}
-            />
+            <>
+              <Route
+                path="/taxonomy-list"
+                element={<TaxonomyListPage />}
+              />
+              <Route
+                path="/tagging/components/widget/:contentId"
+                element={<TaxonomyTagsDrawer />}
+              />
+            </>
           )}
         </Routes>
       </QueryClientProvider>
diff --git a/src/taxonomy-tags-drawer/TaxonomyTagsDrawer.jsx b/src/taxonomy-tags-drawer/TaxonomyTagsDrawer.jsx
new file mode 100644
index 0000000000..398cc0944a
--- /dev/null
+++ b/src/taxonomy-tags-drawer/TaxonomyTagsDrawer.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import {
+  Container,
+  CloseButton,
+} from '@edx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+const TaxonomyTagsDrawer = ({ intl }) => {
+  const closeTaxonomyTagsDrawer = () => {
+    // "*" allows communication with any origin
+    window.parent.postMessage('closeManageTagsDrawer', '*');
+  };
+
+  return (
+
+    <div className="bg-light-400 mt-1">
+      <Container size="xl">
+        <CloseButton onClick={() => closeTaxonomyTagsDrawer()} />
+        <h1>{intl.formatMessage(messages.headerTitle)}</h1>
+      </Container>
+    </div>
+  );
+};
+
+TaxonomyTagsDrawer.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(TaxonomyTagsDrawer);
diff --git a/src/taxonomy-tags-drawer/index.js b/src/taxonomy-tags-drawer/index.js
new file mode 100644
index 0000000000..863020a206
--- /dev/null
+++ b/src/taxonomy-tags-drawer/index.js
@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as TaxonomyTagsDrawer } from './TaxonomyTagsDrawer';
diff --git a/src/taxonomy-tags-drawer/messages.js b/src/taxonomy-tags-drawer/messages.js
new file mode 100644
index 0000000000..b582134306
--- /dev/null
+++ b/src/taxonomy-tags-drawer/messages.js
@@ -0,0 +1,10 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  headerTitle: {
+    id: 'course-authoring.taxonomy-tags-drawer.header.title',
+    defaultMessage: 'This is the TaxonomyTagsDrawer!',
+  },
+});
+
+export default messages;