diff --git a/src/components/Graph/Graph.tsx b/src/components/Graph/Graph.tsx
index a343c7c..d700927 100644
--- a/src/components/Graph/Graph.tsx
+++ b/src/components/Graph/Graph.tsx
@@ -92,15 +92,17 @@ interface gradeValue {
 }
 
 // bar colors if there is only one search query
-const letterGradeBarColor = (opacity: number) =>
-  `rgba(54, 162, 235, ${opacity})`;
+const letterGradeBarColor = (opacity: number) => `rgba(54, 162, 235, ${opacity})`;
 const pnpBarColor = (opacity: number) => `rgba(255, 206, 86, ${opacity})`;
+
 const chartColorsSingleDark = Array(5)
   .fill(letterGradeBarColor(0.9))
   .concat(Array(2).fill(pnpBarColor(0.9)));
+
 const chartColorsSingleLight = Array(5)
   .fill(letterGradeBarColor(0.7))
   .concat(Array(2).fill(pnpBarColor(0.7)));
+
 const chartColorsMultipleDark = [
   "rgba(34, 87, 122, 0.9)",
   "rgba(56, 163, 165, 0.9)",
@@ -108,6 +110,7 @@ const chartColorsMultipleDark = [
   "rgba(128, 237, 153, 0.9)",
   "rgba(199, 249, 204, 0.9)",
 ];
+
 const chartColorsMultipleLight = [
   "rgba(34, 87, 122, 0.7)",
   "rgba(56, 163, 165, 0.7)",
@@ -121,6 +124,7 @@ const Graph = () => {
 
   const [queryIdsValue, setQueryIdsValue] = useState<number[]>([]);
   const [gradeValues, setGradeValues] = useState<gradeValue[]>([]);
+  const [gradeValuesRaw, setGradeValuesRaw] = useState<gradeValue[]>([]);
 
   const { colorScheme } = useContext(ColorSchemeContext);
 
@@ -160,14 +164,13 @@ const Graph = () => {
     });
     Promise.all(graphQueries).then((values) => {
       const newGradeValues: gradeValue[] = [
-        { id: "A" },
-        { id: "B" },
-        { id: "C" },
-        { id: "D" },
-        { id: "F" },
-        { id: "P" },
-        { id: "NP" },
+        { id: "A" }, { id: "B" }, { id: "C" }, { id: "D" }, { id: "F" }, { id: "P" }, { id: "NP" },
       ];
+
+      const newGradeValuesRaw: gradeValue[] = [
+        { id: "A" }, { id: "B" }, { id: "C" }, { id: "D" }, { id: "F" }, { id: "P" }, { id: "NP" },
+      ];
+
       values.map(({ data }, i) => {
         const gradeValue: number[] = [];
         const gradesAggregate = data.grades.aggregate;
@@ -179,20 +182,24 @@ const Graph = () => {
           gradesAggregate.sum_grade_f_count +
           gradesAggregate.sum_grade_p_count +
           gradesAggregate.sum_grade_np_count;
-        gradeValue.push(data.grades.aggregate.sum_grade_a_count / total);
-        gradeValue.push(data.grades.aggregate.sum_grade_b_count / total);
-        gradeValue.push(data.grades.aggregate.sum_grade_c_count / total);
-        gradeValue.push(data.grades.aggregate.sum_grade_d_count / total);
-        gradeValue.push(data.grades.aggregate.sum_grade_f_count / total);
-        gradeValue.push(data.grades.aggregate.sum_grade_p_count / total);
-        gradeValue.push(data.grades.aggregate.sum_grade_np_count / total);
+        gradeValue.push(data.grades.aggregate.sum_grade_a_count);
+        gradeValue.push(data.grades.aggregate.sum_grade_b_count);
+        gradeValue.push(data.grades.aggregate.sum_grade_c_count);
+        gradeValue.push(data.grades.aggregate.sum_grade_d_count);
+        gradeValue.push(data.grades.aggregate.sum_grade_f_count);
+        gradeValue.push(data.grades.aggregate.sum_grade_p_count);
+        gradeValue.push(data.grades.aggregate.sum_grade_np_count);
         // This is probably a little hacky? but it works for now.
         // Basically it relies on the fact that the order of the results are the same as the ids, which should always be the case because they're both derived from the query context.
         newGradeValues.forEach((newGradeValue, j) => {
+          newGradeValue[queryIdsValue[i]] = gradeValue[j] / total;
+        });
+        newGradeValuesRaw.forEach((newGradeValue, j) => {
           newGradeValue[queryIdsValue[i]] = gradeValue[j];
         });
       });
       setGradeValues(newGradeValues);
+      setGradeValuesRaw(newGradeValuesRaw);
     });
   }, [queryIdsValue, queries]);
 
@@ -232,7 +239,20 @@ const Graph = () => {
       padding={0.25}
       innerPadding={6}
       borderRadius={4}
-      tooltipLabel={(data) => `${data.indexValue}`}
+      tooltip={({id, value, index, indexValue, color}) => (
+          <div className="flex flex-col items-center shadow rounded-sm p-1.5 text-xs text-black bg-neutral-50 dark:text-white dark:bg-neutral-900">
+            <div className="flex flex-row items-center">
+              <div
+                  className="h-[11px] w-[11px] mr-1"
+                  style={{ backgroundColor: color }}
+              />
+              <span className="pr-1"><strong>{indexValue}</strong></span>
+            </div>
+            <div className="border-b-[1px] w-full mb-0.5" />
+            <span>{(value*100).toFixed(2)}%</span>
+            <span>{gradeValuesRaw[index][id]} Students</span>
+          </div>
+      )}
       {...props}
     />
   );