diff --git a/apps/web/src/common/modules/monitoring/Monitoring.vue b/apps/web/src/common/modules/monitoring/Monitoring.vue
index 2921de12d4..00e7eb05d7 100644
--- a/apps/web/src/common/modules/monitoring/Monitoring.vue
+++ b/apps/web/src/common/modules/monitoring/Monitoring.vue
@@ -104,9 +104,9 @@
 
 <script lang="ts">
 import {
-    computed, getCurrentInstance, reactive, toRefs, watch,
+    computed, reactive, toRefs, watch,
 } from 'vue';
-import type { Vue } from 'vue/types/vue';
+import { useRouter } from 'vue-router/composables';
 
 import dayjs from 'dayjs';
 import {
@@ -180,7 +180,7 @@ export default {
         },
     },
     setup(props) {
-        const vm = getCurrentInstance()?.proxy as Vue;
+        const router = useRouter();
         const userStore = useUserStore();
         const state = reactive({
             showLoader: computed(() => props.loading || state.metricsLoading),
@@ -213,7 +213,7 @@ export default {
             resources = resources.map((resource, idx) => ({
                 ...resource,
                 color: COLORS[idx],
-                link: vm.$router.resolve(referenceRouter(resource.id, { resource_type: 'inventory.Server' })).href,
+                link: router.resolve(referenceRouter(resource.id, { resource_type: 'inventory.Server' })).href,
             }));
             state.availableResources = sortBy(resources, (m) => m.name);
         };
diff --git a/apps/web/src/common/modules/page-layouts/VerticalPageLayout.vue b/apps/web/src/common/modules/page-layouts/VerticalPageLayout.vue
index af9d8e3b3a..7d15cdb80c 100644
--- a/apps/web/src/common/modules/page-layouts/VerticalPageLayout.vue
+++ b/apps/web/src/common/modules/page-layouts/VerticalPageLayout.vue
@@ -4,11 +4,16 @@ import { useWindowSize } from '@vueuse/core/index';
 import {
     computed, reactive, ref, watch,
 } from 'vue';
+import { useRoute } from 'vue-router/composables';
+
+import { clone } from 'lodash';
 
 import { PVerticalLayout } from '@cloudforet/mirinae';
 
 import { useGlobalUIStore } from '@/store/global-ui/global-ui-store';
 
+import { MENU_ID } from '@/lib/menu/config';
+
 import FNB from '@/common/modules/navigations/FNB.vue';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 import type { Breadcrumb } from '@/common/modules/page-layouts/type';
@@ -35,12 +40,20 @@ const { width: contentsWidth } = useElementSize(contentRef);
 const storeState = reactive({
     isMinimizeNavRail: computed(() => gnbGetters.isMinimizeNavRail),
 });
+
+const route = useRoute();
+
 const state = reactive({
     padding: computed(() => {
         if (contentsWidth.value <= 1920) return '0';
         if (storeState.isMinimizeNavRail) return width.value - 1980;
         return width.value - 2180;
     }),
+    menuId: computed<string>(() => {
+        const reversedMatched = clone(route.matched).reverse();
+        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
+        return closestRoute?.meta?.menuId;
+    }),
 });
 
 watch(() => props.breadcrumbs, () => {
@@ -52,10 +65,13 @@ watch(() => props.breadcrumbs, () => {
 </script>
 
 <template>
-    <p-vertical-layout v-bind="$props"
-                       ref="contentRef"
-                       class="vertical-page-layout"
-                       v-on="$listeners"
+    <p-vertical-layout
+        v-bind="$props"
+        ref="contentRef"
+        class="vertical-page-layout"
+        :width="width"
+        :enable-double-click-resize="state.menuId === MENU_ID.METRIC_EXPLORER"
+        v-on="$listeners"
     >
         <template #sidebar="prop">
             <slot name="sidebar"
diff --git a/apps/web/src/services/alert-manager/components/AlertDashboardProjectSearchWidget.vue b/apps/web/src/services/alert-manager/components/AlertDashboardProjectSearchWidget.vue
index 4119570390..729734da2b 100644
--- a/apps/web/src/services/alert-manager/components/AlertDashboardProjectSearchWidget.vue
+++ b/apps/web/src/services/alert-manager/components/AlertDashboardProjectSearchWidget.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import {
-    computed, getCurrentInstance, reactive, watch,
+    computed, reactive, watch,
 } from 'vue';
-import type { Vue } from 'vue/types/vue';
+import { useRouter } from 'vue-router/composables';
 
 
 import { makeReferenceValueHandler } from '@cloudforet/core-lib/component-util/query-search';
@@ -29,7 +29,8 @@ import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
 const props = defineProps<{
     activatedProjects: string[];
 }>();
-const vm = getCurrentInstance()?.proxy as Vue;
+const router = useRouter();
+
 const allReferenceStore = useAllReferenceStore();
 const userWorkspaceStore = useUserWorkspaceStore();
 const storeState = reactive({
@@ -98,7 +99,7 @@ const onChange = async (options?: any) => {
     await listAlertByProject();
 };
 const onClickProjectBox = (item) => {
-    vm.$router.push({ name: PROJECT_ROUTE.DETAIL.TAB.ALERT._NAME, params: { id: item.project_id } });
+    router.push({ name: PROJECT_ROUTE.DETAIL.TAB.ALERT._NAME, params: { id: item.project_id } });
 };
 
 /* init */
diff --git a/apps/web/src/services/alert-manager/components/AlertDashboardTop5ProjectActivityWidget.vue b/apps/web/src/services/alert-manager/components/AlertDashboardTop5ProjectActivityWidget.vue
index 4c3766e172..b5e149bfb5 100644
--- a/apps/web/src/services/alert-manager/components/AlertDashboardTop5ProjectActivityWidget.vue
+++ b/apps/web/src/services/alert-manager/components/AlertDashboardTop5ProjectActivityWidget.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import {
-    computed, getCurrentInstance, reactive, watch,
+    computed, reactive, watch,
 } from 'vue';
-import type { Vue } from 'vue/types/vue';
+import { useRouter } from 'vue-router/composables';
 
 import dayjs from 'dayjs';
 import { find } from 'lodash';
@@ -55,7 +55,7 @@ interface Activity {
     status?: string;
 }
 
-const vm = getCurrentInstance()?.proxy as Vue;
+const router = useRouter();
 
 const userWorkspaceStore = useUserWorkspaceStore();
 const storeState = reactive({
@@ -155,7 +155,7 @@ const onClickBox = (projectId, date) => {
         { k: 'project_id', v: projectId, o: '=' },
         { k: 'created_at', v: date.split(' ')[0], o: '=t' },
     ]);
-    vm.$router.replace({
+    router.replace({
         name: ALERT_MANAGER_ROUTE.ALERT._NAME,
         query: {
             filters: urlQueryHelper.rawQueryStrings,
diff --git a/apps/web/src/services/alert-manager/components/AlertDetailNote.vue b/apps/web/src/services/alert-manager/components/AlertDetailNote.vue
index 540827429f..1e8cb905eb 100644
--- a/apps/web/src/services/alert-manager/components/AlertDetailNote.vue
+++ b/apps/web/src/services/alert-manager/components/AlertDetailNote.vue
@@ -142,7 +142,7 @@ const handleDeleteNote = async () => {
                             <span class="date">{{ iso8601Formatter(state.noteList[index].created_at, state.timezone) }}</span>
                         </p>
                         <p-select-dropdown style-type="icon-button"
-                                           button-icon="ic_chevron-down"
+                                           button-icon="ic_ellipsis-horizontal"
                                            :menu="state.menuItems"
                                            menu-position="right"
                                            use-fixed-menu-style
diff --git a/apps/web/src/services/asset-inventory/AssetInventoryContainer.vue b/apps/web/src/services/asset-inventory/AssetInventoryContainer.vue
index 632cc06203..54dab058a2 100644
--- a/apps/web/src/services/asset-inventory/AssetInventoryContainer.vue
+++ b/apps/web/src/services/asset-inventory/AssetInventoryContainer.vue
@@ -57,8 +57,8 @@ onUnmounted(() => {
 <template>
     <fragment>
         <vertical-page-layout v-if="state.lsbVisible">
-            <template #sidebar>
-                <asset-inventory-l-s-b />
+            <template #sidebar="prop">
+                <asset-inventory-l-s-b :width="prop.width" />
             </template>
             <template #default>
                 <router-view />
diff --git a/apps/web/src/services/asset-inventory/AssetInventoryLSB.vue b/apps/web/src/services/asset-inventory/AssetInventoryLSB.vue
index 0655e639af..df3af37926 100644
--- a/apps/web/src/services/asset-inventory/AssetInventoryLSB.vue
+++ b/apps/web/src/services/asset-inventory/AssetInventoryLSB.vue
@@ -10,6 +10,13 @@ import CloudServiceLSB from '@/services/asset-inventory/components/CloudServiceL
 import MetricExplorerLSB from '@/services/asset-inventory/components/MetricExplorerLSB.vue';
 import SecurityLSB from '@/services/asset-inventory/components/SecurityLSB.vue';
 
+
+interface props {
+  width: number;
+}
+
+const props = defineProps<props>();
+
 const route = useRoute();
 
 const state = reactive({
@@ -19,12 +26,15 @@ const state = reactive({
         return closestRoute?.meta?.menuId;
     }),
 });
+
 </script>
 
 <template>
     <fragment>
         <cloud-service-l-s-b v-if="state.menuId === MENU_ID.CLOUD_SERVICE" />
-        <metric-explorer-l-s-b v-else-if="state.menuId === MENU_ID.METRIC_EXPLORER" />
+        <metric-explorer-l-s-b v-else-if="state.menuId === MENU_ID.METRIC_EXPLORER"
+                               :width="width"
+        />
         <security-l-s-b v-else-if="state.menuId === MENU_ID.SECURITY" />
     </fragment>
 </template>
diff --git a/apps/web/src/services/asset-inventory/components/CloudServiceHistory.vue b/apps/web/src/services/asset-inventory/components/CloudServiceHistory.vue
index da62e04fda..9a5c21953f 100644
--- a/apps/web/src/services/asset-inventory/components/CloudServiceHistory.vue
+++ b/apps/web/src/services/asset-inventory/components/CloudServiceHistory.vue
@@ -95,9 +95,9 @@
 <script lang="ts">
 import { useInfiniteScroll } from '@vueuse/core';
 import {
-    computed, getCurrentInstance, onMounted, reactive, toRefs, watch,
+    computed, onMounted, reactive, toRefs, watch,
 } from 'vue';
-import type { Vue } from 'vue/types/vue';
+import { useRoute } from 'vue-router/composables';
 
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
@@ -190,7 +190,7 @@ export default {
         },
     },
     setup(props) {
-        const vm = getCurrentInstance()?.proxy as Vue;
+        const route = useRoute();
         const userStore = useUserStore();
         const state = reactive({
             loading: true,
@@ -202,7 +202,7 @@ export default {
             noteItemMap: {} as { [key: string]: NoteModel[] },
             selectedHistoryItem: undefined as undefined | CloudServiceHistoryItem,
             selectedKeyName: undefined as undefined | string,
-            showDetailOverlay: computed(() => vm.$route.hash === `#${HISTORY_OVERLAY_HASH_NAME}`),
+            showDetailOverlay: computed(() => route.hash === `#${HISTORY_OVERLAY_HASH_NAME}`),
             totalCount: 0,
             pageStart: 1,
             searchText: '',
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerLSB.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerLSB.vue
index 55598d5bfa..f078dcb271 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerLSB.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerLSB.vue
@@ -41,6 +41,11 @@ import { useAssetInventorySettingsStore } from '@/services/asset-inventory/store
 import { useMetricExplorerPageStore } from '@/services/asset-inventory/stores/metric-explorer-page-store';
 import type { NamespaceSubItemType } from '@/services/asset-inventory/types/asset-analysis-type';
 
+interface props {
+  width : number
+}
+const props = defineProps<props>();
+
 const lsbRef = ref<HTMLElement|null>(null);
 const { width: lsbWidth } = useElementSize(lsbRef);
 
@@ -295,16 +300,18 @@ watch(() => storeState.selectedNamespace, (selectedNamespace) => {
 <template>
     <div class="metric-explorer-l-s-b">
         <p-popover class="metric-select-guide-popover"
-                   :is-visible="guidePopoverState.metricGuideVisible"
+                   :is-visible.sync="guidePopoverState.metricGuideVisible"
                    position="right"
                    ignore-outside-click
                    ignore-target-click
                    boundary=".metric-explorer-l-s-b"
                    :trigger="POPOVER_TRIGGER.NONE"
+                   min-width="21.5rem"
                    :style="{ left: `${lsbWidth}px`}"
         >
             <l-s-b ref="lsbRef"
                    :menu-set="state.menuSet"
+                   :style="{ width: `${props.width}px` }"
             >
                 <template #collapsible-contents-starred>
                     <div v-if="state.starredMenuSet.length > 0">
@@ -418,6 +425,7 @@ watch(() => storeState.selectedNamespace, (selectedNamespace) => {
                     />
                 </template>
             </l-s-b>
+
             <template #content>
                 <div class="metric-select-guide-content">
                     <p class="title">
diff --git a/apps/web/src/services/auth/authenticator/external/KEYCLOAK_OIDC/template/KEYCLOAK_OIDC.vue b/apps/web/src/services/auth/authenticator/external/KEYCLOAK_OIDC/template/KEYCLOAK_OIDC.vue
index f25f03fab5..7bf11e03c0 100644
--- a/apps/web/src/services/auth/authenticator/external/KEYCLOAK_OIDC/template/KEYCLOAK_OIDC.vue
+++ b/apps/web/src/services/auth/authenticator/external/KEYCLOAK_OIDC/template/KEYCLOAK_OIDC.vue
@@ -14,27 +14,29 @@
 
 <script lang="ts">
 import {
-    defineComponent, getCurrentInstance, reactive, toRefs,
+    defineComponent, reactive, toRefs,
 } from 'vue';
-import type { Vue } from 'vue/types/vue';
+import { useRouter } from 'vue-router/composables';
 
 import { PButton } from '@cloudforet/mirinae';
 
 import { AUTH_ROUTE } from '@/services/auth/routes/route-constant';
 
+
+
 export default defineComponent({
     name: 'KEYCLOAKODIC',
     components: {
         PButton,
     },
     setup() {
-        const vm = getCurrentInstance()?.proxy as Vue;
+        const router = useRouter();
         const state = reactive({
             keycloakVisible: false,
         });
 
         const openKeycloakSignIn = () => {
-            vm.$router.push({ name: AUTH_ROUTE.SIGN_IN.KEYCLOAK._NAME });
+            router.push({ name: AUTH_ROUTE.SIGN_IN.KEYCLOAK._NAME });
         };
         return {
             openKeycloakSignIn,
diff --git a/apps/web/src/services/auth/components/SignInRightContainer.vue b/apps/web/src/services/auth/components/SignInRightContainer.vue
index 976c5e66fd..01235aeb63 100644
--- a/apps/web/src/services/auth/components/SignInRightContainer.vue
+++ b/apps/web/src/services/auth/components/SignInRightContainer.vue
@@ -31,9 +31,9 @@
 <script lang="ts">
 import { useWindowSize } from '@vueuse/core/index';
 import {
-    computed, getCurrentInstance, reactive, toRefs,
+    computed, reactive, toRefs,
 } from 'vue';
-import type { Vue } from 'vue/types/vue';
+import { useRoute, useRouter } from 'vue-router/composables';
 
 import {
     PI, screens,
@@ -58,7 +58,9 @@ export default {
         },
     },
     setup() {
-        const vm = getCurrentInstance()?.proxy as Vue;
+        const router = useRouter();
+        const route = useRoute();
+
         const domainStore = useDomainStore();
         const displayStore = useDisplayStore();
         const { width } = useWindowSize();
@@ -69,7 +71,7 @@ export default {
 
         /* event */
         const hideErrorMessage = () => {
-            if (vm.$route.query.error) vm.$router.replace({ query: { error: null } });
+            if (route.query.error) router.replace({ query: { error: null } });
             displayStore.setIsSignInFailed(false);
         };
 
diff --git a/apps/web/src/services/auth/pages/PasswordPage.vue b/apps/web/src/services/auth/pages/PasswordPage.vue
index d1ad7ce90d..0c6ccacd62 100644
--- a/apps/web/src/services/auth/pages/PasswordPage.vue
+++ b/apps/web/src/services/auth/pages/PasswordPage.vue
@@ -86,11 +86,9 @@
 <script setup lang="ts">
 import type { ComponentPublicInstance, ComputedRef } from 'vue';
 import {
-    computed,
-    getCurrentInstance, onMounted, reactive, ref,
+    computed, onMounted, reactive, ref,
 } from 'vue';
 import { useRoute, useRouter } from 'vue-router/composables';
-import type { Vue } from 'vue/types/vue';
 
 import dayjs from 'dayjs';
 import type { JwtPayload } from 'jwt-decode';
@@ -135,7 +133,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const passwordFormEl = ref<ComponentPublicInstance<PasswordFormExpose>>();
 
-const vm = getCurrentInstance()?.proxy as Vue;
 const router = useRouter();
 const route = useRoute();
 
@@ -195,7 +192,7 @@ const handleClickButton = () => {
     resetInputs();
 };
 const getSSOTokenFromUrl = (): string|undefined => {
-    const query = vm.$router.currentRoute.query;
+    const query = router.currentRoute.query;
     return query.sso_access_token as string;
 };
 const getUserIdFromToken = (ssoAccessToken: string): string | undefined => {
diff --git a/apps/web/src/services/iam/components/UserManagementAddUser.vue b/apps/web/src/services/iam/components/UserManagementAddUser.vue
index df19a173ef..ce4c15c20c 100644
--- a/apps/web/src/services/iam/components/UserManagementAddUser.vue
+++ b/apps/web/src/services/iam/components/UserManagementAddUser.vue
@@ -5,8 +5,6 @@ import {
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
-import { debounce } from 'lodash';
-
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
     PContextMenu, PEmpty, PFieldGroup, PIconButton, PSelectDropdown, PBadge,
@@ -26,7 +24,6 @@ import { checkEmailFormat } from '@/services/iam/helpers/user-management-form-va
 import { useUserPageStore } from '@/services/iam/store/user-page-store';
 import type { AddModalMenuItem, LocalType } from '@/services/iam/types/user-type';
 
-
 const userPageStore = useUserPageStore();
 const userPageState = userPageStore.state;
 const domainStore = useDomainStore();
@@ -62,70 +59,63 @@ const validationState = reactive({
 const hideMenu = () => {
     emit('change-input', { userList: state.selectedItems });
     state.menuVisible = false;
-    validationState.userIdInvalid = false;
-    validationState.userIdInvalidText = '';
-    formState.searchText = '';
 };
 const handleClickTextInput = async () => {
     state.menuVisible = true;
     resetValidationState();
 };
 const handleChangeTextInput = (value: string) => {
-    validationState.userIdInvalid = false;
-    validationState.userIdInvalidText = '';
+    resetValidationState();
     formState.searchText = value;
     if (!userPageState.isAdminMode || userPageState.afterWorkspaceCreated) {
         fetchListUsers();
         state.menuVisible = true;
     }
 };
-const handleEnterTextInput = debounce(async (value) => {
+const handleEnterTextInput = async () => {
     if (formState.searchText === '') return;
     if (validateUserId()) {
-        const isFocusOut = value.type === 'focusout';
-        await getUserList(isFocusOut);
+        await getUserList();
     }
-}, 100);
+};
 const handleClickDeleteButton = (idx: number) => {
     state.selectedItems.splice(idx, 1);
     emit('change-input', { userList: state.selectedItems });
 };
 const handleSelectDropdownItem = (selected: AuthType|LocalType) => {
     formState.selectedMenuItem = selected;
-    validationState.userIdInvalid = false;
-    validationState.userIdInvalidText = '';
+    resetValidationState();
 };
-const getUserList = async (isFocusOut?: boolean) => {
+
+const getUserList = async () => {
     let isNew = userPageState.isAdminMode || userPageState.afterWorkspaceCreated;
     try {
+        const trimmedText = formState.searchText?.trim();
         if (userPageState.isAdminMode || userPageState.afterWorkspaceCreated) {
-            await fetchGetUsers(formState.searchText);
+            await fetchGetUsers(trimmedText);
         } else {
             const isIndependentUser = state.independentUsersList.find((user) => user.user_id === formState.searchText);
             isNew = !isIndependentUser;
-            await fetchGetWorkspaceUsers(formState.searchText);
+            await fetchGetWorkspaceUsers(trimmedText);
         }
     } catch (e) {
-        if (!isFocusOut) {
-            addSelectedItem(isNew);
-        }
-    } finally {
+        addSelectedItem(isNew);
         await hideMenu();
+        formState.searchText = '';
+        resetValidationState();
     }
 };
 const checkEmailValidation = () => {
     const { isValid, invalidText } = checkEmailFormat(formState.searchText);
     if (formState.selectedMenuItem === 'EMAIL') {
         if (!isValid) {
-            validationState.userIdInvalid = true;
-            validationState.userIdInvalidText = invalidText;
+            updateValidationState(invalidText);
             return false;
         }
     }
     if (formState.selectedMenuItem === 'ID') {
         if (isValid) {
-            validationState.userIdInvalid = true;
-            validationState.userIdInvalidText = i18n.t('IAM.USER.FORM.ID_INVALID');
+            updateValidationState(i18n.t('IAM.USER.FORM.ID_INVALID'));
             return false;
         }
     }
@@ -135,10 +125,14 @@ const resetValidationState = () => {
     validationState.userIdInvalid = false;
     validationState.userIdInvalidText = '';
 };
+
+const updateValidationState = (invalidText: TranslateResult = '', isInvalid = true) => {
+    validationState.userIdInvalid = isInvalid;
+    validationState.userIdInvalidText = invalidText;
+};
 const validateUserId = () => {
     if (formState.searchText === '') {
-        validationState.userIdInvalid = true;
-        validationState.userIdInvalidText = i18n.t('IAM.USER.FORM.ALT_E_INVALID_FULL_NAME');
+        updateValidationState(i18n.t('IAM.USER.FORM.ALT_E_INVALID_FULL_NAME'));
         return false;
     }
     return checkEmailValidation();
@@ -163,15 +157,16 @@ const initAuthTypeList = async () => {
 };
 const addSelectedItem = (isNew: boolean) => {
     if (!formState.searchText) return;
+    const trimmedText = formState.searchText?.trim();
+    if (state.selectedItems.some((item) => item.name === trimmedText && item.auth_type === formState.selectedMenuItem)) return;
+
     state.selectedItems.unshift({
-        user_id: formState.searchText?.trim(),
-        label: formState.searchText?.trim(),
-        name: formState.searchText?.trim(),
+        user_id: trimmedText,
+        label: trimmedText,
+        name: trimmedText,
         isNew,
         auth_type: formState.selectedMenuItem,
     });
-    formState.searchText = '';
-    resetValidationState();
 };
 
 /* API */
@@ -205,19 +200,13 @@ const fetchGetWorkspaceUsers = async (userId: string) => {
     await SpaceConnector.clientV2.identity.workspaceUser.get<WorkspaceUserGetParameters, WorkspaceUserModel>({
         user_id: userId,
     });
-    validationState.userIdInvalid = true;
-    validationState.userIdInvalidText = i18n.t('IAM.USER.FORM.USER_ID_INVALID_WORKSPACE', { userId });
+    updateValidationState(i18n.t('IAM.USER.FORM.USER_ID_INVALID_WORKSPACE', { userId }));
 };
-const fetchGetUsers = async (userId: string) => {
+const fetchGetUsers = async (userId: string) : Promise<any> => {
     await SpaceConnector.clientV2.identity.user.get<UserGetParameters, UserModel>({
         user_id: userId,
     });
-    if (userPageState.afterWorkspaceCreated) {
-        addSelectedItem(false);
-    } else {
-        validationState.userIdInvalid = true;
-        validationState.userIdInvalidText = i18n.t('IAM.USER.FORM.USER_ID_INVALID_DOMAIN', { userId });
-    }
+    updateValidationState(i18n.t('IAM.USER.FORM.USER_ID_INVALID_DOMAIN', { userId }));
 };
 
 onClickOutside(containerRef, clickOutside);
@@ -271,7 +260,7 @@ onMounted(() => {
                                class="user-id-input"
                                :class="{'invalid': invalid}"
                                @click="handleClickTextInput"
-                               @focusout="handleEnterTextInput"
+                               @blur="handleEnterTextInput"
                                @keyup.enter="handleEnterTextInput"
                                @input="handleChangeTextInput($event.target.value)"
                         >
diff --git a/apps/web/src/services/iam/components/UserManagementStatusModal.vue b/apps/web/src/services/iam/components/UserManagementStatusModal.vue
index 70a13df664..9e286a2487 100644
--- a/apps/web/src/services/iam/components/UserManagementStatusModal.vue
+++ b/apps/web/src/services/iam/components/UserManagementStatusModal.vue
@@ -1,9 +1,7 @@
 <script lang="ts" setup>
 import {
-    computed,
-    getCurrentInstance, reactive,
+    computed, reactive,
 } from 'vue';
-import type { Vue } from 'vue/types/vue';
 
 import { cloneDeep, map } from 'lodash';
 
@@ -16,6 +14,7 @@ import type { RoleBindingDeleteParameters } from '@/schema/identity/role-binding
 import type { UserDeleteParameters } from '@/schema/identity/user/api-verbs/delete';
 import type { UserDisableParameters } from '@/schema/identity/user/api-verbs/disable';
 import type { UserEnableParameters } from '@/schema/identity/user/api-verbs/enable';
+import { i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
@@ -25,7 +24,6 @@ import { useRoleFormatter, userStateFormatter } from '@/services/iam/composables
 import { USER_MODAL_TYPE } from '@/services/iam/constants/user-constant';
 import { useUserPageStore } from '@/services/iam/store/user-page-store';
 
-const vm = getCurrentInstance()?.proxy as Vue;
 
 const userPageStore = useUserPageStore();
 const userPageState = userPageStore.state;
@@ -78,11 +76,11 @@ const checkModalConfirm = async () => {
         const failCount = responses.length - successCount;
         if (successCount > 0) {
             const languageCode = `IAM.USER.MAIN.MODAL.ALT_S_${languagePrefix}_USER`;
-            showSuccessMessage(vm.$tc(languageCode, successCount), '');
+            showSuccessMessage(i18n.t(languageCode), '');
             emit('confirm');
         } if (failCount > 0) {
             const languageCode = `IAM.USER.MAIN.MODAL.ALT_E_${languagePrefix}_USER`;
-            ErrorHandler.handleRequestError(new Error(''), vm.$tc(languageCode, failCount));
+            ErrorHandler.handleRequestError(new Error(''), i18n.t(languageCode));
         }
     } catch (e: any) {
         ErrorHandler.handleError(e, true);
diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index 577eace064..af1384221f 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -51607,6 +51607,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>ID_INVALID</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description/>
+                                        <comment/>
+                                        <default_text/>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>true</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>ja-JP</language>
+                                                <approved>true</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>ko-KR</language>
+                                                <approved>true</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>MEMBER</name>
                                         <definition_loaded>false</definition_loaded>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index b94acc9b76..d56bd21bfc 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -2860,6 +2860,7 @@
 				"EMAIL_INVALID": "Invalid e-mail format.",
 				"GENERATE": "Generate",
 				"GENERATE_PLACEHOLDER": "Generate or Enter Password",
+				"ID_INVALID": "Invalid ID format.",
 				"MEMBER": "Member",
 				"NAME": "Name",
 				"NAME_VALID": "You can use this ID",
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index 95f1e91843..4b4822d107 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -2860,6 +2860,7 @@
 				"EMAIL_INVALID": "無効なメール形式です",
 				"GENERATE": "生成",
 				"GENERATE_PLACEHOLDER": "生成またはパスワード入力",
+				"ID_INVALID": "無効なID形式です。",
 				"MEMBER": "構成員",
 				"NAME": "お名前",
 				"NAME_VALID": "使用可能なIDです",
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index 7f31aa9e5a..4632bfcb12 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -2860,6 +2860,7 @@
 				"EMAIL_INVALID": "잘못된 이메일 형식입니다. ",
 				"GENERATE": "생성",
 				"GENERATE_PLACEHOLDER": "비밀번호 자동 생성 또는 입력",
+				"ID_INVALID": "잘못된 ID 형식입니다.",
 				"MEMBER": "멤버",
 				"NAME": "이름",
 				"NAME_VALID": "사용 가능한 아이디입니다.",
diff --git a/packages/mirinae/src/data-display/popover/PPopover.vue b/packages/mirinae/src/data-display/popover/PPopover.vue
index 4eb34f9b5d..ce27a028aa 100644
--- a/packages/mirinae/src/data-display/popover/PPopover.vue
+++ b/packages/mirinae/src/data-display/popover/PPopover.vue
@@ -63,6 +63,7 @@ interface PopoverProps {
     hideArrow?: boolean;
     boundary?: string;
     width?: string;
+    minWidth?: string;
 }
 
 const ARROW_STATIC_SIDES = {
@@ -137,6 +138,10 @@ export default defineComponent<PopoverProps>({
             type: String,
             default: '',
         },
+        minWidth: {
+            type: String,
+            default: '',
+        },
     },
     setup(props, { emit }) {
         const state = reactive({
@@ -210,7 +215,7 @@ export default defineComponent<PopoverProps>({
                             size({
                                 apply({ rects, elements }) {
                                     Object.assign(elements.floating.style, {
-                                        minWidth: `${rects.reference.width}px`,
+                                        minWidth: props.minWidth ? props.minWidth : `${rects.reference.width}px`,
                                     });
                                 },
                             }),
diff --git a/packages/mirinae/src/data-display/popover/story-helper.ts b/packages/mirinae/src/data-display/popover/story-helper.ts
index f58e5e76ba..87f67ee2a0 100644
--- a/packages/mirinae/src/data-display/popover/story-helper.ts
+++ b/packages/mirinae/src/data-display/popover/story-helper.ts
@@ -14,6 +14,7 @@ export const getPopoverArgs = (): Args => ({
     hideArrow: false,
     boundary: '',
     width: '',
+    minWidth: '',
     'v-model': false,
     defaultSlot: null,
     contentRefSlot: null,
@@ -198,6 +199,21 @@ export const getPopoverArgTypes = (): ArgTypes => {
             },
             control: 'text',
         },
+        minWidth: {
+            name: 'minWidth',
+            type: { name: 'string' },
+            description: 'minWidth of the popover. If the minWidth is not set, it would be calculated based on the width of the component it is applied to.',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                category: 'props',
+                defaultValue: {
+                    summary: false,
+                },
+            },
+            control: 'text',
+        },
         // model
         'v-model': {
             name: 'v-model',
diff --git a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.stories.ts b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.stories.ts
index 640594e4c5..5ec9824a29 100644
--- a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.stories.ts
+++ b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.stories.ts
@@ -32,10 +32,15 @@ const Template: Story = {
             PVerticalLayout,
         },
         template: `
-            <div style="width: 100vw; height: 10rem; border: 1px solid gray;">
-                <p-vertical-layout>
+            <div style="width: 100vw; height: 20rem; border: 1px solid gray;">
+                <p-vertical-layout 
+                    :height="height"
+                    :initWidth="initWidth"
+                    :minWidth="minWidth"
+                    :maxWidth="maxWidth"
+                    :enableDoubleClickResize="enableDoubleClickResize">
                     <template #sidebar>
-                        Left Layout
+                      Left LayoutLeft
                     </template>
                     <template #default>
                         Right Layout
diff --git a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
index 8e06528cfa..e7063c81ec 100644
--- a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
+++ b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-    reactive, computed, onMounted, onUnmounted,
+    reactive, computed, onMounted, onUnmounted, onBeforeMount, ref,
 } from 'vue';
 
 import PTooltip from '@/data-display/tooltips/PTooltip.vue';
@@ -15,6 +15,7 @@ interface Props {
     initWidth?: number;
     minWidth?: number;
     maxWidth?: number;
+    enableDoubleClickResize? : boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -22,6 +23,7 @@ const props = withDefaults(defineProps<Props>(), {
     initWidth: 240,
     minWidth: 100,
     maxWidth: 500,
+    enableDoubleClickResize: false,
 });
 
 const documentEventMount = (eventName: string, func: any) => {
@@ -36,6 +38,8 @@ const state = reactive({
     clientX: null,
     hide: false,
     transition: false,
+    isHover: false,
+    isMaximized: props.initWidth === props.maxWidth,
     sidebarContainerStyle: computed(() => ({
         width: `${state.width}px`,
         height: '100%',
@@ -65,6 +69,12 @@ const state = reactive({
     })),
 });
 
+const leftLayoutContentBox = ref<null|HTMLElement>(null);
+
+const resize = (delta : number) => {
+    state.width = delta;
+};
+
 /* Resizing */
 const isResizing = (event) => {
     if (state.resizing) {
@@ -75,17 +85,20 @@ const isResizing = (event) => {
         const delta = state.clientX - event.clientX;
         const width = (state.isMobileSize ? MOBILE_WIDTH : state.width) - delta;
         if (!(width <= props.minWidth || width > props.maxWidth)) {
-            state.width = width;
+            resize(width);
         }
         state.clientX = event.clientX;
+        state.isHover = true;
     }
 };
 const endResizing = () => {
     state.resizing = false;
     state.clientX = null;
+    state.isHover = false;
 };
 const startResizing = () => {
     state.resizing = true;
+    state.isHover = true;
 };
 
 /* Toggle hide Sidebar */
@@ -103,8 +116,6 @@ const handleSidebarToggle = () => {
         setTimeout(offTransition, 500);
     }
 };
-documentEventMount('mousemove', isResizing);
-documentEventMount('mouseup', endResizing);
 
 const detectWindowResizing = () => {
     state.isMobileSize = window.innerWidth <= screens.mobile.max;
@@ -119,8 +130,25 @@ const detectWindowResizing = () => {
     }
 };
 
-detectWindowResizing();
-window.addEventListener('resize', detectWindowResizing);
+const handleControllerDoubleClick = () => {
+    const minimumWidth = props.minWidth;
+    const maximumWidth = props.maxWidth;
+
+    if (state.width <= minimumWidth + (maximumWidth - minimumWidth) / 2) {
+        resize(maximumWidth);
+    } else {
+        resize(minimumWidth);
+    }
+};
+
+documentEventMount('mousemove', isResizing);
+documentEventMount('mouseup', endResizing);
+documentEventMount('resize', detectWindowResizing);
+
+onBeforeMount(() => {
+    detectWindowResizing();
+});
+
 </script>
 
 <template>
@@ -131,18 +159,24 @@ window.addEventListener('resize', detectWindowResizing);
              :style="state.sidebarContainerStyle"
              :class="{transition: state.transition}"
         >
-            <div :style="state.sidebarStyle">
-                <slot name="sidebar"
-                      v-bind="{width: state.width, hide: state.hide, transition: state.transition, height: props.height}"
+            <div
+                ref="leftLayoutContentBox"
+                :style="state.sidebarStyle"
+            >
+                <slot
+                    name="sidebar"
+                    v-bind="{width: state.width, hide: state.hide, transition: state.transition, height: props.height}"
                 />
             </div>
         </div>
         <div class="resizer-container line"
-             :class="{transition: state.transition}"
+             :class="{transition: state.transition, hover: state.isHover}"
              :style="state.resizerStyle"
              @mousedown="startResizing"
              @mousemove="isResizing"
              @mouseup="endResizing"
+             @mouseenter="state.isHover = true"
+             @mouseleave="state.isHover = false"
         >
             <p-tooltip :contents="state.hide ? $t('COMPONENT.VERTICAL_LAYOUT.EXPAND') : $t('COMPONENT.VERTICAL_LAYOUT.COLLAPSE')"
                        position="right"
@@ -160,10 +194,17 @@ window.addEventListener('resize', detectWindowResizing);
                     </slot>
                 </span>
             </p-tooltip>
+            <div
+                v-if="enableDoubleClickResize"
+                class="controller"
+                :class="{hover: state.isHover && !state.hide}"
+                @dblclick="handleControllerDoubleClick"
+            />
         </div>
-        <div class="main"
-             :class="{transition: state.transition}"
-             :style="state.mainStyle"
+        <div
+            class="main"
+            :class="{transition: state.transition}"
+            :style="state.mainStyle"
         >
             <slot />
         </div>
@@ -173,6 +214,7 @@ window.addEventListener('resize', detectWindowResizing);
 <style lang="postcss">
 .p-vertical-layout {
     display: flex;
+    position: relative;
     width: 100%;
     flex-direction: row;
     padding: 0;
@@ -200,7 +242,7 @@ window.addEventListener('resize', detectWindowResizing);
         display: flex;
         align-items: flex-start;
         justify-content: center;
-        position: sticky;
+        position: absolute;
         top: 0;
         height: 100%;
         width: 0;
@@ -211,7 +253,7 @@ window.addEventListener('resize', detectWindowResizing);
         &.line {
             @apply border-gray-200;
             background-color: transparent;
-            &:hover {
+            &.hover {
                 @apply border-blue-500;
                 cursor: ew-resize;
             }
@@ -236,7 +278,7 @@ window.addEventListener('resize', detectWindowResizing);
                 .resizer-button > svg {
                     margin-right: -0.125rem;
                 }
-                &:hover {
+                &.hover {
                     @apply text-secondary;
                     width: 2.5rem;
                     .resizer-button > svg {
@@ -248,6 +290,23 @@ window.addEventListener('resize', detectWindowResizing);
                 @apply bg-blue-200 cursor-pointer;
             }
         }
+        .controller {
+            @apply absolute border border-gray-300 rounded-md bg-white;
+            width: 0.4rem;
+            height: 1.5rem;
+            top: calc(50% - 1.5rem / 2);
+            opacity: 0;
+
+            &.hover {
+                @apply border-blue-500;
+                opacity: 1;
+            }
+            &:hover {
+                @apply bg-blue-200;
+                opacity: 1;
+                cursor: col-resize;
+            }
+        }
     }
 }
 </style>
diff --git a/packages/mirinae/src/layouts/vertical-layout/story-helper.ts b/packages/mirinae/src/layouts/vertical-layout/story-helper.ts
index 408584cc1d..1a7f9da96d 100644
--- a/packages/mirinae/src/layouts/vertical-layout/story-helper.ts
+++ b/packages/mirinae/src/layouts/vertical-layout/story-helper.ts
@@ -5,6 +5,7 @@ export const getVerticalLayoutArgs = (): Args => ({
     initWidth: 300,
     minWidth: 100,
     maxWidth: 500,
+    enableDoubleClickResize: false,
 });
 
 export const getVerticalLayoutParameters = (): Parameters => ({
@@ -75,6 +76,21 @@ export const getVerticalLayoutArgTypes = (): ArgTypes => ({
         },
         control: 'number',
     },
+    enableDoubleClickResize: {
+        name: 'enableDoubleClickResize',
+        type: { name: 'boolean' },
+        description: 'Whether to enable resizing the sidebar with a double-click on the controller.',
+        table: {
+            type: {
+                summary: 'boolean',
+            },
+            category: 'props',
+            defaultValue: {
+                summary: false,
+            },
+        },
+        control: 'boolean',
+    },
     // default
     sidebar: { table: { disable: true } },
     'resizer-button': { table: { disable: true } },