diff --git a/app/results/[id]/page.tsx b/app/results/[id]/page.tsx
index 021e298..f08e907 100644
--- a/app/results/[id]/page.tsx
+++ b/app/results/[id]/page.tsx
@@ -3,6 +3,7 @@ import { Chart } from '@components/custom/chart';
 import logo from '@images/logo.svg';
 import Image from 'next/image';
 import Prisma from '@lib/prisma';
+import ginger from '@images/ginger.png';
 
 interface data {
 	name: string;
@@ -12,13 +13,12 @@ interface data {
 export default async function Page({ params }: { params: { id: string } }) {
 	const teacherGrade = await Prisma.grade.findFirst({ where: { testId: parseInt(params.id), user: { isTeacher: true } } });
 
-	const grades = await Prisma.grade.findMany({where: {testId: parseInt(params.id), user: {isTeacher: false}}});
+	const grades = await Prisma.grade.findMany({ where: { testId: parseInt(params.id), user: { isTeacher: false } } });
 
 	const allGrades = ['1', '1.5', '2', '2.5', '3', '3.5', '4', '4.5', '5', '5.5', '6'];
 	let gradeOccurences = new Array(allGrades.length).fill(0);
 	const gradeList = grades.map((grade) => grade.grade);
 
-
 	for (let i = 0; i < gradeList.length; i++) {
 		gradeOccurences[allGrades.indexOf(gradeList[i].toString())]++;
 	}
@@ -35,9 +35,19 @@ export default async function Page({ params }: { params: { id: string } }) {
 		<div className={'p-4 md:p-12 w-full h-screen bg-black flex flex-col justify-between gap-y-4'}>
 			<Image src={logo} alt={'Logo'} width={100} height={200} className={'mx-auto w-full md:w-[400px]'} />
 			{teacherGrade && (
-				<div className={'flex flex-col gap-y-2'}>
-					<p className="text-white">Mme Tixhon :</p>
-					<h2 className={'text-4xl font-bold text-white'}>{teacherGrade.grade}</h2>
+				<div className={'flex justify-center relative w-full'}>
+					{/* <p className="text-white">Mme Tixhon :</p>
+					<h2 className={'text-4xl font-bold text-white'}>{teacherGrade.grade}</h2> */}
+					{/* <div className={'flex items-center bg-red-500 relative'}>
+						<Image src={ginger} alt={'Logo'} width={120} height={120} className={''} />
+						<h2 className={'text-3xl font-bold text-white absolute left-[60px]'}>{teacherGrade.grade}</h2>
+					</div> */}
+
+					{/* I want to have the image with a width of 120 and in the center I want to have the h2 containing the teacher's grade */}
+					<div className={'flex items-center text-center'}>
+						<Image src={ginger} alt={'Logo'} width={120} height={120} className={'inline-flex'} />
+						<h2 className={'text-4xl font-bold text-white absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]'}>{teacherGrade.grade}</h2>
+					</div>
 				</div>
 			)}
 			<Chart data={data} />
diff --git a/images/ginger.png b/images/ginger.png
new file mode 100644
index 0000000..fa765e3
Binary files /dev/null and b/images/ginger.png differ