diff --git a/app/api/grade/route.ts b/app/api/grade/route.ts
index 4f7b41d..9897d38 100644
--- a/app/api/grade/route.ts
+++ b/app/api/grade/route.ts
@@ -1,25 +1,23 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
+import {NextResponse} from "next/server";
 
 import prisma from '@lib/prisma';
-
 interface IBody {
     key: string
     grade: number
 }
 
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-    const body = req.body as IBody
-    if (req.method === 'POST') {
-        // Process a POST request
-        await prisma.grade.findFirst({where: {key: body.key}}).then(async (grade) => {
-            if (grade) {
-                await prisma.grade.create({data: {test: 1, grade: body.grade, key: body.key}})
-                res.status(200).json({message: 'Grade updated', cookie: 'voted=true'})
-            } else {
-                res.status(404).json({message: 'Key not found'})
-            }
-        })
-    } else {
-        // Handle any other HTTP method
-    }
+export async function POST(req: Request){
+    const body = await req.json() as IBody
+    await prisma.grade.findFirst({where: {key: body.key}}).then(async (grade) => {
+        if (grade) {
+            await prisma.grade.create({data: {test: 1, grade: body.grade, key: body.key}})
+            return new NextResponse(
+                JSON.stringify({message: 'Grade updated', cookie: 'voted=true'}), {status: 200}
+            )
+        } else {
+            return new NextResponse(
+                JSON.stringify({message: 'Key not found'}), {status: 404}
+            )
+        }
+    })
 }
diff --git a/app/results.tsx b/app/results.tsx
new file mode 100644
index 0000000..55a1fde
--- /dev/null
+++ b/app/results.tsx
@@ -0,0 +1,53 @@
+"use server";
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    Tooltip,
+    PointElement,
+    LineElement,
+} from "chart.js";
+import { Line } from "react-chartjs-2";
+
+// Register ChartJS components using ChartJS.register
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Tooltip
+);
+
+import { PrismaClient } from '@prisma/client'
+
+const prisma = new PrismaClient()
+
+function getGrades() {
+    return prisma.grade.findMany()
+}
+
+
+const results = async () => {
+    const grades = await getGrades()
+    const gradesArray = grades.map(grade => grade.grade.toString())
+    const allGrades = ["1", "1,5", "2", "2,5", "3", "3,5", "4", "4,5", "5", "5,5", "6"]
+    const gradesCount = allGrades.map(grade => gradesArray.filter(g => g === grade).length)
+    console.log(grades)
+
+    return (
+        <div>
+            <Line
+                data={{
+                    labels: allGrades,
+                    datasets: [
+                        {
+                            data: gradesCount,
+                            backgroundColor: "purple",
+                        },
+                    ],
+                }}
+            />
+        </div>
+    );
+};
+export default results;
diff --git a/package-lock.json b/package-lock.json
index 0812eaa..8e06995 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,11 @@
       "version": "0.1.0",
       "dependencies": {
         "@prisma/client": "^5.6.0",
+        "chart.js": "^4.4.0",
         "next": "14.0.3",
         "prisma": "^5.6.0",
         "react": "^18",
+        "react-chartjs-2": "^5.2.0",
         "react-dom": "^18",
         "socket.io": "^4.7.2",
         "socket.io-client": "^4.7.2"
@@ -198,6 +200,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@next/env": {
       "version": "14.0.3",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.3.tgz",
@@ -1079,6 +1086,17 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.0.tgz",
+      "integrity": "sha512-vQEj6d+z0dcsKLlQvbKIMYFHd3t8W/7L2vfJIbYcfyPcRx92CsHqECpueN8qVGNlKyDcr5wBrYAYKnfu/9Q1hQ==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=7"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -3632,6 +3650,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-chartjs-2": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz",
+      "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
diff --git a/package.json b/package.json
index 234a5b6..91c9d40 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,11 @@
   },
   "dependencies": {
     "@prisma/client": "^5.6.0",
+    "chart.js": "^4.4.0",
     "next": "14.0.3",
     "prisma": "^5.6.0",
     "react": "^18",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18",
     "socket.io": "^4.7.2",
     "socket.io-client": "^4.7.2"