diff --git a/frontend/components/Custom/EvaluationHeader.tsx b/frontend/components/Custom/EvaluationHeader.tsx
new file mode 100644
index 0000000..a2ec139
--- /dev/null
+++ b/frontend/components/Custom/EvaluationHeader.tsx
@@ -0,0 +1,14 @@
+import Container from '@mui/material/Container';
+import CardHeader from '@mui/material/CardHeader';
+
+interface EvaluationHeaderProps {
+  title: string;
+}
+
+const EvaluationHeader = ({ title }: EvaluationHeaderProps) => (
+  <Container sx={{ textAlign: 'center' }}>
+    <CardHeader title={title} />
+  </Container>
+);
+
+export default EvaluationHeader;
diff --git a/frontend/components/hooks/usePageTitle.tsx b/frontend/components/hooks/usePageTitle.tsx
new file mode 100644
index 0000000..b6bdbfb
--- /dev/null
+++ b/frontend/components/hooks/usePageTitle.tsx
@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+
+const usePageTitle = (title: string) => {
+  useEffect(() => {
+    document.title = title;
+  }, [title]);
+};
+
+export default usePageTitle;
diff --git a/frontend/pages/course-evaluation/[id]/index.tsx b/frontend/pages/course-evaluation/[id]/index.tsx
index f3eb03b..cf07601 100644
--- a/frontend/pages/course-evaluation/[id]/index.tsx
+++ b/frontend/pages/course-evaluation/[id]/index.tsx
@@ -1,10 +1,20 @@
 import SectionTabs from '@/components/CourseEvaluation/SectionTabs';
 import BodyCard from '@/components/utils/BodyCard';
+import useCourseEvaluation from '@/components/hooks/useCourseEvaluation';
+import usePageTitle from '@/components/hooks/usePageTitle';
+import EvaluationHeader from '@/components/Custom/EvaluationHeader';
 
-const Post = () => (
-  <BodyCard>
-    <SectionTabs />
-  </BodyCard>
-);
+const Post = () => {
+  const { courseEvaluation } = useCourseEvaluation();
+
+  usePageTitle(`${courseEvaluation.unit_code} Manage`);
+
+  return (
+    <BodyCard>
+      <EvaluationHeader title={courseEvaluation.unit_code} />
+      <SectionTabs />
+    </BodyCard>
+  );
+};
 
 export default Post;
diff --git a/frontend/pages/course-evaluation/[id]/review/[reviewId].tsx b/frontend/pages/course-evaluation/[id]/review/[reviewId].tsx
index b0a345c..709e55a 100644
--- a/frontend/pages/course-evaluation/[id]/review/[reviewId].tsx
+++ b/frontend/pages/course-evaluation/[id]/review/[reviewId].tsx
@@ -7,12 +7,12 @@ import ReviewSummarySubmissionContent from '@/components/Reviewer/Submit/ReviewS
 import { userDisplayName } from '@/components/utils/generic';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import CardHeader from '@mui/material/CardHeader';
 import Container from '@mui/material/Container';
 import CardActions from '@mui/material/CardActions';
 import Button from '@mui/material/Button';
 import { useRouter } from 'next/router';
 import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
+import CardHeader from '@mui/material/CardHeader';
 
 const Summary = () => {
   const { courseReview } = useCourseReview(false);
diff --git a/frontend/pages/review/[reviewId]/1-overview-and-eoc.tsx b/frontend/pages/review/[reviewId]/1-overview-and-eoc.tsx
index c124a74..97b5a29 100644
--- a/frontend/pages/review/[reviewId]/1-overview-and-eoc.tsx
+++ b/frontend/pages/review/[reviewId]/1-overview-and-eoc.tsx
@@ -18,14 +18,17 @@ import EOCAccordionForRefresher from '@/components/Reviewer/OverviewAndEOC/EOCAc
 import ReviewerBottomNavigation from '@/components/Reviewer/ReviewerBottomNavigation';
 import { getReviewStepsWithState } from '@/components/utils/reviews';
 import useAuthenticatedAPIClient from '@/components/hooks/useAuthenticatedAPIClient';
+import usePageTitle from '@/components/hooks/usePageTitle';
+import EvaluationHeader from '@/components/Custom/EvaluationHeader';
 
 const OverviewAndEOC = () => {
   const { courseReview } = useCourseReview();
   const { courseEvaluation } = useCourseEvaluation(courseReview.course_evaluation.id);
 
+  usePageTitle(`${courseEvaluation.unit_code} Review`);
+
   const STEP_INDEX = 0;
   const stepDetails = getReviewStepsWithState(courseReview)[STEP_INDEX];
-
   /**
    * When we finish on this page, there should be an API interaction to update that the user has started the review
    */
@@ -48,6 +51,7 @@ const OverviewAndEOC = () => {
   };
   return (
     <BodyCard>
+      <EvaluationHeader title={courseEvaluation.unit_code} />
       <ReviewProgress review={courseReview} />
       <AboutStepCard stepIndex={0} />
       <Container maxWidth="xl" sx={{ mt: 2, mb: 2 }}>
diff --git a/frontend/pages/review/[reviewId]/2-documents.tsx b/frontend/pages/review/[reviewId]/2-documents.tsx
index 6588beb..d0c1b4b 100644
--- a/frontend/pages/review/[reviewId]/2-documents.tsx
+++ b/frontend/pages/review/[reviewId]/2-documents.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Grid from '@mui/material/Grid';
 import Container from '@mui/material/Container';
 import useCourseReview from '@/components/hooks/useCourseReview';
@@ -8,16 +9,21 @@ import BodyCard from '@/components/utils/BodyCard';
 import { getReviewStepsWithState } from '@/components/utils/reviews';
 import DocumentCard from '@/components/CourseEvaluation/Documents/DocumentCard';
 import useCourseEvaluation from '@/components/hooks/useCourseEvaluation';
+import usePageTitle from '@/components/hooks/usePageTitle';
+import EvaluationHeader from '@/components/Custom/EvaluationHeader';
 
 const Documents = () => {
   const { courseReview } = useCourseReview();
   const { courseEvaluation } = useCourseEvaluation(courseReview.course_evaluation.id);
 
+  usePageTitle(`${courseEvaluation.unit_code} Review`);
+
   const STEP_INDEX = 1;
   const stepDetails = getReviewStepsWithState(courseReview)[STEP_INDEX];
 
   return (
     <BodyCard>
+      <EvaluationHeader title={courseEvaluation.unit_code} />
       <ReviewProgress review={courseReview} />
       <AboutStepCard stepIndex={STEP_INDEX} />
       <Container maxWidth="xl" sx={{ mt: 2, mb: 2 }}>
diff --git a/frontend/pages/review/[reviewId]/3-assessment.tsx b/frontend/pages/review/[reviewId]/3-assessment.tsx
index f3ca98f..17ae423 100644
--- a/frontend/pages/review/[reviewId]/3-assessment.tsx
+++ b/frontend/pages/review/[reviewId]/3-assessment.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import useCourseEvaluation from '@/components/hooks/useCourseEvaluation';
 import useCourseReview from '@/components/hooks/useCourseReview';
 import AboutStepCard from '@/components/Reviewer/AboutStepCard';
@@ -6,6 +7,8 @@ import ReviewProgress from '@/components/Reviewer/ReviewProgress';
 import BodyCard from '@/components/utils/BodyCard';
 import { getReviewStepsWithState } from '@/components/utils/reviews';
 import EOCAccordionWithModal from '@/components/Reviewer/Assessment/EOCAccordionWithModal';
+import usePageTitle from '@/components/hooks/usePageTitle';
+import EvaluationHeader from '@/components/Custom/EvaluationHeader';
 
 const Assessment = () => {
   const { courseReview } = useCourseReview();
@@ -14,8 +17,11 @@ const Assessment = () => {
   const STEP_INDEX = 2;
   const stepDetails = getReviewStepsWithState(courseReview)[STEP_INDEX];
 
+  usePageTitle(`${courseEvaluation.unit_code} Review`);
+
   return (
     <BodyCard>
+      <EvaluationHeader title={courseEvaluation.unit_code} />
       <ReviewProgress review={courseReview} />
       <AboutStepCard stepIndex={STEP_INDEX} />
       <EOCAccordionWithModal courseEvaluation={courseEvaluation} courseReview={courseReview} />
diff --git a/frontend/pages/review/[reviewId]/4-submit.tsx b/frontend/pages/review/[reviewId]/4-submit.tsx
index ddbc3a4..12bef18 100644
--- a/frontend/pages/review/[reviewId]/4-submit.tsx
+++ b/frontend/pages/review/[reviewId]/4-submit.tsx
@@ -15,9 +15,14 @@ import useCourseReview from '@/components/hooks/useCourseReview';
 import useCourseEvaluation from '@/components/hooks/useCourseEvaluation';
 import StepWrapper from '@/components/Reviewer/Submit/StepWrapper';
 import ReviewSummarySubmissionContent from '@/components/Reviewer/Submit/ReviewSummarySubmissionContent';
+import usePageTitle from '@/components/hooks/usePageTitle';
+import EvaluationHeader from '@/components/Custom/EvaluationHeader';
 
 const Submit = () => {
   const { courseReview } = useCourseReview();
+
+  usePageTitle(`${courseReview.course_evaluation.unit_code} Review`);
+
   const { courseEvaluation } = useCourseEvaluation(courseReview.course_evaluation.id);
 
   const STEP_INDEX = 3;
@@ -75,6 +80,7 @@ const Submit = () => {
 
   return (
     <BodyCard>
+      <EvaluationHeader title={courseEvaluation.unit_code} />
       <ReviewProgress review={courseReview} />
       <AboutStepCard stepIndex={STEP_INDEX} />
       <ReviewSummarySubmissionContent
diff --git a/frontend/pages/review/[reviewId]/5-finish.tsx b/frontend/pages/review/[reviewId]/5-finish.tsx
index 9da61f4..407f5ff 100644
--- a/frontend/pages/review/[reviewId]/5-finish.tsx
+++ b/frontend/pages/review/[reviewId]/5-finish.tsx
@@ -5,15 +5,20 @@ import useCourseReview from '@/components/hooks/useCourseReview';
 import useCourseEvaluation from '@/components/hooks/useCourseEvaluation';
 import ReviewSummarySubmissionContent from '@/components/Reviewer/Submit/ReviewSummarySubmissionContent';
 import AboutStepCard from '@/components/Reviewer/AboutStepCard';
+import usePageTitle from '@/components/hooks/usePageTitle';
+import EvaluationHeader from '@/components/Custom/EvaluationHeader';
 
 const Finish = () => {
   const { courseReview } = useCourseReview(false);
   const { courseEvaluation } = useCourseEvaluation(courseReview.course_evaluation.id);
 
+  usePageTitle(`${courseEvaluation.unit_code} Review`);
+
   const allSteps = getReviewStepsWithState(courseReview);
 
   return (
     <BodyCard>
+      <EvaluationHeader title={courseEvaluation.unit_code} />
       <AboutStepCard
         title="5 - Finish"
         subheader="You have completed submission for this review. See below for your review. If there is something wrong here, please contact the coordinator of this course evaluation"