diff --git a/packages/components/src/components/modal/Modal.vue b/packages/components/src/components/modal/Modal.vue
index 61df3e2f..259914be 100644
--- a/packages/components/src/components/modal/Modal.vue
+++ b/packages/components/src/components/modal/Modal.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { PropType } from "vue";
-import { computed, ref } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 import { IconClose } from "../../icons/icons";
 
 const props = defineProps({
@@ -27,6 +27,7 @@ const props = defineProps({
 const emit = defineEmits(["update:visible", "close"]);
 
 const rootVisible = ref(false);
+const modelWrapper = ref<HTMLElement>();
 
 const wrapperClasses = computed(() => {
   return {
@@ -44,11 +45,23 @@ function handleClose() {
   emit("update:visible", false);
   emit("close");
 }
+
+watch(
+  () => props.visible,
+  () => {
+    if (props.visible) {
+      nextTick(() => {
+        modelWrapper.value?.focus();
+      });
+    }
+  }
+);
 </script>
 <template>
   <Teleport :disabled="true" to="body">
     <div
       v-show="rootVisible"
+      ref="modelWrapper"
       :class="wrapperClasses"
       aria-modal="true"
       class="modal-wrapper"
diff --git a/src/modules/interface/themes/Visual.vue b/src/modules/interface/themes/Visual.vue
index e02b6a26..8c452100 100644
--- a/src/modules/interface/themes/Visual.vue
+++ b/src/modules/interface/themes/Visual.vue
@@ -13,14 +13,14 @@ import {
   VTabItem,
   VTabs,
 } from "@halo-dev/components";
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, ref, shallowRef } from "vue";
 
 const activeId = ref("general");
 const deviceActiveId = ref("desktop");
 const attachmentSelectVisible = ref(false);
 const settingRootVisible = ref(false);
 const settingVisible = ref(false);
-const devices = ref([
+const devices = shallowRef([
   {
     id: "desktop",
     icon: IconComputer,