diff --git a/src/features/Classes/Class/ClassPage/index.jsx b/src/features/Classes/Class/ClassPage/index.jsx
index b33c32eb..6d5c5354 100644
--- a/src/features/Classes/Class/ClassPage/index.jsx
+++ b/src/features/Classes/Class/ClassPage/index.jsx
@@ -96,7 +96,7 @@ const ClassPage = () => {
           <Button onClick={() => history.goBack()} className="mr-3 link back-arrow" variant="tertiary">
             <i className="fa-solid fa-arrow-left" />
           </Button>
-          <h3 className="h2 mb-0 course-title">Class details: {classId}</h3>
+          <h3 className="h2 mb-0 course-title">Class details: {decodeURIComponent(classId)}</h3>
         </div>
       </div>
 
diff --git a/src/features/Classes/InstructorCard/index.jsx b/src/features/Classes/InstructorCard/index.jsx
index ed808ba6..5eba96b0 100644
--- a/src/features/Classes/InstructorCard/index.jsx
+++ b/src/features/Classes/InstructorCard/index.jsx
@@ -45,7 +45,7 @@ const InstructorCard = () => {
     <article className="instructor-wrapper mb-4 d-flex flex-column flex-sm-row justify-content-between align-items-start">
       <div className="d-flex flex-column w-75 justify-content-between h-100">
         <h3 className="text-color text-uppercase font-weight-bold text-truncate w-75" title={classId}>
-          {classId}
+          {decodeURIComponent(classId)}
         </h3>
         {isLoadingClasses && (
           <div className="w-100 h-100 d-flex justify-content-center align-items-center">
diff --git a/src/features/Courses/CourseDetailTable/__test__/columns.test.jsx b/src/features/Courses/CourseDetailTable/__test__/columns.test.jsx
index 2d1cbc0a..53d15f1f 100644
--- a/src/features/Courses/CourseDetailTable/__test__/columns.test.jsx
+++ b/src/features/Courses/CourseDetailTable/__test__/columns.test.jsx
@@ -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/Demo Course 1/Class example?classId=class id&previous=courses');
+    expect(linkElement).toHaveAttribute('href', '/courses/Demo Course 1/Class example?classId=class%20id&previous=courses');
   });
 
   test('Should render the dates', () => {
diff --git a/src/features/Courses/CourseDetailTable/columns.jsx b/src/features/Courses/CourseDetailTable/columns.jsx
index 7abc52ce..ea46de93 100644
--- a/src/features/Courses/CourseDetailTable/columns.jsx
+++ b/src/features/Courses/CourseDetailTable/columns.jsx
@@ -22,7 +22,7 @@ const columns = [
       const { courseId } = useParams();
       return (
         <Link
-          to={`/courses/${courseId}/${row.values.className}?classId=${row.original.classId}&previous=courses`}
+          to={`/courses/${courseId}/${encodeURIComponent(row.values.className)}?classId=${encodeURIComponent(row.original.classId)}&previous=courses`}
           className="text-truncate link"
         >
           {row.values.className}