diff --git a/src/CourseAuthoringRoutes.jsx b/src/CourseAuthoringRoutes.jsx
index c5eea6ac63..3fe3cc14d8 100644
--- a/src/CourseAuthoringRoutes.jsx
+++ b/src/CourseAuthoringRoutes.jsx
@@ -18,6 +18,7 @@ import { CourseUpdates } from './course-updates';
 import { CourseUnit } from './course-unit';
 import CourseExportPage from './export-page/CourseExportPage';
 import CourseImportPage from './import-page/CourseImportPage';
+import { DECODE_ROUTES } from './constants';
 
 /**
  * As of this writing, these routes are mounted at a path prefixed with the following:
@@ -69,10 +70,12 @@ const CourseAuthoringRoutes = () => {
           path="custom-pages/*"
           element={<PageWrap><CustomPages courseId={courseId} /></PageWrap>}
         />
-        <Route
-          path="/container/:blockId/:sequenceId"
-          element={process.env.ENABLE_UNIT_PAGE === 'true' ? <PageWrap><CourseUnit courseId={courseId} /></PageWrap> : null}
-        />
+        {DECODE_ROUTES.COURSE_UNIT.map((path) => (
+          <Route
+            path={path}
+            element={process.env.ENABLE_UNIT_PAGE === 'true' ? <PageWrap><CourseUnit courseId={courseId} /></PageWrap> : null}
+          />
+        ))}
         <Route
           path="editor/course-videos/:blockId"
           element={process.env.ENABLE_NEW_EDITOR_PAGES === 'true' ? <PageWrap><VideoSelectorContainer courseId={courseId} /></PageWrap> : null}
diff --git a/src/constants.js b/src/constants.js
index 7c293fe122..4db6958c38 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -35,3 +35,10 @@ export const COURSE_CREATOR_STATES = {
   denied: 'denied',
   disallowedForThisSite: 'disallowed_for_this_site',
 };
+
+export const DECODE_ROUTES = {
+  COURSE_UNIT: [
+    '/container/:blockId/:sequenceId',
+    '/container/:blockId',
+  ],
+};
diff --git a/src/course-unit/CourseUnit.jsx b/src/course-unit/CourseUnit.jsx
index 577f1d5d01..94b2ea57ee 100644
--- a/src/course-unit/CourseUnit.jsx
+++ b/src/course-unit/CourseUnit.jsx
@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
-import { useParams } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate, useParams } from 'react-router-dom';
 import { Container, Layout } from '@edx/paragon';
 import { useIntl, injectIntl } from '@edx/frontend-platform/i18n';
 import { ErrorAlert } from '@edx/frontend-lib-content-components';
 
+import { useEffect } from 'react';
 import { getProcessingNotification } from '../generic/processing-notification/data/selectors';
 import SubHeader from '../generic/sub-header/SubHeader';
 import { RequestStatus } from '../data/constants';
@@ -20,10 +21,11 @@ import { useCourseUnit } from './hooks';
 import messages from './messages';
 
 const CourseUnit = ({ courseId }) => {
-  const { sequenceId, blockId } = useParams();
+  const { blockId } = useParams();
   const intl = useIntl();
   const {
     isLoading,
+    sequenceId,
     unitTitle,
     savingStatus,
     isTitleEditFormOpen,
@@ -32,7 +34,7 @@ const CourseUnit = ({ courseId }) => {
     headerNavigationsActions,
     handleTitleEdit,
     handleInternetConnectionFailed,
-  } = useCourseUnit({ courseId, blockId, sequenceId });
+  } = useCourseUnit({ courseId, blockId });
 
   document.title = getPageHeadTitle('', unitTitle);
 
diff --git a/src/course-unit/hooks.jsx b/src/course-unit/hooks.jsx
index bf942257a3..57ae0b0eb8 100644
--- a/src/course-unit/hooks.jsx
+++ b/src/course-unit/hooks.jsx
@@ -1,6 +1,7 @@
 import { useContext, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppContext } from '@edx/frontend-platform/react';
+import { useNavigate } from 'react-router-dom';
 
 import { RequestStatus } from '../data/constants';
 import {
@@ -15,17 +16,18 @@ import {
 import { updateSavingStatus } from './data/slice';
 import { getUnitViewLivePath, getUnitPreviewPath } from './utils';
 
-const useCourseUnit = ({ courseId, blockId, sequenceId }) => {
+const useCourseUnit = ({ courseId, blockId }) => {
   const dispatch = useDispatch();
 
   const { config } = useContext(AppContext);
   const courseUnit = useSelector(getCourseUnitData);
   const savingStatus = useSelector(getSavingStatus);
   const loadingStatus = useSelector(getLoadingStatus);
-
+  const navigate = useNavigate();
   const [isTitleEditFormOpen, toggleTitleEditForm] = useState(false);
 
   const unitTitle = courseUnit.metadata?.displayName || '';
+  const sequenceId = courseUnit.ancestorInfo?.ancestors[0].id;
 
   const headerNavigationsActions = {
     handleViewLive: () => {
@@ -53,14 +55,22 @@ const useCourseUnit = ({ courseId, blockId, sequenceId }) => {
     handleTitleEdit();
   };
 
+  const handleNavigate = (id) => {
+    if (sequenceId) {
+      navigate(`/course/${courseId}/container/${blockId}/${id}`, { replace: true });
+    }
+  };
+
   useEffect(() => {
     dispatch(fetchCourseUnitQuery(blockId));
     dispatch(fetchCourseSectionVerticalData(blockId));
     dispatch(fetchSequence(sequenceId));
     dispatch(fetchCourse(courseId));
-  }, [courseId, blockId]);
+    handleNavigate(sequenceId);
+  }, [courseId, blockId, sequenceId]);
 
   return {
+    sequenceId,
     courseUnit,
     unitTitle,
     isLoading: loadingStatus.fetchUnitLoadingStatus === RequestStatus.IN_PROGRESS,