diff --git a/app/(modals)/grade.tsx b/app/(modals)/grade.tsx
index ae5e169f..ff0ae461 100644
--- a/app/(modals)/grade.tsx
+++ b/app/(modals)/grade.tsx
@@ -29,6 +29,29 @@ interface GradesModalProps {
   avgClass: number;
 }
 
+interface GradeBadgeProps {
+  icon: string;
+  label: string;
+  color: string;
+  theme: any;
+  is_outlined?: boolean;
+}
+
+const GradeBadge = ({ icon, label, color, theme, is_outlined = false }: GradeBadgeProps) => {
+  const backgroundColor = is_outlined ? "transparent" : adjust(color, theme.dark ? 0.3 : -0.3);
+  const textColor = is_outlined ? color : (colorCheck("#FFFFFF", [backgroundColor]) ? "#FFFFFF" : "#000000");
+  const borderStyle = is_outlined ? { borderWidth: 1, borderColor: color } : undefined;
+
+  return (
+    <Stack direction="horizontal" gap={8} backgroundColor={backgroundColor} vAlign="center" hAlign="center" padding={[12, 6]} radius={32} style={borderStyle}>
+      <Papicons size={20} name={icon} color={textColor} />
+      <Typography color={textColor} variant='body2'>
+        {label}
+      </Typography>
+    </Stack>
+  );
+};
+
 export default function GradesModal() {
   const { params } = useRoute();
   const theme = useTheme();
@@ -159,14 +182,33 @@ export default function GradesModal() {
             />
 
             {grade.studentScore?.value === grade.maxScore?.value && !grade.studentScore?.disabled &&
-              <Stack direction="horizontal" gap={8} backgroundColor={adjust(subjectInfo.color, theme.dark ? 0.3 : -0.3)} vAlign='center' hAlign='center' padding={[12, 6]} radius={32} key={"bestgrade:" + theme.dark ? "dark" : "light"}>
-                <Papicons size={20} name="crown" color={colorCheck("#FFFFFF", [adjust(subjectInfo.color, theme.dark ? 0.3 : -0.3)]) ? "#FFFFFF" : "#000000"} />
-                <Typography color={colorCheck("#FFFFFF", [adjust(subjectInfo.color, theme.dark ? 0.3 : -0.3)]) ? "#FFFFFF" : "#000000"} variant='body2'>
-                  {t("Modal_Grades_BestGrade")}
-                </Typography>
-              </Stack>
+              <GradeBadge
+                icon="crown"
+                label={t("Modal_Grades_BestGrade")}
+                color={subjectInfo.color}
+                theme={theme}
+                is_outlined={false}
+              />
+            }
+            {grade.optional &&
+              <GradeBadge
+                icon="info"
+                label={t("Modal_Grades_OptionalGrade")}
+                color={subjectInfo.color}
+                theme={theme}
+                is_outlined={true}
+              />
             }
 
+            {grade.bonus &&
+              <GradeBadge
+                icon="info"
+                label={t("Modal_Grades_BonusGrade")}
+                color={subjectInfo.color}
+                theme={theme}
+                is_outlined={true}
+              />
+            }
             <Stack
               card
               direction="horizontal"
@@ -213,4 +255,4 @@ export default function GradesModal() {
       />
     </>
   )
-}
\ No newline at end of file
+}
diff --git a/locales/en.json b/locales/en.json
index 74de33cc..f1b618a7 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -230,6 +230,8 @@
   "Profile_Cards_Title": "QR-code and cards",
   "Modal_Grades_Title": "Grade details",
   "Modal_Grades_BestGrade": "Best grade of your group",
+  "Modal_Grades_OptionalGrade": "Optional grade",
+  "Modal_Grades_BonusGrade": "Bonus grade",
   "Grades_Details_Title": "Details",
   "Grades_NormalizedGrade_Title": "Grade normalized to 20",
   "Grades_NormalizedGrade_Description": "Grade value converted to a scale of 20",
diff --git a/locales/fr.json b/locales/fr.json
index ec510df0..24be994e 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -276,6 +276,9 @@
   "Modal_Grades_Title": "Détail de la note",
   "Modal_Grades_BestGrade": "Meilleure note du groupe",
 
+  "Modal_Grades_OptionalGrade": "Note optionnelle",
+  "Modal_Grades_BonusGrade": "Note bonus",
+
   "Grades_Details_Title": "Détails",
   "Grades_NormalizedGrade_Title": "Note ramenée sur 20",
   "Grades_NormalizedGrade_Description": "Valeur de la note convertie sur une échelle de 20",