diff --git a/console/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue b/console/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue
index dc4f39e95..f33dac967 100644
--- a/console/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue
+++ b/console/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue
@@ -16,12 +16,13 @@ import { useI18n } from "vue-i18n";
 
 const queryClient = useQueryClient();
 const { t } = useI18n();
-const visible = defineModel({ type: Boolean, default: false });
 
 const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
+const modal = ref();
+
 const formState = ref<
   Omit<PersonalAccessToken, "spec"> & {
     spec: PatSpec;
@@ -71,7 +72,6 @@ const {
   },
   onSuccess(data) {
     queryClient.invalidateQueries({ queryKey: ["personal-access-tokens"] });
-    visible.value = false;
     emit("close");
 
     setTimeout(() => {
@@ -100,7 +100,7 @@ const { copy } = useClipboard({
 
 <template>
   <VModal
-    v-model:visible="visible"
+    ref="modal"
     :width="700"
     :title="$t('core.uc_profile.pat.creation_modal.title')"
     @close="emit('close')"
@@ -246,7 +246,7 @@ const { copy } = useClipboard({
           :text="$t('core.common.buttons.submit')"
           @submit="$formkit.submit('pat-creation-form')"
         />
-        <VButton @click="visible = false">
+        <VButton @click="modal.close()">
           {{ $t("core.common.buttons.cancel_and_shortcut") }}
         </VButton>
       </VSpace>
diff --git a/console/uc-src/modules/profile/tabs/PersonalAccessTokens.vue b/console/uc-src/modules/profile/tabs/PersonalAccessTokens.vue
index 19bd81ac9..155485b3f 100644
--- a/console/uc-src/modules/profile/tabs/PersonalAccessTokens.vue
+++ b/console/uc-src/modules/profile/tabs/PersonalAccessTokens.vue
@@ -11,7 +11,6 @@ import { apiClient } from "@/utils/api-client";
 import type { PersonalAccessToken } from "@halo-dev/api-client";
 import { useQuery } from "@tanstack/vue-query";
 import PersonalAccessTokenCreationModal from "../components/PersonalAccessTokenCreationModal.vue";
-import { nextTick } from "vue";
 import PersonalAccessTokenListItem from "../components/PersonalAccessTokenListItem.vue";
 
 const {
@@ -32,28 +31,11 @@ const {
   },
 });
 
-// fixme: Refactor VModal component to simplify the code
-// use v-if to control the visibility of the modal
 const creationModal = ref(false);
-const creationModalVisible = ref(false);
-
-function handleOpenCreationModal() {
-  creationModal.value = true;
-  nextTick(() => {
-    creationModalVisible.value = true;
-  });
-}
-
-function onCreationModalClose() {
-  creationModalVisible.value = false;
-  setTimeout(() => {
-    creationModal.value = false;
-  }, 200);
-}
 </script>
 <template>
   <div v-if="pats?.length" class="my-5 flex justify-end">
-    <VButton type="secondary" @click="handleOpenCreationModal">
+    <VButton type="secondary" @click="creationModal = true">
       <template #icon>
         <IconAddCircle class="h-full w-full" />
       </template>
@@ -73,7 +55,7 @@ function onCreationModalClose() {
           <VButton @click="refetch">
             {{ $t("core.common.buttons.refresh") }}
           </VButton>
-          <VButton type="primary" @click="handleOpenCreationModal">
+          <VButton type="primary" @click="creationModal = true">
             <template #icon>
               <IconAddCircle class="h-full w-full" />
             </template>
@@ -97,7 +79,6 @@ function onCreationModalClose() {
 
   <PersonalAccessTokenCreationModal
     v-if="creationModal"
-    v-model="creationModalVisible"
-    @close="onCreationModalClose"
+    @close="creationModal = false"
   />
 </template>