diff --git a/src/features/Courses/CourseDetailTable/__test__/columns.test.jsx b/src/features/Courses/CourseDetailTable/__test__/columns.test.jsx
index c30ba863..2d1cbc0a 100644
--- a/src/features/Courses/CourseDetailTable/__test__/columns.test.jsx
+++ b/src/features/Courses/CourseDetailTable/__test__/columns.test.jsx
@@ -62,7 +62,7 @@ describe('columns', () => {
     });
 
     renderWithProviders(
-      <MemoryRouter initialEntries={['/courses/course-v1:USB+CDDD+2023']}>
+      <MemoryRouter initialEntries={['/courses/Demo%20Course%201']}>
         <Route path="/courses/:courseId">
           <Component />
         </Route>
@@ -73,7 +73,7 @@ describe('columns', () => {
     const linkElement = screen.getByText('Class example');
     expect(linkElement).toBeInTheDocument();
     expect(linkElement).toHaveClass('text-truncate link');
-    expect(linkElement).toHaveAttribute('href', '/courses/course-v1:USB+CDDD+2023/Class example?classId=class id&previous=courses');
+    expect(linkElement).toHaveAttribute('href', '/courses/Demo Course 1/Class example?classId=class id&previous=courses');
   });
 
   test('Should render the dates', () => {
@@ -156,7 +156,7 @@ describe('columns', () => {
     };
 
     const component = renderWithProviders(
-      <MemoryRouter initialEntries={['/courses/course-v1:USB+CDDD+2023']}>
+      <MemoryRouter initialEntries={['/courses/Demo%20Course%201']}>
         <Route path="/courses/:courseId">
           <Component />
         </Route>
@@ -210,7 +210,7 @@ describe('columns', () => {
     };
 
     const component = renderWithProviders(
-      <MemoryRouter initialEntries={['/courses/course-v1:USB+CDDD+2023']}>
+      <MemoryRouter initialEntries={['/courses/Demo%20Course%201']}>
         <Route path="/courses/:courseId">
           <ComponentNoInstructor />
         </Route>
@@ -255,7 +255,7 @@ describe('columns', () => {
     };
 
     const component = renderWithProviders(
-      <MemoryRouter initialEntries={['/courses/course-v1:USB+CDDD+2023']}>
+      <MemoryRouter initialEntries={['/courses/Demo%20Course%201']}>
         <Route path="/courses/:courseId">
           <Component />
         </Route>
diff --git a/src/features/Courses/CoursesDetailPage/index.jsx b/src/features/Courses/CoursesDetailPage/index.jsx
index a8270066..f3379b98 100644
--- a/src/features/Courses/CoursesDetailPage/index.jsx
+++ b/src/features/Courses/CoursesDetailPage/index.jsx
@@ -29,15 +29,15 @@ const CoursesDetailPage = () => {
     numberOfStudents: '-',
     numberOfPendingStudents: '-',
     masterCourseId: '-',
-    masterCourseName: '-',
   };
 
   const courseInfo = useSelector((state) => state.courses.table.data)
-    .find((course) => course?.masterCourseId === courseId) || defaultCourseInfo;
+    .find((course) => course?.masterCourseName === courseId) || defaultCourseInfo;
   const institution = useSelector((state) => state.main.selectedInstitution);
   const classes = useSelector((state) => state.classes.table);
   const totalStudents = courseInfo.numberOfStudents + courseInfo.numberOfPendingStudents;
   const courseDetailsLink = `${getConfig().LEARNING_MICROFRONTEND_URL}/course/${courseInfo.masterCourseId}/home`;
+
   const handlePagination = (targetPage) => {
     setCurrentPage(targetPage);
     dispatch(updateCurrentPage(targetPage));
@@ -51,7 +51,7 @@ const CoursesDetailPage = () => {
     };
 
     if (institution.id) {
-      dispatch(fetchClassesData(institution.id, initialPage, courseInfo.masterCourseName));
+      dispatch(fetchClassesData(institution.id, initialPage, courseId));
       dispatch(fetchCoursesData(institution.id, initialPage, null));
     }
 
@@ -59,10 +59,10 @@ const CoursesDetailPage = () => {
       dispatch(fetchCoursesDataSuccess(initialState));
       dispatch(fetchClassesDataSuccess(initialState));
     };
-  }, [dispatch, institution.id, courseId]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [dispatch, institution.id, courseId]);
 
   useEffect(() => {
-    dispatch(fetchClassesData(institution.id, currentPage, courseInfo.masterCourseName));
+    dispatch(fetchClassesData(institution.id, currentPage, courseId));
   }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
diff --git a/src/features/Courses/CoursesTable/columns.jsx b/src/features/Courses/CoursesTable/columns.jsx
index 20f6ae70..5841271b 100644
--- a/src/features/Courses/CoursesTable/columns.jsx
+++ b/src/features/Courses/CoursesTable/columns.jsx
@@ -14,7 +14,7 @@ const columns = [
   {
     Header: 'Courses',
     accessor: 'masterCourseName',
-    Cell: ({ row }) => (<Link to={`/courses/${row.original.masterCourseId}`} className="link">{row.values.masterCourseName}</Link>),
+    Cell: ({ row }) => (<Link to={`/courses/${row.values.masterCourseName}`} className="link">{row.values.masterCourseName}</Link>),
   },
   {
     Header: 'Classes',
diff --git a/src/features/Licenses/LicenseDetailTable/columns.jsx b/src/features/Licenses/LicenseDetailTable/columns.jsx
index 255cb1b8..2465ff9a 100644
--- a/src/features/Licenses/LicenseDetailTable/columns.jsx
+++ b/src/features/Licenses/LicenseDetailTable/columns.jsx
@@ -6,7 +6,7 @@ const columns = [
     Header: 'Course',
     accessor: 'masterCourseName',
     Cell: ({ row }) => (
-      <Link to={`/courses/${row.original.masterCourseId}`} className="link">{row.values.masterCourseName}</Link>
+      <Link to={`/courses/${row.values.masterCourseName}`} className="link">{row.values.masterCourseName}</Link>
     ),
   },
   {