diff --git a/src/constants.js b/src/constants.js
index 172f870691..98eeef2568 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -3,7 +3,10 @@ export const DECODE_ROUTES = {
   HOME: '/course/:courseId/home',
   LIVE: '/course/:courseId/live',
   DATES: '/course/:courseId/dates',
-  DISCUSSION: '/course/:courseId/discussion/:path/*',
+  DISCUSSION_ROUTES: [
+    '/course/:courseId/discussion/:path/*',
+    '/course/:courseId/discussion',
+  ],
   PROGRESS: [
     '/course/:courseId/progress/:targetUserId/',
     '/course/:courseId/progress',
diff --git a/src/course-home/dates-tab/timeline/Timeline.jsx b/src/course-home/dates-tab/timeline/Timeline.jsx
index 09073d6fb7..0736d1a471 100644
--- a/src/course-home/dates-tab/timeline/Timeline.jsx
+++ b/src/course-home/dates-tab/timeline/Timeline.jsx
@@ -20,7 +20,7 @@ const Timeline = () => {
   const now = new Date();
   let foundNextDue = false;
   let foundToday = false;
-  courseDateBlocks.forEach(courseDateBlock => {
+  courseDateBlocks?.forEach(courseDateBlock => {
     const dateInfo = { ...courseDateBlock };
     const parsedDate = new Date(dateInfo.date);
 
diff --git a/src/course-home/discussion-tab/DiscussionTab.jsx b/src/course-home/discussion-tab/DiscussionTab.jsx
index 06ee97cc7c..22af7d22ff 100644
--- a/src/course-home/discussion-tab/DiscussionTab.jsx
+++ b/src/course-home/discussion-tab/DiscussionTab.jsx
@@ -1,33 +1,17 @@
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl } from '@edx/frontend-platform/i18n';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useParams, generatePath, useNavigate } from 'react-router-dom';
-import { useIFrameHeight, useIFramePluginEvents } from '../../generic/hooks';
+import { useParams } from 'react-router-dom';
 
 const DiscussionTab = () => {
   const { courseId } = useSelector(state => state.courseHome);
   const { path } = useParams();
   const [originalPath] = useState(path);
-  const navigate = useNavigate();
 
-  const [, iFrameHeight] = useIFrameHeight();
-  useIFramePluginEvents({
-    'discussions.navigate': (payload) => {
-      const basePath = generatePath('/course/:courseId/discussion', { courseId });
-      navigate(`${basePath}/${payload.path}`);
-    },
-  });
   const discussionsUrl = `${getConfig().DISCUSSIONS_MFE_BASE_URL}/${courseId}/${originalPath}`;
-  return (
-    <iframe
-      src={discussionsUrl}
-      className="d-flex w-100 border-0"
-      height={iFrameHeight}
-      style={{ minHeight: '60rem' }}
-      title="discussion"
-    />
-  );
+  window.location.href = discussionsUrl;
+  return (<></>);
 };
 
 DiscussionTab.propTypes = {};
diff --git a/src/course-home/discussion-tab/DiscussionTab.test.jsx b/src/course-home/discussion-tab/DiscussionTab.test.jsx
index 9cd6b9e060..07bba0e293 100644
--- a/src/course-home/discussion-tab/DiscussionTab.test.jsx
+++ b/src/course-home/discussion-tab/DiscussionTab.test.jsx
@@ -6,15 +6,12 @@ import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { Factory } from 'rosie';
+import CoursewarePage from '@src/pages/courseware/components';
+import DecodePageRoute from '@src/decode-page-route';
+import { initializeMockApp, waitFor } from '@src/setupTest';
+import { appendBrowserTimezoneToUrl } from '@src/utils';
 import { UserMessagesProvider } from '../../generic/user-messages';
-import {
-  initializeMockApp, messageEvent, screen, waitFor,
-} from '../../setupTest';
 import initializeStore from '../../store';
-import { TabContainer } from '../../tab-page';
-import { appendBrowserTimezoneToUrl } from '../../utils';
-import { fetchDiscussionTab } from '../data/thunks';
-import DiscussionTab from './DiscussionTab';
 
 initializeMockApp();
 jest.mock('@edx/frontend-platform/analytics');
@@ -22,45 +19,45 @@ jest.mock('@edx/frontend-platform/analytics');
 describe('DiscussionTab', () => {
   let axiosMock;
   let store;
-  let component;
+  let courseMetadataUrl;
+
+  const courseMetadata = Factory.build('courseHomeMetadata', { user_timezone: 'America/New_York' });
+  const { id: courseId } = courseMetadata;
 
   beforeEach(() => {
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
     store = initializeStore();
-    component = (
+
+    courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/course_metadata/${courseId}`;
+    courseMetadataUrl = appendBrowserTimezoneToUrl(courseMetadataUrl);
+
+    axiosMock.onGet(courseMetadataUrl).reply(200, courseMetadata);
+    history.push(`/course/${courseId}/discussion`); // so tab can pull course id from url
+
+    const component = (
       <AppProvider store={store}>
         <UserMessagesProvider>
           <Routes>
             <Route
               path="/course/:courseId/discussion"
               element={(
-                <TabContainer tab="discussion" fetch={fetchDiscussionTab} slice="courseHome">
-                  <DiscussionTab />
-                </TabContainer>
-              )}
+                <DecodePageRoute>
+                  <CoursewarePage key="courseHome" activeKey="discussion" />
+                </DecodePageRoute>
+                  )}
             />
           </Routes>
         </UserMessagesProvider>
       </AppProvider>
     );
-  });
-
-  const courseMetadata = Factory.build('courseHomeMetadata', { user_timezone: 'America/New_York' });
-  const { id: courseId } = courseMetadata;
-
-  let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/course_metadata/${courseId}`;
-  courseMetadataUrl = appendBrowserTimezoneToUrl(courseMetadataUrl);
-
-  beforeEach(() => {
-    axiosMock.onGet(courseMetadataUrl).reply(200, courseMetadata);
-    history.push(`/course/${courseId}/discussion`); // so tab can pull course id from url
 
     render(component);
   });
 
-  it('resizes when it gets a size hint from iframe', async () => {
-    window.postMessage({ ...messageEvent, payload: { height: 1234 } }, '*');
-    await waitFor(() => expect(screen.getByTitle('discussion'))
-      .toHaveAttribute('height', String(1234)));
+  it('Validate discussion component url', async () => {
+    // Simulate the redirect logic within your component
+    await waitFor(() => {
+      expect(window.location.href).toBe(`http://localhost/course/${courseId}/discussion`);
+    });
   });
 });
diff --git a/src/course-home/outline-tab/OutlineTab.jsx b/src/course-home/outline-tab/OutlineTab.jsx
index ca26155f82..b793800a64 100644
--- a/src/course-home/outline-tab/OutlineTab.jsx
+++ b/src/course-home/outline-tab/OutlineTab.jsx
@@ -170,7 +170,7 @@ const OutlineTab = ({ intl }) => {
                 </div>
               </div>
               <ol id="courseHome-outline" className="list-unstyled">
-                {courses[rootCourseId].sectionIds.map((sectionId) => (
+                {courses && courses[rootCourseId].sectionIds.map((sectionId) => (
                   <Section
                     key={sectionId}
                     courseId={courseId}
diff --git a/src/index.jsx b/src/index.jsx
index f390cb3106..edd1f874e0 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -2,33 +2,26 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 
 import {
-  APP_INIT_ERROR, APP_READY, subscribe, initialize,
-  mergeConfig,
-  getConfig,
+  APP_INIT_ERROR, APP_READY, getConfig, initialize, mergeConfig, subscribe,
 } from '@edx/frontend-platform';
 import { AppProvider, ErrorPage, PageWrap } from '@edx/frontend-platform/react';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Routes, Route } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 
 import { Helmet } from 'react-helmet';
-import { fetchDiscussionTab, fetchLiveTab } from './course-home/data/thunks';
-import DiscussionTab from './course-home/discussion-tab/DiscussionTab';
+import CoursewarePage from '@src/pages/courseware/components';
+import { fetchLiveTab } from './course-home/data/thunks';
 
 import messages from './i18n';
 import { UserMessagesProvider } from './generic/user-messages';
 
 import './index.scss';
-import OutlineTab from './course-home/outline-tab';
 import { CourseExit } from './courseware/course/course-exit';
 import CoursewareContainer from './courseware';
 import CoursewareRedirectLandingPage from './courseware/CoursewareRedirectLandingPage';
-import DatesTab from './course-home/dates-tab';
 import GoalUnsubscribe from './course-home/goal-unsubscribe';
-import ProgressTab from './course-home/progress-tab/ProgressTab';
 import { TabContainer } from './tab-page';
-
-import { fetchDatesTab, fetchOutlineTab, fetchProgressTab } from './course-home/data';
 import { fetchCourse } from './courseware/data';
 import initializeStore from './store';
 import NoticesProvider from './generic/notices';
@@ -48,22 +41,20 @@ subscribe(APP_READY, () => {
         <NoticesProvider>
           <UserMessagesProvider>
             <Routes>
-              <Route path={ROUTES.UNSUBSCRIBE} element={<PageWrap><GoalUnsubscribe /></PageWrap>} />
-              <Route path={ROUTES.REDIRECT} element={<PageWrap><CoursewareRedirectLandingPage /></PageWrap>} />
-              <Route
-                path={DECODE_ROUTES.ACCESS_DENIED}
-                element={<DecodePageRoute><CourseAccessErrorPage /></DecodePageRoute>}
-              />
               <Route
                 path={DECODE_ROUTES.HOME}
                 element={(
                   <DecodePageRoute>
-                    <TabContainer tab="outline" fetch={fetchOutlineTab} slice="courseHome">
-                      <OutlineTab />
-                    </TabContainer>
+                    <CoursewarePage key="courseHome" activeKey="outline" />
                   </DecodePageRoute>
               )}
               />
+              <Route path={ROUTES.UNSUBSCRIBE} element={<PageWrap><GoalUnsubscribe /></PageWrap>} />
+              <Route path={ROUTES.REDIRECT} element={<PageWrap><CoursewareRedirectLandingPage /></PageWrap>} />
+              <Route
+                path={DECODE_ROUTES.ACCESS_DENIED}
+                element={<DecodePageRoute><CourseAccessErrorPage /></DecodePageRoute>}
+              />
               <Route
                 path={DECODE_ROUTES.LIVE}
                 element={(
@@ -78,38 +69,29 @@ subscribe(APP_READY, () => {
                 path={DECODE_ROUTES.DATES}
                 element={(
                   <DecodePageRoute>
-                    <TabContainer tab="dates" fetch={fetchDatesTab} slice="courseHome">
-                      <DatesTab />
-                    </TabContainer>
-                  </DecodePageRoute>
-                )}
-              />
-              <Route
-                path={DECODE_ROUTES.DISCUSSION}
-                element={(
-                  <DecodePageRoute>
-                    <TabContainer tab="discussion" fetch={fetchDiscussionTab} slice="courseHome">
-                      <DiscussionTab />
-                    </TabContainer>
+                    <CoursewarePage key="dates" activeKey="dates" />
                   </DecodePageRoute>
                 )}
               />
+              {DECODE_ROUTES.DISCUSSION_ROUTES.map(r => (
+                <Route
+                  path={r}
+                  element={(
+                    <DecodePageRoute>
+                      <CoursewarePage key="courseHome" activeKey="discussion" />
+                    </DecodePageRoute>
+                    )}
+                />
+              ))}
               {DECODE_ROUTES.PROGRESS.map((route) => (
                 <Route
                   key={route}
                   path={route}
                   element={(
                     <DecodePageRoute>
-                      <TabContainer
-                        tab="progress"
-                        fetch={fetchProgressTab}
-                        slice="courseHome"
-                        isProgressTab
-                      >
-                        <ProgressTab />
-                      </TabContainer>
+                      <CoursewarePage key="courseHome" activeKey="progress" />
                     </DecodePageRoute>
-                  )}
+                      )}
                 />
               ))}
               <Route
diff --git a/src/pages/courseware/components.jsx b/src/pages/courseware/components.jsx
new file mode 100644
index 0000000000..76cb4c9f80
--- /dev/null
+++ b/src/pages/courseware/components.jsx
@@ -0,0 +1,191 @@
+import React, { useEffect, useState } from 'react';
+import { LearningHeader as Header } from '@edx/frontend-component-header';
+import { useModel } from '@src/generic/model-store';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  Tab, TabPane, Tabs, Toast, useToggle,
+} from '@openedx/paragon';
+import genericMessages from '@src/generic/messages';
+import { setCallToActionToast } from '@src/course-home/data/slice';
+import LaunchCourseHomeTourButton from '@src/product-tours/newUserCourseHomeTour/LaunchCourseHomeTourButton';
+import { fetchDatesTab, fetchOutlineTab, fetchProgressTab } from '@src/course-home/data';
+import { useParams } from 'react-router-dom';
+import PageLoading from '@src/generic/PageLoading';
+import messages from '@src/tab-page/messages';
+import FooterSlot from '@openedx/frontend-slot-footer';
+import ProductTours from '@src/product-tours/ProductTours';
+import { Helmet } from 'react-helmet';
+import { getConfig } from '@edx/frontend-platform';
+import InstructorToolbar from '@src/instructor-toolbar';
+import StreakModal from '@src/shared/streak-celebration/StreakCelebrationModal';
+import { AlertList } from '@src/generic/user-messages';
+import useLogistrationAlert from '@src/alerts/logistration-alert';
+import useEnrollmentAlert from '@src/alerts/enrollment-alert';
+import OutlineTab from '@src/course-home/outline-tab/OutlineTab';
+import DatesTab from '@src/course-home/dates-tab';
+import { fetchDiscussionTab, fetchLiveTab } from '@src/course-home/data/thunks';
+import ProgressTab from '@src/course-home/progress-tab/ProgressTab';
+import PropTypes from 'prop-types';
+import DiscussionTab from '@src/course-home/discussion-tab/DiscussionTab';
+
+const TabComponents = {
+  outline: (activeTab) => ((activeTab === 'outline') ? <OutlineTab /> : <></>),
+  dates: (activeTab) => ((activeTab === 'dates') ? <DatesTab /> : <></>),
+  progress: (activeTab) => ((activeTab === 'progress') ? <ProgressTab /> : <></>),
+  discussion: (activeTab) => ((activeTab === 'discussion') ? <DiscussionTab /> : <></>),
+};
+const CoursewarePage = ({ intl, activeKey }) => {
+  const dispatch = useDispatch();
+  const [activeTabSlug, setActiveTab] = useState(activeKey);
+  const metadataModel = 'courseHomeMeta';
+  const unitId = null;
+  const { courseId: courseIdFromUrl } = useParams();
+  useEffect(() => {
+    dispatch(fetchOutlineTab(courseIdFromUrl));
+    dispatch(fetchDatesTab(courseIdFromUrl));
+    dispatch(fetchLiveTab(courseIdFromUrl));
+    dispatch(fetchDiscussionTab(courseIdFromUrl));
+  }, [courseIdFromUrl]);
+  const {
+    courseId,
+    courseStatus,
+  } = useSelector(state => state.courseHome);
+  const {
+    toastBodyLink,
+    toastBodyText,
+    toastHeader,
+  } = useSelector(state => state.courseHome);
+
+  // Logistration and enrollment alerts are only really used for the outline tab, but loaded here to put them above
+  // breadcrumbs when they are visible.
+  const logistrationAlert = useLogistrationAlert(courseId);
+  const enrollmentAlert = useEnrollmentAlert(courseId);
+
+  const {
+    number,
+    org,
+    title,
+    celebrations,
+    originalUserIsStaff,
+    tabs,
+    verifiedMode,
+  } = useModel('courseHomeMeta', courseIdFromUrl, courseId);
+
+  const activeTab = tabs ? tabs[0] : {};
+
+  const streakLengthToCelebrate = celebrations && celebrations.streakLengthToCelebrate;
+  const streakDiscountCouponEnabled = celebrations && celebrations.streakDiscountEnabled && verifiedMode;
+  const [isStreakCelebrationOpen, , closeStreakCelebration] = useToggle(streakLengthToCelebrate);
+
+  return (
+    <>
+
+      {['loaded', 'denied'].includes(courseStatus) && (
+        <>
+          <Toast
+            action={toastBodyText ? {
+              label: toastBodyText,
+              href: toastBodyLink,
+            } : null}
+            closeLabel={intl.formatMessage(genericMessages.close)}
+            onClose={() => dispatch(setCallToActionToast({ header: '', link: null, link_text: null }))}
+            show={!!(toastHeader)}
+          >
+            {toastHeader}
+          </Toast>
+          <LaunchCourseHomeTourButton srOnly />
+        </>
+      )}
+
+      <Header courseOrg={org} courseNumber={number} courseTitle={title} />
+      {courseStatus === 'loading' && (
+        <PageLoading srMessage={intl.formatMessage(messages.loading)} />
+      )}
+
+      {org && (
+      <ProductTours
+        activeTab={activeTabSlug}
+        courseId={courseIdFromUrl}
+        isStreakCelebrationOpen={isStreakCelebrationOpen}
+        org={org}
+      />
+      )}
+      <Helmet>
+        <title>{`${activeTab ? `${activeTab.title} | ` : ''}${title} | ${getConfig().SITE_NAME}`}</title>
+      </Helmet>
+      {originalUserIsStaff && (
+        <InstructorToolbar
+          courseId={courseIdFromUrl}
+          unitId={unitId}
+          tab={activeTabSlug}
+        />
+      )}
+      <StreakModal
+        courseId={courseIdFromUrl}
+        metadataModel={metadataModel}
+        streakLengthToCelebrate={streakLengthToCelebrate}
+        isStreakCelebrationOpen={!!isStreakCelebrationOpen}
+        closeStreakCelebration={closeStreakCelebration}
+        streakDiscountCouponEnabled={streakDiscountCouponEnabled}
+        verifiedMode={verifiedMode}
+      />
+      <main id="main-content" className="d-flex flex-column flex-grow-1">
+        <AlertList
+          topic="outline"
+          className="mx-5 mt-3"
+          customAlerts={{
+            ...enrollmentAlert,
+            ...logistrationAlert,
+          }}
+        />
+        {(courseStatus === 'loaded' && tabs) && (
+        <Tabs
+          variant="tabs"
+          defaultActiveKey={activeKey}
+          id="uncontrolled-tab-example"
+          style={{ marginLeft: '64px', marginRight: '64px' }}
+          onSelect={(_activeKey) => {
+            if (_activeKey === 'teams' || _activeKey === 'instructor') {
+              window.location.replace(tabs.filter(t => (t.slug === _activeKey))[0].url);
+              return;
+            }
+            if (_activeKey === 'progress') { dispatch(fetchProgressTab(courseIdFromUrl)); }
+            setActiveTab(_activeKey);
+          }}
+        >
+          { tabs?.map(tab => (
+            <Tab eventKey={tab.slug} title={tab.title} href={tab.slug}>
+              <TabPane style={{ margin: '64px', marginRight: '64px' }}>
+                {TabComponents[tab.slug] && TabComponents[tab.slug](activeTabSlug)}
+              </TabPane>
+            </Tab>
+          ))}
+        </Tabs>
+        )}
+      </main>
+
+      {/* courseStatus 'failed' and any other unexpected course status. */}
+      {(!['loading', 'loaded', 'denied'].includes(courseStatus)) && (
+        <p className="text-center py-5 mx-auto" style={{ maxWidth: '30em' }}>
+          {intl.formatMessage(messages.failure)}
+        </p>
+      )}
+      <FooterSlot />
+    </>
+  );
+};
+
+CoursewarePage.defaultProps = {
+  // unitId: null,
+};
+
+CoursewarePage.propTypes = {
+  // activeTabSlug: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
+  activeKey: PropTypes.string.isRequired,
+  // courseStatus: PropTypes.string.isRequired,
+  // unitId: PropTypes.string,
+};
+
+export default injectIntl(CoursewarePage);