diff --git a/src/composables/theme.js b/src/composables/theme.js
new file mode 100644
index 0000000..c06b5cf
--- /dev/null
+++ b/src/composables/theme.js
@@ -0,0 +1,52 @@
+import { toRefs, reactive } from 'vue';
+
+const appConfig = reactive({
+    ripple: false,
+    darkTheme: false,
+    inputStyle: 'outlined',
+    menuMode: 'static',
+    theme: 'lara-light-indigo',
+    scale: 14
+});
+
+const layoutState = reactive({
+    staticMenuDesktopInactive: false,
+    overlayMenuActive: false,
+    profileSidebarVisible: false,
+    configSidebarVisible: false,
+    staticMenuMobileActive: false,
+    menuHoverActive: false
+});
+
+export function useThemeService () {
+    const changeThemeSettings = (theme, darkTheme) => {
+        appConfig.theme = theme;
+        appConfig.darkTheme = darkTheme;
+    };
+
+    const setScale = scale => {
+        appConfig.scale = scale;
+    };
+
+    const onMenuToggle = () => {
+        debugger;
+        if (appConfig.menuMode === 'overlay') {
+            layoutState.overlayMenuActive = !layoutState.overlayMenuActive;
+            /*  if (layoutState.overlayMenuActive) {
+                this.overlayOpen.next(null);
+            } */
+        }
+
+        if (window.innerWidth > 991) {
+            layoutState.staticMenuDesktopInactive = !layoutState.staticMenuDesktopInactive;
+        } else {
+            layoutState.staticMenuMobileActive = !layoutState.staticMenuMobileActive;
+
+            /*  if (this.state.staticMenuMobileActive) {
+                this.overlayOpen.next(null);
+            } */
+        }
+    };
+
+    return { appConfig: toRefs(appConfig), layoutState: toRefs(layoutState), changeThemeSettings, setScale, onMenuToggle };
+}
diff --git a/src/layout/AppConfig.vue b/src/layout/AppConfig.vue
index d6651f1..6303c24 100644
--- a/src/layout/AppConfig.vue
+++ b/src/layout/AppConfig.vue
@@ -3,24 +3,24 @@
         <i class="pi pi-cog"></i>
     </button>
 
-    <Sidebar [(visible)]="visible" position="right" [transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'" styleClass="layout-config-sidebar w-20rem">
+    <Sidebar v-model:visible="visible" position="right" :transitionOptions="'.3s cubic-bezier(0, 0, 0.2, 1)'" class="layout-config-sidebar w-20rem">
         <h5>Scale</h5>
         <div class="flex align-items-center">
-            <button icon="pi pi-minus" type="button" @click="decrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem mr-2" :disabled="scale === scales[0]"></button>
+            <Button icon="pi pi-minus" type="button" @click="decrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem mr-2" :disabled="appConfig.scale.value === scales[0]"></Button>
             <div class="flex gap-2 align-items-center">
-                <i class="pi pi-circle-fill text-300" v-for="s in scales" :key="s" :class="{ 'text-primary-500': s === scale }"></i>
+                <i class="pi pi-circle-fill text-300" v-for="s in scales" :key="s" :class="{ 'text-primary-500': s === appConfig.scale.value }"></i>
             </div>
-            <button icon="pi pi-plus" type="button" pButton @click="incrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem ml-2" :disabled="scale === scales[scales.length - 1]"></button>
+            <Button icon="pi pi-plus" type="button" pButton @click="incrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem ml-2" :disabled="appConfig.scale.value === scales[scales.length - 1]"></Button>
         </div>
 
         <template v-if="!minimal">
             <h5>Menu Type</h5>
             <div class="field-radiobutton">
-                <RadioButton name="menuMode" value="static" [(ngModel)]="menuMode" inputId="mode1"></RadioButton>
+                <RadioButton name="menuMode" value="static" v-model="appConfig.menuMode.value" inputId="mode1"></RadioButton>
                 <label for="mode1">Static</label>
             </div>
             <div class="field-radiobutton">
-                <RadioButton name="menuMode" value="overlay" [(ngModel)]="menuMode" inputId="mode2"></RadioButton>
+                <RadioButton name="menuMode" value="overlay" v-model="appConfig.menuMode.value" inputId="mode2"></RadioButton>
                 <label for="mode2">Overlay</label>
             </div>
         </template>
@@ -29,39 +29,39 @@
             <h5>Input Style</h5>
             <div class="flex">
                 <div class="field-radiobutton flex-1">
-                    <RadioButton name="inputStyle" value="outlined" [(ngModel)]="inputStyle" inputId="outlined_input"></RadioButton>
+                    <RadioButton name="inputStyle" value="outlined" v-model="appConfig.inputStyle.value" inputId="outlined_input"></RadioButton>
                     <label for="outlined_input">Outlined</label>
                 </div>
                 <div class="field-radiobutton flex-1">
-                    <RadioButton name="inputStyle" value="filled" [(ngModel)]="inputStyle" inputId="filled_input"></RadioButton>
+                    <RadioButton name="inputStyle" value="filled" v-model="appConfig.inputStyle.value" inputId="filled_input"></RadioButton>
                     <label for="filled_input">Filled</label>
                 </div>
             </div>
 
             <h5>Ripple Effect</h5>
-            <InputSwitch [(ngModel)]="ripple"></InputSwitch>
+            <InputSwitch v-model="appConfig.ripple.value"></InputSwitch>
         </template>
 
         <h5>Bootstrap</h5>
         <div class="grid">
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('bootstrap4-light-blue', 'light')">
-                    <img src="assets/layout/images/themes/bootstrap4-light-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Light Blue" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-light-blue', 'light')">
+                    <img src="@/assets/layout/images/themes/bootstrap4-light-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Light Blue" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('bootstrap4-light-purple', 'light')">
-                    <img src="assets/layout/images/themes/bootstrap4-light-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Light Purple" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-light-purple', 'light')">
+                    <img src="@/assets/layout/images/themes/bootstrap4-light-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Light Purple" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('bootstrap4-dark-blue', 'dark')">
-                    <img src="assets/layout/images/themes/bootstrap4-dark-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Blue" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-dark-blue', 'dark')">
+                    <img src="@/assets/layout/images/themes/bootstrap4-dark-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Blue" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('bootstrap4-dark-purple', 'dark')">
-                    <img src="assets/layout/images/themes/bootstrap4-dark-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Purple" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-dark-purple', 'dark')">
+                    <img src="@/assets/layout/images/themes/bootstrap4-dark-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Purple" />
                 </button>
             </div>
         </div>
@@ -69,23 +69,23 @@
         <h5>Material Design</h5>
         <div class="grid">
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('md-light-indigo', 'light')">
-                    <img src="assets/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-light-indigo', 'light')">
+                    <img src="@/assets/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('md-light-deeppurple', 'light')">
-                    <img src="assets/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light DeepPurple" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-light-deeppurple', 'light')">
+                    <img src="@/assets/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light DeepPurple" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('md-dark-indigo', 'dark')">
-                    <img src="assets/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-dark-indigo', 'dark')">
+                    <img src="@/assets/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('md-dark-deeppurple', 'dark')">
-                    <img src="assets/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark DeepPurple" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-dark-deeppurple', 'dark')">
+                    <img src="@/assets/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark DeepPurple" />
                 </button>
             </div>
         </div>
@@ -93,23 +93,23 @@
         <h5>Material Design Compact</h5>
         <div class="grid">
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('mdc-light-indigo', 'light')">
-                    <img src="assets/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-light-indigo', 'light')">
+                    <img src="@/assets/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('mdc-light-deeppurple', 'light')">
-                    <img src="assets/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light Deep Purple" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-light-deeppurple', 'light')">
+                    <img src="@/assets/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light Deep Purple" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('mdc-dark-indigo', 'dark')">
-                    <img src="assets/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-dark-indigo', 'dark')">
+                    <img src="@/assets/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('mdc-dark-deeppurple', 'dark')">
-                    <img src="assets/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark Deep Purple" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-dark-deeppurple', 'dark')">
+                    <img src="@/assets/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark Deep Purple" />
                 </button>
             </div>
         </div>
@@ -117,8 +117,8 @@
         <h5>Tailwind</h5>
         <div class="grid">
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('tailwind-light', 'light')">
-                    <img src="assets/layout/images/themes/tailwind-light.png" class="w-2rem h-2rem" alt="Tailwind Light" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('tailwind-light', 'light')">
+                    <img src="@/assets/layout/images/themes/tailwind-light.png" class="w-2rem h-2rem" alt="Tailwind Light" />
                 </button>
             </div>
         </div>
@@ -126,8 +126,8 @@
         <h5>Fluent UI</h5>
         <div class="grid">
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('fluent-light', 'light')">
-                    <img src="assets/layout/images/themes/fluent-light.png" class="w-2rem h-2rem" alt="Fluent Light" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('fluent-light', 'light')">
+                    <img src="@/assets/layout/images/themes/fluent-light.png" class="w-2rem h-2rem" alt="Fluent Light" />
                 </button>
             </div>
         </div>
@@ -135,43 +135,43 @@
         <h5>PrimeOne Design - 2022</h5>
         <div class="grid">
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('lara-light-indigo', 'light')">
-                    <img src="assets/layout/images/themes/lara-light-indigo.png" class="w-2rem h-2rem" alt="Lara Light Indigo" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-indigo', 'light')">
+                    <img src="@/assets/layout/images/themes/lara-light-indigo.png" class="w-2rem h-2rem" alt="Lara Light Indigo" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('lara-light-blue', 'light')">
-                    <img src="assets/layout/images/themes/lara-light-blue.png" class="w-2rem h-2rem" alt="Lara Light Blue" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-blue', 'light')">
+                    <img src="@/assets/layout/images/themes/lara-light-blue.png" class="w-2rem h-2rem" alt="Lara Light Blue" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('lara-light-purple', 'light')">
-                    <img src="assets/layout/images/themes/lara-light-purple.png" class="w-2rem h-2rem" alt="Lara Light Purple" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-purple', 'light')">
+                    <img src="@/assets/layout/images/themes/lara-light-purple.png" class="w-2rem h-2rem" alt="Lara Light Purple" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('lara-light-teal', 'light')">
-                    <img src="assets/layout/images/themes/lara-light-teal.png" class="w-2rem h-2rem" alt="Lara Light Teal" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-teal', 'light')">
+                    <img src="@/assets/layout/images/themes/lara-light-teal.png" class="w-2rem h-2rem" alt="Lara Light Teal" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('lara-dark-indigo', 'dark')">
-                    <img src="assets/layout/images/themes/lara-dark-indigo.png" class="w-2rem h-2rem" alt="Lara Dark Indigo" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-indigo', 'dark')">
+                    <img src="@/assets/layout/images/themes/lara-dark-indigo.png" class="w-2rem h-2rem" alt="Lara Dark Indigo" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('lara-dark-blue', 'dark')">
-                    <img src="assets/layout/images/themes/lara-dark-blue.png" class="w-2rem h-2rem" alt="Lara Dark Blue" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-blue', 'dark')">
+                    <img src="@/assets/layout/images/themes/lara-dark-blue.png" class="w-2rem h-2rem" alt="Lara Dark Blue" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('lara-dark-purple', 'dark')">
-                    <img src="assets/layout/images/themes/lara-dark-purple.png" class="w-2rem h-2rem" alt="Lara Dark Purple" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-purple', 'dark')">
+                    <img src="@/assets/layout/images/themes/lara-dark-purple.png" class="w-2rem h-2rem" alt="Lara Dark Purple" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('lara-dark-teal', 'dark')">
-                    <img src="assets/layout/images/themes/lara-dark-teal.png" class="w-2rem h-2rem" alt="Lara Dark Teal" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-teal', 'dark')">
+                    <img src="@/assets/layout/images/themes/lara-dark-teal.png" class="w-2rem h-2rem" alt="Lara Dark Teal" />
                 </button>
             </div>
         </div>
@@ -179,63 +179,63 @@
         <h5>PrimeOne Design - 2021</h5>
         <div class="grid">
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('saga-blue', 'light')">
-                    <img src="assets/layout/images/themes/saga-blue.png" class="w-2rem h-2rem" alt="Saga Blue" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-blue', 'light')">
+                    <img src="@/assets/layout/images/themes/saga-blue.png" class="w-2rem h-2rem" alt="Saga Blue" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('saga-green', 'light')">
-                    <img src="assets/layout/images/themes/saga-green.png" class="w-2rem h-2rem" alt="Saga Green" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-green', 'light')">
+                    <img src="@/assets/layout/images/themes/saga-green.png" class="w-2rem h-2rem" alt="Saga Green" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('saga-orange', 'light')">
-                    <img src="assets/layout/images/themes/saga-orange.png" class="w-2rem h-2rem" alt="Saga Orange" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-orange', 'light')">
+                    <img src="@/assets/layout/images/themes/saga-orange.png" class="w-2rem h-2rem" alt="Saga Orange" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('saga-purple', 'light')">
-                    <img src="assets/layout/images/themes/saga-purple.png" class="w-2rem h-2rem" alt="Saga Purple" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-purple', 'light')">
+                    <img src="@/assets/layout/images/themes/saga-purple.png" class="w-2rem h-2rem" alt="Saga Purple" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('vela-blue', 'dark')">
-                    <img src="assets/layout/images/themes/vela-blue.png" class="w-2rem h-2rem" alt="Vela Blue" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-blue', 'dark')">
+                    <img src="@/assets/layout/images/themes/vela-blue.png" class="w-2rem h-2rem" alt="Vela Blue" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('vela-green', 'dark')">
-                    <img src="assets/layout/images/themes/vela-green.png" class="w-2rem h-2rem" alt="Vela Green" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-green', 'dark')">
+                    <img src="@/assets/layout/images/themes/vela-green.png" class="w-2rem h-2rem" alt="Vela Green" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('vela-orange', 'dark')">
-                    <img src="assets/layout/images/themes/vela-orange.png" class="w-2rem h-2rem" alt="Vela Orange" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-orange', 'dark')">
+                    <img src="@/assets/layout/images/themes/vela-orange.png" class="w-2rem h-2rem" alt="Vela Orange" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('vela-purple', 'dark')">
-                    <img src="assets/layout/images/themes/vela-purple.png" class="w-2rem h-2rem" alt="Vela Purple" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-purple', 'dark')">
+                    <img src="@/assets/layout/images/themes/vela-purple.png" class="w-2rem h-2rem" alt="Vela Purple" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('arya-blue', 'dark')">
-                    <img src="assets/layout/images/themes/arya-blue.png" class="w-2rem h-2rem" alt="Arya Blue" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-blue', 'dark')">
+                    <img src="@/assets/layout/images/themes/arya-blue.png" class="w-2rem h-2rem" alt="Arya Blue" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('arya-green', 'dark')">
-                    <img src="assets/layout/images/themes/arya-green.png" class="w-2rem h-2rem" alt="Arya Green" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-green', 'dark')">
+                    <img src="@/assets/layout/images/themes/arya-green.png" class="w-2rem h-2rem" alt="Arya Green" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('arya-orange', 'dark')">
-                    <img src="assets/layout/images/themes/arya-orange.png" class="w-2rem h-2rem" alt="Arya Orange" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-orange', 'dark')">
+                    <img src="@/assets/layout/images/themes/arya-orange.png" class="w-2rem h-2rem" alt="Arya Orange" />
                 </button>
             </div>
             <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="changeTheme('arya-purple', 'dark')">
-                    <img src="assets/layout/images/themes/arya-purple.png" class="w-2rem h-2rem" alt="Arya Purple" />
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-purple', 'dark')">
+                    <img src="@/assets/layout/images/themes/arya-purple.png" class="w-2rem h-2rem" alt="Arya Purple" />
                 </button>
             </div>
         </div>
@@ -244,8 +244,46 @@
 
 <script setup>
 import { ref } from 'vue';
+import { useThemeService } from '@/composables/theme';
 
 const scales = ref([12, 13, 14, 15, 16]);
+const visible = ref(false);
+
+const { changeThemeSettings, setScale, appConfig } = useThemeService();
+
+const onConfigButtonClick = () => {
+    visible.value = !visible.value;
+};
+
+const onChangeTheme = (theme, mode) => {
+    const elementId = 'theme-css';
+    const linkElement = document.getElementById(elementId);
+    const cloneLinkElement = linkElement.cloneNode(true);
+    const newThemeUrl = linkElement.getAttribute('href').replace(appConfig.theme.value, theme);
+    cloneLinkElement.setAttribute('id', elementId + '-clone');
+    cloneLinkElement.setAttribute('href', newThemeUrl);
+    cloneLinkElement.addEventListener('load', () => {
+        linkElement.remove();
+        cloneLinkElement.setAttribute('id', elementId);
+    });
+    linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
+
+    changeThemeSettings(theme, mode === 'dark');
+};
+
+const decrementScale = () => {
+    setScale(appConfig.scale.value - 1);
+    applyScale();
+};
+
+const incrementScale = () => {
+    setScale(appConfig.scale.value + 1);
+    console.log(appConfig.scale);
+    applyScale();
+};
+const applyScale = () => {
+    document.documentElement.style.fontSize = appConfig.scale.value + 'px';
+};
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/layout/AppFooter.vue b/src/layout/AppFooter.vue
index 73c01b8..6d48618 100644
--- a/src/layout/AppFooter.vue
+++ b/src/layout/AppFooter.vue
@@ -1,9 +1,18 @@
 <template>
     <div class="layout-footer">
-        <img src="assets/layout/images/{{layoutService.config.colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="Logo" height="20" class="mr-2" />
+        <img :src="logoUrl()" alt="Logo" height="20" class="mr-2" />
         by
         <span class="font-medium ml-2">PrimeNG</span>
     </div>
 </template>
 
+<script setup>
+import { useThemeService } from '@/composables/theme';
+
+const { appConfig } = useThemeService();
+
+const logoUrl = () => {
+    return new URL(`/src/assets/layout/images/${appConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
+};
+</script>
 <style lang="scss" scoped></style>
diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
index bccb0d2..db22a0a 100644
--- a/src/layout/AppLayout.vue
+++ b/src/layout/AppLayout.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="layout-wrapper">
+    <div class="layout-wrapper" :class="containerClass">
         <app-topbar></app-topbar>
         <div class="layout-sidebar">
             <app-sidebar></app-sidebar>
@@ -16,10 +16,29 @@
 </template>
 
 <script setup>
+import { computed } from 'vue';
 import AppTopbar from './AppTopbar.vue';
 import AppFooter from './AppFooter.vue';
 import AppSidebar from './AppSidebar.vue';
 import AppConfig from './AppConfig.vue';
+
+import { useThemeService } from '@/composables/theme';
+
+const { appConfig, layoutState } = useThemeService();
+
+const containerClass = computed(() => {
+    return {
+        'layout-theme-light': appConfig.darkTheme.value === 'light',
+        'layout-theme-dark': appConfig.darkTheme.value === 'dark',
+        'layout-overlay': appConfig.menuMode.value === 'overlay',
+        'layout-static': appConfig.menuMode.value === 'static',
+        'layout-static-inactive': layoutState.staticMenuDesktopInactive.value && appConfig.menuMode.value === 'static',
+        'layout-overlay-active': layoutState.overlayMenuActive.value,
+        'layout-mobile-active': layoutState.staticMenuMobileActive.value,
+        'p-input-filled': appConfig.inputStyle.value === 'filled',
+        'p-ripple-disabled': !appConfig.ripple.value
+    };
+});
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/layout/AppTopbar.vue b/src/layout/AppTopbar.vue
index f1b9c08..e58e715 100644
--- a/src/layout/AppTopbar.vue
+++ b/src/layout/AppTopbar.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="layout-topbar">
         <a class="layout-topbar-logo">
-            <img src="assets/layout/images/.svg" alt="logo" />
+            <img :src="logoUrl()" alt="logo" />
             <span>SAKAI</span>
         </a>
 
-        <button class="p-link layout-menu-button layout-topbar-button">
+        <button class="p-link layout-menu-button layout-topbar-button" @click="onMenuToggle()">
             <i class="pi pi-bars"></i>
         </button>
 
@@ -30,6 +30,14 @@
     </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { useThemeService } from '@/composables/theme';
+
+const { appConfig, onMenuToggle } = useThemeService();
+
+const logoUrl = () => {
+    return new URL(`/src/assets/layout/images/${appConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
+};
+</script>
 
 <style lang="scss" scoped></style>