diff --git a/.gitignore b/.gitignore
index faa9af416..0f1fd9fa1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,4 @@ yarn-error.log
 /.php-cs-fixer.cache
 /storage/*.bucket
 /*.tar.gz
+/resources/lang/php_*.json
diff --git a/package-lock.json b/package-lock.json
index a7105cfe8..a48f09b34 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
                 "@vitejs/plugin-vue": "^5.1.2",
                 "bootstrap": "^5.3.3",
                 "clipboard": "^2.0.11",
+                "laravel-vue-i18n": "^2.7.7",
                 "moment": "^2.30.1",
                 "vue": "^3.4.38",
                 "vue-markdown-render": "^2.2.1"
@@ -646,6 +647,16 @@
                 "vite": "^5.0.0"
             }
         },
+        "node_modules/laravel-vue-i18n": {
+            "version": "2.7.7",
+            "resolved": "https://registry.npmjs.org/laravel-vue-i18n/-/laravel-vue-i18n-2.7.7.tgz",
+            "integrity": "sha512-rvjRTUY0eYEduEYgyxqNno/5A0ryUQfT+70qYvubMPUxWhmucitUfjDQAQUjvD7WNaUbG5iroAUt3UqBBc5qDw==",
+            "license": "MIT",
+            "dependencies": {
+                "php-parser": "3.1.3",
+                "vue": "^3.2.45"
+            }
+        },
         "node_modules/linkify-it": {
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
@@ -734,6 +745,12 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/php-parser": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/php-parser/-/php-parser-3.1.3.tgz",
+            "integrity": "sha512-hPvBmnRYPqWEtMfIFOlyjQv1q75UUtxt4U+YscKIQViGmEE2Xa4BuS1B1/cZdjy7MVcwtnr0WkEsr915LgRKOw==",
+            "license": "BSD-3-Clause"
+        },
         "node_modules/picocolors": {
             "version": "1.0.0",
             "dev": true,
diff --git a/package.json b/package.json
index ccc8f3329..ae24d9ad5 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
         "@vitejs/plugin-vue": "^5.1.2",
         "bootstrap": "^5.3.3",
         "clipboard": "^2.0.11",
+        "laravel-vue-i18n": "^2.7.7",
         "moment": "^2.30.1",
         "vue": "^3.4.38",
         "vue-markdown-render": "^2.2.1"
diff --git a/resources/js/app.js b/resources/js/app.js
index a0a7636b1..b7f08caa0 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -16,7 +16,7 @@ window.submitDeletionForm = function (event) {
     const form = event.target.closest('form');
 
     if (form) {
-        if (confirm('Are you sure you want to delete this?')) {
+        if (confirm(trans('phrase.are-you-sure-delete'))) {
             form.submit();
         }
     } else {
diff --git a/resources/js/components/active-games/active-game.vue b/resources/js/components/active-games/active-game.vue
index a89c66509..85b4b11ef 100644
--- a/resources/js/components/active-games/active-game.vue
+++ b/resources/js/components/active-games/active-game.vue
@@ -18,7 +18,7 @@ const userCount = computed(() => props.users.length);
         </td>
         <td>{{ game.name }}</td>
         <td>
-            {{ userCount }} In Game
+            {{ $t('phrase.x-in-game', {x: userCount}) }}
         </td>
         <td class="users">
             <user-avatar v-for="user in users" :key="user.id" :user="user"></user-avatar>
diff --git a/resources/js/components/events/event-relative-time.vue b/resources/js/components/events/event-relative-time.vue
index 63f539b8a..acfdee471 100644
--- a/resources/js/components/events/event-relative-time.vue
+++ b/resources/js/components/events/event-relative-time.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref, watch, onMounted } from 'vue';
 import moment from 'moment';
+import {trans} from 'laravel-vue-i18n';
 
 const props = defineProps(['status', 'start', 'end', 'now']);
 
@@ -9,16 +10,16 @@ const relativeTimeText = ref('');
 const updateRelativeTimeText = () => {
     switch (props.status) {
         case 'past':
-            relativeTimeText.value = 'Ended ' + moment(props.end).fromNow();
+            relativeTimeText.value = trans('phrase.ended') + ' ' + moment(props.end).fromNow();
             break;
         case 'present':
-            relativeTimeText.value = 'Started ' + moment(props.start).fromNow();
+            relativeTimeText.value = trans('phrase.started') + ' ' + moment(props.start).fromNow();
             break;
         case 'future':
-            relativeTimeText.value = 'Starting ' + moment(props.start).fromNow();
+            relativeTimeText.value = trans('phrase.starting') + ' ' + moment(props.start).fromNow();
             break;
         default:
-            relativeTimeText.value = 'Unknown';
+            relativeTimeText.value = trans('phrase.unknown');
     }
 };
 
diff --git a/resources/js/components/events/event-schedule.vue b/resources/js/components/events/event-schedule.vue
index 1782ee648..dc10cc50d 100644
--- a/resources/js/components/events/event-schedule.vue
+++ b/resources/js/components/events/event-schedule.vue
@@ -1,10 +1,11 @@
 <script setup>
-import {reactive} from 'vue';
+import {reactive, watch, computed} from 'vue';
 import FullCalendar from '@fullcalendar/vue3';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import bootstrap5Plugin from '@fullcalendar/bootstrap5';
+import {trans, isLoaded} from 'laravel-vue-i18n';
 
-const calendarOptions = reactive({
+const baseCalendarOptions = reactive({
     plugins: [timeGridPlugin, bootstrap5Plugin],
     themeSystem: 'bootstrap5',
     initialView: 'timeGridThreeDay',
@@ -25,15 +26,6 @@ const calendarOptions = reactive({
         end: 'today prev,next',
     },
     buttonIcons: false,
-    buttonText: {
-        today: 'Today',
-        month: 'Month',
-        week: 'Week',
-        day: 'Day',
-        list: 'List',
-        next: '>',
-        prev: '<',
-    },
     eventColor: '#157800',
     eventTextColor: '#fff',
     eventBorderColor: '#157800',
@@ -51,6 +43,29 @@ const calendarOptions = reactive({
     },
     events: '/api/events/',
 });
+
+// Create a computed property for buttonText
+const buttonText = computed(() => ({
+    today: trans('phrase.today'),
+    month: trans('phrase.month'),
+    week: trans('phrase.week'),
+    day: trans('phrase.day'),
+    list: trans('phrase.list'),
+    next: '>',
+    prev: '<',
+}));
+
+const calendarOptions = computed(() => ({
+    ...baseCalendarOptions,
+    buttonText: buttonText.value
+}));
+
+watch(isLoaded, (loaded) => {
+    if (loaded) {
+        buttonText.value;
+        calendarOptions.value;
+    }
+}, {immediate: true});
 </script>
 
 <template>
diff --git a/resources/js/components/events/event-status.vue b/resources/js/components/events/event-status.vue
index e00a06bde..bf72262db 100644
--- a/resources/js/components/events/event-status.vue
+++ b/resources/js/components/events/event-status.vue
@@ -1,22 +1,19 @@
-<template>
-    <span :class="className">{{ statusName }}</span>
-</template>
-
 <script setup>
 import { computed } from 'vue';
+import {trans} from 'laravel-vue-i18n';
 
 const props = defineProps(['status']);
 
 const statusName = computed(() => {
     switch (props.status) {
         case 'past':
-            return 'Ended';
+            return trans('phrase.ended');
         case 'present':
-            return 'Now';
+            return trans('phrase.now');
         case 'future':
-            return 'Next';
+            return trans('phrase.next');
         default:
-            return 'Unknown';
+            return trans('phrase.unknown');
     }
 });
 
@@ -33,3 +30,7 @@ const className = computed(() => {
     }
 });
 </script>
+
+<template>
+    <span :class="className">{{ statusName }}</span>
+</template>
diff --git a/resources/js/components/fullscreen-button.vue b/resources/js/components/fullscreen-button.vue
index cd575c5b8..382904352 100644
--- a/resources/js/components/fullscreen-button.vue
+++ b/resources/js/components/fullscreen-button.vue
@@ -1,13 +1,14 @@
 <template>
     <transition name="fade">
         <div id="fullscreen-button" class="btn" v-show="visible" @click="toggleFullscreen">
-            <span class="fa fa-solid fa-expand" :title="Fullscreen" aria-hidden="true"></span>
+            <span class="fa fa-solid fa-expand" :title="trans('phrase.fullscreen')" aria-hidden="true"></span>
         </div>
     </transition>
 </template>
 
 <script setup>
 import {ref, onMounted, onBeforeUnmount} from 'vue';
+import {trans} from 'laravel-vue-i18n';
 
 const visible = ref(false);
 
diff --git a/resources/js/langs.js b/resources/js/langs.js
deleted file mode 100644
index 9a11340e4..000000000
--- a/resources/js/langs.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export default {
-    'en.phrase': require('../lang/en/phrase.php'),
-    'en.title': require('../lang/en/title.php'),
-}
diff --git a/resources/js/pages/active-games.js b/resources/js/pages/active-games.js
index 96b1e0d53..508ff907b 100644
--- a/resources/js/pages/active-games.js
+++ b/resources/js/pages/active-games.js
@@ -1,5 +1,12 @@
 import ActiveGames from '../components/active-games/active-games.vue'
+import {i18nVue} from 'laravel-vue-i18n'
 
 const app = createApp({});
+app.use(i18nVue, {
+    resolve: async lang => {
+        const langs = import.meta.glob('../../lang/*.json');
+        return await langs[`../../lang/${lang}.json`]();
+    }
+})
 app.component('ActiveGames', ActiveGames);
 app.mount('#app');
diff --git a/resources/js/pages/events.js b/resources/js/pages/events.js
index 326674adb..2371b40b4 100644
--- a/resources/js/pages/events.js
+++ b/resources/js/pages/events.js
@@ -1,5 +1,12 @@
 import Events from '../components/events/events.vue'
+import {i18nVue} from "laravel-vue-i18n";
 
 const app = createApp({});
+app.use(i18nVue, {
+    resolve: async lang => {
+        const langs = import.meta.glob('../../lang/*.json');
+        return await langs[`../../lang/${lang}.json`]();
+    }
+})
 app.component('Events', Events);
 app.mount('#app');
diff --git a/resources/js/pages/schedule.js b/resources/js/pages/schedule.js
index dcdd41516..739dbed58 100644
--- a/resources/js/pages/schedule.js
+++ b/resources/js/pages/schedule.js
@@ -1,5 +1,12 @@
 import EventSchedule from '../components/events/event-schedule.vue'
+import {i18nVue} from "laravel-vue-i18n";
 
 const app = createApp({});
+app.use(i18nVue, {
+    resolve: async lang => {
+        const langs = import.meta.glob('../../lang/*.json');
+        return await langs[`../../lang/${lang}.json`]();
+    }
+})
 app.component('EventSchedule', EventSchedule);
 app.mount('#app');
diff --git a/resources/js/pages/slides.js b/resources/js/pages/slides.js
index e2b2185c6..dc2412e51 100644
--- a/resources/js/pages/slides.js
+++ b/resources/js/pages/slides.js
@@ -1,8 +1,15 @@
 import Slides from '../components/slides/slides.vue'
 import SlidesSingle from '../components/slides/slides-single.vue'
 import FullscreenButton from '../components/fullscreen-button.vue'
+import {i18nVue} from "laravel-vue-i18n";
 
 const app = createApp({});
+app.use(i18nVue, {
+    resolve: async lang => {
+        const langs = import.meta.glob('../../lang/*.json');
+        return await langs[`../../lang/${lang}.json`]();
+    }
+})
 app.component('Slides', Slides);
 app.component('SlidesSingle', SlidesSingle);
 app.component('FullscreenButton', FullscreenButton);
diff --git a/resources/lang/en/phrase.php b/resources/lang/en/phrase.php
index 0fb7a7160..bbf49d209 100644
--- a/resources/lang/en/phrase.php
+++ b/resources/lang/en/phrase.php
@@ -58,6 +58,7 @@
     'item-created-successfully' => ':Item created successfully',
     'item-not-found' => ':item not found',
     'item-already-exists' => ':item already exists!',
+    'fullscreen' => 'Fullscreen',
 
     /**
      * Resources.
@@ -112,7 +113,10 @@
     'you-can-only-sign-yourself-up-to-event' => 'You can only sign yourself up to an event',
     'timespan-to' => 'to',
     'upcoming' => 'Upcoming',
+    'next' => 'Next',
     'happening-now' => 'Happening now',
+    'now' => 'Now',
+    'started' => 'Started',
     'ended' => 'Ended',
     'starting' => 'Starting',
     'ending' => 'Ending',
@@ -123,6 +127,11 @@
     'closed' => 'Closed',
     'opening' => 'Opening',
     'closing' => 'Closing',
+    'today' => 'Today',
+    'month' => 'Month',
+    'week' => 'Week',
+    'day' => 'Day',
+    'list' => 'List',
 
     // Images
     'select-files' => 'Select files',
diff --git a/vite.config.js b/vite.config.js
index 3fb05abf8..7966a5e15 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,6 +1,7 @@
 import {defineConfig} from 'vite';
 import laravel from 'laravel-vite-plugin';
 import vue from '@vitejs/plugin-vue';
+import i18n from 'laravel-vue-i18n/vite';
 
 export default defineConfig({
     plugins: [
@@ -33,6 +34,7 @@ export default defineConfig({
                 },
             },
         }),
+        i18n('resources/lang'),
     ],
     resolve: {
         alias: {