diff --git a/index.html b/index.html
index 38b4931..a55b027 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
       <link rel="icon" href="/favicon.ico">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Sakai Vue</title>
-      <link id="theme-css" rel="stylesheet" type="text/css" href="/themes/lara-light-indigo/theme.css">
+      <link id="theme-css" rel="stylesheet" type="text/css" href="/themes/aura-light-green/theme.css">
 </head>
 
 <body>
diff --git a/src/layout/AppConfig.vue b/src/layout/AppConfig.vue
index c05460b..4964d53 100644
--- a/src/layout/AppConfig.vue
+++ b/src/layout/AppConfig.vue
@@ -1,10 +1,6 @@
 <script setup>
-import RadioButton from 'primevue/radiobutton';
-import Button from 'primevue/button';
-import InputSwitch from 'primevue/inputswitch';
-import Sidebar from 'primevue/sidebar';
-
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
+import { usePrimeVue } from 'primevue/config';
 import { useLayout } from '@/layout/composables/layout';
 
 defineProps({
@@ -13,27 +9,33 @@ defineProps({
         default: false
     }
 });
+
+const $primevue = usePrimeVue();
+const inputStyle = computed(() => $primevue.config.inputStyle || 'outlined');
+
 const scales = ref([12, 13, 14, 15, 16]);
 const visible = ref(false);
+const inputStyles = ref([
+    { label: 'Outlined', value: 'outlined' },
+    { label: 'Filled', value: 'filled' }
+]);
+const menuModes = ref([
+    { label: 'Static', value: 'static' },
+    { label: 'Overlay', value: 'overlay' }
+]);
+const compactMaterial = ref(false);
+const primaryFocusRing = ref(true);
 
-const { changeThemeSettings, setScale, layoutConfig } = useLayout();
+const { setScale, layoutConfig } = useLayout();
 
 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(layoutConfig.theme.value, theme);
-    cloneLinkElement.setAttribute('id', elementId + '-clone');
-    cloneLinkElement.setAttribute('href', newThemeUrl);
-    cloneLinkElement.addEventListener('load', () => {
-        linkElement.remove();
-        cloneLinkElement.setAttribute('id', elementId);
-        changeThemeSettings(theme, mode === 'dark');
+    $primevue.changeTheme(layoutConfig.theme.value, theme, 'theme-css', () => {
+        layoutConfig.theme.value = theme;
+        layoutConfig.darkTheme.value = mode;
     });
-    linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
 };
 const decrementScale = () => {
     setScale(layoutConfig.scale.value - 1);
@@ -46,6 +48,71 @@ const incrementScale = () => {
 const applyScale = () => {
     document.documentElement.style.fontSize = layoutConfig.scale.value + 'px';
 };
+const onInputStyleChange = (value) => {
+    $primevue.config.inputStyle = value;
+};
+const onMenuModeChange = (value) => {
+    layoutConfig.menuMode.value = value;
+};
+const onRippleChange = (value) => {
+    layoutConfig.ripple.value = value;
+};
+const onDarkModeChange = (value) => {
+    const newThemeName = value ? layoutConfig.theme.value.replace('light', 'dark') : layoutConfig.theme.value.replace('dark', 'light');
+
+    layoutConfig.darkTheme.value = value;
+    onChangeTheme(newThemeName, value);
+};
+const changeTheme = (theme, color) => {
+    let newTheme, dark;
+
+    newTheme = theme + '-' + (layoutConfig.darkTheme.value ? 'dark' : 'light');
+
+    if (color) {
+        newTheme += '-' + color;
+    }
+
+    if (newTheme.startsWith('md-') && compactMaterial.value) {
+        newTheme = newTheme.replace('md-', 'mdc-');
+    }
+
+    dark = layoutConfig.darkTheme.value;
+
+    onChangeTheme(newTheme, dark);
+};
+const isThemeActive = (themeFamily, color) => {
+    let themeName;
+    let themePrefix = themeFamily === 'md' && compactMaterial.value ? 'mdc' : themeFamily;
+
+    themeName = themePrefix + (layoutConfig.darkTheme.value ? '-dark' : '-light');
+
+    if (color) {
+        themeName += '-' + color;
+    }
+
+    return layoutConfig.theme.value === themeName;
+};
+const onCompactMaterialChange = (value) => {
+    compactMaterial.value = value;
+
+    if (layoutConfig.theme.value.startsWith('md')) {
+        let tokens = layoutConfig.theme.value.split('-');
+
+        changeTheme(tokens[0].substring(0, 2), tokens[2]);
+    }
+};
+const onFocusRingColorChange = (value) => {
+    primaryFocusRing.value = value;
+    let root = document.documentElement;
+
+    if (value) {
+        if (layoutConfig.darkTheme.value) root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
+        else root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
+    } else {
+        if (layoutConfig.darkTheme.value) root.style.setProperty('--p-focus-ring-color', 'var(--surface-500)');
+        else root.style.setProperty('--p-focus-ring-color', 'var(--surface-900)');
+    }
+};
 </script>
 
 <template>
@@ -53,244 +120,286 @@ const applyScale = () => {
         <i class="pi pi-cog"></i>
     </button>
 
-    <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="layoutConfig.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 === layoutConfig.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="layoutConfig.scale.value === scales[scales.length - 1]"></Button>
-        </div>
+    <Sidebar v-model:visible="visible" position="right" class="layout-config-sidebar w-26rem" pt:closeButton="ml-auto">
+        <div class="p-2">
+            <section class="pb-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
+                <span class="text-xl font-semibold">Scale</span>
+                <div class="flex align-items-center gap-2 border-1 surface-border py-1 px-2" style="border-radius: 30px">
+                    <Button icon="pi pi-minus" @click="decrementScale" text rounded :disabled="layoutConfig.scale.value === scales[0]" />
+                    <i v-for="s in scales" :key="s" :class="['pi pi-circle-fill text-sm text-200', { 'text-lg text-primary': s === layoutConfig.scale.value }]" />
 
-        <template v-if="!simple">
-            <h5>Menu Type</h5>
-            <div class="flex">
-                <div class="field-radiobutton flex-1">
-                    <RadioButton name="menuMode" value="static" v-model="layoutConfig.menuMode.value" inputId="mode1"></RadioButton>
-                    <label for="mode1">Static</label>
+                    <Button icon="pi pi-plus" @click="incrementScale" text rounded :disabled="layoutConfig.scale.value === scales[scales.length - 1]" />
+                </div>
+            </section>
+
+            <section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
+                <span :class="['text-xl font-semibold']">Dark Mode</span>
+                <InputSwitch :modelValue="layoutConfig.darkTheme.value" @update:modelValue="onDarkModeChange" />
+            </section>
+
+            <template v-if="!simple">
+                <section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
+                    <span class="text-xl font-semibold">Menu Type</span>
+                    <SelectButton :modelValue="layoutConfig.menuMode.value" @update:modelValue="onMenuModeChange" :options="menuModes" optionLabel="label" optionValue="value" :allowEmpty="false" />
+                </section>
+
+                <section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
+                    <span class="text-xl font-semibold">Input Variant</span>
+                    <SelectButton :modelValue="inputStyle" @update:modelValue="onInputStyleChange" :options="inputStyles" optionLabel="label" optionValue="value" :allowEmpty="false" />
+                </section>
+            </template>
+
+            <section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
+                <span class="text-xl font-semibold">Ripple Effect</span>
+                <InputSwitch :modelValue="layoutConfig.ripple.value" @update:modelValue="onRippleChange" />
+            </section>
+
+            <section class="py-4 border-bottom-1 surface-border">
+                <div class="text-xl font-semibold mb-3">Themes</div>
+                <div class="flex align-items-center gap-2 mb-3">
+                    <img src="https://primefaces.org/cdn/primevue/images/themes/aura.png" alt="Aura" style="width: 1.5rem" />
+                    <span class="font-medium">Aura</span>
+                </div>
+                <div class="flex align-items-center justify-content-between gap-3 mb-3">
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'green'), 'hover:border-500 surface-border': !isThemeActive('aura', 'green') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'green')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4dac9c 0%, rgba(77, 172, 156, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'cyan'), 'hover:border-500 surface-border': !isThemeActive('aura', 'cyan') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'cyan')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'blue'), 'hover:border-500 surface-border': !isThemeActive('aura', 'blue') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'blue')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4378e6 0%, rgba(67, 120, 230, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'indigo'), 'hover:border-500 surface-border': !isThemeActive('aura', 'indigo') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'indigo')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #585fe0 0%, rgba(88, 95, 224, 0.5) 100%)"></span>
+                    </button>
+                </div>
+                <div class="flex align-items-center justify-content-between gap-3 mb-3">
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'purple'), 'hover:border-500 surface-border': !isThemeActive('aura', 'purple') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'purple')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #7758e4 0%, rgba(119, 88, 228, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'amber'), 'hover:border-500 surface-border': !isThemeActive('aura', 'amber') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'amber')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #f59e0b 0%, rgba(245, 158, 11, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'teal'), 'hover:border-500 surface-border': !isThemeActive('aura', 'teal') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'teal')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #14b8a6 0%, rgba(20, 184, 166, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'pink'), 'hover:border-500 surface-border': !isThemeActive('aura', 'pink') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'pink')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #ec4899 0%, rgba(236, 72, 153, 0.5) 100%)"></span>
+                    </button>
+                </div>
+                <div class="flex align-items-center justify-content-between gap-3">
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'noir'), 'hover:border-500 surface-border': !isThemeActive('aura', 'noir') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'noir')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #0f172a 0%, rgba(0, 0, 0, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'lime'), 'hover:border-500 surface-border': !isThemeActive('aura', 'lime') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'lime')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #84cc16 0%, rgb(132, 204, 22, 0.5) 100%)"></span>
+                    </button>
+                    <span class="w-3"></span>
+                    <span class="w-3"></span>
                 </div>
 
-                <div class="field-radiobutton flex-1">
-                    <RadioButton name="menuMode" value="overlay" v-model="layoutConfig.menuMode.value" inputId="mode2"></RadioButton>
-                    <label for="mode2">Overlay</label>
+                <section class="pt-4 flex align-items-center justify-content-between">
+                    <span class="text-sm">Primary Focus Ring</span>
+                    <InputSwitch :modelValue="primaryFocusRing" @update:modelValue="onFocusRingColorChange" />
+                </section>
+            </section>
+
+            <section class="py-4 border-bottom-1 surface-border">
+                <div class="flex align-items-center gap-2 mb-3">
+                    <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="border-circle" style="width: 1.5rem" />
+                    <span class="font-medium">Lara</span>
                 </div>
-            </div>
-        </template>
-
-        <template v-if="!simple">
-            <h5>Input Style</h5>
-            <div class="flex">
-                <div class="field-radiobutton flex-1">
-                    <RadioButton name="inputStyle" value="outlined" v-model="layoutConfig.inputStyle.value" inputId="outlined_input"></RadioButton>
-                    <label for="outlined_input">Outlined</label>
+                <div class="flex align-items-center justify-content-between gap-3 mb-3">
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('lara', 'green'), 'hover:border-500 surface-border': !isThemeActive('lara', 'green') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('lara', 'green')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4dac9c 0%, rgba(77, 172, 156, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('lara', 'cyan'), 'hover:border-500 surface-border': !isThemeActive('lara', 'cyan') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('lara', 'cyan')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('lara', 'blue'), 'hover:border-500 surface-border': !isThemeActive('lara', 'blue') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('lara', 'blue')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4378e6 0%, rgba(67, 120, 230, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('lara', 'indigo'), 'hover:border-500 surface-border': !isThemeActive('lara', 'indigo') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('lara', 'indigo')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #585fe0 0%, rgba(88, 95, 224, 0.5) 100%)"></span>
+                    </button>
                 </div>
-                <div class="field-radiobutton flex-1">
-                    <RadioButton name="inputStyle" value="filled" v-model="layoutConfig.inputStyle.value" inputId="filled_input"></RadioButton>
-                    <label for="filled_input">Filled</label>
+                <div class="flex align-items-center justify-content-between gap-3">
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('lara', 'purple'), 'hover:border-500 surface-border': !isThemeActive('lara', 'purple') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('lara', 'purple')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #7758e4 0%, rgba(119, 88, 228, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('lara', 'amber'), 'hover:border-500 surface-border': !isThemeActive('lara', 'amber') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('lara', 'amber')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #f59e0b 0%, rgba(245, 158, 11, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('lara', 'teal'), 'hover:border-500 surface-border': !isThemeActive('lara', 'teal') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('lara', 'teal')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #14b8a6 0%, rgba(20, 184, 166, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('lara', 'pink'), 'hover:border-500 surface-border': !isThemeActive('lara', 'pink') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('lara', 'pink')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #ec4899 0%, rgba(236, 72, 153, 0.5) 100%)"></span>
+                    </button>
                 </div>
-            </div>
+            </section>
 
-            <h5>Ripple Effect</h5>
-            <InputSwitch v-model="layoutConfig.ripple.value"></InputSwitch>
-        </template>
-
-        <h5>Bootstrap</h5>
-        <div class="grid">
-            <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-light-blue', 'light')">
-                    <img src="/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="onChangeTheme('bootstrap4-light-purple', 'light')">
-                    <img src="/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="onChangeTheme('bootstrap4-dark-blue', 'dark')">
-                    <img src="/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="onChangeTheme('bootstrap4-dark-purple', 'dark')">
-                    <img src="/layout/images/themes/bootstrap4-dark-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Purple" />
-                </button>
-            </div>
-        </div>
-
-        <h5>Material Design</h5>
-        <div class="grid">
-            <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-light-indigo', 'light')">
-                    <img src="/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="onChangeTheme('md-light-deeppurple', 'light')">
-                    <img src="/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="onChangeTheme('md-dark-indigo', 'dark')">
-                    <img src="/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="onChangeTheme('md-dark-deeppurple', 'dark')">
-                    <img src="/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark DeepPurple" />
-                </button>
-            </div>
-        </div>
-
-        <h5>Material Design Compact</h5>
-        <div class="grid">
-            <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-light-indigo', 'light')">
-                    <img src="/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="onChangeTheme('mdc-light-deeppurple', 'light')">
-                    <img src="/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="onChangeTheme('mdc-dark-indigo', 'dark')">
-                    <img src="/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="onChangeTheme('mdc-dark-deeppurple', 'dark')">
-                    <img src="/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark Deep Purple" />
-                </button>
-            </div>
-        </div>
-
-        <h5>Tailwind</h5>
-        <div class="grid">
-            <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('tailwind-light', 'light')">
-                    <img src="/layout/images/themes/tailwind-light.png" class="w-2rem h-2rem" alt="Tailwind Light" />
-                </button>
-            </div>
-        </div>
-
-        <h5>Fluent UI</h5>
-        <div class="grid">
-            <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('fluent-light', 'light')">
-                    <img src="/layout/images/themes/fluent-light.png" class="w-2rem h-2rem" alt="Fluent Light" />
-                </button>
-            </div>
-        </div>
-
-        <h5>PrimeOne Design - 2022</h5>
-        <div class="grid">
-            <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-indigo', 'light')">
-                    <img src="/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="onChangeTheme('lara-light-blue', 'light')">
-                    <img src="/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="onChangeTheme('lara-light-purple', 'light')">
-                    <img src="/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="onChangeTheme('lara-light-teal', 'light')">
-                    <img src="/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="onChangeTheme('lara-dark-indigo', 'dark')">
-                    <img src="/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="onChangeTheme('lara-dark-blue', 'dark')">
-                    <img src="/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="onChangeTheme('lara-dark-purple', 'dark')">
-                    <img src="/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="onChangeTheme('lara-dark-teal', 'dark')">
-                    <img src="/layout/images/themes/lara-dark-teal.png" class="w-2rem h-2rem" alt="Lara Dark Teal" />
-                </button>
-            </div>
-        </div>
-
-        <h5>PrimeOne Design - 2021</h5>
-        <div class="grid">
-            <div class="col-3">
-                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-blue', 'light')">
-                    <img src="/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="onChangeTheme('saga-green', 'light')">
-                    <img src="/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="onChangeTheme('saga-orange', 'light')">
-                    <img src="/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="onChangeTheme('saga-purple', 'light')">
-                    <img src="/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="onChangeTheme('vela-blue', 'dark')">
-                    <img src="/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="onChangeTheme('vela-green', 'dark')">
-                    <img src="/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="onChangeTheme('vela-orange', 'dark')">
-                    <img src="/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="onChangeTheme('vela-purple', 'dark')">
-                    <img src="/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="onChangeTheme('arya-blue', 'dark')">
-                    <img src="/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="onChangeTheme('arya-green', 'dark')">
-                    <img src="/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="onChangeTheme('arya-orange', 'dark')">
-                    <img src="/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="onChangeTheme('arya-purple', 'dark')">
-                    <img src="/layout/images/themes/arya-purple.png" class="w-2rem h-2rem" alt="Arya Purple" />
-                </button>
-            </div>
+            <section class="py-4 border-bottom-1 surface-border">
+                <div class="flex align-items-center gap-2 mb-3">
+                    <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Design" class="border-circle" style="width: 1.5rem" />
+                    <span class="font-medium">Material Design</span>
+                    <div class="ml-auto flex align-items-center gap-2">
+                        <label for="material-condensed" class="text-sm">Condensed</label>
+                        <InputSwitch inputId="material-condensed" :modelValue="compactMaterial" @update:modelValue="onCompactMaterialChange" class="ml-auto" />
+                    </div>
+                </div>
+                <div class="flex align-items-center justify-content-between gap-3">
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('md', 'indigo'), 'hover:border-500 surface-border': !isThemeActive('md', 'indigo') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('md', 'indigo')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #0565f2 0%, rgba(5, 101, 242, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('md', 'deeppurple'), 'hover:border-500 surface-border': !isThemeActive('md', 'deeppurple') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('md', 'deeppurple')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #702f92 0%, rgba(112, 47, 146, 0.5) 100%)"></span>
+                    </button>
+                    <div class="w-3"></div>
+                    <div class="w-3"></div>
+                </div>
+            </section>
         </div>
     </Sidebar>
 </template>
diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
index 6dc0c9c..70aaed3 100644
--- a/src/layout/AppLayout.vue
+++ b/src/layout/AppLayout.vue
@@ -27,8 +27,7 @@ const containerClass = computed(() => {
         'layout-static-inactive': layoutState.staticMenuDesktopInactive.value && layoutConfig.menuMode.value === 'static',
         'layout-overlay-active': layoutState.overlayMenuActive.value,
         'layout-mobile-active': layoutState.staticMenuMobileActive.value,
-        'p-input-filled': layoutConfig.inputStyle.value === 'filled',
-        'p-ripple-disabled': !layoutConfig.ripple.value
+        'p-ripple-disabled': layoutConfig.ripple.value === false
     };
 });
 const bindOutsideClickListener = () => {
diff --git a/src/layout/composables/layout.js b/src/layout/composables/layout.js
index 141a381..2b678d2 100644
--- a/src/layout/composables/layout.js
+++ b/src/layout/composables/layout.js
@@ -1,11 +1,11 @@
 import { toRefs, reactive, computed } from 'vue';
 
 const layoutConfig = reactive({
-    ripple: false,
+    ripple: true,
     darkTheme: false,
     inputStyle: 'outlined',
     menuMode: 'static',
-    theme: 'lara-light-indigo',
+    theme: 'aura-light-green',
     scale: 14,
     activeMenuItem: null
 });
@@ -20,11 +20,6 @@ const layoutState = reactive({
 });
 
 export function useLayout() {
-    const changeThemeSettings = (theme, darkTheme) => {
-        layoutConfig.darkTheme = darkTheme;
-        layoutConfig.theme = theme;
-    };
-
     const setScale = (scale) => {
         layoutConfig.scale = scale;
     };
@@ -49,5 +44,5 @@ export function useLayout() {
 
     const isDarkTheme = computed(() => layoutConfig.darkTheme);
 
-    return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), changeThemeSettings, setScale, onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem };
+    return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), setScale, onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem };
 }
