diff --git a/apps/web/src/schema/identity/user-group/model.ts b/apps/web/src/schema/identity/user-group/model.ts
index 492937ca24..bd5c7be2e5 100644
--- a/apps/web/src/schema/identity/user-group/model.ts
+++ b/apps/web/src/schema/identity/user-group/model.ts
@@ -1,18 +1,15 @@
-import type { AuthType } from '@/schema/identity/user/type';
+import type { Tags } from '@/schema/_common/model';
+import type { UserModel } from '@/schema/identity/user/model';
 
 export interface UserGroupModel {
     user_group_id: string;
-    description: string;
-    notification: number;
-    users: number;
-    created: string;
-}
-
-export interface UserPerUserGroupModel {
-    user_id: string;
     name: string;
-    auth_type: AuthType;
-    last_activity: string;
+    description?: string;
+    users: UserModel[];
+    tags: Tags;
+    workspace_id: string;
+    domain_id: string;
+    created_at: string;
 }
 
 export interface NotificationChannelPerUserGroupModel {
diff --git a/apps/web/src/schema/identity/user-group/type.ts b/apps/web/src/schema/identity/user-group/type.ts
index d0cded4d22..f50a2ead6e 100644
--- a/apps/web/src/schema/identity/user-group/type.ts
+++ b/apps/web/src/schema/identity/user-group/type.ts
@@ -1,11 +1,8 @@
 import type {
     NotificationChannelPerUserGroupModel,
     UserGroupModel,
-    UserPerUserGroupModel,
 } from '@/schema/identity/user-group/model';
 
 export type UserGroupListItemType = Partial<UserGroupModel>;
 
-export type UserListPerUserGroupItemType = Partial<UserPerUserGroupModel>;
-
 export type NotificationChannelListPerUserGroupItemType = Partial<NotificationChannelPerUserGroupModel>;
diff --git a/apps/web/src/services/iam/components/UserGroupManagementAddGroupInfo.vue b/apps/web/src/services/iam/components/UserGroupManagementAddGroupInfo.vue
index c9dc5fa9e1..d3d78dee0b 100644
--- a/apps/web/src/services/iam/components/UserGroupManagementAddGroupInfo.vue
+++ b/apps/web/src/services/iam/components/UserGroupManagementAddGroupInfo.vue
@@ -11,7 +11,9 @@ import { PFieldGroup, PTextInput } from '@cloudforet/mirinae';
                 <p-text-input :placeholder="$t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.GROUP_NAME')" />
             </template>
         </p-field-group>
-        <p-field-group :label="$t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.DESCRIPTION')">
+        <p-field-group
+            :label="$t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.DESCRIPTION')"
+        >
             <template #default>
                 <p-text-input :placeholder="$t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.DESCRIPTION')" />
             </template>
diff --git a/apps/web/src/services/iam/components/UserGroupManagementAddNotificationChannelInfo.vue b/apps/web/src/services/iam/components/UserGroupManagementAddNotificationChannelInfo.vue
deleted file mode 100644
index 06be6478a5..0000000000
--- a/apps/web/src/services/iam/components/UserGroupManagementAddNotificationChannelInfo.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts" setup>
-import { PFieldGroup, PI } from '@cloudforet/mirinae';
-
-const NOFICATION_CHANNEL_LIST = [
-    'Email', 'SMS', 'Telegram', 'Slack', 'MS Teams', 'Kakaotalk',
-];
-
-/* Component */
-const handleNotificationChannel = (idx: number) => {
-    const notificationChannelWrapperEl = document.querySelector(`.notification-channel-wrapper:nth-child(${idx + 1})`);
-    notificationChannelWrapperEl.style.backgroundColor = '#F3F7FC';
-    notificationChannelWrapperEl.style.borderColor = 'gray/200';
-};
-</script>
-
-<template>
-    <div class="user-group-notification-channel-info-wrapper">
-        <p-field-group :label="$t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.NOTIFICATION_CHANNEL')">
-            <template #default>
-                <div class="notification-channel-list">
-                    <button v-for="(notification_channel, idx) in NOFICATION_CHANNEL_LIST"
-                            :key="`notification-channel-${idx}`"
-                            class="notification-channel-wrapper"
-                            :class="`channel-${idx}`"
-                            @click="handleNotificationChannel(idx)"
-                    >
-                        <p-i name="ic_megaphone-filled" />
-                        <span class="notification-channel">
-                            {{ notification_channel }}
-                        </span>
-                    </button>
-                </div>
-            </template>
-        </p-field-group>
-    </div>
-</template>
-
-<style scoped lang="postcss">
-.user-group-notification-channel-info-wrapper {
-    @apply flex flex-col bg-white border border-primary-3 rounded-md;
-    padding: 0.75rem;
-    .notification-channel-list {
-        @apply grid grid-cols-6 gap-x-1;
-        .notification-channel-wrapper {
-            @apply flex flex-col items-center gap-1 border border-gray-200 rounded-md font-[#3C2C84] font-bold;
-            padding: 0.75rem;
-            font-size: 14px;
-        }
-        .notification-channel-wrapper:hover {
-            @apply border border-blue-500 bg-blue-200;
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/iam/components/UserGroupManagementAddUsersModal.vue b/apps/web/src/services/iam/components/UserGroupManagementAddUsersModal.vue
new file mode 100644
index 0000000000..9134770b3c
--- /dev/null
+++ b/apps/web/src/services/iam/components/UserGroupManagementAddUsersModal.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { computed, reactive } from 'vue';
+
+import { PButtonModal, PSelectDropdown } from '@cloudforet/mirinae';
+import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/type';
+
+import { USER_GROUP_MODAL_TYPE } from '@/services/iam/constants/user-group-constant';
+import { useUserGroupPageStore } from '@/services/iam/store/user-group-page-store';
+
+const userGroupPageStore = useUserGroupPageStore();
+const userGroupPageState = userGroupPageStore.state;
+const userGroupPageGetters = userGroupPageStore.getters;
+
+const storeState = reactive({
+    emailList: computed<MenuItem[]>(() => userGroupPageGetters.usersPerSelectedUserGroup.map((user) => ({
+        label: user.user_id,
+        name: user.name,
+    }))),
+});
+
+const handleConfirm = () => {};
+
+const handleClose = () => {};
+</script>
+
+<template>
+    <p-button-modal class="user-group-management-add-users-modal"
+                    :header-title="userGroupPageState.modal.title"
+                    :visible="userGroupPageState.modal.type === USER_GROUP_MODAL_TYPE.ADD_NEW_USER"
+                    size="md"
+                    @confirm="handleConfirm"
+                    @cancel="handleClose"
+                    @close="handleClose"
+    >
+        <template #body>
+            <div class="modal-contents">
+                <p>User</p>
+                <p-select-dropdown :menu="storeState.emailList"
+                                   multi-selectable
+                                   is-filterable
+                />
+            </div>
+        </template>
+    </p-button-modal>
+</template>
+
+<style scoped lang="postcss">
+.user-group-management-add-users-modal {
+    min-height: 34.875rem;
+    .modal-contents {
+        @apply flex flex-col bg-primary-4 rounded-md;
+        margin-bottom: 9rem;
+        padding: 1rem;
+        gap: 1rem;
+    }
+}
+</style>
diff --git a/apps/web/src/services/iam/components/UserGroupManagementEditModal.vue b/apps/web/src/services/iam/components/UserGroupManagementEditModal.vue
index b875e26237..7e5f88b068 100644
--- a/apps/web/src/services/iam/components/UserGroupManagementEditModal.vue
+++ b/apps/web/src/services/iam/components/UserGroupManagementEditModal.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { reactive } from 'vue';
 
-import { PButtonModal } from '@cloudforet/mirinae';
+import { PButtonModal, PButton } from '@cloudforet/mirinae';
 
 import UserGroupManagementAddGroupInfo from '@/services/iam/components/UserGroupManagementAddGroupInfo.vue';
-import UserGroupManagementAddNotificationChannelInfo
-    from '@/services/iam/components/UserGroupManagementAddNotificationChannelInfo.vue';
+import UserGroupManagementScheduleSetting from '@/services/iam/components/UserGroupManagementScheduleSetting.vue';
+import { USER_GROUP_MODAL_TYPE } from '@/services/iam/constants/user-group-constant';
 import { useUserGroupPageStore } from '@/services/iam/store/user-group-page-store';
 
 const userGroupPageStore = useUserGroupPageStore();
@@ -32,23 +32,48 @@ const handleConfirm = () => {
 
 const handleClose = () => {
     console.log('TODO: handleClose');
+    userGroupPageState.modal.type = '';
+};
+
+/* API */
+const handleCreate = () => {
+    console.log('TODO: Create API');
+};
+
+const handleUpdate = () => {
+    console.log('TODO: Update API');
 };
 </script>
 
 <template>
     <p-button-modal class="user-group-management-edit-modal"
                     :header-title="userGroupPageState.modal.title"
-                    :visible="userGroupPageState.modal.visible === 'create' || userGroupPageState.modal.visible === 'update'"
+                    :visible="userGroupPageState.modal.type === USER_GROUP_MODAL_TYPE.CREATE || userGroupPageState.modal.type === USER_GROUP_MODAL_TYPE.UPDATE"
                     size="md"
                     @confirm="handleConfirm"
+                    @cancel="handleClose"
                     @close="handleClose"
     >
         <template #body>
             <div class="modal-contents">
                 <user-group-management-add-group-info />
-                <user-group-management-add-notification-channel-info />
+                <user-group-management-schedule-setting />
             </div>
         </template>
+        <template #confirm-button>
+            <p-button v-if="userGroupPageState.modal.type === USER_GROUP_MODAL_TYPE.CREATE"
+                      theme="primary"
+                      @click="handleCreate"
+            >
+                {{ $t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.CONFIRM') }}
+            </p-button>
+            <p-button v-else-if="userGroupPageState.modal.type === USER_GROUP_MODAL_TYPE.UPDATE"
+                      theme="primary"
+                      @click="handleUpdate"
+            >
+                {{ $t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.UPDATE') }}
+            </p-button>
+        </template>
     </p-button-modal>
 </template>
 
diff --git a/apps/web/src/services/iam/components/UserGroupManagementHeader.vue b/apps/web/src/services/iam/components/UserGroupManagementHeader.vue
index 98c7b7a2d2..da2e581e0b 100644
--- a/apps/web/src/services/iam/components/UserGroupManagementHeader.vue
+++ b/apps/web/src/services/iam/components/UserGroupManagementHeader.vue
@@ -3,16 +3,16 @@ import { PHeading, PButton, PHeadingLayout } from '@cloudforet/mirinae';
 
 import { i18n } from '@/translations';
 
+import { USER_GROUP_MODAL_TYPE } from '@/services/iam/constants/user-group-constant';
 import { useUserGroupPageStore } from '@/services/iam/store/user-group-page-store';
 
 const userGroupPageStore = useUserGroupPageStore();
 
 const handleCreateGroup = () => {
     userGroupPageStore.updateModalSettings({
-        type: 'create',
+        type: USER_GROUP_MODAL_TYPE.CREATE,
         title: i18n.t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.TITLE'),
         themeColor: 'primary',
-        visible: 'create',
     });
 };
 </script>
diff --git a/apps/web/src/services/iam/components/UserGroupManagementScheduleSetting.vue b/apps/web/src/services/iam/components/UserGroupManagementScheduleSetting.vue
new file mode 100644
index 0000000000..a0134645b3
--- /dev/null
+++ b/apps/web/src/services/iam/components/UserGroupManagementScheduleSetting.vue
@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import type { TranslateResult } from 'vue-i18n';
+
+import {
+    PFieldGroup, PRadioGroup, PRadio, PI, PSelectButton, PSelectDropdown,
+} from '@cloudforet/mirinae';
+import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/type';
+
+import { i18n } from '@/translations';
+
+interface ScheduleRadioType {
+  key: string;
+  name: TranslateResult | string;
+}
+
+const state = {
+    scheduleSettingList: computed<ScheduleRadioType[]>(() => [
+        {
+            key: 'weekdays',
+            name: i18n.t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.WEEKDAYS'),
+        },
+        {
+            key: 'everyday',
+            name: i18n.t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.EVERYDAY'),
+        },
+        {
+            key: 'custom',
+            name: i18n.t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.CUSTOM'),
+        },
+    ]),
+    selectedScheduleRadioType: computed<undefined>(() => undefined),
+    days: computed<MenuItem[]>(() => [
+        {
+            name: 'Monday',
+            label: 'Mon',
+        },
+        {
+            name: 'Tuesday',
+            label: 'Tue',
+        },
+        {
+            name: 'Wednesday',
+            label: 'Wed',
+        },
+        {
+            name: 'Thursday',
+            label: 'Thu',
+        },
+        {
+            name: 'Friday',
+            label: 'Fri',
+        },
+        {
+            name: 'Saturday',
+            label: 'Sat',
+        },
+        {
+            name: 'Sunday',
+            label: 'Sun',
+        },
+    ]),
+};
+
+
+const selectedDays = ref<string[]>([]);
+const selectedTime = ref<ScheduleRadioType>();
+</script>
+
+<template>
+    <div class="user-group-schedule-setting-wrapper">
+        <p-field-group :label="$t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.SCHEDULE_SETTING')"
+                       required
+        >
+            <p-radio-group direction="horizontal">
+                <p-radio v-for="schedule_setting in state.scheduleSettingList.value"
+                         :key="schedule_setting.key"
+                         v-model="selectedTime"
+                         :value="schedule_setting"
+                >
+                    {{ schedule_setting.name }}
+                </p-radio>
+            </p-radio-group>
+            <div class="flex gap-1 py-2 px-0.5">
+                <p-i name="ic_info-circle"
+                     color="#007EE5"
+                     width="14px"
+                     height="14px"
+                />
+                <p class="text-xs text-blue-600">
+                    {{ $t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.INFO') }}
+                </p>
+            </div>
+            <div class="w-full overflow py-4 flex flex-wrap gap-2">
+                <p-select-button v-for="selectedDay in state.days.value"
+                                 :key="selectedDay.name"
+                                 v-model="selectedDays"
+                                 multi-selectable
+                                 :value="selectedDay.name"
+                >
+                    <!--                                 @change="handleUpdateDays(selectedDay)"-->
+                    {{ selectedDay.label }}
+                </p-select-button>
+            </div>
+            <div class="flex items-center gap-2">
+                <p-select-dropdown :menu="[{name: 'nine', label: '9:00'}]"
+                                   placeholder="9:00"
+                />
+                <span>to</span>
+                <p-select-dropdown :menu="[{name: 'eighteen', label: '18:00'}]"
+                                   placeholder="18:00"
+                />
+            </div>
+        </p-field-group>
+    </div>
+</template>
+
+<style scoped lang="postcss">
+.user-group-schedule-setting-wrapper {
+    @apply flex flex-col bg-white border border-primary-3 rounded-md;
+    padding: 0.75rem;
+}
+</style>
diff --git a/apps/web/src/services/iam/components/UserGroupManagementTable.vue b/apps/web/src/services/iam/components/UserGroupManagementTable.vue
index 6b1db003cd..e6c31a94c9 100644
--- a/apps/web/src/services/iam/components/UserGroupManagementTable.vue
+++ b/apps/web/src/services/iam/components/UserGroupManagementTable.vue
@@ -30,17 +30,13 @@ const queryTagHelper = useQueryTags({ keyItemSets: USER_GROUP_SEARCH_HANDLERS.ke
 const { queryTags } = queryTagHelper;
 
 const tableState = reactive({
-    fields: computed<DataTableFieldType[]>(() => {
-        const baseFields = [
-            { name: 'user_group_id', label: 'User Group ID' },
-            { name: 'description', label: 'Description' },
-            { name: 'notification', label: 'Notification' },
-            { name: 'users', label: 'Users' },
-            { name: 'created', label: 'Created' },
-        ];
-
-        return [...baseFields];
-    }),
+    fields: computed<DataTableFieldType[]>(() => [
+        { name: 'user_group_id', label: 'User Group ID' },
+        { name: 'description', label: 'Description' },
+        { name: 'notification', label: 'Notification' },
+        { name: 'users', label: 'Users' },
+        { name: 'created', label: 'Created' },
+    ]),
     valueHandlerMap: computed(() => ({
         user_group_id: makeDistinctValueHandler('identity.UserGroup', 'user_group_id', 'string'),
         description: makeDistinctValueHandler('identity.UserGroup', 'description', 'string'),
@@ -70,16 +66,16 @@ const dropdownState = reactive({
     selectedAction: '',
     menuItems: computed<MenuItem[]>(() => [
         {
-            name: 'update', label: i18n.t('IAM.USER_GROUP.ACTION.UPDATE'), type: 'item', disabled: !editState.isEditable,
+            name: USER_GROUP_MODAL_TYPE.UPDATE, label: i18n.t('IAM.USER_GROUP.ACTION.UPDATE'), type: 'item', disabled: !editState.isEditable,
         },
         {
-            name: 'remove', label: i18n.t('IAM.USER_GROUP.ACTION.REMOVE'), type: 'item', disabled: !editState.isRemoveAble,
+            name: USER_GROUP_MODAL_TYPE.REMOVE, label: i18n.t('IAM.USER_GROUP.ACTION.REMOVE'), type: 'item', disabled: !editState.isRemoveAble,
         },
         {
             type: 'divider',
         },
         {
-            name: 'add_new_user', label: i18n.t('IAM.USER_GROUP.ACTION.ADD_NEW_USER'), type: 'item',
+            name: USER_GROUP_MODAL_TYPE.ADD_NEW_USER, label: i18n.t('IAM.USER_GROUP.ACTION.ADD_NEW_USER'), type: 'item', disabled: !editState.isEditable,
         },
     ]),
     // selectedMenuItems: [] as SelectDropdownMenuItem[],
@@ -99,7 +95,11 @@ const handleSelectDropdown = async (inputText: string) => {
 
     switch (inputText) {
     case USER_GROUP_MODAL_TYPE.UPDATE:
-        console.log('TODO: Open Update User Group Modal');
+        userGroupPageStore.updateModalSettings({
+            type: USER_GROUP_MODAL_TYPE.UPDATE,
+            title: i18n.t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.UPDATE_TITLE'),
+            themeColor: 'primary',
+        });
         dropdownState.loading = false;
         break;
     case USER_GROUP_MODAL_TYPE.REMOVE:
@@ -107,7 +107,11 @@ const handleSelectDropdown = async (inputText: string) => {
         dropdownState.loading = false;
         break;
     case USER_GROUP_MODAL_TYPE.ADD_NEW_USER:
-        console.log('TODO: Open Add Users to Selected User Group Modal');
+        userGroupPageStore.updateModalSettings({
+            type: USER_GROUP_MODAL_TYPE.ADD_NEW_USER,
+            title: i18n.t('IAM.USER_GROUP.MODAL.ADD_NEW_USER.TITLE'),
+            themeColor: 'primary',
+        });
         dropdownState.loading = false;
         break;
     default:
diff --git a/apps/web/src/services/iam/constants/user-group-constant.ts b/apps/web/src/services/iam/constants/user-group-constant.ts
index 35a1598cc8..c6dff07fc9 100644
--- a/apps/web/src/services/iam/constants/user-group-constant.ts
+++ b/apps/web/src/services/iam/constants/user-group-constant.ts
@@ -1,46 +1,46 @@
-import type { KeyItemSet } from '@cloudforet/mirinae/types/controls/search/query-search/type';
+interface UserGroupSearchHandlers {
+    title: string;
+    items: {name: string; label: string; dataType?: string;}[]
+}
 
-export const USER_GROUP_SEARCH_HANDLERS = {
-    keyItemSets: [
-        {
-            title: 'Properties',
-            items: [
-                { name: 'user_group_name', label: 'User Group Name' },
-                { name: 'description', label: 'Description' },
-                { name: 'notification', label: 'Notification' },
-                { name: 'users', label: 'Users' },
-                { name: 'created', label: 'Created', dataType: 'datetime' },
-            ],
-        },
-        {
-            title: 'Advanced',
-            items: [{
-                name: 'tags',
-                label: 'Tags',
-                dataType: 'object',
-            }],
-        }] as KeyItemSet[],
-};
+export const USER_GROUP_SEARCH_HANDLERS: UserGroupSearchHandlers[] = [
+    {
+        title: 'Properties',
+        items: [
+            { name: 'user_group_name', label: 'User Group Name' },
+            { name: 'description', label: 'Description' },
+            { name: 'notification', label: 'Notification' },
+            { name: 'users', label: 'Users' },
+            { name: 'created', label: 'Created', dataType: 'datetime' },
+        ],
+    },
+    {
+        title: 'Advanced',
+        items: [{
+            name: 'tags',
+            label: 'Tags',
+            dataType: 'object',
+        }],
+    },
+];
 
 export const USER_GROUP_TABS = {
     USERS: 'users',
     NOTIFICATION_CHANNEL: 'notification_channel',
-} as const;
-
-export const USER_GROUP_USERS_SEARCH_HANDLERS = {
-    keyItemSets: [
-        {
-            title: 'Properties',
-            items: [
-                { name: 'user_id', label: 'User ID' },
-                { name: 'name', label: 'Name' },
-                { name: 'auth_type', label: 'Auth Type' },
-                { name: 'last_activity', label: 'Last Activity' },
-            ],
-        },
-    ],
 };
 
+export const USER_GROUP_USERS_SEARCH_HANDLERS: UserGroupSearchHandlers[] = [
+    {
+        title: 'Properties',
+        items: [
+            { name: 'user_id', label: 'User ID' },
+            { name: 'name', label: 'Name' },
+            { name: 'auth_type', label: 'Auth Type' },
+            { name: 'last_activity', label: 'Last Activity' },
+        ],
+    },
+];
+
 export const USER_GROUP_MODAL_TYPE = {
     UPDATE: 'update',
     REMOVE: 'remove',
diff --git a/apps/web/src/services/iam/pages/UserGroupMainPage.vue b/apps/web/src/services/iam/pages/UserGroupMainPage.vue
index f4216816ac..e0f8c9ecc3 100644
--- a/apps/web/src/services/iam/pages/UserGroupMainPage.vue
+++ b/apps/web/src/services/iam/pages/UserGroupMainPage.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { PHorizontalLayout } from '@cloudforet/mirinae';
 
+import UserGroupManagementAddUsersModal from '@/services/iam/components/UserGroupManagementAddUsersModal.vue';
 import UserGroupManagementEditModal from '@/services/iam/components/UserGroupManagementEditModal.vue';
 import UserGroupManagementHeader from '@/services/iam/components/UserGroupManagementHeader.vue';
 import UserGroupManagementTab from '@/services/iam/components/UserGroupManagementTab.vue';
@@ -31,6 +32,7 @@ const refreshUserGroupList = () => {
         </p-horizontal-layout>
         <user-group-management-tab />
         <user-group-management-edit-modal @confirm="refreshUserGroupList" />
+        <user-group-management-add-users-modal />
     </section>
 </template>
 
diff --git a/apps/web/src/services/iam/store/user-group-page-store.ts b/apps/web/src/services/iam/store/user-group-page-store.ts
index 156e93a44d..dd942f2efb 100644
--- a/apps/web/src/services/iam/store/user-group-page-store.ts
+++ b/apps/web/src/services/iam/store/user-group-page-store.ts
@@ -8,26 +8,38 @@ import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 import type { UserGroupListItemType } from '@/schema/identity/user-group/type';
 
 import type { ModalState } from '@/services/iam/types/user-group-type';
+import type { UserListItemType } from '@/services/iam/types/user-type';
+
+interface UserGroupPageState {
+    loading: boolean;
+    userGroups: UserGroupListItemType[];
+    selectedUserGroup: UserGroupListItemType;
+    totalCount: number;
+    selectedIndices: number[];
+    pageStart: number;
+    pageLimit: number;
+    searchFilters: ConsoleFilter[];
+    modal: ModalState;
+}
 
 export const useUserGroupPageStore = defineStore('page-user-group', () => {
-    const state = reactive({
+    const state = reactive<UserGroupPageState>({
         loading: true,
-        userGroups: [] as UserGroupListItemType[],
-        selectedUserGroup: {} as UserGroupListItemType,
+        userGroups: [],
+        selectedUserGroup: {},
         totalCount: 0,
         selectedIndices: [],
         pageStart: 1,
         pageLimit: 15,
-        searchFilters: [] as ConsoleFilter[],
+        searchFilters: [],
         modal: {
             type: '',
             title: '',
             themeColor: 'primary',
-            visible: undefined,
-        } as ModalState,
+        },
     });
     const getters = reactive({
-        selectedUserGroups: computed((): UserGroupListItemType[] => {
+        selectedUserGroups: computed<UserGroupListItemType[]>((): UserGroupListItemType[] => {
             if (state.selectedIndices.length === 1 && !isEmpty(state.selectedUserGroup)) return [state.selectedUserGroup];
             const userGroups: UserGroupListItemType[] = [];
             state.selectedIndices.forEach((d:number) => {
@@ -35,36 +47,64 @@ export const useUserGroupPageStore = defineStore('page-user-group', () => {
             });
             return userGroups ?? [];
         }),
+        usersPerSelectedUserGroup: computed<UserListItemType[]>((): UserListItemType[] => {
+            if (state.selectedUserGroup.users !== undefined) {
+                return state.selectedUserGroup.users.map((user) => {
+                    const {
+                        user_id, name, auth_type, last_accessed_at,
+                    } = user;
+                    return {
+                        user_id,
+                        name,
+                        auth_type,
+                        last_accessed_at,
+                    };
+                }) ?? [];
+            }
+            // TODO: update after get data (Api Connection)
+            return [
+                {
+                    user_id: 'email1@mz.co.kr',
+                    name: 'ad',
+                    auth_type: 'LOCAL',
+                    last_accessed_at: 'sfdsf',
+                },
+                {
+                    user_id: 'email2@mz.co.kr',
+                    name: 'ad11',
+                    auth_type: 'LOCAL',
+                    last_accessed_at: 'sfdsf',
+                },
+            ];
+        }),
     });
     const actions = {
         reset() {
             state.loading = true;
-            state.userGroups = [] as UserGroupListItemType[];
-            state.selectedUserGroup = {} as UserGroupListItemType;
+            state.userGroups = [];
+            state.selectedUserGroup = {};
             state.totalCount = 0;
             state.selectedIndices = [];
             state.pageStart = 1;
             state.pageLimit = 15;
-            state.searchFilters = [] as ConsoleFilter[];
+            state.searchFilters = [];
             state.modal = {
                 type: '',
                 title: '',
                 themeColor: 'primary',
-                visiable: undefined,
-            } as ModalState;
+            };
         },
         async listUserGroups() {
             //     TODO: api connect
         },
         updateModalSettings({
-            type, title, themeColor, visible,
+            type, title, themeColor,
         }: ModalState) {
             state.modal = {
                 ...state.modal,
                 type,
                 title,
                 themeColor,
-                visible: visible ?? undefined,
             };
         },
     };
diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index d668eb8e28..9bcef37753 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -58897,6 +58897,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>DAYS</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>REMOVE</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -58939,6 +58960,48 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>TODAY</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>YESTERDAY</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>
                                         </children>
                                     </folder_node>
                                 </children>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index 9fd29ceecf..42750283ef 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -3245,8 +3245,11 @@
 				},
 				"USERS": {
 					"ADD_USER": "Add User",
+					"DAYS": "days",
 					"REMOVE": "Remove",
-					"TITLE": "Users"
+					"TITLE": "Users",
+					"TODAY": "Today",
+					"YESTERDAY": "Yesterday"
 				}
 			},
 			"TITLE": "User Group"
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index a941b826e1..61f76b1291 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -3245,8 +3245,11 @@
 				},
 				"USERS": {
 					"ADD_USER": "ユーザー追加",
+					"DAYS": "日前",
 					"REMOVE": "削除",
-					"TITLE": "ユーザー"
+					"TITLE": "ユーザー",
+					"TODAY": "今日",
+					"YESTERDAY": "昨日"
 				}
 			},
 			"TITLE": "ユーザーグループ"
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index 8f241d4c7d..ea7b89a927 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -3245,8 +3245,11 @@
 				},
 				"USERS": {
 					"ADD_USER": "사용자 추가",
+					"DAYS": "일 전",
 					"REMOVE": "삭제",
-					"TITLE": "사용자 목"
+					"TITLE": "사용자 목록",
+					"TODAY": "오늘",
+					"YESTERDAY": "어제"
 				}
 			},
 			"TITLE": "사용자 그룹"