diff --git a/apps/web/src/common/components/buttons/ActionMenuButton.vue b/apps/web/src/common/components/buttons/ActionMenuButton.vue
index 8a6d6a3226..f46507e21c 100644
--- a/apps/web/src/common/components/buttons/ActionMenuButton.vue
+++ b/apps/web/src/common/components/buttons/ActionMenuButton.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core';
-import { ref, computed } from 'vue';
+import { ref, computed, toRef } from 'vue';
 
 import { PIconButton, PContextMenu, useContextMenuStyle } from '@cloudforet/mirinae';
+import type { IconButtonSize, IconButtonStyleType } from '@cloudforet/mirinae/types/controls/buttons/icon-button/type';
+import type { ContextMenuPosition } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 import { i18n } from '@/translations';
 
@@ -12,12 +14,14 @@ import type { ActionMenuItem } from './type';
 type SupportMenu = 'edit' | 'delete';
 const props = withDefaults(defineProps<{
     menu?: Array<SupportMenu|ActionMenuItem>;
-    styleType?: string;
-    size?: string;
+    styleType?: IconButtonStyleType;
+    size?: IconButtonSize;
+    position?: ContextMenuPosition;
 }>(), {
     menu: undefined,
     styleType: 'transparent',
     size: 'md',
+    position: 'right',
 });
 const emit = defineEmits<{(event: 'edit'): void;
     (event: 'delete'): void;
@@ -33,7 +37,7 @@ useContextMenuStyle({
     menuRef,
     visibleMenu,
     useFixedMenuStyle: true,
-    position: 'right',
+    position: toRef(props, 'position'),
     menuWidth: props.size === 'sm' ? '113px' : '192px',
 });
 const menuMap = computed<Record<SupportMenu, ActionMenuItem>>(() => ({
diff --git a/apps/web/src/common/modules/navigations/new-lsb/LSBDivider.vue b/apps/web/src/common/modules/navigations/new-lsb/LSBDivider.vue
index 540d770c75..d51c4a7215 100644
--- a/apps/web/src/common/modules/navigations/new-lsb/LSBDivider.vue
+++ b/apps/web/src/common/modules/navigations/new-lsb/LSBDivider.vue
@@ -3,7 +3,7 @@ import { PDivider } from '@cloudforet/mirinae';
 </script>
 
 <template>
-    <div class="pt-1 pb-3 px-2 my-2">
+    <div class="pt-2 pb-2">
         <p-divider />
     </div>
 </template>
diff --git a/apps/web/src/common/modules/navigations/new-lsb/LSBItem.vue b/apps/web/src/common/modules/navigations/new-lsb/LSBItem.vue
new file mode 100644
index 0000000000..60d913cb39
--- /dev/null
+++ b/apps/web/src/common/modules/navigations/new-lsb/LSBItem.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { PTreeNode } from '@cloudforet/mirinae';
+
+import BetaMark from '@/common/components/marks/BetaMark.vue';
+import NewMark from '@/common/components/marks/NewMark.vue';
+import UpdateMark from '@/common/components/marks/UpdateMark.vue';
+import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
+import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import type { LSBItemProps } from '@/common/modules/navigations/new-lsb/type';
+
+const props = withDefaults(defineProps<LSBItemProps>(), {
+    icon: undefined,
+    displayType: 'list',
+    highlightTag: undefined,
+    favoriteOptions: undefined,
+    favoriteVisibility: 'always',
+});
+
+</script>
+
+<template>
+    <p-tree-node :id="props.id"
+                 :name="props.name"
+                 :icon="props.icon"
+                 :display-type="props.displayType"
+                 selectable
+                 :link="props.link"
+    >
+        <template #outer-left>
+            <slot name="outer-left" />
+        </template>
+        <template #inner-left>
+            <slot name="inner-left" />
+        </template>
+        <template #default>
+            <slot />
+        </template>
+        <template #inner-right>
+            <slot name="inner-right" />
+            <div v-if="props.highlightTag"
+                 class="h-full mt-[-0.25rem]"
+            >
+                <new-mark v-if="props.highlightTag === 'new'" />
+                <update-mark v-else-if="props.highlightTag === 'update'" />
+                <beta-mark v-else-if="props.highlightTag === 'beta'" />
+            </div>
+        </template>
+        <template #outer-right>
+            <slot name="outer-right" />
+        </template>
+        <template #action="{isHovered}">
+            <favorite-button v-if="props.favoriteVisibility !== 'none'"
+                             v-show="props.favoriteVisibility === 'hovered-only' ? isHovered : true"
+                             :item-id="props.favoriteOptions?.id ?? props.id"
+                             :favorite-type="props.favoriteOptions?.type ?? FAVORITE_TYPE.MENU"
+                             :visible-active-case-only="props.favoriteVisibility === 'active-only'"
+                             scale="0.8"
+            />
+        </template>
+    </p-tree-node>
+</template>
+
diff --git a/apps/web/src/common/modules/navigations/new-lsb/LSBRouterButton.vue b/apps/web/src/common/modules/navigations/new-lsb/LSBRouterButton.vue
deleted file mode 100644
index 66e1926335..0000000000
--- a/apps/web/src/common/modules/navigations/new-lsb/LSBRouterButton.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import type { TranslateResult } from 'vue-i18n';
-import type { Location } from 'vue-router';
-
-import { PLazyImg, PI } from '@cloudforet/mirinae';
-
-import { useLsbRouterItemState } from '@/common/modules/navigations/new-lsb/composables/use-lsb-router-item-state';
-import type { LSBIcon, LSBRouterPredicate } from '@/common/modules/navigations/new-lsb/type';
-
-const props = defineProps<{
-    label?: TranslateResult;
-    icon?: LSBIcon;
-    imgIcon?: string;
-    to?: Location;
-    currentPath?: string;
-    predicate: LSBRouterPredicate;
-    openNewTab?: boolean;
-}>();
-
-const {
-    isSelected,
-    iconName,
-    iconColor,
-    imgIconUrl,
-} = useLsbRouterItemState(props);
-</script>
-
-<template>
-    <router-link ref="itemEl"
-                 class="lsb-router-button inline-flex items-center w-full h-8 justify-between px-2 border border-transparent outline-none rounded-md text-gray-800"
-                 :class="[{'selected': isSelected}]"
-                 :target="props.openNewTab ? '_blank' : '_self'"
-                 :to="props.to ? props.to : {}"
-                 @click.native="$event.stopImmediatePropagation()"
-    >
-        <slot name="before-text"
-              v-bind="props"
-        />
-        <div ref="textEl"
-             class="inline-flex items-center gap-1 overflow-hidden whitespace-no-wrap"
-        >
-            <p-i v-if="props.icon"
-                 :name="iconName"
-                 :color="iconColor"
-                 width="1rem"
-                 height="1rem"
-                 class="flex-shrink-0"
-            />
-            <p-lazy-img
-                v-if="props.imgIcon"
-                :src="imgIconUrl"
-                width="1rem"
-                height="1rem"
-                class="flex-shrink-0"
-            />
-            <span class="text-label-md">
-                <slot>
-                    {{ props.label }}
-                </slot>
-            </span>
-            <slot name="after-text"
-                  v-bind="props"
-            />
-        </div>
-        <slot name="right-extra"
-              v-bind="props"
-        />
-    </router-link>
-</template>
-
-<style scoped lang="postcss">
-.lsb-router-button {
-    &:focus, &:focus-within, &:active {
-        @apply bg-white border-secondary1;
-        box-shadow: 0 0 0 2px rgba(theme('colors.secondary1'), 0.2);
-    }
-    &.selected {
-        @apply bg-blue-200;
-    }
-    &:hover:not(.selected) {
-        @apply bg-blue-100 cursor-pointer;
-    }
-}
-</style>
diff --git a/apps/web/src/common/modules/navigations/new-lsb/LSBRouterItem.vue b/apps/web/src/common/modules/navigations/new-lsb/LSBRouterItem.vue
deleted file mode 100644
index d0c0e8f5c8..0000000000
--- a/apps/web/src/common/modules/navigations/new-lsb/LSBRouterItem.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<script setup lang="ts">
-import { useElementSize } from '@vueuse/core';
-import type { Ref } from 'vue';
-import {
-    computed, reactive, ref,
-} from 'vue';
-import type { TranslateResult } from 'vue-i18n';
-import type { Location } from 'vue-router';
-
-import { PI, PLazyImg, PTooltip } from '@cloudforet/mirinae';
-
-import type { MenuId } from '@/lib/menu/config';
-
-import BetaMark from '@/common/components/marks/BetaMark.vue';
-import NewMark from '@/common/components/marks/NewMark.vue';
-import UpdateMark from '@/common/components/marks/UpdateMark.vue';
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { FAVORITE_TYPE, type FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
-import { useLsbRouterItemState } from '@/common/modules/navigations/new-lsb/composables/use-lsb-router-item-state';
-import type { HighlightTagType, LSBIcon, LSBRouterPredicate } from '@/common/modules/navigations/new-lsb/type';
-
-interface Props {
-    id: string;
-    label?: TranslateResult;
-    icon?: LSBIcon;
-    imgIcon?: string;
-    to?: Location;
-    currentPath?: string;
-    predicate?: LSBRouterPredicate;
-    openNewTab?: boolean;
-    highlightTag?: HighlightTagType;
-    favoriteOptions?: FavoriteOptions;
-    hideFavorite?: boolean;
-    isAdminMode?: boolean;
-    index?: number | string;
-}
-
-const props = defineProps<Props>();
-
-const itemEl = ref<HTMLElement | null>(null);
-const textEl = ref<HTMLElement | null>(null);
-
-const state = reactive({
-    itemWidth: computed<Ref<number>>(() => useElementSize(itemEl.value).width),
-    textWidth: computed<Ref<number>>(() => useElementSize(textEl.value).width),
-    hoveredItem: '' as MenuId | string,
-    isEllipsis: computed<boolean>(() => state.hoveredItem === props.id && (state.itemWidth.value - 20 === state.textWidth.value)),
-});
-
-const getIsHovered = (itemId?: MenuId | string) => state.hoveredItem && state.hoveredItem === itemId;
-const {
-    isSelected,
-    iconName,
-    iconColor,
-    imgIconUrl,
-} = useLsbRouterItemState(props);
-</script>
-
-<template>
-    <router-link ref="itemEl"
-                 class="lsb-router-item inline-flex items-center w-full h-8 justify-between px-2 border border-transparent outline-none rounded-md text-label-md text-gray-800"
-                 :class="[{'selected': isSelected, 'is-hide-favorite': props.hideFavorite}]"
-                 :target="props.openNewTab ? '_blank' : '_self'"
-                 :to="props.to ? props.to : {}"
-                 @click.native="$event.stopImmediatePropagation()"
-                 @mouseenter.native="state.hoveredItem = props.id"
-                 @mouseleave.native="state.hoveredItem = ''"
-    >
-        <slot name="before-text"
-              v-bind="props"
-        />
-        <div ref="textEl"
-             class="inline-flex items-center overflow-hidden whitespace-no-wrap"
-        >
-            <p-i v-if="props.icon"
-                 :name="iconName"
-                 :color="iconColor"
-                 width="1rem"
-                 height="1rem"
-                 class="flex-shrink-0 ml-1"
-            />
-            <p-lazy-img
-                v-if="props.imgIcon"
-                :src="imgIconUrl"
-                width="1rem"
-                height="1rem"
-                class="flex-shrink-0 ml-1"
-            />
-            <slot>
-                <div class="item-text overflow-hidden whitespace-no-wrap">
-                    <p-tooltip v-if="state.isEllipsis"
-                               position="bottom-start"
-                               :contents="props.label"
-                    >
-                        {{ props.label }}
-                    </p-tooltip>
-                    <span v-else>{{ props.label }}</span>
-                </div>
-            </slot>
-            <slot name="after-text"
-                  v-bind="props"
-            />
-            <span class="mark-wrapper h-full">
-                <new-mark v-if="props.highlightTag === 'new'" />
-                <update-mark v-else-if="props.highlightTag === 'update'" />
-                <beta-mark v-else-if="props.highlightTag === 'beta'" />
-            </span>
-        </div>
-        <slot name="right-extra"
-              v-bind="props"
-        />
-        <favorite-button
-            v-if="!hideFavorite && !isAdminMode"
-            :item-id="props.favoriteOptions?.id ? props.favoriteOptions.id : props.id"
-            :favorite-type="props.favoriteOptions?.type ? props.favoriteOptions.type : FAVORITE_TYPE.MENU"
-            :visible-active-case-only="!getIsHovered(props.id)"
-            scale="0.8"
-            class="flex-shrink-0 ml-1"
-        />
-    </router-link>
-</template>
-
-<style lang="postcss" scoped>
-.lsb-router-item {
-    &:focus, &:focus-within, &:active {
-        @apply bg-white border-secondary1;
-        box-shadow: 0 0 0 2px rgba(theme('colors.secondary1'), 0.2);
-    }
-    &.selected {
-        @apply bg-blue-200;
-    }
-    &.is-hide-favorite {
-        .favorite-button {
-            @apply hidden;
-        }
-        &:hover {
-            .favorite-button {
-                @apply block;
-            }
-        }
-    }
-    &:hover:not(.selected) {
-        @apply bg-blue-100 cursor-pointer;
-    }
-    .item-text {
-        text-overflow: ellipsis;
-    }
-    .mark-wrapper {
-        margin-top: -0.25rem;
-    }
-}
-</style>
diff --git a/apps/web/src/common/modules/navigations/new-lsb/LSBStarredTree.vue b/apps/web/src/common/modules/navigations/new-lsb/LSBStarredTree.vue
new file mode 100644
index 0000000000..b0a061fe9f
--- /dev/null
+++ b/apps/web/src/common/modules/navigations/new-lsb/LSBStarredTree.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { PTreeNode, PEmpty } from '@cloudforet/mirinae';
+
+import LSBItem from '@/common/modules/navigations/new-lsb/LSBItem.vue';
+import type { LSBItemProps } from '@/common/modules/navigations/new-lsb/type';
+
+const props = defineProps<{
+    expanded?: boolean;
+    items: LSBItemProps[];
+}>();
+</script>
+
+<template>
+    <p-tree-node id="starred"
+                 icon="ic_multi-favorite"
+                 display-type="tree"
+                 :expanded="props.expanded"
+                 has-children
+    >
+        <template v-for="(_, slot) of $scopedSlots"
+                  #[slot]="scope"
+        >
+            <slot :name="slot"
+                  v-bind="scope"
+            />
+        </template>
+        <span class="font-bold">{{ $t('COMMON.STARRED') }}</span>
+        <template #children>
+            <div v-if="props.items.length > 0"
+                 class="max-h-[21rem] overflow-x-auto"
+            >
+                <l-s-b-item v-for="item in props.items"
+                            :id="item.id"
+                            :key="item.id"
+                            :name="item.name"
+                            display-type="tree"
+                            :icon="item.icon"
+                            :link="item.link"
+                            :favorite-options="item.favoriteOptions"
+                            favorite-visibility="hovered-only"
+                />
+            </div>
+            <p-empty v-else>
+                {{ $t('COMMON.STARRED_NO_DATA') }}
+            </p-empty>
+        </template>
+    </p-tree-node>
+</template>
diff --git a/apps/web/src/common/modules/navigations/new-lsb/LSBTitle.vue b/apps/web/src/common/modules/navigations/new-lsb/LSBTitle.vue
new file mode 100644
index 0000000000..11e7a51d50
--- /dev/null
+++ b/apps/web/src/common/modules/navigations/new-lsb/LSBTitle.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { TranslateResult } from 'vue-i18n';
+
+import {
+    PTreeNode,
+} from '@cloudforet/mirinae';
+import type { TreeNodeIcon, TreeNodeLink } from '@cloudforet/mirinae/types/data-display/tree/new-tree/type';
+
+const props = withDefaults(defineProps<{
+    id: string;
+    name?: TranslateResult;
+    icon?: TreeNodeIcon;
+    selectable?: boolean;
+    link?: TreeNodeLink;
+}>(), {
+    name: undefined,
+    icon: undefined,
+    selectable: false,
+    link: undefined,
+});
+
+
+</script>
+
+<template>
+    <p-tree-node :id="props.id"
+                 :name="props.name"
+                 :icon="props.icon"
+                 display-type="list"
+                 :selectable="props.selectable"
+                 :link="props.link"
+    >
+        <template v-for="(_, slot) of $scopedSlots"
+                  #[slot]="scope"
+        >
+            <slot :name="slot"
+                  v-bind="scope"
+            />
+        </template>
+        <template #default>
+            <span class="font-bold">
+                <slot>
+                    {{ props.name }}
+                </slot>
+            </span>
+        </template>
+    </p-tree-node>
+</template>
diff --git a/apps/web/src/common/modules/navigations/new-lsb/LSBTopTitle.vue b/apps/web/src/common/modules/navigations/new-lsb/LSBTopTitle.vue
deleted file mode 100644
index 4fcc1fc8c0..0000000000
--- a/apps/web/src/common/modules/navigations/new-lsb/LSBTopTitle.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import type { Location } from 'vue-router';
-
-import {
-    PLazyImg,
-} from '@cloudforet/mirinae';
-
-import { assetUrlConverter } from '@/lib/helper/asset-helper';
-
-
-const props = defineProps<{
-    label?: string;
-    icon?: string;
-    subText?: string;
-    visibleAddButton?: boolean;
-    addButtonLink?: Location;
-}>();
-</script>
-
-<template>
-    <div class=" flex items-center gap-1 h-8 mt-1 pb-2 px-2 text-gray-800 font-bold text-label-md">
-        <div class="flex items-center h-6 w-full">
-            <p-lazy-img
-                v-if="props.icon"
-                :src="assetUrlConverter(props.icon)"
-                width="1.5rem"
-                height="1.5rem"
-                class="icon rounded flex-shrink-0"
-            />
-            <div class="flex-grow">
-                <slot>{{ props.label }}</slot>
-                <span v-if="props.subText"
-                      class="font-normal"
-                >{{ props.subText }}</span>
-            </div>
-            <div class="flex-shrink-0 inline-flex">
-                <slot name="right-end" />
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/apps/web/src/common/modules/navigations/new-lsb/composables/use-lsb-router-item-state.ts b/apps/web/src/common/modules/navigations/new-lsb/composables/use-lsb-router-item-state.ts
deleted file mode 100644
index 53bd568175..0000000000
--- a/apps/web/src/common/modules/navigations/new-lsb/composables/use-lsb-router-item-state.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { UnwrapRef, Ref } from 'vue';
-import { computed } from 'vue';
-import type { Location } from 'vue-router';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import { assetUrlConverter } from '@/lib/helper/asset-helper';
-
-import type { LSBIcon, LSBRouterPredicate } from '@/common/modules/navigations/new-lsb/type';
-
-interface UseLsbRouterItemProps {
-    to?: Ref<Readonly<Location>>;
-    icon?: Ref<Readonly<LSBIcon>>;
-    imgIcon?: Ref<Readonly<string>>;
-    predicate?: LSBRouterPredicate;
-}
-export const useLsbRouterItemState = (props: UnwrapRef<UseLsbRouterItemProps>) => {
-    const router = useRouter();
-    const route = useRoute();
-
-    const isSelected = computed<boolean>(() => {
-        if (!props.to) return false;
-
-        if (props.predicate) {
-            return props.predicate(props.to, route);
-        }
-
-        const resolved = router.resolve(props.to);
-        if (!resolved) return false;
-
-        let currentPath = route.fullPath;
-        if (currentPath.indexOf('?') > 0) {
-            currentPath = currentPath.slice(0, currentPath.indexOf('?'));
-        }
-        const resolvedHref = resolved.href;
-        return currentPath === resolvedHref;
-    });
-    const iconName = computed<string>(() => {
-        if (!props.icon) return '';
-        if (typeof props.icon === 'string') return props.icon;
-        return props.icon.name;
-    });
-    const iconColor = computed<string>(() => {
-        if (!props.icon) return 'inherit';
-        if (typeof props.icon === 'string') return 'inherit';
-        return props.icon.color || 'inherit';
-    });
-    const imgIconUrl = computed<string>(() => (props.imgIcon ? assetUrlConverter(props.imgIcon) : ''));
-
-    return {
-        isSelected,
-        iconName,
-        iconColor,
-        imgIconUrl,
-    };
-};
diff --git a/apps/web/src/common/modules/navigations/new-lsb/type.ts b/apps/web/src/common/modules/navigations/new-lsb/type.ts
index 39f4908eb1..e05ca944e4 100644
--- a/apps/web/src/common/modules/navigations/new-lsb/type.ts
+++ b/apps/web/src/common/modules/navigations/new-lsb/type.ts
@@ -1,6 +1,21 @@
+import type { TranslateResult } from 'vue-i18n';
 import type { Location, Route } from 'vue-router';
 
+import type { TreeNodeDisplayType, TreeNodeIcon, TreeNodeLink } from '@cloudforet/mirinae/types/data-display/tree/new-tree/type';
+
+import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
 
-export type LSBIcon = string | { name: string; color?: string; };
 export type HighlightTagType = 'new' | 'beta' | 'update';
 export type LSBRouterPredicate = (to: Location, currentRoute: Route) => boolean;
+export type LSBItemFavoriteVisibility = 'always' | 'active-only' | 'hovered-only' | 'none';
+
+export interface LSBItemProps {
+  id: string;
+  name: TranslateResult;
+  icon?: TreeNodeIcon;
+  link: TreeNodeLink;
+  displayType?: TreeNodeDisplayType;
+  highlightTag?: HighlightTagType;
+  favoriteOptions?: FavoriteOptions;
+  favoriteVisibility?: LSBItemFavoriteVisibility;
+}
diff --git a/apps/web/src/common/modules/page-layouts/type.ts b/apps/web/src/common/modules/page-layouts/type.ts
index 4343f25bac..9d3acd34e0 100644
--- a/apps/web/src/common/modules/page-layouts/type.ts
+++ b/apps/web/src/common/modules/page-layouts/type.ts
@@ -1,7 +1,7 @@
 import type { TranslateResult } from 'vue-i18n';
 import type { Location } from 'vue-router';
 
-import type { ProjectGroupTreeNodeData } from '@/services/project/v-shared/types/project-tree-type';
+import type { ProjectGroupTreeNodeData } from '@/common/modules/project/project-tree-type';
 
 export interface Breadcrumb {
     name: TranslateResult|string;
diff --git a/apps/web/src/common/modules/project/ProjectSelectDropdown.vue b/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
index 85eb705042..f0d5e3d4d8 100644
--- a/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
+++ b/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
@@ -17,15 +17,16 @@ import type { ReferenceMap } from '@/store/reference/type';
 import getRandomId from '@/lib/random-id-generator';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import { indigo, peacock } from '@/styles/colors';
-
-import type { ProjectTreeOptions } from '@/services/project/v-shared/composables/use-project-tree';
-import { useProjectTree } from '@/services/project/v-shared/composables/use-project-tree';
 import type {
     ProjectTreeItem, ProjectTreeNodeData, ProjectTreeRoot, ProjectTreeItemType,
     ProjectTreeNode,
-} from '@/services/project/v-shared/types/project-tree-type';
+} from '@/common/modules/project/project-tree-type';
+import type { ProjectTreeOptions } from '@/common/modules/project/use-project-tree';
+import { useProjectTree } from '@/common/modules/project/use-project-tree';
+
+import { indigo, peacock } from '@/styles/colors';
+
+
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
 
 interface ProjectGroupSelectOptions {
diff --git a/apps/web/src/services/project/v-shared/types/project-tree-type.ts b/apps/web/src/common/modules/project/project-tree-type.ts
similarity index 100%
rename from apps/web/src/services/project/v-shared/types/project-tree-type.ts
rename to apps/web/src/common/modules/project/project-tree-type.ts
diff --git a/apps/web/src/services/project/v-shared/composables/use-project-tree.ts b/apps/web/src/common/modules/project/use-project-tree.ts
similarity index 99%
rename from apps/web/src/services/project/v-shared/composables/use-project-tree.ts
rename to apps/web/src/common/modules/project/use-project-tree.ts
index 00b833a92b..5c7867039c 100644
--- a/apps/web/src/services/project/v-shared/composables/use-project-tree.ts
+++ b/apps/web/src/common/modules/project/use-project-tree.ts
@@ -11,7 +11,7 @@ import type { ProjectGroupModel } from '@/api-clients/identity/project-group/sch
 import type { ProjectListParameters } from '@/api-clients/identity/project/schema/api-verbs/list';
 import type { ProjectModel } from '@/api-clients/identity/project/schema/model';
 
-import type { ProjectTreeItemType, ProjectTreeNodeData } from '@/services/project/v-shared/types/project-tree-type';
+import type { ProjectTreeItemType, ProjectTreeNodeData } from '@/common/modules/project/project-tree-type';
 
 
 type ProjectGroupListResponse = ListResponse<ProjectGroupModel>;
diff --git a/apps/web/src/lib/config/global-config/feature-schema.ts b/apps/web/src/lib/config/global-config/feature-schema.ts
index 2ddd0251b7..15999061e8 100644
--- a/apps/web/src/lib/config/global-config/feature-schema.ts
+++ b/apps/web/src/lib/config/global-config/feature-schema.ts
@@ -17,6 +17,9 @@ export const initialFeatureSchema: FeatureSchemaType = {
                 visibleAlertTabAtDetail: true,
             },
         },
+        V2: {
+            menu: { [MENU_ID.PROJECT]: true },
+        },
     },
     [FEATURES.SERVICE_ACCOUNT]: {
         currentVersion: 'V1',
diff --git a/apps/web/src/services/alert-manager/v1/components/AlertMainAlertCreateModal.vue b/apps/web/src/services/alert-manager/v1/components/AlertMainAlertCreateModal.vue
index 2c55b7b58b..2038e5a3ed 100644
--- a/apps/web/src/services/alert-manager/v1/components/AlertMainAlertCreateModal.vue
+++ b/apps/web/src/services/alert-manager/v1/components/AlertMainAlertCreateModal.vue
@@ -21,9 +21,9 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
+import type { ProjectTreeNodeData } from '@/common/modules/project/project-tree-type';
 import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
 
-import type { ProjectTreeNodeData } from '@/services/project/v-shared/types/project-tree-type';
 
 const props = defineProps<{
     visible: boolean;
diff --git a/apps/web/src/services/alert-manager/v1/components/EscalationPolicyForm.vue b/apps/web/src/services/alert-manager/v1/components/EscalationPolicyForm.vue
index 550a34591b..4595574386 100644
--- a/apps/web/src/services/alert-manager/v1/components/EscalationPolicyForm.vue
+++ b/apps/web/src/services/alert-manager/v1/components/EscalationPolicyForm.vue
@@ -22,13 +22,13 @@ import { useUserStore } from '@/store/user/user-store';
 import { referenceRouter } from '@/lib/reference/referenceRouter';
 
 import { useFormValidator } from '@/common/composables/form-validator';
+import type { ProjectTreeNodeData } from '@/common/modules/project/project-tree-type';
 import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
 
 import EscalationPolicyFormRulesInput from '@/services/alert-manager/v1/components/EscalationPolicyFormRulesInput.vue';
 import { ACTION } from '@/services/alert-manager/v1/constants/alert-constant';
 import { useEscalationPolicyFormStore } from '@/services/alert-manager/v1/stores/escalation-policy-form-store';
 import type { ActionMode } from '@/services/alert-manager/v1/types/alert-type';
-import type { ProjectTreeNodeData } from '@/services/project/v-shared/types/project-tree-type';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
 
 const props = withDefaults(defineProps<{
diff --git a/apps/web/src/services/iam/components/AppManagementFormModal.vue b/apps/web/src/services/iam/components/AppManagementFormModal.vue
index 4d9017db5d..a44e91cdbc 100644
--- a/apps/web/src/services/iam/components/AppManagementFormModal.vue
+++ b/apps/web/src/services/iam/components/AppManagementFormModal.vue
@@ -26,13 +26,13 @@ import { i18n } from '@/translations';
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import type { ProjectTreeNodeData } from '@/common/modules/project/project-tree-type';
 import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
 
 import { useRoleFormatter } from '@/services/iam/composables/refined-table-data';
 import { getInputItemsFromTagKeys } from '@/services/iam/composables/tag-data';
 import { APP_DROPDOWN_MODAL_TYPE } from '@/services/iam/constants/app-constant';
 import { useAppPageStore } from '@/services/iam/store/app-page-store';
-import type { ProjectTreeNodeData } from '@/services/project/v-shared/types/project-tree-type';
 
 
 interface AppDropdownMenuItem extends SelectDropdownMenuItem {
diff --git a/apps/web/src/services/ops-flow/components/BoardLSB.vue b/apps/web/src/services/ops-flow/components/BoardLSB.vue
index 98bb8d98c5..a55962ba56 100644
--- a/apps/web/src/services/ops-flow/components/BoardLSB.vue
+++ b/apps/web/src/services/ops-flow/components/BoardLSB.vue
@@ -3,10 +3,9 @@ import { PIconButton } from '@cloudforet/mirinae';
 
 import LSBContainer from '@/common/modules/navigations/new-lsb/LSBContainer.vue';
 import LSBDivider from '@/common/modules/navigations/new-lsb/LSBDivider.vue';
+import LSBItem from '@/common/modules/navigations/new-lsb/LSBItem.vue';
 import LSBLoadingSpinner from '@/common/modules/navigations/new-lsb/LSBLoadingSpinner.vue';
-import LSBRouterButton from '@/common/modules/navigations/new-lsb/LSBRouterButton.vue';
-import LSBRouterItem from '@/common/modules/navigations/new-lsb/LSBRouterItem.vue';
-import LSBTopTitle from '@/common/modules/navigations/new-lsb/LSBTopTitle.vue';
+import LSBTitle from '@/common/modules/navigations/new-lsb/LSBTitle.vue';
 import type { LSBRouterPredicate } from '@/common/modules/navigations/new-lsb/type';
 
 import { useAvailableCategories } from '@/services/ops-flow/composables/use-available-categories';
@@ -24,40 +23,43 @@ const { availableCategories, isLoading, refetch } = useAvailableCategories();
 
 <template>
     <l-s-b-container>
-        <l-s-b-router-button id="all-categories"
-                             icon="ic_dots-4-square"
-                             :to="{
-                                 name: OPS_FLOW_ROUTE.BOARD._NAME
-                             }"
-                             :predicate="predicate"
+        <l-s-b-title id="all-tasks"
+                     icon="ic_dots-4-square"
+                     selectable
+                     :link="{
+                         to: {
+                             name: OPS_FLOW_ROUTE.BOARD._NAME
+                         },
+                         predicate,
+                     }"
         >
-            <span class="capitalize">{{ $t('OPSFLOW.ALL_TASKS', {
+            <span class="capitalize font-normal">{{ $t('OPSFLOW.ALL_TASKS', {
                 tasks: taskManagementTemplateStore.templates.tasks
             }) }}</span>
-        </l-s-b-router-button>
+        </l-s-b-title>
         <l-s-b-divider />
-        <l-s-b-top-title>
-            {{ taskManagementTemplateStore.templates.TaskCategory }}
-            <template #right-end>
+        <l-s-b-title id="categories">
+            <span class="capitalize">{{ taskManagementTemplateStore.templates.TaskCategory }}</span>
+            <template #outer-right>
                 <p-icon-button name="ic_refresh"
                                size="sm"
                                shape="square"
                                @click="refetch"
                 />
             </template>
-        </l-s-b-top-title>
+        </l-s-b-title>
         <l-s-b-loading-spinner :loading="isLoading" />
-        <l-s-b-router-item v-for="(category, idx) in availableCategories"
-                           :id="`${category.category_id}-${idx}`"
-                           :key="`${category.category_id}-${idx}`"
-                           :index="idx"
-                           :to="{
-                               name: OPS_FLOW_ROUTE.BOARD._NAME,
-                               query: { categoryId: category.category_id }
-                           }"
-                           :predicate="predicate"
-        >
-            {{ category.name }}
-        </l-s-b-router-item>
+        <l-s-b-item v-for="(category, idx) in availableCategories"
+                    :id="`${category.category_id}-${idx}`"
+                    :key="`${category.category_id}-${idx}`"
+                    :name="category.name"
+                    :link="{
+                        to: {
+                            name: OPS_FLOW_ROUTE.BOARD._NAME,
+                            query: { categoryId: category.category_id }
+                        },
+                        predicate,
+                    }"
+        />
     </l-s-b-container>
 </template>
diff --git a/apps/web/src/services/project/v-shared/composables/queries/use-project-group-query.ts b/apps/web/src/services/project/v-shared/composables/queries/use-project-group-query.ts
new file mode 100644
index 0000000000..ace2516c32
--- /dev/null
+++ b/apps/web/src/services/project/v-shared/composables/queries/use-project-group-query.ts
@@ -0,0 +1,45 @@
+import { computed, type Ref } from 'vue';
+
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
+
+import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
+import type { ProjectGroupModel } from '@/api-clients/identity/project-group/schema/model';
+
+export const useProjectGroupQuery = ({
+    projectGroupId,
+    enabled,
+}: {
+  projectGroupId: Ref<string|undefined>;
+  enabled?: Ref<boolean>;
+}) => {
+    const { projectGroupAPI, projectGroupListQueryKey, projectGroupQueryKey } = useProjectGroupApi();
+    const queryKey = computed(() => [...projectGroupQueryKey.value, projectGroupId.value]);
+    const projectGroupQuery = useQuery({
+        queryKey,
+        queryFn: () => projectGroupAPI.get({ project_group_id: projectGroupId.value as string }),
+        enabled: computed(() => {
+            if (!projectGroupId.value) return false;
+            return enabled ? enabled.value : true;
+        }),
+        staleTime: 1000 * 60 * 5, // 5 minutes
+        gcTime: 1000 * 60 * 1, // 1 minutes
+    });
+
+    const queryClient = useQueryClient();
+    const setQueryData = (newData: ProjectGroupModel) => {
+        queryClient.setQueryData(queryKey.value, newData);
+    };
+    const invalidateQuery = () => {
+        queryClient.invalidateQueries({ queryKey: queryKey.value });
+    };
+    const invalidateAllQueries = () => {
+        queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
+    };
+
+    return {
+        ...projectGroupQuery,
+        setQueryData,
+        invalidateQuery,
+        invalidateAllQueries,
+    };
+};
diff --git a/apps/web/src/services/project/v-shared/composables/queries/use-project-groups-query.ts b/apps/web/src/services/project/v-shared/composables/queries/use-project-groups-query.ts
new file mode 100644
index 0000000000..bc601faf77
--- /dev/null
+++ b/apps/web/src/services/project/v-shared/composables/queries/use-project-groups-query.ts
@@ -0,0 +1,28 @@
+import type { Ref } from 'vue';
+
+import { useQuery } from '@tanstack/vue-query';
+
+import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
+
+import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
+
+export const useProjectGroupsQuery = (ops?: { enabled: Ref<boolean> }) => {
+    const { projectGroupAPI, projectGroupListQueryKey } = useProjectGroupApi();
+    const projectGroupsApiQuery = new ApiQueryHelper().setOnly('name', 'project_group_id');
+    const { data, isLoading, error } = useQuery({
+        queryKey: projectGroupListQueryKey,
+        queryFn: async () => {
+            const res = await projectGroupAPI.list({
+                query: projectGroupsApiQuery.data,
+            });
+            return res.results ?? [];
+        },
+        enabled: ops?.enabled,
+        staleTime: 1000 * 60 * 5, // 5 minutes
+        gcTime: 1000 * 60 * 1, // 1 minutes
+    });
+
+    return {
+        data, isLoading, error,
+    };
+};
diff --git a/apps/web/src/services/project/v-shared/composables/use-project-group-names.ts b/apps/web/src/services/project/v-shared/composables/use-project-group-names.ts
new file mode 100644
index 0000000000..ee09904c12
--- /dev/null
+++ b/apps/web/src/services/project/v-shared/composables/use-project-group-names.ts
@@ -0,0 +1,23 @@
+import type { Ref } from 'vue';
+import { computed } from 'vue';
+
+import { useProjectGroupsQuery } from '@/services/project/v-shared/composables/queries/use-project-groups-query';
+
+export const useProjectGroupNames = ({
+    projectGroupId, enabled,
+}: {
+  projectGroupId: Ref<string|undefined>;
+  enabled: Ref<boolean>;
+}) => {
+    const { data } = useProjectGroupsQuery({ enabled });
+
+    const projectGroupNames = computed<string[]>(() => {
+        if (!data.value) return [];
+        if (projectGroupId.value) {
+            return data.value.filter((pg) => pg.project_group_id !== projectGroupId.value).map((item) => item.name);
+        }
+        return data.value.map((item) => item.name);
+    });
+
+    return projectGroupNames;
+};
diff --git a/apps/web/src/services/project/v-shared/tree/TreeItem.vue b/apps/web/src/services/project/v-shared/tree/TreeItem.vue
deleted file mode 100644
index e0eb6175f3..0000000000
--- a/apps/web/src/services/project/v-shared/tree/TreeItem.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<script setup lang="ts">
-
-import {
-    computed, onMounted, reactive, useSlots, watch,
-} from 'vue';
-import type { SetupContext } from 'vue/types/v3-setup-context';
-
-import { PI, PSpinner } from '@cloudforet/mirinae';
-
-import { useProxyValue } from '@/common/composables/proxy-state';
-
-import type { TreeNode } from '@/services/project/v-shared/tree/type';
-
-interface Props {
-    node: TreeNode;
-    selectedId?: string;
-    isOpen?: boolean;
-}
-
-const props = defineProps<Props>();
-const slots = useSlots();
-const isExpandable = (_slots: SetupContext['slots']) => _slots['child-content'] !== undefined;
-
-const emit = defineEmits<{(e: 'click-toggle', node: TreeNode): Promise<void>|void;
-    (e: 'click-item', node: TreeNode): void;
-    (e: 'update:is-open', value: boolean): void;
-}>();
-
-const state = reactive({
-    toggleIcon: computed(() => (state.proxyIsOpen ? 'ic_caret-down-filled-alt' : 'ic_caret-right')),
-    fetchLoading: false,
-    isSelected: computed(() => props.selectedId === props.node.id),
-    proxyIsOpen: useProxyValue('isOpen', props, emit),
-});
-
-const openToggle = () => {
-    state.proxyIsOpen = true;
-};
-const closeToggle = () => {
-    state.proxyIsOpen = false;
-};
-
-const handleClickToggle = async () => {
-    if (state.proxyIsOpen) {
-        closeToggle();
-    } else {
-        openToggle();
-    }
-};
-
-const handleClickItem = () => {
-    emit('click-item', props.node);
-};
-
-
-watch(() => state.proxyIsOpen, async (isOpen) => {
-    if (!props.node.id) return;
-    if (isOpen) {
-        await emit('click-toggle', props.node);
-    } else state.proxyIsOpen = false;
-}, { immediate: true });
-
-onMounted(() => {
-    if (state.proxyIsOpen) {
-        openToggle();
-    }
-});
-
-</script>
-
-<template>
-    <div class="tree-item">
-        <component :is="props.node.data.to ? 'router-link' : 'div'"
-                   :to="props.node.data.to"
-                   class="content-wrapper"
-                   :class="{ selected: props.node.id === props.selectedId }"
-                   :style="{ 'padding-left': `${0.125 + (props.node.depth || 0) * 1}rem`}"
-                   @click.native="handleClickItem"
-        >
-            <div v-if="isExpandable(slots)"
-                 class="toggle-icon"
-            >
-                <p-spinner v-if="props.node.loading"
-                           size="sm"
-                />
-                <p-i v-else
-                     :name="state.toggleIcon"
-                     width="1rem"
-                     height="1rem"
-                     @click.prevent="handleClickToggle"
-                />
-            </div>
-            <div :class="{'content-text': true, 'expandable': isExpandable(slots)}">
-                <slot name="content"
-                      v-bind="{ node: props.node }"
-                />
-            </div>
-        </component>
-        <div v-if="slots && state.proxyIsOpen"
-             class="child-group"
-        >
-            <slot name="child-content" />
-        </div>
-    </div>
-</template>
-
-<style lang="postcss" scoped>
-.tree-item {
-    @apply w-full;
-
-    .content-wrapper {
-        @apply flex items-center rounded w-full;
-        padding-left: 0.125rem;
-        padding-right: 0.5rem;
-
-        &:hover {
-            @apply bg-blue-100 cursor-pointer;
-        }
-
-        &.selected {
-            @apply bg-blue-200;
-        }
-
-        .content-text {
-            @apply w-full;
-
-            &.expandable {
-                width: calc(100% - 1rem);
-            }
-        }
-    }
-
-    .child-group {
-        @apply flex items-center;
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/v-shared/tree/TreeView.vue b/apps/web/src/services/project/v-shared/tree/TreeView.vue
deleted file mode 100644
index d4df77e367..0000000000
--- a/apps/web/src/services/project/v-shared/tree/TreeView.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<script lang="ts">
-// eslint-disable-next-line import/order,import/no-duplicates
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-    name: 'TreeView',
-});
-</script>
-<script setup lang="ts">
-/* eslint-disable import/first */
-// eslint-disable-next-line import/no-duplicates
-import { reactive } from 'vue';
-
-import { useProxyValue } from '@/common/composables/proxy-state';
-
-import type { TreeNode, TreeDisplayMap } from '@/services/project/v-shared/tree/type';
-
-import TreeItem from './TreeItem.vue';
-
-interface Props {
-    treeData: TreeNode[];
-    treeDisplayMap?: TreeDisplayMap;
-    selectedId?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    treeDisplayMap: () => ({}),
-    selectedId: undefined,
-});
-const emit = defineEmits<{(event: 'click-toggle', node: TreeNode): Promise<void>|void;
-    (e: 'click-item', node: TreeNode): void;
-    (e: 'update:tree-display-map', value: TreeDisplayMap): void;
-}>();
-
-const state = reactive({
-    proxyTreeDisplayMap: useProxyValue('treeDisplayMap', props, emit),
-});
-
-const handleClickToggle = async (item: TreeNode) => {
-    await emit('click-toggle', item);
-};
-const handleClickItem = (item: TreeNode) => {
-    emit('click-item', item);
-};
-
-const handleUpdateTreeDisplayMap = (id: string|undefined, isOpen: boolean) => {
-    if (!id) return;
-    state.proxyTreeDisplayMap = {
-        ...state.proxyTreeDisplayMap,
-        [id]: {
-            isOpen,
-        },
-    };
-};
-
-</script>
-<template>
-    <div class="tree-view">
-        <tree-item v-for="item in treeData"
-                   :key="item.id"
-                   :node="item"
-                   :selected-id="selectedId"
-                   :is-open="state.proxyTreeDisplayMap[item.id]?.isOpen"
-                   @click-toggle="handleClickToggle"
-                   @click-item="handleClickItem"
-                   @update:is-open="handleUpdateTreeDisplayMap(item.id, $event)"
-        >
-            <template #content="{ node }">
-                <slot name="content"
-                      v-bind="{ node }"
-                />
-            </template>
-            <template v-if="Array.isArray(item.children)"
-                      #child-content
-            >
-                <tree-view :tree-data="item.children"
-                           :tree-display-map.sync="state.proxyTreeDisplayMap"
-                           :selected-id="selectedId"
-                           @click-toggle="handleClickToggle"
-                           @click-item="handleClickItem"
-                >
-                    <template #content="{ node }">
-                        <slot name="content"
-                              v-bind="{ node }"
-                        />
-                    </template>
-                </tree-view>
-            </template>
-        </tree-item>
-    </div>
-</template>
-
-<style scoped lang="postcss">
-.tree-view {
-    width: 100%;
-}
-</style>
-
diff --git a/apps/web/src/services/project/v-shared/tree/type.ts b/apps/web/src/services/project/v-shared/tree/type.ts
deleted file mode 100644
index ebfccbb339..0000000000
--- a/apps/web/src/services/project/v-shared/tree/type.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { Location } from 'vue-router/types/router';
-
-export interface TreeNode<T extends TreeData = any> {
-    id: string;
-    depth: number;
-    isOpen?: boolean;
-    data: T;
-    loading?: boolean;
-    children?: TreeNode<T>[];
-}
-
-export interface TreeData {
-    to?: Location;
-}
-export interface TreeDisplayMap {
-    [id: string]: {
-        isOpen: boolean;
-    }
-}
diff --git a/apps/web/src/services/project/v1/ProjectContainer.vue b/apps/web/src/services/project/v1/ProjectContainer.vue
index 8470bdb3c8..0f588e5560 100644
--- a/apps/web/src/services/project/v1/ProjectContainer.vue
+++ b/apps/web/src/services/project/v1/ProjectContainer.vue
@@ -10,12 +10,12 @@ import CenteredPageLayout from '@/common/modules/page-layouts/CenteredPageLayout
 import GeneralPageLayout from '@/common/modules/page-layouts/GeneralPageLayout.vue';
 import VerticalPageLayout from '@/common/modules/page-layouts/VerticalPageLayout.vue';
 
-import ProjectFormModal from '@/services/project/v-shared/components/ProjectFormModal.vue';
-import ProjectMainProjectGroupFormModal from '@/services/project/v-shared/components/ProjectMainProjectGroupFormModal.vue';
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
-import { useProjectTreeStore } from '@/services/project/v-shared/stores/project-tree-store';
+import ProjectFormModal from '@/services/project/v1/components/ProjectFormModal.vue';
+import ProjectMainProjectGroupFormModal from '@/services/project/v1/components/ProjectMainProjectGroupFormModal.vue';
 import ProjectLSB from '@/services/project/v1/ProjectLSB.vue';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
+import { useProjectPageStore } from '@/services/project/v1/stores/project-page-store';
+import { useProjectTreeStore } from '@/services/project/v1/stores/project-tree-store';
 
 
 
diff --git a/apps/web/src/services/project/v1/ProjectLSB.vue b/apps/web/src/services/project/v1/ProjectLSB.vue
index cca43a4483..37963f1d2a 100644
--- a/apps/web/src/services/project/v1/ProjectLSB.vue
+++ b/apps/web/src/services/project/v1/ProjectLSB.vue
@@ -29,10 +29,10 @@ import { MENU_ITEM_TYPE } from '@/common/modules/navigations/lsb/type';
 
 import { indigo, peacock } from '@/styles/colors';
 
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
 import ProjectMainTree from '@/services/project/v1/components/ProjectMainTree.vue';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
 import { useProjectDetailPageStore } from '@/services/project/v1/stores/project-detail-page-store';
+import { useProjectPageStore } from '@/services/project/v1/stores/project-page-store';
 
 const route = useRoute();
 const allReferenceStore = useAllReferenceStore();
diff --git a/apps/web/src/services/project/v1/components/ProjectDetailTabHeader.vue b/apps/web/src/services/project/v1/components/ProjectDetailTabHeader.vue
index a0e5257b0a..a2537ee869 100644
--- a/apps/web/src/services/project/v1/components/ProjectDetailTabHeader.vue
+++ b/apps/web/src/services/project/v1/components/ProjectDetailTabHeader.vue
@@ -51,14 +51,14 @@ import { gray, peacock } from '@/styles/colors';
 import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-constant';
 import { DYNAMIC_COST_QUERY_SET_PARAMS } from '@/services/cost-explorer/constants/managed-cost-analysis-query-sets';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
-import ProjectFormModal from '@/services/project/v-shared/components/ProjectFormModal.vue';
-import ProjectMainProjectGroupMoveModal from '@/services/project/v-shared/components/ProjectMainProjectGroupMoveModal.vue';
-import ProjectMemberInviteModal from '@/services/project/v-shared/components/ProjectMemberInviteModal.vue';
-import ProjectTagsModal from '@/services/project/v-shared/components/ProjectTagsModal.vue';
-import { useProjectTreeStore } from '@/services/project/v-shared/stores/project-tree-store';
+import ProjectFormModal from '@/services/project/v1/components/ProjectFormModal.vue';
 import ProjectMainDeleteModal from '@/services/project/v1/components/ProjectMainDeleteModal.vue';
+import ProjectMainProjectGroupMoveModal from '@/services/project/v1/components/ProjectMainProjectGroupMoveModal.vue';
+import ProjectMemberInviteModal from '@/services/project/v1/components/ProjectMemberInviteModal.vue';
+import ProjectTagsModal from '@/services/project/v1/components/ProjectTagsModal.vue';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
 import { useProjectDetailPageStore } from '@/services/project/v1/stores/project-detail-page-store';
+import { useProjectTreeStore } from '@/services/project/v1/stores/project-tree-store';
 import { SERVICE_ACCOUNT_ROUTE } from '@/services/service-account/routes/route-constant';
 
 
diff --git a/apps/web/src/services/project/v-shared/components/ProjectFormModal.vue b/apps/web/src/services/project/v1/components/ProjectFormModal.vue
similarity index 100%
rename from apps/web/src/services/project/v-shared/components/ProjectFormModal.vue
rename to apps/web/src/services/project/v1/components/ProjectFormModal.vue
diff --git a/apps/web/src/services/project/v-shared/components/ProjectGroupMemberManagementModal.vue b/apps/web/src/services/project/v1/components/ProjectGroupMemberManagementModal.vue
similarity index 99%
rename from apps/web/src/services/project/v-shared/components/ProjectGroupMemberManagementModal.vue
rename to apps/web/src/services/project/v1/components/ProjectGroupMemberManagementModal.vue
index a460bafd7c..da282e066b 100644
--- a/apps/web/src/services/project/v-shared/components/ProjectGroupMemberManagementModal.vue
+++ b/apps/web/src/services/project/v1/components/ProjectGroupMemberManagementModal.vue
@@ -28,7 +28,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
 import { useRoleFormatter } from '@/services/iam/composables/refined-table-data';
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
+import { useProjectPageStore } from '@/services/project/v1/stores/project-page-store';
 
 
 interface Props {
diff --git a/apps/web/src/services/project/v1/components/ProjectMainProjectCard.vue b/apps/web/src/services/project/v1/components/ProjectMainProjectCard.vue
index a4aebb2bd5..cf3261b267 100644
--- a/apps/web/src/services/project/v1/components/ProjectMainProjectCard.vue
+++ b/apps/web/src/services/project/v1/components/ProjectMainProjectCard.vue
@@ -19,9 +19,9 @@ import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 
 import { peacock } from '@/styles/colors';
 
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
 import type { ProjectCardItemType } from '@/services/project/v-shared/types/project-type';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
+import { useProjectPageStore } from '@/services/project/v1/stores/project-page-store';
 import { SERVICE_ACCOUNT_ROUTE } from '@/services/service-account/routes/route-constant';
 
 interface Props {
diff --git a/apps/web/src/services/project/v1/components/ProjectMainProjectGroupCard.vue b/apps/web/src/services/project/v1/components/ProjectMainProjectGroupCard.vue
index 1411badfd1..09e45126a9 100644
--- a/apps/web/src/services/project/v1/components/ProjectMainProjectGroupCard.vue
+++ b/apps/web/src/services/project/v1/components/ProjectMainProjectGroupCard.vue
@@ -14,9 +14,9 @@ import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 
 import { indigo } from '@/styles/colors';
 
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
 import type { ProjectCardItemType } from '@/services/project/v-shared/types/project-type';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
+import { useProjectPageStore } from '@/services/project/v1/stores/project-page-store';
 
 interface Props {
     item: ProjectCardItemType;
diff --git a/apps/web/src/services/project/v-shared/components/ProjectMainProjectGroupFormModal.vue b/apps/web/src/services/project/v1/components/ProjectMainProjectGroupFormModal.vue
similarity index 54%
rename from apps/web/src/services/project/v-shared/components/ProjectMainProjectGroupFormModal.vue
rename to apps/web/src/services/project/v1/components/ProjectMainProjectGroupFormModal.vue
index 171a9e3cb1..62fd0f1b4f 100644
--- a/apps/web/src/services/project/v-shared/components/ProjectMainProjectGroupFormModal.vue
+++ b/apps/web/src/services/project/v1/components/ProjectMainProjectGroupFormModal.vue
@@ -1,51 +1,66 @@
 <script lang="ts" setup>
 import {
-    computed, reactive, watch,
+    onMounted, onUnmounted, reactive, ref, toRef, watch, computed,
 } from 'vue';
 
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import { PButtonModal, PFieldGroup, PTextInput } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
-import type { ProjectGroupCreateParameters } from '@/api-clients/identity/project-group/schema/api-verbs/create';
-import type { ProjectGroupListParameters } from '@/api-clients/identity/project-group/schema/api-verbs/list';
-import type { ProjectGroupUpdateParameters } from '@/api-clients/identity/project-group/schema/api-verbs/update';
+import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
 import type { ProjectGroupModel } from '@/api-clients/identity/project-group/schema/model';
 import { i18n } from '@/translations';
 
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFormValidator } from '@/common/composables/form-validator';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
+import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
+import { useProjectGroupNames } from '@/services/project/v-shared/composables/use-project-group-names';
+
+
+/* mutations */
+
+
+
+
 interface Props {
     visible: boolean;
     projectGroupId?: string;
     updateMode: boolean;
     parentGroupId?: string;
 }
-
 const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'update:visible', value: boolean): void;
     (e: 'confirm', isCreating: boolean, projectGroup?: ProjectGroupModel): void;
 }>();
 
-const allReferenceStore = useAllReferenceStore();
-
-const storeState = reactive({
-    projectGroups: computed(() => allReferenceStore.getters.projectGroup),
+/* project group */
+const { data: projectGroup } = useProjectGroupQuery({
+    projectGroupId: toRef(props, 'projectGroupId'),
 });
 
+/* modal active state */
 const state = reactive({
     proxyVisible: useProxyValue('visible', props, emit),
-    projectGroupNames: [] as string[],
-    loading: false,
 });
+const hasMounted = ref(false);
+onMounted(() => {
+    hasMounted.value = true;
+});
+onUnmounted(() => {
+    hasMounted.value = false;
+});
+
+/* project group names */
+const projectGroupNames = useProjectGroupNames({
+    projectGroupId: computed(() => (props.updateMode ? undefined : props.projectGroupId)),
+    enabled: computed(() => props.visible && hasMounted.value),
+});
+
+/* form */
 const {
     forms: { projectGroupName },
     invalidState,
@@ -58,85 +73,76 @@ const {
     projectGroupName: (val?: string) => {
         if (!val?.length) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_REQUIRED');
         if (val.length > 40) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_LENGTH');
-        if (state.projectGroupNames.includes(val)) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_DUPLICATED');
+        if (projectGroupNames.value.includes(val)) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_DUPLICATED');
         return true;
     },
 });
-
-/* Api */
-const projectGroupNameApiQuery = new ApiQueryHelper().setOnly('name', 'project_group_id');
-const getProjectGroupNames = async () => {
-    const res = await SpaceConnector.clientV2.identity.projectGroup.list<ProjectGroupListParameters, ListResponse<ProjectGroupModel>>({
-        query: projectGroupNameApiQuery.data,
-    });
-    if (props.updateMode) {
-        state.projectGroupNames = (res.results || []).filter((projectGroup) => projectGroup.project_group_id !== props.projectGroupId).map((item) => item.name);
+watch(() => props.projectGroupId, async (after) => {
+    if (after && props.updateMode) {
+        setForm('projectGroupName', projectGroup.value?.name);
     } else {
-        state.projectGroupNames = (res.results || []).map((item) => item.name);
+        initForm();
     }
-};
+}, { immediate: true });
 
-const createProjectGroup = async (params: ProjectGroupCreateParameters): Promise<ProjectGroupModel|undefined> => {
-    try {
-        const result = await SpaceConnector.clientV2.identity.projectGroup.create<ProjectGroupCreateParameters, ProjectGroupModel>(params);
+
+const { projectGroupAPI, projectGroupQueryKey, projectGroupListQueryKey } = useProjectGroupApi();
+const queryClient = useQueryClient();
+const { mutateAsync: createProjectGroup, isPending: isCreating } = useMutation({
+    mutationFn: projectGroupAPI.create,
+    onSuccess: () => {
         showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_CREATE_PROJECT_GROUP'), '');
-        return result;
-    } catch (e) {
+        queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
+    },
+    onError: (e) => {
         ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_CREATE_PROJECT_GROUP'));
-        return undefined;
-    }
-};
-const updateProjectGroup = async (params: ProjectGroupUpdateParameters): Promise<ProjectGroupModel|undefined> => {
-    try {
-        const result = await SpaceConnector.clientV2.identity.projectGroup.update<ProjectGroupUpdateParameters, ProjectGroupModel>(params);
+    },
+});
+
+const { mutateAsync: updateProjectGroup, isPending: isUpdating } = useMutation({
+    mutationFn: projectGroupAPI.update,
+    onSuccess: (data) => {
         showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_UPDATE_PROJECT_GROUP'), '');
-        return result;
-    } catch (e) {
+        queryClient.invalidateQueries({ queryKey: [...projectGroupQueryKey.value, data.project_group_id] });
+        queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
+    },
+    onError: (e) => {
         ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_UPDATE_PROJECT_GROUP'));
-        return undefined;
-    }
-};
+    },
+});
+const isProcessing = computed(() => isCreating.value || isUpdating.value);
+
+
 
 /* Event */
 const confirm = async () => {
-    if (state.loading) return;
+    if (isProcessing.value) return;
     if (!projectGroupName.value) return;
     if (!isAllValid.value) return;
 
-    state.loading = true;
-    const updateParams: ProjectGroupUpdateParameters = {
-        name: projectGroupName.value,
-        project_group_id: props.projectGroupId as string,
-    };
-
-    const createParams: ProjectGroupCreateParameters = {
-        name: projectGroupName.value,
-        parent_group_id: props.parentGroupId,
-    };
-
     let result: ProjectGroupModel|undefined;
 
-    if (!props.updateMode) result = await createProjectGroup({ ...createParams } as ProjectGroupCreateParameters);
-    else result = await updateProjectGroup({ ...updateParams });
+    if (props.updateMode) {
+        if (!props.projectGroupId) {
+            ErrorHandler.handleRequestError(new Error('projectGroupId is required'), 'projectGroupId is required', true);
+            return;
+        }
+        const hasChanged = projectGroup.value?.name !== projectGroupName.value;
+        result = hasChanged ? await updateProjectGroup({
+            name: projectGroupName.value,
+            project_group_id: props.projectGroupId,
+        }) : projectGroup.value;
+    } else {
+        result = await createProjectGroup({
+            name: projectGroupName.value,
+            parent_group_id: props.parentGroupId,
+        });
+    }
 
     emit('confirm', !props.updateMode, result);
-    state.loading = false;
     state.proxyVisible = false;
 };
 
-watch(() => props.projectGroupId, async (after) => {
-    if (after && props.updateMode) {
-        setForm('projectGroupName', storeState.projectGroups[after].name);
-    } else {
-        initForm();
-    }
-}, { immediate: true });
-
-
-/* Init */
-(async () => {
-    await getProjectGroupNames();
-})();
 </script>
 
 <template>
@@ -146,7 +152,7 @@ watch(() => props.projectGroupId, async (after) => {
                     fade
                     backdrop
                     :visible.sync="state.proxyVisible"
-                    :disabled="state.loading || !isAllValid || storeState.projectGroups[props.projectGroupId]?.name === projectGroupName"
+                    :disabled="isProcessing || !isAllValid || projectGroup?.name === projectGroupName"
                     @confirm="confirm"
     >
         <template #body>
diff --git a/apps/web/src/services/project/v-shared/components/ProjectMainProjectGroupMoveModal.vue b/apps/web/src/services/project/v1/components/ProjectMainProjectGroupMoveModal.vue
similarity index 98%
rename from apps/web/src/services/project/v-shared/components/ProjectMainProjectGroupMoveModal.vue
rename to apps/web/src/services/project/v1/components/ProjectMainProjectGroupMoveModal.vue
index 10e973fbe0..8f066fe304 100644
--- a/apps/web/src/services/project/v-shared/components/ProjectMainProjectGroupMoveModal.vue
+++ b/apps/web/src/services/project/v1/components/ProjectMainProjectGroupMoveModal.vue
@@ -17,9 +17,9 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
+import type { ProjectTreeNodeData } from '@/common/modules/project/project-tree-type';
 import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
 
-import type { ProjectTreeNodeData } from '@/services/project/v-shared/types/project-tree-type';
 
 
 interface Props {
diff --git a/apps/web/src/services/project/v1/components/ProjectMainTree.vue b/apps/web/src/services/project/v1/components/ProjectMainTree.vue
index 084cd23dfb..c78b4b006a 100644
--- a/apps/web/src/services/project/v1/components/ProjectMainTree.vue
+++ b/apps/web/src/services/project/v1/components/ProjectMainTree.vue
@@ -8,6 +8,7 @@ import { useRoute } from 'vue-router/composables';
 import { isEqual } from 'lodash';
 
 import { PI, PTreeView } from '@cloudforet/mirinae';
+import type { TreeData, TreeDisplayMap, TreeNode } from '@cloudforet/mirinae/types/data-display/tree/tree-view/type';
 
 import { i18n } from '@/translations';
 
@@ -22,9 +23,8 @@ import type { Breadcrumb } from '@/common/modules/page-layouts/type';
 
 import { indigo, peacock } from '@/styles/colors';
 
-import { useProjectTreeStore } from '@/services/project/v-shared/stores/project-tree-store';
-import type { TreeNode, TreeDisplayMap, TreeData } from '@/services/project/v-shared/tree/type';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
+import { useProjectTreeStore } from '@/services/project/v1/stores/project-tree-store';
 
 interface ProjectDataType extends TreeData {
     name: string;
diff --git a/apps/web/src/services/project/v-shared/components/ProjectMemberInviteModal.vue b/apps/web/src/services/project/v1/components/ProjectMemberInviteModal.vue
similarity index 100%
rename from apps/web/src/services/project/v-shared/components/ProjectMemberInviteModal.vue
rename to apps/web/src/services/project/v1/components/ProjectMemberInviteModal.vue
diff --git a/apps/web/src/services/project/v-shared/components/ProjectTagsModal.vue b/apps/web/src/services/project/v1/components/ProjectTagsModal.vue
similarity index 100%
rename from apps/web/src/services/project/v-shared/components/ProjectTagsModal.vue
rename to apps/web/src/services/project/v1/components/ProjectTagsModal.vue
diff --git a/apps/web/src/services/project/v1/composables/use-project-favorite.ts b/apps/web/src/services/project/v1/composables/use-project-favorite.ts
index a477bf6e94..e30a82cb6b 100644
--- a/apps/web/src/services/project/v1/composables/use-project-favorite.ts
+++ b/apps/web/src/services/project/v1/composables/use-project-favorite.ts
@@ -16,7 +16,7 @@ import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/sto
 import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import type { FavoriteItem } from '@/common/modules/favorites/favorite-button/type';
 
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
+import { useProjectPageStore } from '@/services/project/v1/stores/project-page-store';
 
 
 export const useProjectFavorite = () => {
diff --git a/apps/web/src/services/project/v1/composables/use-project-tree-data.ts b/apps/web/src/services/project/v1/composables/use-project-tree-data.ts
index 7c3f982ed0..791dfb7699 100644
--- a/apps/web/src/services/project/v1/composables/use-project-tree-data.ts
+++ b/apps/web/src/services/project/v1/composables/use-project-tree-data.ts
@@ -7,13 +7,14 @@ import type { Location } from 'vue-router';
 
 import { get } from 'lodash';
 
+import type { TreeDisplayMap, TreeNode } from '@cloudforet/mirinae/types/data-display/tree/tree-view/type';
+
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
 import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
 
-import { useProjectTreeStore } from '@/services/project/v-shared/stores/project-tree-store';
-import type { TreeNode, TreeDisplayMap } from '@/services/project/v-shared/tree/type';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
+import { useProjectTreeStore } from '@/services/project/v1/stores/project-tree-store';
 
 interface ParentGroupItem {
     name: string;
diff --git a/apps/web/src/services/project/v1/pages/ProjectDetailPageLegacy.vue b/apps/web/src/services/project/v1/pages/ProjectDetailPageLegacy.vue
index c74b484d78..8b6507a616 100644
--- a/apps/web/src/services/project/v1/pages/ProjectDetailPageLegacy.vue
+++ b/apps/web/src/services/project/v1/pages/ProjectDetailPageLegacy.vue
@@ -39,11 +39,11 @@ import { RECENT_TYPE } from '@/common/modules/navigations/type';
 
 import { peacock } from '@/styles/colors';
 
-import ProjectFormModal from '@/services/project/v-shared/components/ProjectFormModal.vue';
-import ProjectMainProjectGroupMoveModal from '@/services/project/v-shared/components/ProjectMainProjectGroupMoveModal.vue';
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
+import ProjectFormModal from '@/services/project/v1/components/ProjectFormModal.vue';
+import ProjectMainProjectGroupMoveModal from '@/services/project/v1/components/ProjectMainProjectGroupMoveModal.vue';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
 import { useProjectDetailPageStore } from '@/services/project/v1/stores/project-detail-page-store';
+import { useProjectPageStore } from '@/services/project/v1/stores/project-page-store';
 
 
 interface Props {
diff --git a/apps/web/src/services/project/v1/pages/ProjectMainPage.vue b/apps/web/src/services/project/v1/pages/ProjectMainPage.vue
index 9d1bd868a5..e5fd8050f1 100644
--- a/apps/web/src/services/project/v1/pages/ProjectMainPage.vue
+++ b/apps/web/src/services/project/v1/pages/ProjectMainPage.vue
@@ -25,12 +25,12 @@ import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 
 import { indigo, peacock } from '@/styles/colors';
 
-import ProjectGroupMemberManagementModal from '@/services/project/v-shared/components/ProjectGroupMemberManagementModal.vue';
-import ProjectMainProjectGroupMoveModal from '@/services/project/v-shared/components/ProjectMainProjectGroupMoveModal.vue';
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
-import { useProjectTreeStore } from '@/services/project/v-shared/stores/project-tree-store';
+import ProjectGroupMemberManagementModal from '@/services/project/v1/components/ProjectGroupMemberManagementModal.vue';
 import ProjectMain from '@/services/project/v1/components/ProjectMain.vue';
 import ProjectMainDeleteModal from '@/services/project/v1/components/ProjectMainDeleteModal.vue';
+import ProjectMainProjectGroupMoveModal from '@/services/project/v1/components/ProjectMainProjectGroupMoveModal.vue';
+import { useProjectPageStore } from '@/services/project/v1/stores/project-page-store';
+import { useProjectTreeStore } from '@/services/project/v1/stores/project-tree-store';
 
 
 const gnbStore = useGnbStore();
diff --git a/apps/web/src/services/project/v-shared/stores/project-page-store.ts b/apps/web/src/services/project/v1/stores/project-page-store.ts
similarity index 98%
rename from apps/web/src/services/project/v-shared/stores/project-page-store.ts
rename to apps/web/src/services/project/v1/stores/project-page-store.ts
index e0419725b6..e9315e43f7 100644
--- a/apps/web/src/services/project/v-shared/stores/project-page-store.ts
+++ b/apps/web/src/services/project/v1/stores/project-page-store.ts
@@ -19,11 +19,10 @@ import { useUserStore } from '@/store/user/user-store';
 import getRandomId from '@/lib/random-id-generator';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import { useProjectTree } from '@/services/project/v-shared/composables/use-project-tree';
 import type {
     ProjectGroupTreeItem, ProjectGroupTreeNodeData, ProjectTreeNodeData, ProjectTreeRoot,
-} from '@/services/project/v-shared/types/project-tree-type';
+} from '@/common/modules/project/project-tree-type';
+import { useProjectTree } from '@/common/modules/project/use-project-tree';
 
 
 const projectTreeHelper = useProjectTree();
diff --git a/apps/web/src/services/project/v-shared/stores/project-tree-store.ts b/apps/web/src/services/project/v1/stores/project-tree-store.ts
similarity index 89%
rename from apps/web/src/services/project/v-shared/stores/project-tree-store.ts
rename to apps/web/src/services/project/v1/stores/project-tree-store.ts
index ceff69d543..a70f413df6 100644
--- a/apps/web/src/services/project/v-shared/stores/project-tree-store.ts
+++ b/apps/web/src/services/project/v1/stores/project-tree-store.ts
@@ -3,7 +3,8 @@ import { nextTick, reactive } from 'vue';
 import { cloneDeep } from 'lodash';
 import { defineStore } from 'pinia';
 
-import type { TreeDisplayMap } from '@/services/project/v-shared/tree/type';
+import type { TreeDisplayMap } from '@cloudforet/mirinae/types/data-display/tree/tree-view/type';
+
 
 export const useProjectTreeStore = defineStore('project-tree', () => {
     const state = reactive({
diff --git a/apps/web/src/services/project/v2/ProjectContainer.vue b/apps/web/src/services/project/v2/ProjectContainer.vue
index 34675203ec..fe8bde8aac 100644
--- a/apps/web/src/services/project/v2/ProjectContainer.vue
+++ b/apps/web/src/services/project/v2/ProjectContainer.vue
@@ -1,89 +1,117 @@
 <script setup lang="ts">
-import { computed, onUnmounted, reactive } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
+import { computed, onUnmounted, watch } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
-import type { ProjectGroupModel } from '@/api-clients/identity/project-group/schema/model';
-import type { ProjectModel } from '@/api-clients/identity/project/schema/model';
+import { i18n } from '@/translations';
 
+import { MENU_ID } from '@/lib/menu/config';
+
+import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
+import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 import CenteredPageLayout from '@/common/modules/page-layouts/CenteredPageLayout.vue';
 import GeneralPageLayout from '@/common/modules/page-layouts/GeneralPageLayout.vue';
+import type { Breadcrumb } from '@/common/modules/page-layouts/type';
 import VerticalPageLayout from '@/common/modules/page-layouts/VerticalPageLayout.vue';
 
-import ProjectFormModal from '@/services/project/v-shared/components/ProjectFormModal.vue';
-import ProjectMainProjectGroupFormModal from '@/services/project/v-shared/components/ProjectMainProjectGroupFormModal.vue';
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
-import { useProjectTreeStore } from '@/services/project/v-shared/stores/project-tree-store';
+import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
 import ProjectLSB from '@/services/project/v2/ProjectLSB.vue';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+import { useProjectListStore } from '@/services/project/v2/stores/project-list-store';
 
+/* project list store */
+const projectListStore = useProjectListStore();
+const projectMap = computed(() => projectListStore.projectMap);
+const projectGroupMap = computed(() => projectListStore.projectGroupMap);
 
-
+/* routed project or project group */
 const route = useRoute();
-const router = useRouter();
-const gnbStore = useGnbStore();
-const projectPageStore = useProjectPageStore();
-const projectPageState = projectPageStore.state;
-const projectTreeStore = useProjectTreeStore();
+const { projectGroupId, projectId } = useProjectOrGroupId(computed(() => route.params.projectGroupOrProjectId));
 
-const state = reactive({
-    currentProjectGroupId: computed(() => route.params.projectGroupId),
-    // TODO: check route
-    isProjectRootPage: computed(() => route.name === PROJECT_ROUTE_V2._NAME && !state.currentProjectGroupId),
+/* selected paths */
+const parentIds = computed<string[]>(() => {
+    const pids: string[] = [];
+    let currentGroupId: string|undefined;
+    if (projectId.value) currentGroupId = projectMap.value[projectId.value]?.data.groupInfo?.id;
+    else currentGroupId = projectGroupId.value;
+    while (currentGroupId) {
+        pids.unshift(currentGroupId);
+        currentGroupId = projectGroupMap.value[currentGroupId]?.data.parentGroupInfo?.id;
+    }
+    return pids;
+});
+const selectedPaths = computed<string[]>(() => {
+    const paths = parentIds.value.slice();
+    if (projectId.value) paths.push(projectId.value);
+    return paths;
 });
 
-/* Event */
-const handleUpdateProjectFormModalVisible = (visible: boolean) => {
-    projectPageStore.setProjectFormModalVisible(visible);
-    if (projectPageState.currentSelectedProjectId && !visible) {
-        projectPageStore.setCurrentSelectedProjectId(undefined);
-        projectPageStore.setCurrentSelectedProjectGroupId(undefined);
-    }
-};
-const handleUpdateProjectGroupFormModalVisible = (visible: boolean) => {
-    projectPageStore.setProjectGroupFormVisible(visible);
-    if (projectPageState.currentSelectedProjectGroupId && !visible) {
-        projectPageStore.setCurrentSelectedProjectGroupId(undefined);
-        projectPageStore.setProjectGroupFormUpdateMode(false);
+/* breadcrumbs */
+const gnbStore = useGnbStore();
+const projectGroupBreadcrumbs = computed<Breadcrumb[]>(() => {
+    const breadcrumbs: Breadcrumb[] = [
+        { name: i18n.t('MENU.PROJECT'), to: { name: PROJECT_ROUTE_V2._NAME } },
+    ];
+    breadcrumbs.push(...parentIds.value.map((id) => ({
+        name: projectGroupMap.value[id]?.name ?? id,
+        to: {
+            name: PROJECT_ROUTE_V2._NAME,
+            params: {
+                projectGroupOrProjectId: id,
+            },
+        },
+    })));
+    if (projectId.value) {
+        breadcrumbs.push({
+            name: projectMap.value[projectId.value]?.name ?? projectId.value,
+            to: {
+                name: PROJECT_ROUTE_V2._NAME,
+                params: {
+                    projectGroupOrProjectId: projectId.value,
+                },
+            },
+        });
     }
-};
-const refreshProejctTree = () => {
-    projectTreeStore.refreshProjectTree();
-};
-
-const handleConfirmProjectFormModal = (isCreating: boolean, result: ProjectModel) => {
-    refreshProejctTree();
-    if (isCreating && !result.project_group_id && !state.isProjectRootPage) {
-        // TODO: check route
-        router.push({ name: PROJECT_ROUTE_V2._NAME });
+    return breadcrumbs;
+});
+const favoriteOptions = computed<FavoriteOptions>(() => {
+    if (projectId.value) {
+        return {
+            type: FAVORITE_TYPE.PROJECT,
+            id: projectId.value,
+        };
     }
-};
-const handleConfirmProjectGroupFormModal = (isCreating: boolean, result: ProjectGroupModel) => {
-    refreshProejctTree();
-    if (isCreating && !result.parent_group_id && !state.isProjectRootPage) {
-        // TODO: check route
-        router.push({ name: PROJECT_ROUTE_V2._NAME });
+    if (projectGroupId.value) {
+        return {
+            type: FAVORITE_TYPE.PROJECT_GROUP,
+            id: projectGroupId.value,
+        };
     }
-};
-
-/* Lifecycle */
+    return {
+        type: FAVORITE_TYPE.MENU,
+        id: MENU_ID.PROJECT,
+    };
+});
+watch(projectGroupBreadcrumbs, (bc) => {
+    gnbStore.setBreadcrumbs(bc);
+    gnbStore.setFavoriteItemId(favoriteOptions.value);
+});
 onUnmounted(() => {
     gnbStore.initState();
-    projectPageStore.reset();
 });
 </script>
 
 <template>
     <fragment>
-        <vertical-page-layout v-if="$route.meta.lsbVisible">
+        <vertical-page-layout v-if="route.meta?.lsbVisible">
             <template #sidebar>
-                <project-l-s-b />
+                <project-l-s-b :selected-paths="selectedPaths" />
             </template>
             <template #default>
                 <router-view />
             </template>
         </vertical-page-layout>
-        <centered-page-layout v-else-if="$route.meta.centeredLayout"
+        <centered-page-layout v-else-if="route.meta?.centeredLayout"
                               has-nav-bar
         >
             <router-view />
@@ -91,20 +119,5 @@ onUnmounted(() => {
         <general-page-layout v-else>
             <router-view />
         </general-page-layout>
-        <project-form-modal v-if="projectPageState.projectFormModalVisible"
-                            :visible="projectPageState.projectFormModalVisible"
-                            :project-id="projectPageState.currentSelectedProjectId"
-                            :project-group-id="projectPageState.currentSelectedProjectGroupId"
-                            @update:visible="handleUpdateProjectFormModalVisible"
-                            @confirm="handleConfirmProjectFormModal"
-        />
-        <project-main-project-group-form-modal v-if="projectPageState.projectGroupFormVisible"
-                                               :visible="projectPageState.projectGroupFormVisible"
-                                               :update-mode="projectPageState.projectGroupFormUpdateMode"
-                                               :parent-group-id="projectPageState.currentSelectedProjectGroupId"
-                                               :project-group-id="projectPageState.currentSelectedProjectGroupId || state.currentProjectGroupId"
-                                               @update:visible="handleUpdateProjectGroupFormModalVisible"
-                                               @confirm="handleConfirmProjectGroupFormModal"
-        />
     </fragment>
 </template>
diff --git a/apps/web/src/services/project/v2/ProjectLSB.vue b/apps/web/src/services/project/v2/ProjectLSB.vue
index eaeee51e11..63833fe08c 100644
--- a/apps/web/src/services/project/v2/ProjectLSB.vue
+++ b/apps/web/src/services/project/v2/ProjectLSB.vue
@@ -1,256 +1,165 @@
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core/index';
-import { computed, reactive, ref } from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-
+import { vOnClickOutside } from '@vueuse/components';
+import type Vue from 'vue';
+import {
+    computed, nextTick, onMounted, ref, watch,
+} from 'vue';
 
 import {
-    PTextInput, PTextHighlighting, PEmpty, PContextMenu, PIconButton,
+    PButton, PContextMenu, useContextMenuController,
 } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+import type { TreeNodeRoutePredicate } from '@cloudforet/mirinae/types/data-display/tree/new-tree/type';
 
 import { i18n } from '@/translations';
 
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectReferenceItem } from '@/store/reference/project-reference-store';
-
-import { MENU_ID } from '@/lib/menu/config';
-
 import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import LSB from '@/common/modules/navigations/lsb/LSB.vue';
-import LSBRouterMenuItem from '@/common/modules/navigations/lsb/modules/LSBRouterMenuItem.vue';
-import type { LSBItem, LSBMenu } from '@/common/modules/navigations/lsb/type';
-import { MENU_ITEM_TYPE } from '@/common/modules/navigations/lsb/type';
+import { type FavoriteItem } from '@/common/modules/favorites/favorite-button/type';
+import LSBContainer from '@/common/modules/navigations/new-lsb/LSBContainer.vue';
+import LSBDivider from '@/common/modules/navigations/new-lsb/LSBDivider.vue';
+import LSBStarredTree from '@/common/modules/navigations/new-lsb/LSBStarredTree.vue';
+import LSBTitle from '@/common/modules/navigations/new-lsb/LSBTitle.vue';
 
 import { indigo, peacock } from '@/styles/colors';
 
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
-import ProjectMainTree from '@/services/project/v2/components/ProjectMainTree.vue';
+import ProjectLSBSearch from '@/services/project/v2/components/ProjectLSBSearch.vue';
+import ProjectLSBTree from '@/services/project/v2/components/ProjectLSBTree.vue';
+import { useProjectStarredTree } from '@/services/project/v2/composables/use-project-starred-tree';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
-const route = useRoute();
-const allReferenceStore = useAllReferenceStore();
-const favoriteStore = useFavoriteStore();
-const favoriteGetters = favoriteStore.getters;
-const userWorkspaceStore = useUserWorkspaceStore();
-const workspaceStoreGetters = userWorkspaceStore.getters;
-const projectPageStore = useProjectPageStore();
-const projectPageState = projectPageStore.state;
-const menuRef = ref<any|null>(null);
-
+const props = defineProps<{
+    selectedPaths?: string[];
+}>();
 
-const storeState = reactive({
-    projectItems: computed<ProjectReferenceItem[]>(() => Object.values(allReferenceStore.getters.project)),
-    favoriteItems: computed(() => favoriteGetters.favoriteMenuList.filter((favoriteMenu) => {
-        if (favoriteMenu.itemType === FAVORITE_TYPE.PROJECT) return true;
-        if (favoriteMenu.itemType === FAVORITE_TYPE.PROJECT_GROUP) return true;
-        return false;
-    })),
-    currentWorkspaceId: computed(() => workspaceStoreGetters.currentWorkspaceId as string),
+/* starred */
+const favoriteStore = useFavoriteStore();
+const { starredItems } = useProjectStarredTree({
+    favoriteItems: computed(() => favoriteStore.getters.favoriteMenuList as FavoriteItem[]),
 });
 
-const state = reactive({
-    projectKeyword: '',
-    currentPath: computed(() => route.fullPath),
-    starredMenuItems: computed<LSBItem[]>(() => storeState.favoriteItems.map((d) => {
-        if (d.itemType === FAVORITE_TYPE.PROJECT_GROUP) {
-            return {
-                type: MENU_ITEM_TYPE.ITEM,
-                label: d.label,
-                id: d.name,
-                icon: { name: 'ic_folder-filled', color: indigo[500] },
-                to: {
-                    // TODO: check route
-                    name: PROJECT_ROUTE_V2._NAME,
-                    params: { projectGroupId: d.itemId },
-                },
-                favoriteOptions: { type: FAVORITE_TYPE.PROJECT_GROUP, id: d.name },
-            };
-        }
-        return {
-            type: MENU_ITEM_TYPE.ITEM,
-            label: d.label,
-            id: d.name,
-            icon: { name: 'ic_document-filled', color: peacock[600] },
-            to: {
-                // TODO: check route
-                name: PROJECT_ROUTE_V2._NAME,
-                params: { id: d.itemId },
-            },
-            favoriteOptions: { type: FAVORITE_TYPE.PROJECT, id: d.name },
-        };
-    })),
-    // TODO: check route
-    isProjectLandingPage: computed(() => route.name === PROJECT_ROUTE_V2._NAME),
-    projectLandingMenuSet: computed(() => [
-        {
-            type: MENU_ITEM_TYPE.SLOT,
-            label: i18n.t('PROJECT.LANDING.ALL_PROJECTS'),
-            id: MENU_ID.PROJECT,
-            icon: 'ic_dots-4-square',
-            // TODO: check route
-            to: { name: PROJECT_ROUTE_V2._NAME },
-            hideFavorite: true,
-        },
-        {
-            type: MENU_ITEM_TYPE.DIVIDER,
-        },
-        {
-            type: MENU_ITEM_TYPE.COLLAPSIBLE,
-            label: i18n.t('PROJECT.LANDING.PROJECT'),
-            id: 'project',
-        },
-    ]),
-    menuSet: computed<LSBMenu[]>(() => {
-        const baseMenuSet = [
-            {
-                type: MENU_ITEM_TYPE.STARRED,
-                childItems: state.starredMenuItems,
-                currentPath: state.currentPath,
-            },
-            { type: MENU_ITEM_TYPE.DIVIDER },
-        ];
-        return [
-            ...baseMenuSet,
-            ...state.projectLandingMenuSet,
-        ];
-    }),
-    projectFilteredByKeyword: computed<LSBItem[]>(() => storeState.projectItems.filter((project) => project.name?.toLowerCase()?.includes(state.projectKeyword?.toLowerCase()))
-        .map((project) => ({
-            type: MENU_ITEM_TYPE.ITEM,
-            label: project.name,
-            id: project.key,
-            icon: { name: 'ic_document-filled', color: peacock[600] },
-            to: {
-                name: PROJECT_ROUTE_V2._NAME,
-                params: { id: project.key, workspaceId: storeState.currentWorkspaceId },
-            },
-            favoriteOptions: { type: FAVORITE_TYPE.PROJECT, id: project.key },
-        }))),
-    createDropdownMenuItems: computed<SelectDropdownMenuItem[]>(() => ([
-        {
-            name: 'project',
-            label: i18n.t('PROJECT.LANDING.PROJECT') as string,
-            icon: 'ic_document-filled',
-            iconColor: peacock[600],
-        },
-        {
-            name: 'projectGroup',
-            label: i18n.t('PROJECT.LANDING.PROJECT_GROUP') as string,
-            icon: 'ic_folder-filled',
-            iconColor: indigo[500],
-        },
-    ])),
-    createMenuVisible: false,
+/* create button */
+const projectPageModalStore = useProjectPageModalStore();
+const createDropdownMenuItems = computed<SelectDropdownMenuItem[]>(() => ([
+    {
+        name: 'project',
+        label: i18n.t('PROJECT.LANDING.PROJECT'),
+        icon: 'ic_document-filled',
+        iconColor: peacock[600],
+    },
+    {
+        name: 'projectGroup',
+        label: i18n.t('PROJECT.LANDING.PROJECT_GROUP'),
+        icon: 'ic_folder-filled',
+        iconColor: indigo[500],
+    },
+]));
+const buttonRef = ref<any|null>(null);
+const contextMenuRef = ref<any|null>(null);
+const { visibleMenu, toggleContextMenu, hideContextMenu } = useContextMenuController({
+    targetRef: buttonRef,
+    contextMenuRef,
+    position: 'right',
+    menuWidth: 'max-content',
 });
-
-const handleClickAddButton = () => {
-    state.createMenuVisible = !state.createMenuVisible;
-};
 const handleSelectCreateMenu = (item: SelectDropdownMenuItem) => {
     if (item.name === 'project') {
-        projectPageStore.setProjectFormModalVisible(true);
+        projectPageModalStore.openCreateProjectFormModal();
     } else if (item.name === 'projectGroup') {
-        projectPageStore.setProjectGroupFormVisible(true);
+        projectPageModalStore.openCreateProjectGroupFormModal();
     }
+    hideContextMenu();
 };
 
-onClickOutside(menuRef, () => {
-    state.createMenuVisible = false;
+/* all projects */
+const predicate: TreeNodeRoutePredicate = (to, curr) => to.params?.projectGroupOrProjectId === curr.params.projectGroupOrProjectId;
+
+/* search */
+const projectKeyword = ref<string>('');
+
+/* auto scroll */
+const treeRef = ref<Vue | null>(null);
+
+watch([() => props.selectedPaths, treeRef], ([paths, treeComponent]) => {
+    if (!paths?.length || !treeComponent?.$el) return;
+
+    nextTick(() => {
+        const selectedNode = treeComponent.$el.querySelector(`[data-node-id="${paths[paths.length - 1]}"]`);
+        if (selectedNode) {
+            const rect = selectedNode.getBoundingClientRect();
+            const isVisible = (
+                rect.top >= 0
+                && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
+            );
+
+            if (!isVisible) {
+                selectedNode.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center',
+                });
+            }
+        }
+    });
+});
+
+/* init */
+const mounted = ref(false);
+onMounted(() => {
+    nextTick(() => {
+        mounted.value = true;
+    });
 });
+
 </script>
 
 <template>
-    <l-s-b class="project-l-s-b"
-           :menu-set="state.menuSet"
-    >
-        <template #slot-project="item">
-            <l-s-b-router-menu-item :current-path="state.currentPath"
-                                    :item="item"
-            >
-                <template #right-extra>
-                    <div v-if="projectPageState.isWorkspaceOwner"
-                         ref="menuRef"
-                         class="create-button-wrapper"
-                    >
-                        <p-icon-button name="ic_plus"
-                                       size="sm"
-                                       style-type="tertiary"
-                                       shape="square"
-                                       class="dashboard-create-button"
-                                       @click.prevent="handleClickAddButton"
-                        />
-                        <p-context-menu v-show="state.createMenuVisible"
-                                        class="create-context-menu"
-                                        no-select-indication
-                                        :menu="state.createDropdownMenuItems"
-                                        @select="handleSelectCreateMenu"
-                        />
-                    </div>
-                </template>
-            </l-s-b-router-menu-item>
-        </template>
-        <template #collapsible-contents-project>
-            <p-text-input v-model="state.projectKeyword"
-                          class="project-search"
-                          placeholder="Search project"
-            />
-            <template v-if="state.projectKeyword">
-                <l-s-b-router-menu-item v-for="(_item, idx) of state.projectFilteredByKeyword"
-                                        :key="idx"
-                                        :item="_item"
-                                        :idx="`search-${idx}`"
-                                        :current-path="state.currentPath"
-                                        is-hide-favorite
+    <l-s-b-container>
+        <l-s-b-starred-tree expanded
+                            :items="starredItems"
+        />
+        <l-s-b-divider />
+        <l-s-b-title id="all-projects"
+                     icon="ic_dots-4-square"
+                     selectable
+                     :link="{
+                         to: {
+                             name: PROJECT_ROUTE_V2._NAME,
+                         },
+                         predicate,
+                     }"
+        >
+            <span class="font-normal">{{ $t('PROJECT.LANDING.ALL_PROJECTS') }}</span>
+            <template #outer-right>
+                <p-button ref="buttonRef"
+                          name="ic_plus"
+                          size="sm"
+                          style-type="tertiary"
+                          class="cursor-pointer"
+                          @click.stop.prevent="toggleContextMenu"
                 >
-                    <p-text-highlighting class="search-result-text"
-                                         :term="state.projectKeyword"
-                                         :text="_item.label"
-                    />
-                </l-s-b-router-menu-item>
-                <p-empty v-if="state.projectKeyword && !state.projectFilteredByKeyword.length"
-                         class="search-empty"
-                >
-                    <span>
-                        {{ $t('PROJECT.LANDING.SEARCH_EMPTY_TEXT') }}
-                    </span>
-                </p-empty>
+                    {{ $t('COMMON.BUTTONS.CREATE') }}
+                </p-button>
+                <p-context-menu v-show="visibleMenu"
+                                ref="contextMenuRef"
+                                v-on-click-outside="hideContextMenu"
+                                class="z-10"
+                                no-select-indication
+                                :menu="createDropdownMenuItems"
+                                @select="handleSelectCreateMenu"
+                />
             </template>
-            <project-main-tree v-else />
-        </template>
-    </l-s-b>
+        </l-s-b-title>
+        <l-s-b-divider />
+        <l-s-b-title id="project-search"
+                     :name="i18n.t('PROJECT.LANDING.PROJECT')"
+        />
+        <project-l-s-b-search :keyword="projectKeyword"
+                              @update:keyword="projectKeyword = $event"
+        />
+        <project-l-s-b-tree v-if="mounted && !projectKeyword.length"
+                            ref="treeRef"
+                            :selected-paths="props.selectedPaths"
+        />
+    </l-s-b-container>
 </template>
 
-<style scoped lang="postcss">
-.project-l-s-b {
-
-    .create-button-wrapper {
-        @apply relative inline-block;
-
-        .create-context-menu {
-            @apply absolute;
-            top: 100%;
-            right: 0;
-            z-index: 10;
-            width: max-content;
-        }
-    }
-
-    .project-search {
-        @apply w-full;
-        margin-bottom: 0.5rem;
-    }
-    .search-result-text {
-        @apply overflow-hidden whitespace-nowrap;
-        text-overflow: ellipsis;
-    }
-    .search-empty {
-        @apply text-paragraph-md;
-        white-space: pre;
-        margin-top: 0.75rem;
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue b/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
new file mode 100644
index 0000000000..80b88a933e
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { PSelectDropdown, PIconButton } from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import { i18n } from '@/translations';
+
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+const props = withDefaults(defineProps<{
+    projectId?: string;
+    projectGroupId?: string;
+    usageType?: 'header'|'list';
+}>(), {
+    projectId: undefined,
+    projectGroupId: undefined,
+    usageType: 'header',
+});
+
+const emit = defineEmits<{(e: 'update:visible', visible: boolean): void;
+}>();
+const visibleMenu = ref(false);
+const handleUpdateVisibleMenu = (visible: boolean) => {
+    visibleMenu.value = visible;
+    emit('update:visible', visible);
+};
+
+const actionItems = computed<SelectDropdownMenuItem[]>(() => [
+    {
+        name: 'rename',
+        label: i18n.t('PROJECT.DETAIL.RENAME'),
+        icon: 'ic_edit-text',
+    },
+    {
+        name: 'move',
+        label: i18n.t('PROJECT.DETAIL.MOVE'),
+        icon: 'ic_move',
+    },
+    ...(props.projectId ? [{
+        name: 'tags',
+        label: i18n.t('PROJECT.DETAIL.TAGS'),
+        icon: 'ic_label',
+    }] : []),
+    { type: 'divider', name: 'divider' },
+    {
+        name: 'delete',
+        label: i18n.t('PROJECT.DETAIL.DELETE'),
+        icon: 'ic_delete',
+    },
+]);
+
+const projectPageModalStore = useProjectPageModalStore();
+
+const handleSelectItem = (selectedItem: SelectDropdownMenuItem|string|number) => {
+    let selected: string = selectedItem as string;
+    if (typeof selected === 'object') selected = (selectedItem as SelectDropdownMenuItem).name;
+    if (selected === 'rename') {
+        if (props.projectId) {
+            projectPageModalStore.openEditProjectFormModal(props.projectId);
+        } else if (props.projectGroupId) {
+            projectPageModalStore.openEditProjectGroupFormModal(props.projectGroupId);
+        }
+    } else if (selected === 'move') {
+        if (props.projectId) {
+            projectPageModalStore.openProjectMoveModal(props.projectId);
+        } else if (props.projectGroupId) {
+            projectPageModalStore.openProjectGroupMoveModal(props.projectGroupId);
+        }
+    } else if (selected === 'tags') {
+        if (props.projectId) {
+            projectPageModalStore.openProjectManageTagsModal(props.projectId);
+        } else if (props.projectGroupId) {
+            projectPageModalStore.openProjectGroupManageTagsModal(props.projectGroupId);
+        }
+    } else if (selected === 'delete') {
+        if (props.projectId) {
+            projectPageModalStore.openProjectDeleteModal(props.projectId);
+        } else if (props.projectGroupId) {
+            projectPageModalStore.openProjectGroupDeleteModal(props.projectGroupId);
+        }
+    }
+};
+</script>
+
+<template>
+    <p-select-dropdown style-type="tertiary-icon-button"
+                       button-icon="ic_ellipsis-horizontal"
+                       size="sm"
+                       :menu="actionItems"
+                       reset-selection-on-menu-close
+                       menu-width="max-content"
+                       menu-position="right"
+                       @update:visible-menu="handleUpdateVisibleMenu"
+                       @select="handleSelectItem"
+    >
+        <template v-if="props.usageType === 'list'"
+                  #dropdown-icon-button
+        >
+            <p-icon-button name="ic_ellipsis-horizontal"
+                           :activated="visibleMenu"
+                           size="sm"
+                           style-type="tertiary"
+            />
+        </template>
+    </p-select-dropdown>
+</template>
diff --git a/apps/web/src/services/project/v2/components/ProjectAndGroupListPanel.vue b/apps/web/src/services/project/v2/components/ProjectAndGroupListPanel.vue
new file mode 100644
index 0000000000..49ad1971d5
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectAndGroupListPanel.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+
+import {
+    computed, ref,
+} from 'vue';
+
+import { useQuery } from '@tanstack/vue-query';
+import { uniq } from 'lodash';
+
+import {
+    PFieldTitle, PEmpty, PPaneLayout, PI, PButton,
+} from '@cloudforet/mirinae';
+
+import { useServiceAccountApi } from '@/api-clients/identity/service-account/composables/use-service-account-api';
+import type { ServiceAccountListParameters } from '@/api-clients/identity/service-account/schema/api-verbs/list';
+
+import ProjectCard from '@/services/project/v2/components/ProjectCard.vue';
+import ProjectGroupCard from '@/services/project/v2/components/ProjectGroupCard.vue';
+import { useProjectListStore } from '@/services/project/v2/stores/project-list-store';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+const props = defineProps<{
+    targetId?: string;
+    targetType?: 'project' | 'projectGroup';
+}>();
+
+/* ui */
+const isCollapsed = ref(false);
+
+/* modal */
+const projectPageModalStore = useProjectPageModalStore();
+
+/* project list store */
+const projectListStore = useProjectListStore();
+
+/* filtered data */
+const projects = computed(() => {
+    if (props.targetType === 'projectGroup' && props.targetId) {
+        return projectListStore.getProjectsByGroupId(props.targetId);
+    }
+    if (!props.targetType && !props.targetId) {
+        return projectListStore.projects;
+    }
+    return [];
+});
+
+const projectGroups = computed(() => {
+    if (props.targetType === 'projectGroup' && props.targetId) {
+        return projectListStore.getProjectGroupsByParentId(props.targetId);
+    }
+    if (!props.targetType && !props.targetId) {
+        return projectListStore.projectGroups;
+    }
+    return [];
+});
+
+/* service accounts */
+const { serviceAccountAPI, serviceAccountListQueryKey } = useServiceAccountApi();
+const serviceAccountListParams: ServiceAccountListParameters = {
+    query: {
+        only: ['provider', 'project_id'],
+    },
+};
+const { data: serviceAccountList } = useQuery({
+    queryKey: computed(() => [...serviceAccountListQueryKey.value, serviceAccountListParams]),
+    queryFn: () => serviceAccountAPI.list(serviceAccountListParams),
+    select: (data) => data.results ?? [],
+});
+const getDistinctProviders = (projectId: string): string[] => uniq(serviceAccountList.value?.filter((d) => d.project_id === projectId).map((d) => d.provider));
+
+</script>
+
+<template>
+    <p-pane-layout class="p-4">
+        <div class="flex justify-between items-center flex-wrap">
+            <div class="flex items-center gap-[2px]">
+                <p-i :name="isCollapsed ? 'ic_chevron-right' : 'ic_chevron-down'"
+                     width="1.5rem"
+                     height="1.5rem"
+                     class="cursor-pointer"
+                     @click="isCollapsed = !isCollapsed"
+                />
+                <div class="text-label-lg font-medium">
+                    {{ $t('PROJECT.LADING.GROUPS_AND_PROJECTS') }}
+                </div>
+            </div>
+            <div class="flex items-center gap-2">
+                <p-button icon-left="ic_plus"
+                          style-type="tertiary"
+                          size="md"
+                          @click="projectPageModalStore.openCreateProjectGroupFormModal()"
+                >
+                    {{ $t('PROJECT.LANDING.CREATE_GROUP') }}
+                </p-button>
+                <p-button icon-left="ic_plus"
+                          style-type="primary"
+                          size="md"
+                          @click="projectPageModalStore.openCreateProjectFormModal()"
+                >
+                    {{ $t('PROJECT.LANDING.CREATE_PROJECT') }}
+                </p-button>
+            </div>
+        </div>
+        <div v-show="!isCollapsed"
+             class="pt-6"
+        >
+            <div v-if="projectGroups.length"
+                 :class="{ 'pb-10' : !!projects.length }"
+            >
+                <p-field-title class="mb-3"
+                               :label="$t('PROJECT.LANDING.PROJECT_GROUP')"
+                >
+                    <template #right>
+                        ({{ projectGroups.length }})
+                    </template>
+                </p-field-title>
+                <div class="card-contents">
+                    <project-group-card v-for="(pg) in projectGroups"
+                                        :key="pg.key"
+                                        :project-group-id="pg.key"
+                                        :name="pg.name"
+                    />
+                </div>
+            </div>
+            <div v-if="projects.length">
+                <p-field-title class="mb-3"
+                               :label="$t('PROJECT.LANDING.PROJECT')"
+                >
+                    <template #right>
+                        ({{ projects.length }})
+                    </template>
+                </p-field-title>
+                <div class="card-contents">
+                    <project-card v-for="(p) in projects"
+                                  :key="p.key"
+                                  :project-id="p.key"
+                                  :group-name="p.data.groupInfo?.name"
+                                  :name="p.name"
+                                  :project-type="p.data.projectType"
+                                  :service-account-provider-list="getDistinctProviders(p.key)"
+                    />
+                </div>
+            </div>
+            <p-empty v-if="!projects.length && !projectGroups.length"
+                     show-image
+                     class="my-16"
+            >
+                <div>
+                    <p>{{ $t('PROJECT.LANDING.EMPTY_TEXT') }}</p>
+                </div>
+            </p-empty>
+        </div>
+    </p-pane-layout>
+</template>
+
+<style scoped lang="postcss">
+.card-contents {
+    @apply grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectCard.vue b/apps/web/src/services/project/v2/components/ProjectCard.vue
new file mode 100644
index 0000000000..a9234fe57d
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectCard.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router/composables';
+
+import {
+    PI, PTextHighlighting, PTooltip, useTextEllipsis,
+} from '@cloudforet/mirinae';
+
+import type { ProjectType } from '@/api-clients/identity/project/schema/type';
+
+import { useProviderReferenceStore, type ProviderItem } from '@/store/reference/provider-reference-store';
+
+import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
+import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
+import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+
+import ProjectActionDropdownButton from '@/services/project/v2/components/ProjectActionDropdownButton.vue';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+import { SERVICE_ACCOUNT_ROUTE } from '@/services/service-account/routes/route-constant';
+
+const props = defineProps<{
+    serviceAccountProviderList: string[];
+    searchKeyword?: string;
+    projectId: string;
+    groupName?: string;
+    name: string;
+    projectType: ProjectType;
+}>();
+
+/* favorite */
+const favoriteStore = useFavoriteStore();
+const isStarred = computed(() => favoriteStore.getters.projectItems.some((item) => item.itemId === props.projectId));
+
+/* provider */
+const providerReferenceStore = useProviderReferenceStore();
+const getProvider = (name: string): ProviderItem => providerReferenceStore.getters.providerItems[name] || {};
+
+/* project select */
+const router = useRouter();
+const handleSelectProject = () => {
+    router.replace({
+        name: PROJECT_ROUTE_V2._NAME,
+        params: {
+            projectGroupOrProjectId: props.projectId,
+        },
+    }).catch(() => {
+        // ignore error
+    });
+};
+
+/* action menu */
+const visibleActionMenu = ref(false);
+
+/* text ellipsis */
+const textEl = ref<HTMLElement|null>(null);
+const { isEllipsis } = useTextEllipsis({ textEl });
+</script>
+
+<template>
+    <div class="flex flex-col justify-between rounded-lg cursor-pointer p-3 group/prj-card bg-gray-100 hover:bg-gray-150"
+         :class="{ '!bg-blue-200': visibleActionMenu }"
+         @click="handleSelectProject"
+    >
+        <div class="h-6 mb-2 flex items-center justify-between">
+            <p-tooltip :contents="isEllipsis ? props.name : ''"
+                       class="flex overflow-hidden"
+                       position="bottom"
+            >
+                <div ref="textEl"
+                     class=" overflow-hidden whitespace-nowrap text-ellipsis"
+                >
+                    <p-i name="ic_project-filled"
+                         class="mr-1"
+                         width="1rem"
+                         height="1rem"
+                    />
+                    <p-text-highlighting class="!text-paragraph-md !font-medium"
+                                         :text="props.name"
+                                         :term="props.searchKeyword"
+                    />
+                </div>
+            </p-tooltip>
+
+            <div class="flex gap-1 items-center">
+                <div class="hidden group-hover/prj-card:block"
+                     :class="{'!block': visibleActionMenu || isStarred }"
+                >
+                    <project-action-dropdown-button :project-id="props.projectId"
+                                                    usage-type="list"
+                                                    @update:visible="visibleActionMenu = $event"
+                    />
+                </div>
+                <div class="hidden group-hover/prj-card:block"
+                     :class="{'!block': visibleActionMenu || isStarred }"
+                >
+                    <favorite-button :item-id="props.projectId"
+                                     :favorite-type="FAVORITE_TYPE.PROJECT"
+                    />
+                </div>
+            </div>
+        </div>
+        <div class="h-6 flex justify-between items-center">
+            <div v-if="props.serviceAccountProviderList.length > 0"
+                 class="flex-shrink inline-flex items-center truncate hover:text-secondary hover:font-bold"
+            >
+                <div class="truncate min-w-0 h-4">
+                    <template v-for="(provider, index) in props.serviceAccountProviderList">
+                        <router-link v-if="index < 5"
+                                     :key="index"
+                                     :to="{name: SERVICE_ACCOUNT_ROUTE._NAME,query: { provider: getProvider(provider) ? provider : null },}"
+                                     class="flex-shrink-0 inline-block w-4 h-4 bg-no-repeat bg-[length:100%] bg-center hover:opacity-50 mr-[0.37rem]"
+                                     :style="{backgroundImage: `url('${getProvider(provider).icon || require('@/assets/images/ic_cloud-filled.svg')}')`}"
+                                     @click.native.stop.prevent
+                        />
+                    </template>
+                </div>
+                <span v-if="props.serviceAccountProviderList.length > 5"
+                      class="text-label-sm text-gray-500 cursor-default font-normal pr-2"
+                >
+                    ...
+                </span>
+                <router-link v-if="props.serviceAccountProviderList.length !== 0"
+                             class="rounded-full inline-flex justify-center items-center h-5 w-5 hover:bg-blue-300"
+                             :to="{ name: SERVICE_ACCOUNT_ROUTE._NAME }"
+                             @click.native.stop.prevent
+                >
+                    <p-i name="ic_plus_thin"
+                         scale="0.8"
+                         color="inherit"
+                    />
+                </router-link>
+            </div>
+            <div v-else
+                 class="flex-shrink-0 inline-flex text-gray-700 group/account"
+            >
+                <router-link :to="{ name: SERVICE_ACCOUNT_ROUTE._NAME }"
+                             @click.native.stop.prevent
+                >
+                    <p-i name="ic_plus_thin"
+                         scale="0.8"
+                         color="inherit"
+                    />
+                </router-link>
+                <router-link :to="{ name: SERVICE_ACCOUNT_ROUTE._NAME }"
+                             @click.native.stop.prevent
+                >
+                    <span class="text-xs group-hover/account:underline"> {{ $t('PROJECT.LANDING.ADD_SERVICE_ACCOUNT') }}</span>
+                </router-link>
+            </div>
+            <div v-if="props.projectType === 'PRIVATE'"
+                 class="text-gray-500 flex items-center text-label-sm gap-[0.125rem]"
+            >
+                <p-i name="ic_lock-filled"
+                     scale="0.8"
+                     color="inherit"
+                     class="mr-[0.125rem]"
+                />
+                {{ $t('PROJECT.LANDING.INVITE_ONLY') }}
+            </div>
+        </div>
+    </div>
+</template>
+
diff --git a/apps/web/src/services/project/v2/components/ProjectDashboard.vue b/apps/web/src/services/project/v2/components/ProjectDashboard.vue
new file mode 100644
index 0000000000..694697630c
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectDashboard.vue
@@ -0,0 +1,183 @@
+<script lang="ts" setup>
+import {
+    computed,
+    onUnmounted,
+    ref, watch,
+} from 'vue';
+import { useRoute, useRouter } from 'vue-router/composables';
+
+import { useQueryClient } from '@tanstack/vue-query';
+
+import { PSkeleton } from '@cloudforet/mirinae';
+
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import DashboardLabelsButton from '@/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue';
+import DashboardRefreshDropdown from '@/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue';
+import DashboardToolsetDateDropdown
+    from '@/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue';
+import DashboardVariablesV2 from '@/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue';
+import DashboardWidgetContainerV2
+    from '@/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue';
+import type DashboardWidgetContainer from '@/services/dashboards/components/legacy/DashboardWidgetContainer.vue';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
+import { useDashboardWidgetListQuery } from '@/services/dashboards/composables/use-dashboard-widget-list-query';
+import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+
+
+
+interface Props {
+    id: string;
+    dashboardId: string;
+}
+const props = defineProps<Props>();
+
+const dashboardDetailStore = useDashboardDetailInfoStore();
+const dashboardDetailState = dashboardDetailStore.state;
+const widgetContainerRef = ref<typeof DashboardWidgetContainer|null>(null);
+const route = useRoute();
+const router = useRouter();
+
+/* Query */
+const {
+    dashboard,
+    isError: dashboardError,
+    isLoading: dashboardLoading,
+} = useDashboardGetQuery({
+    dashboardId: computed(() => route.params.dashboardId),
+});
+const {
+    widgetList,
+    isLoading: widgetLoading,
+    isError: widgetError,
+    keys: widgetListKeys,
+} = useDashboardWidgetListQuery({
+    dashboardId: computed(() => route.params.dashboardId),
+});
+const queryClient = useQueryClient();
+
+const handleRefresh = async () => {
+    await queryClient.invalidateQueries({ queryKey: widgetListKeys.publicWidgetListQueryKey.value });
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    if (widgetContainerRef.value) widgetContainerRef.value.refreshAllWidget();
+};
+watch([dashboard, () => route.params], ([_dashboard]) => {
+    if (_dashboard) {
+        dashboardDetailStore.reset();
+        dashboardDetailStore.setDashboardInfoStoreStateV2({
+            ..._dashboard,
+            project_id: route.params.id,
+        });
+    }
+}, { immediate: true });
+watch(widgetList, (_widgetList) => {
+    if (_widgetList.length) {
+        dashboardDetailStore.setDashboardWidgets(_widgetList);
+    }
+});
+watch([dashboardError, widgetError], ([_dashboardError, _widgetError]) => {
+    if (_dashboardError || _widgetError) {
+        ErrorHandler.handleError(_dashboardError || _widgetError);
+        router.push({ name: PROJECT_ROUTE_V2._NAME });
+    }
+});
+
+onUnmounted(() => {
+    dashboardDetailStore.reset();
+});
+</script>
+
+<template>
+    <div class="project-dashboard-page">
+        <div class="dashboard-wrapper">
+            <div class="title-wrapper">
+                <p-skeleton v-if="!dashboard?.name"
+                            width="20rem"
+                            height="1.5rem"
+                />
+                <div v-else
+                     class="dashboard-title"
+                >
+                    <p class="title">
+                        {{ dashboard?.name }}
+                    </p>
+                    <span class="beta-mark">beta</span>
+                </div>
+                <dashboard-labels-button class="ml-4"
+                                         dashboard-id="props.dashboardId"
+                />
+            </div>
+            <div class="contents-wrapper">
+                <div class="toolset">
+                    <dashboard-toolset-date-dropdown :date-range="dashboardDetailState.options.date_range" />
+                    <dashboard-refresh-dropdown :dashboard-id="props.dashboardId"
+                                                :loading="dashboardLoading || widgetLoading"
+                                                disable-interval
+                                                @refresh="handleRefresh"
+                    />
+                </div>
+                <div v-if="!dashboardLoading && !widgetLoading"
+                     class="selectors"
+                >
+                    <dashboard-variables-v2 class="variable-selector-wrapper"
+                                            is-project-dashboard
+                                            disable-save-button
+                                            :loading="dashboardLoading || widgetLoading"
+                    />
+                </div>
+                <dashboard-widget-container-v2 ref="widgetContainerRef" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="postcss" scoped>
+.project-dashboard-page {
+    .dashboard-wrapper {
+        .title-wrapper {
+            @apply flex items-center;
+            padding: 1.5rem 1rem;
+            .dashboard-title {
+                @apply flex;
+                .title {
+                    @apply text-label-xl font-bold text-gray-800;
+                }
+                .beta-mark {
+                    @apply text-coral-default;
+                    font-size: 0.625rem;
+                    cursor: default;
+                    margin-left: 0.125rem;
+                    height: 1.5rem;
+                }
+            }
+        }
+
+        .contents-wrapper {
+            @apply bg-gray-100 rounded-lg;
+            padding: 1rem 0.5rem 0.5rem;
+            margin: 0 1rem;
+            .toolset {
+                @apply flex justify-between items-center;
+            }
+            .selectors {
+                .variable-selector-wrapper {
+                    @apply flex flex-wrap gap-2;
+                    padding: 1rem 0 1.5rem;
+                    background-color: unset;
+                }
+            }
+        }
+    }
+
+    /* custom design-system component - p-heading */
+    :deep(.p-heading) {
+        .heading-wrapper {
+            line-height: unset;
+        }
+    }
+}
+</style>
+
diff --git a/apps/web/src/services/project/v2/components/ProjectMainDeleteModal.vue b/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue
similarity index 52%
rename from apps/web/src/services/project/v2/components/ProjectMainDeleteModal.vue
rename to apps/web/src/services/project/v2/components/ProjectDeleteModal.vue
index 648c36b598..a8fd0e7130 100644
--- a/apps/web/src/services/project/v2/components/ProjectMainDeleteModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue
@@ -2,12 +2,11 @@
 import {
     computed, reactive,
 } from 'vue';
-import { useRouter } from 'vue-router/composables';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { useQueryClient } from '@tanstack/vue-query';
 
-import type { ProjectGroupDeleteParameters } from '@/api-clients/identity/project-group/schema/api-verbs/delete';
-import type { ProjectDeleteParameters } from '@/api-clients/identity/project/schema/api-verbs/delete';
+import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
+import { useProjectApi } from '@/api-clients/identity/project/composables/use-project-api';
 import { i18n as _i18n } from '@/translations';
 
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
@@ -16,38 +15,29 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useProxyValue } from '@/common/composables/proxy-state';
 import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
 import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
 import { RECENT_TYPE } from '@/common/modules/navigations/type';
 
-import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
 
-interface Props {
-    visible: boolean;
-    targetId: string;
-    isProject?: boolean;
-    skipRedirect?: boolean;
-}
+const emit = defineEmits(['deleted']);
 
-const props = defineProps<Props>();
-const emit = defineEmits<{(e: 'update:visible', value: boolean): void;
-    (e: 'confirm'): void;
-}>();
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => projectPageModalStore.state.deleteModalVisible && !!projectPageModalStore.state.targetId);
+const isProject = computed(() => projectPageModalStore.state.targetType === 'project');
 
-const router = useRouter();
 const userWorkspaceStore = useUserWorkspaceStore();
 const favoriteStore = useFavoriteStore();
 const favoriteGetters = favoriteStore.getters;
 const recentStore = useRecentStore();
 
 const state = reactive({
-    proxyVisible: useProxyValue('visible', props, emit),
     currentWorkspaceId: computed(() => userWorkspaceStore.getters.currentWorkspaceId),
-    title: computed(() => (props.isProject ? _i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_TITLE') : _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.TITLE'))),
-    content: computed(() => (props.isProject ? _i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_CONTENT') : _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.CONTENT'))),
+    title: computed(() => (isProject.value ? _i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_TITLE') : _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.TITLE'))),
+    content: computed(() => (isProject.value ? _i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_CONTENT') : _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.CONTENT'))),
     loading: false,
 });
 
@@ -55,57 +45,61 @@ const handleConfirmDelete = async () => {
     if (state.loading) return;
     state.loading = true;
     try {
-        if (props.isProject) {
-            await deleteProject();
+        if (!projectPageModalStore.state.targetId) throw new Error('No project or project group id');
+        if (projectPageModalStore.state.targetType === 'project') {
+            await deleteProject(projectPageModalStore.state.targetId);
         } else {
-            await deleteProjectGroup();
+            await deleteProjectGroup(projectPageModalStore.state.targetId);
         }
-        emit('confirm');
+        emit('deleted');
     } catch (e) {
-        if (props.isProject) ErrorHandler.handleRequestError(e, _i18n.t('PROJECT.DETAIL.ALT_E_DELETE_PROJECT'));
-        else ErrorHandler.handleRequestError(e, _i18n.t('PROJECT.LANDING.ALT_E_DELETE_PROJECT_GROUP', { action: _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.TITLE') }));
+        if (projectPageModalStore.state.targetType === 'projectGroup') {
+            ErrorHandler.handleRequestError(e, _i18n.t('PROJECT.LANDING.ALT_E_DELETE_PROJECT_GROUP', { action: _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.TITLE') }), true);
+        } else {
+            ErrorHandler.handleRequestError(e, _i18n.t('PROJECT.DETAIL.ALT_E_DELETE_PROJECT'), true);
+        }
     } finally {
         state.loading = false;
-        state.proxyVisible = false;
-        if (!props.skipRedirect) {
-            // TODO: Check route
-            await router.replace({
-                name: PROJECT_ROUTE_V2._NAME,
-            });
-        }
+        projectPageModalStore.closeDeleteModal();
     }
 };
 
-const deleteProject = async () => {
-    await SpaceConnector.clientV2.identity.project.delete<ProjectDeleteParameters>({
-        project_id: props.targetId as string,
+const queryClient = useQueryClient();
+const { projectAPI, projectListQueryKey, projectQueryKey } = useProjectApi();
+const deleteProject = async (projectId: string) => {
+    await projectAPI.delete({
+        project_id: projectId,
     });
+    queryClient.invalidateQueries({ queryKey: projectListQueryKey.value });
+    queryClient.removeQueries({ queryKey: [...projectQueryKey.value, projectId] });
     await recentStore.deleteRecent({
         type: RECENT_TYPE.PROJECT,
-        itemId: props.targetId,
+        itemId: projectId,
     });
     showSuccessMessage(_i18n.t('PROJECT.DETAIL.ALT_S_DELETE_PROJECT'), '');
-    const isFavoriteItem = favoriteGetters.projectItems.find((item) => item.itemId === props.targetId);
+    const isFavoriteItem = favoriteGetters.projectItems.find((item) => item.itemId === projectId);
     if (isFavoriteItem) {
         await favoriteStore.deleteFavorite({
             itemType: FAVORITE_TYPE.PROJECT,
             workspaceId: state.currentWorkspaceId || '',
-            itemId: props.targetId as string,
+            itemId: projectId,
         });
     }
 };
-
-const deleteProjectGroup = async () => {
-    await SpaceConnector.clientV2.identity.projectGroup.delete<ProjectGroupDeleteParameters>({
-        project_group_id: props.targetId,
+const { projectGroupAPI, projectGroupListQueryKey, projectGroupQueryKey } = useProjectGroupApi();
+const deleteProjectGroup = async (projectGroupId: string) => {
+    await projectGroupAPI.delete({
+        project_group_id: projectGroupId,
     });
+    queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
+    queryClient.removeQueries({ queryKey: [...projectGroupQueryKey.value, projectGroupId] });
     showSuccessMessage(_i18n.t('PROJECT.LANDING.ALT_S_DELETE_PROJECT_GROUP'), '');
-    const isFavoriteItem = favoriteGetters.projectGroupItems.find((item) => item.itemId === props.targetId);
+    const isFavoriteItem = favoriteGetters.projectGroupItems.find((item) => item.itemId === projectGroupId);
     if (isFavoriteItem) {
         await favoriteStore.deleteFavorite({
             itemType: FAVORITE_TYPE.PROJECT_GROUP,
             workspaceId: state.currentWorkspaceId || '',
-            itemId: props.targetId,
+            itemId: projectGroupId,
         });
     }
 };
@@ -114,14 +108,17 @@ const deleteProjectGroup = async () => {
 
 <template>
     <delete-modal :header-title="state.title"
-                  :visible.sync="state.proxyVisible"
+                  :visible="visible"
                   :loading="state.loading"
+                  @close="projectPageModalStore.closeDeleteModal"
+                  @cancel="projectPageModalStore.closeDeleteModal"
+                  @closed="projectPageModalStore.resetTarget"
                   @confirm="handleConfirmDelete"
     >
         <p>
             {{ state.content }}
         </p>
-        <i18n v-if="!props.isProject"
+        <i18n v-if="!isProject"
               path="PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.DESC"
               tag="p"
               class="desc"
diff --git a/apps/web/src/services/project/v2/components/ProjectDetailTab.vue b/apps/web/src/services/project/v2/components/ProjectDetailTab.vue
new file mode 100644
index 0000000000..7adb277281
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectDetailTab.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import { PTab } from '@cloudforet/mirinae';
+import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
+
+import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import type { PublicDashboardListParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/list';
+import { usePublicFolderApi } from '@/api-clients/dashboard/public-folder/composables/use-public-folder-api';
+import type { PublicFolderListParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/list';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+import ProjectDashboard from '@/services/project/v2/components/ProjectDashboard.vue';
+
+
+const props = defineProps<{
+    projectId: string,
+    dashboardId?: string,
+}>();
+const emit = defineEmits<{(e: 'update:dashboard-id', value?: string): void;}>();
+
+
+const activeTab = ref('overview');
+watch(() => props.dashboardId, (did) => {
+    activeTab.value = did ?? 'overview';
+}, { immediate: true });
+watch(() => props.projectId, () => {
+    activeTab.value = 'overview';
+});
+
+/* dashboard tabs */
+const { publicDashboardAPI } = usePublicDashboardApi();
+const { publicFolderAPI } = usePublicFolderApi();
+const { key: dashboardListQueryKey, params: dashboardListParams } = useServiceQueryKey('dashboard', 'public-dashboard', 'list', {
+    params: computed<PublicDashboardListParameters>(() => ({
+        // project_id: props.id,
+        query: {
+            filter: [
+                { k: 'shared', v: true, o: 'eq' },
+                { k: 'version', v: '1.0', o: 'not' },
+                { k: 'scope', v: 'PROJECT', o: 'eq' },
+            ],
+        },
+    })),
+});
+const { data: dashboardList } = useScopedQuery({
+    queryKey: dashboardListQueryKey,
+    queryFn: () => publicDashboardAPI.list(dashboardListParams.value),
+    select: (data) => data?.results ?? [],
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    gcTime: 1000 * 60 * 5, // 5 minutes
+});
+const { key: dashboardFolderListQueryKey, params: dashboardFolderListParams } = useServiceQueryKey('dashboard', 'public-folder', 'list', {
+    params: computed<PublicFolderListParameters>(() => ({
+        // project_id: props.id,
+        query: {
+            filter: [
+                { k: 'shared', v: true, o: 'eq' },
+                { k: 'scope', v: 'PROJECT', o: 'eq' },
+            ],
+        },
+    })),
+});
+const { data: dashboardFolderList } = useScopedQuery({
+    queryKey: dashboardFolderListQueryKey,
+    queryFn: () => publicFolderAPI.list(dashboardFolderListParams.value),
+    select: (data) => data?.results || [],
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    gcTime: 1000 * 60 * 5, // 5 minutes
+});
+
+const tabs = computed<TabItem[]>(() => {
+    const folderTabs = dashboardFolderList.value?.map((folder) => ({
+        name: folder.folder_id,
+        label: folder.name,
+        tabType: 'folder',
+        icon: 'ic_folder',
+        subItems: dashboardList.value?.filter((dashboard) => dashboard.folder_id === folder.folder_id).map((dashboard) => ({
+            name: dashboard.dashboard_id,
+            label: dashboard.name,
+            icon: 'ic_service_dashboard',
+        })),
+    })) ?? [];
+    const dashboardTabs = dashboardList.value?.filter((dashboard) => !dashboard.folder_id).map((dashboard) => ({
+        name: dashboard.dashboard_id,
+        label: dashboard.name,
+        icon: 'ic_service_dashboard',
+    })) ?? [];
+    return [
+        { name: 'overview', label: 'Overview' }, // TODO: i18n
+        ...folderTabs,
+        ...dashboardTabs,
+    ];
+});
+
+const onChangeTab = (tab: string) => {
+    activeTab.value = tab;
+    emit('update:dashboard-id', tab === 'overview' ? undefined : tab);
+};
+</script>
+
+<template>
+    <div>
+        <p-tab :tabs="tabs"
+               :active-tab="activeTab"
+               @change="onChangeTab"
+        >
+            <template #default="tab">
+                <keep-alive v-if="tab.name === 'overview'">
+                    <div v-if="activeTab === 'overview'">
+                        Overview will be implemented later.
+                    </div>
+                </keep-alive>
+                <keep-alive v-else-if="tab.name">
+                    <project-dashboard :id="props.projectId"
+                                       :key="`${tab.name}-${props.projectId}`"
+                                       :dashboard-id="tab.name"
+                    />
+                </keep-alive>
+            </template>
+        </p-tab>
+    </div>
+</template>
+
diff --git a/apps/web/src/services/project/v2/components/ProjectFormModal.vue b/apps/web/src/services/project/v2/components/ProjectFormModal.vue
new file mode 100644
index 0000000000..e152e23376
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectFormModal.vue
@@ -0,0 +1,257 @@
+<script lang="ts" setup>
+import { computed, reactive, watch } from 'vue';
+
+import { useMutation } from '@tanstack/vue-query';
+
+import {
+    PButtonModal, PFieldGroup, PI, PSelectDropdown, PTextInput,
+} from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import { useProjectApi } from '@/api-clients/identity/project/composables/use-project-api';
+import type { ProjectModel } from '@/api-clients/identity/project/schema/model';
+import type { ProjectType } from '@/api-clients/identity/project/schema/type';
+import { i18n } from '@/translations';
+
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useFormValidator } from '@/common/composables/form-validator';
+
+import { gray, indigo } from '@/styles/colors';
+
+import { useProjectQuery } from '@/services/project/v2/composables/queries/use-project-query';
+import { useProjectListStore } from '@/services/project/v2/stores/project-list-store';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => projectPageModalStore.state.projectFormModalVisible
+&& projectPageModalStore.state.targetType === 'project');
+const targetId = computed(() => projectPageModalStore.state.targetId);
+
+
+const props = defineProps<{
+    targetParentGroupId?: string;
+}>();
+const emit = defineEmits<{(e: 'created', projectGroupId: string): void;
+}>();
+
+const projectListStore = useProjectListStore();
+const state = reactive({
+    projectNames: computed(() => projectListStore.projects.filter((item) => item.key !== targetId.value).map((p) => p.name)),
+    accessMenuItems: computed<SelectDropdownMenuItem[]>(() => ([
+        {
+            name: 'PRIVATE',
+            label: i18n.t('PROJECT.LANDING.ONLY_PEOPLE_INVITED'),
+            icon: 'ic_lock-filled',
+            iconColor: gray[800],
+        },
+        {
+            name: 'PUBLIC',
+            label: i18n.t('PROJECT.LANDING.EVERYONE_AT_THIS_WORKSPACE'),
+            icon: 'ic_globe-filled',
+            iconColor: indigo[600],
+        },
+    ])),
+    selectedAccess: 'PRIVATE' as ProjectType,
+});
+
+/* form */
+const {
+    forms: { projectName },
+    invalidState,
+    invalidTexts,
+    setForm, isAllValid,
+    initForm, resetValidations,
+} = useFormValidator({
+    projectName: undefined as string|undefined,
+}, {
+    projectName: (val?: string) => {
+        if (!val?.length) return i18n.t('PROJECT.DETAIL.MODAL_VALIDATION_REQUIRED');
+        if (val.length > 40) return i18n.t('PROJECT.DETAIL.MODAL_VALIDATION_LENGTH');
+        if (state.projectNames.includes(val)) return i18n.t('PROJECT.DETAIL.MODAL_VALIDATION_DUPLICATED');
+        return true;
+    },
+});
+const {
+    data: project, isLoading, setQueryData, invalidateAllQueries,
+} = useProjectQuery({
+    projectId: targetId,
+    enabled: visible,
+});
+watch([visible, project], ([v, prj]) => {
+    if (!v) return;
+    if (!prj) {
+        initForm();
+        return;
+    }
+    if (prj) {
+        setForm('projectName', prj.name);
+        state.selectedAccess = prj.project_type ?? 'PRIVATE';
+        resetValidations();
+    }
+}, { immediate: true });
+
+/* mutations */
+const { projectAPI } = useProjectApi();
+const { mutate: createProject, isPending: isCreatingProject } = useMutation({
+    mutationFn: ({ projectType, groupId, name }: { projectType: ProjectType, groupId?: string; name: string }) => projectAPI.create({
+        name,
+        project_type: projectType,
+        project_group_id: groupId,
+    }),
+    onSuccess: (data) => {
+        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_CREATE_PROJECT'), '');
+        invalidateAllQueries();
+        emit('created', data.project_id);
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_CREATE_PROJECT'));
+    },
+});
+
+
+const { mutateAsync: updateProject, isPending: isUpdatingProject } = useMutation({
+    mutationFn: ({ projectId, name }: { projectId: string; name: string }) => projectAPI.update({
+        project_id: projectId,
+        name,
+    }),
+    onSuccess: (data) => {
+        showSuccessMessage(i18n.t('PROJECT.DETAIL.ALT_S_UPDATE_PROJECT'), '');
+        setQueryData(data);
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.DETAIL.ALT_E_UPDATE_PROJECT'));
+    },
+});
+
+const { mutateAsync: updateProjectType, isPending: isUpdatingProjectType } = useMutation({
+    mutationFn: ({ projectId, projectType }: { projectId: string; projectType: ProjectType }) => projectAPI.updateProjectType({
+        project_id: projectId,
+        project_type: projectType,
+    }),
+    onSuccess: (data) => {
+        showSuccessMessage(i18n.t('PROJECT.DETAIL.ALT_S_UPDATE_PROJECT_TYPE'), '');
+        setQueryData(data);
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.DETAIL.ALT_E_UPDATE_PROJECT_TYPE'));
+    },
+});
+const isProcessing = computed(() => isCreatingProject.value || isUpdatingProject.value || isUpdatingProjectType.value);
+
+/* Event */
+const confirm = async () => {
+    if (isProcessing.value) return;
+    if (!isAllValid.value) return;
+
+    const name = projectName.value?.trim() as string; // always exist
+    if (targetId.value) {
+        const promises: Promise<ProjectModel>[] = [];
+        if (name !== project.value?.name) {
+            promises.push(updateProject({
+                projectId: targetId.value,
+                name,
+            }));
+        }
+        if (state.selectedAccess !== project.value?.project_type) {
+            promises.push(updateProjectType({
+                projectId: targetId.value,
+                projectType: state.selectedAccess,
+            }));
+        }
+        await Promise.allSettled(promises);
+    } else {
+        await createProject({
+            name,
+            projectType: state.selectedAccess,
+            groupId: props.targetParentGroupId,
+        });
+    }
+    projectPageModalStore.closeFormModal();
+};
+const handleSelectAccess = (selectedAccess) => {
+    state.selectedAccess = selectedAccess as ProjectType;
+};
+
+
+</script>
+
+<template>
+    <p-button-modal class="project-form-modal"
+                    :header-title="targetId ? $t('PROJECT.DETAIL.MODAL_UPDATE_PROJECT_TITLE') : $t('PROJECT.DETAIL.MODAL_CREATE_PROJECT_TITLE')"
+                    centered
+                    size="sm"
+                    fade
+                    backdrop
+                    :loading-backdrop="isLoading"
+                    :visible="visible"
+                    :disabled="isProcessing || !isAllValid"
+                    @close="projectPageModalStore.closeFormModal"
+                    @cancel="projectPageModalStore.closeFormModal"
+                    @closed="projectPageModalStore.resetTarget"
+                    @confirm="confirm"
+    >
+        <template #body>
+            <p-field-group :label="$t('PROJECT.DETAIL.MODAL_CREATE_PROJECT_LABEL')"
+                           :invalid-text="invalidTexts.projectName"
+                           :invalid="invalidState.projectName"
+                           required
+            >
+                <template #default="{invalid}">
+                    <p-text-input :value="projectName"
+                                  class="block w-full"
+                                  :invalid="invalid"
+                                  :placeholder="$t('PROJECT.DETAIL.MODAL_CREATE_PROJECT_PLACEHOLDER')"
+                                  @update:value="setForm('projectName', $event)"
+                    />
+                </template>
+            </p-field-group>
+            <p-field-group :label="$t('PROJECT.DETAIL.ACCESS')"
+                           required
+            >
+                <template #default>
+                    <p-select-dropdown class="access-dropdown"
+                                       :menu="state.accessMenuItems"
+                                       :selected="state.selectedAccess"
+                                       use-fixed-menu-style
+                                       @select="handleSelectAccess"
+                    >
+                        <template #dropdown-button>
+                            <div class="text-wrapper">
+                                <p-i :name="state.selectedAccess === 'PRIVATE' ? 'ic_lock-filled' : 'ic_globe-filled'"
+                                     width="1rem"
+                                     height="1rem"
+                                     :color="state.selectedAccess === 'PRIVATE' ? gray[900] : indigo[600]"
+                                />
+                                <span>{{ state.selectedAccess === 'PRIVATE' ? $t('PROJECT.LANDING.ONLY_PEOPLE_INVITED') : $t('PROJECT.LANDING.EVERYONE_AT_THIS_WORKSPACE') }}</span>
+                                <span class="sub-text">
+                                    {{ $t('PROJECT.LANDING.CAN_ACCESS_TO_THIS_PROJECT') }}
+                                </span>
+                            </div>
+                        </template>
+                    </p-select-dropdown>
+                </template>
+            </p-field-group>
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.project-form-modal {
+    .access-dropdown {
+        width: 100%;
+        .text-wrapper {
+            @apply text-gray-800 text-label-md;
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+        }
+        .sub-text {
+            @apply text-gray-500;
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectGroupCard.vue b/apps/web/src/services/project/v2/components/ProjectGroupCard.vue
new file mode 100644
index 0000000000..72c52a21b1
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectGroupCard.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router/composables';
+
+import {
+    PI, PTextHighlighting, PTooltip, useTextEllipsis,
+} from '@cloudforet/mirinae';
+
+
+import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
+import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
+import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+
+import { indigo } from '@/styles/colors';
+
+import ProjectActionDropdownButton from '@/services/project/v2/components/ProjectActionDropdownButton.vue';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+import { useProjectListStore } from '@/services/project/v2/stores/project-list-store';
+
+
+const props = defineProps<{
+    searchKeyword?: string;
+    projectGroupId: string;
+    name: string;
+}>();
+
+/* projects and groups */
+const projectListStore = useProjectListStore();
+const projects = computed(() => projectListStore.getProjectsByGroupId(props.projectGroupId));
+const projectGroups = computed(() => projectListStore.getProjectGroupsByParentId(props.projectGroupId));
+
+/* favorite */
+const favoriteStore = useFavoriteStore();
+const isStarred = computed(() => favoriteStore.getters.projectGroupItems.some((item) => item.itemId === props.projectGroupId));
+
+/* project group select */
+const router = useRouter();
+const handleSelectProjectGroup = () => {
+    router.replace({
+        name: PROJECT_ROUTE_V2._NAME,
+        params: {
+            projectGroupOrProjectId: props.projectGroupId,
+        },
+    }).catch(() => {});
+};
+
+/* action menu */
+const visibleActionMenu = ref(false);
+
+/* text ellipsis */
+const textEl = ref<HTMLElement|null>(null);
+const { isEllipsis } = useTextEllipsis({ textEl });
+</script>
+
+<template>
+    <div class="bg-gray-100 cursor-pointer p-3 hover:bg-gray-150 rounded-lg group/pg-card"
+         :class="{ '!bg-blue-200': visibleActionMenu }"
+         @click="handleSelectProjectGroup"
+    >
+        <div class="flex items-center justify-between rounded-t-lg h-6">
+            <p-tooltip :contents="isEllipsis ? props.name : ''"
+                       class="flex overflow-hidden"
+                       position="bottom"
+            >
+                <div ref="textEl"
+                     class="overflow-hidden whitespace-nowrap text-ellipsis"
+                >
+                    <p-i name="ic_folder-filled"
+                         :color="indigo[500]"
+                         class="mr-1"
+                         width="1rem"
+                         height="1rem"
+                    />
+                    <p-text-highlighting class="!text-label-md !font-medium"
+                                         :text="props.name"
+                                         :term="props.searchKeyword"
+                    />
+                </div>
+            </p-tooltip>
+            <div class="flex gap-1 items-center">
+                <div class="hidden group-hover/pg-card:block"
+                     :class="{'!block': visibleActionMenu }"
+                >
+                    <project-action-dropdown-button :project-group-id="props.projectGroupId"
+                                                    usage-type="list"
+                                                    @update:visible="visibleActionMenu = $event"
+                    />
+                </div>
+                <div class="hidden group-hover/pg-card:block"
+                     :class="{'!block': visibleActionMenu || isStarred }"
+                >
+                    <favorite-button :item-id="props.projectGroupId"
+                                     :favorite-type="FAVORITE_TYPE.PROJECT_GROUP"
+                    />
+                </div>
+            </div>
+        </div>
+        <div class="mt-2 rounded-b-lg text-label-sm text-gray-600">
+            {{ projectGroups.length }} {{ $t('PROJECT.LANDING.PROJECT_GROUPS') }} ⋅
+            {{ projects.length }} {{ $t('PROJECT.LANDING.PROJECTS') }}
+        </div>
+    </div>
+</template>
diff --git a/apps/web/src/services/project/v2/components/ProjectGroupFormModal.vue b/apps/web/src/services/project/v2/components/ProjectGroupFormModal.vue
new file mode 100644
index 0000000000..991f36192c
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectGroupFormModal.vue
@@ -0,0 +1,168 @@
+<script lang="ts" setup>
+import {
+    computed, watch,
+} from 'vue';
+
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+
+import { PButtonModal, PFieldGroup, PTextInput } from '@cloudforet/mirinae';
+
+import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
+import { i18n } from '@/translations';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useFormValidator } from '@/common/composables/form-validator';
+
+import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
+import { useProjectGroupNames } from '@/services/project/v-shared/composables/use-project-group-names';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+const props = defineProps<{
+    targetParentGroupId?: string;
+}>();
+const emit = defineEmits<{(e: 'created', projectGroupId: string): void;
+}>();
+
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => projectPageModalStore.state.projectFormModalVisible
+&& projectPageModalStore.state.targetType === 'projectGroup');
+const targetId = computed(() => projectPageModalStore.state.targetId);
+const updateMode = computed(() => projectPageModalStore.state.targetId !== undefined);
+
+/* project group */
+const { data: projectGroup, isLoading, setQueryData } = useProjectGroupQuery({
+    projectGroupId: targetId,
+    enabled: visible,
+});
+
+
+/* project group names */
+const projectGroupNames = useProjectGroupNames({
+    projectGroupId: targetId,
+    enabled: visible,
+});
+
+/* form */
+const {
+    forms: { projectGroupName },
+    invalidState,
+    invalidTexts,
+    setForm, isAllValid,
+    initForm, resetValidations,
+} = useFormValidator({
+    projectGroupName: undefined as string|undefined,
+}, {
+    projectGroupName: (val?: string) => {
+        if (!val?.length) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_REQUIRED');
+        if (val.length > 40) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_LENGTH');
+        if (projectGroupNames.value.includes(val)) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_DUPLICATED');
+        return true;
+    },
+});
+watch([visible, projectGroup], async ([v, pg]) => {
+    if (!v) return;
+    if (updateMode.value) {
+        setForm('projectGroupName', pg?.name);
+        resetValidations();
+    } else {
+        initForm();
+    }
+}, { immediate: true });
+
+
+/* mutations */
+const { projectGroupAPI, projectGroupListQueryKey } = useProjectGroupApi();
+const queryClient = useQueryClient();
+
+const { mutateAsync: createProjectGroup, isPending: isCreating } = useMutation({
+    mutationFn: projectGroupAPI.create,
+    onSuccess: (data) => {
+        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_CREATE_PROJECT_GROUP'), '');
+        queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
+        emit('created', data.project_group_id);
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_CREATE_PROJECT_GROUP'));
+    },
+});
+
+const { mutateAsync: updateProjectGroup, isPending: isUpdating } = useMutation({
+    mutationFn: projectGroupAPI.update,
+    onSuccess: (data) => {
+        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_UPDATE_PROJECT_GROUP'), '');
+        setQueryData(data);
+        queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_UPDATE_PROJECT_GROUP'));
+    },
+});
+
+const isProcessing = computed(() => isCreating.value || isUpdating.value);
+
+
+/* Event */
+const handleConfirm = async () => {
+    if (isProcessing.value) return;
+    if (!projectGroupName.value) return;
+    if (!isAllValid.value) return;
+
+    if (updateMode.value) {
+        if (!targetId.value) {
+            ErrorHandler.handleRequestError(new Error('projectGroupId is required'), 'projectGroupId is required', true);
+            return;
+        }
+        const hasChanged = projectGroup.value?.name !== projectGroupName.value;
+        if (hasChanged) {
+            await updateProjectGroup({
+                name: projectGroupName.value,
+                project_group_id: targetId.value,
+            });
+        }
+    } else {
+        await createProjectGroup({
+            name: projectGroupName.value,
+            parent_group_id: props.targetParentGroupId,
+        });
+    }
+    projectPageModalStore.closeFormModal();
+};
+
+</script>
+
+<template>
+    <p-button-modal :header-title="updateMode ? $t('PROJECT.LANDING.MODAL_UPDATE_PROJECT_GROUP_TITLE') : $t('PROJECT.LANDING.MODAL_CREATE_PROJECT_GROUP_TITLE')"
+                    centered
+                    size="sm"
+                    fade
+                    backdrop
+                    :loading-backdrop="isLoading"
+                    :visible="visible"
+                    :loading="isProcessing"
+                    :disabled="isProcessing || !isAllValid || projectGroup?.name === projectGroupName"
+                    @close="projectPageModalStore.closeFormModal"
+                    @cancel="projectPageModalStore.closeFormModal"
+                    @closed="projectPageModalStore.resetTarget"
+                    @confirm="handleConfirm"
+    >
+        <template #body>
+            <p-field-group :label="$t('PROJECT.LANDING.MODAL_CREATE_PROJECT_GROUP_LABEL')"
+                           :invalid-text="invalidTexts.projectGroupName"
+                           :invalid="invalidState.projectGroupName"
+                           required
+            >
+                <template #default="{invalid}">
+                    <p-text-input :value="projectGroupName"
+                                  class="block w-full"
+                                  :invalid="invalid"
+                                  :placeholder="$t('PROJECT.LANDING.MODAL_CREATE_PROJECT_GROUP_PLACEHOLDER')"
+                                  @keydown.enter="handleConfirm"
+                                  @update:value="setForm('projectGroupName', $event)"
+                    />
+                </template>
+            </p-field-group>
+        </template>
+    </p-button-modal>
+</template>
diff --git a/apps/web/src/services/project/v2/components/ProjectGroupMemberManagementModal.vue b/apps/web/src/services/project/v2/components/ProjectGroupMemberManagementModal.vue
new file mode 100644
index 0000000000..feebdfc712
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectGroupMemberManagementModal.vue
@@ -0,0 +1,263 @@
+<script lang="ts" setup>
+import {
+    computed, watch, ref,
+} from 'vue';
+
+import { useMutation } from '@tanstack/vue-query';
+import { cloneDeep, difference } from 'lodash';
+
+import {
+    PButtonModal, PDataLoader, PEmpty, PFieldGroup, PTextInput, PIconButton,
+} from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
+import type { ProjectGroupRemoveUsersParameters } from '@/api-clients/identity/project-group/schema/api-verbs/remove-users';
+import { i18n } from '@/translations';
+
+import { useUserReferenceStore } from '@/store/reference/user-reference-store';
+import { useUserStore } from '@/store/user/user-store';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
+import { useRoleFormatters } from '@/services/project/v2/composables/use-role-formatters';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => !!projectPageModalStore.state.manageMemberModalVisible
+    && projectPageModalStore.state.targetType === 'projectGroup'
+    && !!projectPageModalStore.state.targetId);
+
+/* mode */
+const userStore = useUserStore();
+const readonlyMode = computed<boolean>(() => userStore.state.currentRoleInfo?.roleType !== 'WORKSPACE_OWNER');
+
+/* project group users */
+const { projectGroupAPI } = useProjectGroupApi();
+const { data: projectGroup, isLoading, invalidateQuery } = useProjectGroupQuery({
+    projectGroupId: computed(() => projectPageModalStore.state.targetId),
+    enabled: visible,
+});
+const projectGroupUserIdList = computed<string[]>(() => projectGroup.value?.users ?? []);
+
+/* dropdown - all users */
+const userReferenceStore = useUserReferenceStore();
+const searchText = ref<string>('');
+const userMenuItems = computed<SelectDropdownMenuItem[]>(() => {
+    const _items: SelectDropdownMenuItem[] = [];
+    Object.values(userReferenceStore.getters.userItems).forEach((user) => {
+        const singleItem = {
+            name: user.key,
+            label: user.label,
+            disabled: false,
+        };
+        if (selectedUserIdList.value.includes(user.key)) {
+            singleItem.disabled = true;
+        }
+        _items.push(singleItem);
+    });
+    return _items;
+});
+
+/* dropdown - user selection */
+const selectedUserIdList = ref<string[]>([]);
+watch([visible, projectGroupUserIdList], async ([v, list]) => {
+    if (v && list) {
+        selectedUserIdList.value = cloneDeep(list);
+    }
+}, { immediate: true });
+const handleUpdateSelected = (items?: SelectDropdownMenuItem[]) => {
+    if (!items?.length) return;
+    const _selected = items[0];
+    if (userReferenceStore.getters.userItems[_selected.name]) {
+        selectedUserIdList.value.unshift(_selected.name);
+        searchText.value = '';
+    }
+};
+const handleRemoveProjectGroupMember = (idx: number) => {
+    const _selectedUserItems = cloneDeep(selectedUserIdList.value);
+    _selectedUserItems.splice(idx, 1);
+    selectedUserIdList.value = _selectedUserItems;
+};
+
+/* role */
+const { getRoleImage, getRoleName } = useRoleFormatters();
+
+/* member mutations */
+const addMember = async (userIds: string[]) => {
+    if (!projectPageModalStore.state.targetId) throw new Error('Project Group ID is not defined');
+    await projectGroupAPI.addUsers({
+        project_group_id: projectPageModalStore.state.targetId,
+        users: userIds,
+    });
+};
+const removeMember = async (userIds: string[]) => {
+    if (!projectPageModalStore.state.targetId) throw new Error('Project Group ID is not defined');
+    const params: ProjectGroupRemoveUsersParameters = {
+        project_group_id: projectPageModalStore.state.targetId,
+        users: userIds,
+    };
+    await projectGroupAPI.removeUsers(params);
+};
+const { mutateAsync: addAndRemoveMember } = useMutation({
+    mutationFn: () => {
+        const _addedUserIds = difference(selectedUserIdList.value, projectGroupUserIdList.value ?? []);
+        const _removedUserIds = difference(projectGroupUserIdList.value, selectedUserIdList.value);
+        const promises: Promise<void>[] = [];
+        if (_addedUserIds.length) promises.push(addMember(_addedUserIds));
+        if (_removedUserIds.length) promises.push(removeMember(_removedUserIds));
+        return Promise.allSettled(promises);
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_UPDATE_PROJECT_GROUP_MEMBER'), true);
+    },
+    onSuccess: (d) => {
+        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_UPDATE_PROJECT_GROUP_MEMBER'), '');
+        if (d.length > 0) invalidateQuery();
+    },
+});
+
+
+/* Event */
+const handleConfirm = async () => {
+    if (!readonlyMode.value) {
+        await addAndRemoveMember();
+    }
+    projectPageModalStore.closeManageMemberModal();
+};
+
+
+
+</script>
+
+<template>
+    <p-button-modal
+        :header-title="$t('PROJECT.LANDING.PROJECT_GROUP_MEMBER')"
+        :fade="true"
+        :backdrop="true"
+        size="md"
+        :visible="visible"
+        :hide-footer-close-button="readonlyMode"
+        @close="projectPageModalStore.closeManageMemberModal"
+        @cancel="projectPageModalStore.closeManageMemberModal"
+        @closed="projectPageModalStore.resetTarget"
+        @confirm="handleConfirm"
+    >
+        <template #body>
+            <div class="project-group-management-box">
+                <div class="project-group-management-wrapper">
+                    <p-field-group v-if="!readonlyMode"
+                                   :label="$t('PROJECT.LANDING.GROUP_MEMBERS_WITH_ACCESS_TO_ALL_SUB_PROJECTS')"
+                                   required
+                    >
+                        <p-text-input :menu="userMenuItems"
+                                      :value.sync="searchText"
+                                      :selected="[]"
+                                      block
+                                      use-auto-complete
+                                      use-fixed-menu-style
+                                      :placeholder="$t('PROJECT.LANDING.ADD_GROUP_MEMBER')"
+                                      :page-size="5"
+                                      @update="handleUpdateSelected"
+                        />
+                    </p-field-group>
+                    <p-data-loader :loading="isLoading"
+                                   :data="selectedUserIdList"
+                                   class="data-loader"
+                    >
+                        <template #no-data>
+                            <p-empty show-image
+                                     :title="$t('PROJECT.LANDING.NO_GROUP_MEMBER')"
+                            />
+                        </template>
+                        <template v-for="(userId, idx) in selectedUserIdList">
+                            <div :key="`selected-member-${userId}`"
+                                 class="selected-member-wrapper"
+                            >
+                                <div class="left-part">
+                                    <img :src="getRoleImage(userId)"
+                                         alt="role-type-icon"
+                                         class="role-type-icon"
+                                    >
+                                    <div class="inline-flex">
+                                        <span>{{ userReferenceStore.getters.userItems[userId]?.label || userId }}</span>
+                                        <span v-if="projectGroupUserIdList && !projectGroupUserIdList.includes(userId)"
+                                              class="new-text"
+                                        >new</span>
+                                    </div>
+                                </div>
+                                <div class="right-part">
+                                    <span class="role-type-text">
+                                        {{ getRoleName(userId) }}
+                                    </span>
+                                    <p-icon-button v-if="!readonlyMode"
+                                                   name="ic_delete"
+                                                   size="sm"
+                                                   @click="handleRemoveProjectGroupMember(idx)"
+                                    />
+                                </div>
+                            </div>
+                        </template>
+                    </p-data-loader>
+                </div>
+            </div>
+        </template>
+        <template v-if="readonlyMode"
+                  #confirm-button
+        >
+            Done
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.project-group-management-box {
+    @apply bg-primary4 rounded-md;
+    min-height: 25rem;
+    padding: 1rem;
+    .project-group-management-wrapper {
+        @apply bg-white border border-primary3 rounded-md;
+        min-height: 23rem;
+        padding: 0.75rem;
+    }
+
+    .p-data-loader {
+        height: 15rem;
+    }
+
+    .selected-member-wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem 0;
+        .left-part {
+            @apply text-label-md;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            .role-type-icon {
+                @apply rounded-full;
+                width: 1.5rem;
+                height: 1.5rem;
+            }
+            .new-text {
+                @apply text-label-xs text-coral-500;
+                display: inline-flex;
+                align-items: flex-start;
+                padding-left: 0.25rem;
+            }
+        }
+        .right-part {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            .role-type-text {
+                @apply text-label-md text-gray-500;
+            }
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectHeader.vue b/apps/web/src/services/project/v2/components/ProjectHeader.vue
index ca465c60a6..b299280a78 100644
--- a/apps/web/src/services/project/v2/components/ProjectHeader.vue
+++ b/apps/web/src/services/project/v2/components/ProjectHeader.vue
@@ -1,625 +1,142 @@
 <script setup lang="ts">
 import {
-    computed, reactive, ref, watch,
+    computed, ref, toRef, watch,
 } from 'vue';
-import { useRouter } from 'vue-router/composables';
+import type { TranslateResult } from 'vue-i18n';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
-    PI, PIconButton, PSelectDropdown, PButtonModal, PButton, PEmpty, PLazyImg,
+    PI, PSkeleton, PHeading, PHeadingLayout, PButton,
 } from '@cloudforet/mirinae';
-import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
-import type { ProjectGetParameters } from '@/api-clients/identity/project/schema/api-verbs/get';
-import type { ProjectRemoveUsersParameters } from '@/api-clients/identity/project/schema/api-verbs/remove-users';
-import type { ProjectUpdateParameters } from '@/api-clients/identity/project/schema/api-verbs/udpate';
-import type { ProjectModel } from '@/api-clients/identity/project/schema/model';
-import type { ProjectType } from '@/api-clients/identity/project/schema/type';
-import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
-import type { WorkspaceUserListParameters } from '@/api-clients/identity/workspace-user/schema/api-verbs/list';
-import type { WorkspaceUserModel } from '@/api-clients/identity/workspace-user/schema/model';
-import DomainAdminImage from '@/assets/images/role/img_avatar_admin.png';
-import UserImage from '@/assets/images/role/img_avatar_no-role.png';
-import SystemAdminImage from '@/assets/images/role/img_avatar_system-admin.png';
-import WorkspaceMemberImage from '@/assets/images/role/img_avatar_workspace-member.png';
-import WorkspaceOwnerImage from '@/assets/images/role/img_avatar_workspace-owner.png';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
-import type { UserReferenceMap } from '@/store/reference/user-reference-store';
-
-import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import { NoResourceError } from '@/common/composables/error/error';
 import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
-
-import { gray, peacock } from '@/styles/colors';
 
-import ProjectFormModal from '@/services/project/v-shared/components/ProjectFormModal.vue';
-import ProjectMainProjectGroupMoveModal from '@/services/project/v-shared/components/ProjectMainProjectGroupMoveModal.vue';
-import ProjectMemberInviteModal from '@/services/project/v-shared/components/ProjectMemberInviteModal.vue';
-import ProjectTagsModal from '@/services/project/v-shared/components/ProjectTagsModal.vue';
-import { useProjectTreeStore } from '@/services/project/v-shared/stores/project-tree-store';
-import ProjectMainDeleteModal from '@/services/project/v2/components/ProjectMainDeleteModal.vue';
+import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
+import ProjectActionDropdownButton from '@/services/project/v2/components/ProjectActionDropdownButton.vue';
+import { useProjectQuery } from '@/services/project/v2/composables/queries/use-project-query';
+import { useProjectIcons } from '@/services/project/v2/composables/use-project-icons';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
 
+const props = defineProps<{
+    projectId?: string;
+    projectGroupId?: string;
+}>();
 
-const ROLE_INFO_MAP = {
-    [ROLE_TYPE.SYSTEM_ADMIN]: { icon: SystemAdminImage, label: 'System Admin' },
-    [ROLE_TYPE.DOMAIN_ADMIN]: { icon: DomainAdminImage, label: 'Domain Admin' },
-    [ROLE_TYPE.WORKSPACE_OWNER]: { icon: WorkspaceOwnerImage, label: 'Workspace Owner' },
-    [ROLE_TYPE.WORKSPACE_MEMBER]: { icon: WorkspaceMemberImage, label: 'Workspace Member' },
-    [ROLE_TYPE.USER]: { icon: UserImage, label: 'User' },
-} as const;
-interface Props {
-    id: string;
-}
-const props = defineProps<Props>();
-// const route = useRoute();
-const router = useRouter();
 
-const projectTreeStore = useProjectTreeStore();
+const projectPageModalStore = useProjectPageModalStore();
 
-const allReferenceStore = useAllReferenceStore();
+/* project and project group query control */
 const appContextStore = useAppContextStore();
-const gnbStore = useGnbStore();
+const enabled = computed(() => !appContextStore.getters.globalGrantLoading);
 
 /* project */
-// TODO: change it with real data
-const project = ref<ProjectModel|undefined>();
-const projectId = computed(() => project.value?.project_id);
-const projectType = computed<ProjectType|undefined>(() => project.value?.project_type);
-const setProject = (p: ProjectModel|undefined) => {
-    project.value = p;
-};
-const getProject = async (pid: string) => {
-    try {
-        const _projectId = pid;
-        if (!_projectId) throw new Error('projectId is required');
-        state.currentProject = await SpaceConnector.clientV2.identity.project.get<ProjectGetParameters, ProjectModel>({
-            project_id: _projectId,
-        });
-    } catch (e) {
-        state.currentProject = undefined;
-        ErrorHandler.handleError(new NoResourceError({ name: PROJECT_ROUTE_V2._NAME }));
-    }
-};
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const setProjectId = (pid: string) => {
-// TODO: implement
-};
-
-const storeState = reactive({
-    users: computed<UserReferenceMap>(() => allReferenceStore.getters.user),
-    projects: computed(() => allReferenceStore.getters.project),
-    costDataSource: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
-});
-const state = reactive({
-    menuItems: computed(() => [
-        {
-            type: 'item',
-            name: 'update',
-            label: i18n.t('PROJECT.DETAIL.UPDATE'),
-            icon: 'ic_settings',
-        },
-        {
-            type: 'item',
-            name: 'move',
-            label: i18n.t('PROJECT.DETAIL.MOVE'),
-            icon: 'ic_move',
-        },
-        { type: 'divider', name: 'divider' },
-        {
-            type: 'item',
-            name: 'delete',
-            label: i18n.t('PROJECT.DETAIL.DELETE'),
-            icon: 'ic_delete',
-        },
-    ]),
-    currentProject: computed<ProjectModel|undefined>(() => project.value),
-    parentGroupId: computed(() => storeState.projects[props.id]?.data?.groupInfo?.id),
-    projectGroupMoveModalVisible: false,
-    projectDeleteModalVisible: false,
-    projectEditModalVisible: false,
-    isHeaderIconHovered: false,
+const { data: project, error: projectError, isLoading: loadingProject } = useProjectQuery({
+    projectId: toRef(props, 'projectId'),
+    enabled,
 });
 
-const memberState = reactive({
-    loading: false,
-    memberModalVisible: false,
-    memberInviteModalVisible: false,
-    projectUserIdList: [] as string[],
-    totalCount: 0,
-    userIcon: computed<Record<string, any>>(() => ({
-        [ROLE_TYPE.SYSTEM_ADMIN]: SystemAdminImage,
-        [ROLE_TYPE.DOMAIN_ADMIN]: DomainAdminImage,
-        [ROLE_TYPE.WORKSPACE_OWNER]: WorkspaceOwnerImage,
-        [ROLE_TYPE.WORKSPACE_MEMBER]: WorkspaceMemberImage,
-        [ROLE_TYPE.USER]: UserImage,
-    })),
+/* project group */
+const { data: projectGroup, error: projectGroupError, isLoading: loadingProjectGroup } = useProjectGroupQuery({
+    projectGroupId: toRef(props, 'projectGroupId'),
+    enabled,
 });
 
-const tagsState = reactive({
-    loading: false,
-    tagsModalVisible: false,
-    tags: computed(() => state.currentProject?.tags ?? {}),
+/* errors */
+watch([projectError, projectGroupError], ([prjErr, pgErr]) => {
+    if (prjErr || pgErr) ErrorHandler.handleError(new NoResourceError({ name: PROJECT_ROUTE_V2._NAME }));
 });
 
-
-/* Event */
-const handleSelectItem = (selected: MenuItem) => {
-    if (selected.name === 'update') state.projectEditModalVisible = true;
-    if (selected.name === 'move') state.projectGroupMoveModalVisible = true;
-    if (selected.name === 'delete') state.projectDeleteModalVisible = true;
-};
-
-const handleOpenMemberModal = () => {
-    memberState.memberModalVisible = true;
-};
-const handleCloseMemberModal = () => {
-    memberState.memberModalVisible = false;
-};
-const handleClickInvite = () => {
-    memberState.memberModalVisible = false;
-    memberState.memberInviteModalVisible = true;
-};
-const handleConfirmInvite = () => {
-    fetchUserList();
-};
-const handleOpenTagsModal = () => {
-    tagsState.tagsModalVisible = true;
-};
-const handleTagUpdate = async (newTags) => {
-    try {
-        tagsState.loading = true;
-        const result = await SpaceConnector.client.identity.project.update<ProjectUpdateParameters, ProjectModel>({
-            project_id: props.id,
-            tags: newTags,
-        });
-        setProject(result);
-        showSuccessMessage(i18n.t('COMMON.TAGS.ALT_S_UPDATE'), '');
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('COMMON.TAGS.ALT_E_UPDATE'));
-    } finally {
-        tagsState.loading = false;
-        tagsState.tagsModalVisible = false;
+/* title and members count */
+const hasProjectOrGroupId = computed(() => !!(props.projectId || props.projectGroupId));
+// Using ref instead of computed for title and membersCount to show the previously selected value in the UI while loading new data.
+// This prevents UI flickering during data loading.
+const title = ref<TranslateResult|undefined>(undefined);
+const membersCount = ref<number|undefined>(undefined);
+watch([project, projectGroup, hasProjectOrGroupId], ([prj, pg, exist]) => {
+    if (!exist) {
+        title.value = i18n.t('PROJECT.LANDING.ALL_PROJECTS');
+        membersCount.value = undefined;
+        return;
     }
-};
-const handleConfirmProjectForm = (_, data: ProjectModel) => {
-    setProject(data);
-};
-
-const handleConfirmProjectGroupMoveModal = () => {
-    if (projectId.value) getProject(projectId.value);
-};
-
-const handleRefreshTree = () => {
-    projectTreeStore.refreshProjectTree();
-};
-
-const handleHeaderIconHover = (isHovered: boolean) => {
-    state.isHeaderIconHovered = isHovered;
-};
-const handleClickBackButton = () => {
-    if (state.parentGroupId) {
-        router.push({
-            // TODO: check route
-            name: PROJECT_ROUTE_V2._NAME,
-            params: { projectGroupId: state.parentGroupId },
-        });
+    if (prj && !pg) {
+        title.value = prj.name;
+        if (prj.project_type === 'PRIVATE') {
+            membersCount.value = prj.users?.length ?? 0;
+        } else {
+            membersCount.value = undefined;
+        }
         return;
     }
-    // TODO: check route
-    router.push({ name: PROJECT_ROUTE_V2._NAME });
-};
-
-const handleRemoveProjectUser = async (userId: string) => {
-    try {
-        const params: ProjectRemoveUsersParameters = {
-            project_id: props.id,
-            users: [userId],
-        };
-        await SpaceConnector.clientV2.identity.project.removeUsers<ProjectRemoveUsersParameters, ProjectModel>(params);
-        await fetchUserList();
-    } catch (e) {
-        ErrorHandler.handleError(e);
+    if (!prj && pg) {
+        title.value = pg.name;
+        membersCount.value = pg.users?.length ?? 0;
     }
-};
-
+}, { immediate: true });
 
-/* API */
-const fetchWorkspaceUserList = async () => {
-    memberState.loading = true;
-    try {
-        const res = await SpaceConnector.clientV2.identity.workspaceUser.list<WorkspaceUserListParameters, ListResponse<WorkspaceUserModel>>();
-        memberState.projectUserIdList = res.results?.map((d) => d.user_id) ?? [];
-        memberState.totalCount = res.total_count ?? 0;
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        memberState.projectUserIdList = [];
-        memberState.totalCount = 0;
-    } finally {
-        memberState.loading = false;
-    }
-};
-const fetchProjectUsers = async () => {
-    memberState.loading = true;
-    // state.selectIndex = [];
-    try {
-        const res = await SpaceConnector.clientV2.identity.project.get<ProjectGetParameters, ProjectModel>({
-            project_id: props.id,
-        });
-        memberState.projectUserIdList = res.users ?? [];
-        memberState.totalCount = res.users?.length ?? 0;
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        memberState.projectUserIdList = [];
-        memberState.totalCount = 0;
-    } finally {
-        memberState.loading = false;
-    }
-};
-const fetchUserList = async () => {
-    if (projectType.value === 'PUBLIC') {
-        await fetchWorkspaceUserList();
-    } else {
-        await fetchProjectUsers();
-    }
+/* Event Handlers */
+const handleClickMembers = () => {
+    if (props.projectId) projectPageModalStore.openProjectManageMemberModal(props.projectId);
+    else if (props.projectGroupId) projectPageModalStore.openProjectGroupManageMemberModal(props.projectGroupId);
 };
 
-
-/* Watchers */
-watch(projectType, async () => {
-    await fetchUserList();
-});
-
-watch(projectId, (pid) => {
-    if (pid) {
-        getProject(pid);
-    }
-});
-
-
-watch([
-    () => props.id,
-    () => appContextStore.getters.globalGrantLoading,
-], ([id, globalGrantLoading]) => {
-    if (!globalGrantLoading) setProjectId(id);
-}, { immediate: true });
-
-watch(projectId, (pid) => {
-    gnbStore.setId(pid);
-}, { immediate: true });
+/* icon */
+const { projectGroupIcon, projectIcon } = useProjectIcons();
+const showIcon = computed(() => loadingProject || loadingProjectGroup || projectError || projectGroupError || project || projectGroup);
+const iconName = computed(() => (project.value ? projectIcon : projectGroupIcon.iconName));
+const iconColor = computed(() => (project ? undefined : projectGroupIcon.iconColor));
 
 </script>
 
 <template>
-    <div class="project-detail-tab-header">
-        <div class="header-container">
-            <div class="header-icon-wrapper tablet"
-                 @mouseover="handleHeaderIconHover(true)"
-                 @mouseleave="handleHeaderIconHover(false)"
-            >
-                <p-i :name="state.isHeaderIconHovered ? 'ic_arrow-left' : 'ic_document-filled'"
-                     width="1.5rem"
-                     height="1.5rem"
-                     :color="state.isHeaderIconHovered ? gray[900] : peacock[600]"
-                     @click="handleClickBackButton"
-                />
-            </div>
-            <div class="header-icon-wrapper mobile">
-                <p-i name="ic_arrow-left"
-                     width="1.5rem"
-                     height="1.5rem"
-                     :color="gray[900]"
-                     class="cursor-pointer mr-2"
-                     @click="handleClickBackButton"
-                />
-                <p-i name="ic_document-filled"
-                     width="1.5rem"
-                     height="1.5rem"
-                     :color="peacock[600]"
-                />
-            </div>
-            <div class="header-contents">
-                <div class="title-wrapper">
-                    <span class="title">
-                        {{ state.currentProject?.name ?? '' }}
-                    </span>
-                    <p-select-dropdown style-type="tertiary-icon-button"
-                                       button-icon="ic_ellipsis-horizontal"
-                                       size="sm"
-                                       :menu="state.menuItems"
-                                       :selected="[]"
-                                       use-fixed-menu-style
-                                       reset-selection-on-menu-close
-                                       @select="handleSelectItem"
-                    />
-                </div>
-                <div class="header-sub-contents">
-                    <div class="description">
-                        <template v-if="projectType === 'PRIVATE'">
-                            <div class="info-item invite-only">
-                                <p-i name="ic_lock-filled"
-                                     width="0.625rem"
-                                     height="0.625rem"
-                                     color="inherit"
-                                />
-                                <span>{{ $t('PROJECT.DETAIL.INVITE_ONLY') }}</span>
-                            </div>
-                            <p-i name="ic_dot"
-                                 width="0.125rem"
-                                 height="0.125rem"
-                                 :color="gray[400]"
-                            />
-                            <div class="info-item"
-                                 @click="handleOpenMemberModal"
-                            >
-                                <template v-if="projectType === 'PRIVATE' && memberState.totalCount === 0">
-                                    <p-i class="info-icon"
-                                         name="ic_plus"
-                                         width="0.75rem"
-                                         height="0.75rem"
-                                         color="inherit"
-                                    />
-                                    <span>{{ $t('PROJECT.DETAIL.ADD_MEMBERS') }}</span>
-                                </template>
-                                <template v-else>
-                                    <p-i class="info-icon"
-                                         name="ic_member"
-                                         width="0.75rem"
-                                         height="0.75rem"
-                                         color="inherit"
-                                    />
-                                    <span>{{ memberState.totalCount }}{{ $t('PROJECT.DETAIL.MEMBERS') }}</span>
-                                </template>
-                            </div>
-                            <p-i name="ic_dot"
-                                 width="0.125rem"
-                                 height="0.125rem"
-                                 :color="gray[400]"
-                            />
-                        </template>
-                        <p-i name="ic_dot"
-                             width="0.125rem"
-                             height="0.125rem"
-                             :color="gray[400]"
+    <p-heading-layout>
+        <template #heading>
+            <p-heading>
+                <template #title-left-extra>
+                    <div v-show="showIcon"
+                         class="inline-flex items-center justify-center border-2 border-white w-14 h-14 rounded-2xl bg-white/50 cursor-pointer"
+                    >
+                        <p-i :name="iconName"
+                             width="1.5rem"
+                             height="1.5rem"
+                             :color="iconColor"
                         />
-                        <div class="info-item"
-                             @click="handleOpenTagsModal"
-                        >
-                            <p-i class="info-icon"
-                                 name="ic_label"
-                                 width="0.75rem"
-                                 height="0.75rem"
-                                 color="inherit"
-                            />
-                            <span>{{ Object.keys(tagsState.tags).length }}{{ $t('PROJECT.DETAIL.TAGS') }}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <p-button-modal :header-title="$t('PROJECT.DETAIL.MEMBER_TITLE')"
-                            :visible.sync="memberState.memberModalVisible"
-                            size="md"
-                            hide-footer-close-button
-                            @confirm="handleCloseMemberModal"
-            >
-                <template #body>
-                    <div class="member-contents-wrapper">
-                        <div class="member-contents">
-                            <div class="contents-header">
-                                <span>{{ $t('PROJECT.DETAIL.INVITE_MEMBER_DESC') }}</span>
-                                <p-button v-if="projectType === 'PRIVATE'"
-                                          icon-left="ic_plus_bold"
-                                          style-type="tertiary"
-                                          @click="handleClickInvite"
-                                >
-                                    {{ $t('PROJECT.DETAIL.MEMBER.INVITE') }}
-                                </p-button>
-                            </div>
-                            <div class="main-contents">
-                                <div v-if="memberState.projectUserIdList.length">
-                                    <div v-for="(userId) in memberState.projectUserIdList"
-                                         :key="userId"
-                                         class="member-item"
-                                    >
-                                        <div class="left-contents">
-                                            <p-lazy-img :src="ROLE_INFO_MAP[storeState.users[userId]?.data.roleInfo.role_type]?.icon"
-                                                        class="menu-icon"
-                                                        width="1.75rem"
-                                                        height="1.75rem"
-                                            />
-                                            <span>{{ userId }} <span v-if="!!storeState.users[userId]?.name">({{ storeState.users[userId]?.name }})</span></span>
-                                        </div>
-                                        <div class="right-contents">
-                                            <span>{{ ROLE_INFO_MAP[storeState.users[userId]?.data.roleInfo.role_type]?.label }}</span>
-                                            <p-icon-button name="ic_delete"
-                                                           size="sm"
-                                                           @click="handleRemoveProjectUser(userId)"
-                                            />
-                                        </div>
-                                    </div>
-                                </div>
-                                <p-empty v-else
-                                         class="project-member-empty"
-                                         show-image
-                                         :title="$t('PROJECT.DETAIL.MEMBER.NO_PROJECT_MEMBER')"
-                                >
-                                    <template #image>
-                                        <img alt="illust_astronaut_radio"
-                                             src="@/assets/images/img_ghost.png"
-                                        >
-                                    </template>
-                                </p-empty>
-                            </div>
-                        </div>
                     </div>
                 </template>
-                <template #confirm-button>
-                    {{ $t('PROJECT.DETAIL.MEMBER.DONE') }}
+                <template #default>
+                    <template v-if="projectError || projectGroupError">
+                        No Project
+                    </template>
+                    <template v-else-if="title">
+                        {{ title }}
+                    </template>
+                    <p-skeleton v-else
+                                width="200px"
+                                height="24px"
+                    />
                 </template>
-            </p-button-modal>
-            <project-member-invite-modal v-if="memberState.memberInviteModalVisible"
-                                         :visible.sync="memberState.memberInviteModalVisible"
-                                         :project-id="props.id"
-                                         @confirm="handleConfirmInvite"
-            />
-            <project-tags-modal v-if="tagsState.tagsModalVisible"
-                                :visible.sync="tagsState.tagsModalVisible"
-                                :tags="tagsState.tags"
-                                :project-id="props.id"
-                                @update="handleTagUpdate"
-            />
-            <project-form-modal v-if="state.projectEditModalVisible"
-                                :visible.sync="state.projectEditModalVisible"
-                                :project-id="props.id"
-                                @confirm="handleConfirmProjectForm"
-            />
-            <project-main-project-group-move-modal v-if="state.projectGroupMoveModalVisible"
-                                                   :visible.sync="state.projectGroupMoveModalVisible"
-                                                   is-project
-                                                   :target-id="projectId"
-                                                   @confirm="handleConfirmProjectGroupMoveModal"
-            />
-            <project-main-delete-modal v-if="state.projectDeleteModalVisible"
-                                       :visible.sync="state.projectDeleteModalVisible"
-                                       is-project
-                                       :target-id="props.id"
-                                       @confirm="handleRefreshTree"
-            />
-        </div>
-    </div>
+                <template #title-right-extra>
+                    <div v-if="hasProjectOrGroupId"
+                         class="inline-flex flex-wrap gap-2"
+                    >
+                        <p-button v-if="membersCount !== undefined"
+                                  style-type="tertiary"
+                                  size="sm"
+                                  @click="handleClickMembers"
+                        >
+                            {{ $t('PROJECT.DETAIL.MEMBERS') }} ({{ membersCount }})
+                        </p-button>
+                        <project-action-dropdown-button :project-id="props.projectId"
+                                                        :project-group-id="props.projectGroupId"
+                        />
+                    </div>
+                </template>
+            </p-heading>
+        </template>
+    </p-heading-layout>
 </template>
-
-<style scoped lang="postcss">
-.project-detail-tab-header {
-
-    .header-container {
-        @apply flex gap-3;
-        .header-icon-wrapper {
-            @apply flex items-center justify-center border-2 border-white;
-            width: 3.5rem;
-            height: 3.5rem;
-            border-radius: 0.75rem;
-            background-color: rgba(255, 255, 255, 0.5);
-            cursor: pointer;
-            &.tablet {
-                display: flex;
-            }
-            &.mobile {
-                display: none;
-            }
-        }
-        .header-contents {
-            .title-wrapper {
-                @apply flex items-center gap-2;
-                padding-bottom: 0.375rem;
-                .title {
-                    @apply text-display-md font-bold text-gray-900;
-                }
-            }
-            .header-sub-contents {
-                .description {
-                    @apply flex items-center gap-2;
-                    .info-item {
-                        @apply flex items-center text-label-sm text-gray-700 cursor-pointer;
-                        gap: 0.15625rem;
-                        .info-icon {
-                            min-width: 0.75rem;
-                        }
-                        &.invite-only {
-                            @apply text-gray-900 cursor-auto;
-                        }
-                    }
-                }
-            }
-        }
-
-        .member-contents-wrapper {
-            @apply bg-violet-100;
-            padding: 1rem;
-            width: 100%;
-            height: 25rem;
-            .member-contents {
-                @apply rounded-lg border border-violet-200 bg-white;
-                padding: 0.75rem;
-                height: 100%;
-
-                .contents-header {
-                    @apply flex items-center justify-between text-label-md font-bold text-gray-900;
-                    padding-bottom: 0.5rem;
-                    height: 2.5rem;
-                }
-                .main-contents {
-                    @apply overflow-scroll;
-                    height: calc(100% - 2.5rem);
-                    .member-item {
-                        @apply flex items-center justify-between;
-                        padding: 0.5rem 0.25rem 0.5rem 0.5rem;
-                        .left-contents {
-                            @apply flex items-center gap-2 text-label-md text-gray-900;
-                            .menu-icon {
-                                @apply rounded-full;
-                            }
-                        }
-                        .right-contents {
-                            @apply text-label-md text-gray-500 flex items-center gap-2;
-                        }
-                    }
-                    .project-member-empty {
-                        margin-top: 3rem;
-                    }
-                }
-            }
-        }
-    }
-
-    .quick-link-wrapper {
-        @apply flex items-center gap-4 bg-white border border-gray-200 rounded-lg;
-        width: 100%;
-        height: 2.75rem;
-        padding: 0.75rem 1rem;
-        margin-top: 1.5rem;
-
-        .field-title {
-            @apply text-label-md font-bold text-gray-600;
-        }
-    }
-}
-
-@screen mobile {
-    .project-detail-tab-header {
-        .header-container {
-            .header-icon-wrapper {
-                @apply bg-transparent;
-                align-items: flex-start;
-                cursor: default;
-                border: none;
-                padding-top: 0.25rem;
-                &.tablet {
-                    display: none;
-                }
-                &.mobile {
-                    display: flex;
-                }
-            }
-        }
-    }
-}
-
-/* custom design-system component - p-select-dropdown */
-:deep(.p-select-dropdown) {
-    .dropdown-button-component {
-        @apply rounded-full;
-
-        &.opened {
-            @apply rounded-full;
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectLSBSearch.vue b/apps/web/src/services/project/v2/components/ProjectLSBSearch.vue
new file mode 100644
index 0000000000..25c2ec4835
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectLSBSearch.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import {
+    getTextHighlightRegex, PTextInput, PEmpty, PTextHighlighting,
+} from '@cloudforet/mirinae';
+import type { TreeNodeRoutePredicate } from '@cloudforet/mirinae/types/data-display/tree/new-tree/type';
+
+import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import LSBItem from '@/common/modules/navigations/new-lsb/LSBItem.vue';
+
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+import { useProjectListStore } from '@/services/project/v2/stores/project-list-store';
+
+const props = defineProps<{
+    keyword?: string;
+}>();
+const emit = defineEmits<{(e: 'update:keyword', value: string): void;
+}>();
+
+const projectListStore = useProjectListStore();
+const projectFilteredByKeyword = computed(() => projectListStore.projects.filter((project) => getTextHighlightRegex(props.keyword).test(project.name)));
+const predicate: TreeNodeRoutePredicate = (to, curr) => to.params?.projectGroupOrProjectId === curr.params.projectGroupOrProjectId;
+</script>
+
+<template>
+    <div>
+        <p-text-input :value="props.keyword"
+                      class="!w-full mb-2"
+                      placeholder="Search project"
+                      @update:value="emit('update:keyword', $event)"
+        />
+        <template v-if="props.keyword">
+            <template v-if="projectFilteredByKeyword.length">
+                <l-s-b-item v-for="project in projectFilteredByKeyword"
+                            :id="project.key"
+                            :key="project.key"
+                            :name="project.name"
+                            :link="{
+                                to: {
+                                    name: PROJECT_ROUTE_V2._NAME,
+                                    params: { projectGroupOrProjectId: project.key }
+                                },
+                                predicate
+                            }"
+                            :favorite-options="{ type: FAVORITE_TYPE.PROJECT, id: project.key }"
+                            display-type="list"
+                            icon="ic_project-filled"
+                >
+                    <p-text-highlighting :text="project.name"
+                                         :term="props.keyword"
+                    />
+                </l-s-b-item>
+            </template>
+            <p-empty v-else
+                     class="text-paragraph-md whitespace-pre mt-3"
+            >
+                {{ $t('PROJECT.LANDING.SEARCH_EMPTY_TEXT') }}
+            </p-empty>
+        </template>
+    </div>
+</template>
diff --git a/apps/web/src/services/project/v2/components/ProjectLSBTree.vue b/apps/web/src/services/project/v2/components/ProjectLSBTree.vue
new file mode 100644
index 0000000000..11542d33c1
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectLSBTree.vue
@@ -0,0 +1,149 @@
+<script lang="ts">
+// eslint-disable-next-line import/order,import/no-duplicates
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    name: 'ProjectLSBTree',
+});
+</script>
+<script setup lang="ts">
+/* eslint-disable import/first */
+import {
+    computed,
+    ref,
+    watch,
+// eslint-disable-next-line import/no-duplicates
+} from 'vue';
+
+import { PTreeNode } from '@cloudforet/mirinae';
+import type { TreeNodeIcon, TreeNodeRoutePredicate } from '@cloudforet/mirinae/types/data-display/tree/new-tree/type';
+
+import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
+import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+
+import { indigo } from '@/styles/colors';
+
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+import { useProjectListStore } from '@/services/project/v2/stores/project-list-store';
+
+const props = withDefaults(defineProps<{
+    parentGroupId?: string;
+    depth?: number;
+    selectedPaths?: string[];
+}>(), {
+    parentGroupId: undefined,
+    depth: 0,
+    selectedPaths: () => [],
+});
+
+/* items */
+const projectListStore = useProjectListStore();
+const items = computed(() => projectListStore.getItemsByParentGroupId(props.parentGroupId));
+
+/* icons */
+const projectGroupIcon: TreeNodeIcon = { iconName: 'ic_folder-filled', iconColor: indigo[500] };
+const projectIcon: TreeNodeIcon = 'ic_project-filled';
+
+/* link */
+const predicate: TreeNodeRoutePredicate = (to, curr) => to.params?.projectGroupOrProjectId === curr.params.projectGroupOrProjectId;
+
+/* expanded */
+const expandedMap = ref<Record<string, boolean>>({});
+const getExpanded = (key: string) => props.selectedPaths.includes(key) && props.depth < props.selectedPaths.length - 1;
+watch(items, (nodes) => {
+    const map = {};
+    nodes.forEach((node) => {
+        map[node.key] = expandedMap.value[node.key] ?? getExpanded(node.key);
+    });
+    expandedMap.value = map;
+});
+watch(() => props.selectedPaths, (paths) => {
+    const map = { ...expandedMap.value };
+    paths.forEach((path, index) => {
+        if (index < paths.length - 1) {
+            map[path] = true;
+        }
+    });
+    expandedMap.value = map;
+}, { immediate: true });
+</script>
+
+<template>
+    <div class="project-main-tree">
+        <p-tree-node v-for="item in items"
+                     :id="item.key"
+                     :key="item.key"
+                     :data-node-id="item.key"
+                     :name="item.name"
+                     :depth="props.depth"
+                     :selectable="true"
+                     :link="{
+                         to: {
+                             name: PROJECT_ROUTE_V2._NAME,
+                             params: {
+                                 projectGroupOrProjectId: item.key,
+                             },
+                         },
+                         predicate,
+                     }"
+                     :icon="item.type === 'PROJECT_GROUP' ? projectGroupIcon : projectIcon"
+                     display-type="tree"
+                     :has-children="item.type === 'PROJECT_GROUP'"
+                     :expanded="expandedMap[item.key]"
+                     @update:expanded="expandedMap[item.key] = $event"
+        >
+            <template #action="{ id, hasChildren }">
+                <favorite-button :item-id="id"
+                                 :favorite-type="hasChildren ? FAVORITE_TYPE.PROJECT_GROUP : FAVORITE_TYPE.PROJECT"
+                                 scale="0.8"
+                                 class="favorite-button"
+                />
+            </template>
+            <template #children="node">
+                <project-l-s-b-tree :parent-group-id="node.id"
+                                    :depth="node.depth + 1"
+                                    :selected-paths="props.selectedPaths"
+                />
+            </template>
+        </p-tree-node>
+    </div>
+</template>
+
+<style scoped lang="postcss">
+.project-main-tree {
+    width: 100%;
+    .project-menu-item-content {
+        @apply flex items-center justify-between w-full;
+        height: 2rem;
+        .contents-wrapper {
+            @apply flex items-center gap-1 w-full;
+
+            .project-icon {
+                min-width: 0.875rem;
+            }
+            .text {
+                @apply text-label-md text-gray-900;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        .favorite-button {
+            display: none;
+            min-width: 1.5rem;
+            height: 1rem;
+            padding-left: 0.5rem;
+        }
+
+        &:hover {
+            .contents-wrapper {
+                width: calc(100% - 1.5rem);
+            }
+            .favorite-button {
+                display: block;
+            }
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectMain.vue b/apps/web/src/services/project/v2/components/ProjectMain.vue
deleted file mode 100644
index 8674a20dd0..0000000000
--- a/apps/web/src/services/project/v2/components/ProjectMain.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script setup lang="ts">
-
-import { computed, onMounted, reactive } from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-import { uniq } from 'lodash';
-
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import {
-    PFieldTitle, PEmpty, PPaneLayout,
-} from '@cloudforet/mirinae';
-
-import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
-import type { ServiceAccountListParameters } from '@/api-clients/identity/service-account/schema/api-verbs/list';
-import type { ServiceAccountModel } from '@/api-clients/identity/service-account/schema/model';
-
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import type { ProjectCardItemType } from '@/services/project/v-shared/types/project-type';
-import ProjectMainProjectCard from '@/services/project/v2/components/ProjectMainProjectCard.vue';
-import ProjectMainProjectGroupCard from '@/services/project/v2/components/ProjectMainProjectGroupCard.vue';
-
-
-const route = useRoute();
-const allReferenceStore = useAllReferenceStore();
-
-const storeState = reactive({
-    project: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
-    projectGroup: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-});
-
-const state = reactive({
-    currentProjectGroupId: computed(() => route.params.projectGroupId),
-    serviceAccountList: [] as ServiceAccountModel[],
-    currentProjectGroupList: computed<ProjectCardItemType[]>(() => {
-        const allProjectGroupList: ProjectCardItemType[] = Object.values(storeState.projectGroup).map((d) => ({
-            type: 'projectGroup',
-            id: d.key,
-            name: d.name,
-            parentId: d.data.parentGroupInfo?.id as string|undefined,
-        }));
-        return allProjectGroupList.filter((projectGroup) => projectGroup.parentId === state.currentProjectGroupId);
-    }),
-    currentProjectList: computed<ProjectCardItemType[]>(() => {
-        const allProjectList: ProjectCardItemType[] = Object.values(storeState.project).map((d) => ({
-            type: 'project',
-            id: d.key,
-            name: d.name,
-            parentId: d.data.groupInfo?.id,
-            projectType: d.data.projectType,
-        }));
-        return allProjectList.filter((project) => project.parentId === state.currentProjectGroupId);
-    }),
-    filteredCardList: computed<ProjectCardItemType[]>(() => [...state.currentProjectGroupList, ...state.currentProjectList]),
-    paginatedCardList: computed(() => ({
-        projectGroup: state.filteredCardList.filter((item) => item.type === 'projectGroup'),
-        project: state.filteredCardList.filter((item) => item.type === 'project'),
-    })),
-});
-
-/* Util */
-const getDistinctProviders = (projectId: string): string[] => uniq(state.serviceAccountList.filter((d) => d.project_id === projectId).map((d) => d.provider));
-
-const listServiceAccount = async () => {
-    try {
-        const params: ServiceAccountListParameters = {
-            query: {
-                only: ['provider', 'project_id'],
-            },
-        };
-        const response = await SpaceConnector.clientV2.identity.serviceAccount.list<ServiceAccountListParameters, ListResponse<ServiceAccountModel>>(params);
-        state.serviceAccountList = response.results || [];
-    } catch (e) {
-        state.serviceAccountList = [];
-        ErrorHandler.handleError(e);
-    }
-};
-
-onMounted(async () => {
-    await listServiceAccount();
-});
-
-</script>
-
-<template>
-    <p-pane-layout class="project-main">
-        <div class="project-contents">
-            <div v-if="state.paginatedCardList.projectGroup.length"
-                 class="contents-wrapper"
-            >
-                <p-field-title class="content-title"
-                               :label="$t('PROJECT.LANDING.PROJECT_GROUP')"
-                />
-                <div class="card-contents">
-                    <project-main-project-group-card v-for="(projectGroup, idx) in state.paginatedCardList.projectGroup"
-                                                     :key="`project-group-${idx}`"
-                                                     :item="projectGroup"
-                    />
-                </div>
-            </div>
-
-            <div v-if="state.paginatedCardList.project.length"
-                 class="contents-wrapper"
-            >
-                <p-field-title class="content-title"
-                               :label="$t('PROJECT.LANDING.PROJECT')"
-                />
-                <div class="card-contents">
-                    <project-main-project-card v-for="(project, idx) in state.paginatedCardList.project"
-                                               :key="`project-${idx}`"
-                                               :item="project"
-                                               :service-account-provider-list="getDistinctProviders(project.id)"
-                    />
-                </div>
-            </div>
-
-            <p-empty v-if="!state.filteredCardList.length"
-                     show-image
-                     class="empty-contents"
-            >
-                <div class="empty-text">
-                    <p>{{ $t('PROJECT.LANDING.EMPTY_TEXT') }}</p>
-                </div>
-            </p-empty>
-        </div>
-    </p-pane-layout>
-</template>
-
-<style scoped lang="postcss">
-.project-main {
-    padding: 1.5rem 1rem 2.5rem;
-
-    .project-contents {
-        .contents-wrapper {
-            margin-bottom: 1.5rem;
-
-            .content-title {
-                margin-bottom: 0.5rem;
-            }
-        }
-    }
-    .card-contents {
-        @apply grid;
-        gap: 1rem;
-        grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
-    }
-    .empty-contents {
-        margin-top: 4rem;
-        .empty-text {
-            width: 20rem;
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectMainProjectCard.vue b/apps/web/src/services/project/v2/components/ProjectMainProjectCard.vue
deleted file mode 100644
index 9c9cfd0403..0000000000
--- a/apps/web/src/services/project/v2/components/ProjectMainProjectCard.vue
+++ /dev/null
@@ -1,330 +0,0 @@
-<script setup lang="ts">
-import { computed, reactive } from 'vue';
-import { useRouter } from 'vue-router/composables';
-
-import {
-    PI, PTextHighlighting, PSelectDropdown,
-} from '@cloudforet/mirinae';
-import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
-
-import { i18n } from '@/translations';
-
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProviderItem, ProviderReferenceMap } from '@/store/reference/provider-reference-store';
-
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-
-import { peacock } from '@/styles/colors';
-
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
-import type { ProjectCardItemType } from '@/services/project/v-shared/types/project-type';
-import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
-import { SERVICE_ACCOUNT_ROUTE } from '@/services/service-account/routes/route-constant';
-
-interface Props {
-    item: ProjectCardItemType;
-    serviceAccountProviderList: string[];
-    searchKeyword?: string;
-}
-
-const props = defineProps<Props>();
-
-const allReferenceStore = useAllReferenceStore();
-const favoriteStore = useFavoriteStore();
-const favoriteGetters = favoriteStore.getters;
-const projectPageStore = useProjectPageStore();
-
-
-const router = useRouter();
-
-const storeState = reactive({
-    providers: computed<ProviderReferenceMap>(() => allReferenceStore.getters.provider),
-    projectGroup: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-    favoriteItems: computed(() => favoriteGetters.projectItems),
-});
-
-const state = reactive({
-    projectGroupName: computed<string>(() => {
-        if (!props.item.parentId) return '';
-        return storeState.projectGroup[props.item.parentId].name;
-    }),
-    isStarred: computed(() => storeState.favoriteItems.some((item) => item.itemId === props.item.id)),
-    toolsetMenuItems: computed(() => [
-        {
-            type: 'item',
-            name: 'update',
-            label: i18n.t('PROJECT.DETAIL.UPDATE'),
-            icon: 'ic_settings',
-        },
-        {
-            type: 'item',
-            name: 'move',
-            label: i18n.t('PROJECT.DETAIL.MOVE'),
-            icon: 'ic_move',
-        },
-        { type: 'divider', name: 'divider' },
-        {
-            type: 'item',
-            name: 'delete',
-            label: i18n.t('PROJECT.DETAIL.DELETE'),
-            icon: 'ic_delete',
-        },
-    ]),
-    toolsetMenuVisible: false,
-});
-
-const getProvider = (name: string): ProviderItem => storeState.providers[name] || {};
-
-// TODO: change the route
-const handleSelectProject = () => {
-    router.push({
-        name: PROJECT_ROUTE_V2._NAME,
-        params: {
-            id: props.item.id as string,
-        },
-    }).catch(() => {});
-};
-
-const handleSelectItem = (selected: MenuItem) => {
-    projectPageStore.setCurrentSelectedProjectId(props.item.id);
-    if (selected.name === 'update') {
-        projectPageStore.setProjectFormModalVisible(true);
-    }
-    if (selected.name === 'move') {
-        projectPageStore.setProjectGroupMoveModalVisible(true);
-    }
-    if (selected.name === 'delete') {
-        projectPageStore.setProjectDeleteModalVisible(true);
-    }
-};
-
-</script>
-
-<template>
-    <div :class="{'project-main-project-card': true, 'toolset-active': state.toolsetMenuVisible }"
-         @click="handleSelectProject"
-    >
-        <div class="main-contents">
-            <div class="title-wrapper">
-                <div class="title">
-                    <p-i name="ic_document-filled"
-                         :color="peacock[600]"
-                         width="1rem"
-                         height="1rem"
-                    />
-                    <p-text-highlighting class="text"
-                                         :text="props.item.name"
-                                         :term="props.searchKeyword"
-                    />
-                </div>
-
-                <div class="toolset-group">
-                    <p-select-dropdown class="toolset-button"
-                                       style-type="tertiary-icon-button"
-                                       button-icon="ic_ellipsis-horizontal"
-                                       size="sm"
-                                       :visible-menu.sync="state.toolsetMenuVisible"
-                                       :menu="state.toolsetMenuItems"
-                                       :selected="[]"
-                                       use-fixed-menu-style
-                                       reset-selection-on-menu-close
-                                       @select="handleSelectItem"
-                    />
-                    <favorite-button :class="{'favorite-button': true, 'starred': state.isStarred }"
-                                     :item-id="props.item.id"
-                                     :favorite-type="FAVORITE_TYPE.PROJECT"
-                    />
-                </div>
-            </div>
-            <span class="project-group">
-                {{ state.projectGroupName }}
-            </span>
-        </div>
-        <div class="sub-contents">
-            <div v-if="props.serviceAccountProviderList.length > 0"
-                 class="provider-icon-wrapper"
-            >
-                <div class="provider">
-                    <template v-for="(provider, index) in props.serviceAccountProviderList">
-                        <router-link v-if="index < 5"
-                                     :key="index"
-                                     :to="{name: SERVICE_ACCOUNT_ROUTE._NAME,query: { provider: getProvider(provider) ? provider : null },}"
-                                     class="icon-link"
-                                     :style="{backgroundImage: `url('${getProvider(provider).icon || require('@/assets/images/ic_cloud-filled.svg')}')`}"
-                                     @click.native.stop.prevent
-                        />
-                    </template>
-                </div>
-                <span v-if="props.serviceAccountProviderList.length > 5"
-                      class="provider-more-text"
-                >
-                    ...
-                </span>
-                <router-link v-if="props.serviceAccountProviderList.length !== 0"
-                             class="icon-wrapper"
-                             :to="{ name: SERVICE_ACCOUNT_ROUTE._NAME }"
-                             @click.native.stop.prevent
-                >
-                    <p-i name="ic_plus_thin"
-                         scale="0.8"
-                         color="inherit"
-                    />
-                </router-link>
-            </div>
-            <div v-else
-                 class="account-add"
-            >
-                <router-link :to="{ name: SERVICE_ACCOUNT_ROUTE._NAME }"
-                             @click.native.stop.prevent
-                >
-                    <p-i name="ic_plus_thin"
-                         scale="0.8"
-                         color="inherit"
-                    />
-                </router-link>
-                <router-link :to="{ name: SERVICE_ACCOUNT_ROUTE._NAME }"
-                             @click.native.stop.prevent
-                >
-                    <span class="add-label"> {{ $t('PROJECT.LANDING.ADD_SERVICE_ACCOUNT') }}</span>
-                </router-link>
-            </div>
-            <div v-if="item.projectType === 'PRIVATE'"
-                 class="private-badge"
-            >
-                <p-i name="ic_lock-filled"
-                     scale="0.8"
-                     color="inherit"
-                     class="badge-icon"
-                />
-                {{ $t('PROJECT.LANDING.INVITE_ONLY') }}
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped lang="postcss">
-.project-main-project-card {
-    @apply flex flex-col justify-between bg-gray-100 rounded-lg cursor-pointer;
-    height: 6.5rem;
-    padding: 0.75rem 0.75rem 1rem;
-
-    .main-contents {
-        .title-wrapper {
-            @apply flex items-center justify-between;
-            .title {
-                @apply flex gap-1 items-center text-paragraph-md text-gray-900;
-                margin-bottom: 0.25rem;
-            }
-        }
-        .project-group {
-            @apply text-label-md text-gray-600;
-        }
-    }
-
-    .sub-contents {
-        @apply flex justify-between items-center;
-
-        .provider-icon-wrapper {
-            @apply flex-shrink inline-flex items-center truncate;
-            .provider {
-                @apply truncate;
-                min-width: 0;
-                height: 1.25rem;
-            }
-            .icon-wrapper {
-                @apply rounded-full inline-flex justify-center items-center;
-                height: 1.25rem;
-                width: 1.25rem;
-                &:hover {
-                    @apply bg-blue-300;
-                }
-            }
-            .provider-more-text {
-                @apply text-label-sm text-gray-500;
-                cursor: default;
-                font-weight: normal;
-                padding-right: 0.5rem;
-            }
-            &:hover {
-                @apply text-secondary font-bold;
-            }
-            .icon-link {
-                @apply flex-shrink-0 inline-block;
-                height: 1.25rem;
-                width: 1.25rem;
-                background-repeat: no-repeat;
-                background-size: 100%;
-                background-position: center;
-                line-height: 1.25rem;
-                margin-right: 0.37rem;
-                &:hover {
-                    opacity: 50%;
-                }
-            }
-        }
-        .account-add {
-            @apply flex-shrink-0 inline-flex text-gray-700;
-            .add-label {
-                @apply text-xs;
-                line-height: 1.2;
-            }
-            &:hover {
-                .add-label {
-                    text-decoration: underline;
-                }
-            }
-        }
-        .private-badge {
-            @apply text-gray-500 flex items-center text-label-sm;
-            gap: 0.125rem;
-            .badge-icon {
-                margin-right: 0.125rem;
-            }
-        }
-    }
-
-    .favorite-button {
-        display: none;
-
-        &.starred {
-            display: block;
-        }
-    }
-    .toolset-button {
-        display: none;
-    }
-
-    .toolset-group {
-        @apply flex gap-1 items-center;
-    }
-
-    &:hover {
-        @apply bg-gray-150;
-
-        .toolset-button {
-            display: block;
-        }
-        .favorite-button {
-            display: block;
-        }
-    }
-    &.toolset-active {
-        @apply bg-blue-200;
-    }
-}
-
-/* custom design-system component - p-select-dropdown */
-:deep(.p-select-dropdown) {
-    .dropdown-button-component {
-        @apply rounded-full;
-
-        &.opened {
-            @apply rounded-full;
-        }
-    }
-}
-
-</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectMainProjectGroupCard.vue b/apps/web/src/services/project/v2/components/ProjectMainProjectGroupCard.vue
deleted file mode 100644
index 1cd50cc1f3..0000000000
--- a/apps/web/src/services/project/v2/components/ProjectMainProjectGroupCard.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<script setup lang="ts">
-
-import { computed, reactive } from 'vue';
-import { useRouter } from 'vue-router/composables';
-
-import { PI, PTextHighlighting, PSelectDropdown } from '@cloudforet/mirinae';
-import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
-
-import { i18n } from '@/translations';
-
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-
-import { indigo } from '@/styles/colors';
-
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
-import type { ProjectCardItemType } from '@/services/project/v-shared/types/project-type';
-import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
-
-interface Props {
-    item: ProjectCardItemType;
-    searchKeyword?: string;
-}
-
-const props = defineProps<Props>();
-const router = useRouter();
-
-const favoriteStore = useFavoriteStore();
-const favoriteGetters = favoriteStore.getters;
-const projectPageStore = useProjectPageStore();
-
-const storeState = reactive({
-    favoriteItems: computed(() => favoriteGetters.projectGroupItems),
-});
-
-const state = reactive({
-    isStarred: computed(() => storeState.favoriteItems.some((item) => item.itemId === props.item.id)),
-    toolsetMenuItems: [
-        {
-            type: 'item',
-            name: 'rename',
-            label: i18n.t('Rename'),
-            icon: 'ic_settings',
-        },
-        {
-            type: 'item',
-            name: 'move',
-            label: i18n.t('Move'),
-            icon: 'ic_move',
-        },
-        { type: 'divider', name: 'divider' },
-        {
-            type: 'item',
-            name: 'delete',
-            label: i18n.t('Delete'),
-            icon: 'ic_delete',
-        },
-    ],
-    toolsetMenuVisible: false,
-});
-
-// TODO: change the route
-const handleSelectProjectGroup = () => {
-    router.push({
-        name: PROJECT_ROUTE_V2._NAME,
-        params: {
-            projectGroupId: props.item.id as string,
-        },
-    }).catch(() => {});
-};
-
-const handleSelectItem = (selected: MenuItem) => {
-    projectPageStore.setCurrentSelectedProjectGroupId(props.item.id);
-    if (selected.name === 'rename') {
-        projectPageStore.setProjectGroupFormUpdateMode(true);
-        projectPageStore.setProjectGroupFormVisible(true);
-    }
-    if (selected.name === 'move') {
-        projectPageStore.setProjectGroupMoveModalVisible(true);
-    }
-    if (selected.name === 'delete') {
-        projectPageStore.setProjectDeleteModalVisible(true);
-    }
-};
-
-
-</script>
-
-<template>
-    <div class="project-main-project-group-card"
-         @click="handleSelectProjectGroup"
-    >
-        <div class="project-group-item">
-            <p-i name="ic_folder-filled"
-                 :color="indigo[500]"
-                 width="1rem"
-                 height="1rem"
-            />
-            <p-text-highlighting class="project-group-name"
-                                 :text="props.item.name"
-                                 :term="props.searchKeyword"
-            />
-        </div>
-        <div class="toolset-group">
-            <p-select-dropdown class="toolset-button"
-                               style-type="tertiary-icon-button"
-                               button-icon="ic_ellipsis-horizontal"
-                               size="sm"
-                               :visible-menu.sync="state.toolsetMenuVisible"
-                               :menu="state.toolsetMenuItems"
-                               :selected="[]"
-                               use-fixed-menu-style
-                               reset-selection-on-menu-close
-                               @select="handleSelectItem"
-            />
-            <favorite-button :item-id="props.item.id"
-                             :favorite-type="FAVORITE_TYPE.PROJECT_GROUP"
-                             :class="{'favorite-button': true, 'starred': state.isStarred }"
-            />
-        </div>
-    </div>
-</template>
-
-<style scoped lang="postcss">
-.project-main-project-group-card {
-    @apply flex items-center justify-between bg-gray-100 rounded-lg cursor-pointer;
-    height: 3rem;
-    padding: 0.75rem;
-
-    .project-group-item {
-        @apply flex gap-1;
-
-        .project-group-name {
-            @apply text-label-md text-gray-900;
-        }
-    }
-
-    .favorite-button {
-        display: none;
-
-        &.starred {
-            display: block;
-        }
-    }
-    .toolset-button {
-        display: none;
-    }
-
-    .toolset-group {
-        @apply flex gap-1 items-center;
-    }
-
-    &:hover {
-        @apply bg-gray-150;
-
-        .toolset-button {
-            display: block;
-        }
-        .favorite-button {
-            display: block;
-        }
-    }
-    &.toolset-active {
-        @apply bg-blue-200;
-    }
-}
-
-/* custom design-system component - p-select-dropdown */
-:deep(.p-select-dropdown) {
-    .dropdown-button-component {
-        @apply rounded-full;
-
-        &.opened {
-            @apply rounded-full;
-        }
-    }
-}
-
-</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectMainTree.vue b/apps/web/src/services/project/v2/components/ProjectMainTree.vue
deleted file mode 100644
index c45a2c8b26..0000000000
--- a/apps/web/src/services/project/v2/components/ProjectMainTree.vue
+++ /dev/null
@@ -1,267 +0,0 @@
-<script setup lang="ts">
-
-import {
-    computed, onMounted, reactive, watch,
-} from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-import { isEqual } from 'lodash';
-
-import { PI, PTreeView } from '@cloudforet/mirinae';
-
-import { i18n } from '@/translations';
-
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
-
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
-import type { Breadcrumb } from '@/common/modules/page-layouts/type';
-
-import { indigo, peacock } from '@/styles/colors';
-
-import { useProjectTreeStore } from '@/services/project/v-shared/stores/project-tree-store';
-import type { TreeNode, TreeDisplayMap, TreeData } from '@/services/project/v-shared/tree/type';
-import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
-
-interface ProjectDataType extends TreeData {
-    name: string;
-    type: 'PROJECT'|'PROJECT_GROUP';
-    id: string;
-    parentGroupId?: string;
-}
-
-const route = useRoute();
-const gnbStore = useGnbStore();
-
-const allReferenceStore = useAllReferenceStore();
-const projectTreeStore = useProjectTreeStore();
-const projectTreeState = projectTreeStore.state;
-
-const storeState = reactive({
-    projectGroup: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-    project: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
-    treeDisplayMap: computed(() => projectTreeState.treeDisplayMap),
-});
-
-const state = reactive({
-    currentParentPathIds: [] as string[],
-    projectGroupNavigation: computed<Breadcrumb[]>(() => {
-        const allPaths = state.currentParentPathIds.map((id) => ({
-            name: storeState.projectGroup[id].name,
-            to: {
-                // TODO: check route
-                name: PROJECT_ROUTE_V2._NAME,
-                params: {
-                    projectGroupId: id,
-                },
-            },
-        }));
-        // TODO: check route
-        return [{ name: i18n.t('MENU.PROJECT'), to: { name: PROJECT_ROUTE_V2._NAME } }, ...allPaths];
-    }),
-    selectedTreeId: undefined as string|undefined,
-    projectTreeData: computed<TreeNode<ProjectDataType>[]>(() => {
-        const nodes: Record<string, TreeNode<ProjectDataType>> = {};
-        Object.keys(storeState.projectGroup).forEach((key) => {
-            const projectGroup = storeState.projectGroup[key];
-            nodes[key] = {
-                id: key,
-                depth: 0,
-                data: {
-                    name: projectGroup.name,
-                    type: 'PROJECT_GROUP',
-                    id: key,
-                    parentGroupId: projectGroup.data.parentGroupInfo?.id,
-                    to: {
-                        // TODO: check route
-                        name: PROJECT_ROUTE_V2._NAME,
-                        params: {
-                            projectGroupId: key,
-                        },
-                    },
-                },
-                children: [],
-            };
-        });
-        Object.keys(storeState.project).forEach((key) => {
-            const project = storeState.project[key];
-            nodes[key] = {
-                id: key,
-                depth: 0,
-                data: {
-                    name: project.name,
-                    type: 'PROJECT',
-                    id: key,
-                    parentGroupId: project.data.groupInfo?.id,
-                    to: {
-                        // TODO: check route
-                        name: PROJECT_ROUTE_V2._NAME,
-                        params: {
-                            id: key,
-                        },
-                    },
-                },
-            };
-        });
-
-        const rootNodes: TreeNode<ProjectDataType>[] = [];
-        const setDepth = (node, depth) => {
-            node.depth = depth;
-            if (!node.children) return;
-            node.children.forEach((child) => {
-                setDepth(child, depth + 1);
-            });
-        };
-        Object.values(nodes).forEach((node) => {
-            const parentGroupId = node.data?.parentGroupId;
-            if (!parentGroupId) {
-                rootNodes.push(node);
-                setDepth(node, 0);
-            } else {
-                const parentNode = nodes[parentGroupId];
-                if (parentNode) {
-                    parentNode.children = parentNode.children || [];
-                    parentNode.children.push(node);
-                    setDepth(node, parentNode.depth + 1);
-                }
-            }
-        });
-
-        return rootNodes;
-    }),
-});
-
-/* Event */
-const handleUpdateTreeDisplayMap = (treeDisplayMap: TreeDisplayMap) => {
-    if (isEqual(treeDisplayMap, storeState.treeDisplayMap)) return;
-    projectTreeStore.setTreeDisplayMap(treeDisplayMap);
-};
-
-/* Helper */
-const updateTreeDisplayMap = (selectedTreeId: string) => {
-    const displayMap = { ...storeState.treeDisplayMap };
-    const parentPathIds: string[] = [];
-    let currentId = selectedTreeId;
-
-    while (currentId) {
-        displayMap[currentId] = { isOpen: true };
-        parentPathIds.unshift(currentId);
-        const currentNode = storeState.projectGroup[currentId] || storeState.project[currentId];
-        if (currentNode?.data?.parentGroupInfo?.id) {
-            currentId = currentNode.data.parentGroupInfo.id;
-        } else if (currentNode?.data?.groupInfo?.id) {
-            currentId = currentNode.data?.groupInfo.id;
-        } else {
-            break;
-        }
-    }
-
-    state.currentParentPathIds = parentPathIds;
-    projectTreeStore.setTreeDisplayMap(displayMap);
-};
-
-
-
-onMounted(() => {
-    const selectedProjectGroupId = route.params.projectGroupId as string|undefined;
-    const selectedProjectId = route.params.id as string|undefined;
-    if (selectedProjectGroupId) {
-        state.selectedTreeId = selectedProjectGroupId as string;
-        updateTreeDisplayMap(selectedProjectGroupId);
-    }
-    if (selectedProjectId) {
-        state.selectedTreeId = selectedProjectId as string;
-        const parentGroupId = storeState.project[selectedProjectId]?.data.groupInfo?.id;
-        if (parentGroupId) updateTreeDisplayMap(parentGroupId);
-    }
-});
-
-watch(() => route.params, ({ id, projectGroupId }) => {
-    if (projectGroupId) {
-        state.selectedTreeId = projectGroupId as string;
-        updateTreeDisplayMap(projectGroupId);
-    }
-    if (id) {
-        state.selectedTreeId = id as string;
-        const parentGroupId = storeState.project[id]?.data.groupInfo?.id;
-        if (parentGroupId) updateTreeDisplayMap(parentGroupId);
-    }
-});
-watch(() => state.projectGroupNavigation, async (projectGroupNavigation) => {
-    gnbStore.setBreadcrumbs(projectGroupNavigation);
-});
-
-
-</script>
-
-<template>
-    <div class="project-main-tree">
-        <p-tree-view :tree-data="state.projectTreeData"
-                     :tree-display-map="storeState.treeDisplayMap"
-                     :selected-id="state.selectedTreeId"
-                     use-default-indent
-                     @update:tree-display-map="handleUpdateTreeDisplayMap"
-        >
-            <template #content="{ node }">
-                <div class="project-menu-item-content">
-                    <div class="contents-wrapper">
-                        <p-i class="project-icon"
-                             :name="Array.isArray(node.children) ? 'ic_folder-filled' : 'ic_document-filled'"
-                             :color="Array.isArray(node.children) ? indigo[500] : peacock[600]"
-                             width="0.875rem"
-                             height="0.875rem"
-                        />
-                        <span class="text">{{ node.data.name }}</span>
-                    </div>
-                    <favorite-button :item-id="node.id"
-                                     :favorite-type="Array.isArray(node.children) ? FAVORITE_TYPE.PROJECT_GROUP : FAVORITE_TYPE.PROJECT"
-                                     scale="0.8"
-                                     class="favorite-button"
-                    />
-                </div>
-            </template>
-        </p-tree-view>
-    </div>
-</template>
-
-<style scoped lang="postcss">
-.project-main-tree {
-    width: 100%;
-    .project-menu-item-content {
-        @apply flex items-center justify-between w-full;
-        height: 2rem;
-        .contents-wrapper {
-            @apply flex items-center gap-1 w-full;
-
-            .project-icon {
-                min-width: 0.875rem;
-            }
-            .text {
-                @apply text-label-md text-gray-900;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-        }
-
-        .favorite-button {
-            display: none;
-            min-width: 1.5rem;
-            height: 1rem;
-            padding-left: 0.5rem;
-        }
-
-        &:hover {
-            .contents-wrapper {
-                width: calc(100% - 1.5rem);
-            }
-            .favorite-button {
-                display: block;
-            }
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectMemberInviteModal.vue b/apps/web/src/services/project/v2/components/ProjectMemberInviteModal.vue
new file mode 100644
index 0000000000..5fe0f94b7d
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectMemberInviteModal.vue
@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { useMutation } from '@tanstack/vue-query';
+
+import {
+    PButtonModal, PFieldGroup, PSelectDropdown, PLazyImg,
+} from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import { useProjectApi } from '@/api-clients/identity/project/composables/use-project-api';
+import { i18n } from '@/translations';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useFormValidator } from '@/common/composables/form-validator';
+
+import { useProjectQuery } from '@/services/project/v2/composables/queries/use-project-query';
+import { useWorkspaceUsersQuery } from '@/services/project/v2/composables/queries/use-workspace-users-query';
+import { useUserInfo } from '@/services/project/v2/composables/use-user-info';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => !!projectPageModalStore.state.inviteMemberModalVisible
+        && projectPageModalStore.state.targetType === 'project'
+        && !!projectPageModalStore.state.targetId);
+
+/* selected users */
+const {
+    forms: {
+        selectedUserItems,
+    },
+    invalidState,
+    invalidTexts,
+    setForm, isAllValid,
+} = useFormValidator({
+    selectedUserItems: [] as SelectDropdownMenuItem[],
+}, {
+    selectedUserItems: (val: SelectDropdownMenuItem[]) => {
+        if (!val.length) return i18n.t('PROJECT.DETAIL.MEMBER.MODAL_VALIDATION_REQUIRED');
+        return true;
+    },
+});
+const handleUpdateSelected = (selected: number|string|SelectDropdownMenuItem[]) => {
+    setForm('selectedUserItems', selected as SelectDropdownMenuItem[]);
+};
+
+/* workspace users */
+const { data: workspaceUsers } = useWorkspaceUsersQuery({
+    enabled: visible,
+});
+const workspaceUserList = computed(() => workspaceUsers.value || []);
+
+/* project users */
+const { data: project, setQueryData: setProjectQueryData } = useProjectQuery({
+    projectId: computed(() => projectPageModalStore.state.targetId),
+    enabled: visible,
+});
+const projectUserList = computed(() => project.value?.users || []);
+
+/* user list */
+const userMenuItems = computed<SelectDropdownMenuItem[]>(() => {
+    const items: SelectDropdownMenuItem[] = [];
+    workspaceUserList.value.forEach((user) => {
+        const singleItem = {
+            name: user.user_id,
+            label: user.name ? `${user.user_id} (${user.name})` : user.user_id,
+            disabled: false,
+        };
+        if (projectUserList.value.includes(user.user_id)) {
+            singleItem.disabled = true;
+        }
+        items.push(singleItem);
+    });
+    return items;
+});
+
+/* users info */
+const {
+    getUserIcon, getUserLabel,
+} = useUserInfo();
+
+/* mutation */
+const { projectAPI } = useProjectApi();
+const { mutateAsync: addMember } = useMutation({
+    mutationFn: ({ projectId, users }: {projectId: string; users: string[]}) => {
+        if (!projectId) throw new Error('Project ID is not defined');
+        return projectAPI.addUsers({
+            project_id: projectId,
+            users,
+        });
+    },
+    onSuccess: (data) => {
+        showSuccessMessage(i18n.t('PROJECT.DETAIL.MEMBER.ALS_S_ADD_MEMBER'), '');
+        setProjectQueryData(data);
+    },
+    onError: (e) => ErrorHandler.handleRequestError(e, i18n.t('PROJECT.DETAIL.MEMBER.ALT_E_ADD_MEMBER'), true),
+});
+
+/* Event */
+const handleConfirm = async () => {
+    await addMember({
+        projectId: projectPageModalStore.state.targetId as string,
+        users: selectedUserItems.value.map((d) => d.name),
+    });
+    projectPageModalStore.closeInviteMemberModal();
+};
+
+</script>
+
+<template>
+    <p-button-modal
+        class="project-member-invite-modal"
+        modal-body-id="project-member-invite"
+        :header-title="$t('PROJECT.DETAIL.MEMBER.INVITE_MEMBER')"
+        :fade="true"
+        :backdrop="true"
+        size="sm"
+        :visible="projectPageModalStore.state.inviteMemberModalVisible"
+        :disabled="!isAllValid"
+        @close="projectPageModalStore.closeInviteMemberModal()"
+        @cancel="projectPageModalStore.closeInviteMemberModal()"
+        @closed="projectPageModalStore.resetTarget()"
+        @confirm="handleConfirm"
+    >
+        <template #body>
+            <div class="form-wrapper">
+                <p-field-group :label="$t('PROJECT.DETAIL.MEMBER.MEMBER')"
+                               required
+                               :invalid="invalidState.selectedUserItems"
+                               :invalid-text="invalidTexts.selectedUserItems"
+                >
+                    <template #default="{invalid}">
+                        <p-select-dropdown
+                            :menu="userMenuItems"
+                            :selected="selectedUserItems"
+                            parent-id="project-member-invite"
+                            multi-selectable
+                            appearance-type="stack"
+                            show-select-marker
+                            is-filterable
+                            show-delete-all-button
+                            use-fixed-menu-style
+                            :invalid="invalid"
+                            @update:selected="handleUpdateSelected"
+                        >
+                            <template #menu-item--format="{item}">
+                                <p-lazy-img :src="getUserIcon(item.name)"
+                                            class="menu-icon"
+                                            width="1rem"
+                                            height="1rem"
+                                />
+                                <span>
+                                    {{ getUserLabel(item.name) || item.label }}
+                                </span>
+                            </template>
+                        </p-select-dropdown>
+                    </template>
+                </p-field-group>
+            </div>
+        </template>
+        <template #confirm-button>
+            <span>{{ $t('PROJECT.DETAIL.MEMBER.INVITE') }}</span>
+            <span v-if="selectedUserItems.length"
+                  class="ml-1"
+            >{{ selectedUserItems.length }}</span>
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.project-member-invite-modal {
+    /* custom design-system component - p-box-tab */
+    :deep(.p-box-tab) {
+        .tab-pane {
+            padding: 0;
+        }
+    }
+    .form-wrapper {
+        .title {
+            @apply text-gray-900;
+            font-size: 1.375rem;
+            line-height: 1.25;
+            padding-bottom: 1rem;
+        }
+    }
+    .menu-icon {
+        @apply rounded-full overflow-hidden;
+    }
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectMemberManagementModal.vue b/apps/web/src/services/project/v2/components/ProjectMemberManagementModal.vue
new file mode 100644
index 0000000000..678b018a03
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectMemberManagementModal.vue
@@ -0,0 +1,210 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import { useMutation } from '@tanstack/vue-query';
+
+import {
+    PButtonModal, PEmpty, PLazyImg, PIconButton, PButton,
+} from '@cloudforet/mirinae';
+
+import { useProjectApi } from '@/api-clients/identity/project/composables/use-project-api';
+import type { ProjectType } from '@/api-clients/identity/project/schema/type';
+import { i18n } from '@/translations';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useProjectQuery } from '@/services/project/v2/composables/queries/use-project-query';
+import { useWorkspaceUsersQuery } from '@/services/project/v2/composables/queries/use-workspace-users-query';
+import { useUserInfo } from '@/services/project/v2/composables/use-user-info';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => !!projectPageModalStore.state.manageMemberModalVisible
+    && projectPageModalStore.state.targetType === 'project'
+    && !!projectPageModalStore.state.targetId);
+
+/* project */
+const { data: project, setQueryData } = useProjectQuery({
+    projectId: computed(() => projectPageModalStore.state.targetId),
+    enabled: visible,
+});
+const projectType = computed<ProjectType|undefined>(() => project.value?.project_type);
+
+/* members */
+const { data: workspaceUsers, error } = useWorkspaceUsersQuery({
+    enabled: computed(() => visible.value && projectType.value === 'PUBLIC'),
+});
+const possibleUserIds = computed<string[]>(() => {
+    if (projectType.value === 'PUBLIC') {
+        if (!workspaceUsers.value) return [];
+        return workspaceUsers.value?.map((user) => user.user_id) || [];
+    }
+    return project.value?.users || [];
+});
+watch(error, (e) => {
+    if (e) ErrorHandler.handleError(e);
+});
+
+
+/* users info */
+const {
+    getUserIcon,
+    getUserName,
+    getUserRole,
+} = useUserInfo();
+
+
+/* remove project user */
+const { projectAPI } = useProjectApi();
+const { mutateAsync: removeProjectUser } = useMutation({
+    mutationFn: ({ projectId, userId }: {projectId: string; userId: string}) => projectAPI.removeUsers({
+        project_id: projectId,
+        users: [userId],
+    }),
+    onSuccess: (data) => {
+        setQueryData(data);
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.DETAIL.ALT_E_UPDATE_MEMBER'), true);
+    },
+});
+const handleRemoveProjectUser = async (projectId: string, userId: string) => {
+    removeProjectUser({
+        projectId,
+        userId,
+    });
+};
+
+/* modal handling */
+const handleCloseMemberModal = () => {
+    projectPageModalStore.closeManageMemberModal();
+};
+const triggerInvite = ref(false);
+const handleClickInvite = () => {
+    const projectId = projectPageModalStore.state.targetId as string;
+    triggerInvite.value = true;
+    projectPageModalStore.closeManageMemberModal();
+    projectPageModalStore.openProjectInviteMemberModal(projectId);
+};
+const handleClosedMemberModal = () => {
+    if (!triggerInvite.value) {
+        projectPageModalStore.resetTarget();
+    }
+};
+watch(visible, () => (v) => {
+    if (v) {
+        triggerInvite.value = false;
+    }
+});
+</script>
+
+<template>
+    <p-button-modal :header-title="$t('PROJECT.DETAIL.MEMBER_TITLE')"
+                    :visible="visible"
+                    size="md"
+                    hide-footer-close-button
+                    @close="projectPageModalStore.closeManageMemberModal"
+                    @cancel="projectPageModalStore.closeManageMemberModal"
+                    @closed="handleClosedMemberModal"
+                    @confirm="handleCloseMemberModal"
+    >
+        <template #body>
+            <div v-if="projectPageModalStore.state.targetId"
+                 class="member-contents-wrapper"
+            >
+                <div class="member-contents">
+                    <div class="contents-header">
+                        <span>{{ $t('PROJECT.DETAIL.INVITE_MEMBER_DESC') }}</span>
+                        <p-button v-if="projectType === 'PRIVATE'"
+                                  icon-left="ic_plus_bold"
+                                  style-type="tertiary"
+                                  @click="handleClickInvite"
+                        >
+                            {{ $t('PROJECT.DETAIL.MEMBER.INVITE') }}
+                        </p-button>
+                    </div>
+                    <div class="main-contents">
+                        <div v-if="possibleUserIds.length">
+                            <div v-for="(userId) in possibleUserIds"
+                                 :key="userId"
+                                 class="member-item"
+                            >
+                                <div class="left-contents">
+                                    <p-lazy-img :src="getUserIcon(userId)"
+                                                alt="user-icon"
+                                                class="menu-icon"
+                                                width="1.75rem"
+                                                height="1.75rem"
+                                    />
+                                    <span>{{ userId }} <span v-if="!!getUserName(userId)">({{ getUserName(userId) }})</span></span>
+                                </div>
+                                <div class="right-contents">
+                                    <span>{{ getUserRole(userId) }}</span>
+                                    <p-icon-button name="ic_delete"
+                                                   size="sm"
+                                                   @click="handleRemoveProjectUser(projectPageModalStore.state.targetId, userId)"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <p-empty v-else
+                                 class="project-member-empty"
+                                 show-image
+                                 :title="$t('PROJECT.DETAIL.MEMBER.NO_PROJECT_MEMBER')"
+                        >
+                            <template #image>
+                                <img alt="illust_astronaut_radio"
+                                     src="@/assets/images/img_ghost.png"
+                                >
+                            </template>
+                        </p-empty>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template #confirm-button>
+            {{ $t('PROJECT.DETAIL.MEMBER.DONE') }}
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.member-contents-wrapper {
+    @apply bg-violet-100;
+    padding: 1rem;
+    width: 100%;
+    height: 25rem;
+    .member-contents {
+        @apply rounded-lg border border-violet-200 bg-white;
+        padding: 0.75rem;
+        height: 100%;
+
+        .contents-header {
+            @apply flex items-center justify-between text-label-md font-bold text-gray-900;
+            padding-bottom: 0.5rem;
+            height: 2.5rem;
+        }
+        .main-contents {
+            @apply overflow-scroll;
+            height: calc(100% - 2.5rem);
+            .member-item {
+                @apply flex items-center justify-between;
+                padding: 0.5rem 0.25rem 0.5rem 0.5rem;
+                .left-contents {
+                    @apply flex items-center gap-2 text-label-md text-gray-900;
+                    .menu-icon {
+                        @apply rounded-full;
+                    }
+                }
+                .right-contents {
+                    @apply text-label-md text-gray-500 flex items-center gap-2;
+                }
+            }
+            .project-member-empty {
+                margin-top: 3rem;
+            }
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectMoveModal.vue b/apps/web/src/services/project/v2/components/ProjectMoveModal.vue
new file mode 100644
index 0000000000..4306693a51
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectMoveModal.vue
@@ -0,0 +1,168 @@
+<script lang="ts" setup>
+import { computed, reactive, watch } from 'vue';
+
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+
+import { PButtonModal, PRadio, PRadioGroup } from '@cloudforet/mirinae';
+
+import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
+import { useProjectApi } from '@/api-clients/identity/project/composables/use-project-api';
+import { i18n } from '@/translations';
+
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import type { ProjectTreeNodeData } from '@/common/modules/project/project-tree-type';
+import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
+
+import { useProjectListStore } from '@/services/project/v2/stores/project-list-store';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => projectPageModalStore.state.moveModalVisible && !!projectPageModalStore.state.targetId);
+const isProject = computed(() => projectPageModalStore.state.targetType === 'project');
+const targetId = computed(() => projectPageModalStore.state.targetId);
+
+const projectListStore = useProjectListStore();
+const state = reactive({
+    originParentGroupId: computed<string|undefined>(() => {
+        if (!targetId.value) return undefined;
+        if (isProject.value) return projectListStore.projectMap[targetId.value]?.data.groupInfo?.id;
+        return projectListStore.projectGroupMap[targetId.value]?.data.parentGroupInfo?.id;
+    }),
+    selectedProjectGroupIdList: [] as string[],
+    selectProjectGroup: true as boolean,
+    isValid: computed<boolean>(() => getIsValid(isProject.value, state.selectProjectGroup, state.selectedProjectGroupIdList, state.originParentGroupId)),
+    targetName: computed<string>(() => {
+        if (!targetId.value) return '';
+        if (isProject.value) return projectListStore.projectMap[targetId.value]?.name;
+        return projectListStore.projectGroupMap[targetId.value]?.name;
+    }),
+    projectGroupSelectOptions: computed(() => ({
+        id: targetId.value,
+        type: isProject.value ? 'PROJECT' : 'PROJECT_GROUP',
+        currentProjectGroupId: state.originParentGroupId,
+    })),
+});
+
+/* Util */
+const getIsValid = (_isProject: boolean, selectProjectGroup: boolean, selectedProjectGroupIdList: string[], originParentGroupId?: string) => {
+    if (_isProject) return true;
+    if (!selectProjectGroup) { // no project group
+        if (!originParentGroupId) return false;
+    } else {
+        if (!selectedProjectGroupIdList.length) return false;
+        if (originParentGroupId === selectedProjectGroupIdList[0]) return false;
+    }
+    return true;
+};
+
+/* mutations */
+const { projectAPI, projectListQueryKey, projectQueryKey } = useProjectApi();
+const { projectGroupAPI, projectGroupListQueryKey, projectGroupQueryKey } = useProjectGroupApi();
+const queryClient = useQueryClient();
+
+const { mutateAsync: changeProjectGroup } = useMutation({
+    mutationFn: async () => {
+        if (!targetId.value) throw new Error('No target id');
+        const _projectGroupId = state.selectProjectGroup ? state.selectedProjectGroupIdList[0] : null;
+        if (isProject.value) {
+            await projectAPI.changeProjectGroup({
+                project_id: targetId.value,
+                project_group_id: _projectGroupId,
+            });
+        } else {
+            await projectGroupAPI.changeParentGroup({
+                project_group_id: targetId.value,
+                parent_group_id: _projectGroupId,
+            });
+        }
+    },
+    onSuccess: () => {
+        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_UPDATE_PROJECT_GROUP'), '');
+        if (isProject.value) {
+            queryClient.invalidateQueries({ queryKey: projectListQueryKey.value });
+            queryClient.invalidateQueries({ queryKey: [...projectQueryKey.value, targetId.value] });
+        } else {
+            queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
+            queryClient.invalidateQueries({ queryKey: [...projectGroupQueryKey.value, targetId.value] });
+        }
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_UPDATE_PROJECT_GROUP'));
+    },
+});
+
+/* Event */
+const handleChangeSelectProjectGroup = (value: boolean) => {
+    state.selectProjectGroup = value;
+};
+const handleSelectProjectGroup = (projectGroupTreeNodeData: ProjectTreeNodeData[]) => {
+    state.selectedProjectGroupIdList = projectGroupTreeNodeData.map((item) => item.id);
+};
+const handleConfirm = async () => {
+    await changeProjectGroup();
+    projectPageModalStore.closeMoveModal();
+};
+
+/* Watch */
+watch([visible, () => state.originParentGroupId], ([v, _id]) => {
+    if (!v) return;
+    if (_id) {
+        state.selectedProjectGroupIdList = [_id];
+        state.selectProjectGroup = true;
+    } else {
+        state.selectedProjectGroupIdList = [];
+        state.selectProjectGroup = false;
+    }
+}, { immediate: true });
+</script>
+
+<template>
+    <p-button-modal :header-title="$t('PROJECT.LANDING.MODAL_MOVE_PROJECT_GROUP.MODAL_MOVE_PROJECT_TITLE', { name: state.targetName })"
+                    centered
+                    size="sm"
+                    fade
+                    backdrop
+                    :disabled="!state.isValid"
+                    :visible="visible"
+                    @close="projectPageModalStore.closeMoveModal()"
+                    @cancel="projectPageModalStore.closeMoveModal()"
+                    @closed="projectPageModalStore.resetTarget()"
+                    @confirm="handleConfirm"
+    >
+        <template #body>
+            <p-radio-group direction="vertical">
+                <p-radio :value="true"
+                         :selected="state.selectProjectGroup"
+                         @change="handleChangeSelectProjectGroup"
+                >
+                    {{ $t('PROJECT.LANDING.MODAL_MOVE_PROJECT_GROUP.SELECT_A_PROJECT_GROUP_TO_MOVE_TO') }}
+                </p-radio>
+                <project-select-dropdown v-if="state.projectGroupSelectOptions.id"
+                                         :project-selectable="false"
+                                         class="project-select-dropdown"
+                                         project-group-selectable
+                                         :selected-project-ids="state.selectedProjectGroupIdList"
+                                         :disabled="!state.selectProjectGroup"
+                                         :project-group-select-options="state.projectGroupSelectOptions"
+                                         @select="handleSelectProjectGroup"
+                />
+                <p-radio :value="false"
+                         :selected="state.selectProjectGroup"
+                         @change="state.selectProjectGroup = $event"
+                >
+                    {{ isProject ? $t('PROJECT.LANDING.MODAL_MOVE_PROJECT_GROUP.NO_PROJECT_GROUP')
+                        : $t('PROJECT.LANDING.MODAL_MOVE_PROJECT_GROUP.NO_PARENT_GROUP') }}
+                </p-radio>
+            </p-radio-group>
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.project-select-dropdown {
+    padding-left: 1.25rem;
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectOverview.vue b/apps/web/src/services/project/v2/components/ProjectOverview.vue
new file mode 100644
index 0000000000..323d467a48
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectOverview.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div>overview</div>
+</template>
diff --git a/apps/web/src/services/project/v2/components/ProjectTabs.vue b/apps/web/src/services/project/v2/components/ProjectTabs.vue
deleted file mode 100644
index eae75c492f..0000000000
--- a/apps/web/src/services/project/v2/components/ProjectTabs.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script setup lang="ts">
-import { reactive } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import { PTab } from '@cloudforet/mirinae';
-import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
-
-import type { ProjectModel } from '@/api-clients/identity/project/schema/model';
-
-import { useProxyValue } from '@/common/composables/proxy-state';
-
-import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
-
-interface Props {
-    id?: string,
-    item?: ProjectModel,
-    tabs: TabItem[],
-    activeTab: string,
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    id: undefined,
-    item: undefined,
-    tabs: () => [],
-    // TODO: check routes
-    activeTab: PROJECT_ROUTE_V2._NAME,
-});
-
-const route = useRoute();
-const router = useRouter();
-
-const emit = defineEmits<{(e: 'update:active-tab', value: string): void;}>();
-
-const state = reactive({
-    proxyActiveTab: useProxyValue('activeTab', props, emit),
-});
-
-const onChangeTab = (activeTab: string) => {
-    if (activeTab === route.name) return;
-    const isDashboardTab = activeTab.startsWith('public-dash-');
-    const dashboardTabRoute = {
-        // TODO: check route
-        name: PROJECT_ROUTE_V2._NAME,
-        params: {
-            id: props.id as string,
-            dashboardId: activeTab,
-        },
-    };
-    router.replace(isDashboardTab ? dashboardTabRoute : { name: activeTab }).catch(() => {});
-};
-</script>
-
-<template>
-    <p-tab v-if="props.item"
-           :tabs="props.tabs"
-           :active-tab.sync="state.proxyActiveTab"
-           @change="onChangeTab"
-    >
-        <router-view />
-    </p-tab>
-</template>
-
-<style scoped lang="postcss">
-.edit-button {
-    margin-right: 0.5rem;
-}
-</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectTagsModal.vue b/apps/web/src/services/project/v2/components/ProjectTagsModal.vue
new file mode 100644
index 0000000000..e69b40ed57
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectTagsModal.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import {
+    computed, ref, watch,
+} from 'vue';
+
+import { useMutation } from '@tanstack/vue-query';
+import { cloneDeep } from 'lodash';
+
+import {
+    PButtonModal,
+} from '@cloudforet/mirinae';
+
+
+import type { Tags } from '@/api-clients/_common/schema/model';
+import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
+import type { ProjectGroupModel } from '@/api-clients/identity/project-group/schema/model';
+import { useProjectApi } from '@/api-clients/identity/project/composables/use-project-api';
+import type { ProjectModel } from '@/api-clients/identity/project/schema/model';
+import { i18n } from '@/translations';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import type { Tag } from '@/common/modules/tags/type';
+
+import ProjectTagsInputGroup from '@/services/project/v-shared/components/ProjectTagsInputGroup.vue';
+import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
+import { useProjectQuery } from '@/services/project/v2/composables/queries/use-project-query';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => projectPageModalStore.state.manageTagsModalVisible && !!projectPageModalStore.state.targetId);
+const isProject = computed(() => projectPageModalStore.state.targetType === 'project');
+const targetId = computed(() => projectPageModalStore.state.targetId);
+
+/* project */
+const { data: project, isLoading: projectLoading, setQueryData: setProjectQueryData } = useProjectQuery({
+    projectId: targetId,
+    enabled: computed(() => visible.value && isProject.value),
+});
+
+/* project group */
+const { data: projectGroup, isLoading: projectGroupLoading, setQueryData: setProjectGroupQueryData } = useProjectGroupQuery({
+    projectGroupId: targetId,
+    enabled: computed(() => visible.value && !isProject.value),
+});
+
+/* merged states */
+const isLoading = computed(() => {
+    if (isProject.value) return projectLoading.value;
+    return projectGroupLoading.value;
+});
+const tags = computed(() => {
+    if (isProject.value) {
+        return project.value?.tags ?? {};
+    }
+    return projectGroup.value?.tags ?? {};
+});
+
+
+/* Form */
+const newTags = ref<Tags>({});
+const isTagsValid = ref(false);
+watch([visible, tags], ([v, t]) => {
+    if (!v) return;
+    newTags.value = cloneDeep(t);
+});
+
+/* Mutation */
+const { projectAPI } = useProjectApi();
+const { projectGroupAPI } = useProjectGroupApi();
+const { mutate: updateTags, isPending: isUpdating } = useMutation({
+    mutationFn: (_newTags: Tag): Promise<ProjectGroupModel|ProjectModel> => {
+        if (!projectPageModalStore.state.targetId) throw new Error('Project ID is not defined');
+        if (isProject.value) {
+            return projectAPI.update({
+                project_id: projectPageModalStore.state.targetId,
+                tags: _newTags,
+            });
+        }
+        return projectGroupAPI.update({
+            project_group_id: projectPageModalStore.state.targetId,
+            tags: _newTags,
+        });
+    },
+    onSuccess: (data) => {
+        if (isProject.value) setProjectQueryData(data);
+        else setProjectGroupQueryData(data as ProjectGroupModel);
+        showSuccessMessage(i18n.t('COMMON.TAGS.ALT_S_UPDATE'), '');
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('COMMON.TAGS.ALT_E_UPDATE'));
+    },
+});
+
+/* Event Handler */
+const handleUpdateTags = (_tags: Tags) => {
+    newTags.value = _tags;
+};
+const handleSaveTags = async () => {
+    if (!isTagsValid.value) return;
+    await updateTags(newTags.value);
+    projectPageModalStore.closeManageTagsModal();
+};
+</script>
+
+<template>
+    <p-button-modal
+        class="project-tags-modal"
+        modal-body-id="project-tags"
+        :header-title="$t('PROJECT.DETAIL.UPDATE_TAG')"
+        :fade="true"
+        :backdrop="true"
+        size="sm"
+        :visible="visible"
+        :disabled="!isTagsValid"
+        :loading="isUpdating"
+        @close="projectPageModalStore.closeManageTagsModal()"
+        @cancel="projectPageModalStore.closeManageTagsModal()"
+        @closed="projectPageModalStore.resetTarget()"
+        @confirm="handleSaveTags"
+    >
+        <template #body>
+            <p class="text-paragraph-md text-gray-900 whitespace-pre-wrap">
+                {{ $t('PROJECT.DETAIL.UPDATE_TAG_DESC') }}
+            </p>
+            <project-tags-input-group :tags="newTags"
+                                      :disabled="isLoading"
+                                      show-validation
+                                      :is-valid.sync="isTagsValid"
+                                      @update-tags="handleUpdateTags"
+            />
+        </template>
+    </p-button-modal>
+</template>
diff --git a/apps/web/src/services/project/v2/composables/queries/use-project-query.ts b/apps/web/src/services/project/v2/composables/queries/use-project-query.ts
new file mode 100644
index 0000000000..5e50653df4
--- /dev/null
+++ b/apps/web/src/services/project/v2/composables/queries/use-project-query.ts
@@ -0,0 +1,45 @@
+import type { Ref } from 'vue';
+import { computed, isRef } from 'vue';
+
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
+
+import { useProjectApi } from '@/api-clients/identity/project/composables/use-project-api';
+
+export const useProjectQuery = ({
+    projectId,
+    enabled,
+}: {
+  projectId: Ref<string|undefined>;
+enabled?: Ref<boolean>|boolean;
+}) => {
+    const { projectAPI, projectQueryKey, projectListQueryKey } = useProjectApi();
+    const projectQuery = useQuery({
+        queryKey: computed(() => [...projectQueryKey.value, projectId.value]),
+        queryFn: () => projectAPI.get({ project_id: projectId.value as string }),
+        enabled: computed(() => {
+            if (!projectId.value) return false;
+            if (enabled === undefined) return true;
+            return isRef(enabled) ? enabled.value : enabled;
+        }),
+        staleTime: 1000 * 60 * 5, // 5 minutes
+        gcTime: 1000 * 60 * 1, // 1 minutes
+    });
+
+    const queryClient = useQueryClient();
+    const invalidateQuery = () => {
+        if (projectId.value) {
+            queryClient.invalidateQueries({ queryKey: [...projectQueryKey.value, projectId.value] });
+        }
+    };
+    const setQueryData = (newData: any) => {
+        queryClient.setQueryData([...projectQueryKey.value, projectId.value], newData);
+    };
+
+    const invalidateAllQueries = () => {
+        queryClient.invalidateQueries({ queryKey: projectListQueryKey.value });
+    };
+
+    return {
+        ...projectQuery, invalidateQuery, setQueryData, invalidateAllQueries,
+    };
+};
diff --git a/apps/web/src/services/project/v2/composables/queries/use-workspace-users-query.ts b/apps/web/src/services/project/v2/composables/queries/use-workspace-users-query.ts
new file mode 100644
index 0000000000..20009ca76b
--- /dev/null
+++ b/apps/web/src/services/project/v2/composables/queries/use-workspace-users-query.ts
@@ -0,0 +1,29 @@
+import type { Ref } from 'vue';
+
+import { useQuery } from '@tanstack/vue-query';
+
+import { useWorkspaceUserApi } from '@/api-clients/identity/workspace-user/composables/use-workspace-user-api';
+
+
+export const useWorkspaceUsersQuery = (ops?: {
+  enabled?: Ref<boolean>|boolean
+ }) => {
+    const { enabled } = ops ?? {};
+    const { workspaceUserAPI, workspaceUserListQueryKey } = useWorkspaceUserApi();
+    const { data, error } = useQuery({
+        queryKey: workspaceUserListQueryKey,
+        queryFn: async () => {
+            const res = await workspaceUserAPI.list({});
+            return res.results ?? [];
+        },
+        enabled,
+        staleTime: 1000 * 60 * 20, // 10 minutes
+        gcTime: 1000 * 60 * 10, // 10 minutes
+    });
+
+
+    return {
+        data,
+        error,
+    };
+};
diff --git a/apps/web/src/services/project/v2/composables/use-project-icons.ts b/apps/web/src/services/project/v2/composables/use-project-icons.ts
new file mode 100644
index 0000000000..bc80479455
--- /dev/null
+++ b/apps/web/src/services/project/v2/composables/use-project-icons.ts
@@ -0,0 +1,12 @@
+import type { TreeNodeIcon } from '@cloudforet/mirinae/types/data-display/tree/new-tree/type';
+
+import { indigo } from '@/styles/colors';
+
+export const useProjectIcons = () => {
+    const projectGroupIcon: TreeNodeIcon = { iconName: 'ic_folder-filled', iconColor: indigo[500] };
+    const projectIcon: TreeNodeIcon = 'ic_project-filled';
+    return {
+        projectGroupIcon,
+        projectIcon,
+    };
+};
diff --git a/apps/web/src/services/project/v2/composables/use-project-or-group-id.ts b/apps/web/src/services/project/v2/composables/use-project-or-group-id.ts
new file mode 100644
index 0000000000..ce2026f890
--- /dev/null
+++ b/apps/web/src/services/project/v2/composables/use-project-or-group-id.ts
@@ -0,0 +1,20 @@
+import { computed, type Ref } from 'vue';
+
+export const useProjectOrGroupId = (projectGroupOrProjectId: Ref<string|undefined>) => {
+    const projectGroupId = computed(() => {
+        if (projectGroupOrProjectId.value && projectGroupOrProjectId.value.startsWith('pg-')) {
+            return projectGroupOrProjectId.value;
+        }
+        return undefined;
+    });
+    const projectId = computed(() => {
+        if (projectGroupOrProjectId.value && projectGroupOrProjectId.value.startsWith('project-')) {
+            return projectGroupOrProjectId.value;
+        }
+        return undefined;
+    });
+    return {
+        projectGroupId,
+        projectId,
+    };
+};
diff --git a/apps/web/src/services/project/v2/composables/use-project-starred-tree.ts b/apps/web/src/services/project/v2/composables/use-project-starred-tree.ts
new file mode 100644
index 0000000000..e588abe8af
--- /dev/null
+++ b/apps/web/src/services/project/v2/composables/use-project-starred-tree.ts
@@ -0,0 +1,39 @@
+import type { Ref } from 'vue';
+import { computed } from 'vue';
+
+import type { TreeNodeIcon, TreeNodeRoutePredicate } from '@cloudforet/mirinae/types/data-display/tree/new-tree/type';
+
+import type { FavoriteItem } from '@/common/modules/favorites/favorite-button/type';
+import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import type { LSBItemProps } from '@/common/modules/navigations/new-lsb/type';
+
+import { indigo } from '@/styles/colors';
+
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+
+export const useProjectStarredTree = ({ favoriteItems }: { favoriteItems: Ref<FavoriteItem[]>}) => {
+    const projectFavoriteItems = computed(() => favoriteItems.value.filter((favoriteMenu) => {
+        if (favoriteMenu.itemType === FAVORITE_TYPE.PROJECT) return true;
+        if (favoriteMenu.itemType === FAVORITE_TYPE.PROJECT_GROUP) return true;
+        return false;
+    }));
+    const projectIcon: TreeNodeIcon = 'ic_project-filled';
+    const projectGroupIcon: TreeNodeIcon = { iconName: 'ic_folder-filled', iconColor: indigo[500] };
+    const predicate: TreeNodeRoutePredicate = () => false;
+    const starredItems = computed<LSBItemProps[]>(() => projectFavoriteItems.value.map((item) => ({
+        id: item.itemId,
+        name: item.label || item.name || '',
+        icon: item.itemType === FAVORITE_TYPE.PROJECT ? projectIcon : projectGroupIcon,
+        link: {
+            to: {
+                name: PROJECT_ROUTE_V2._NAME,
+                params: { projectGroupOrProjectId: item.itemId },
+            },
+            predicate,
+        },
+        favoriteOptions: { type: item.itemType, id: item.itemId },
+    })));
+    return {
+        starredItems,
+    };
+};
diff --git a/apps/web/src/services/project/v2/composables/use-role-formatters.ts b/apps/web/src/services/project/v2/composables/use-role-formatters.ts
new file mode 100644
index 0000000000..f1838944a9
--- /dev/null
+++ b/apps/web/src/services/project/v2/composables/use-role-formatters.ts
@@ -0,0 +1,23 @@
+import type { TranslateResult } from 'vue-i18n';
+
+import { useUserReferenceStore } from '@/store/reference/user-reference-store';
+
+import { useRoleFormatter } from '@/services/advanced/composables/refined-table-data';
+
+export const useRoleFormatters = () => {
+    const userReferenceStore = useUserReferenceStore();
+    const getRoleImage = (userId: string): string => {
+        const _roleType = userReferenceStore.getters.userItems[userId]?.data?.roleInfo?.role_type;
+        const _roleInfo = _roleType ? useRoleFormatter(_roleType) : undefined;
+        return _roleInfo?.image ?? '';
+    };
+    const getRoleName = (userId: string): TranslateResult => {
+        const _roleType = userReferenceStore.getters.userItems[userId]?.data?.roleInfo?.role_type;
+        const _roleInfo = _roleType ? useRoleFormatter(_roleType) : undefined;
+        return _roleInfo?.name ?? '';
+    };
+
+    return {
+        getRoleImage, getRoleName,
+    };
+};
diff --git a/apps/web/src/services/project/v2/composables/use-user-info.ts b/apps/web/src/services/project/v2/composables/use-user-info.ts
new file mode 100644
index 0000000000..1fb363f77b
--- /dev/null
+++ b/apps/web/src/services/project/v2/composables/use-user-info.ts
@@ -0,0 +1,39 @@
+import { computed } from 'vue';
+
+import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
+import DomainAdminImage from '@/assets/images/role/img_avatar_admin.png';
+import UserImage from '@/assets/images/role/img_avatar_no-role.png';
+import SystemAdminImage from '@/assets/images/role/img_avatar_system-admin.png';
+import WorkspaceMemberImage from '@/assets/images/role/img_avatar_workspace-member.png';
+import WorkspaceOwnerImage from '@/assets/images/role/img_avatar_workspace-owner.png';
+
+import { useUserReferenceStore } from '@/store/reference/user-reference-store';
+
+export const useUserInfo = () => {
+    const userReferenceStore = useUserReferenceStore();
+    const userItems = computed(() => userReferenceStore.getters.userItems);
+    const ROLE_INFO_MAP = {
+        [ROLE_TYPE.SYSTEM_ADMIN]: { icon: SystemAdminImage, label: 'System Admin' },
+        [ROLE_TYPE.DOMAIN_ADMIN]: { icon: DomainAdminImage, label: 'Domain Admin' },
+        [ROLE_TYPE.WORKSPACE_OWNER]: { icon: WorkspaceOwnerImage, label: 'Workspace Owner' },
+        [ROLE_TYPE.WORKSPACE_MEMBER]: { icon: WorkspaceMemberImage, label: 'Workspace Member' },
+        [ROLE_TYPE.USER]: { icon: UserImage, label: 'User' },
+    } as const;
+    const getUserIcon = (userId: string): string => {
+        const roleType = userItems[userId]?.data.roleInfo.role_type;
+        return ROLE_INFO_MAP[roleType]?.icon;
+    };
+    const getUserName = (userId: string): string|undefined => userItems[userId]?.name;
+    const getUserLabel = (userId: string): string|undefined => userItems[userId]?.label;
+    const getUserRole = (userId: string): string|undefined => {
+        const roleType = userItems[userId]?.data.roleInfo.role_type;
+        return ROLE_INFO_MAP[roleType]?.label;
+    };
+
+    return {
+        getUserIcon,
+        getUserName,
+        getUserLabel,
+        getUserRole,
+    };
+};
diff --git a/apps/web/src/services/project/v2/pages/ProjectDetailPage.vue b/apps/web/src/services/project/v2/pages/ProjectDetailPage.vue
deleted file mode 100644
index 847cec57ff..0000000000
--- a/apps/web/src/services/project/v2/pages/ProjectDetailPage.vue
+++ /dev/null
@@ -1,263 +0,0 @@
-<script setup lang="ts">
-import {
-    computed, onUnmounted, reactive, watch,
-} from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-import { isEmpty } from 'lodash';
-
-import {
-    PDataLoader,
-} from '@cloudforet/mirinae';
-import type { Route } from '@cloudforet/mirinae/types/navigation/breadcrumbs/type';
-import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
-
-import type { ProjectModel } from '@/api-clients/identity/project/schema/model';
-import { i18n } from '@/translations';
-
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceItem, ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import { useUserStore } from '@/store/user/user-store';
-
-import { referenceRouter } from '@/lib/reference/referenceRouter';
-
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
-import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
-
-import { BACKGROUND_COLOR } from '@/styles/colorsets';
-
-import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
-import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
-import ProjectHeader from '@/services/project/v2/components/ProjectHeader.vue';
-import ProjectTabs from '@/services/project/v2/components/ProjectTabs.vue';
-import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
-
-interface Props {
-    id?: string;
-}
-const props = defineProps<Props>();
-const route = useRoute();
-
-const gnbStore = useGnbStore();
-const allReferenceStore = useAllReferenceStore();
-const userWorkspaceStore = useUserWorkspaceStore();
-const dashboardStore = useDashboardStore();
-const userStore = useUserStore();
-
-/* Query */
-const {
-    publicDashboardList,
-} = useDashboardQuery();
-const {
-    publicFolderList,
-} = useDashboardFolderQuery();
-
-const storeState = reactive({
-    projectGroups: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-    currentWorkspaceId: computed(() => userWorkspaceStore.getters.currentWorkspaceId),
-    language: computed<string|undefined>(() => userStore.state.language),
-});
-const state = reactive({
-    // TODO: need to be updated by real data
-    item: computed<ProjectModel|undefined>(() => undefined),
-    projectGroupId: computed<string|undefined>(() => state.item?.project_group_id),
-    projectGroupInfo: computed<ProjectGroupReferenceItem>(() => storeState.projectGroups?.[state.projectGroupId] ?? {}),
-    pageNavigation: computed<Route[]>(() => {
-        const results: Route[] = [
-            { name: i18n.t('MENU.PROJECT') as string, to: { name: PROJECT_ROUTE_V2._NAME } },
-        ];
-        if (!isEmpty(state.projectGroupInfo)) {
-            results.push({
-                name: state.projectGroupInfo.name,
-                to: referenceRouter(state.projectGroupId, { resource_type: 'identity.ProjectGroup' }),
-            });
-        }
-        results.push({ name: state.item?.name });
-        return results;
-    }),
-    projectGroupMoveModalVisible: false,
-    favoriteOptions: computed<FavoriteOptions>(() => ({
-        type: FAVORITE_TYPE.PROJECT,
-        // TODO: need to be updated by real data
-        id: '',
-    })),
-});
-const singleItemTabState = reactive({
-    tabs: computed<TabItem[]>(() => [
-        {
-            // TODO: check route
-            name: PROJECT_ROUTE_V2._NAME,
-            label: i18n.t('PROJECT.DETAIL.TAB_SUMMARY'),
-        },
-        ...(singleItemTabState.dashboardTabs.length
-            ? [
-                {
-                    name: 'divider',
-                    tabType: 'divider',
-                },
-                ...singleItemTabState.dashboardTabs,
-            ]
-            : []),
-    ]),
-    dashboardTabs: computed(() => {
-        const projectDashboardItems = publicDashboardList.value
-            .filter((d) => d.version !== '1.0' && d.shared && d.scope === 'PROJECT');
-        const projectFolderItems = publicFolderList.value
-            .filter((d) => d.shared && d.scope === 'PROJECT');
-
-        const folderTabs = projectFolderItems.map((folder) => ({
-            name: folder.folder_id,
-            label: folder.name,
-            tabType: 'folder',
-            icon: 'ic_folder',
-            subItems: projectDashboardItems.filter((dashboard) => dashboard.folder_id === folder.folder_id).map((dashboard) => ({
-                name: dashboard.dashboard_id,
-                label: dashboard.name,
-                icon: 'ic_service_dashboard',
-            })),
-        }));
-        const dashboardTabs = projectDashboardItems.filter((dashboard) => !dashboard.folder_id).map((dashboard) => ({
-            name: dashboard.dashboard_id,
-            label: dashboard.name,
-            icon: 'ic_service_dashboard',
-        }));
-        return [
-            ...folderTabs,
-            ...dashboardTabs,
-        ];
-    }),
-    // TODO: check route
-    activeTab: PROJECT_ROUTE_V2._NAME,
-});
-
-/* Watchers */
-// TODO: check if it is needed
-// watch(() => projectDetailPageState.projectId, async (projectId) => {
-//     if (projectId) {
-//         await projectDetailPageStore.getProject(projectId);
-//     }
-// });
-watch(() => route.name, (routeName) => {
-    const flattenTabs = singleItemTabState.tabs.reduce((acc, tab) => {
-        if (tab?.subItems) {
-            acc.push(...tab.subItems);
-        } else {
-            acc.push(tab);
-        }
-        return acc;
-    }, [] as TabItem[]);
-    const exactRoute = route.matched.find((d) => flattenTabs.find((tab) => tab.name === d.name));
-    // TODO: check route
-    if (routeName === PROJECT_ROUTE_V2._NAME) {
-        singleItemTabState.activeTab = route.params.dashboardId;
-    } else {
-        // TODO: check route
-        singleItemTabState.activeTab = exactRoute?.name || PROJECT_ROUTE_V2._NAME;
-    }
-}, { immediate: true });
-// TODO: check if it is needed
-// watch([
-//     () => props.id,
-//     () => appContextStore.getters.globalGrantLoading,
-// ], ([id, globalGrantLoading]) => {
-//     if (!globalGrantLoading) projectDetailPageStore.setProjectId(id);
-// }, { immediate: true });
-watch([() => singleItemTabState.activeTab, () => state.item], () => {
-    gnbStore.setBreadcrumbs(state.pageNavigation);
-});
-// TODO: check if it is needed
-// watch(() => projectDetailPageState.projectId, (projectId) => {
-//     gnbStore.setId(projectId);
-// }, { immediate: true });
-watch(() => state.favoriteOptions, (favoriteOptions) => {
-    gnbStore.setFavoriteItemId(favoriteOptions);
-}, { immediate: true });
-
-onUnmounted(() => {
-    dashboardStore.reset();
-});
-</script>
-
-<template>
-    <div class="project-detail-page">
-        <project-header :id="props.id" />
-        <!-- TODO: bind loading with the real state -->
-        <p-data-loader class="detail-tab-content"
-                       :loading="false"
-                       :loader-backdrop-color="BACKGROUND_COLOR"
-        >
-            <project-tabs :id="props.id"
-                          :item="state.item"
-                          :tabs="singleItemTabState.tabs"
-                          :active-tab.sync="singleItemTabState.activeTab"
-            />
-        </p-data-loader>
-    </div>
-</template>
-
-<style lang="postcss" scoped>
-.project-detail-page {
-    height: 100%;
-    .detail-tab-content {
-
-        margin-top: 1rem;
-        .page-inner {
-            height: 100%;
-            max-width: 85.5rem;
-        }
-        .help-tap {
-            padding-top: 2rem;
-            padding-right: 1rem;
-            padding-left: 1rem;
-            .plugin-wrapper {
-                @apply flex;
-                gap: 1rem;
-                .plugin-info-wrapper {
-                    flex: 1;
-                    .plugin-info {
-                        @apply flex items-center;
-                        gap: 0.125rem;
-                        .name {
-                            @apply text-label-xl font-bold;
-                        }
-                    }
-                    .desc {
-                        @apply text-label-sm text-gray-600;
-                    }
-                }
-            }
-            .docs-wrapper {
-                margin-top: 1.125rem;
-                .empty {
-                    @apply bg-violet-100;
-                    padding-top: 4.125rem;
-                    padding-bottom: 4.125rem;
-                    border-radius: 0.375rem;
-                }
-            }
-            .markdown {
-                @apply bg-violet-100;
-                padding: 1rem;
-                border-radius: 0.375rem;
-            }
-        }
-    }
-}
-
-/* custom design-system component - p-data-loader */
-:deep(.p-data-loader) {
-    .data-wrapper {
-        overflow-y: unset;
-    }
-    .col-type {
-        display: inline-flex;
-        align-items: center;
-        .name {
-            margin-top: -0.125rem;
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
index 692183a69f..3108da0033 100644
--- a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
+++ b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
@@ -1,277 +1,132 @@
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core';
 import {
-    computed, onUnmounted, reactive, ref, watch,
+    computed,
+    toRef,
+    onMounted,
+    ref,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
+import { useRouter } from 'vue-router/composables';
 
-import {
-    PHeading, PButton, PContextMenu, PIconButton, PHeadingLayout,
-} from '@cloudforet/mirinae';
-import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
-
-import { i18n } from '@/translations';
-
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
-import { useUserStore } from '@/store/user/user-store';
-
-import { MENU_ID } from '@/lib/menu/config';
-
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
-import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
+import { nextTick } from 'process';
 
-import { indigo, peacock } from '@/styles/colors';
+import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
+import ProjectAndGroupListPanel from '@/services/project/v2/components/ProjectAndGroupListPanel.vue';
+import ProjectHeader from '@/services/project/v2/components/ProjectHeader.vue';
+import { useProjectQuery } from '@/services/project/v2/composables/queries/use-project-query';
+import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
-import ProjectGroupMemberManagementModal from '@/services/project/v-shared/components/ProjectGroupMemberManagementModal.vue';
-import ProjectMainProjectGroupMoveModal from '@/services/project/v-shared/components/ProjectMainProjectGroupMoveModal.vue';
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
-import { useProjectTreeStore } from '@/services/project/v-shared/stores/project-tree-store';
-import ProjectMain from '@/services/project/v2/components/ProjectMain.vue';
-import ProjectMainDeleteModal from '@/services/project/v2/components/ProjectMainDeleteModal.vue';
 
-
-const gnbStore = useGnbStore();
-// const gnbGetters = gnbStore.getters;
-const allReferenceStore = useAllReferenceStore();
-const userStore = useUserStore();
-const projectTreeStore = useProjectTreeStore();
-const projectPageStore = useProjectPageStore();
-const projectPageState = projectPageStore.state;
-
-const menuRef = ref<any|null>(null);
-const targetRef = ref<HTMLElement | null>(null);
-const route = useRoute();
-
-const storeState = reactive({
-    userId: computed<string|undefined>(() => userStore.state.userId),
-    groupName: computed(() => storeState.projectGroups[state.currentProjectGroupId]?.name),
-    projects: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
-    projectGroups: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
+/* modals */
+const isModalLoadReady = ref(false);
+onMounted(() => {
+    isModalLoadReady.value = true;
 });
-
-const state = reactive({
-    currentProjectGroupId: computed(() => route.params.projectGroupId),
-    createMenuVisible: false,
-    createDropdownMenuItems: computed<SelectDropdownMenuItem[]>(() => ([
-        {
-            name: 'project',
-            label: i18n.t('PROJECT.LANDING.PROJECT') as string,
-            icon: 'ic_document-filled',
-            iconColor: peacock[600],
-        },
-        {
-            name: 'projectGroup',
-            label: i18n.t('PROJECT.LANDING.PROJECT_GROUP') as string,
-            icon: 'ic_folder-filled',
-            iconColor: indigo[500],
-        },
-    ])),
-    projectGroupModalVisible: false,
-    favoriteOptions: computed<FavoriteOptions>(() => ({
-        type: route.params.projectGroupId ? FAVORITE_TYPE.PROJECT_GROUP : FAVORITE_TYPE.MENU,
-        id: route.params.projectGroupId ? state.currentProjectGroupId : MENU_ID.PROJECT,
-    })),
-    projectGroupMemberManagementModalVisible: false,
-    projectGroupMemberCount: computed<number|undefined>(() => storeState.projectGroups?.[state.currentProjectGroupIds]?.data.users?.length),
+const ProjectDetailTab = () => import('@/services/project/v2/components/ProjectDetailTab.vue');
+const ProjectGroupMemberManagementModal = () => import('@/services/project/v2/components/ProjectGroupMemberManagementModal.vue');
+const ProjectMemberManagementModal = () => import('@/services/project/v2/components/ProjectMemberManagementModal.vue');
+const ProjectDeleteModal = () => import('@/services/project/v2/components/ProjectDeleteModal.vue');
+const ProjectMoveModal = () => import('@/services/project/v2/components/ProjectMoveModal.vue');
+const ProjectMemberInviteModal = () => import('@/services/project/v2/components/ProjectMemberInviteModal.vue');
+const ProjectTagsModal = () => import('@/services/project/v2/components/ProjectTagsModal.vue');
+const ProjectFormModal = () => import('@/services/project/v2/components/ProjectFormModal.vue');
+const ProjectGroupFormModal = () => import('@/services/project/v2/components/ProjectGroupFormModal.vue');
+
+const props = defineProps<{
+    projectGroupOrProjectId?: string;
+    dashboardId?: string;
+}>();
+
+/* project or group */
+const { projectGroupId, projectId } = useProjectOrGroupId(toRef(props, 'projectGroupOrProjectId'));
+
+
+/* modals */
+const projectPageModelStore = useProjectPageModalStore();
+
+/* target parent group id */
+const { data: project } = useProjectQuery({
+    projectId,
+    enabled: computed(() => !!projectId),
 });
-
-onClickOutside(menuRef, () => {
-    state.createMenuVisible = false;
+const { data: projectGroup } = useProjectGroupQuery({
+    projectGroupId,
+    enabled: computed(() => !!projectGroupId),
+});
+const targetParentGroupId = computed<string|undefined>(() => {
+    if (project.value) return project.value.project_group_id;
+    if (projectGroup.value) return projectGroup.value.project_group_id;
+    return undefined;
 });
 
-/* Event */
-const handleClickProjectGroupEditButton = () => {
-    projectPageStore.setProjectGroupFormUpdateMode(true);
-    projectPageStore.setProjectGroupFormVisible(true);
-};
-const handleClickProjectGroupDeleteButton = () => {
-    projectPageStore.setProjectDeleteModalVisible(true);
-};
-const handleOpenProjectGroupMoveModal = () => {
-    projectPageStore.setProjectGroupMoveModalVisible(true);
-};
-
-/* Handling Forms */
-const handleClickAddProjectGroupMember = () => {
-    state.projectGroupMemberManagementModalVisible = true;
-};
-const handleClickCreateButton = () => {
-    state.createMenuVisible = !state.createMenuVisible;
-};
-const handleSelectCreateMenu = (item: SelectDropdownMenuItem) => {
-    projectPageStore.setCurrentSelectedProjectGroupId(state.currentProjectGroupId);
-    if (item.name === 'project') {
-        projectPageStore.setProjectFormModalVisible(true);
-    } else if (item.name === 'projectGroup') {
-        projectPageStore.setProjectGroupFormUpdateMode(false);
-        projectPageStore.setProjectGroupFormVisible(true);
-    }
-};
-const handleUpdateProjectGroupMoveModal = (visible: boolean) => {
-    projectPageStore.setProjectGroupMoveModalVisible(visible);
-    if (projectPageState.currentSelectedProjectGroupId && !visible) {
-        projectPageStore.setCurrentSelectedProjectGroupId(undefined);
-    }
-    if (projectPageState.currentSelectedProjectId && !visible) {
-        projectPageStore.setCurrentSelectedProjectId(undefined);
-    }
-};
-const handleUpdateDeleteModalVisible = (visible: boolean) => {
-    projectPageStore.setProjectDeleteModalVisible(visible);
-    if (projectPageState.currentSelectedProjectGroupId && !visible) {
-        projectPageStore.setCurrentSelectedProjectGroupId(undefined);
-    }
-    if (projectPageState.currentSelectedProjectId && !visible) {
-        projectPageStore.setCurrentSelectedProjectId(undefined);
+/* after deleted */
+const router = useRouter();
+const handleDeleted = () => {
+    const id = projectPageModelStore.state.targetId;
+    if (id && (id === projectGroupId.value || id === projectId.value)) {
+        router.replace({
+            name: PROJECT_ROUTE_V2._NAME,
+        });
     }
 };
 
-const handleRefreshTree = () => {
-    projectTreeStore.refreshProjectTree();
+/* after created */
+const handleCreated = (id: string) => {
+    router.replace({
+        name: PROJECT_ROUTE_V2._NAME,
+        params: {
+            projectGroupOrProjectId: id,
+        },
+    });
 };
 
-watch(() => state.favoriteOptions, (favoriteOptions) => {
-    gnbStore.setFavoriteItemId(favoriteOptions);
-    if (!route.params.projectGroupId) {
-        gnbStore.setBreadcrumbs([]);
-    }
-}, { immediate: true });
-
-onUnmounted(() => {
-    projectTreeStore.disposeProjectTree();
+/* mounted */
+const mounted = ref(false);
+onMounted(() => {
+    nextTick(() => {
+        mounted.value = true;
+    });
 });
+
 </script>
 
 <template>
-    <div class="page-wrapper">
-        <p-heading-layout class="mb-6">
-            <template #heading>
-                <p-heading :title="state.currentProjectGroupId ? storeState.projectGroups[state.currentProjectGroupId]?.name : $t('PROJECT.LANDING.ALL_PROJECTS')">
-                    <template #title-right-extra>
-                        <div v-if="state.currentProjectGroupId"
-                             class="title-right-button-wrapper"
-                        >
-                            <template v-if="projectPageState.isWorkspaceOwner">
-                                <p-icon-button name="ic_edit-text"
-                                               style-type="transparent"
-                                               @click="handleClickProjectGroupEditButton"
-                                />
-                                <p-icon-button name="ic_move"
-                                               style-type="transparent"
-                                               @click="handleOpenProjectGroupMoveModal"
-                                />
-                                <p-icon-button name="ic_delete"
-                                               style-type="transparent"
-                                               @click="handleClickProjectGroupDeleteButton"
-                                />
-                            </template>
-                        </div>
-                    </template>
-                </p-heading>
-            </template>
-            <template #extra>
-                <p-button v-if="state.currentProjectGroupId"
-                          style-type="tertiary"
-                          icon-left="ic_member"
-                          @click="handleClickAddProjectGroupMember"
-                >
-                    <span>{{ $t('PROJECT.LANDING.GROUP_MEMBER') }}</span>
-                    <span v-if="state.projectGroupMemberCount"
-                          class="pl-1"
-                    >({{ state.projectGroupMemberCount }})</span>
-                </p-button>
-                <div v-if="projectPageState.isWorkspaceOwner"
-                     class="create-button-wrapper"
-                >
-                    <p-button ref="targetRef"
-                              icon-left="ic_plus_bold"
-                              @click="handleClickCreateButton"
-                    >
-                        {{ $t('PROJECT.LANDING.CREATE') }}
-                    </p-button>
-                    <p-context-menu v-show="state.createMenuVisible"
-                                    ref="menuRef"
-                                    class="create-context-menu"
-                                    no-select-indication
-                                    :menu="state.createDropdownMenuItems"
-                                    @select="handleSelectCreateMenu"
-                    />
-                </div>
-            </template>
-        </p-heading-layout>
-        <project-main />
-        <project-group-member-management-modal v-if="state.projectGroupMemberManagementModalVisible"
-                                               :visible.sync="state.projectGroupMemberManagementModalVisible"
-                                               :project-group-id="state.currentProjectGroupId"
+    <div class="flex flex-col w-full h-full">
+        <project-header :project-id="projectId"
+                        :project-group-id="projectGroupId"
         />
-        <project-main-delete-modal v-if="projectPageState.projectDeleteModalVisible"
-                                   :visible="projectPageState.projectDeleteModalVisible"
-                                   :is-project="!!projectPageState.currentSelectedProjectId"
-                                   :target-id="projectPageState.currentSelectedProjectId || projectPageState.currentSelectedProjectGroupId || state.currentProjectGroupId"
-                                   :skip-redirect="!!projectPageState.currentSelectedProjectId || !!projectPageState.currentSelectedProjectGroupId"
-                                   @update:visible="handleUpdateDeleteModalVisible"
-                                   @confirm="handleRefreshTree"
-        />
-        <project-main-project-group-move-modal v-if="projectPageState.projectGroupMoveModalVisible"
-                                               :visible="projectPageState.projectGroupMoveModalVisible"
-                                               :is-project="!!projectPageState.currentSelectedProjectId"
-                                               :target-id="projectPageState.currentSelectedProjectId || projectPageState.currentSelectedProjectGroupId || state.currentProjectGroupId"
-                                               @update:visible="handleUpdateProjectGroupMoveModal"
-                                               @confirm="handleRefreshTree"
+        <keep-alive>
+            <project-and-group-list-panel v-if="mounted"
+                                          :key="props.projectGroupOrProjectId ?? 'all'"
+                                          class="mt-4"
+                                          :target-id="props.projectGroupOrProjectId"
+                                          :target-type="props.projectGroupOrProjectId ? (projectId ? 'project' : 'projectGroup') : undefined"
+            />
+        </keep-alive>
+        <project-detail-tab v-if="mounted && props.projectGroupOrProjectId"
+                            class="mt-6"
+                            :project-id="props.projectGroupOrProjectId"
+                            :dashboard-id="props.dashboardId"
         />
+
+        <template v-if="isModalLoadReady">
+            <project-group-member-management-modal v-if="projectPageModelStore.state.manageMemberModalVisible && projectPageModelStore.state.targetType === 'projectGroup'" />
+            <project-member-management-modal v-if="projectPageModelStore.state.manageMemberModalVisible && projectPageModelStore.state.targetType === 'project'" />
+            <project-delete-modal v-if="projectPageModelStore.state.deleteModalVisible"
+                                  @deleted="handleDeleted"
+            />
+            <project-move-modal v-if="projectPageModelStore.state.moveModalVisible" />
+            <project-member-invite-modal v-if="projectPageModelStore.state.inviteMemberModalVisible" />
+            <project-tags-modal v-if="projectPageModelStore.state.manageTagsModalVisible" />
+            <project-form-modal v-if="projectPageModelStore.state.projectFormModalVisible && projectPageModelStore.state.targetType === 'project'"
+                                :target-parent-group-id="targetParentGroupId"
+                                @created="handleCreated"
+            />
+            <project-group-form-modal v-if="projectPageModelStore.state.projectFormModalVisible && projectPageModelStore.state.targetType === 'projectGroup'"
+                                      :target-parent-group-id="targetParentGroupId"
+                                      @created="handleCreated"
+            />
+        </template>
     </div>
 </template>
-
-<style lang="postcss" scoped>
-/* right contents */
-.page-wrapper {
-    @apply flex flex-col w-full h-full;
-}
-
-.title-right-button-wrapper {
-    display: inline-flex;
-    align-items: center;
-}
-.create-context-menu {
-    @apply absolute;
-    top: 100%;
-    right: 0;
-    z-index: 10;
-    width: max-content;
-}
-.create-button-wrapper {
-    @apply relative inline-block;
-    height: 2rem;
-}
-
-.parents-info {
-    @apply flex items-center text-gray-900;
-    min-height: 1rem;
-    margin-bottom: 0.25rem;
-    .group-name {
-        @apply inline-flex items-center text-xs;
-    }
-    .text {
-        @apply opacity-50;
-        &.link {
-            @apply cursor-pointer;
-            &:hover {
-                @apply opacity-100;
-            }
-        }
-    }
-}
-
-.card-container {
-    @apply flex-grow;
-}
-
-/* custom design-system component - p-heading */
-:deep(.p-heading) {
-    @apply border-none;
-    padding-bottom: 0;
-}
-</style>
diff --git a/apps/web/src/services/project/v2/routes/route-constant.ts b/apps/web/src/services/project/v2/routes/route-constant.ts
index 60e0a13162..e8d42084bb 100644
--- a/apps/web/src/services/project/v2/routes/route-constant.ts
+++ b/apps/web/src/services/project/v2/routes/route-constant.ts
@@ -2,4 +2,5 @@ import { MENU_ID } from '@/lib/menu/config';
 
 export const PROJECT_ROUTE_V2 = Object.freeze({
     _NAME: MENU_ID.PROJECT,
+    DETAIL: `${MENU_ID.PROJECT}-detail`,
 });
diff --git a/apps/web/src/services/project/v2/routes/routes.ts b/apps/web/src/services/project/v2/routes/routes.ts
index ecef06d3c0..096122f53c 100644
--- a/apps/web/src/services/project/v2/routes/routes.ts
+++ b/apps/web/src/services/project/v2/routes/routes.ts
@@ -9,6 +9,7 @@ const ProjectContainer = () => import('@/services/project/v2/ProjectContainer.vu
 
 const ProjectMainPage = () => import('@/services/project/v2/pages/ProjectMainPage.vue');
 
+
 const projectRoutes: RouteConfig = {
     path: 'project',
     meta: {
@@ -18,7 +19,7 @@ const projectRoutes: RouteConfig = {
     component: ProjectContainer,
     children: [
         {
-            path: ':projectGroupOrProjectId?',
+            path: ':projectGroupOrProjectId?/:dashboardId?',
             name: PROJECT_ROUTE_V2._NAME,
             meta: {
                 menuId: MENU_ID.PROJECT,
diff --git a/apps/web/src/services/project/v2/stores/project-list-store.ts b/apps/web/src/services/project/v2/stores/project-list-store.ts
new file mode 100644
index 0000000000..6254829010
--- /dev/null
+++ b/apps/web/src/services/project/v2/stores/project-list-store.ts
@@ -0,0 +1,88 @@
+import { computed } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import type { ProjectGroupReferenceItem } from '@/store/reference/project-group-reference-store';
+import { useProjectGroupReferenceStore } from '@/store/reference/project-group-reference-store';
+import type { ProjectReferenceItem } from '@/store/reference/project-reference-store';
+import { useProjectReferenceStore } from '@/store/reference/project-reference-store';
+
+export interface ProjectData extends ProjectReferenceItem {
+    type: 'PROJECT';
+}
+
+export interface ProjectGroupData extends ProjectGroupReferenceItem {
+    type: 'PROJECT_GROUP';
+}
+
+export const useProjectListStore = defineStore('project-list', () => {
+    const projectGroupReferenceStore = useProjectGroupReferenceStore();
+    const projectReferenceStore = useProjectReferenceStore();
+
+    /* loading state */
+    const isLoading = computed(() => !projectGroupReferenceStore.state.items || !projectReferenceStore.state.items);
+
+    /* cached data */
+    const projectGroupMap = computed(() => projectGroupReferenceStore.getters.projectGroupItems);
+    const projectGroups = computed<ProjectGroupReferenceItem[]>(() => Object.values(projectGroupMap.value));
+    const projectMap = computed(() => projectReferenceStore.getters.projectItems);
+    const projects = computed<ProjectReferenceItem[]>(() => Object.values(projectMap.value));
+
+    /* filtered data by parent group */
+    const getItemsByParentGroupId = computed(() => {
+        const pgList = projectGroups.value;
+        const prjList = projects.value;
+        return (parentGroupId?: string) => {
+            const items: Array<ProjectData|ProjectGroupData> = [];
+
+            pgList.forEach((group) => {
+                const parentId = group.data.parentGroupInfo?.id;
+                if (parentId !== parentGroupId) return;
+                items.push({
+                    ...group,
+                    type: 'PROJECT_GROUP',
+                });
+            });
+
+            prjList.forEach((project) => {
+                const groupId = project.data.groupInfo?.id;
+                if (groupId !== parentGroupId) return;
+                items.push({
+                    ...project,
+                    type: 'PROJECT',
+                });
+            });
+
+            return items;
+        };
+    });
+
+    /* filtered projects by group */
+    const getProjectsByGroupId = computed(() => {
+        const prjList = projects.value;
+        return (groupId?: string) => {
+            if (!groupId) return prjList;
+            return prjList.filter((project) => project.data.groupInfo?.id === groupId);
+        };
+    });
+
+    /* filtered project groups by parent */
+    const getProjectGroupsByParentId = computed(() => {
+        const pgList = projectGroups.value;
+        return (parentId?: string) => {
+            if (!parentId) return pgList;
+            return pgList.filter((group) => group.data.parentGroupInfo?.id === parentId);
+        };
+    });
+
+    return {
+        isLoading,
+        projectGroups,
+        projects,
+        projectMap,
+        projectGroupMap,
+        getItemsByParentGroupId,
+        getProjectsByGroupId,
+        getProjectGroupsByParentId,
+    };
+});
diff --git a/apps/web/src/services/project/v2/stores/project-page-modal-store.ts b/apps/web/src/services/project/v2/stores/project-page-modal-store.ts
new file mode 100644
index 0000000000..278cce665d
--- /dev/null
+++ b/apps/web/src/services/project/v2/stores/project-page-modal-store.ts
@@ -0,0 +1,123 @@
+import { reactive } from 'vue';
+
+import { defineStore } from 'pinia';
+
+export const useProjectPageModalStore = defineStore('project-page-modal', () => {
+    const state = reactive({
+        manageMemberModalVisible: false,
+        deleteModalVisible: false,
+        moveModalVisible: false,
+        inviteMemberModalVisible: false,
+        manageTagsModalVisible: false,
+        projectFormModalVisible: false,
+        targetId: '' as string|undefined,
+        targetType: undefined as 'project'|'projectGroup'|undefined,
+    });
+
+    const actions = {
+        // manage member
+        openProjectGroupManageMemberModal(targetProjectGroupId: string) {
+            state.targetId = targetProjectGroupId;
+            state.targetType = 'projectGroup';
+            state.manageMemberModalVisible = true;
+        },
+        openProjectManageMemberModal(targetProjectId: string) {
+            state.targetId = targetProjectId;
+            state.targetType = 'project';
+            state.manageMemberModalVisible = true;
+        },
+        closeManageMemberModal() {
+            state.manageMemberModalVisible = false;
+        },
+        // delete project
+        openProjectGroupDeleteModal(targetProjectGroupId: string) {
+            state.targetId = targetProjectGroupId;
+            state.targetType = 'projectGroup';
+            state.deleteModalVisible = true;
+        },
+        openProjectDeleteModal(targetProjectId: string) {
+            state.targetId = targetProjectId;
+            state.targetType = 'project';
+            state.deleteModalVisible = true;
+        },
+        closeDeleteModal() {
+            state.deleteModalVisible = false;
+        },
+        // move project
+        openProjectGroupMoveModal(targetProjectGroupId: string) {
+            state.targetId = targetProjectGroupId;
+            state.targetType = 'projectGroup';
+            state.moveModalVisible = true;
+        },
+        openProjectMoveModal(targetProjectId: string) {
+            state.targetId = targetProjectId;
+            state.targetType = 'project';
+            state.moveModalVisible = true;
+        },
+        closeMoveModal() {
+            state.moveModalVisible = false;
+        },
+        // invite member
+        openProjectGroupInviteMemberModal(targetProjectGroupId: string) {
+            state.targetId = targetProjectGroupId;
+            state.targetType = 'projectGroup';
+            state.inviteMemberModalVisible = true;
+        },
+        openProjectInviteMemberModal(targetProjectId: string) {
+            state.targetId = targetProjectId;
+            state.targetType = 'project';
+            state.inviteMemberModalVisible = true;
+        },
+        closeInviteMemberModal() {
+            state.inviteMemberModalVisible = false;
+        },
+        // manage tags
+        openProjectGroupManageTagsModal(targetProjectGroupId: string) {
+            state.targetId = targetProjectGroupId;
+            state.targetType = 'projectGroup';
+            state.manageTagsModalVisible = true;
+        },
+        openProjectManageTagsModal(targetProjectId: string) {
+            state.targetId = targetProjectId;
+            state.targetType = 'project';
+            state.manageTagsModalVisible = true;
+        },
+        closeManageTagsModal() {
+            state.manageTagsModalVisible = false;
+        },
+        // form
+        openCreateProjectGroupFormModal() {
+            state.targetId = undefined;
+            state.targetType = 'projectGroup';
+            state.projectFormModalVisible = true;
+        },
+        openCreateProjectFormModal() {
+            state.targetId = undefined;
+            state.targetType = 'project';
+            state.projectFormModalVisible = true;
+        },
+        openEditProjectGroupFormModal(targetProjectGroupId: string) {
+            state.targetId = targetProjectGroupId;
+            state.targetType = 'projectGroup';
+            state.projectFormModalVisible = true;
+        },
+        openEditProjectFormModal(targetProjectId: string) {
+            state.targetId = targetProjectId;
+            state.targetType = 'project';
+            state.projectFormModalVisible = true;
+        },
+        closeFormModal() {
+            state.projectFormModalVisible = false;
+        },
+        // overal
+        resetTarget() {
+            state.targetId = undefined;
+            state.targetType = undefined;
+        },
+    };
+
+    return {
+        state,
+        ...actions,
+    };
+});
diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index e396c18fd8..035ca171eb 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -20278,6 +20278,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>CREATE</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>DELETE</name>
                                 <definition_loaded>false</definition_loaded>
@@ -97308,6 +97329,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>RENAME</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
                             <concept_node>
                                 <name>REPORT_CANCEL</name>
                                 <definition_loaded>false</definition_loaded>
@@ -99147,6 +99189,32 @@
                             </concept_node>
                         </children>
                     </folder_node>
+                    <folder_node>
+                        <name>LADING</name>
+                        <children>
+                            <concept_node>
+                                <name>GROUPS_AND_PROJECTS</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
+                        </children>
+                    </folder_node>
                     <folder_node>
                         <name>LANDING</name>
                         <children>
@@ -100493,6 +100561,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>PROJECTS</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>PROJECT_GROUP</name>
                                 <definition_loaded>false</definition_loaded>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index c1cc4efc14..6b1116d7fb 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -1066,6 +1066,7 @@
 			"ADD": "Add",
 			"CANCEL": "Cancel",
 			"CONFIRM": "Confirm",
+			"CREATE": "Create",
 			"DELETE": "Delete",
 			"DONE": "Done",
 			"DOWNLOAD": "Download",
@@ -5275,6 +5276,7 @@
 			"PROJECT_ALERT_ACTIVATION_DESC_2": "Click ‘Activate Alert’ to receive integrated external events or manage of this project.",
 			"PROJECT_ID": "Project ID:",
 			"PROJECT_MEMBER_LABEL": "Labels",
+			"RENAME": "Rename",
 			"REPORT_CANCEL": "Cancel",
 			"REPORT_DESC": "SpaceONE offers monthly report based on this project. We will update more content soon.",
 			"REPORT_DOWNLOAD_FILE_DESC": "* Only PDF, PPTX formats are avilable.",
@@ -5367,6 +5369,9 @@
 			"TITLE_INFO_MESSAGE": "Event rules are executed in ascending order.",
 			"URGENCY": "Urgency"
 		},
+		"LADING": {
+			"GROUPS_AND_PROJECTS": "Project Groups and Projects"
+		},
 		"LANDING": {
 			"ACTION_DELETE_THIS_GROUP": "Delete selected group",
 			"ACTION_EDIT_GROUP_NAME": "Edit group name",
@@ -5439,6 +5444,7 @@
 			"PLACE_HOLDER_PROJECT": "Project",
 			"PLACE_HOLDER_SHOW_MORE": "more",
 			"PROJECT": "Project",
+			"PROJECTS": "Projects",
 			"PROJECT_GROUP": "Project Group",
 			"PROJECT_GROUPS": "Project Groups",
 			"PROJECT_GROUP_MEMBER": "Project Group Member",
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index 516545a913..f0c394bbc7 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -1066,6 +1066,7 @@
 			"ADD": "追加",
 			"CANCEL": "キャンセル",
 			"CONFIRM": "確認",
+			"CREATE": "生成",
 			"DELETE": "削除",
 			"DONE": "完了",
 			"DOWNLOAD": "ダウンロード",
@@ -5275,6 +5276,7 @@
 			"PROJECT_ALERT_ACTIVATION_DESC_2": "統合された外部イベントを受信するかこのプロジェクトを管理のためには「通知有効化」をクリックしてください。",
 			"PROJECT_ID": "プロジェクトID：",
 			"PROJECT_MEMBER_LABEL": "ラベル",
+			"RENAME": "",
 			"REPORT_CANCEL": "キャンセル",
 			"REPORT_DESC": "SpaceONEは、プロジェクトベースの月次レポートを提供します。今後提供するコンテンツを追加する予定です",
 			"REPORT_DOWNLOAD_FILE_DESC": "*提供するファイル形式（PDF、PPTX、CSV）",
@@ -5367,6 +5369,9 @@
 			"TITLE_INFO_MESSAGE": "イベントルールは昇順で実行されます。",
 			"URGENCY": "緊急度"
 		},
+		"LADING": {
+			"GROUPS_AND_PROJECTS": ""
+		},
 		"LANDING": {
 			"ACTION_DELETE_THIS_GROUP": "選択したグループ削除",
 			"ACTION_EDIT_GROUP_NAME": "選択したグループ編集",
@@ -5439,6 +5444,7 @@
 			"PLACE_HOLDER_PROJECT": "プロジェクト",
 			"PLACE_HOLDER_SHOW_MORE": "もっと見る",
 			"PROJECT": "プロジェクト",
+			"PROJECTS": "プロジェクト",
 			"PROJECT_GROUP": "プロジェクトグループ",
 			"PROJECT_GROUPS": "プロジェクトグループ",
 			"PROJECT_GROUP_MEMBER": "プロジェクトグループメンバー",
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index 417bb6e3f8..ce64ffa14b 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -1066,6 +1066,7 @@
 			"ADD": "추가",
 			"CANCEL": "취소",
 			"CONFIRM": "확인",
+			"CREATE": "생성",
 			"DELETE": "삭제",
 			"DONE": "완료",
 			"DOWNLOAD": "다운로드",
@@ -5275,6 +5276,7 @@
 			"PROJECT_ALERT_ACTIVATION_DESC_2": "통합된 외부 이벤트를 수신하거나 이 프로젝트를 관리하려면 '얼럿 활성화' 버튼을 클릭하세요.",
 			"PROJECT_ID": "프로젝트 아이디: ",
 			"PROJECT_MEMBER_LABEL": "레이블",
+			"RENAME": "이름 수정",
 			"REPORT_CANCEL": "취소",
 			"REPORT_DESC": "SpaceONE은 프로젝트를 바탕으로 한 월간 보고서를 제공합니다. 곧 더 많은 콘텐츠를 제공할 예정입니다. ",
 			"REPORT_DOWNLOAD_FILE_DESC": "*제공하는 파일 형식 (PDF, PPTX, CSV)",
@@ -5367,6 +5369,9 @@
 			"TITLE_INFO_MESSAGE": "이벤트 규칙은 오름차순으로 실행됩니다.",
 			"URGENCY": "긴급도"
 		},
+		"LADING": {
+			"GROUPS_AND_PROJECTS": "프로젝트 그룹과 프로젝트"
+		},
 		"LANDING": {
 			"ACTION_DELETE_THIS_GROUP": "선택한 그룹 삭제 ",
 			"ACTION_EDIT_GROUP_NAME": "선택한 그룹 편집 ",
@@ -5439,6 +5444,7 @@
 			"PLACE_HOLDER_PROJECT": "프로젝트 ",
 			"PLACE_HOLDER_SHOW_MORE": "더보기",
 			"PROJECT": "프로젝트",
+			"PROJECTS": "프로젝트",
 			"PROJECT_GROUP": "프로젝트 그룹 ",
 			"PROJECT_GROUPS": "프로젝트 그룹 ",
 			"PROJECT_GROUP_MEMBER": "프로젝트 그룹 멤버",
diff --git a/packages/mirinae/src/components.ts b/packages/mirinae/src/components.ts
index 30dc6104b0..28f52ae19c 100644
--- a/packages/mirinae/src/components.ts
+++ b/packages/mirinae/src/components.ts
@@ -29,6 +29,7 @@ export { default as PTooltip } from './data-display/tooltips/PTooltip.vue';
 export { default as PTree } from './data-display/tree/PTree.vue';
 export { default as PTreeView } from './data-display/tree/tree-view/PTreeView.vue';
 export { default as PTreeItem } from './data-display/tree/tree-view/PTreeItem.vue';
+export { default as PTreeNode } from './data-display/tree/new-tree/PTreeNode.vue';
 export { default as PAvatar } from './data-display/avatar/PAvatar.vue';
 
 /* Feedbacks */
diff --git a/packages/mirinae/src/data-display/empty/PEmpty.vue b/packages/mirinae/src/data-display/empty/PEmpty.vue
index 28615bbaae..23aa2c13e1 100644
--- a/packages/mirinae/src/data-display/empty/PEmpty.vue
+++ b/packages/mirinae/src/data-display/empty/PEmpty.vue
@@ -39,6 +39,8 @@
 
 <script setup lang="ts">
 
+import type { TranslateResult } from 'vue-i18n';
+
 import PButton from '@/controls/buttons/button/PButton.vue';
 import type { ButtonStyle } from '@/controls/buttons/button/type';
 import { BUTTON_STYLE } from '@/controls/buttons/button/type';
@@ -50,10 +52,10 @@ import { EmptyImageSize } from '@/data-display/empty/type';
 interface EmptyProps {
     showImage?: boolean;
     imageSize?: EmptyImageSize;
-    title?: string;
+    title?: TranslateResult;
     showButton?: boolean;
     buttonStyleType?: ButtonStyle;
-    buttonTitle?: string;
+    buttonTitle?: TranslateResult;
 }
 
 const props = withDefaults(defineProps<EmptyProps>(), {
diff --git a/packages/mirinae/src/data-display/field-title/PFieldTitle.vue b/packages/mirinae/src/data-display/field-title/PFieldTitle.vue
index 4288cf0df8..2cbd81af95 100644
--- a/packages/mirinae/src/data-display/field-title/PFieldTitle.vue
+++ b/packages/mirinae/src/data-display/field-title/PFieldTitle.vue
@@ -28,9 +28,10 @@
 </template>
 
 <script lang="ts" setup>
+import type { TranslateResult } from 'vue-i18n';
 
 interface FieldTitleProps {
-    label?: string;
+    label?: TranslateResult;
     description?: string;
     size?: 'sm' | 'md' | 'lg';
     fontWeight?: 'regular' | 'bold';
diff --git a/packages/mirinae/src/data-display/tooltips/PTooltip.vue b/packages/mirinae/src/data-display/tooltips/PTooltip.vue
index 481b3dcf2d..1ede62403d 100644
--- a/packages/mirinae/src/data-display/tooltips/PTooltip.vue
+++ b/packages/mirinae/src/data-display/tooltips/PTooltip.vue
@@ -19,6 +19,29 @@ import type { TranslateResult } from 'vue-i18n';
 
 import type { TooltipPosition } from '@/data-display/tooltips/type';
 
+/*
+Tooltip Options are as follows:
+content - HTML text to be displayed in the tooltip. Can also be a function that returns the content or a Promise.
+classes
+targetClasses - CSS classes added to the target element of the tooltip.
+html - Boolean: allow HTML tooltip content.
+delay - Show/Hide delay, or object: { show: 500, hide: 100 } (ms).
+placement
+trigger - Events triggering the tooltip separated with spaces: 'hover', 'click', 'focus' or 'manual' ('manual' can't be combined with any other event).
+show - Boolean to manually open or hide the tooltip.
+offset - Offset of the position (px).
+container - Selector: Container where the tooltip will be appended (e.g. 'body'). Set it to false to append popover on target parent node.
+boundariesElement - DOM element for the tooltip boundaries.
+template - HTML template of the tooltip.
+arrowSelector - CSS selector to get the arrow element in the tooltip template.
+innerSelector - CSS selector to get the inner content element in the tooltip template.
+autoHide - Boolean: automatically close the tooltip on mouseover.
+hideOnTargetClick - Boolean: automatically close the tooltip on target click.
+loadingClass - CSS classes added to the tooltip when content is loading.
+loadingContent - Same as content, used when the actual tooltip content is loading.
+popperOptions - Other Popper.js options.
+*/
+
 export default defineComponent({
     name: 'PTooltip',
     directives: { tooltip: VTooltip },
diff --git a/packages/mirinae/src/data-display/tree/new-tree/PTreeNode.vue b/packages/mirinae/src/data-display/tree/new-tree/PTreeNode.vue
new file mode 100644
index 0000000000..6a9850a331
--- /dev/null
+++ b/packages/mirinae/src/data-display/tree/new-tree/PTreeNode.vue
@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import { computed, ref, toRef } from 'vue';
+
+import type { TranslateResult } from 'vue-i18n';
+
+import PTooltip from '@/data-display/tooltips/PTooltip.vue';
+import { useTreeNodeIcon } from '@/data-display/tree/new-tree/composables/use-tree-node-icon';
+import { useTreeNodeSelect } from '@/data-display/tree/new-tree/composables/use-tree-node-select';
+import { useTreeNodeToggle } from '@/data-display/tree/new-tree/composables/use-tree-node-toggle';
+import type {
+    TreeNodeDisplayType, TreeNodeIcon, TreeNodeLink,
+} from '@/data-display/tree/new-tree/type';
+import PLazyImg from '@/feedbacks/loading/lazy-img/PLazyImg.vue';
+import PI from '@/foundation/icons/PI.vue';
+import { useTextEllipsis } from '@/hooks/use-text-ellipsis/use-text-ellipsis';
+
+// CAUTION: Props should be defined here due to the limitation of `script setup` of Vue 2.7.
+const props = withDefaults(defineProps<{
+  id: string;
+  name?: TranslateResult;
+  icon?: TreeNodeIcon;
+  displayType?: TreeNodeDisplayType;
+  selectable?: boolean;
+  draggable?: boolean;
+  // work only when displayType is 'tree'
+  depth?: number;
+  expanded?: boolean; // toggle state
+  loading?: boolean; // loading state for children
+  hasChildren?: boolean;
+  // select and link
+  link?: TreeNodeLink; // for router link. work only when selectable is true
+  selected?: boolean; // for manual selection without link. work only when selectable is true
+}>(), {
+    name: undefined,
+    icon: undefined,
+    displayType: 'tree',
+    selectable: false,
+    draggable: false,
+    depth: 0,
+    expanded: false,
+    loading: false,
+    hasChildren: false,
+    link: undefined,
+    selected: false,
+});
+// CAUTION: Emit should be defined here due to the limitation of `script setup` of Vue 2.7.
+const emit = defineEmits<{(e: 'update:selected', value: boolean): void;
+  (e: 'update:expanded', value: boolean): void;
+}>();
+
+/* hover */
+const hoveredItem = ref<string>('');
+const isHovered = computed(() => hoveredItem.value && hoveredItem.value === props.id);
+
+/* text ellipsis */
+const textEl = ref<HTMLElement | null>(null);
+const { isEllipsis } = useTextEllipsis({ textEl });
+
+/* route */
+const {
+    isSelected,
+    target,
+    to,
+} = useTreeNodeSelect({
+    selectable: toRef(props, 'selectable'),
+    link: toRef(props, 'link'),
+    selected: toRef(props, 'selected'),
+}, emit);
+
+/* icon */
+const {
+    iconName,
+    iconColor,
+    imgUrl,
+} = useTreeNodeIcon(toRef(props, 'icon'));
+
+/* toggle */
+const {
+    enableToggle, showToggle, isExpanded,
+} = useTreeNodeToggle({
+    loading: toRef(props, 'loading'),
+    expanded: toRef(props, 'expanded'),
+    hasChildren: toRef(props, 'hasChildren'),
+    displayType: toRef(props, 'displayType'),
+}, emit);
+
+
+/* depth */
+const depthArray = computed(() => Array.from({ length: props.depth }, (_, i) => `${i}`));
+
+/* component */
+const component = computed(() => (props.link ? 'router-link' : 'div'));
+
+/* slot props */
+const slotProps = computed(() => ({
+    ...props,
+    isHovered,
+    enableToggle,
+    showToggle,
+    isExpanded,
+    isSelected,
+    isEllipsis,
+}));
+</script>
+
+<template>
+    <div class="p-tree-node">
+        <div class="tree-node-wrapper"
+             :class="{'selected': isSelected, 'selectable': props.selectable }"
+             @mouseenter="hoveredItem = props.id"
+             @mouseleave="hoveredItem = ''"
+        >
+            <component :is="component"
+                       class="node-outer-container"
+                       :target="target"
+                       :to="to"
+                       @click.native="$event.stopImmediatePropagation()"
+            >
+                <div v-for="dep in depthArray"
+                     :key="`depth-${dep}`"
+                     class="depth-spacer"
+                />
+                <slot name="outer-left"
+                      v-bind="slotProps"
+                />
+                <div v-if="props.draggable"
+                     class="drag-handle"
+                >
+                    <p-i name="ic_drag-handle"
+                         width="1rem"
+                         height="1rem"
+                    />
+                </div>
+                <div v-if="enableToggle"
+                     class="toggle-container"
+                >
+                    <p-i v-if="showToggle"
+                         name="ic_chevron-down"
+                         width="1rem"
+                         height="1rem"
+                         color="inherit transparent"
+                         class="toggle-button"
+                         :class="{ 'is-collapsed': !isExpanded }"
+                         @click.prevent="isExpanded = !isExpanded"
+                    />
+                </div>
+                <div class="node-inner-container">
+                    <p-i v-if="iconName"
+                         :name="iconName"
+                         :color="iconColor"
+                         width="1rem"
+                         height="1rem"
+                         class="icon"
+                    />
+                    <p-lazy-img v-else-if="imgUrl"
+                                :src="imgUrl"
+                                width="1rem"
+                                height="1rem"
+                                class="icon"
+                    />
+                    <slot name="inner-left"
+                          v-bind="slotProps"
+                    />
+                    <div ref="textEl"
+                         class="text-container"
+                    >
+                        <p-tooltip :key="`${props.id}-tooltip-${isEllipsis}`"
+                                   position="bottom-start"
+                                   :contents="props.name"
+                                   :options="{
+                                       trigger: 'manual',
+                                       show: isHovered && isEllipsis,
+                                   }"
+                        >
+                            <slot v-bind="slotProps">
+                                {{ props.name }}
+                            </slot>
+                        </p-tooltip>
+                    </div>
+                    <slot name="inner-right"
+                          v-bind="slotProps"
+                    />
+                </div>
+                <slot name="outer-right"
+                      v-bind="slotProps"
+                />
+            </component>
+            <div v-show="isHovered"
+                 class="node-action-container"
+            >
+                <slot name="action"
+                      v-bind="slotProps"
+                />
+            </div>
+        </div>
+        <div v-if="showToggle && isExpanded"
+             class="children-wrapper"
+        >
+            <slot name="children"
+                  v-bind="slotProps"
+            />
+        </div>
+    </div>
+</template>
+
+<style lang="postcss">
+.p-tree-node {
+    > .tree-node-wrapper {
+        @apply relative cursor-move border border-transparent outline-none rounded-md text-label-md;
+        &.selectable {
+            &:focus {
+                @apply bg-white border-secondary1;
+                box-shadow: 0 0 0 2px rgba(theme('colors.secondary1'), 0.2);
+            }
+            &:active {
+                box-shadow: none;
+            }
+        }
+        &.selected {
+            @apply bg-blue-200;
+        }
+        &.selectable:hover {
+            @apply cursor-pointer;
+            &:not(.selected) {
+                @apply bg-blue-100;
+            }
+        }
+        > .node-outer-container {
+            @apply inline-flex items-center w-full h-8 justify-between px-1 text-gray-800;
+            > .depth-spacer {
+                @apply w-4 flex-shrink-0;
+            }
+            > .drag-handle {
+                @apply w-6 flex-shrink-0 cursor-grab inline-flex items-center justify-center;
+            }
+            > .toggle-container {
+                @apply w-4 flex-shrink-0;
+                > .toggle-button {
+                    cursor: pointer;
+                    transition: transform 0.3s ease-in-out;
+                    &.is-collapsed {
+                        transform: rotate(-90deg);
+                    }
+                }
+            }
+            > .node-inner-container {
+                @apply inline-flex items-center flex-grow overflow-hidden gap-1;
+                > .icon {
+                    @apply flex-shrink-0;
+                }
+                > .text-container {
+                    @apply overflow-hidden whitespace-nowrap text-ellipsis;
+                }
+            }
+        }
+        > .node-action-container {
+            @apply absolute right-1 top-1/2 -translate-y-1/2;
+        }
+    }
+}
+</style>
diff --git a/packages/mirinae/src/data-display/tree/new-tree/composables/use-text-ellipsis.ts b/packages/mirinae/src/data-display/tree/new-tree/composables/use-text-ellipsis.ts
new file mode 100644
index 0000000000..3846507c67
--- /dev/null
+++ b/packages/mirinae/src/data-display/tree/new-tree/composables/use-text-ellipsis.ts
@@ -0,0 +1,19 @@
+import type { Ref } from 'vue';
+import { computed } from 'vue';
+
+import { useElementSize } from '@vueuse/core';
+
+interface UseTreeNodeTextEllipsisOptions {
+  textEl: Ref<HTMLElement | null>;
+}
+export const useTextEllipsis = ({ textEl }: UseTreeNodeTextEllipsisOptions) => {
+    const textElSize = useElementSize(textEl);
+    const isEllipsis = computed(() => {
+        const scrollWidth = textEl.value?.scrollWidth;
+        const textWidth = Math.ceil(textElSize.width.value);
+        return scrollWidth && scrollWidth > textWidth;
+    });
+    return {
+        isEllipsis,
+    };
+};
diff --git a/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-icon.ts b/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-icon.ts
new file mode 100644
index 0000000000..df89e93834
--- /dev/null
+++ b/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-icon.ts
@@ -0,0 +1,26 @@
+import type { Ref } from 'vue';
+import { computed } from 'vue';
+
+import type { TreeNodeIcon } from '@/data-display/tree/new-tree/type';
+
+export const useTreeNodeIcon = (icon: Ref<TreeNodeIcon|undefined>) => {
+    const iconName = computed<string>(() => {
+        if (!icon.value) return '';
+        if (typeof icon.value === 'string') return icon.value;
+        return icon.value.iconName || '';
+    });
+    const iconColor = computed<string|undefined>(() => {
+        if (!icon.value) return undefined;
+        return typeof icon.value === 'string' ? undefined : icon.value.iconColor;
+    });
+    const imgUrl = computed<string>(() => {
+        if (!icon.value) return '';
+        return typeof icon.value === 'string' ? '' : icon.value.imgUrl || '';
+    });
+
+    return {
+        iconName,
+        iconColor,
+        imgUrl,
+    };
+};
diff --git a/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-select.ts b/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-select.ts
new file mode 100644
index 0000000000..169349c5fe
--- /dev/null
+++ b/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-select.ts
@@ -0,0 +1,57 @@
+import type { Ref } from 'vue';
+import { computed, ref, watch } from 'vue';
+
+import { useRoute, useRouter } from 'vue-router/composables';
+
+import type { TreeNodeEmit, TreeNodeLink } from '@/data-display/tree/new-tree/type';
+
+export const useTreeNodeSelect = ({
+    selectable, link, selected,
+}: {
+    selectable: Ref<boolean>;
+    link: Ref<TreeNodeLink|undefined>;
+    selected: Ref<boolean>;
+}, emit: TreeNodeEmit) => {
+    const router = useRouter();
+    const route = useRoute();
+
+    const isLinkMatched = computed<boolean>(() => {
+        if (!selectable.value) return false;
+        if (!link.value?.to) return false;
+
+        if (link.value?.predicate) {
+            return link.value.predicate(link.value.to, route);
+        }
+
+        const resolved = router.resolve(link.value.to);
+        if (!resolved) return false;
+
+        let currentPath = route.fullPath;
+        if (currentPath.indexOf('?') > 0) {
+            currentPath = currentPath.slice(0, currentPath.indexOf('?'));
+        }
+        const resolvedHref = resolved.href;
+        return currentPath === resolvedHref;
+    });
+
+    const target = computed<string>(() => (link.value?.openNewTab ? '_blank' : '_self'));
+
+    const to = computed(() => link.value?.to);
+
+    const isSelected = ref(selected.value || isLinkMatched.value);
+    watch(selected, (value) => {
+        isSelected.value = value;
+    });
+    watch(isLinkMatched, (value) => {
+        isSelected.value = value;
+    });
+    watch(isSelected, (value) => {
+        emit('update:selected', value);
+    });
+
+    return {
+        isSelected,
+        target,
+        to,
+    };
+};
diff --git a/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-toggle.ts b/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-toggle.ts
new file mode 100644
index 0000000000..2f05cf5ce8
--- /dev/null
+++ b/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-toggle.ts
@@ -0,0 +1,38 @@
+import type { Ref } from 'vue';
+import { computed, ref, watch } from 'vue';
+
+import type {
+    TreeNodeDisplayType, TreeNodeEmit,
+} from '@/data-display/tree/new-tree/type';
+
+export const useTreeNodeToggle = ({
+    expanded, hasChildren, loading, displayType,
+}:{
+  expanded: Ref<boolean>;
+  hasChildren: Ref<boolean>;
+  loading: Ref<boolean>;
+  displayType: Ref<TreeNodeDisplayType>;
+}, emit: TreeNodeEmit) => {
+    const enableToggle = computed(() => displayType.value === 'tree');
+    const isExpanded = ref(expanded.value);
+    watch(expanded, (value) => {
+        isExpanded.value = value;
+    });
+    watch(isExpanded, (value) => {
+        emit('update:expanded', value);
+    });
+
+    // whether to show toggle button. only show when it is leaf node.
+    const showToggle = computed(() => {
+        if (!enableToggle.value) return false;
+        if (loading.value) return true;
+        return hasChildren.value;
+    });
+    const isLoading = ref(loading.value);
+    watch(loading, (value) => {
+        isLoading.value = value;
+    });
+    return {
+        enableToggle, showToggle, isExpanded,
+    };
+};
diff --git a/packages/mirinae/src/data-display/tree/new-tree/type.ts b/packages/mirinae/src/data-display/tree/new-tree/type.ts
new file mode 100644
index 0000000000..e7e5432d71
--- /dev/null
+++ b/packages/mirinae/src/data-display/tree/new-tree/type.ts
@@ -0,0 +1,32 @@
+import type { TranslateResult } from 'vue-i18n';
+import type { Location, Route } from 'vue-router';
+
+export type TreeNodeIcon = string | { iconName?: string; iconColor?: string; imgUrl?: string; };
+export type TreeNodeRoutePredicate = (to: Location, currentRoute: Route) => boolean;
+export interface TreeNodeLink {
+  to: Location;
+  predicate?: TreeNodeRoutePredicate;
+  openNewTab?: boolean;
+}
+export type TreeNodeDisplayType = 'tree' | 'list';
+export type TreeNodeToggle = 'expanded' | 'collapsed' | 'hidden' | 'loading';
+export interface TreeNodeProps {
+  id: string;
+  name?: TranslateResult;
+  icon?: TreeNodeIcon;
+  displayType?: TreeNodeDisplayType;
+  selectable?: boolean;
+  draggable?: boolean;
+  // work only when displayType is 'tree'
+  depth?: number;
+  expanded?: boolean; // toggle state
+  loading?: boolean; // loading state for children
+  hasChildren?: boolean;
+  // select and link
+  link?: TreeNodeLink; // for router link. work only when selectable is true
+  selected?: boolean; // for manual selection without link. work only when selectable is true
+}
+export interface TreeNodeEmit {
+  (e: 'update:selected', value: boolean): void;
+  (e: 'update:expanded', value: boolean): void;
+}
diff --git a/packages/mirinae/src/foundation/icons/icon-assets/ic_project-filled.svg b/packages/mirinae/src/foundation/icons/icon-assets/ic_project-filled.svg
new file mode 100644
index 0000000000..43d14460df
--- /dev/null
+++ b/packages/mirinae/src/foundation/icons/icon-assets/ic_project-filled.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect opacity="0.2" x="3" y="1.3335" width="10" height="13.3333" fill="#898995"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.3999 1.95455V14.0455H12.5999V1.95455H3.3999ZM3.1999 1C2.75807 1 2.3999 1.36162 2.3999 1.80769V14.1923C2.3999 14.6384 2.75807 15 3.1999 15H12.7999C13.2417 15 13.5999 14.6384 13.5999 14.1923V1.80769C13.5999 1.36162 13.2417 1 12.7999 1H3.1999Z" fill="#898995"/>
+<path d="M7.06644 4.88157V14.427H6.13311L6.13311 4.88157H7.06644Z" fill="#898995"/>
+<path d="M6.39977 9.33611H3.06644L3.06644 8.44521L6.39977 8.44521V9.33611Z" fill="#898995"/>
+<path d="M2.73311 4.88157H13.3998V5.77248H2.73311V4.88157Z" fill="#898995"/>
+</svg>
diff --git a/packages/mirinae/src/foundation/icons/p-icons/ic_project-filled.js b/packages/mirinae/src/foundation/icons/p-icons/ic_project-filled.js
new file mode 100644
index 0000000000..1f797c8a30
--- /dev/null
+++ b/packages/mirinae/src/foundation/icons/p-icons/ic_project-filled.js
@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'ic_project-filled': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 16 16',
+    data: '<path pid="0" opacity=".2" _fill="#898995" d="M3 1.333h10v13.333H3z"/><path pid="1" fill-rule="evenodd" clip-rule="evenodd" d="M3.4 1.955v12.09h9.2V1.956H3.4zM3.2 1c-.442 0-.8.362-.8.808v12.384c0 .446.358.808.8.808h9.6c.442 0 .8-.362.8-.808V1.808A.804.804 0 0012.8 1H3.2z" _fill="#898995"/><path pid="2" d="M7.066 4.882v9.545h-.933V4.882h.933z" _fill="#898995"/><path pid="3" d="M6.4 9.336H3.066v-.89H6.4v.89zM2.733 4.882H13.4v.89H2.733v-.89z" _fill="#898995"/>'
+  }
+})
diff --git a/packages/mirinae/src/foundation/icons/p-icons/index.js b/packages/mirinae/src/foundation/icons/p-icons/index.js
index 34e7d06d13..9a7a9f0452 100644
--- a/packages/mirinae/src/foundation/icons/p-icons/index.js
+++ b/packages/mirinae/src/foundation/icons/p-icons/index.js
@@ -193,6 +193,7 @@ import './ic_plus-circle'
 import './ic_plus'
 import './ic_print'
 import './ic_private-repository'
+import './ic_project-filled'
 import './ic_provider-aws'
 import './ic_provider-gcp'
 import './ic_prowler'
diff --git a/packages/mirinae/src/hooks/use-context-menu-attach/use-context-menu-attach.ts b/packages/mirinae/src/hooks/use-context-menu-attach/use-context-menu-attach.ts
index f344f46599..f3fff7562f 100644
--- a/packages/mirinae/src/hooks/use-context-menu-attach/use-context-menu-attach.ts
+++ b/packages/mirinae/src/hooks/use-context-menu-attach/use-context-menu-attach.ts
@@ -44,7 +44,7 @@ export const useContextMenuAttach = <Item extends MenuItem = MenuItem>({
 }: UseContextMenuAttachOptions<Item>): UseContextMenuAttachReturns<Item> => {
     const defaultAttachHandler: MenuAttachHandler<Item> = (inputText, _pageStart, _pageLimit) => {
         const allItems = isRef(menu) ? menu.value ?? [] : menu ?? [];
-        const filtered = allItems.filter((item) => getTextHighlightRegex(inputText).test(item.label as string|undefined ?? item.name ?? ''));
+        const filtered = inputText ? allItems.filter((item) => getTextHighlightRegex(inputText).test(item.label as string|undefined ?? item.name ?? '')) : allItems;
         if (_pageStart === undefined || _pageLimit === undefined) { // do not need to slice items
             return {
                 results: allItems,