diff --git a/app/DTOs/StudentData.php b/app/DTOs/StudentData.php
new file mode 100644
index 0000000..33eba4f
--- /dev/null
+++ b/app/DTOs/StudentData.php
@@ -0,0 +1,47 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\DTOs;
+
+use App\Models\Grade;
+use App\Models\GradeColumn;
+use App\Models\Student;
+use Illuminate\Support\Collection;
+
+readonly class StudentData
+{
+    public function __construct(
+        public string $student,
+        public Collection $grades,
+    ) {}
+
+    public static function fromModels(Student $student, Student $studentByIndex, Collection $gradeColumns): self
+    {
+        return new self(
+            student: $student->id === $studentByIndex->id ? $student->index_number : "",
+            grades: self::prepareGrades($student, $gradeColumns),
+        );
+    }
+
+    public static function prepareGrades(Student $student, Collection $gradeColumns): Collection
+    {
+        return $gradeColumns->map(function (GradeColumn $column) use ($student): array {
+            /** @var Grade $grade */
+            $grade = Grade::query()
+                ->where("grade_column_id", $column->id)
+                ->where("student_id", $student->id)
+                ->first();
+
+            return $grade
+                ? [
+                    "present" => $grade->status,
+                    "value" => $grade->value,
+                ]
+                : [
+                    "present" => null,
+                    "value" => null,
+                ];
+        });
+    }
+}
diff --git a/app/Http/Controllers/Dashboard/GradeController.php b/app/Http/Controllers/Dashboard/GradeController.php
index 1a0f125..1ddbc5c 100644
--- a/app/Http/Controllers/Dashboard/GradeController.php
+++ b/app/Http/Controllers/Dashboard/GradeController.php
@@ -67,12 +67,21 @@ public function storeGrade(UpdateGrade $request, CourseSemester $course, Group $
 
     public function updateGrade(UpdateGrade $request, CourseSemester $course, Group $group, GradeColumn $gradeColumn): RedirectResponse
     {
-        $gradeColumn->grades()
+        $grade = $gradeColumn->grades()
             ->where("student_id", $request->get("student_id"))
-            ->update($request->getData());
+            ->first();
 
-        return redirect()->back()
-            ->with("success", "Zaktualizowano ocenę");
+        if ($grade) {
+            $grade->update($request->getData());
+
+            return redirect()->back()
+                ->with("success", "Zaktualizowano ocenę");
+        }
+
+        $gradeColumn->grades()
+            ->create($request->getData());
+
+        return redirect()->back();
     }
 
     public function destroy(CourseSemester $course, Group $group, GradeColumn $gradeColumn): RedirectResponse
diff --git a/app/Http/Controllers/Public/GradeController.php b/app/Http/Controllers/Public/GradeController.php
new file mode 100644
index 0000000..f021e9e
--- /dev/null
+++ b/app/Http/Controllers/Public/GradeController.php
@@ -0,0 +1,75 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers\Public;
+
+use App\DTOs\StudentData;
+use App\Http\Controllers\Controller;
+use App\Models\CourseSemester;
+use App\Models\Group;
+use App\Models\Semester;
+use App\Models\Student;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Http\Request;
+use Inertia\Response;
+
+class GradeController extends Controller
+{
+    public function __invoke(Request $request, ?Semester $semester = null, ?CourseSemester $course = null, ?Group $group = null, ?string $index = null): Response
+    {
+        $courses = [];
+        $groups = [];
+        $gradeColumns = [];
+        $students = [];
+        $studentByIndex = null;
+
+        if ($semester) {
+            $courses = $semester
+                ->courses()
+                ->with("course", fn(BelongsTo $query): BelongsTo => $query->select(["name", "id"]))
+                ->get();
+        }
+
+        if ($course) {
+            $groups = $course
+                ->groups()
+                ->get(["name", "id"]);
+        }
+
+        if ($group && $index) {
+            $studentByIndex = $group->students()
+                ->where("index_number", $index)
+                ->first();
+
+            if ($studentByIndex?->exists()) {
+                $gradeColumns = $group
+                    ->gradeColumns()
+                    ->where("active", true)
+                    ->orderBy("priority")
+                    ->get();
+                $students = $group->students()
+                    ->whereNot("index_number", $index)
+                    ->inRandomOrder()
+                    ->take(8)
+                    ->get()
+                    ->push($studentByIndex)
+                    ->sortBy("index_number")
+                    ->map(fn(Student $student): StudentData => StudentData::fromModels($student, $studentByIndex, $gradeColumns));
+            }
+        }
+
+        return inertia("Public/Grade", [
+            "semesters" => Semester::query()->get(["name", "id"]),
+            "semester" => $semester,
+            "courses" => $courses,
+            "course" => $course,
+            "groups" => $groups,
+            "group" => $group,
+            "index" => $index ?? "",
+            "gradeColumns" => $gradeColumns,
+            "students" => $students,
+            "indexExists" => $studentByIndex?->exists(),
+        ]);
+    }
+}
diff --git a/app/Http/Requests/UpdateGrade.php b/app/Http/Requests/UpdateGrade.php
index a03c12e..ab451dc 100644
--- a/app/Http/Requests/UpdateGrade.php
+++ b/app/Http/Requests/UpdateGrade.php
@@ -20,7 +20,7 @@ public function getData(): array
     {
         return [
             "student_id" => $this->get("student_id"),
-            "status" => $this->boolean("status"),
+            "status" => $this->get("status") === null ? null : $this->boolean("status"),
             "value" => $this->get("value"),
         ];
     }
diff --git a/app/Models/Grade.php b/app/Models/Grade.php
index a09ec80..9c331a3 100644
--- a/app/Models/Grade.php
+++ b/app/Models/Grade.php
@@ -4,6 +4,7 @@
 
 namespace App\Models;
 
+use App\Observers\GradeObserver;
 use Carbon\Carbon;
 use Illuminate\Database\Eloquent\Concerns\HasUlids;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
@@ -40,4 +41,9 @@ public function student(): BelongsTo
     {
         return $this->belongsTo(Student::class);
     }
+
+    protected static function booted(): void
+    {
+        self::observe(GradeObserver::class);
+    }
 }
diff --git a/app/Observers/GradeObserver.php b/app/Observers/GradeObserver.php
new file mode 100644
index 0000000..9094d7a
--- /dev/null
+++ b/app/Observers/GradeObserver.php
@@ -0,0 +1,17 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Observers;
+
+use App\Models\Grade;
+
+class GradeObserver
+{
+    public function updating(Grade $grade): void
+    {
+        if ($grade->status === true && $grade->getOriginal("status") === false) {
+            $grade->status = null;
+        }
+    }
+}
diff --git a/composer.lock b/composer.lock
index bc9365a..037f525 100644
--- a/composer.lock
+++ b/composer.lock
@@ -7535,16 +7535,16 @@
         },
         {
             "name": "phpunit/phpunit",
-            "version": "11.2.6",
+            "version": "11.2.7",
             "source": {
                 "type": "git",
                 "url": "https://github.com/sebastianbergmann/phpunit.git",
-                "reference": "1dc0fedac703199e8704de085e47dd46bac0dde4"
+                "reference": "15c7e69dec4a8f246840859e6b430bd2abeb5039"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/sebastianbergmann/phpunit/zipball/1dc0fedac703199e8704de085e47dd46bac0dde4",
-                "reference": "1dc0fedac703199e8704de085e47dd46bac0dde4",
+                "url": "https://api.github.com/repos/sebastianbergmann/phpunit/zipball/15c7e69dec4a8f246840859e6b430bd2abeb5039",
+                "reference": "15c7e69dec4a8f246840859e6b430bd2abeb5039",
                 "shasum": ""
             },
             "require": {
@@ -7554,25 +7554,25 @@
                 "ext-mbstring": "*",
                 "ext-xml": "*",
                 "ext-xmlwriter": "*",
-                "myclabs/deep-copy": "^1.10.1",
-                "phar-io/manifest": "^2.0.3",
-                "phar-io/version": "^3.0.2",
+                "myclabs/deep-copy": "^1.12.0",
+                "phar-io/manifest": "^2.0.4",
+                "phar-io/version": "^3.2.1",
                 "php": ">=8.2",
-                "phpunit/php-code-coverage": "^11.0",
-                "phpunit/php-file-iterator": "^5.0",
-                "phpunit/php-invoker": "^5.0",
-                "phpunit/php-text-template": "^4.0",
-                "phpunit/php-timer": "^7.0",
-                "sebastian/cli-parser": "^3.0",
-                "sebastian/code-unit": "^3.0",
-                "sebastian/comparator": "^6.0",
-                "sebastian/diff": "^6.0",
-                "sebastian/environment": "^7.0",
-                "sebastian/exporter": "^6.1.2",
-                "sebastian/global-state": "^7.0",
-                "sebastian/object-enumerator": "^6.0",
-                "sebastian/type": "^5.0",
-                "sebastian/version": "^5.0"
+                "phpunit/php-code-coverage": "^11.0.5",
+                "phpunit/php-file-iterator": "^5.0.1",
+                "phpunit/php-invoker": "^5.0.1",
+                "phpunit/php-text-template": "^4.0.1",
+                "phpunit/php-timer": "^7.0.1",
+                "sebastian/cli-parser": "^3.0.2",
+                "sebastian/code-unit": "^3.0.1",
+                "sebastian/comparator": "^6.0.1",
+                "sebastian/diff": "^6.0.2",
+                "sebastian/environment": "^7.2.0",
+                "sebastian/exporter": "^6.1.3",
+                "sebastian/global-state": "^7.0.2",
+                "sebastian/object-enumerator": "^6.0.1",
+                "sebastian/type": "^5.0.1",
+                "sebastian/version": "^5.0.1"
             },
             "suggest": {
                 "ext-soap": "To be able to generate mocks based on WSDL files"
@@ -7615,7 +7615,7 @@
             "support": {
                 "issues": "https://github.com/sebastianbergmann/phpunit/issues",
                 "security": "https://github.com/sebastianbergmann/phpunit/security/policy",
-                "source": "https://github.com/sebastianbergmann/phpunit/tree/11.2.6"
+                "source": "https://github.com/sebastianbergmann/phpunit/tree/11.2.7"
             },
             "funding": [
                 {
@@ -7631,7 +7631,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-07-03T05:51:49+00:00"
+            "time": "2024-07-10T11:50:09+00:00"
         },
         {
             "name": "react/cache",
diff --git a/database/factories/GradeFactory.php b/database/factories/GradeFactory.php
index 110f593..6c5d477 100644
--- a/database/factories/GradeFactory.php
+++ b/database/factories/GradeFactory.php
@@ -13,7 +13,7 @@ class GradeFactory extends Factory
     public function definition(): array
     {
         return [
-            "value" => fake()->numberBetween(2, 5),
+            "value" => fake()->boolean ? fake()->numberBetween(2, 5) : null,
             "status" => fake()->boolean,
             "student_id" => Student::factory(),
             "grade_column_id" => GradeColumn::factory(),
diff --git a/database/factories/SemesterFactory.php b/database/factories/SemesterFactory.php
index c5c3312..62348aa 100644
--- a/database/factories/SemesterFactory.php
+++ b/database/factories/SemesterFactory.php
@@ -11,7 +11,7 @@ class SemesterFactory extends Factory
     public function definition(): array
     {
         return [
-            "name" => "Semestr" . fake()->numberBetween(1, 7),
+            "name" => "Semestr " . fake()->numberBetween(1, 7),
             "active" => fake()->boolean,
         ];
     }
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 2d3fd79..4552c2e 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -4,9 +4,14 @@
 
 namespace Database\Seeders;
 
+use App\Models\CourseSemester;
+use App\Models\Grade;
+use App\Models\GradeColumn;
+use App\Models\Group;
 use App\Models\Section;
 use App\Models\SectionSettings;
 use App\Models\Setting;
+use App\Models\Student;
 use App\Models\User;
 use Illuminate\Database\Seeder;
 
@@ -24,5 +29,35 @@ public function run(): void
             "counters_enabled" => true,
             "contact_enabled" => true,
         ]);
+        $this->seedGrades();
+    }
+
+    protected function seedGrades(): void
+    {
+        $courses = CourseSemester::factory(5)->create();
+        $students = Student::factory(100)->create();
+
+        foreach ($courses as $course) {
+            $groups = Group::factory(fake()->numberBetween(2, 6))->create([
+                "course_semester_id" => $course->id,
+            ]);
+
+            /** @var Group $group */
+            foreach ($groups as $group) {
+                $group->students()->sync($students->random(15));
+                $columns = GradeColumn::factory(15)->create([
+                    "group_id" => $group->id,
+                ]);
+
+                foreach ($group->students as $student) {
+                    foreach ($columns as $column) {
+                        Grade::factory()->create([
+                            "grade_column_id" => $column->id,
+                            "student_id" => $student->id,
+                        ]);
+                    }
+                }
+            }
+        }
     }
 }
diff --git a/resources/js/Pages/Dashboard/CourseSemester/Grade/Index.vue b/resources/js/Pages/Dashboard/CourseSemester/Grade/Index.vue
index d4b4692..5197bcb 100644
--- a/resources/js/Pages/Dashboard/CourseSemester/Grade/Index.vue
+++ b/resources/js/Pages/Dashboard/CourseSemester/Grade/Index.vue
@@ -30,7 +30,6 @@ const props = defineProps({
   search: String,
   total: Number,
 })
-const showName = ref(false)
 const showModal = ref(false)
 const showEditForm = ref(false)
 const showCreateForm = ref(false)
@@ -71,10 +70,11 @@ function updateGrade(gradeColumnId, studentId, value, status) {
   })
 }
 
-function createGrade(gradeColumnId, studentId, status) {
+function createGrade(gradeColumnId, studentId, status, value) {
   Inertia.post(`/dashboard/semester-courses/${props.course.data.id}/groups/${props.group.id}/grades/${gradeColumnId}/store`, {
     status: status,
     student_id: studentId,
+    value: value,
   }, {
     preserveScroll: true,
   })
@@ -221,9 +221,11 @@ watch(searchForm, debounce(() => {
           </template>
           <template #body>
             <TableRow v-for="student in students.data" :key="student.id">
-              <TableCell class="h-[70px] w-[120px] min-w-[120px] cursor-pointer border-2" @click="[showName = !showName]">
-                <span v-if="!showName">{{ student.index_number }}</span>
-                <span v-else>{{ student.first_name }} {{ student.surname }}</span>
+              <TableCell class="h-[70px] w-[120px] min-w-[120px] cursor-pointer flex-row border-2">
+                <div class="font-bold">
+                  {{ student.first_name }} {{ student.surname }}
+                </div>
+                <div>({{ student.index_number }})</div>
               </TableCell>
               <GradeCell v-for="column in gradeColumns" :key="column.id"
                          :grade="column.grades.find(obj => obj.student_id === student.id)" :grade-column="column"
diff --git a/resources/js/Pages/Public/Grade.vue b/resources/js/Pages/Public/Grade.vue
new file mode 100644
index 0000000..90772b8
--- /dev/null
+++ b/resources/js/Pages/Public/Grade.vue
@@ -0,0 +1,191 @@
+<script setup>
+import PublicLayout from '@/Layouts/PublicLayout.vue'
+import BackgroundGrid from '@/Components/BackgroundGrid.vue'
+import SectionHeader from '@/Components/SectionHeader.vue'
+import { Link } from '@inertiajs/inertia-vue3'
+import SubmitButton from '@/Shared/Components/Buttons/SubmitButton.vue'
+import TableWrapper from '@/Shared/Components/Table/TableWrapper.vue'
+import TableHeader from '@/Shared/Components/Table/TableHeader.vue'
+import TableRow from '@/Shared/Components/Table/TableRow.vue'
+import TableCell from '@/Shared/Components/Table/TableCell.vue'
+import { Inertia } from '@inertiajs/inertia'
+import { ExclamationCircleIcon, MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
+import { ref } from 'vue'
+
+const props = defineProps({
+  title: String,
+  semesters: Array,
+  semester: Object,
+  courses: Array,
+  course: Object,
+  groups: Array,
+  group: Object,
+  index: String,
+  gradeColumns: Array,
+  students: Array,
+  indexExists: Boolean,
+})
+
+const searchIndex = ref(props.index)
+
+function getIndex() {
+  Inertia.get(`/oceny/${props.semester.id}/${props.course.id}/${props.group.id}/${searchIndex.value}`, {}, {
+    preserveScroll: true,
+  })
+}
+</script>
+
+<template>
+  <PublicLayout>
+    <div class="relative isolate bg-gradient-to-r from-gray-50 to-gray-100 py-24 sm:py-32">
+      <BackgroundGrid mask-direction="left" />
+      <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <SectionHeader class="max-w-full">
+          <template #header>
+            Formularz dostępu do ocen
+          </template>
+          <template #subheader>
+            Wybierz odpowiedni semestr, kurs oraz grupę, a następnie wpisz swój numer indeksu, aby uzyskać arkusz ocen i
+            obecności
+          </template>
+        </SectionHeader>
+        <div class="mt-5">
+          <table>
+            <tbody>
+              <tr class="w-1/2">
+                <td
+                  class="block border-t-2 border-gray-200 pl-5 pt-5 sm:table-cell sm:border-b-2 sm:border-r-2 sm:border-t-0 sm:p-5"
+                >
+                  Wybierz semestr:
+                </td>
+                <td class="block border-b-2 border-gray-200 px-5 pb-5 sm:table-cell sm:p-5">
+                  <div class="flex flex-wrap">
+                    <Link v-for="item in semesters" :key="item.id"
+                          :class="[item.id === semester?.id ? 'border-blue-900 text-blue-900' : '']"
+                          :href="`/oceny/${item.id}`"
+                          class="mr-5 mt-4 border-2 px-5 py-3"
+                    >
+                      {{ item.name }}
+                    </Link>
+                  </div>
+                </td>
+              </tr>
+              <tr v-if="semester">
+                <td class="block border-gray-200 pl-5 pt-5 sm:table-cell sm:border-b-2 sm:border-r-2 sm:p-5">
+                  Wybierz kurs:
+                </td>
+                <td class="block border-b-2 border-gray-200 px-5 pb-5 sm:table-cell sm:p-5">
+                  <div class="flex flex-wrap">
+                    <Link v-for="item in courses" :key="item.id"
+                          :class="[item.id === course?.id ? 'border-blue-900 text-blue-900' : '']"
+                          :href="`/oceny/${semester.id}/${item.id}`"
+                          class="mr-5 mt-4 border-2 px-5 py-3"
+                    >
+                      {{ item.course.name }}
+                    </Link>
+                  </div>
+                </td>
+              </tr>
+              <tr v-if="course">
+                <td class="block border-gray-200 pl-5 pt-5 sm:table-cell sm:border-b-2 sm:border-r-2 sm:p-5">
+                  Wybierz grupę:
+                </td>
+                <td class="block border-b-2 border-gray-200 px-5 pb-5 sm:table-cell sm:p-5">
+                  <div class="flex flex-wrap">
+                    <Link v-for="item in groups" :key="item.id"
+                          :class="[item.id === group?.id ? 'border-blue-900 text-blue-900' : '']"
+                          :href="`/oceny/${semester.id}/${course.id}/${item.id}`"
+                          class="mr-5 mt-4 border-2 px-5 py-3"
+                    >
+                      {{ item.name }}
+                    </Link>
+                  </div>
+                </td>
+              </tr>
+              <tr v-if="group">
+                <td class="block border-gray-200 pl-5 pt-5 sm:table-cell sm:border-b-2 sm:border-r-2 sm:p-5">
+                  Wybierz numer indeksu:
+                </td>
+                <td class="block border-b-2 border-gray-200 px-5 pb-5 pt-2 sm:table-cell sm:p-5">
+                  <div class="flex">
+                    <input v-model="searchIndex" autocomplete="off"
+                           class="mr-3 block w-32 border-2 border-gray-200 px-5 py-3 opacity-75 focus:!border-blue-900 focus:!text-blue-900 focus:!ring-0 sm:w-48"
+                    >
+                    <SubmitButton class="min-h-max" @click="getIndex">
+                      <MagnifyingGlassIcon class="size-6" />
+                    </SubmitButton>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div v-if="index && indexExists" class="mt-5">
+            <h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">
+              Arkusz ocen i obecności
+            </h3>
+            <p class="mt-1 text-lg leading-8 text-gray-600">
+              Numery indeksów innych studentów są zaciemnione z prawnych względów
+            </p>
+            <TableWrapper class="mt-10">
+              <template #header>
+                <TableHeader>
+                  student
+                </TableHeader>
+                <TableHeader v-for="column in gradeColumns" :key="column.id"
+                             class="min-w-[50px] border-2 border-solid text-center"
+                >
+                  {{ column.name }}
+                </TableHeader>
+              </template>
+              <template #body>
+                <TableRow v-for="student in students" :key="student">
+                  <TableCell class="size-[50px] min-w-[50px] border-2 text-center font-bold">
+                    {{ student.student }}
+                  </TableCell>
+                  <TableCell v-for="grade in student.grades" :key="grade"
+                             :class="{'bg-lime-200': grade.present === true, 'bg-rose-300': grade.present === false}"
+                             class="border-2 text-center font-bold text-gray-900"
+                  >
+                    {{ grade.value }}
+                  </TableCell>
+                </TableRow>
+              </template>
+            </TableWrapper>
+            <div class="mt-4">
+              <h5 class="text-xl font-bold tracking-tight text-gray-900">
+                Legenda:
+              </h5>
+              <div class="flex flex-col gap-5 sm:flex-row">
+                <div class="mt-3 flex items-center gap-2">
+                  <span class="size-8 bg-lime-300" />
+                  <p>student obecny lub ocena pozytywna</p>
+                </div>
+                <div class="mt-3 flex items-center gap-2">
+                  <span class="size-8 bg-red-300" />
+                  <p>student nieobecny lub ocena niedostateczna</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else-if="index" class="mt-5 rounded-md bg-red-50 p-4">
+            <div class="flex items-center">
+              <div class="shrink-0">
+                <ExclamationCircleIcon class="size-14 text-red-400" />
+              </div>
+              <div class="ml-3">
+                <h3 class="text-sm font-medium text-red-800">
+                  Niestety nic nie znaleziono.
+                </h3>
+                <p class="mt-2 text-sm text-red-700">
+                  Dla podanej kombinacji identyfikatorów semestru, kursu i numeru indeksu nie odnaleziono żadnych
+                  danych. Sprawdź poprawność podanych informacji. Jeżeli semestr dopiero się rozpoczął, może po prostu
+                  jeszcze niczego tu nie ma.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </PublicLayout>
+</template>
diff --git a/resources/js/Shared/Components/GradeCell.vue b/resources/js/Shared/Components/GradeCell.vue
index c941f18..11b25b5 100644
--- a/resources/js/Shared/Components/GradeCell.vue
+++ b/resources/js/Shared/Components/GradeCell.vue
@@ -1,5 +1,6 @@
 <script setup>
 import TableCell from './Table/TableCell.vue'
+import { useForm } from '@inertiajs/inertia-vue3'
 
 const props = defineProps({
   gradeColumn: Object,
@@ -8,23 +9,10 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['createGrade', 'updateGrade', 'updateValue'])
-let clicks = 0
-let timeout = null
 
-function createGradeOnClick() {
-  clicks++
-
-  if (clicks === 1) {
-    timeout = setTimeout(() => {
-      emit('createGrade', props.gradeColumn.id, props.student.id, true)
-      clicks = 0
-    }, 200)
-  } else {
-    clearTimeout(timeout)
-    emit('createGrade', props.gradeColumn.id, props.student.id, false)
-    clicks = 0
-  }
-}
+const gradeInput = useForm({
+  value: props.grade?.value || '',
+})
 </script>
 
 <template>
@@ -32,15 +20,23 @@ function createGradeOnClick() {
     v-if="grade"
     :class="[grade?.status
       ? 'bg-lime-200'
-      : grade ? 'bg-rose-300' :'bg-white']"
-    @dblclick="emit('updateGrade',gradeColumn.id, student.id, grade.value, !grade.status)"
+      : grade?.status !== null ? 'bg-rose-300' : 'bg-white']"
+    @dblclick="emit('updateGrade', gradeColumn.id, student.id, inputVal, !grade.status)"
   >
     <input
-      :class="[grade.status? 'bg-lime-200' : 'bg-rose-300']"
-      :value="grade.value"
+      v-model="gradeInput.value"
+      :class="[grade?.status
+        ? 'bg-lime-200'
+        : grade?.status !== null ? 'bg-rose-300' : 'bg-white']"
+      class="size-full cursor-pointer border-0 p-0 text-center font-bold text-gray-900 shadow-none ring-0 focus:border-0 focus:ring-0"
+      @change="emit('updateGrade', gradeColumn.id, student.id, gradeInput.value, grade.status)"
+    >
+  </TableCell>
+  <TableCell v-else class="bg-white" @dblclick="emit('updateGrade', props.gradeColumn.id, props.student.id, true, gradeInput.value)">
+    <input
+      v-model="gradeInput.value"
       class="size-full cursor-pointer border-0 p-0 text-center font-bold text-gray-900 shadow-none ring-0 focus:border-0 focus:ring-0"
-      @change="emit('updateGrade',gradeColumn.id, student.id, $event.target.value, grade.status)"
+      @change="emit('createGrade', gradeColumn.id, student.id, null, gradeInput.value)"
     >
   </TableCell>
-  <TableCell v-else class="bg-white" @click="createGradeOnClick" />
 </template>
diff --git a/routes/web.php b/routes/web.php
index c21b994..907df0e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -19,6 +19,7 @@
 use App\Http\Controllers\Dashboard\SemesterController;
 use App\Http\Controllers\Dashboard\SettingController;
 use App\Http\Controllers\Dashboard\StudentController;
+use App\Http\Controllers\Public\GradeController as PublicGradeController;
 use App\Http\Controllers\Public\HomeController;
 use App\Http\Controllers\Public\LoginController;
 use App\Http\Controllers\Public\NewsController;
@@ -26,6 +27,7 @@
 
 Route::get("/", HomeController::class)->name("main");
 Route::get("/aktualnosci", NewsController::class);
+Route::get("/oceny/{semester?}/{course?}/{group?}/{index?}", PublicGradeController::class);
 
 Route::middleware("guest")->group(function (): void {
     Route::get("/login", [LoginController::class, "create"])->name("login");
diff --git a/tests/Feature/GradePageTest.php b/tests/Feature/GradePageTest.php
new file mode 100644
index 0000000..97c390d
--- /dev/null
+++ b/tests/Feature/GradePageTest.php
@@ -0,0 +1,175 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tests\Feature;
+
+use App\Models\CourseSemester;
+use App\Models\Grade;
+use App\Models\GradeColumn;
+use App\Models\Group;
+use App\Models\SectionSettings;
+use App\Models\Setting;
+use App\Models\Student;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Inertia\Testing\AssertableInertia as Assert;
+use Tests\TestCase;
+
+class GradePageTest extends TestCase
+{
+    use RefreshDatabase;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        Setting::factory()->create();
+        SectionSettings::factory()->create();
+        $this->course = CourseSemester::factory()->create();
+        $this->student = Student::factory()->create();
+        $this->group = Group::factory()->create([
+            "course_semester_id" => $this->course->id,
+        ]);
+        $this->group->students()->sync($this->student);
+        $column = GradeColumn::factory()->create([
+            "group_id" => $this->group->id,
+            "active" => true,
+        ]);
+        Grade::factory()->create([
+            "grade_column_id" => $column->id,
+            "student_id" => $this->student->id,
+        ]);
+    }
+
+    public function testTheGradePageReturnsSuccessfulResponse(): void
+    {
+        $this->get("/oceny")->assertStatus(200);
+    }
+
+    public function testOnTheGradePageCanChooseSemester(): void
+    {
+        $this->get("/oceny")
+            ->assertStatus(200)
+            ->assertInertia(
+                fn(Assert $page): Assert => $page
+                    ->component("Public/Grade")
+                    ->has("semesters", 1)
+                    ->where("semester", null),
+            );
+
+        $this->get("/oceny/{$this->course->semester_id}")
+            ->assertStatus(200)
+            ->assertInertia(
+                fn(Assert $page): Assert => $page
+                    ->component("Public/Grade")
+                    ->has("semesters", 1)
+                    ->where("semester.id", $this->course->semester_id),
+            );
+    }
+
+    public function testOnTheGradePageCanChooseCourse(): void
+    {
+        $this->get("/oceny/{$this->course->semester_id}")
+            ->assertStatus(200)
+            ->assertInertia(
+                fn(Assert $page): Assert => $page
+                    ->component("Public/Grade")
+                    ->has("semesters", 1)
+                    ->where("semester.id", $this->course->semester_id)
+                    ->has("courses", 1)
+                    ->where("course", null),
+            );
+
+        $this->get("/oceny/{$this->course->semester_id}/{$this->course->id}")
+            ->assertStatus(200)
+            ->assertInertia(
+                fn(Assert $page): Assert => $page
+                    ->component("Public/Grade")
+                    ->has("semesters", 1)
+                    ->where("semester.id", $this->course->semester_id)
+                    ->has("courses", 1)
+                    ->where("course.id", $this->course->id),
+            );
+    }
+
+    public function testOnTheGradePageCanChooseGroup(): void
+    {
+        $this->get("/oceny/{$this->course->semester_id}/{$this->course->id}")
+            ->assertStatus(200)
+            ->assertInertia(
+                fn(Assert $page): Assert => $page
+                    ->component("Public/Grade")
+                    ->has("semesters", 1)
+                    ->where("semester.id", $this->course->semester_id)
+                    ->has("courses", 1)
+                    ->where("course.id", $this->course->id)
+                    ->has("groups", 1)
+                    ->where("group", null),
+            );
+
+        $this->get("/oceny/{$this->course->semester_id}/{$this->course->id}/{$this->group->id}")
+            ->assertStatus(200)
+            ->assertInertia(
+                fn(Assert $page): Assert => $page
+                    ->component("Public/Grade")
+                    ->has("semesters", 1)
+                    ->where("semester.id", $this->course->semester_id)
+                    ->has("courses", 1)
+                    ->where("course.id", $this->course->id)
+                    ->has("groups", 1)
+                    ->where("group.id", $this->group->id),
+            );
+    }
+
+    public function testOnTheGradePageCanSeeGradesAfterFillIndexNumber(): void
+    {
+        $this->get("/oceny/{$this->course->semester_id}/{$this->course->id}/{$this->group->id}")
+            ->assertStatus(200)
+            ->assertInertia(
+                fn(Assert $page): Assert => $page
+                    ->component("Public/Grade")
+                    ->has("semesters", 1)
+                    ->where("semester.id", $this->course->semester_id)
+                    ->has("courses", 1)
+                    ->where("course.id", $this->course->id)
+                    ->has("groups", 1)
+                    ->where("group.id", $this->group->id)
+                    ->where("index", ""),
+            );
+
+        $this->get("/oceny/{$this->course->semester_id}/{$this->course->id}/{$this->group->id}/{$this->student->index_number}")
+            ->assertStatus(200)
+            ->assertInertia(
+                fn(Assert $page): Assert => $page
+                    ->component("Public/Grade")
+                    ->has("semesters", 1)
+                    ->where("semester.id", $this->course->semester_id)
+                    ->has("courses", 1)
+                    ->where("course.id", $this->course->id)
+                    ->has("groups", 1)
+                    ->where("group.id", $this->group->id)
+                    ->where("index", "{$this->student->index_number}")
+                    ->has("gradeColumns", 1)
+                    ->has("students", 1),
+            );
+    }
+
+    public function testOnTheGradePageCannotSeeGradesWithInvalidIndexNumber(): void
+    {
+        $this->get("/oceny/{$this->course->semester_id}/{$this->course->id}/{$this->group->id}/invalid")
+            ->assertStatus(200)
+            ->assertInertia(
+                fn(Assert $page): Assert => $page
+                    ->component("Public/Grade")
+                    ->has("semesters", 1)
+                    ->where("semester.id", $this->course->semester_id)
+                    ->has("courses", 1)
+                    ->where("course.id", $this->course->id)
+                    ->has("groups", 1)
+                    ->where("group.id", $this->group->id)
+                    ->where("index", "invalid")
+                    ->has("gradeColumns", 0)
+                    ->has("students", 0),
+            );
+    }
+}