diff --git a/package-lock.json b/package-lock.json
index 274525f..14da6d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,8 +14,7 @@
                 "@fortawesome/free-brands-svg-icons": "^6.6.0",
                 "@fortawesome/free-solid-svg-icons": "^6.6.0",
                 "@fortawesome/vue-fontawesome": "^3.0.8",
-                "@inertiajs/inertia": "^0.11.1",
-                "@inertiajs/inertia-vue3": "^0.6.0",
+                "@inertiajs/vue3": "^1.2.0",
                 "@vitejs/plugin-vue": "^5.1.4",
                 "@vueuse/core": "^11.1.0",
                 "nprogress": "^0.2.0",
@@ -506,37 +505,30 @@
                 "vue": ">= 3.0.0 < 4"
             }
         },
-        "node_modules/@inertiajs/inertia": {
-            "version": "0.11.1",
-            "resolved": "https://registry.npmjs.org/@inertiajs/inertia/-/inertia-0.11.1.tgz",
-            "integrity": "sha512-btmV53c54oW4Z9XF0YyTdIUnM7ue0ONy3/KJOz6J1C5CYIwimiKfDMpz8ZbGJuxS+SPdOlNsqj2ZhlHslpJRZg==",
+        "node_modules/@inertiajs/core": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/@inertiajs/core/-/core-1.2.0.tgz",
+            "integrity": "sha512-6U0gqCPbGGGMcLoDm+ckKipc5gptZMmfVFfPGdO7vlO7yipWf1RD+TKkcZGJklFvfgFMKwK2VPw8GAv1OctuQA==",
             "dependencies": {
-                "axios": "^0.21.1",
+                "axios": "^1.6.0",
                 "deepmerge": "^4.0.0",
+                "nprogress": "^0.2.0",
                 "qs": "^6.9.0"
             }
         },
-        "node_modules/@inertiajs/inertia-vue3": {
-            "version": "0.6.0",
-            "resolved": "https://registry.npmjs.org/@inertiajs/inertia-vue3/-/inertia-vue3-0.6.0.tgz",
-            "integrity": "sha512-qhPBtd/G0VS7vVVbYw1rrqKB6JqRusxqt+5ec2GLmK6t7fTlBBnZ3KsakmGZLSM1m1OGkNcfn4ifmCk3zfA8RQ==",
+        "node_modules/@inertiajs/vue3": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/@inertiajs/vue3/-/vue3-1.2.0.tgz",
+            "integrity": "sha512-Y6AsvwIK/E1pQKAMp8B7i99CbNApcTYb7j8R+TXM/AFQG6yBlQ1Qb9oFMItb6VimXSnDyfO4+FWe/JPLk9OIVA==",
             "dependencies": {
+                "@inertiajs/core": "1.2.0",
                 "lodash.clonedeep": "^4.5.0",
                 "lodash.isequal": "^4.5.0"
             },
             "peerDependencies": {
-                "@inertiajs/inertia": "^0.11.0",
                 "vue": "^3.0.0"
             }
         },
-        "node_modules/@inertiajs/inertia/node_modules/axios": {
-            "version": "0.21.4",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
-            "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
-            "dependencies": {
-                "follow-redirects": "^1.14.0"
-            }
-        },
         "node_modules/@isaacs/cliui": {
             "version": "8.0.2",
             "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
diff --git a/package.json b/package.json
index 1e338bf..96baa8d 100644
--- a/package.json
+++ b/package.json
@@ -32,8 +32,7 @@
         "@fortawesome/free-brands-svg-icons": "^6.6.0",
         "@fortawesome/free-solid-svg-icons": "^6.6.0",
         "@fortawesome/vue-fontawesome": "^3.0.8",
-        "@inertiajs/inertia": "^0.11.1",
-        "@inertiajs/inertia-vue3": "^0.6.0",
+        "@inertiajs/vue3": "^1.2.0",
         "@vitejs/plugin-vue": "^5.1.4",
         "@vueuse/core": "^11.1.0",
         "nprogress": "^0.2.0",
diff --git a/resources/js/Pages/App/Index.vue b/resources/js/Pages/App/Index.vue
index e12fb0e..a427726 100644
--- a/resources/js/Pages/App/Index.vue
+++ b/resources/js/Pages/App/Index.vue
@@ -1,94 +1,149 @@
 <template>
-  <LayoutContainer>
-    <div class="flex flex-wrap gap-4 justify-center md:col-span-2 lg:col-span-4">
-      <AppButton title="Alle" bgColor="bg-gray-500 dark:bg-gray-700 hover:bg-gray-700" bgColorActive="bg-gray-900" :icon="['fas', 'users']" :active="filter == 'all'" @click="filter = 'all'"/>
-      <AppButton title="INF" bgColor="bg-blue-500 hover:bg-blue-700" bgColorActive="bg-blue-700" :icon="['fas', 'code']" :active="filter == 'inf'" @click="filter = 'inf'"/>
-      <AppButton title="ET" bgColor="bg-yellow-500 hover:bg-yellow-700" bgColorActive="bg-yellow-700" :icon="['fas', 'bolt']" :active="filter == 'et'" @click="filter = 'et'"/>
-      <AppButton title="WI" bgColor="bg-green-500 hover:bg-green-700" bgColorActive="bg-green-700" :icon="['fas', 'chart-line']" :active="filter == 'wi'" @click="filter = 'wi'"/>
-      <AppButton title="DIB" bgColor="bg-fuchsia-500 hover:bg-fuchsia-700" bgColorActive="bg-fuchsia-700" :icon="['fas', 'briefcase']" :active="filter == 'dib'" @click="filter = 'dib'"/>
-      <AppButton title="MCD" bgColor="bg-purple-500 hover:bg-purple-700" bgColorActive="bg-purple-700" :icon="['fas', 'paint-brush']" :active="filter == 'mcd'" @click="filter = 'mcd'"/>
-      <AppButton title="Tutor" bgColor="bg-indigo-500 hover:bg-indigo-700" bgColorActive="bg-indigo-700" :icon="['fas', 'robot']" :active="filter == 'tutor'" @click="filter = 'tutor'"/>
-      <AppButton title="Special" bgColor="bg-pink-500 hover:bg-pink-700" bgColorActive="bg-pink-700" :icon="['fas', 'star']" :active="filter == 'special'" @click="filter = 'special'"/>
-    </div>
-    <div class="grid gap-4 grid-cols-2 sm:grid-cols-3 md:col-span-2 md:grid-cols-4 lg:col-span-4"> 
-      <Link
-        v-for="person in filteredPersons"
-        :key="person.id"
-        :href="'/person/' + person.id + '/'">
-        <PersonCard
-          :person="person"
-          class="h-full"
-        />
-      </Link>
-    </div>
-  </LayoutContainer>
+    <LayoutContainer>
+        <div
+            class="flex flex-wrap gap-4 justify-center md:col-span-2 lg:col-span-4"
+        >
+            <AppButton
+                title="Alle"
+                bgColor="bg-gray-500 dark:bg-gray-700 hover:bg-gray-700"
+                bgColorActive="bg-gray-900"
+                :icon="['fas', 'users']"
+                :active="filter == 'all'"
+                @click="filter = 'all'"
+            />
+            <AppButton
+                title="INF"
+                bgColor="bg-blue-500 hover:bg-blue-700"
+                bgColorActive="bg-blue-700"
+                :icon="['fas', 'code']"
+                :active="filter == 'inf'"
+                @click="filter = 'inf'"
+            />
+            <AppButton
+                title="ET"
+                bgColor="bg-yellow-500 hover:bg-yellow-700"
+                bgColorActive="bg-yellow-700"
+                :icon="['fas', 'bolt']"
+                :active="filter == 'et'"
+                @click="filter = 'et'"
+            />
+            <AppButton
+                title="WI"
+                bgColor="bg-green-500 hover:bg-green-700"
+                bgColorActive="bg-green-700"
+                :icon="['fas', 'chart-line']"
+                :active="filter == 'wi'"
+                @click="filter = 'wi'"
+            />
+            <AppButton
+                title="DIB"
+                bgColor="bg-fuchsia-500 hover:bg-fuchsia-700"
+                bgColorActive="bg-fuchsia-700"
+                :icon="['fas', 'briefcase']"
+                :active="filter == 'dib'"
+                @click="filter = 'dib'"
+            />
+            <AppButton
+                title="MCD"
+                bgColor="bg-purple-500 hover:bg-purple-700"
+                bgColorActive="bg-purple-700"
+                :icon="['fas', 'paint-brush']"
+                :active="filter == 'mcd'"
+                @click="filter = 'mcd'"
+            />
+            <AppButton
+                title="Tutor"
+                bgColor="bg-indigo-500 hover:bg-indigo-700"
+                bgColorActive="bg-indigo-700"
+                :icon="['fas', 'robot']"
+                :active="filter == 'tutor'"
+                @click="filter = 'tutor'"
+            />
+            <AppButton
+                title="Special"
+                bgColor="bg-pink-500 hover:bg-pink-700"
+                bgColorActive="bg-pink-700"
+                :icon="['fas', 'star']"
+                :active="filter == 'special'"
+                @click="filter = 'special'"
+            />
+        </div>
+        <div
+            class="grid gap-4 grid-cols-2 sm:grid-cols-3 md:col-span-2 md:grid-cols-4 lg:col-span-4"
+        >
+            <Link
+                v-for="person in filteredPersons"
+                :key="person.id"
+                :href="'/person/' + person.id + '/'"
+            >
+                <PersonCard :person="person" class="h-full" />
+            </Link>
+        </div>
+    </LayoutContainer>
 </template>
 <script>
 import { computed, defineComponent, ref, watch } from "vue";
-import { Link } from '@inertiajs/inertia-vue3'
+import { Link } from "@inertiajs/vue3";
 import AppButton from "../../components/AppButton.vue";
 import LayoutContainer from "../../components/LayoutContainer.vue";
 import PersonCard from "../../components/PersonCard.vue";
-import NProgress from 'nprogress';
+import NProgress from "nprogress";
 
 export default defineComponent({
-  name: "Index",
-  components: {
-    AppButton,
-    LayoutContainer,
-    Link,
-    PersonCard,
-  },
-  props: {
-    persons: {
-      type: Array,
-      required: true,
+    name: "Index",
+    components: {
+        AppButton,
+        LayoutContainer,
+        Link,
+        PersonCard,
     },
-  },
-  setup(props) {
-    var filter = ref("all");
+    props: {
+        persons: {
+            type: Array,
+            required: true,
+        },
+    },
+    setup(props) {
+        var filter = ref("all");
 
-    watch(filter, (filter, prevFilter) => {
-      console.log(filter, prevFilter);
-      NProgress.start();
-    })
-    
-    var filteredPersons = computed(() => {
-      if (filter.value === "all") {
-        const tmp = props.persons;
-        NProgress.done();
-        return tmp;
-      }
-      const tmp = props.persons.filter((person) => {
-        if(filter.value === "inf") {
-          return person.course === "INF";
-        } else if(filter.value === "et") {
-          return person.course === "ET";
-        } else if(filter.value === "wi") {
-          return person.course === "WI";
-        } else if(filter.value === "dib") {
-          return person.course === "DIB";
-        } else if(filter.value === "mcd") {
-          return person.course === "MCD";
-        } else if(filter.value === "tutor") {
-          return person.is_tutor;
-        } else if(filter.value === "special") {
-          return person.is_special;
-        }
-      });
-      NProgress.done();
-      return tmp;
-    });
+        watch(filter, (filter, prevFilter) => {
+            console.log(filter, prevFilter);
+            NProgress.start();
+        });
 
+        var filteredPersons = computed(() => {
+            if (filter.value === "all") {
+                const tmp = props.persons;
+                NProgress.done();
+                return tmp;
+            }
+            const tmp = props.persons.filter((person) => {
+                if (filter.value === "inf") {
+                    return person.course === "INF";
+                } else if (filter.value === "et") {
+                    return person.course === "ET";
+                } else if (filter.value === "wi") {
+                    return person.course === "WI";
+                } else if (filter.value === "dib") {
+                    return person.course === "DIB";
+                } else if (filter.value === "mcd") {
+                    return person.course === "MCD";
+                } else if (filter.value === "tutor") {
+                    return person.is_tutor;
+                } else if (filter.value === "special") {
+                    return person.is_special;
+                }
+            });
+            NProgress.done();
+            return tmp;
+        });
 
-    return {
-      filter,
-      filteredPersons,
-    };
-  },
+        return {
+            filter,
+            filteredPersons,
+        };
+    },
 });
 </script>
 
-<style>
-
-</style>
\ No newline at end of file
+<style></style>
diff --git a/resources/js/Pages/Person/Show.vue b/resources/js/Pages/Person/Show.vue
index d04ba53..7e9fae0 100644
--- a/resources/js/Pages/Person/Show.vue
+++ b/resources/js/Pages/Person/Show.vue
@@ -1,161 +1,226 @@
 <template>
-  <LayoutContainer>
-    <div class="flex flex-wrap gap-4 justify-center col-span-4">
-      <Link href="/" v-if="!isPersonAuth">
-        <AppButton title="Zurück zur Übersicht" bgColor="bg-gray-500 dark:bg-gray-700 hover:bg-gray-700" bgColorActive="bg-gray-900" :icon="['fas', 'arrow-left']" />
-      </Link>
-      <AppButton v-if="!isPersonAuth" title="QR-Code erstellen" bgColor="bg-blue-500 hover:bg-blue-700" bgColorActive="bg-blue-700" :icon="['fas', 'qrcode']" @click="generateAuthToken()"/>
-      <Link href="/logout" v-if="isPersonAuth">
-        <AppButton title="Ausloggen" bgColor="bg-red-500 hover:bg-red-700" bgColorActive="bg-red-700" :icon="['fas', 'sign-out-alt']" />
-      </Link>
-    </div>
-    <p v-if="!isPersonAuth" class="col-span-4 text-center text-red-700 dark:text-red-500 text-2xl">
-      Du wirst in 
-      <template v-if="redirectCountdown == 1">
-        einer Sekunde
-      </template>
-      <template v-else>
-        {{ redirectCountdown }} Sekunden
-      </template>
-       auf die Startseite geleitet.
-    </p>
-    <div class="grid gap-y-4 md:gap-x-4 col-span-4 md:grid-cols-3"> 
-      <PersonCard
-        :canBeHovered="false"
-        :person="person"
-      />
-      <div class="grid gap-4 col-span-2 grid-cols-2">
-        <ArticleCard
-          v-for="article in articles"
-          :article="article"
-          @submit="buy"
-        />
-      </div>
-    </div>    
-    <div class="col-span-4 bg-gray-100 border-gray-500 dark:bg-gray-800 dark:border-gray-900 border-2 rounded-lg p-3"> 
-      <h1 class="text-2xl mb-4">Deine letzten 20 Aktivitäten</h1>
-      <ul v-if="articleActionLogs" class="flex flex-col gap-3">
-        <li v-for="articleActionLog in articleActionLogs" :key="articleActionLog.id" class="flex flex-col lg:flex-row gap-2 items-center">
-          <span class="text-gray-600 dark:text-gray-400 font-bold lg:w-60">{{ articleActionLog.createdAtFormatted }}</span>
-          <span v-if="articleActionLog.deleted_at" class="text-lg text-red-800 dark:text-red-500">
-            Du hast den Artikel "<span class="font-bold">{{ articleActionLog.article.name }}</span>" am <span class="font-bold">{{ articleActionLog.deletedAtFormatted }}</span> storniert.
-          </span>
-          <span v-else class="text-lg text-green-600 dark:text-green-500">
-            Du hast den Artikel "<span class="font-bold">{{ articleActionLog.article.name }}</span>" gekauft.
-          </span>
-          <a v-if="!articleActionLog.deleted_at && articleActionLog.cancelUntilTimestamp * 1000 >= Date.now()" class="text-red-700 dark:text-red-400 uppercase font-bold text-lg cursor-pointer" @click="cancel(articleActionLog)">[stornieren]</a>
-        </li>
-      </ul>
-    </div>
-  </LayoutContainer>
-  <div class="fixed z-10 inset-0 overflow-y-auto" v-if="openQRCodeModal && authLink">
-    <div class="flex min-h-screen items-center justify-center">
-      <div class="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity justify-center" @click="openQRCodeModal = false"></div>
+    <LayoutContainer>
+        <div class="flex flex-wrap gap-4 justify-center col-span-4">
+            <Link href="/" v-if="!isPersonAuth">
+                <AppButton
+                    title="Zurück zur Übersicht"
+                    bgColor="bg-gray-500 dark:bg-gray-700 hover:bg-gray-700"
+                    bgColorActive="bg-gray-900"
+                    :icon="['fas', 'arrow-left']"
+                />
+            </Link>
+            <AppButton
+                v-if="!isPersonAuth"
+                title="QR-Code erstellen"
+                bgColor="bg-blue-500 hover:bg-blue-700"
+                bgColorActive="bg-blue-700"
+                :icon="['fas', 'qrcode']"
+                @click="generateAuthToken()"
+            />
+            <Link href="/logout" v-if="isPersonAuth">
+                <AppButton
+                    title="Ausloggen"
+                    bgColor="bg-red-500 hover:bg-red-700"
+                    bgColorActive="bg-red-700"
+                    :icon="['fas', 'sign-out-alt']"
+                />
+            </Link>
+        </div>
+        <p
+            v-if="!isPersonAuth"
+            class="col-span-4 text-center text-red-700 dark:text-red-500 text-2xl"
+        >
+            Du wirst in
+            <template v-if="redirectCountdown == 1"> einer Sekunde </template>
+            <template v-else> {{ redirectCountdown }} Sekunden </template>
+            auf die Startseite geleitet.
+        </p>
+        <div class="grid gap-y-4 md:gap-x-4 col-span-4 md:grid-cols-3">
+            <PersonCard :canBeHovered="false" :person="person" />
+            <div class="grid gap-4 col-span-2 grid-cols-2">
+                <ArticleCard
+                    v-for="article in articles"
+                    :article="article"
+                    @submit="buy"
+                />
+            </div>
+        </div>
+        <div
+            class="col-span-4 bg-gray-100 border-gray-500 dark:bg-gray-800 dark:border-gray-900 border-2 rounded-lg p-3"
+        >
+            <h1 class="text-2xl mb-4">Deine letzten 20 Aktivitäten</h1>
+            <ul v-if="articleActionLogs" class="flex flex-col gap-3">
+                <li
+                    v-for="articleActionLog in articleActionLogs"
+                    :key="articleActionLog.id"
+                    class="flex flex-col lg:flex-row gap-2 items-center"
+                >
+                    <span
+                        class="text-gray-600 dark:text-gray-400 font-bold lg:w-60"
+                        >{{ articleActionLog.createdAtFormatted }}</span
+                    >
+                    <span
+                        v-if="articleActionLog.deleted_at"
+                        class="text-lg text-red-800 dark:text-red-500"
+                    >
+                        Du hast den Artikel "<span class="font-bold">{{
+                            articleActionLog.article.name
+                        }}</span
+                        >" am
+                        <span class="font-bold">{{
+                            articleActionLog.deletedAtFormatted
+                        }}</span>
+                        storniert.
+                    </span>
+                    <span
+                        v-else
+                        class="text-lg text-green-600 dark:text-green-500"
+                    >
+                        Du hast den Artikel "<span class="font-bold">{{
+                            articleActionLog.article.name
+                        }}</span
+                        >" gekauft.
+                    </span>
+                    <a
+                        v-if="
+                            !articleActionLog.deleted_at &&
+                            articleActionLog.cancelUntilTimestamp * 1000 >=
+                                Date.now()
+                        "
+                        class="text-red-700 dark:text-red-400 uppercase font-bold text-lg cursor-pointer"
+                        @click="cancel(articleActionLog)"
+                        >[stornieren]</a
+                    >
+                </li>
+            </ul>
+        </div>
+    </LayoutContainer>
+    <div
+        class="fixed z-10 inset-0 overflow-y-auto"
+        v-if="openQRCodeModal && authLink"
+    >
+        <div class="flex min-h-screen items-center justify-center">
+            <div
+                class="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity justify-center"
+                @click="openQRCodeModal = false"
+            ></div>
 
-      <div class="bg-white border-2 border-gray-500 dark:border-gray-900 rounded-lg p-3 shadow-xl transform transition-all">
-        <vue-qrcode :value="authLink" :options="{ width: 400 }"></vue-qrcode>
-      </div>
+            <div
+                class="bg-white border-2 border-gray-500 dark:border-gray-900 rounded-lg p-3 shadow-xl transform transition-all"
+            >
+                <vue-qrcode
+                    :value="authLink"
+                    :options="{ width: 400 }"
+                ></vue-qrcode>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 import { defineComponent, inject, onBeforeUnmount, ref } from "vue";
-import { Inertia } from '@inertiajs/inertia'
-import { Link } from '@inertiajs/inertia-vue3'
+import { router } from "@inertiajs/vue3";
+import { Link } from "@inertiajs/vue3";
 import AppButton from "../../components/AppButton.vue";
 import LayoutContainer from "../../components/LayoutContainer.vue";
 import PersonCard from "../../components/PersonCard.vue";
 import ArticleCard from "../../components/ArticleCard.vue";
-import NProgress from 'nprogress';
+import NProgress from "nprogress";
 
 export default defineComponent({
-  name: "Index",
-  components: {
-    AppButton,
-    LayoutContainer,
-    Link,
-    PersonCard,
-    ArticleCard,
-  },
-  props: {
-    person: {
-      type: Object,
-      required: true,
-    },
-    articles: {
-      type: Array,
-      required: true,
-    },
-    articleActionLogs: {
-      type: Array,
-      required: true,
+    name: "Index",
+    components: {
+        AppButton,
+        LayoutContainer,
+        Link,
+        PersonCard,
+        ArticleCard,
     },
-    isPersonAuth: {
-      type: Boolean,
-      default: false,
+    props: {
+        person: {
+            type: Object,
+            required: true,
+        },
+        articles: {
+            type: Array,
+            required: true,
+        },
+        articleActionLogs: {
+            type: Array,
+            required: true,
+        },
+        isPersonAuth: {
+            type: Boolean,
+            default: false,
+        },
     },
-  },
-  setup(props) {
-    const redirectCountdown = ref(40);
-    const openQRCodeModal = ref(false);
-    const authLink = ref('');
-    const axios = inject('axios');
+    setup(props) {
+        const redirectCountdown = ref(40);
+        const openQRCodeModal = ref(false);
+        const authLink = ref("");
+        const axios = inject("axios");
 
-    const buy = (article, amount) => {
-      redirectCountdown.value = 30;
-      Inertia.post('/person/' + props.person.id + '/buy/' + article.id, {
-          amount,
-        }, {
-          preserveScroll: true,
-        }
-      );
-    }
+        const buy = (article, amount) => {
+            redirectCountdown.value = 30;
+            router.post(
+                "/person/" + props.person.id + "/buy/" + article.id,
+                {
+                    amount,
+                },
+                {
+                    preserveScroll: true,
+                }
+            );
+        };
 
-    const cancel = (articleActionLog) => {
-      redirectCountdown.value = 30;
-      Inertia.post('/person/' + props.person.id + '/cancel/' + articleActionLog.id, null, {
-        preserveScroll: true,
-      });
-    }
-    const generateAuthToken = () => {
-      NProgress.start();
-      redirectCountdown.value = 60;
-      axios.post('/person/' + props.person.id + '/generate-auth-link').then((res) => {
-        authLink.value = res.data.authLink;
-        openQRCodeModal.value = true;
-        NProgress.done();
-      });
-    }
+        const cancel = (articleActionLog) => {
+            redirectCountdown.value = 30;
+            router.post(
+                "/person/" + props.person.id + "/cancel/" + articleActionLog.id,
+                null,
+                {
+                    preserveScroll: true,
+                }
+            );
+        };
+        const generateAuthToken = () => {
+            NProgress.start();
+            redirectCountdown.value = 60;
+            axios
+                .post("/person/" + props.person.id + "/generate-auth-link")
+                .then((res) => {
+                    authLink.value = res.data.authLink;
+                    openQRCodeModal.value = true;
+                    NProgress.done();
+                });
+        };
 
-    const countdown = () => {
-      if (redirectCountdown.value > 1) {
-        redirectCountdown.value--;
-      } else {
-        Inertia.visit('/')
-      }
-    };
+        const countdown = () => {
+            if (redirectCountdown.value > 1) {
+                redirectCountdown.value--;
+            } else {
+                router.visit("/");
+            }
+        };
 
-    if(!props.isPersonAuth) {
-      const cooldownInterval = setInterval(countdown, 1000);
+        if (!props.isPersonAuth) {
+            const cooldownInterval = setInterval(countdown, 1000);
 
-      onBeforeUnmount(() => {
-        clearInterval(cooldownInterval);
-      });
-    }
+            onBeforeUnmount(() => {
+                clearInterval(cooldownInterval);
+            });
+        }
 
-    return {
-      authLink,
-      buy,
-      cancel,
-      generateAuthToken,
-      openQRCodeModal,
-      redirectCountdown,
-    };
-  },
+        return {
+            authLink,
+            buy,
+            cancel,
+            generateAuthToken,
+            openQRCodeModal,
+            redirectCountdown,
+        };
+    },
 });
 </script>
 
-<style>
-
-</style>
+<style></style>
diff --git a/resources/js/app.js b/resources/js/app.js
index 9281b65..4a7ce81 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,7 +1,7 @@
 import { createApp, h } from "vue";
 
 import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
-import { createInertiaApp } from "@inertiajs/inertia-vue3";
+import { createInertiaApp } from "@inertiajs/vue3";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import {
     faArrowLeft,
@@ -26,7 +26,7 @@ import VueQrcode from "@chenfengyuan/vue-qrcode";
 import axios from "axios";
 import VueAxios from "vue-axios";
 //import { InertiaProgress } from '@inertiajs/progress'
-import { Inertia } from "@inertiajs/inertia";
+import { router } from "@inertiajs/vue3";
 import NProgress from "nprogress";
 
 // fontawesome
@@ -49,8 +49,8 @@ library.add(
     faGlassWater
 );
 
-Inertia.on("start", () => NProgress.start());
-Inertia.on("finish", () => NProgress.done());
+router.on("start", () => NProgress.start());
+router.on("finish", () => NProgress.done());
 
 createInertiaApp({
     resolve: (name) =>