diff --git a/frontend/package.json b/frontend/package.json
index 696a0ab..a6fb13b 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -25,6 +25,7 @@
 		"js-cookie": "^3.0.5",
 		"jspdf": "^2.5.2",
 		"lucide-vue-next": "^0.468.0",
+		"pinia": "^2.3.1",
 		"qrcode": "^1.5.4",
 		"three": "^0.172.0",
 		"vue": "^3.5.12",
diff --git a/frontend/src/components/admin/LayoutDashboard.vue b/frontend/src/components/admin/LayoutDashboard.vue
index 8dc4996..c416238 100755
--- a/frontend/src/components/admin/LayoutDashboard.vue
+++ b/frontend/src/components/admin/LayoutDashboard.vue
@@ -191,8 +191,8 @@ import {
 } from 'lucide-vue-next';
 import Session from '@/mythicalclient/Session';
 import StorageMonitor from '@/mythicalclient/StorageMonitor';
-import Settings from '@/mythicalclient/Settings';
-
+import { useSettingsStore } from '@/stores/settings';
+const Settings = useSettingsStore();
 const router = useRouter();
 
 new StorageMonitor();
diff --git a/frontend/src/components/client/Auth/FormCard.vue b/frontend/src/components/client/Auth/FormCard.vue
index 956ddc2..e65d164 100755
--- a/frontend/src/components/client/Auth/FormCard.vue
+++ b/frontend/src/components/client/Auth/FormCard.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { HelpCircleIcon } from 'lucide-vue-next';
-import Settings from '@/mythicalclient/Settings';
 import { useI18n } from 'vue-i18n';
-
+import { useSettingsStore } from '@/stores/settings';
+const Settings = useSettingsStore();
 const { t } = useI18n();
 
 defineProps({
diff --git a/frontend/src/components/client/layout/TopNavBar.vue b/frontend/src/components/client/layout/TopNavBar.vue
index 1a791c6..caa17ad 100755
--- a/frontend/src/components/client/layout/TopNavBar.vue
+++ b/frontend/src/components/client/layout/TopNavBar.vue
@@ -73,7 +73,8 @@ import {
     Menu as MenuIcon,
     X as XIcon,
 } from 'lucide-vue-next';
-import Settings from '@/mythicalclient/Settings';
+import { useSettingsStore } from '@/stores/settings';
+const Settings = useSettingsStore();
 import { useI18n } from 'vue-i18n';
 import Session from '@/mythicalclient/Session';
 
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index c4ba7d5..c05e4e2 100755
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,15 +1,17 @@
 import './assets/main.css';
 
 import { createApp } from 'vue';
+import { createPinia } from 'pinia';
 import App from './App.vue';
 import router from './router';
 import VueSweetalert2 from 'vue-sweetalert2';
 import { createI18n } from 'vue-i18n';
 import EN from '@/locale/en.yml';
-import Settings from '@/mythicalclient/Settings';
 import './assets/sweetalert2.css';
 const app = createApp(App);
+const pinia = createPinia();
 
+app.use(pinia);
 app.use(router);
 app.use(VueSweetalert2);
 
@@ -21,6 +23,5 @@ const i18n = createI18n({
 });
 app.use(i18n);
 
-Settings.initializeSettings();
 
 app.mount('#app');
diff --git a/frontend/src/mythicalclient/MythicalClient.ts b/frontend/src/mythicalclient/MythicalClient.ts
index ce179c7..253571f 100755
--- a/frontend/src/mythicalclient/MythicalClient.ts
+++ b/frontend/src/mythicalclient/MythicalClient.ts
@@ -1,5 +1,4 @@
-import Settings from '@/mythicalclient/Settings';
-
+import { useSettingsStore } from '@/stores/settings';
 interface MythicalClientOptions {
     timeout?: number;
     theme?: 'dark' | 'light';
@@ -318,6 +317,7 @@ export class MythicalClient {
         console.log(`%c${randomMessages[Math.floor(Math.random() * randomMessages.length)]}`, styles.success);
 
         // Version Info
+        const Settings = useSettingsStore();
         console.log('%c📦 Version: ' + Settings.getSetting('version'));
 
         // Credits
diff --git a/frontend/src/mythicalclient/MythicalDOM.ts b/frontend/src/mythicalclient/MythicalDOM.ts
index 98ed3a0..9350589 100755
--- a/frontend/src/mythicalclient/MythicalDOM.ts
+++ b/frontend/src/mythicalclient/MythicalDOM.ts
@@ -1,4 +1,4 @@
-import Settings from './Settings';
+import { useSettingsStore } from '@/stores/settings';
 import { useI18n } from 'vue-i18n';
 export class MythicalDOM {
     /**
@@ -6,6 +6,7 @@ export class MythicalDOM {
      * @param title The title to set for the page
      */
     public static setPageTitle(title: string): void {
+      const Settings = useSettingsStore();
         document.title = Settings.getSetting('app_name') + ' - ' + title;
     }
 
diff --git a/frontend/src/mythicalclient/Session.ts b/frontend/src/mythicalclient/Session.ts
index f475ea4..2b06a74 100755
--- a/frontend/src/mythicalclient/Session.ts
+++ b/frontend/src/mythicalclient/Session.ts
@@ -1,6 +1,5 @@
 import router from '@/router';
 import Swal from 'sweetalert2';
-import Settings from '@/mythicalclient/Settings';
 import { useI18n } from 'vue-i18n';
 
 interface SessionResponse {
@@ -77,8 +76,6 @@ class Session {
      */
     private static async handleSessionError(data: SessionResponse): Promise<void> {
         const { t } = useI18n();
-        await Settings.initializeSettings();
-
         // Remove the user_token cookie
         document.cookie = 'user_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
 
diff --git a/frontend/src/mythicalclient/Settings.ts b/frontend/src/mythicalclient/Settings.ts
deleted file mode 100755
index 2f39212..0000000
--- a/frontend/src/mythicalclient/Settings.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-interface SettingsResponse {
-    success: boolean;
-    message?: string;
-    settings: Record<string, string>;
-    core: Record<string, string>;
-}
-
-class Settings {
-    private static instance: Settings;
-    private static settings: Record<string, string> = {};
-    private static initPromise: Promise<void> | null = null;
-    private static errorTemplate = (title: string, message: string) => `
-        <div style="display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #333; color: #fff; font-family: Arial, sans-serif;">
-            <div style="text-align: center;">
-                <h1 style="font-size: 3em; margin-bottom: 0.5em;">${title}</h1>
-                <p style="font-size: 1.5em;">${message}</p>
-                <button onclick="location.reload()" style="margin-top: 1em; padding: 0.5em 1em; font-size: 1em; color: #fff; background-color: #444; border: none; border-radius: 5px; cursor: pointer;">Retry</button>
-            </div>
-        </div>
-    `;
-
-    private constructor() {}
-
-    private static async fetchSettings(): Promise<SettingsResponse> {
-        const response = await fetch('/api/system/settings');
-        if (response.status === 503) {
-            document.body.innerHTML = this.errorTemplate(
-                'Rate Limited',
-                'You have been rate limited. Please try again later.',
-            );
-            throw new Error('Rate limited');
-        }
-
-        const data = await response.json();
-        if (!data.success) {
-            throw new Error(data.message || 'Failed to fetch settings');
-        }
-        return data;
-    }
-
-    static async grabSettings() {
-        try {
-            await this.ensureInitialized();
-            return this.settings;
-        } catch (error) {
-            console.error('Error fetching settings:', error);
-            throw error;
-        }
-    }
-
-    static async grabCore() {
-        try {
-            await this.ensureInitialized();
-            return this.settings.core;
-        } catch (error) {
-            console.error('Error fetching core:', error);
-            throw error;
-        }
-    }
-
-    private static async ensureInitialized(): Promise<void> {
-        if (!this.initPromise) {
-            this.initPromise = this.initialize();
-        }
-        return this.initPromise;
-    }
-
-    private static async initialize(): Promise<void> {
-        try {
-            const data = await this.fetchSettings();
-
-            // Store all settings in memory
-            this.settings = {
-                ...(data.settings as Record<string, string>),
-                core: JSON.stringify(data.core),
-            };
-
-            // Store in localStorage for persistence
-            Object.entries(data.settings).forEach(([key, value]) => {
-                localStorage.setItem(key, JSON.stringify(value));
-            });
-            Object.entries(data.core).forEach(([key, value]) => {
-                localStorage.setItem(key, JSON.stringify(value));
-            });
-        } catch (error) {
-            console.error('Failed to initialize settings:', error);
-            document.body.innerHTML = this.errorTemplate('We are so sorry', 'Our backend is down at this moment :(');
-            throw error;
-        }
-    }
-
-    static async initializeSettings() {
-        return this.ensureInitialized();
-    }
-
-    static getSetting(key: string): string {
-        // Try to get from memory first
-        if (this.settings[key] !== undefined) {
-            return this.settings[key];
-        }
-
-        // Try to get from localStorage
-        const item = localStorage.getItem(key);
-        if (item) {
-            try {
-                const value = JSON.parse(item);
-                this.settings[key] = value; // Cache in memory
-                return value;
-            } catch {
-                return item;
-            }
-        }
-
-        // If not found and not initialized, trigger initialization
-        if (!this.initPromise) {
-            const loadingElement = document.createElement('div');
-            loadingElement.id = 'loading-animation';
-            loadingElement.innerHTML = '<p>Loading...</p>';
-            document.body.appendChild(loadingElement);
-
-            this.ensureInitialized().finally(() => {
-                document.body.removeChild(loadingElement);
-            });
-        }
-
-        return 'Fetching settings...';
-    }
-}
-
-export default Settings;
diff --git a/frontend/src/stores/session.ts b/frontend/src/stores/session.ts
new file mode 100755
index 0000000..a49e83a
--- /dev/null
+++ b/frontend/src/stores/session.ts
@@ -0,0 +1,52 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import router from '@/router';
+
+interface SessionResponse {
+    success: boolean;
+    error_code?: string;
+    user_info: Record<string, unknown>;
+    billing: Record<string, unknown>;
+}
+
+export const useSessionStore = defineStore('session', () => {
+    const sessionInfo = ref<Record<string, unknown>>({});
+    const isValid = ref(false);
+
+    async function startSession() {
+        try {
+            const response = await fetch('/api/user/session');
+            const data: SessionResponse = await response.json();
+
+            if (data.success) {
+                sessionInfo.value = { ...data.user_info, ...data.billing };
+                isValid.value = true;
+            } else {
+                isValid.value = false;
+                if (data.error_code === 'SESSION_EXPIRED') {
+                    router.push('/auth/login');
+                }
+            }
+        } catch (error) {
+            console.error('Session error:', error);
+            isValid.value = false;
+            router.push('/auth/login');
+        }
+    }
+
+    function getInfo(key: string): string {
+        return (sessionInfo.value[key] as string) || '';
+    }
+
+    function isSessionValid(): boolean {
+        return isValid.value;
+    }
+
+    return {
+        sessionInfo,
+        isValid,
+        startSession,
+        getInfo,
+        isSessionValid,
+    };
+});
diff --git a/frontend/src/stores/settings.ts b/frontend/src/stores/settings.ts
new file mode 100755
index 0000000..a3301b5
--- /dev/null
+++ b/frontend/src/stores/settings.ts
@@ -0,0 +1,164 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+interface SettingsResponse {
+  success: boolean;
+  message?: string;
+  settings: Record<string, string>;
+  core: Record<string, string>;
+}
+
+interface CachedSettings {
+  value: Record<string, string>;
+  timestamp: number;
+}
+
+export const useSettingsStore = defineStore('settings', () => {
+  const settings = ref<Record<string, string>>({});
+  const isInitialized = ref(false);
+  const CACHE_DURATION = 30 * 60 * 1000; // 30 minutes in milliseconds
+  const CACHE_KEY = 'mythicalclient_settings_cache';
+
+  function loadFromCache(): boolean {
+    const cached = localStorage.getItem(CACHE_KEY);
+    if (!cached) return false;
+
+    try {
+      const { value, timestamp }: CachedSettings = JSON.parse(cached);
+      const now = Date.now();
+
+      if (now - timestamp < CACHE_DURATION) {
+        settings.value = value;
+        isInitialized.value = true;
+        return true;
+      }
+
+      // Clear expired cache
+      localStorage.removeItem(CACHE_KEY);
+      return false;
+    } catch {
+      return false;
+    }
+  }
+
+  function saveToCache(settingsData: Record<string, string>) {
+    const cache: CachedSettings = {
+      value: settingsData,
+      timestamp: Date.now()
+    };
+    localStorage.setItem(CACHE_KEY, JSON.stringify(cache));
+  }
+
+  const errorTemplate = (title: string, message: string) => `
+        <div style="display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #333; color: #fff; font-family: Arial, sans-serif;">
+            <div style="text-align: center;">
+                <h1 style="font-size: 3em; margin-bottom: 0.5em;">${title}</h1>
+                <p style="font-size: 1.5em;">${message}</p>
+                <button onclick="location.reload()" style="margin-top: 1em; padding: 0.5em 1em; font-size: 1em; color: #fff; background-color: #444; border: none; border-radius: 5px; cursor: pointer;">Retry</button>
+            </div>
+        </div>
+    `;
+
+  async function fetchSettings(): Promise<SettingsResponse> {
+    const response = await fetch('/api/system/settings');
+    if (response.status === 503) {
+      document.body.innerHTML = errorTemplate(
+        'Rate Limited',
+        'You have been rate limited. Please try again later.'
+      );
+      throw new Error('Rate limited');
+    }
+
+    const data = await response.json();
+    if (!data.success) {
+      throw new Error(data.message || 'Failed to fetch settings');
+    }
+    return data;
+  }
+
+  async function initialize() {
+    if (isInitialized.value) return;
+
+    // Try loading from cache first
+    if (loadFromCache()) {
+      return;
+    }
+    try {
+      const data = await fetchSettings();
+      settings.value = { ...data.settings, ...data.core };
+
+      // Store in localStorage for persistence
+      saveToCache(settings.value);
+
+      Object.entries(settings.value).forEach(([key, value]) => {
+        localStorage.setItem(key, JSON.stringify(value));
+      });
+
+      isInitialized.value = true;
+    } catch (error) {
+      console.error('Failed to initialize settings:', error);
+      document.body.innerHTML = errorTemplate(
+        'We are so sorry',
+        'Our backend is down at this moment :('
+      );
+      throw error;
+    }
+  }
+
+  function getSetting(key: string): string {
+    // Try to get from store first
+    if (settings.value[key] !== undefined) {
+      return settings.value[key];
+    }
+
+    // Try to get from localStorage
+    const item = localStorage.getItem(key);
+    if (item) {
+      try {
+        const value = JSON.parse(item);
+        settings.value[key] = value; // Cache in store
+        return value;
+      } catch {
+        return item;
+      }
+    }
+
+    // If not found and not initialized, trigger initialization
+    if (!isInitialized.value) {
+      const loadingElement = document.createElement('div');
+      loadingElement.id = 'loading-animation';
+      loadingElement.innerHTML = '<p>Loading...</p>';
+      document.body.appendChild(loadingElement);
+
+      initialize().finally(() => {
+        document.body.removeChild(loadingElement);
+      });
+    }
+
+    return 'Fetching settings...';
+  }
+  // Function to force refresh settings
+  async function refreshSettings() {
+    try {
+      const data = await fetchSettings();
+      settings.value = { ...data.settings, ...data.core };
+      saveToCache(settings.value);
+
+      // Update individual localStorage items
+      Object.entries(settings.value).forEach(([key, value]) => {
+        localStorage.setItem(key, JSON.stringify(value));
+      });
+    } catch (error) {
+      console.error('Failed to refresh settings:', error);
+      throw error;
+    }
+  }
+
+  return {
+    settings,
+    isInitialized,
+    initialize,
+    getSetting,
+    refreshSettings
+  };
+});
diff --git a/frontend/src/views/admin/Home.vue b/frontend/src/views/admin/Home.vue
index 6072165..ea92d38 100755
--- a/frontend/src/views/admin/Home.vue
+++ b/frontend/src/views/admin/Home.vue
@@ -66,5 +66,6 @@
 <script setup lang="ts">
 import { CheckCircle, Heart, HelpCircle, InfoIcon } from 'lucide-vue-next';
 import LayoutDashboard from '@/components/admin/LayoutDashboard.vue';
-import Settings from '@/mythicalclient/Settings';
+import { useSettingsStore } from '@/stores/settings';
+const Settings = useSettingsStore();
 </script>
diff --git a/frontend/src/views/client/AddFunds.vue b/frontend/src/views/client/AddFunds.vue
index aff5e14..51f079d 100755
--- a/frontend/src/views/client/AddFunds.vue
+++ b/frontend/src/views/client/AddFunds.vue
@@ -13,7 +13,8 @@ import { MythicalDOM } from '@/mythicalclient/MythicalDOM';
 import Swal from 'sweetalert2';
 import failedAlertSfx from '@/assets/sounds/error.mp3';
 import { useSound } from '@vueuse/sound';
-import Settings from '@/mythicalclient/Settings';
+import { useSettingsStore } from '@/stores/settings';
+const Settings = useSettingsStore();
 
 const router = useRouter();
 const { t } = useI18n();
diff --git a/frontend/src/views/client/auth/ForgotPassword.vue b/frontend/src/views/client/auth/ForgotPassword.vue
index 7d0967f..7f48830 100755
--- a/frontend/src/views/client/auth/ForgotPassword.vue
+++ b/frontend/src/views/client/auth/ForgotPassword.vue
@@ -9,7 +9,8 @@ import failedAlertSfx from '@/assets/sounds/error.mp3';
 import successAlertSfx from '@/assets/sounds/success.mp3';
 import Swal from 'sweetalert2';
 import Turnstile from 'vue-turnstile';
-import Settings from '@/mythicalclient/Settings';
+import { useSettingsStore } from '@/stores/settings';
+const Settings = useSettingsStore();
 import { useRouter } from 'vue-router';
 import Auth from '@/mythicalclient/Auth';
 import { MythicalDOM } from '@/mythicalclient/MythicalDOM';
diff --git a/frontend/src/views/client/auth/Login.vue b/frontend/src/views/client/auth/Login.vue
index 9681d1b..355c486 100755
--- a/frontend/src/views/client/auth/Login.vue
+++ b/frontend/src/views/client/auth/Login.vue
@@ -6,7 +6,8 @@ import FormInput from '@/components/client/Auth/FormInput.vue';
 import Swal from 'sweetalert2';
 import { useRouter } from 'vue-router';
 import Turnstile from 'vue-turnstile';
-import Settings from '@/mythicalclient/Settings';
+import { useSettingsStore } from '@/stores/settings';
+const Settings = useSettingsStore();
 import { useSound } from '@vueuse/sound';
 import failedAlertSfx from '@/assets/sounds/error.mp3';
 import successAlertSfx from '@/assets/sounds/success.mp3';
diff --git a/frontend/src/views/client/auth/Register.vue b/frontend/src/views/client/auth/Register.vue
index 6261237..dbd12db 100755
--- a/frontend/src/views/client/auth/Register.vue
+++ b/frontend/src/views/client/auth/Register.vue
@@ -4,7 +4,8 @@ import Layout from '@/components/client/Layout.vue';
 import FormCard from '@/components/client/Auth/FormCard.vue';
 import FormInput from '@/components/client/Auth/FormInput.vue';
 import Swal from 'sweetalert2';
-import Settings from '@/mythicalclient/Settings';
+import { useSettingsStore } from '@/stores/settings';
+const Settings = useSettingsStore();
 import Turnstile from 'vue-turnstile';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
diff --git a/frontend/src/views/client/auth/ResetPassword.vue b/frontend/src/views/client/auth/ResetPassword.vue
index fa14388..47f2a6f 100755
--- a/frontend/src/views/client/auth/ResetPassword.vue
+++ b/frontend/src/views/client/auth/ResetPassword.vue
@@ -9,7 +9,8 @@ import failedAlertSfx from '@/assets/sounds/error.mp3';
 import successAlertSfx from '@/assets/sounds/success.mp3';
 import Swal from 'sweetalert2';
 import Turnstile from 'vue-turnstile';
-import Settings from '@/mythicalclient/Settings';
+import { useSettingsStore } from '@/stores/settings';
+const Settings = useSettingsStore();
 import { useRouter } from 'vue-router';
 import Auth from '@/mythicalclient/Auth';
 import { MythicalDOM } from '@/mythicalclient/MythicalDOM';
diff --git a/frontend/src/views/client/auth/TwoFactorSetup.vue b/frontend/src/views/client/auth/TwoFactorSetup.vue
index 40a4fe5..87660dc 100755
--- a/frontend/src/views/client/auth/TwoFactorSetup.vue
+++ b/frontend/src/views/client/auth/TwoFactorSetup.vue
@@ -9,7 +9,8 @@ import failedAlertSfx from '@/assets/sounds/error.mp3';
 import successAlertSfx from '@/assets/sounds/success.mp3';
 import Swal from 'sweetalert2';
 import Turnstile from 'vue-turnstile';
-import Settings from '@/mythicalclient/Settings';
+import { useSettingsStore } from '@/stores/settings';
+const Settings = useSettingsStore();
 import { useRouter } from 'vue-router';
 import VueQrcode from 'vue-qrcode';
 import Session from '@/mythicalclient/Session';
diff --git a/frontend/src/views/client/auth/TwoFactorVerify.vue b/frontend/src/views/client/auth/TwoFactorVerify.vue
index b1844a9..34d6d43 100755
--- a/frontend/src/views/client/auth/TwoFactorVerify.vue
+++ b/frontend/src/views/client/auth/TwoFactorVerify.vue
@@ -9,7 +9,8 @@ import failedAlertSfx from '@/assets/sounds/error.mp3';
 import successAlertSfx from '@/assets/sounds/success.mp3';
 import Swal from 'sweetalert2';
 import Turnstile from 'vue-turnstile';
-import Settings from '@/mythicalclient/Settings';
+import { useSettingsStore } from '@/stores/settings';
+const Settings = useSettingsStore();
 import { useRouter } from 'vue-router';
 import Session from '@/mythicalclient/Session';
 import StorageMonitor from '@/mythicalclient/StorageMonitor';
diff --git a/frontend/src/views/client/auth/sso.vue b/frontend/src/views/client/auth/sso.vue
index eb4be73..46d817a 100755
--- a/frontend/src/views/client/auth/sso.vue
+++ b/frontend/src/views/client/auth/sso.vue
@@ -5,7 +5,8 @@ import FormCard from '@/components/client/Auth/FormCard.vue';
 import FormInput from '@/components/client/Auth/FormInput.vue';
 import { useRouter } from 'vue-router';
 import Turnstile from 'vue-turnstile';
-import Settings from '@/mythicalclient/Settings';
+import { useSettingsStore } from '@/stores/settings';
+const Settings = useSettingsStore();
 import { useI18n } from 'vue-i18n';
 import { MythicalDOM } from '@/mythicalclient/MythicalDOM';
 
diff --git a/frontend/src/views/client/invoices/[id].vue b/frontend/src/views/client/invoices/[id].vue
index 991a157..c454f7f 100755
--- a/frontend/src/views/client/invoices/[id].vue
+++ b/frontend/src/views/client/invoices/[id].vue
@@ -5,7 +5,8 @@ import { format } from 'date-fns';
 import LayoutDashboard from '@/components/client/LayoutDashboard.vue';
 import { AlertCircle, ArrowLeft, Download, CreditCard } from 'lucide-vue-next';
 import { MythicalDOM } from '@/mythicalclient/MythicalDOM';
-import Settings from '@/mythicalclient/Settings';
+import { useSettingsStore } from '@/stores/settings';
+const Settings = useSettingsStore();
 import jsPDF from 'jspdf';
 import html2canvas from 'html2canvas';
 import Session from '@/mythicalclient/Session';
diff --git a/frontend/src/views/client/ticket/[id].vue b/frontend/src/views/client/ticket/[id].vue
index 86c62f9..23a61cd 100755
--- a/frontend/src/views/client/ticket/[id].vue
+++ b/frontend/src/views/client/ticket/[id].vue
@@ -20,7 +20,8 @@ import {
 } from 'lucide-vue-next';
 import Tickets from '@/mythicalclient/Tickets';
 import Swal from 'sweetalert2';
-import Settings from '@/mythicalclient/Settings';
+import { useSettingsStore } from '@/stores/settings';
+const Settings = useSettingsStore();
 import { useI18n } from 'vue-i18n';
 import { MythicalDOM } from '@/mythicalclient/MythicalDOM';
 const { t } = useI18n();
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 2fcb1da..3369651 100755
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -993,7 +993,7 @@
     de-indent "^1.0.2"
     he "^1.2.0"
 
-"@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.6.4":
+"@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.6.3", "@vue/devtools-api@^6.6.4":
   version "6.6.4"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
   integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
@@ -2581,6 +2581,14 @@ pify@^2.3.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
+pinia@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.3.1.tgz#54c476675b72f5abcfafa24a7582531ea8c23d94"
+  integrity sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==
+  dependencies:
+    "@vue/devtools-api" "^6.6.3"
+    vue-demi "^0.14.10"
+
 pirates@^4.0.1:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
@@ -3217,7 +3225,7 @@ vscode-uri@^3.0.8:
   resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.8.tgz#1770938d3e72588659a172d0fd4642780083ff9f"
   integrity sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==
 
-vue-demi@latest:
+vue-demi@^0.14.10, vue-demi@latest:
   version "0.14.10"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
   integrity sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==