diff --git a/src/components/bulk-email-tool/InstructorBulkEmailTool.jsx b/src/components/bulk-email-tool/InstructorBulkEmailTool.jsx
index 5edcfbd..fc78c5c 100644
--- a/src/components/bulk-email-tool/InstructorBulkEmailTool.jsx
+++ b/src/components/bulk-email-tool/InstructorBulkEmailTool.jsx
@@ -1,27 +1,28 @@
 import React from 'react';
-import { Container } from '@edx/paragon';
+
+import { useParams } from 'react-router-dom';
 import InstructorToolbar from './InstructorToolbar';
 import BulkEmailRecepient from './BulkEmailRecepient';
 import BulkEmailBody from './BulkEmailBody';
 import BulkEmailTaskManager from './BulkEmailTaskManager';
 
 export default function BulkEmailTool() {
+  const { courseId } = useParams();
+
   return (
-    <div>
-      <Container>
-        <div className="row">
-          <InstructorToolbar />
-        </div>
-        <div className="row">
-          <BulkEmailRecepient />
-        </div>
-        <div className="row">
-          <BulkEmailBody />
-        </div>
-        <div className="row">
-          <BulkEmailTaskManager />
-        </div>
-      </Container>
+    <div className="container m-auto">
+      <div className="row">
+        <InstructorToolbar courseId={courseId} />
+      </div>
+      <div className="row">
+        <BulkEmailRecepient courseId={courseId} />
+      </div>
+      <div className="row">
+        <BulkEmailBody courseId={courseId} />
+      </div>
+      <div className="row">
+        <BulkEmailTaskManager courseId={courseId} />
+      </div>
     </div>
   );
 }
diff --git a/src/components/bulk-email-tool/api.js b/src/components/bulk-email-tool/api.js
new file mode 100644
index 0000000..2f45e3b
--- /dev/null
+++ b/src/components/bulk-email-tool/api.js
@@ -0,0 +1,9 @@
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+const InstructorApiBaseUrl = `${getConfig().LMS_BASE_URL}/api/instructor/v1`;
+
+export default async function getInstructorData(courseId) {
+  const InstructorApiUrl = `${InstructorApiBaseUrl}/tasks/${courseId} `;
+  return getAuthenticatedHttpClient().get(InstructorApiUrl);
+}
diff --git a/src/index.jsx b/src/index.jsx
index 9ccd504..b392b1d 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -4,12 +4,13 @@ import 'regenerator-runtime/runtime';
 import {
   APP_INIT_ERROR, APP_READY, subscribe, initialize,
 } from '@edx/frontend-platform';
-import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
+import { AppProvider, ErrorPage, PageRoute } from '@edx/frontend-platform/react';
 import ReactDOM from 'react-dom';
 
 import Header, { messages as headerMessages } from '@edx/frontend-component-header';
 import Footer, { messages as footerMessages } from '@edx/frontend-component-footer';
 
+import { Switch } from 'react-router-dom';
 import appMessages from './i18n';
 
 import './index.scss';
@@ -19,7 +20,9 @@ subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider>
       <Header />
-      <BulkEmailTool />
+      <Switch>
+        <PageRoute path="/courses/:courseId/instructor/bulk_email" component={BulkEmailTool} />
+      </Switch>
       <Footer />
     </AppProvider>,
     document.getElementById('root'),