diff --git a/packages/effects/layouts/src/widgets/preferences/preferences-button.vue b/packages/effects/layouts/src/widgets/preferences/preferences-button.vue
index 1ef06fde6..451c936e8 100644
--- a/packages/effects/layouts/src/widgets/preferences/preferences-button.vue
+++ b/packages/effects/layouts/src/widgets/preferences/preferences-button.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 import { Settings } from '@vben/icons';
 
 import { VbenIconButton } from '@vben-core/shadcn-ui';
@@ -10,10 +12,13 @@ const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();
 function clearPreferencesAndLogout() {
   emit('clearPreferencesAndLogout');
 }
+
+const preferencesRef = ref<InstanceType<typeof Preferences> | null>(null);
+
 </script>
 <template>
-  <Preferences @clear-preferences-and-logout="clearPreferencesAndLogout">
-    <VbenIconButton class="hover:animate-[shrink_0.3s_ease-in-out]">
+  <Preferences ref="preferencesRef" @clear-preferences-and-logout="clearPreferencesAndLogout">
+    <VbenIconButton class="hover:animate-[shrink_0.3s_ease-in-out]" @click="preferencesRef?.open();">
       <Settings class="size-4 text-foreground" />
     </VbenIconButton>
   </Preferences>