diff --git a/frontend/vue/components/Admin/AuditLog.vue b/frontend/vue/components/Admin/AuditLog.vue
index 8027e5430..fd4c8bf9c 100644
--- a/frontend/vue/components/Admin/AuditLog.vue
+++ b/frontend/vue/components/Admin/AuditLog.vue
@@ -87,6 +87,7 @@ import Icon from "~/components/Common/Icon";
 import DataTable from "~/components/Common/DataTable";
 import DateRangeDropdown from "~/components/Common/DateRangeDropdown";
 import {DateTime} from 'luxon';
+import useAzuraCast from "~/vendor/azuracast";
 
 export default {
     name: 'AdminAuditLog',
@@ -135,8 +136,10 @@ export default {
             this.$refs.datatable.relist();
         },
         formatTimestamp(unix_timestamp) {
+            const {timeConfig} = useAzuraCast();
+
             return DateTime.fromSeconds(unix_timestamp).toLocaleString(
-                {...DateTime.DATETIME_SHORT, ...App.time_config}
+                {...DateTime.DATETIME_SHORT, timeConfig}
             );
         }
     }
diff --git a/frontend/vue/components/Admin/Backups.vue b/frontend/vue/components/Admin/Backups.vue
index c6de09576..37fac5e87 100644
--- a/frontend/vue/components/Admin/Backups.vue
+++ b/frontend/vue/components/Admin/Backups.vue
@@ -116,6 +116,7 @@ import formatFileSize from "~/functions/formatFileSize";
 import AdminBackupsConfigureModal from "~/components/Admin/Backups/ConfigureModal";
 import AdminBackupsRunBackupModal from "~/components/Admin/Backups/RunBackupModal";
 import EnabledBadge from "~/components/Common/Badges/EnabledBadge.vue";
+import useAzuraCast from "~/vendor/azuracast";
 
 export default {
     name: 'AdminBackups',
@@ -186,8 +187,10 @@ export default {
             return DateTime.fromSeconds(timestamp).toRelative();
         },
         toLocaleTime(timestamp) {
+            const {timeConfig} = useAzuraCast();
+
             return DateTime.fromSeconds(timestamp).toLocaleString(
-                {...DateTime.DATETIME_SHORT, ...App.time_config}
+                {...DateTime.DATETIME_SHORT, timeConfig}
             );
         },
         formatFileSize(size) {
diff --git a/frontend/vue/components/Common/CodemirrorTextarea.vue b/frontend/vue/components/Common/CodemirrorTextarea.vue
index 2d2fad48b..5e1744577 100644
--- a/frontend/vue/components/Common/CodemirrorTextarea.vue
+++ b/frontend/vue/components/Common/CodemirrorTextarea.vue
@@ -8,6 +8,7 @@ import {useVModel} from "@vueuse/core";
 import {computed} from "vue";
 import {css} from "@codemirror/lang-css";
 import {javascript} from "@codemirror/lang-javascript";
+import useAzuraCast from "~/vendor/azuracast";
 
 const props = defineProps({
     modelValue: String,
@@ -27,9 +28,10 @@ const lang = computed(() => {
     return null;
 });
 
+const {theme} = useAzuraCast();
+
 const dark = computed(() => {
-    console.log(App.theme);
-    return App.theme === 'dark';
+    return theme === 'dark';
 })
 </script>
 
diff --git a/frontend/vue/components/Common/FlowUpload.vue b/frontend/vue/components/Common/FlowUpload.vue
index c8c8c2e3f..0a039efd7 100644
--- a/frontend/vue/components/Common/FlowUpload.vue
+++ b/frontend/vue/components/Common/FlowUpload.vue
@@ -73,6 +73,7 @@ import Icon from './Icon';
 import _ from 'lodash';
 import {computed, onMounted, onUnmounted, reactive, ref} from "vue";
 import Flow from "@flowjs/flow.js";
+import useAzuraCast from "~/vendor/azuracast";
 
 const props = defineProps({
     targetUrl: String,
@@ -131,6 +132,8 @@ const files = reactive({
 const file_browse_target = ref(); // Template Ref
 const file_drop_target = ref(); // Template Ref
 
+const {apiCsrf} = useAzuraCast();
+
 onMounted(() => {
     let defaultConfig = {
         target: () => {
@@ -139,7 +142,7 @@ onMounted(() => {
         singleFile: !props.allowMultiple,
         headers: {
             'Accept': 'application/json',
-            'X-API-CSRF': App.api_csrf
+            'X-API-CSRF': apiCsrf
         },
         withCredentials: true,
         allowDuplicateUploads: true,
diff --git a/frontend/vue/components/Common/ScheduleView.vue b/frontend/vue/components/Common/ScheduleView.vue
index 4a469cef6..99a46f3ff 100644
--- a/frontend/vue/components/Common/ScheduleView.vue
+++ b/frontend/vue/components/Common/ScheduleView.vue
@@ -9,6 +9,7 @@ import allLocales from '@fullcalendar/core/locales-all';
 import luxon2Plugin from '@fullcalendar/luxon2';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import {shallowRef} from "vue";
+import useAzuraCast from "~/vendor/azuracast";
 
 const props = defineProps({
     scheduleUrl: String,
@@ -34,8 +35,10 @@ const onEventClick = (arg) => {
     emit('click', arg.event);
 };
 
+const {localeShort, timeConfig} = useAzuraCast();
+
 const calendarOptions = shallowRef({
-    locale: App.locale_short,
+    locale: localeShort,
     locales: allLocales,
     plugins: [luxon2Plugin, timeGridPlugin],
     initialView: 'timeGridWeek',
@@ -52,7 +55,7 @@ const calendarOptions = shallowRef({
     views: {
         timeGridWeek: {
             slotLabelFormat: {
-                ...App.time_config,
+                ...timeConfig,
                 hour: 'numeric',
                 minute: '2-digit',
                 omitZeroMinute: true,
diff --git a/frontend/vue/components/InlinePlayer.vue b/frontend/vue/components/InlinePlayer.vue
index 1f5334d08..35ea85cc9 100644
--- a/frontend/vue/components/InlinePlayer.vue
+++ b/frontend/vue/components/InlinePlayer.vue
@@ -22,7 +22,7 @@
         </a>
         <div class="inline-volume-controls d-inline-flex align-items-center ml-1">
             <div class="flex-shrink-0">
-                <a class="btn btn-sm btn-outline-light px-2" href="#" @click.prevent="volume = 0"
+                <a class="btn btn-sm btn-outline-light px-2" href="#" @click.prevent="mute"
                    :aria-label="$gettext('Mute')">
                     <icon icon="volume_mute"></icon>
                 </a>
@@ -33,7 +33,7 @@
                        step="1" v-model="volume">
             </div>
             <div class="flex-shrink-0">
-                <a class="btn btn-sm btn-outline-light px-2" href="#" @click.prevent="volume = 100"
+                <a class="btn btn-sm btn-outline-light px-2" href="#" @click.prevent="fullVolume"
                    :aria-label="$gettext('Full Volume')">
                     <icon icon="volume_up"></icon>
                 </a>
@@ -65,11 +65,11 @@
 </style>
 
 <script setup>
-import AudioPlayer from '~/components/Common/AudioPlayer';
+import AudioPlayer from '~/components/Common/AudioPlayer.vue';
 import formatTime from '~/functions/formatTime.js';
-import Icon from '~/components/Common/Icon';
+import Icon from '~/components/Common/Icon.vue';
 import {usePlayerStore} from "~/store.js";
-import {get, set, useMounted, useStorage} from "@vueuse/core";
+import {useMounted, useStorage} from "@vueuse/core";
 import {computed, ref, toRef} from "vue";
 
 const store = usePlayerStore();
@@ -79,42 +79,30 @@ const current = toRef(store, 'current');
 const volume = useStorage('player_volume', 55);
 const isMuted = useStorage('player_is_muted', false);
 const isMounted = useMounted();
-const player = ref(); // Template ref
+const player = ref(); // AudioPlayer
 
 const duration = computed(() => {
-    if (!get(isMounted)) {
-        return;
-    }
-
-    return get(player).getDuration();
+    return player.value?.getDuration();
 });
 
 const durationText = computed(() => {
-    return formatTime(get(duration));
+    return formatTime(duration.value);
 });
 
 const currentTime = computed(() => {
-    if (!get(isMounted)) {
-        return;
-    }
-
-    return get(player).getCurrentTime();
+    return player.value?.getCurrentTime();
 });
 
 const currentTimeText = computed(() => {
-    return formatTime(get(currentTime));
+    return formatTime(currentTime.value);
 });
 
 const progress = computed({
     get: () => {
-        if (!get(isMounted)) {
-            return;
-        }
-
-        return get(player).getProgress();
+        return player.value?.getProgress();
     },
     set: (prog) => {
-        get(player).setProgress(prog);
+        player.value?.setProgress(prog);
     }
 });
 
@@ -127,6 +115,10 @@ const stop = () => {
 };
 
 const mute = () => {
-    set(isMuted, !get(isMuted));
+    isMuted.value = !isMuted.value;
+};
+
+const fullVolume = () => {
+    volume.value = 100;
 };
 </script>
diff --git a/frontend/vue/components/Stations/Media.vue b/frontend/vue/components/Stations/Media.vue
index 7a7210ab2..dcda24d4a 100644
--- a/frontend/vue/components/Stations/Media.vue
+++ b/frontend/vue/components/Stations/Media.vue
@@ -164,6 +164,7 @@ import PlayButton from "~/components/Common/PlayButton";</script>
 import formatFileSize from '~/functions/formatFileSize.js';
 import _ from 'lodash';
 import {DateTime} from 'luxon';
+import useAzuraCast from "~/vendor/azuracast";
 
 export default {
     props: {
@@ -252,8 +253,11 @@ export default {
                     if (!value) {
                         return '';
                     }
+
+                    const {timeConfig} = useAzuraCast();
+
                     return DateTime.fromSeconds(value).setZone(this.stationTimeZone).toLocaleString(
-                        {...DateTime.DATETIME_MED, ...App.time_config}
+                        {...DateTime.DATETIME_MED, ...timeConfig}
                     );
                 },
                 selectable: true,
diff --git a/frontend/vue/components/Stations/Playlists.vue b/frontend/vue/components/Stations/Playlists.vue
index 549dac69e..24112ec52 100644
--- a/frontend/vue/components/Stations/Playlists.vue
+++ b/frontend/vue/components/Stations/Playlists.vue
@@ -142,6 +142,7 @@ import Icon from '~/components/Common/Icon';
 import CloneModal from './Playlists/CloneModal';
 import {DateTime} from 'luxon';
 import humanizeDuration from 'humanize-duration';
+import useAzuraCast from "~/vendor/azuracast";
 
 export default {
     name: 'StationPlaylists',
@@ -198,14 +199,18 @@ export default {
                 : this.$gettext('Enable');
         },
         formatTime (time) {
+            const {timeConfig} = useAzuraCast();
+
             return DateTime.fromSeconds(time).setZone(this.stationTimeZone).toLocaleString(
-                {...DateTime.DATETIME_MED, ...App.time_config}
+                {...DateTime.DATETIME_MED, ...timeConfig}
             );
         },
         formatLength (length) {
+            const {localeShort} = useAzuraCast();
+
             return humanizeDuration(length * 1000, {
                 round: true,
-                language: App.locale_short,
+                language: localeShort,
                 fallbacks: ['en']
             });
         },
diff --git a/frontend/vue/components/Stations/Profile/SchedulePanel.vue b/frontend/vue/components/Stations/Profile/SchedulePanel.vue
index 2881e6e8e..aaccbd170 100644
--- a/frontend/vue/components/Stations/Profile/SchedulePanel.vue
+++ b/frontend/vue/components/Stations/Profile/SchedulePanel.vue
@@ -49,12 +49,15 @@ export default {
 import {DateTime} from "luxon";
 import _ from "lodash";
 import {computed} from "vue";
+import useAzuraCast from "~/vendor/azuracast";
 
 const props = defineProps({
     scheduleItems: Array,
     stationTimeZone: String
 });
 
+const {timeConfig} = useAzuraCast();
+
 const processedScheduleItems = computed(() => {
     const now = DateTime.now().setZone(props.stationTimeZone);
 
@@ -66,21 +69,21 @@ const processedScheduleItems = computed(() => {
 
         if (start_moment.hasSame(now, 'day')) {
             row.start_formatted = start_moment.toLocaleString(
-                {...DateTime.TIME_SIMPLE, ...App.time_config}
+                {...DateTime.TIME_SIMPLE, ...timeConfig}
             );
         } else {
             row.start_formatted = start_moment.toLocaleString(
-                {...DateTime.DATETIME_MED, ...App.time_config}
+                {...DateTime.DATETIME_MED, ...timeConfig}
             );
         }
 
         if (end_moment.hasSame(start_moment, 'day')) {
             row.end_formatted = end_moment.toLocaleString(
-                {...DateTime.TIME_SIMPLE, ...App.time_config}
+                {...DateTime.TIME_SIMPLE, ...timeConfig}
             );
         } else {
             row.end_formatted = end_moment.toLocaleString(
-                {...DateTime.DATETIME_MED, ...App.time_config}
+                {...DateTime.DATETIME_MED, ...timeConfig}
             );
         }
 
diff --git a/frontend/vue/components/Stations/Queue.vue b/frontend/vue/components/Stations/Queue.vue
index ae25de2e5..52419bad2 100644
--- a/frontend/vue/components/Stations/Queue.vue
+++ b/frontend/vue/components/Stations/Queue.vue
@@ -57,6 +57,7 @@ import DataTable from '../Common/DataTable';
 import QueueLogsModal from './Queue/LogsModal';
 import Icon from "~/components/Common/Icon";
 import {DateTime} from 'luxon';
+import useAzuraCast from "~/vendor/azuracast";
 
 export default {
     name: 'StationQueue',
@@ -78,8 +79,10 @@ export default {
     },
     methods: {
         formatTime(time) {
+            const {timeConfig} = useAzuraCast();
+
             return this.getDateTime(time).toLocaleString(
-                {...DateTime.TIME_WITH_SECONDS, ...App.time_config}
+                {...DateTime.TIME_WITH_SECONDS, ...timeConfig}
             );
         },
         formatRelativeTime(time) {
diff --git a/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue b/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue
index 299d9f899..f18629cb6 100644
--- a/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue
+++ b/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue
@@ -16,6 +16,7 @@
 <script setup>
 import {onMounted, provide, ref, shallowRef} from "vue";
 import L from "leaflet";
+import useAzuraCast from "~/vendor/azuracast";
 
 const props = defineProps({
     attribution: String
@@ -26,6 +27,8 @@ const $map = shallowRef();
 
 provide('map', $map);
 
+const {theme} = useAzuraCast();
+
 onMounted(() => {
     // Fix issue with Leaflet icons being built in Webpack
     // https://github.com/Leaflet/Leaflet/issues/4968
@@ -47,7 +50,7 @@ onMounted(() => {
     const tileAttribution = 'Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL.';
 
     L.tileLayer(tileUrl, {
-        theme: App.theme,
+        theme: theme,
         attribution: tileAttribution,
     }).addTo(map);
 
diff --git a/frontend/vue/components/Stations/Reports/Requests.vue b/frontend/vue/components/Stations/Reports/Requests.vue
index 64a55c41a..f7a7b9fc6 100644
--- a/frontend/vue/components/Stations/Reports/Requests.vue
+++ b/frontend/vue/components/Stations/Reports/Requests.vue
@@ -55,6 +55,7 @@
 import DataTable from '~/components/Common/DataTable';
 import Icon from "~/components/Common/Icon";
 import {DateTime} from 'luxon';
+import useAzuraCast from "~/vendor/azuracast";
 
 export default {
     name: 'StationRequests',
@@ -102,8 +103,10 @@ export default {
             this.$refs.datatable.refresh();
         },
         formatTime(time) {
+            const {timeConfig} = useAzuraCast();
+
             return DateTime.fromSeconds(time).setZone(this.stationTimeZone).toLocaleString(
-                {...DateTime.DATETIME_MED, ...App.time_config}
+                {...DateTime.DATETIME_MED, ...timeConfig}
             );
         },
         doDelete(url) {
diff --git a/frontend/vue/components/Stations/Reports/Timeline.vue b/frontend/vue/components/Stations/Reports/Timeline.vue
index 8a196dd24..e9f45cb8b 100644
--- a/frontend/vue/components/Stations/Reports/Timeline.vue
+++ b/frontend/vue/components/Stations/Reports/Timeline.vue
@@ -82,6 +82,7 @@ import Icon from "~/components/Common/Icon";
 import DataTable from "~/components/Common/DataTable";
 import DateRangeDropdown from "~/components/Common/DateRangeDropdown";
 import {DateTime} from 'luxon';
+import useAzuraCast from "~/vendor/azuracast";
 
 export default {
     name: 'StationsReportsTimeline',
@@ -167,13 +168,17 @@ export default {
             return Math.abs(val);
         },
         formatTimestamp(unix_timestamp) {
+            const {timeConfig} = useAzuraCast();
+
             return DateTime.fromSeconds(unix_timestamp).toLocaleString(
-                {...DateTime.DATETIME_SHORT, ...App.time_config}
+                {...DateTime.DATETIME_SHORT, ...timeConfig}
             );
         },
         formatTimestampStation(unix_timestamp) {
+            const {timeConfig} = useAzuraCast();
+
             return DateTime.fromSeconds(unix_timestamp).setZone(this.stationTimeZone).toLocaleString(
-                {...DateTime.DATETIME_SHORT, ...App.time_config}
+                {...DateTime.DATETIME_SHORT, ...timeConfig}
             );
         }
     }
diff --git a/frontend/vue/components/Stations/Streamers/BroadcastsModal.vue b/frontend/vue/components/Stations/Streamers/BroadcastsModal.vue
index e3de59a7e..bd314641f 100644
--- a/frontend/vue/components/Stations/Streamers/BroadcastsModal.vue
+++ b/frontend/vue/components/Stations/Streamers/BroadcastsModal.vue
@@ -43,6 +43,7 @@ import Icon from '~/components/Common/Icon';
 import PlayButton from "~/components/Common/PlayButton";
 import {DateTime} from 'luxon';
 import '~/vendor/sweetalert.js';
+import useAzuraCast from "~/vendor/azuracast";
 
 export default {
     name: 'StreamerBroadcastsModal',
@@ -62,8 +63,10 @@ export default {
                     label: this.$gettext('Start Time'),
                     sortable: false,
                     formatter: (value) => {
+                        const {timeConfig} = useAzuraCast();
+
                         return DateTime.fromSeconds(value).toLocaleString(
-                            {...DateTime.DATETIME_MED, ...App.time_config}
+                            {...DateTime.DATETIME_MED, ...timeConfig}
                         );
                     },
                     class: 'pl-3'
@@ -76,8 +79,11 @@ export default {
                         if (value === 0) {
                             return this.$gettext('Live');
                         }
+
+                        const {timeConfig} = useAzuraCast();
+
                         return DateTime.fromSeconds(value).toLocaleString(
-                            {...DateTime.DATETIME_MED, ...App.time_config}
+                            {...DateTime.DATETIME_MED, ...timeConfig}
                         );
                     }
                 },
diff --git a/frontend/vue/pages/InlinePlayer.js b/frontend/vue/pages/InlinePlayer.js
index 83b867f39..9174183cf 100644
--- a/frontend/vue/pages/InlinePlayer.js
+++ b/frontend/vue/pages/InlinePlayer.js
@@ -2,13 +2,16 @@ import {createApp} from 'vue';
 import InlinePlayer from '~/components/InlinePlayer.vue';
 import installPinia from '../vendor/pinia';
 import gettext from "../vendor/gettext";
+import useAzuraCast from "~/vendor/azuracast";
 
 document.addEventListener('DOMContentLoaded', function () {
     const inlineApp = createApp(InlinePlayer);
 
     /* Gettext */
-    if (typeof App.locale !== 'undefined') {
-        inlineApp.config.language = App.locale;
+    const {locale} = useAzuraCast();
+
+    if (typeof locale !== 'undefined') {
+        inlineApp.config.language = locale;
     }
 
     inlineApp.use(gettext);
diff --git a/frontend/vue/vendor/axios.js b/frontend/vue/vendor/axios.js
index 85ccd8b68..3961aca55 100644
--- a/frontend/vue/vendor/axios.js
+++ b/frontend/vue/vendor/axios.js
@@ -2,6 +2,7 @@ import axios from "axios";
 import VueAxios from "vue-axios";
 import gettext from "~/vendor/gettext";
 import {inject} from "vue";
+import useAzuraCast from "~/vendor/azuracast";
 
 /* Composition API Axios utilities */
 export function useAxios() {
@@ -12,8 +13,10 @@ export function useAxios() {
 
 export default function installAxios(vueApp) {
     // Configure auto-CSRF on requests
-    if (typeof App.api_csrf !== 'undefined') {
-        axios.defaults.headers.common['X-API-CSRF'] = App.api_csrf;
+    const {apiCsrf} = useAzuraCast();
+
+    if (typeof apiCsrf !== 'undefined') {
+        axios.defaults.headers.common['X-API-CSRF'] = apiCsrf;
     }
 
     vueApp.use(VueAxios, axios);
diff --git a/frontend/vue/vendor/azuracast.js b/frontend/vue/vendor/azuracast.js
new file mode 100644
index 000000000..a6b8629a5
--- /dev/null
+++ b/frontend/vue/vendor/azuracast.js
@@ -0,0 +1,14 @@
+export default function useAzuraCast() {
+    return {
+        lang: {
+            confirm: App.lang.confirm ?? 'Are you sure?',
+            advanced: App.lang.advanced ?? 'Advanced'
+        },
+        locale: App.locale ?? 'en_US',
+        localeShort: App.locale_short ?? 'en',
+        localeWithDashes: App.locale_with_dashes ?? 'en-US',
+        timeConfig: App.time_config ?? {},
+        apiCsrf: App.api_csrf ?? null,
+        theme: App.theme ?? 'light'
+    }
+}
diff --git a/frontend/vue/vendor/gettext.js b/frontend/vue/vendor/gettext.js
index 02f79f620..522edf778 100644
--- a/frontend/vue/vendor/gettext.js
+++ b/frontend/vue/vendor/gettext.js
@@ -1,8 +1,11 @@
 import translations from "../../../translations/translations.json";
 import {createGettext} from "vue3-gettext";
+import useAzuraCast from "~/vendor/azuracast";
+
+const {locale} = useAzuraCast();
 
 export default createGettext({
-    defaultLanguage: App.locale,
+    defaultLanguage: locale,
     translations: translations,
     silent: true
 });
diff --git a/frontend/vue/vendor/luxon.js b/frontend/vue/vendor/luxon.js
index 6b1f2eacc..c39791dac 100644
--- a/frontend/vue/vendor/luxon.js
+++ b/frontend/vue/vendor/luxon.js
@@ -1,8 +1,9 @@
 import {Settings} from 'luxon';
+import useAzuraCast from "~/vendor/azuracast";
 
+const {localeWithDashes} = useAzuraCast();
 
 document.addEventListener('DOMContentLoaded', function () {
-  Settings.defaultLocale = App.locale_with_dashes;
-
-  Settings.defaultZoneName = 'UTC';
+    Settings.defaultLocale = localeWithDashes;
+    Settings.defaultZoneName = 'UTC';
 });